Interaction Humain – Machine sur le Web

Partie I : Modalités de l’interaction, le HTML.

Histoire :
Crée à la fin du XXème siècle par Tim Berners–Lee et Robert Cailliau, le Web (World Wide Web
ou WWW ou toile d’araignée mondiale en français) est entré dans pratiquement tous les foyers
dans le monde. Il permet la consultation, via un navigateur, de pages de sites internet.

I/ IHM
Définition :
Les Interactions Humain – Machine (IHM) sur le Web définissent les moyens et les outils mis en
œuvre afin qu’une personne physique puisse agir (contrôler, communiquer) à distance, par
l’intermédiaire d’internet par exemple.
Parmi ces moyens, on trouve le langage HTML (Hypertext Markup Language). C’est un langage
de balisage. Il est interprété dans le navigateur du client au niveau 1 (structure ci-dessous).

II/ Structure principale d’un fichier HTML

Les pages HTML sont remplies de « balises ». Elles indiquent à l’ordinateur comment comprendre
ce qu’il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire de symboles <
et >.
Elles indiquent la nature du texte qu’elles encadrent.

IHM partie I : Modalités de l’interaction HTML Page 1 sur 7

OBLIGATOIRE:
Indiquequ’il s’agit bien d’une
1ère partie : En-tête < head >
page Web HTML 5.
Donne quelques informations générales
sur la page(titre, encodage….)
Balise principale. Elle
englobe tout le contenu
de la page. 2ème partie : le corps < body >
Partie principale ou se trouve la
majeure partie du code.

L’éventuel style de page (définition des

: couleurs, des polices de caractères, …
Dans l’en-tête d’un document HTML on retrouve par exemple
où style.cssest un fichier dans
lequel est contenu le stylede tous les
éléments de la page.
L’encodage

Le titre de la
page.

Les éventuelles fonctions qui gèrent certains

événements, notamment enJavascript, où
script.jsest le fichier contenant toutes
les fonctions enJavascript.

Dans le corps, il est mis tout ce qui doit être proposé aux personnes accédant à cette page :
Du texte, des images, des liens, ….

IHM partie I : Modalités de l’interaction HTML Page 2 sur 7

III/ Les éléments d’une page HTML
Tout document doit être structuré. C’est la raison pour laquelle chaque élément devrait être balisé.
Il s’écrit par défaut
Nom Syntaxe Exemple à l’aide d’une taille de caractères plus titre
<h1>…< / h1> <h1>mon titre niveau 1< / h1> petite que le titre de
<h2>…< / h2> <h2>mon titre niveau 2< / h2> niveau 1.(→h6)
paragraphe
<p> … </p> <p>Mon paragraphe.</p>
italique
<i> … </i> <i> mon texte en italique </i>
<em> … </em> <em> mon texte en italique </em> src permet
gras
<b> … </b> <b>mon texte en gras</b> d’indiquer le
<strong>…/<strong> <strong>texte en gras</strong> chemin de
images
<img src=’ … ‘> <img src=’mon image.jpg’ alt=’image’> l’image.
liens texte court
<a href=’…’>…</a> <a href=’https://monLycée.fr/’>c’est alt
mon lycée</a> affiché à la place
Retour à la de l’image si
ligne <br> <br>
Séparation celle-ci ne peut
horizontale <hr> <hr>
Saut de
ligne <br /> <br />

Exemple : Ouvrir un document texte simple sous note ou notepad, puis écrire ce qui suit en
respectant les indentations.
Affichage :

IHM partie I : Modalités de l’interaction HTML Page 3 sur 7

Les blocs :
Les blocs sont très utilisés en HTML. Ils s’écrivent ainsi :

Ils servent à diviser de façon structurée une page Web.

Les cadres :
Les cadres sont des moyens d’afficher une autre page ou un autre objet dans la page courante.
Elles sont très utilisées pour partager des vidéos par exemple.

Les listes :
Affichage : Affichage :

Les tableaux :
<tr></tr> délimite une ligne du tableau
<td></td> délimite le contenu d’une cellule
En HTML le tableau se construit ligne par ligne ( <tr> ). Dans chacune, on indique le contenu des
différentes cellules ( <td> ).

Exemple: tableau simple

Affichage:

Cela donne untableau sans bordures. Il faudra

utiliser CSS pour en obtenir.

IHM partie I : Modalités de l’interaction HTML Page 4 sur 7

Exemple : tableau structuré

Affichage :

Les balises <thead></<thead>, <tfoot></tfoot> et <tbody></tbody> ne sont

pas obligatoires. Elles indiquent respectivement l’en-tête, le pied et le corps du tableau.

Les formulaires :
Les formulaires sont aussi très répandus. C’est une zone interactive de la page, dans laquelle le
visiteur peut saisir des informations.
On délimite un formulaire à l’aide de la balise form. La balise form devra avoir les attributs method
et action permettant le traitement du formulaire.

La balise < label > permet d’écrire un libellé. On l’associe à un champ de formulaire avec
l’attribut for, qui doit avoir la même valeur que l’id du champ.
Une grande partie des éléments du formulaire peut s’insérer avec la balise <input …/> La
valeur de son attribut type indique quel type de champ doit être inséré :

Dans les formulaires on peut voir :

• Un champ de saisie pour du texte :
<label for= "txt">Mon texte : </label>
<input type="text" name="txt" id="txt" />

IHM partie I : Modalités de l’interaction HTML Page 5 sur 7

 Affichage :

Affichage :

 Un champ de saisie pour les mots de passe

<label for= "mdp">Mot de passe : </label>
<input type="password" name="mdp" id="mdp" />

• Un champ de sélection unique

<label for= "choix">Mon choix : </label>
<input type="radio" name="choix" id="choix" />

Affichage :

 Une case à cocher

<label for= "choix">Mon texte : </label>
<input type="checkbox" name="choix" id="choix" />

Affichage :

IHM partie I : Modalités de l’interaction HTML Page 6 sur 7

 • Un menu déroulant :
<label>
<select name= "choix">
<option>option 1</option>
<option>option 2</option>
…….
</select>
</label>

Affichage :

 Un menu à sélections multiples :

<label>
<select multiple name= "liste[]">
<option>option 1</option>
<option>option 2</option>
</select> </label>

 Un bouton
<label><input type="
submit" name="monbouton" /></label> Affichage :
<

Attention différents types de boutons suivant l’usage :

 type="submit"
: principal bouton d’envoi de formulaire. Le visiteur sera conduit à la page indiquée
dans l’attribut action du formulaire.
 : remise à zéro du formulaire.
type="reset"
 type="image"
: équivalent au bouton submit, présenté sous forme d’image.
Ajouter l’attribut src pour indiquer l’URL de l’image.
 type="button"
: bouton générique, qui n’aura (par défaut) aucun effet. En général, ce bouton est
géré en Javascript pour exécuter des actions sur la page.

Ne pas hésiter à aller sur le site https://www.w3schools.com , vous y trouverez plein de

renseignements supplémentaires, des astuces, des exemples corrigés…..

Dans une autre partie de cours nous utiliserons CSS qui permettra par exemple :
• d’écrire en rouge et souligner
• changer la police, la taille du texte…

IHM partie I : Modalités de l’interaction HTML Page 7 sur 7

 • faire la mise en page
• récupérer les données du formulaire

IHM partie I : Modalités de l’interaction HTML Page 8 sur 7