Éléments de groupement

Les balises de groupement sont avant tout destinées à en grouper d’autres:

• L’élément <Div>: Conteneur générique, <div> représente une division
de document. D’un point de vue sémantique, il n’a aucune valeur et n’est
voué qu’à regrouper des éléments en bloc.
• <span>: conteneur spécifiquement dédié au contenu phrasé. C’est un
élément en ligne. Il ne possède pas de sens particulier d’un point de vue
sémantique.
 Les hyperliens
• C’est bien l’élément qui permet de créer l’hypertexte.
• <a> Définit un hyperlien (Contenu entre <a> et </a> ) dont l’adresse de
destination est définie dans l’attribut href.
• Ce qui est entre <a> et </a> s’affichera (par défaut) en bleu souligné.
Ex:
Accès au site de l'<A href="http://www.usthb.dz/">USTHB</A>
Résultat: Accès au site de l'USTHB
 Liens en bloc
• Un lien peut contenir des éléments variés (un titre, une illustration, un
court extrait de texte,…).
• Cela permet d’accroître la surface cliquable, et d’éviter la duplication
inutile de liens menant vers une même adresse.
 Les liens internes (signets)

<!-- Lien interne vers l’élément id="sommaire" (sur la même page) -->
<A href="#sommaire">Retour Sommaire</A>

<!-- Lien externe vers le signet sur la page « universite.html » (à partir

d'autre page Web) -->
<A href="universite.html#sommaire">Retour Sommaire</A>
 Lien absolu, lien relatif

• Le lien absolu :formuler une adresse complète, utilisé pour un lien

menant vers un autre site hébergé sur un autre nom de domaine.
• Le lien relatif: se baser sur l’adresse courante, et faire référence à un
document stocké au même niveau, ou dans un niveau différent (sous-
répertoire, répertoire parent, répertoire racine). On indiquera
uniquement le chemin à partir de la base.
 Privilégier l'adresse relative
• Lors de la création d'un site destiné à un seul serveur, tous les liens
internes doivent être sous forme relative
• Si les liens internes sont sous forme absolue, ils seront perdus après le
transfert : les noms de répertoires ne seront peut-être pas les mêmes sur
le serveur !
• Utiliser une adresse relative permet au routeur de ne pas avoir à
résoudre à chaque requête le chemin vers le serveur. Cette opération
prend du temps, rendant ainsi la page plus longue à charger.
 URL relative
• Ressource située dans le • Ressource située dans un sous-répertoire
même répertoire que la du répertoire
page d'appel contenant la page d'appel
Href= le nom du fichier, Href=suite des sous-répertoires jusqu'au fichier
Ex : href="index.html". Ex: href= "rep/index.html".

lien

source Index.htm
Ressource située dans un répertoire
contenant la page d’appel:
Remonter chaque répertoire par ../
Ex: href="../index.html

Ressource située dans un répertoire situé

dans une branche latérale:
Remonter jusqu’au répertoire commun par ../,
puis redescendre la bonne branche
Ex: href="../rep2/index.html
 Les listes
• Les listes HTML sont prévues pour dresser des énumérations possédant
une valeur sémantique.
• Les balises <OL>, <UL>, <DL> déterminent 3 type des listes
(ordonnée, non ordonnée et liste de définition ).
• Dans <ol> et <dl>, les éléments de la liste sont décalés vers la droite
• Associée à ces balises, la balise<LI> précise quels sont les différents
éléments de la liste.
 Les types de listes
• <OL>:Liste ordonnée ou numérotée, permet d’exprimer l’ordre des
éléments (étapes d’un procédé,sections d’un livre,…)
• <UL> :Liste non ordonnée ou liste à puces, permet d’éxprimer une
énumeration non ordonnées (composants d’un objet,
caractéristiques,…)
• <DL> </DL> :Liste de définition, permet de citer des définitions ou
informations.
 Listes imbriquées
Texte 1
Texte 1
<OL> 1. texte Niveau 1
<LI> texte Niveau 1
80
<OL> 1. Texte Niveau 1.1
<LI> Texte Niveau 1.1 </LI>
2. Texte Niveau 1.2
<LI> Texte Niveau 1.2 </LI>
2. texte Niveau 2
</OL>
</LI> Texte 3
<LI> texte Niveau 2 </LI>
</OL>
 Une autre utilisation des listes DL: les
Glossaires
• Les glossaires comprennent une liste d'éléments.
81
• Les éléments d'un glossaire sont constitués par une expression à définir
(par exemple un terme spécialisé) et la définition qui le concerne.
• <dt> introduit une expression à définir.
• <dd> introduit la définition d'une expression.
 Exemple
Terme1
défnition terme 1
Terme 2
définition terme 2
Code HTML:
<dt>terme1</dt><dd>défnition terme 1</dd>
<dt>terme2</dt><dd>défnition terme 2</dd>
 Les tableaux
• Un élément <table> est destiné à contenir un ensemble d’informations
qui peuvent ou qui doivent être présentées dans une structure formatée
en colonnes et en lignes.
• Chaque élément <tr> représente une ligne de la table, qui contient elle-
même un ou plusieurs <td> ou <th>.
• Nb: Un usage détourné de cet élément a été fait durant de nombreuses années pour
structurer la présentation des pages web, en lieu et place des feuilles de style CSS ou
des balises <DIV>.
 <td>, <th>

• Une cellule <td> (table data) peut contenir du texte et beaucoup d’autres éléments
HTML tels que des liens, des images, des listes, etc. Elle est toujours imbriquée dans
un élément <tr>.
• Un élément <th> (table header) est une cellule spécialisée qui joue le rôle d’en-tête de
colonne (ou de ligne) dans un tableau. Il doit être imbriqué dans une balise <tr>.
• Attributs:
• colspan : Nombre de colonnes occupées et fusionnées par cette cellule
• rowspan : Nombre de lignes occupées et fusionnées par cette cellule.
Éléments d’un tableau
 <caption>, <thead>

• <caption> attribue une légende ou un titre à un tableau. Il doit être inséré

immédiatement après la balise ouvrante <table>,
• Un élément <thead> représente un en-tête de tableau. Il doit être placé après
<caption> et <colgroup> s’il y a lieu, et avant <tbody> ou <tfoot>.
• Son contenu est constitué d’enfants <tr>, eux-mêmes constitués d’un ou plusieurs
<th>.
• La spécification HTML n’autorise pas d’y placer des cellules classiques <td>, car il ne
s’agit pas de cellules pouvant représenter une tête de tableau.
 <tfoot>

• Un élément <tfoot> représente un pied de tableau, utilisé en conjonction

avec <thead> et <tbody>. On peut y placer zéro ou plusieurs <tr>.
• Attention : <tfoot> doit apparaître avant <tbody> dans le code afin de
fournir au navigateur les renseignements qu’il détient, avant de charger le
reste du contenu.
 <tbody>

• Un élément <tbody> représente un corps de tableau, utilisé en conjonction avec

<thead> et <tfoot>. Il regroupe les lignes <tr> qui contiennent les données du
tableau.
• Dans ce cas de figure, aucun élément <tr> ne peut être directement enfant de
<table>.
 <caption>, <colgroup>,<col>

• Un élément <colgroup> placé en début de <table> est utilisé pour spécifier des
propriétés communes à un groupe de colonnes.
• Elles seront affectées au nombre de colonnes indiqué par l’attribut span (Nombre de
colonnes auxquelles appliquer les propriétés). Il doit être placé avant tout usage de
<thead>, <tbody>, <tfoot>, et <tr>.
• Une énumération d’un ou plusieurs éléments <col> définit des propriétés individuelles
pour chacune des colonnes, prenant la priorité sur celles indiquées par le parent
<colgroup>.
 Utilité du découpage sémantique des tableaux
• Les navigateurs peuvent exploiter la structuration sémantique pour
agrémenter l’affichage de tableaux, particulièrement s’ils possèdent des
dimensions qui excèdent la surface de visualisation
• En maintenant ces éléments visibles à l’écran indépendamment des lignes, durant le
défilement du document.
• Le même principe peut être appliqué à l’impression pour conserver les blocs
d’entête et de pied de tableau, en haut et en bas de chaque page, si ce dernier doit
s’étaler sur plusieurs pages.
 Exemples
<table border="1">
<tr> <th>nom client</th>
<th colspan="2">Télephone</th>
</tr>
<tr> <td>client1</td> <td>555 77 854</td> <td>555 77 855</td>
</tr>
</table>
 Exemples
<table border="1">
<tr> <th>Nom client:</th> <td>Client1</td> </tr>
<tr>
<th ">Télephone:</th>
<td>555 77 854<rowspan="2/td>
</tr>
<tr> <td>555 77 855</td> </tr>
</table>
<table border=“1”>
<thead>
<tr><th>Article</th> Exemple 3
<th>Prix</th></tr>
</thead> <tfoot>
<tbody>
<tr><td>Article 1</td> <tr> <td>Total</td>
<td>1000DA</td></tr> <td>9000DA</td></tr>
<tr><td>Article2</td>
</tfoot>
<td>8000DA</td></tr>
</tbody> </table>
 Mise en évidence d’un texte
• <strong>: Du contenu placé entre balises <strong> doubles aura deux fois plus
d’importance. Il est affiché en gras.
• <em>: Il s’agit d’un procédé linguistique qui donne de l’importance au discours. Il est
affiché en italique.
• <b> Elle met le texte en gras, sans lui conférer d’importance particulière dans son
contexte.
• <i>: une portion de texte mise en italique, mais sans convoyer d’importance ou
d’emphase.
 Les images d’illustration
• La balise <img> permet d’ajouter une image au contenu de la page
HTML:
<img src=" url image " alt=" contenu alternatif" >
• Toujours ajouter ‘alt’ au cas où l’image ne s’afficherait pas
• Il est préférable de définir en HTML les images qui font partie du
contenu du document. Les images d’arrière plan ou de décoration seront
ajoutées dans la feuille de style.
 Support du multimédia
• audio : pour définir un son, comme la musique ou les autres flux audio
(streaming).
• video : Insérer un contenu video en streaming.
• track : Insérer un sous-titre à une vidéo affichée avec la balise video .
• embed : définit un contenu incorporé, comme un plug in.
 Élément PRE
• L’élément PRE définit un bloc de texte comme préformaté.
• Le texte d'un élément <pre> est affiché dans une police à largeur fixe
(généralement Courier) et conserve les espaces et les sauts de ligne.
 Élément BLOCKQUOTE
• L’élément BLOCKQUOTE est un élément de type bloc permettant de
délimiter une citation.
• Une citation peut indiquer une source d’information ou représenter des
notes de lecture.
• Les navigateurs restituent en général l’élément BLOCKQUOTE sous la
forme d’un bloc de texte en retrait.
 Élément ADDRESS
• L’élément ADDRESS, généralement placé à la fin d’un document, sert à
fournir des informations de contact applicables au document ou à une
partie essentielle de celui-ci.
<ADDRESS>
<A href="contact.html">le webmaster</A> est la personne à contacter pour tout
problème rencontré sur le site.
</ADDRESS>
 Élément ABBR
• L’ élément ABBR permet aux auteurs d’indiquer clairement les
occurrences des abréviations et des acronymes.
• Le contenu de cet élément spécifie l’expression abrégée telle qu’elle
apparaîtrait normalement dans le cours du texte.
• L’attribut title de cet élément peut servir à procurer la forme complète ou
développée de l’expression.
 <Details> et <summary>
• L’élément details permet de donner des informations complémentaires que
l’utilisateur peut afficher ou cacher selon ses besoins. À l’affichage, une petite flèche
permet de contrôler l’affichage de cet élément.
• L’élément summary permet de donner une légende à l’élément details, qui s’affichera
dès le départ.
• Ex: <details>
<summary>Copyright</summary>
<p> by Webmaster. All Rights Reserved.</p>
</details>
 <figure>, <figcaption>
• <figure> permet d’ajouter une image représentant un contenu comme une
illustration, diagramme,…
• <figcaption permet de lui associer une légende.
• Ex:
<figure>
<img src="illustration.jpg" alt="illustration">
<figcaption>Fig.1 – légende de la figure</figcaption>
</figure>
 Entités HTML
• Les caractères réservés en HTML doivent être remplacés par des entités de
caractères.
• Les caractères qui ne sont pas présents sur votre clavier peuvent également être
remplacés par des entités.
 Quelques codes d’entités HTML utiles
Entité HTML Nom de l’entité Code de l’entité
Espace protégé (non &nbsp; &#160;
cassant)
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;
Interaction avec l’utilisateur:
les formulaires HTML
 LES FORMULAIRES

• Un formulaire HTML est une partie du document constituée d’éléments

spéciaux étiquetés appelés commandes (cases à cocher, boutons d’option,
menus,etc.).
• L’utilisateur « remplit » le formulaire en modifiant ses commandes (en
saisissant un texte, en sélectionnant les articles d’un menu, etc.), avant de
le soumettre à un agent pour traitement(par exemple, à un serveur Web, à
un serveur de messagerie, etc.).
 La balise <FORM>
• Un formulaire est délimité par les balises <form> et </form>. Ce
conteneur contient toutes les autres balises (commandes) du formulaire.
• Il peut contenir aussi d'autres balises : <p>, <table>, etc., permettant la
mise en forme du formulaire.
 Les principaux attributs de <form>

• Action: URL du script qui traite les données recueillies.

• Method: sert à déterminer d’après quelle méthode de transmission HTTP les données
du formulaire atteindront leur cible. Valeurs:
• GET (valeur par défaut): les données sont envoyées sous forme d’une liste de
paramètres associée à l’URL
• POST: les données du formulaire sont envoyées dans le corps de requête HTTP,
et mises à disposition du serveur par l’intermédiaire d’un canal d’entrée standard.
• Name: nom du formulaire
 Éléments de formulaire
HTML définit plusieurs grands types de commandes :
• Commandes <input>: l’élément INPUT est de loin l’élément le plus employé dans un
formulaire. Il permet de créer des boutons d’action, des cases à cocher, des boutons
d’option, la saisie d’un texte d’une ligne, la sélection d’un fichier et de créer une
commande cachée.
• Les boutons personnalisés <button>
• Les menus <select>
• Les zones de saisies étendues <textarea>
• Les libellés <label>
 <input> et ses variantes

• L’élément <input> est particulier, car il revêt de multiples apparences et

fonctionnalités, uniquement caractérisées par l’attribut type.
• Un élément sans attribut type est considéré par défaut comme <input type="text">.
• L’élément <label> est une étiquette qui est liée par son attribut for à l’identifiant id
du champ <input> qui lui correspond.
• L’attribut value détermine la valeur du champ transmise à la validation du formulaire,
et l’attribut name son nom afin de retrouver quel champ correspond à quelle valeur
lors du traitement des données après leur envoi via HTTP,
Récapitulatif des anciens types
 Zone de texte
<Input type=text (valeur par défaut): crée une commande de saisie de texte
sur une seule ligne.
• L’attribut size indique la largeur initiale de la zone de saisie, exprimée en nombre
entier de caractères.
• L’attribut maxlength spécifie le nombre maximum de caractères que l’utilisateur
peut saisir.
• Exemple:
<INPUT type=text name="nom value="" size="10“ maxlength="25">
Exemple
 Mot de passe
• La valeur password crée une commande de saisie de texte sur une seule
ligne, de type mot de passe : le texte saisi est restitué de manière à
dissimuler les caractères (par exemple, une succession d’astérisques).
• Supporte les attributs complémentaires size et maxlength comme avec
la valeur text.
• La protection offerte par ce dispositif reste toute relative: le mot de passe
est transmis au serveur en texte clair et peut être lu par quiconque
possède un accès au réseau.
 Cases à cocher et boutons d’option
• La valeur checkbox crée une case à cocher, tandis que la valeur radio crée un bouton d’option.
• L’attribut complémentaire value, qui spécifie la valeur initiale de la commande, est obligatoire.
• L’attribut booléen checked spécifie que le bouton (ou la case) est sur « marche ».
Exemple d’éléments INPUT de type checkbox et radio
<INPUT type="radio" name= "genre" value= " masculin" checked>
<INPUT type="radio" name= " genre" value="feminin">

<INPUT type="checkbox" name=“materiel" value="PC" checked>

<INPUT type="checkbox" name=“meteriel" value="laptop">
Exemple
 Groupes
On peut rassembler les éléments dans un même groupe à l’aide d’un même attribut
name:
• Des boutons d’option appartenant au même groupe sont mutuellement exclusifs : un
clic sur l’un d’entre eux désactive les autres.
• Chaque bouton possède toutefois une valeur value différente
• En revanche, les cases à cocher laissent l’utilisateur libre de sélectionner plus d’une
option dans un groupe. Les champs de cases à cocher d’un même groupe possèdent le
même nom, des valeurs différentes, mais ne s’excluent pas mutuellement.
 Cacher des données
• L'attribut type="hidden" permet de cacher des données pour
faciliter le traitement des données recueillies par le serveur en
fournissant le nom du formulaire, l'URL du formulaire,…
• Les attributs utiles pour ce type sont :
• value : une chaîne de caractères. Valeur cachée à envoyer au serveur,
obligatoire.
 Fichier attaché et bouton d’action
• La valeur button crée un bouton d’action. L’intitulé du bouton est la
valeur de l’attribut value.
• La valeur file crée une commande de sélection de fichiers. Il s'agit de
donner la possibilité à l'utilisateur du formulaire de joindre un fichier à
son envoi. Le nom du fichier initial est en principe la valeur de l’attribut
value.
 Boutons submit et reset
• L'attribut type="submit permet la Soumission de données.
• Attribut value : une chaîne de caractères: Légende du bouton, par défaut Submit.
• Une variante est possible en utilisant le type image : type="image". Le bouton
d'envoi est alors une image.
• L'attribut type="reset" permet la réinitialisation d'un formulaire. Il s'agit d'un
bouton qui, cliqué, remet à leurs valeurs par défaut l'ensemble des champs du
formulaire.
• L'attribut Value: chaîne de caractères qui indique la légende du bouton, valeur par
défaut: Reset.
 Élément LABEL
• Quelques commandes de formulaire possèdent des libellés ou labels
automatiquement associés (comme les boutons d’action), mais la plupart
en sont dépourvues (les champs de texte, les cases à cocher, les boutons
d’option ainsi que les menus).
• Chaque élément LABEL est associé à exactement une commande de
formulaire. Ses balises d’ouverture et de fermeture sont obligatoires.
• L’attribut for associe explicitement un label à une autre commande
 Élément BUTTON
Les boutons créés par l’élément BUTTON fonctionnent exactement comme ceux créés
avec l’élément INPUT, mais offrent des possibilités de restitution plus variées,
puisque l’élément BUTTON peut posséder un contenu.
• Un élément BUTTON qui contient une image fonctionne de la même façon et peut
avoir le même aspect qu’un élément INPUT dont l’attribut type possède la valeur
image, mais admet en outre un contenu.
• Cet élément doit impérativement posséder une balise ouvrante et une balise de
fermeture.
 Élément SELECT et OPTION
• On peut créer un menu à l’aide d’un élément SELECT. Il s'agit d'une liste de propositions
ou d'options parmi lesquelles l'utilisateur doit opérer un choix. Ce choix peut être unique ou
multiple.
• Les principaux attributs de l’élément SELECT sont:
• L’attribut name spécifie le nom de la commande.
• L’attribut size spécifie le nombre de lignes de la zone de liste
• Les options possibles sont décrites dans un conteneur <option>.
• Chaque "option" est une possibilité de choix dans le menu <select>. Le choix en question est
mentionné entre <option>…</option>
 Élément OPTGROUP

• On peut regrouper logiquement des options à l’aide de l’élément OPTGROUP. Cela

est particulièrement utile quand l’utilisateur doit effectuer un choix à partir d’une
longue liste d’options

• Les groupes d’options apparentées sont plus faciles à comprendre et à se remémorer

qu’une seule longue liste d’options.
 Élément TEXTAREA
• L’élément TEXTAREA permet de créer une zone de texte de saisie multi ligne qui
permet de saisir plusieurs lignes de texte. Celles-ci sont contenues dans « value ».
• Les attributs de l’élément TEXTAREA sont les suivants:
• L’attribut name spécifie le nom de la commande.
• L’attribut rows spécifie le nombre de lignes de texte visibles.
• L’attribut cols spécifie la largeur visible
Nouveaux types de Input en HTML5
 Recherche

• Un élément input avec l’attribut type="search" se comportera quasiment

de la même manière qu’un élément input avec un attribut type="text" :
<input id="recherche" name="recherche" type="search">
• La seule différence entre « text » et « search », c’est qu’un navigateur
pourra afficher un champ de recherche différemment pour refléter le
style des champs de recherche du système d’exploitation.
 Coordonnées

• Il existe trois nouvelles valeurs pour l’attribut type correspondant à

différents types de coordonnées:
• adresse mail : type="email"
• sites web : type="url"
• numéros de téléphone: type="tel"
• Ces champs se comporteront comme des zones de saisie, mais les
navigateurs disposeront d’un peu plus d’informations à propos des
données attendues dans le champ.
Exemple
 L’attribut PLACEHOLDER

• Permet d’afficher un texte de substitution pour un champs de saisie vide.

Exemple:
<input id=“nom" name=“nom" type="text" placeholder="saisir votre nom">
• Ce texte est généralement affiché d’une couleur plus claire qu’une véritable valeur.
• Non encore supporté par tous les navigateurs.
 L’attribut AUTOFOCUS
<input id="statut" name="statut" type="text" autofocus>
• Cet attribut permet de sélectionner automatiquement un champ précis
d’un formulaire dès que le document est chargé.
• L’attribut autofocus ne marche pas seulement avec l’élément input. Il
peut être utilisé avec n’importe quel type de champ, comme textarea ou
select, mais une fois seulement par document.