HTML – Bachelor 2 – Développement web

Structure d’un document

Il est recommandé qu’un document HTML ait la structure minimale suivante :

<!doctype html>
<html lang="fr-FR" >
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
 
<body>
  <!-- contenu de la page -->
</body>
 
</html>

Mémento des balises HTML

Voici une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines dans le cours, mais il y en a d’autres que nous n’avons pas eu l’occasion d’étudier. Généralement, les balises que nous n’avons pas étudiées sont des balises un peu plus rarement utilisées.

Vous pouvez vous servir de cette chapitre comme d’un aide-mémoire lorsque vous développez votre site web.

Attention, j’insiste : cette annexe n’est pas complète et c’est volontaire. Je préfère mettre moins de balises et garder seulement celles qui me semblent les plus utiles dans la pratique.

Une référence exhaustive des éléments HTML est fournie sur le site du Mozilla Developer Network : https://developer.mozilla.org/fr/docs/Web/HTML/Element

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d’une page web.

Balise	Description
`<html>`	Balise principale
`<head>`	En-tête de la page
`<body>`	Corps de la page

Balises de premier niveau

Code minimal d’une page HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
    </head>

    <body>
      <!-- ICI vient le contenu à afficher dans la page -->
    </body>
</html>

Balises d’en-tête

Ces balises sont toutes situées dans l’en-tête de la page web, c’est-à-dire entre <head> et </head> :

Balise	Description
`<link />`	Liaison avec une feuille de style
`<meta />`	Métadonnées de la page web (charset, mots-clés, etc.)
`<script>`	Code JavaScript
`<style>`	Code CSS
`<title>`	Titre de la page

Balises d’en-tête

Balises de structuration du texte

Balise	Description
`<abbr>`	Abréviation
`<blockquote>`	Citation (longue)
`<cite>`	Citation du titre d’une œuvre ou d’un évènement
`<q>`	Citation (courte)
`<sup>`	Exposant
`<sub>`	Indice
`<strong>`	Mise en valeur forte
`<em>`	Mise en valeur normale
`<mark>`	Mise en valeur visuelle
`<h1>`	Titre de niveau 1
`<h2>`	Titre de niveau 2
`<h3>`	Titre de niveau 3
`<h4>`	Titre de niveau 4
`<h5>`	Titre de niveau 5
`<h6>`	Titre de niveau 6
`<img />`	Image
`<figure>`	Figure (image, code, etc.)
`<figcaption>`	Description de la figure
`<audio>`	Son
`<video>`	Vidéo
`<source>`	Format source pour les balises `<audio>` et `<video>`
`<a>`	Lien hypertexte
`<br />`	Retour à la ligne
`<p>`	Paragraphe
`<hr />`	Ligne de séparation horizontale
`<address>`	Adresse de contact
`<del>`	Texte supprimé
`<ins>`	Texte inséré
`<dfn>`	Définition
`<kbd>`	Saisie clavier
`<pre>`	Affichage formaté (pour les codes sources)
`<progress>`	Barre de progression
`<time>`	Date ou heure

Balises de structuration du texte

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

Balise	Description
`<ul>`	Liste à puces, non numérotée
`<ol>`	Liste numérotée
`<li>`	Élément de la liste à puces
`<dl>`	Liste de définitions
`<dt>`	Terme à définir
`<dd>`	Définition du terme

Balises de listes

Balises de tableau

Balise	Description
`<table>`	Tableau
`<caption>`	Titre du tableau
`<tr>`	Ligne de tableau
`<th>`	Cellule d’en-tête
`<td>`	Cellule
`<thead>`	Section de l’en-tête du tableau
`<tbody>`	Section du corps du tableau
`<tfoot>`	Section du pied du tableau

Balises de tableau

Balises de formulaire

Balise	Description
`<form>`	Formulaire
`<fieldset>`	Groupe de champs
`<legend>`	Titre d’un groupe de champs
`<label>`	Libellé d’un champ
`<input />`	Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
`<textarea>`	Zone de saisie multiligne
`<select>`	Liste déroulante
`<option>`	Élément d’une liste déroulante
`<optgroup>`	Groupe d’éléments d’une liste déroulante

Balises de formulaire

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

Balise	Description
`<header>`	En-tête
`<nav>`	Liens principaux de navigation
`<footer>`	Pied de page
`<section>`	Section de page
`<article>`	Article (contenu autonome)
`<aside>`	Informations complémentaires

Balises sectionnantes

Balises génériques

Les balises génériques sont des balises qui n’ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc.
Parfois, on a besoin d’utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l’une est en ligne, l’autre est en bloc.

Balise	Description
`<span>`	Balise générique de type inline
`<div>`	Balise générique de type block

Balises génériques

Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style:

class : indique le nom de la classe CSS à utiliser.
id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d’identifier la balise. Vous pouvez vous servir de l’ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
style : cet attribut vous permet d’indiquer directement le code CSS à appliquer. Vous n’êtes donc pas obligés d’avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu’il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.

Les images

Les différents formats d’images

Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l’ordinateur fait des calculs pour qu’elles soient moins lourdes et donc plus rapides à charger.

Il existe un format adapté à chaque image

Si on résume, voici quel format adopter en fonction de l’image que vous avez :

Une photo : utilisez un JPEG.
N’importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits ou éventuellement un GIF.
N’importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
Une image animée : utilisez un GIF animé.

Les erreurs à éviter

Bannissez les autres formats

Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne sont pas du tout adaptés au Web. On peut en mettre sur son site mais le chargement sera vraiment extrêmement long !

Choisissez bien le nom de votre image

Si vous voulez éviter des problèmes, prenez l’habitude d’enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent, par exemple : mon_image.png.

Vous pouvez remplacer les espaces par le caractère underscore (« _ »).

Insérer une image

L’élément img dit au navigateur : place une image ici.

Lorsque votre navigateur voit un élément img, il effectue une requête au serveur pour obtenir le fichier image à afficher. Par défaut elle sera affichée en ligne, c’est à dire dans le flux du texte. Et par défaut aussi le bord du bas de l’image sera aligné avec la ligne basse du texte. C’est un élément vide, qui ne nécessite pas de contenu.

<p>Cet été faites vos pizza <img src="pizza.jpg" alt=""> au grill !</p>

Les images SVG

On ne peut pas évoquer les images sur une page web sans évoquer SVG (pour “Scalable Vector Graphics“).

Au lieu d’être composés d’une grille de pixels, les SVG sont faits de formes et de chemins, définis mathématiquement, et écrits en texte.

De même que le HTML dispose d’élément pour les paragraphes (p) ou pour les tableaux (table), SVG dispose d’éléments pour définir des formes telles que les rectangles (rect) les cercles (circle), ou les chemins (path).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
    <rect width="300" height="180" fill="purple" rx="20" ry="20" />
    <text x="40" y="114" fill="Bonjour !" font-family="Verdana-Bold" font-size="72">
        Bonjour !
    </text>
</svg>

Ils sont très pratiques car :

ils sont légers et offrent de meilleures performances ;
ils sont vectoriels et peuvent être redimensionnés sans perte de qualité ;
ils sont en texte, intégrés au HTML et peuvent être compressés avec des outils comme Gzip, tout comme le HTML ;
ils peuvent être animés ;
ils peuvent être modifiés avec CSS ;
vous pouvez leur ajouter de l’interactivité, comme au survol avec un pointeur par exemple.

Il est possible aussi d’intégrer une image svg avec l’élément img :

<img src="pizza.svg" alt="Pizza">

Les formulaires

Il y a deux aspects à un formulaire. Le premier est ce que vous voyez sur la page elle-même, construit à partir des balises HTML. L’autre composant d’un formulaire est le programme qui va effectuer le traitement des données collectées côté serveur.

L’élément form

L’élément form est un conteneur pour tous les autres éléments des formulaires. Il peut aussi inclure des éléments blocks (h1, p, …).
Vous devez ajouter deux attributs à la balise form :

L’attribut “action”

C’est l’adresse de la page ou du programme qui va traiter les informations. Cette page se chargera de vous envoyer un e-mail avec le message si c’est ce que vous voulez, ou bien d’enregistrer le message avec tous les autres dans une base de données. Cela ne peut pas se faire en HTML ni CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : PHP par exemple.

L’attribut “method”

Cet attribut indique par quel moyen les données vont être envoyées au serveur. Il existe deux solutions pour envoyer des données sur le Web :

method="get": c’est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l’adresse de la page
method="post": c’est la méthode la plus utilisée pour les formulaires car elle permet d’envoyer un grand nombre d’informations. Les données saisies dans le formulaire ne transitent pas par la barre d’adresse.

<p>Texte avant le formulaire</p>
<form method="post" action="traitement.php">
   <p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>

Les éléments de saisie

Simple zone de texte

<form method="post" action="traitement.php">
    <input type="text" name="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
</form>

L’attribut “type” : définit le type de champ de saisie à utiliser, dans ce cas un champ de saisie de texte simple.
L’attribut “name” : est obligatoire, il spécifie le nom de la variable qui va accueillir la valeur saisie par l’internaute dans ce champ.
L’attribut “value” : renseigne la valeur par défaut d’un champ.
Les attributs “maxlenght” et “minlenght” : indiquent une fourchette de validité de la valeur saisie.
L’attribut “size” : définit la longueur du champ, en nombre de caractère.

Les libellés

Ils sont utilisés pour associer une étiquette, ou libellé, à un champ de saisie.

<form method="post" action="traitement.php">
    <label for="pseudo">Votre pseudo :</label>
    <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
</form>

L’association implicite : c’est quand le champ de saisie est situé à l’intérieur du label.

<form method="post" action="traitement.php">
    <label>
      Votre pseudo :
      <input type="text" name="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
    </label>
</form>

Zone de mot de passe

Comme un champ texte, excepté que les caractères saisis ne s’affichent pas dans le navigateur.

<input type="password" name="motdepasse" maxlength="10" />

Zone de texte multiligne

<textarea name="votre-message" rows="6" cols="64">Le texte par défaut ici...</textarea>

Les zones de saisie enrichies

nombre entier (type="number"),
email (type="email"),
URL (type="url"),
date (type="date"),
mois (type="month"),
semaine (type="week"),
date/heure (type="datetime"),
heure (type="time"),
plage de valeurs (type="range"),
téléphone (type="tel"),
couleur (type="color").

Les éléments d’options

les cases à cocher

<form method="post" action="traitement.php">
   <p>
       Cochez les aliments que vous aimez manger :<br />
       <input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
       <input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
       <input type="checkbox" name="epinards" id="epinards" checked="checked" /> <label for="epinards">Epinards</label><br />
       <input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
   </p>
</form>

Cochez les aliments que vous aimez manger :
Frites
Steak haché
Epinards
Huitres

les zones d’options

<form method="post" action="traitement.php">
   <p>
       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
       <input type="radio" name="age" value="medium15-25" id="medium15-25" checked="checked" /> <label for="medium15-25">15-25 ans</label><br />
       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
   </p>
</form>

Veuillez indiquer la tranche d’âge dans laquelle vous vous situez :
Moins de 15 ans
15-25 ans
25-40 ans
Encore plus vieux que ça ?!

les listes déroulantes.

<form method="post" action="traitement.php">
   <p>
       <label for="pays">Dans quel pays habitez-vous ?</label><br />
       <select name="pays" id="pays">
           <optgroup label="Europe">
               <option value="france" selected="selected">France</option>
               <option value="espagne">Espagne</option>
               <option value="italie">Italie</option>
               <option value="royaume-uni">Royaume-Uni</option>
           </optgroup>
           <optgroup label="Amérique">
               <option value="canada">Canada</option>
               <option value="etats-unis">Etats-Unis</option>
           </optgroup>
           <optgroup label="Asie">
               <option value="chine">Chine</option>
               <option value="japon">Japon</option>
           </optgroup>
       </select>
   </p>
</form>

Dans quel pays habitez-vous ?

Champ de téléversement d’un fichier

Les formulaires peuvent envoyer plus que des données. Ils peuvent être utilisés aussi pour transmettre un document externe, depuis le disque dur de l’utilisateur. Par exemple, une imprimerie peut avoir à demander des créations graphiques pour une commande de cartes de visite.

L’attribut enctype doit alors être stipulé dans l’élément form, et il doit avoir pour valeur multipart/form-data.

<form action ="traitement.php" method="post" enctype="multipart/form-data">
   <label for="photo">Envoyez la photo de profil pour votre avatar</label>
   <input type="file" name="photo" id="photo" />
</form>

Les champs cachés

<input type="hidden" name="reference" value="formulaire contact" />

Regrouper des champs

Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset>peut contenir une légende avec la balise <legend>.

<form method="post" action="traitement.php">
   <fieldset>
       <legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
 
       <label for="nom">Quel est votre nom ?</label>
       <input type="text" name="nom" id="nom" />
 
       <label for="prenom">Quel est votre prénom ?</label>
       <input type="text" name="prenom" id="prenom" />
  
       <label for="email">Quel est votre e-mail ?</label>
       <input type="email" name="email" id="email" />
   </fieldset>
  
   <fieldset>
       <legend>Votre souhait</legend> <!-- Titre du fieldset -->
       <p>
           Faites un souhait que vous voudriez voir exaucé :
           <input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label>
           <input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label>
           <input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label>
           <input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label>
       </p>
       <p>
           <label for="precisions">Si "Autre", veuillez préciser :</label>
           <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>
       </p>
   </fieldset>
</form>

Sélectionner automatiquement un champ

<input type="text" name="prenom" id="prenom" autofocus />

Rendre un champ obligatoire

<input type="text" name="prenom" id="prenom" required />

Le bouton d’envoi

Il ne nous reste plus qu’à créer le bouton d’envoi. Là encore, la balise <input /> vient à notre secours. Elle existe en quatre versions :

type="submit" : le principal bouton d’envoi de formulaire. C’est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l’attributactiondu formulaire.
type="reset" : remise à zéro du formulaire.
type="image" : équivalent du bouton submit, présenté cette fois sous forme d’image. Rajoutez 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.

<input type="submit" value="Envoyer" />

Les tableaux de données

Aujourd’hui les tableaux HTML ne sont utilisés que pour des tableaux de données. Il est plutôt conseillé de faire la mise en page en CSS. Plus souple, plus précis, plus facile et surtout plus évolutif, misez tout ce qui est visuel sur le CSS. Un tableau HTML ne doit servir que de base d’un tableau.

Créer un tableau avec la balise <table>

<table>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat:

Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Les entêtes

<table>
    <tr>
        <th>Entete 1</th>
        <th>Entete 2</th>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat :

Entete 1	Entete 2
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Colspan, fusionner des cellules horizontalement

Vous pouvez fusionner des cellules horizontalement avec l’attribut colspan.

<table>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td colspan="2">
            FUSION de cellule
        </td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 3</td>
        <td>Cellule 2 de la ligne 3</td>
    </tr>
</table>

Résultat :

Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
FUSION de cellule
Cellule 1 de la ligne 3	Cellule 2 de la ligne 3

Rowspan, fusionner des cellules verticalement

<table>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td rowspan="2">
        FUSION cellule
        </td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
    <tr>
        <td>Cellule 2 de la ligne 3</td>
    </tr>
</table>

Résultat :

Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
FUSION cellule	Cellule 2 de la ligne 2
FUSION cellule	Cellule 2 de la ligne 3

Légende en haut des tableaux HTML

<table>
    <caption>Legende en haut</caption>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat :

Legende en haut
Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Légende en bas des tableaux HTML

<table>
    <caption align="bottom">Legende en bas</caption>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat :

Legende en bas
Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Les balises <thead>, <tbody> et <tfoot>

Pour faire les choses proprement un tableau se contruit comme ceci :

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>c1</td>
            <td>c2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>c3</th>
            <th>c4</th>
        </tr>
    </tfoot>
</table>

L’accessibilité des tableaux

Connecter les cellules aux en-têtes

l’attribut scope

L’attribut scope permet d’associer aux en-têtes à la ligne(row), la colonne (col), un groupe de lignes (comme tbody) (rowgroup), ou un groupe de colonnes (colgroup).

headers

Pour des tables plus complexes, pour lesquelles l’attribut scope ne suffit pas, l’attribut headers peut être utilisé dans une cellule td pour désigner explicitement l’en-tête auquel il est associé en utilisant son id.

<th id="diametre">Diamètre</th>
<!-- beaucoup d'autres cellules -->
<td headers="diametre">.38</td>
<!-- beaucoup d'autres cellules -->