Interaction Humain – Machine sur le Web

Partie I : Modalités de l’interaction

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 Makup 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 :
Indique qu’il s’agit bien d’une
1ère partie : En-tête < head >
page Web HTML5.
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

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

Le titre de la
page

Les éventuelles fonctions qui gèrent certains

événements, notamment en javascript où
……………………..….. est le fichier contenant
toutes les fonctions en …………………...

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

III/ Les éléments d’une page HTML

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

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

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

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 :

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

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

<table>
<tr> Affichage :
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>25 ans</td> Cela donne un tableau sans bordures. Il faudra
<td>France</td>
</tr> utiliser CSS pour en obtenir.
</table>

Exemple : tableau structuré

<caption>Passagers</caption> Affichage :
<head>
<tr>
<th>Prénom</th>
<th>âge</th>
<th>Pays</th>
</tr>
</head>

<tfoot>
<tr>
<th>Prénom</th>
<th>âge</th>
<th>Pays</th>
</tr>
</tfoot>

<tbody

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

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 ……………….. La balise ……………..devra avoir les attributs
…………………………….. et ………………………….. 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 :
Affichage :
 Un champ de saisie pour du texte :
<label for= "txt">Mon texte : </label>
<input type="text" name="txt" id="txt" />

Affichage :

 Un champ de saisie pour les mots de passe

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

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

  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" />

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

Affichage :

 Un menu à sélections multiples :

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

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

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

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

 ………………………………………….. : 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.
 ……………………………………………. : équivalent au bouton submit, présenté sous forme d’image.
Ajouter l’attribut src pour indiquer l’URL de l’image.
 ……………………………………………. : 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…
 faire la mise en page
 récupérer les données du formulaire

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