Interaction Humain – Machine sur le Web

Partie I : Modalités de l’interaction

Histoire :
Crée à la fin du XXe siècle par Tim Berners–Lee et Robert Cailliau, le Web (World Wide Web ou
WWW) est entré dans pratiquement tous les foyers dans le monde. Il permet la consultation, via un
navigateur, de pages de sites internet. Régi par le consortium W3C.

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, communique) à 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 :
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ù
script.js est le fichier contenant toutes
les fonctions en Javascript.

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

Affichage :

Cela donne un tableau sans bordures. Il faudra

utiliser CSS pour en obtenir.

Exemple : tableau structuré

Affichage :

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

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

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

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

 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.

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

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