Langage HTML5 et CSS3

IL existe plusieurs façons de présenter du contenu sur des pages Internet, mais la plus flexible tout en gardant une certaine latitude sur la présentation est le codage HTML. Bien qu’il existe des outils pour écrire de telles pages, il est tout-à-fait possible de les éditer assez facilement avec un simple éditeur de texte, pourvu qu’il possède la coloration syntaxique.

Sur UNIX, il existe les simples éditeurs liés au bureau utilisé : kwrite (KDE), gedit (GNOME), pluma (Mate-Desktop)… et les éditeurs en mode texte (plus difficiles mais plus puissants) comme vim et emacs, qui existent également en Windows et MacOSX. Notepad++ et Crimson Editor sont réservés à Windows et Smultron à MacOSX. Sauf erreur, tous ces logiciels sont libres, sous licence GPL.

1. Considérations générales

1.1 Internet et documents non linéaires
1.2 De l’intérêt d’une bonne structure
1.3 Exemple de structure de site
1.4 Notes
1.5 Les éditeurs

2. Structure de fichier HTML5

2.1 La zone HEAD
2.2 La zone BODY
2.3 Les balises de bloc
2.4 Les balises en ligne / césures
2.5 display: block / inline
2.6 position et transormations
2.7 float
2.8 Info-bulle (post-it)

3. Styles CSS

3.1 Les feuilles de styles
3.2 Utilisations de classes
3.3 Styles intégrés au fichier HTML
3.4 Styles à usage unique
3.5 Généralités concernant le code CSS

4. Liens et images

4.1 Lien hypertexte
4.2 Lien interne
4.3 Affichage d’image
4.4 Zones cliquables
4.5 Medias

5. Listes et définitions

5.1 Listes ordonnées ol
5.2 Listes non ordonnées ul  
5.3 Définitions : dl, dt et dd

6. Tableaux

6.1 Tableau simple
6.2 Agrégation de cellules
6.3 Spécifications CSS

7. Formulaires

7.1 input
7.2 Boîtes à cocher
7.3 select / option
7.4 textarea

8 Accessiblité

8.1 Conseils généraux
8.2 Commenter les images
8.3 Éviter les clics graphiques
8.4 Préciser la langue des pages
8.5 Pas de nouvelles fenêtres
8.6 Se méfier des couleurs
8.7 Techniques spécifiques
8.8 Éviter les frames
8.9 Liens utiles

Les caractères

Les couleurs

Liens utiles

Recommandations HTML5 (en) du W3Consortium, au 14 décembre 2017
developer.mozilla.org (fr) pour une présentation claire et succincte de chaque élément

1. Considérations générales

À quoi peut bien servir l’HTML (Hyper Text Markup Language)?

1.1 Internet et documents non linéaires

Tout d’abord à permettre d’écrire des pages WEB dont la première, souvent intitulée index.htm ou index.html, renvoie à d’autres pages selon un processus hiérarchique (menu » chapitres » pages), cyclique (A renvoie à B, qui renvoie à C… qui renvoie à Z, qui renvoie à A) ou, ce qui est souvent le cas, un peu selon les nécessités, comme les pages d’un blog qui peuvent être rassemblées accessibles de différentes manières selon un marquage multiple par tags.

Le HTML n’est qu’une façon de présenter un ensemble de documents, basée sur la technologie «hypertexte», par exemple la présentation structurée d’un document d’aide. Les pages WEB ne sont qu’un exemple de ce genre de document.

1.2 De l’intérêt d’une bonne structure

Tout comme sur votre PC vos différents documents sont répertoriés par thèmes dans des répertoires et sous-répertoires, il est quasi indispensable d’utiliser un classement hiérarchique pour vos pages Internet. C’est même la première chose à laquelle il faut penser, car les adresses (les liens) de toutes les pages de votre site sont écrites quelque part… sur vos pages. Si vous changez la hiérarchie ou le nom d’un répertoire, vous vous condamnez à réécrire les liens contenant les répertoires déplacés ou renommés. De plus, d’autres pages d’autres sites peuvent pointer vers n’importe laquelle de vos pages…

1.3 Exemple de structure de site

La navigation dans le pages hypertextes se fait à peu près de la même façon qu’en DOS (ces connaissances antédiluviennes vont enfin pouvoir servir), si ce n’est qu’au lieu du backslash "\", le séparateur entre répertoires, sous-répertoires et documents est le slash "/" (Internet a été mis au point sous UNIX).

Considérons l’exemple de structure de fichiers suivant soit sur le net, soit sur un ordinateur : 

images/                       (répertoire)
images/fondvert.png           (image)
images/fondbleu.png           (image)
images/portrait.jpg           (image)
textes/                       (répertoire)
textes/boulot/                (sous-répertoire)
textes/boulot/cv.htm          (document)
textes/boulot/candidat.htm    (document)
textes/tourisme               (sous-répertoire)
textes/tourisme/vacances.htm  (document)
textes/etc/                   (sous-répertoire)
index.htm                     (document)

Cet ensemble de fichiers est contenu dans un répertoire. Sur le net, le fait d’inscrire l’adresse http://www.toto.org ou http://www.portail.com/toto dans la fenêtre ad hoc de votre navigateur affiche la page index.html ou index.htm contenue à cette adresse.

Pour lancer un fichier "htm" ou "html" à partir de son ordinateur, il suffit en général de double-cliquer dessus, ou de l’appeler à partir du navigateur (Ouvrir un document).

Pour afficher le document cv.htm, il faudra avoir inscrit sur la page index.htm le lien textes/boulot/cv.htm, qui commande d’entrer dans le répertoire textes, puis dans le sous-répertoire boulot et d’afficher le document cv.htm: 

<a href="textes/boulot/cv.htm">Curriculum vitae</a>

Pour que la page cv.htm affiche la photo (le fichier portrait.jpg, il faut en indiquer le chemin dans un lien sur la page cv.htm : 

<img src="../../images/portrait.jpg">

La séquence ../ désigne le répertoire parent. Comme il faut sortir du sous-répertoire boulot, et puis du répertoire textes avant d’entrer dans le répertoire images, il faut dans ce cas l’indiquer deux fois.

1.4 Notes

Note 1

Le système exposé s’appelle l’adressage relatif parce que relatif à un fichier affiché. Il est également possible d’appeler chaque page de façon absolue, en recopiant les adresses in extenso : 

<a href="http://www.portail.com/toto/textes/boulot/cv.htm">Curriculum vitae</a>
<img src="http://www.portail.com/toto/images/portrait">

…avec pour inconvénient que le système ne peut pas fonctionner en même temps sur Internet ET sur votre PC, alors que le système d’affichage relatif le permet sans problème et vous aidera à vérifier vos liens.

Note 2

Lors de la location d’une connexion à Internet, on vous propose souvent un espace de quelques dizaines ou centaines de MegaOctets ("millions de caractères") à l’adresse de la forme http://www.portail.com/xz125478. C’est à cet endroit qu’il vous faudra téléverser vos pages sur internet ("uploader"), à l’aide d’un programme ftp (file transfert protocol) comme filezilla, en y introduisant le nom d’utilisateur et le mot de passe que l’on vous aura fourni avec la connexion.

1.5 Les éditeurs

Les éditeurs spécifiques au HTML (nvu…) ou traitements de texte exportant des pages HTML (OpenOffice…) sont à éviter, fabriquant du code lourd et redondant. Le mieux est d’éditer le code avec les éditeurs simples : les éditeurs gedit (Gnome), pluma (Mate-desktop) et kwrite (KDE). Ces logiciels permettent la coloration syntaxique, c’est-à-dire que les balises (marques de contrôle) apparaissent en couleur, ce qui permet une meilleure visualisation du fichier.

Pour Windows, il existe le logiciel libre Notepad++, qui possède la coloration syntaxique.

2. Structure d’un fichier HTML5

Un fichier HTML5 est essentiellement du texte formaté par des balises. Celles-ci sont constituées d’un terme entouré des signes < et > et peuvent contenir des attributs qui spécifient ou modifient certaines valeurs. La spécificité du HTML (Hyper Text Markup Language) est de contenir des balises permettant un lien vers une autre page. Une balise de lien aura toujours cette forme minimale : 

<a href="http://www.toto.org">mot ou texte</a>

La déclaration préliminaire en HTML5 est maintenant réduite à <!doctype html> : il n’existe plus de versions «Strict» «Loose» ou «Frame» comme en HTML4. Hormis le doctype en tout début de fichier, une page HTML doit entièrement être contenue entre les balises <html> et </html>.

Dans un souci de simplification, les balises qui ne peuvent être emboîtées (par exemple la balise de paragraphe <p> ou <meta>) ne doivent plus nécessairement être fermées. Ce n’est pas le cas des balises <div></div> ou <table></table> qui peuvent se contenir elles-mêmes, ou des balises «interrupteurs» comme <b></b> (gras) ou <i></i> (italique).

Une page HTML est subdivisée en deux parties distinctes : la première, entre <head> et </head>, contient des descriptions et paramétrages de la page ; la seconde, entre <body> et </body>, contient ce qui apparaîtra lors de l’ouverture de la page par un navigateur.

Bien qu’on puisse écrire indifféremment les balises en majuscules ou minuscules, il est recommandé d’utiliser les minuscules pour la compatibilité avec le langage XHTML et XML.

Exemple d’une structure de script HTML5 (les couleurs servent ici à indiquer les correspondances entre balises ouvrantes et fermantes) : 

<!DOCTYPE html>
<html lang="fr"><head>

<meta charset="utf-8">
<link rel="stylesheet" href="chemin/style.css" type="text/css">
<title>Le post-moderne est-il soluble dans le relativisme?</title>
<meta name="author" content="toto">
<meta name="description" content="La théorie du tout. Rapport définitif">
<meta name="keywords" content="post-moderne, relativisme, philosophie, epistemologie">

</head><body>

<h1>Un premier titre</h1>

<p>Un premier paragraphe de texte

<p>Un deuxième paragraphe de texte

  … et des liens, des images, des tableaux, des listes, etc.

</body></html>

<title> définit le titre de la fenêtre du navigateur, qui apparaît également dans les onglets du navigateur (les balises n’y sont pas interprétées).

<link rel="stylesheet" href="style.css" type="text/css"> assigne une feuille de style à la page html
<link rel="stylesheet" href="style.css" type="text/css" media="print"> fait de même pour l’impression ou génération de PDF

Il est possible de spécifier d’inclure les spécifications CSS entre <style> et </style>

<meta>

permet de définir d’autres caractéristiques de la page ainsi que des renvois, en définissant les attributs name et content.

<meta name="description" content="Votre description du sujet et du contenu de la page en quelques dizaines de caractères">

<meta name="robots" content=""> pour (normalement) donner des directives aux moteurs de recherche, qui font bien ce qu’ils veulent

<meta name="keywords" content=""> permet de donner des mots-clés séparés par des virgules (ne semble pas très utile pour le référencement, les robots indexeurs s’intéressant plus au contenu qu’à une déclaration de contenu)

<meta name="author" content=""> donne le nom de l’auteur de la page (ne semble pas utilisé par les robots)

<meta name="viewport" content="width=device-width, initial-scale=1.0"> permet de garder la page HTML visible sur un smartphone ou tablette (il risque sinon de réduire la largeur d’une page sur grand écran à la largeur de l’appareil).

<meta http-equiv="" content=""> permet certaines commandes vis-à-vis des navigateurs :

<meta http-equiv="expires" content="14 Feb 2002 12:00:00 GMT"> Après le 14 février, le navigateur sera forcé de recharger la page, même si l’ordinateur la contient en cache (mémoire sous forme de fichier). content="0" pour une page qu’il faudra toujours recharger (jamais en cache).

<meta http-equiv="refresh" content="10; URL=http://www.toto.fr"> le navigateur chargera la page précisée après le nombre de secondes indiqué. Cela pourrait être une solution pour une page qui change fréquemment, mais elle est à déconseiller, personne n’aimant voir un rafraîchissement perturbant la lecture.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ou <meta charset="utf-8"> (syntaxe simplifiée) permet de définir le jeu de caractères de la page, et être lu indifféremment par tout système même si vous utilisez les caractères accentués plutôt que l’encodage HTML (&egrave;…). utf-8 est le plus universel, pouvant coder l’entièreté des écritures du monde : lettres, idéogrammes, emoticones… windows-1252 est légèrement plus concis mais limité aux écritures occidentales.

<base href="http://www.toto.com/scripts/"> définit la base de l’URL pour tous les liens relatifs de la page: <a href="do-it.php"> sera dans cet exemple envoyé vers http://www.toto.com/scripts/do-it.php.

2.2 La zone BODY

La zone entre <body> et </body> code ce qui doit être affiché sur la page Web.

De façon générale, dans un script HTML, les retours à la ligne et les espaces multiples ne sont pas pris en compte. Deux mots uniquement séparés par une fin de ligne dans un script sont affichés séparés par un espace.

2.3 Les balises de bloc

Toute donnée doit être entourée d’une de ces balises de bloc. La fermeture de ce type de balise renvoie à un bloc suivant, normalement situé en-dessous.

<p> indique le début d’un paragraphe, se terminant par une demi-ligne d’écart par rapport au suivant.

<h1> </h1> délimitent le titre de plus haut niveau; <h6> </h6> le plus bas.

<pre> </pre> affiche un paragraphe avec une fonte non proportionnelle (de type machine à écrire); entre ces deux balises, le navigateur affiche à peu près ce qu’affiche votre script : chaque espace et comme les retours de ligne sont pris en considération. Les balises sont interprétées : il est possible d’affichier du gras ou de l’italique, y placer une balise de renvoi à une autre page. Pour afficher la balise <p>, il faut l’écrire &lt;p&gt;

<div> </div> délimitent un paquet de données pour les considérer comme un tout pour un arrangement spacial (par exemple float).

<nav> étant plus explicite que <div class="liens">, HTML5 a défini plusieurs balises englobantes :

Il n’existe pas de style par défaut pour ces balises, mais il est facile de les définir avec le CSS.

Les listes ordonnées <ol> </ol>, non-ordonnées <ul> </ul> et de définitions <dl> </dl>

Les tableaux <table> </table>, chaque rangée commençant par <tr>, et dans celles-ci chaque nouvelle cellules commence avec <td> (les fermetures </tr> et </td> ne sont plus obligatoires en HTML5).

<br> permet, à l’intérieur d’une balise bloc, un retour à la ligne sans la marge inférieure de cette balise. Elle comprend sa propre fermeture.

<hr> (horizontal rule) ne contient pas de donnée. Elle tire une ligne horizontale et comprend sa propre fermeture.

2.4 Les balises en ligne

À l’intérieur de ces balises «bloc», les données peuvent encore être entourées par des balises «en ligne» (sans retour à la ligne) pour leur donner certaines qualités (italique, gras, soulignement…) ou certaines fonctions (liens…) ou inclusions (images).

<a> </a> permet un lien hypertexte

<img> permet l’inclusion d’une image

<span> </span> entoure tout texte qui peut être soumis à un changement de style par l’attribut style="" ou par la définition d’une classe.

<kbd> </kbd> est l’équivalent «en ligne» de <pre> </pre> : il délimite une portion de texte avec fonte non proportionnelle (machine à écrire). Il remplace la balise <tt> </tt> de l’HTML4, désuète mais qui était plus facile à coder.

<i> </i> (italic : penché) et <em> </em> (emphasis : insistance) permettent l’écriture penchée
<b> </b> (bold : gras) et <strong> <strong> (fort) permettent le gras.
Pour les subtilités entre chacun de ces couples, voyez ici.

<u> </u> (soulignement) et <s> </s> (barrer) sont dévaluées. Les soulignements, surlignements et barrés utilisent maintenant la propriété text-decoration dans une balise telle que <i>, <b> ou neutre comme <span>. Les valeurs underline, overline, line-through peuvent cohabiter, none les supprimant (dotted, double, wavy et dash ne sont pas tous reconnus par tous les navigateurs). Par exemple, Hello (double soulignement) est codé comme suit : 

<span style="text-decoration:underline double">Hello</span>

<q> </q> entoure une citation de doubles guillemets courbés : ceci est une citation. Pour redéfinir les signes typographiques servant de guillemets, préciser par exemple dans la feuille de style q:before {content:"«"} et q:after {content:"»"}. Pour les supprimer, q {quotes:none}.

<sup> </sup> met un texte en exposant
<sub> </sub> met un texte en indice

Il est possible que le(s) caractère(s) mis en exposant ou en indice augmente la hauteur de la ligne, rompant la compacité du paragraphe. Il suffit de préciser le style <sup style="vertical-align:top"> </sup> ou <sub style="vertical-align:bottom"> </sub>. Les autres options sont super, text-top, baseline, sub, middle, text-bottom).

<ruby> </ruby> permet l’ajout une ligne intermédiaire, par exemple pour les furigana japonais (façon de prononcer des kanji, qui ne doit pas nécessairement être en syllabaire japonais). L’indication se place entre <rt> et </rt> après le mot à préciser :
お<ruby>家<rt>うち</rt></ruby> donne お家うち

Si plusieurs mots sont à préciser, une seule ouverture / fermeture avec <ruby> suffit :
<ruby>お<rt>o</rt>家<rt>utchi</rt></ruby> donne おo家utchi

Les furigana semblent très petits par défaut (0.5em avec FireFox), mais il est possible d’augmenter la taille de la fonte en CSS (rt { font-size=.75em; } pour cette page). Pour le CSS ou style="" (fonctionne aveec Firefox) :

ruby-align: fixe l’alignement horizontal du furigana avec start, center, space-between et space-around
ruby-position: fixe l’endroit du furigana avec over, under et inter-character

Note : cette technique est consommatrice en espace, c’est pourquoi ce site utilise des furigana escamotables avec la technique des info-bulles paramétrables, disponible sur cette page et notamment utilisée sur la page des manga.

Césures

&shy; permet l’éventuelle césure à un endroit précis d’un mot, avec apparition d’un trait de césure. Cela minimise les vides entre les mots (mode justifié) ou en début / fin de ligne (marge uniquement à droite / gauche).

<wbr> (Word BReak) permet un éventuel report à la ligne à un endroit précis d’un mot, mais sans ajout de trait de césure.

Il est possible de définir un style permettant la césure automatique : 

<p style="-moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;">

Attention : <nobr> </nobr> (NO BReak), qui définit une plage sans retour automatique à la ligne, n’est plus valable en HTML5 (mais certains navigateurs l’interprètent encore). Il faut soit définir un style : 

<span style="white-space:nowrap;">Pas de retour à la ligne pour ce texte, aussi long qu’il soit</span>

soit définir une classe dans le fichier .css : 

.nobr { white-space:nowrap; }

et l’utiliser dans le fichier HTML : 

<table class="nobr"><tr><td>
 Aucun retour à la ligne dans le texte de cette cellule de tableau, aussi long soit-il
</td></tr></table>

2.5 display: block / inline / none

Il est possible de modifier la disposition d’une balise avec la spécification display. Par exemple, display: block permet de transformer une balise en ligne en une balise en bloc : 

<p>Un, <span style="display:block; color:blue">deux,</span> trois</p>

Un, deux, trois

…tandis que la spécification display: inline aura l’effet inverse : 

<p style="display:inline">Ligne 1</p>
<p style="display:inline">Ligne 2</p>

Ligne 1

Ligne 2

 

Il est encore possible de cacher le contenu d’une balise avec display:none. Voyez dans la page des trucs à quoi cela peut servir.

2.6 position et transformations

Positions

Dans une feuille de style, permet de préciser l’emplacement d’un élément.

position:fixed; top:1em;par rapport à la fenêtre (top ou bottom obligatoire, left ou right possible)

position:absolute; top:1em;en haut de la page (pas de la fenêtre ; Firefox91 : bottom:1em semble le fixer en bas de la fenêtre au moment de l’affichage de la page)

position:relative; top:1em;par rapport à une balise englobante (au moins top, bottom, left ou right , qui laisse une marge en haut, en bas, à gauche ou à droite)

style="position:sticky; top:3em;" laissera toujours au moins 3em au-dessus d’un contenu

position:static existent également.

Transformations

Il est possible d’effectuer une rotation d’objets :

Les sanglots longs
Des violons
De l’automne

…avec le code transform: rotate() (degrés ou fraction de tours .15turn, sens horaire) en utilisant un style. 

<table style="transform: rotate(-4deg)"<td>
Les sanglots longs<br>
Des violons<br>
De l’automne
</table>

Attention, toutefois de prévoir la place en haut et en bas. On peut également transformer un objets avec :

transform: scale(h, v) pour réduire ou dilater l’objet horizontalement ou verticalement. Disparition si une valeur est nulle, inversion si négative
transform: skew(h, v) pour cisailler horizontalement ou verticalement. Valeurs en degrés (30deg, sens horaire)
transform: translate(h, v) pour décaler l’objet

Il est possible de combiner ces transformations : style="transform: rotate(50deg) scale(.5,3)"

Les trois transformations scale(h, v), skew(h, v) et translate(h, v) peuvent être combinées de cette façon :

transform: matrix(scaleH, skewV, skewH, scaleV, translateH, translateV)

Notes :

2.7 float

 Encadré 

 Autre! 

float permet de préciser un endroit (left pour gauche, right pour droite) pour le contenu d’une balise (par exemple une image), le contenu de la balise suivante contournera l’affichage du contenu de la balise précédente. Cela évite de devoir utiliser un tableau à plusieurs cellules, dont les dimensions ne seront pas interprétées de la même manière par les différents navigateurs et les différentes résolutions. Voici le code de ce paragraphe : 

<p style="float:left; border:solid 1px;"> encadré 
<p style="float:right;"> Autre! 
<p>
… le texte

Le premier encadré est plaqué à gauche, permettant l’utilisation à sa droite ; l’autre est plaqué à droite, et le texte qui suit se déploie entre les deux.

On annule ce remplissage par la gauche ou par la droite par les styles clear:left, clear:right ou clear :both inscrit dans une balise qui suit, ou par:

<div style="clear:both"></div>

2.8 Info-bulle (post-it)

<abbr title="Médecins sans Frontières">MSF</abbr> permet une définition ou une explicitation de sigle dans un post-it : survolez MSF

L’attribut title est utilisable dans d’autres balises : vous vous en convainquerez en plaçant la souris sur ce paragraphe et sur le lien du paragraphe suivant, mais il n’y a que la balise <abbr> qui souligne au moyen d’une ligne pointillée (par défaut).

Cette info-bulle avec l’attribut title a plusieurs désavantages : il est toujours jaune pâle, ne permet aucun effet sur le texte (taille, gras, italique…) et selon les navigateurs, n’apparaît qu’après une demi-seconde et peut disparaître après un moment. Il existe un truc pour fabriquer ses propres info-bulles plus flexibles, mais qui a d’autres défauts.

Note : la balise <abbr> remplace <acronym>, qui s’utilisait exactement de la même manière, mais marquée «obsolète» dans les spécifications HTML5.

3. Les feuilles de styles CSS

Passés les temps héroïques du HTML, l’habitude a été prise de séparer le contenu d’une page, après la balise <body> du fichier HTML, et le formatage dans une feuille de style (Cascade Style Sheet) ou en tout début de page. Cela a l’avantage de la clarté du contenu; de plus, on peut ne définir qu’une fois par type de balise le style pour toute une série de pages. Il existe pourtant encore des pages où chaque balise <p> est redéfinie pour ce qui concerne la fonte, les marges, etc.

Une partie de page codée en HTML3 (et acceptée en HTML4) : 

<h1><font color="blue" size="6"><i>La théorie du grand tout</i></font><h1>

sera simplement codée : 

<h1>La théorie du grand tout</h1>

tandis que la forme sera précisée ailleurs, de la façon suivante : 

h1 {
   font-size: 200%;
   font-weight: bold;
   color: blue;
   font-style: italic;
   }

et sera valable, sauf contre-indication, pour tous les titres "h1" des pages ayant dans sa partie "head" la ligne : 

<link rel="stylesheet" href="chemin/style.css" type="text/css">

où style.css est le nom (de votre choix) du fichier de style, et chemin la localisation de ce fichier. Si style.css est à la racine de votre site, une page HTML dans un répertoire devra cibler href="../style.css", dans un sous-répertoire href="../../style.css". Si un fichier est dans le répertoire /gnulinux le fichier style.css dans le répertoire /script, la balise link devra cibler href="../scripts/style.css", voir 1.3 Exemple de structure.

3.1 Les feuilles de styles

La feuille de style est un fichier en texte simple contenant une structure définissant les attributs des balises. On désigne la feuille de styles par une balise dans la première partie du fichier HTML (entre <head> et </head>) : 

<link rel="stylesheet" href="votrefeuille.css" type="text/css">

et elle a la forme suivante (/* ceci est un commentaire */) : 

/* feuille de styles */
body
  {
  color: black;
  background-color: white;
  font-family: sans-serif;
  font-size: 100%;
  }
p
  {
  margin-left: 5%;
  margin-left: 5%;
  text-align: justify;
  }

  etc…

color: black; colore un texte en black, red, blue, green, gray, brown, cyan, magenta, white… ou sous la forme #000000 ou #000 (voir couleurs)
background: white; colore le fond de l’écran ou du texte si limité à p

font-family: serif, ipamincho; précise une ou plusieurs famille(s) de police (dont au moins une représentante doit être instlallée) :

font-size: 12pt; précise la hauteur de la police, en points pt, en pixels px, ou explicitement : xx-small x-small small medium large x-large xx-large smaller larger ou mieux en hauteur de lettre em ou en pourcentage %
font: 12pt/14pt précise une fonte de 12 points dans une ligne de 14
text-transform : capitalize; ajoute une majuscule à chaque début de mot, lowercase et uppercase transforme les lettres en minuscules ou majuscules
font-variant-caps: small-caps; transforme les minuscules en petites majuscules, les majuscules sont inchangées

font-weight: bold; la graisse de la fonte sera grasse, normal sinon.

font-weight accepte également 100, 200, 300, 400, 500, 600, 700, 800 et 900 ; 600 à 900 pour bold, 400 et 500 pour normal, et 100 à 300 maigre (light n’existe pas). lighter and bolder désignent la graisse relative à la balise-parent, et permet une graisse maigre si la balise-parent est positionnée normal.

font-style: italic; force le style penché ; normal pour contrecarrer l’effet

text-decoration: underline; souligne; surligné avec overline; et le barré avec line-through;

text-shadow 5px 3px 10px; ajoute une ombre autour du texte, étalée sur 10 pixels, avec un décalage horizontal de 5 et vertical de 3. Il est possible de préciser une couleur.

text-align: justify; applique l’alignement pour les balises p, h1-h6,li, div… Les autres valeurs peuvent être left, right et center
vertical-align: top; force l’affichage vers le haut d’une cellule de tableau (td). Les autres valeurs sont middle et bottom

letter-spacing: 1px; ajoute un pixel entre chaque lettre (aussi en mm ou cm)
word-spacing: 1em; ajoute l’équivalent d’une hauteur de caractère entre chaque mot (aussi en mm ou cm)

margin-left: 5%; définit la marge gauche à l’extérieur de la balise : p, pre, table, hr, h1-h6, ol, ul; margin-right pour la droite, margin-top pour le haut et margin-bottom pour le bas, pour des valeurs en pourcentage %, en pixels px, points pt et em (hauteur de casse). Alternative: 

p { margin: 0em 3% .5px 5% } /* sens horaire : haut, droite, bas, gauche */
p { margin: 0em 3% .5px } /* haut, gauche+droite, bas */
p { margin: 0em 3% } /* haut+bas, gauche+droite */
p { margin: .5em } /* toutes les directions */

padding permet de définir la marge intérieure, entre le texte et les bords de la balise : p, div, table… (margin est l’espace entre le bord et les autres balises.)

text-shadow 5px 3px 10px; ajoute une ombre autour du texte, étalée sur 10 pixels, avec un décalement horizontal de 5 pixels et vertical de 3.
box-shadow 5px 3px 10px; ajoute une ombre autour d’un conteneur, étalée sur 10 pixels, avec un décalement horizontal de 5 pixels et vertical de 3. Il est possible de préciser une couleur.

3.2 Utilisation de class et id

Il est possible de spécifier des classes, qui modifie les attributs d’une balise. Le codage est : 

p { color: #000; margin 0em 3% .5em 5%; }  /* vaut pour tous les balises p */
p.quote { color: #080; margin: 0.5em 5% 1em 7%; }  /* pour la classe "quote" seulement */

L’affichage traitera différemment les balises <p> et <p class="quote"> : 

<p>
Le paragraphe normal
<p class="quote">
Un paragraphe de la classe "quote", de couleur et de marges différentes

Le paragraphe normal

Un paragraphe de la classe "quote", de couleur et de marges différentes

On peut généraliser une classe à quelque balise que ce soit (pour autant que cela ait un sens). Toute balise ayant l’attribut class="gris" affichera en gris : 

.gris { color: #777; } /* valable pour <p class="gris">, <h2 class="gris">, <div class="gris">… */

Pseudo-classes

Certaines pseudo-classes permettent de définir une balise parmi une série de balise identiques :

td:first-of-type désigne la première d’une série de plusieurs balises <td>
li:nth-of-type(2) désigne la deuxième d’une série de plusieurs balises <li>
h2:last-of-type désigne la dernière d’une série de plusieurs balises <h2>
tr:nth-last-of-type(2) désigne l’avant-dernière d’une série de plusieurs balises <tr>

p:first-child, p:last-child, p:nth-child(3n+2)… permettent de désigner un élément ou des éléments parmi un ensemble, en l’occurrence tous les trois paragraphes à partir du deuxième. odd équivaut à (2n+1) : premier, troisième, etc. et even à (2n) : deuxième, quatrième, etc.

Voir également

Balise identifiée

Il est possible de spécifier un paramétrage à une balise identifiée <div id="etiquette"> (attention : un identifiant doit être unique sur une même page) : 

div#entete { color:red } /* le texte contenu dans la balise <div id="entete"> est colorée en rouge */

Classes multiples

Il est possible d’attribuer plusieurs classes à une balise en les séparant d’un espace, ce qui permet d’éviter de définir toutes les combinaisons possibles, en prévoyant des classes simples. 

<html><head>
<style>
.g { color:green }    /* vert */
.r { color:#d05 }     /* rouge */
.b { font-size:150% } /* grand */
.l { font-size:80% }  /* petit */
.u { text-decoration:underline }     /* souligne */
.lt { text-decoration:line-through } /* barre */
</style>
</head><body>
<p>
<span class="g lt">barre, en vert</span> -
<b class="r b">rouge, grand</b> -
<i class="l u">souligne, en petit</i>
</body></html>

donne

barre, en vert - rouge, grand - souligne, en petit

3.3 Styles intégrés au fichier HTML

Il est possible d’inclure les instructions de style dans le fichier HTML entre <head> et </head>. Cela n’a d’intérêt que lorsque la page est unique en son genre. 

<style>
body { background: #000060; }
h1 { color: #bfbfbf; }
h2 { color: #ffffff; margin-left: 50px;}
a { color: #ff7000; font-weight: bold; text-align: top; }
td { color: #ff7000; }
td.date { text-align: right; color: #e00070; }
</style>

3.4 Style à usage unique

Il continue à être possible de spécifier le style dans les balises avec style="" , mais ce n’est pas conseillé : c’est revenir au fouilli du code HTML3. À n’utiliser que pour les cas vraiment particuliers : 

<p style="color: gray;">
Un <span style="text-decoration: underline">mot</span> souligné
</p>

Un mot souligné

Si vous pensez devoir parfois colorer un mot en gris, spécifiez une classe dans la feuille CSS 

.gris { color:#888; }

et utilisez cette classe dans une balise 

Ce <span class="gris">mot</span> sera grisé, <b class="gris">celui-ci</b> sera gris et gras.

3.5 Généralités concernant les codes CSS

Pour les couleurs, voir cette page.

Grandeurs :

p { font-size:100%; } correspond à la taille des caractères définie par défaut dans le navigateur ou dans la balise «parent» (par exemple body).

px pour un nombre en pixels, pt pour point d’imprimerie (72e de pouce), em vaut la taille de la fonte (qui peut servir en largeur)… cm et mm existent également mais s’adaptent moins facilement à tous les systèmes.

Spécifications haut / bas / gauche / droite :

Concerne les balises margin et padding (a, b, c et d s’expriment en pt, px, em, %, mm, cm…):

attribut: a b c d; respectivement haut / droite / bas / gauche (sens horaire)
attribut: a b c; haut / gauche et droite / bas
attribut: a b; haut et bas / gauche et droite
attribut: a; une valeur unique pour les quatre côtés

margin-top, margin-left, margin-right, margin-bottom permet le paramétrage pour une marge externe particulière

padding-top, padding-left, padding-right, padding-bottom permet le paramétrage pour un marge interne particulière

border-top, border-left, border-right, border-bottom permet le paramétrage pour un seul des bords

Le style border-collapse:collapse permet de fusionner les bords de cellules avec leurs voisines (par défaut: border-collapse:separate

Cadres :

Ce style concerne table, tr, th, td, p, div, img, h1… et se définit avec border:type épaisseur couleur, par exemple : 

<span style="padding:3px 5px; border: solid 2px #05d">Totem et tabou<span>

Totem et tabou

Les différents types de cadre :

 solid     double     dotted     dashed     outset     inset     groove     ridge 

none : pas de cadre (normalement par défaut)
inherit : hérite du cadre de l’élément englobant
hidden : permet de résoudre certains conflits dans les tableaux qui pourrait survenir en cas de border-collapse

4. Liens et images

Les liens "hypertexte" permettent de passer d’une page à l’autre sur un clic de souris (ou avec une touche quand on navigue avec un navigateur non graphique). Quand on y pense un peu, c’est vraiment la base des pages HTML. S’il n’existaient pas, il faudrait recopier chaque fois les adresses dans le champ du haut du navigateur.

<a href="adresseweb">Texte ou image</a> : lien hypertexte (cliquable)

4.1 Lien hypertexte

<a href="adresse"> spécifie la page-cible, chargée quand le texte est cliqué : 

<a href="http://www.quelquepart.com">Cliquez ici</a>

<a href="http://www.quelquepart.com"><img src="adresse"></a> définit une image cliquable. Certains navigateurs affichent un bord de la couleur du lien. On l’efface avec border: 0px dans un attribut style ou dans un fichier .css

<a href="ftp://site">Download</a> permet une connexion à une adresse ftp

<a href="mailto:toto@serveur.org">Contact</a> permet l’envoi d’un mail à partir d’un clic.

Il est possible de préécrire un objet et un corps de texte : Mail (ouvre votre boîte de courriels): 

<a href="mailto:toto@serveur.org?subject=Demande de renseignement&body=Nom:%0D%0APrénom:" target="z">Mail</a>

subject= définit l’objet du mail
body= définit le corps du message. Un retour de paragraphe se code avec %0D%0A.

4.2 Lien interne

id="etiquette" comme attribut de balise spécifie l’endroit cible d’une page, atteint par <a href="#lieu">Ici</a> 

<h1 id="haut">Un titre</h1>

  … tout plein de textes

<a href="#haut">Vers le haut de la page</a>

<a href="autrepage.htm#lieu">Clic!</a> cible un endroit précisé avec id="lieu" dans une balise d’une autre page.

La page CSS associée (ou la balise <style> dans la section <head>) peut préciser : 

a { font-weight: normal; } /* pour affichage non gras */
a:link    { color: blue; font-decoration: none } /* enlève le soulignement */
a:visited { color: darkgreen; font-style: italic} /* si déjà cliqué */
a:hover   { color: cyan } /* survol de souris */
a:active  { color: red; } /* doigt maintenu sur écran tactile */

4.3 Affichage d’images

Les formats d’images possibles sont .jpg, .gif et .png; les spécifications W3C recommandent ce dernier.

<img src="" alt="" width="" height=""> affiche une image.

src="" adresse de l’image

alt="texte" texte au cas où l’image n’est pas trouvée ou en attendant qu’elle le soit, informe également les personnes travaillant en mode texte, dont les non-voyants

title="texte" info-bulle en cas de survol de l’image

height="" limite la hauteur de l’image à un nombre de pixels ou à un pourcentage% de la hauteur de la fenêtre

width="" limite la largeur de l’image à un nombre de pixels ou à un pourcentage% de l’écran

Note : height="" ou width="" employés à l’exclusion l’un de l’autre garde la proportion des images.

Pour donner une légende à l’image, il faut englober la balise img par figure : 

<figure>
<img src="fichier.png">
<figcaption>Légende</figcaption>
</figure>

<img src="data:image/jpg;base64,xxxxxxxxxxxxx"> permet d’inclure l’image sous forme d’encodage (voir les différents types d’encodage en python: base64, binascii). GNU/Linux possède une commande simple (paquetage coreutils). Saisir dans une console : 

base64 nomdimage > cible.txt

où nomdimage est située dans le répertoire par défaut de la console, et cible.txt le fichier généré.

Note : une telle commande semble exister pour Windows, avec pour syntaxe base64 -e nomdimage cible

4.4 Zones cliquables

<img src="paysage.jpg" usemap="#etiquette"> marque une image de l’étiquette l’attribut usemap de <img>.

<map name="etiquette"> … </map> permet la spécification d’une série d’aires cliquables d’une image.

<area shape="" coords="" href="" alt=""> lie une aire de l’image à un lien.

shape="circle" coords="x,y,r" définit un cercle par son centre x,y et son rayon r
shape="rect" coords="x1,y1,x2,h2" définit un rectangle par deux points, en haut à gauche et en bas à droite
shape="poly" coords="x1,y1,x2,y2,x3,y3,…" définit un polygone par une série de coordonnées des sommets
href="page.htm" définit la page HTML cible, href="#titre2" un endroit sur la même page précisé par l’attribut id d’une balise, les deux pouvant se combiner : href="page.htm#titre2"

Exemple

<img src="images/tete.jpg" usemap="#menu">

<map name="menu">
<area shape="circle" coords="50,55,3" href="nez.html">
<area shape="rect" coords="15,12,25,20" href="gauche.html">
<area shape="poly" coords="25,55,35,50,65,50,75,55,65,50" href="bouche.html">
</map>

Les pages nez.html, gauche.html et bouche.html doivent exister ; la définition <map> peut être reléguée en fin de page.

4.5 Medias : vidéos, sons, textes formatés…

HTML5 permet aisément d’inclure une vidéo, un fichier son ou d’autres sortes de fichiers, comme les PDF ou fichiers MIDI). Tous les navigateurs ne traitent pas tous les formats de média, et ce qui se trouve entre <balise> et </balise> est affiché si le navigateur ne peut lire le fichier de média, rendant possible un message ou un accès alternatif par un lien.

<video> admet les types courants video/mp4, video/webm et video/ogg. 

<video src="zouc.webm" type="video/webm; width="400" height="300" controls="true" codecs="vp8,vorbis">
Votre navigateur ne peut lire le média
</video>

<audio> suit à peu près la même syntaxe. Les types courants sont audio/mpeg pour les mp3, audio/ogg ou audio/wav. 

<audio src="sons/zouc.mp3" controls="true" type="audio/mpeg">
Cliquer ici pour accéder au média  ou le télécharger
</audio>

<iframe> sert à inclure des objets en ligne («inline frame») comme une vidéo, une carte openstreetmap ou une autre page HTML, par défaut dans un cadre de 300x150px. 

<iframe width="100%" height="400px" src=""><i>-- Document non trouvé --</i></iframe>

<object> est plus généraliste, pouvant inclure un fichier html, un simple texte, une image (et paraît-il même les fichiers MIDI et les animations SWF). Attention : l’attribut data rempplace ici src. Rappelons qu’une image peut être déformée en se conformant aux attributs width et height. En supprimer un des deux permet d’en conserver les proportions. 

<object width="100%" height="300px" data="vacances.txt">Erreur : objet non trouvé</object>

<embed> (déprécié) avait le même usage qu’<object> : 

<embed width="100%" height="300px" src="vacances.txt"></embed>

5. Listes et définitions

5.1 Listes ordonnées ol

<ol type="" > … </ol> définit une liste ordonnée (Ordered List). Chaque entrée commence par <li> (et peut être close avec </li>). 

<ol>
  <li>Point trois</li>
  <li>Point quatre</li>
</ol>

donne :

  1. Point un
  2. Point deux

Styles associés à la balise <ol> : 

ol
  {
  list-style-type: upper-roman; /* ou lower-roman, upper-alpha, lower-alpha; decimal par défaut */
  list-style-position: inside; /* augmente le retrait par rapport à la marge; par défaut: outside */
  margin-left: -2em; /* permet de réduire le retrait */
  }

5.2 Listes non ordonnées ul

<ul> … </ul>  : définit une liste non ordonnée (Unordered List). Chaque entrée est insérée entre <li> et </li>. En HTML5, la fermeture par </li> n’est plus nécessaire : 

<ul>
  <li>Une chose</li>
  <li>Une autre</li>
</ul>

donne :

Styles associés à la balise <ul> : 

ul
  {
  list-style-type:circle; /* square ou none; disc par défaut */
  list-style-position:inside; /* indentation augmentée; par défaut: outside */
  margin-left: -2em; /* ou -20px, permet de réduire le retrait */
  list-style-image:url(rond.gif) /* image personnelle servant de puce */
  }

li:before { content:"«"; } /* définit un ou plusieurs caractères avant le texte de la balise <li> */
li:after { content:"»"; } /* définit un ou plusieurs caractères après le texte de la balise <li> */

Il est possible d’imbriquer plusieurs listes (ordonnées ou non). Dans le cas de plusieurs listes non ordonnées, la première affiche des disques, la seconde des cercles, la troisième des carrés : 

<ul>
<li>Une chose
<li>Une autre
  <ul>
    <li>Une sous-chose
    <ul>
      <li>Une sous-sous-chose
      <li>Une sous-sous-autre
    </ul>
    <li>Une sous-autre
  </ul>
</ul>

donne :

Pour changer cela : 

ul { list-style-type:disc; }
ul ul { list-style-type: "§ "; }
ul ul ul { list-style-type: "~ " }
etc.

5.3 Définitions : dl, dt et dd

<dl>…</dl> affiche une liste de termes et ses définitions. Les termes sont placés contre la marge de gauche et les définitions légèrement indentées.

<dt>…</dt> pour désigner un terme, <dd>…</dd> pour afficher chaque définition ou description, indentée en dessous du terme. En HTML5, </dt> et </dd> ne sont plus obligatoires. 

<dl>
  <dt>Pouvoir</dt>
    <dd>I may</dd>
    <dd>I can</dd>
  <dt>Faire</dt>
    <dd>To do</dd>
    <dd>To make</dd>
</dl>

donne :

Pouvoir
I may
I can
Faire
To do
To make

Cette combinaison de balises permet de faire une bibliographie de type moderne, avec l’auteur comme terme à définir et les ouvrages comme définitions.

6. Les tableaux

Les tableaux permettent de structurer des données en deux dimensions.

6.1 Simple tableau

<table> … </table> définit un tableau contenant des rangées (définies par <tr>…</tr>) qui contiennent elles-mêmes des cellules (définies par <td>…</td>). En HTML5, </td> et </tr> ne sont pas nécessaires. Voici l’exemple d’un tableau de deux rangées et trois colonnes : 

<table>
  <tr>
    <td>haut/gauche</td>
    <td>haut/centre</td>
    <td>haut/droite</td>
  </tr>
  <tr>
    <td>bas/gauche</td>
    <td>bas/centre</td>
    <td>bas/droite</td>
  </tr>
</table>

associant les indications de style suivantes 

table
  {
  background: cyan; border-collapse:collapse;
  border: 2px solid blue; /* épaisseur et couleur du bord du tableau */
  }
td { border:1px solid; }

donnera :

haut/gauche haut/centre haut/droite
bas/gauche bas/centre bas/droite

<th> est un variante de <td>, où le texte est gras et centré.

cellspacing="" espace entre chaque cellule : px, em, %, pt
width="" largeur de la cellule, et donc la colonne à laquelle elle appartient 

td
  {
  text-align: center; /* left, right, justify */
  vertical-align: top; /* bottom, middle… */
  }

Il est possible de séparer rangées de tête, de corps et de pied avec <thead>, <tfoot> et <tbody> – cela semble utile pour préciser certains attributs – et de donner un titre avec <caption> 

<table>
<caption>Un exemple de tableau</caption>
<thead>
  <tr><td>tête gauche<td>tête droite
<tbody>
  <tr><td>corps gauche<td>corps droite
<tfoot>
  <tr><td>pied gauche<td>pied droite
</table>
Un exemple de tableau
tête gauchetête droite
corps gauchecorps droite
pied gauchepied droite

Un seul <caption> est toléré par tableau (les surnuméraires sont ignorés). Par défaut, il est centré en bas. Utilisez les attributs text-align (left / right / center et caption-side (top / bottom).

6.2 Agrégation de cellules

colspan et rowspan (attribut de <td> and <th>)
<td colspan="nombre"> : spécifie le nombre de colonnes utilisées par une cellule
<td rowspan="nombre"> : spécifie le nombre de rangées utilisées par une cellule 

<table>
<caption>Un exemple de tableau</caption>
  <tr>
    <th rowspan="4" style="background:#ffa;">Cellule<br>de<br>quatre<br>rangées
    <th colspan="2" style="background:#faa;">Cellule de 2 colonnes
  <tr>
    <th>1
    <th>2
  <tr>
    <td>3
    <td>4
  <tr>
    <td>5
    <td>6
</table>
Un exemple de tableau
Cellule
de
quatre
rangées 		Cellule de 2 colonnes
1 2
3 4
5 6

6.3 Spécifications CSS

Voici, en vrac, des spécifications pour le formatage et habillage des tableaux : 

table {
   border-spacing: 10px 5px; /* séparation (largeur ou hauteur) entre deux cellules voisines */
   margin: auto;   /* pour centrer le tableau */
   border: 1px outset red; /* effet 3D  minimal */
   border-collapse: collapse; /* le contour de chaque cellule fusionne avec sa voisine */
   }
td, th {
   vertical-align: top;  /* baseline ou bottom; middle par défaut */
   border-collapse: collapse; /* fusionne les bordures des cellules contiguës; separate par défaut */
   padding: 5px; /* espace entre le texte et la bordure d'une cellule */
   empty-cells:hide; /* ne dessine pas la bordure des cellules vides; show par défaut */
   }
caption { caption-side: bottom; }  /* où se situe la légende; top par défaut */

Valable pour les trois balises : 

border: solid   /* dashed (discontinu), none, hidden (cache une voisine) */
                /* groove (creux), ridge (relief), double, dotted */
        thick   /* thin ou medium */
        #fd5;   /* ou toute autre couleur, red, yellow… */
width: 50%;     /* un pourcentage est préférable */
background-color: #ff8;
background-image: url(image.png);

Exemple : 

table { border:solid 2px #ffe; background-image: url(fond.jpg); width:50% }

Une simulation ici : www.somacon.com/p141.php

7 Les formulaires

Voir l’exploitation PHP ou javascript des formulaires.

La balise initiale d’un formulaire est <form> </form>, qui contiendra toutes les autres balises présentées ici.

Les formulaires n’ont de sens que si les données sont exploitées par un script.

<form id="carte" onclick="faire();"> permet l’activation d’un script «javascript» contenu dans la fonction faire par tout clic sur le formulaire. Cette fonction est écrite soit sur la page HTML soit dans un fichier séparé, qui doit alors être chargé.

<form action="votrescript.php" method="post"> est typique de l’envoi des données à une page écrite en PHP.

7.1 input

Attention! cette balise est multifonctionnelle, puisqu’elle permet l’édition de données variables qui seront soumises à un script (voir les exemples de PHP et javascript), ainsi que le bouton cliquable qui permet l’envoi de ces données. Les cases à cocher et radio-boutons, qui utilisent également <input …>, sont présentés à la section suivante.

Cette balise permet premièrement l’édition d’une donnée par l’internaute. Elle comporte alors au minimum l’attribut name qui définit le nom de la variable à saisir : 

<input name="var3">

Le mode de récupération de la valeur dépend du script utilisé : voir les exemples PHP et javascript.

Deux attributs sont très utiles :

En combinant les deux : <input name="var3" size="3" value="3.14">

C’est encore une balise input (entre <form> et </form>) qui se charge de mettre fin à l’édition et de transmettre par un bouton cliquable (affichant ici "Procéder").

<input type="submit" value="Procéder">

Exemple minimal d’utilisation de formulaire

Ce fichier HTML permet d’envoyer une phrase au fichier avis.php : 

<html><body>
<form method="post" action="avis.php">
Mon avis: <input name="var">
<input type="submit" value="Envoyer">
</form>
</body></html>

Exemple simplifié de formulaire de login

Voici un exemple de fichier HTML très simple permettant un logging : 

<html><body>
<form method="post" action="entrer.php">
Identifiant: <input name="id" size="10">
Mot de passe: <input type="password" name="mp" size=10 pattern="[A-Za-z0-9]{6,10}">
<input type="submit" value="Entrer">
</form>
</body></html>

Pour l’édition d’un champ de mot de passe,

Il existe d’autres types de champs :

<input type="email"> n’accepte que les chaînes comportant au moins un caractère (qui ne soit ni l’espace ni l’arobase), une arobase et au moins un autre caractère. Par défaut, il semble que pattern="[^ @]*@[^ @]*", ce qui n’est pas suffisant : il faudrait de plus supprimer guillemets simple et double, les lettres accentuées…
<input type="url"> qui doit être une URL valide, sans exigence sur le protocole : nawak:// fonctionne.

<input type="hidden" value="5" name="var"> permet de passer discrètement une valeur (discrètement, pas secrètement). C’est parfois utile pour conserver une valeur d’une page PHP à l’autre.

<input type="range" value="5" min="0" max="10" step="0.1" name="val"> affiche un curseur permettant de choisir selon les valeurs définies. C’est purement visuel : la valeur courante n’est pas affichée

<input type="number" value="1" min="0.7" max="1.9" step="0.05" name="val"> deux flèches (haut et bas) permettent d"ajuster une valeur, celle-ci est affichée


<input type="file" name="fichier"> affiche une boîte de sélection de fichiers

D’autres encore sont diversement supportées par les navigateurs, fonctionnant en tout cas avec FireFox60 :

<input type="time"> formate l’entrée d’une heure sous la forme --:--
<input type="date"> formate l’entrée d’une date sous la forme jj/mm/aaaa, avec calendrier graphique
<input type="color" name="coul"> permet de sélectionner une couleur
<input type="search"> est un champ de type «recherche» comme sur un moteur de recherche

Ne fonctionnent pas avec FireFox60:

<input type="tel" pattern="[0-9]"> est réservé aux numéros de téléphone; son principal intérêt serait d’afficher un clavier numérique sur les mobiles

<input type="month"> permet de sélectionner un couple mois/année
<input type="week"> permet de sélectionner un couple numéro de semaine/année

<input type="datetime">
<input type="datetime-local">

Empêcher un copier-coller (javascript)

Pour empêcher un copier-coller ou un tirer-déposer (drag’n drop) d’un champ à un autre (par exemple lors d’une demande de confirmation d’un mot de passe), voici comment libeller les balises input : 

<label>Mot de Passe: <input type="text" name="motdepasse"
oncopy="return false;" oncut="return false;"
ondragstart="return false;"></label><br>

<label>Confirmation: <input type="text" name="confirmation"
onpaste="return false;" ondrop="return false;"></label><br>

Remarques

7.2 Boîtes à cocher

Voir l’exploitation PHP ou javascript des formulaires.

C’est toujours la balise input qui permet un carré à cocher. "checked" signifie coché par défaut, la valeur sera transmise si la boîte a effectivement été (ou est restée) cochée. 

<input type="checkbox" name="marie" value="oui" checked="checked"> Marié-e<br>
<input type="checkbox" name="enfant" value="ouin" checked="checked"> Enfant-s<br>
<input type="checkbox" name="animaux" value="ouaf"> Animaux<br>

Marié-e
Enfant-s
Animaux

Radio-boutons

Cette balise permet le choix exclusif (bouton-radio) si chaque balise input a la même valeur pour l’attribut name ; une seule variable sera reçue dans le script action : 

<input type="radio" name="couleur" value="rouge"> Rouge &nbsp;
<input type="radio" name="couleur" value="vert"> Vert &nbsp;
<input type="radio" name="couleur" value="bleu"> Bleu
Rouge   Vert   Bleu

Attention : ce dispositif ne permet pas la désactivation du choix, or une réponse maximum ne signifie pas nécessairement qu’il en faille une. Il faut dans ce cas prévoir un bouton neutre : 

<input type="radio" name="couleur" value="" checked="checked"> Rien &nbsp;
<input type="radio" name="couleur" value="rouge"> Rouge &nbsp;
<input type="radio" name="couleur" value="vert"> Vert &nbsp;
<input type="radio" name="couleur" value="bleu"> Bleu
Rien   Rouge   Vert   Bleu

7.3 select / option

Voir l’exploitation PHP ou javascript des formulaires.

La balise select permet de sélectionner une item dans une liste, chaque valeur devant être placée dans une balise option, l’éventuelle option par défaut étant marquée selected="selected" ; optgroup permet de séparer des groupes d’options sous un titre. Le nom de chaque option est la valeur transmise au script d’action. 

<select id="unite">
<optgroup label="&nbsp;Labo" style="color:red"></optgroup>
<option>&Aring;
<option>µ
<optgroup label="&nbsp;Terre" style="color:green"></optgroup>
<option>mm
<option selected="selected">m
<option>Km
<optgroup label="&nbsp;Espace" style="color:blue"></optgroup>
<option>ua
<option>a.l.
<option>pc
</select>

Pour transmettre une valeur différente du nom affiché (ce qui évite un tableau de traduction), il faut la spécifier avec value="" : 

<select id="mois">
<option value="0" selected="selected">Mois:
<option value="1">janvier
<option value="2">février
  etc.
</select>

L’attribut size="n" ajouté à la balise <select name="mois"> transforme le menu déroulant en une liste de n lignes avec flèches «haut» et «bas» pour explorer l’entièreté des options.

L’attribut multiple="multiple" permet une sélection de plusieurs valeurs avec [control-clic] (ajout) ou [shift-clic] (plusieurs valeurs contigües). Sans attribut size, la liste comporte 4 lignes. 

<select name="mois" size="4">
<option value="0" selected="selected">Mois:
<option value="1">janvier
<option value="2">février
  etc.
</select>

7.4 textarea

Voir l’exploitation PHP ou javascript des formulaires.

Cette balise est utilisée pour un texte pouvant contenir des fins de paragraphes (retour-chariot). La syntaxe est différente car elle ne peut pas contenir sa fermeture comme la balise précédente, car les balises ouvrante et fermante entourent le texte par défaut. name désigne le nom de la variable sous laquelle le texte sera réceptionné par la méthode $_POST, rows défini le nombre de lignes (+1!) et cols la largeur en caractères du rectangle éditable. 

<textarea name="votreavis" rows="3" cols="70">Texte par défaut</textarea>

donne :

8. Accessiblité

Il n’y a pas que des personnes «valides» qui consultent vos sites. Si l’on peut déplorer le manque d’aménagements publics pour les personnes handicapées, on devrait se poser les mêmes questions pour l’accès à Internet.

8.1 Conseils généraux

Des navigateurs tolérants empêchant parfois de se rendre compte des problèmes de structure ou de syntaxe, le Consortium W3 permet de vérifier toute page sur Internet ou sur sa propre machine : Validator

Afin de pouvoir également s’adresser aux non-voyants ou mal-voyants, il est bon de visualiser ses pages avec un navigateur en mode texte, comme lynx. Dans les navigateurs courants, désactiver les images, la page de style ou le script du style si celui-ci est défini dans un link… n’est pas vraiment suffisant. Il existe heureusement des testeurs en ligne.

Il y a néanmoins quelques points à respecter :

8.2 Commenter les images

Un nom du fichier graphique n’étant pas toujours explicite il faut penser à utiliser alt="description de l’image" dans la balise img, ne serait-ce que pour les personnes n’utilisant pas de navigateur graphique (comme les non-voyants) : 

<img src="photo003.jpg" alt="Coucher de soleil">

Ceci est particulièrement important lorsqu’une page est appelée par un clic sur une image : 

<a href="page43.html"><img src="suivante.gif" alt="Page suivante"></a>

Dans le cas où une image n’a aucune valeur informative, il est bon de préciser alt="trait graphique".

8.3 Permettre de contourner les clics graphiques

En cas de grand besoin de faire partager vos oeuvres en Flash ou des clics sur des parties précises d’images (map), il faut prévoir une manière alternative de naviguer à travers vos pages, par exemple avec un lien «Continuer sans animation».

8.4 Préciser la langue des pages

La synthèse vocale a besoin de connaître la langue dans laquelle la page est écrite. En HTML, cela s’indique en ajoutant lang="fr" dans la balise html. 

<html lang="fr">

En XHTML 1.0 : 

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

En XHTML 1.1 : 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Il est possible de spécifier la langue pour une partie de site : 

<p lang="en">Yes</p>.

8.5 Ne pas ouvrir de lien dans une nouvelle fenêtre

Si l’on considère que :

…on peut concevoir sans peine qu’ouvrir un lien dans une nouvelle fenêtre n’est jamais vraiment nécessaire mais est plutôt une gêne à la navigation. Sur un navigateur graphique, un Internaute qui le désire peut toujours ouvrir un lien dans une nouvelle fenêtre avec un [shift]-clic (IExplorer), [Control]-clic (Netscape, Mozilla et dérivés), [pomme]-clic (Macintosh) ou dans certains cas le menu appelé par le clic-droit de la souris.

8.6 Se méfier des couleurs

Il se pourrait que la visualisation en mode texte cache justement un problème de lisibilité : deux couleurs très différentes peuvent paraître, chez les daltoniens (8% de la population masculine) aussi tranchées que du marron sur fond brun.

Par ailleurs, adoucir e contraste d’un texte en éclaircissant les caractères et en maintenant le fond blanc est une mauvaise solution, crispant les yeux fatigués ou déficients. Pour vous en convaincre, voyez cette page.

Pour ceux que les calculs intéressent, voir la page contraste du site www.accessiweb.org.

8.7 Techniques spécifiques

8.7.1 Prévoir un plan du site

Une page peut apparaître simple bien qu’écrite de façon complexe, et donc difficile à déchiffrer avec les navigateurs en mode texte. Pour les personnes utilisant ceux-ci, il est intéressant de prévoir une page "plan de site" appelable à partir chaque page. La page affichée commencera par un lien pointant vers la page http://www.toto.org/sommaire.html, si la partie head contient la ligne suivante : 

<link rel="home" title="Sommaire" type="text/html"
 href="http://www.toto.org/sommaire.html">

8.7.2 Écrire des pages alternatives

Si un graphique ne peut être décrit simplement, penser à une page alternative en mode texte. Plusieurs mots-clés peuvent servir : author, copyright, mais cela dépend d’un navigateur à l’autre : 

<link rel="author" title="Échec: mat en mode texte" type="text/html" href="mat-txt.html">

où le graphique d’un échiquier sera remplacé par une description ligne par ligne : 

-- Rn -- Tb -- -- -- --
Pn Pn Pn -- -- -- -- --
-- -- -- -- -- --
-- -- --

Exemple : comparer les pages base.htm et basetxt.htm. Cette page tente de faire les deux.

8.8 Emplois problématiques de cadres (frames) et de tableaux

Le HTML ayant été initialement conçus pour afficher un flux de données, les frames sont une mauvaise bonne invention, surtout pour les non-voyants qui devront souvent parcourir l’entièreté de frames inutiles avant d’accéder à l’information voulue. D’autre part, les frames posent un problème de référencement pour les moteurs de recherche. Si vous ne pensez pas pouvoir vous en passer, donnez-leur un titre. On peut sans beaucoup de problème mettre quelques raccourcis en début de page, comme le menu en début de la présente.

Un tableau ne devrait être utilisé que pour l’affichage de données par lignes et par colonnes, et pas pour organiser une page. Évitez de fusionner les cellules, surtout dans le sens vertical. D’une manière générale, la visualisation d’une page HTML avec un navigateur en mode texte permet de se rendre compte des difficultés de lecture d’un tableau.

8.9 Liens utiles