site sans réclame HTMLCont@ctS'abonner • DEWEY 004.671

Langage HTML et CSS

En cours de réécriture «HTML5»

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
2.5 display: block / inline
2.6 Info-bulle (post-it)
2.7 float

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 concernants 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 Exemple

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 Éviter les frames
8.6 Pas de nouvelles fenêtres
8.7 Se méfier des couleurs
8.8 Techniques spécifiques
8.9 Liens utiles

Les caractères

Les couleurs

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 (les petits plats dans les grands) ou cyclique (A renvoie à B, qui renvoie à C... qui renvoie à Z, qui renvoie à A).

Mais aussi à l'élaboration de tout document non linéaire («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... dans 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 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.gif = = (image)
images/fondbleu.gif = = (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.dudule.org ou http://www.portail.com/dudule 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 faire 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 un 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/dudule/textes/boulot/cv.htm">Curriculum vitae</a>
<img src="http://www.portail.com/dudule/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 permet donc de vérifier vos liens.

Note 2

Lors de la location d'une connexion à Internet, on vous propose souvent un espace de quelques MegaOctets ("millions de caractères") à l'adresse de la forme http://www.portail.com/dudule. C'est à cet endroit qu'il vous faudra charger vos pages sur internet ("uploader"), à l'aide d'un programme "ftp" (file transfert protocol), 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).

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és des signes < et > et peuvent contenir des attributs, de façon générale:

<balise attribut1="definition1" attribut2='definition2'>

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

Dans un souci de simplification, les balises qui ne peuvent être emboîtées (par exemple la balise de paragraphe <p>) 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 listing HTML (version 5):

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

<meta charset="utf-8">
<title>Le post-moderne est-il soluble dans le relativisme?</title>
<meta name="author" content="Dudule">
<meta name="description" content="Hyper-relativisme et post-modernisme
vont-il nécessairement de pair? Discussion définitive.">
<meta name="keywords" content="post-moderne, relativisme, philosophie, epistemologie">

</head><body>

<h1>Un titre, par exemple</h1>

<p>Un premier 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, et apparaît également dans les onglets du navigateur.

<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="noindex"> pour empêcher les moteurs de recherche de répertorier la page.
<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 dans un appareil android (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.dudule.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 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, qui peut coder l'entièreté des écritures du monde, lettres, idéogrammes, écritures syllabiques... iso8859-15 (européen de l'ouest) est remplacé par windows-1252.

<base href="http://www.dudule.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.dudule.com/scripts/do-it.php.

2.2 La zone BODY

La zone entre <body> et </body> est réservée à tout 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. Une fin de ligne sépare d'office deux mots d'un espace.

2.3 Les balises de bloc

Toute donnée doit être entourée d'une de ces balises de bloc:

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

<div> </div> délimitent , sans espacement de fin, sauf précision contraire.

<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); par exception, chaque espace     est pris en considération ; les retours à la ligne également

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

Une balise de block, <hr> 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» 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

<kbd> </kbd> est l'équivalent «en ligne» de <pre> </pre>: il délimite une portion de texte avec fonte non proportionnelle. La balise <tt> </tt> de l'HTML4 est désuète.

<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> permet le soulignement

Il est possible de modifier ce soulignement avec text-decoration:overline, line-through ou none.

<s> </s> permet de barrer un texte

<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 l'harmonie 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).

<q> </q> permet une citation entourée 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, prévoir q {quotes:none}.

<span> </span> délimite une partie de texte pour définir d'autres attributs de styles, à définir avec une classe ou un style

<br> est une balise "en ligne" forçant un retour à la ligne.
<wbr> (Word BReak) permet une éventuelle césure à un endroit précis d'un mot, sans ajouter de trait de césure, intéressant pour une césure sur un caractère non habituel
&shy; permet une éventuelle césure à un endroit précis d'un mot, avec apparition d'un trait de césure

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 l'exemple suivant à quoi cela peut servir.

2.6 Info-bulle (post-it)

<abbr title="Organisation des Nations Unies">ONU</abbr> permet une définition ou une explicitation de sigle dans un post-it: survolez MSF

Ce post-il a plusieurs désavantages: il est toujours jaune pâle et selon les navigateur, n'apparaît souvent qu'après une demi-seconde et peut disparaître après un moment. L'utilisation de deux classes et l'attribut display permettent de fabriquer soi-même une info-bulle beaucoup plus souple. Exemple fonctionnel:

<!DOCTYPE HTML><html><head>
<meta charset="utf-8">
<style type="text/css">
.mot { color:#00a; }
.expl
  { display:none; }
.mot:hover span.expl
  { display:inline; position:absolute;
    border:solid 1px #008;
    background:#8dd;
    margin: 1.3em 0 0 1px;
    padding:.3em; margin:.5em;
    text-align:center
  }
</style>

</head><body>

<p>
<span class="mot">
MSF<span class="expl"><b>M</b>édecins<br>sans<br><b>F</b>rontières</span>
</span>

</body></html>

Survolez MSFMédecins
sans
Frontières

Par défaut, le texte qui se trouve entre les balises <span class="expl"> et </span> n'est pas affiché (display:none). Mais lorsque «Expression» est survolé (.mot:hover), la balise-fille (désignée par .mot:hover span.expl) s'affiche (display:inline pour un affichage à droite).

background:#xyz permet de rendre le fond opaque (transparent par défaut)
margin permet un positionnement plus fin par rapport à l'expression survolée
padding aère le texte dans son cadre

Parmi les avantages, il est possible d'y intégrer un tableau, une image, ou des liens... permettant un menu avec sous-menus sans javascript! Défini une fois pour toute dans un ficher CSS, cela prend peu de place dans le fichier HTML (un système de menu un peu plus), surtout si on sacrifie une balise comme je le fais pour ce site (voir www.jchr.be/jchr.css), avec cet appel:

<q>mot à survoler<u>ce qui n'apparaît que lors du survol</u></q>

Amélioration et simplification

<!DOCTYPE HTML><html><head>
<meta charset="utf-8">
<style type="text/css">
q:before, q:after { content:""; } /* suppression des guillemets */
q { color:#00a } /* couleur du texte (toujours visible) à survoler */
q:hover, q:active { color:#eee; background:#336 } /* couleur du texte survolé */
q u { display:none; text-decoration:none } /* contenu caché, non souligné */
q:hover u, q:active u /* ce qui apparaît si le texte est survolé */
{ display:inline; position:absolute;
color:#eee; background:#336; text-align:center;
padding:1px 6px 2px; margin: 1.3em 0 0 1px }
</style>

</head><body>

<p>
<q>MSF<u><b>M</b>édecins<br>sans<br><b>F</b>rontières</u></q>

</body></html>

2.7 float

[image]

 §§

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;">[image]</p>
<p style="float:right;">§§</p>
<p>
... le texte
</p>

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>

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 html 3 (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">

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;
  }

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; précise une famille de police: serif, sans-serif (suisses: bâtonnets: Arial), cursive, fantasy; monospace (par défaut pour les balises <pre>, et <kbd> qui remplace <tt>)
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-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-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 (mm ou cm)
word-spacing: 1em; ajoute une hauteur de caractère entre chaque mot (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.)

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):

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

Il est possible de spécifier un paramétrage à une balise identifiée <div id="etiquette">:

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 (exemple fonctionnel ; pour profiter à plusieurs pages, le style doit être défini dans une page .css séparée).

<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 de sens que lorsque la page est unique en son genre.

<style type="text/css">
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 vieux code HTML. À 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:dudule@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:dudule@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="" usemap=""> 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

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="" name="marque"> marque une image de l'étiquette l'attribut USEMAP de <IMG>.

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

<area alt="" shape="" coords="" href=""> 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="x,y,l,h" définit un rectangle par son point d'origine, sa largeur et sa hauteur
shape="poly" coords="x1,y1,x2,y2,x3,y3,..." définit un polygone par une série de coordonnées des sommets
href="" définit la page cible

4.5 Exemple reprenant la séquence des trois balises

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

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

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

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 comme en html4 ê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 :

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 indispensables. 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: 2px; /* nombre de pixels des frontières de cellules */
  }

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.

<table>
<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>
tête gauchetête droite
corps gauchecorps droite
pied gauchepied droite

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 de<br>4 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
4 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 {
   caption-side: bottom;   /* où se situe la légende; top par défaut */
   border-spacing: 10px 5px; /* séparation (largeur 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 */
   }

Valable pour les trois balises:

border: solid;  /* dashed (dicontinu), 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);

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.

7.1 input

Voir l'exploitation PHP ou javascript des formulaires.

Attention! cette balise est multifonctionnelle, puisqu'elle permet l'édition d'un champ simple, éventuellement de façon discrète (**** pour mots de passe), de soumettre les données à un script. Les cases à cocher et radio-boutons sont vues à la section suivante.

Cette balise permet d'abord l'édition d'un champ simple. Elle doit prévoir au minimum le nom de la variable qui récupérera la valeur de la chaîne saisie:

<input name='var3' value='3.14'>   

La valeur de name représente le nom de la variable récupérée par le fichier de traitement du formulaire, défini plus haut par <form action='votrescript.php' method='post'>

Il est possible de définir une largeur de champ avec le paramètre size mais aussi de masquer les caractères saisis (par exemple pour un mot de passe) avec type='password'. Une valeur prédéfinie peut être spécifiée avec value=''.

Il est également possible de passer discrètement une valeur en utilisant la balise input avec type='hidden'

<input type='hidden' 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 "Calculer").

<input type='submit' value='Calculer'>   

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' value=''>
Mot de passe: <input type='password' name='mp' size=10 value=''>
<input type='submit' value='Entrer'>
</form>
</body></html>

Empêcher un copier-coller (javascript)

Pour empêcher un copier-coller ou un tirer-jeter (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 le même 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 un menu déroulant, toutes les valeurs devant être placées dans les balises option, l'éventuelle option par défaut étant marquée selected="selected" ; optgroup permet de regrouper les groupes d'options sous un titre.

<select name="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>

Ce sera la valeur qui s'affiche qui sera transmise au script d'action. Pour transmettre une valeur différente (ce qui évite un tableau de traduction), il faut la spécifier avec value='':

<select name="mois">
<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 ligne +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é

8.1 Conseils généraux

Des navigateurs trop tolérants empêchant parfois de se rendre compte des problèmes de structure, 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 du 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 laisser alt="" ou de préciser avec 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 4, 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 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. 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.6 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.7 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, vouloir adoucir l'affichage d'un texte en éclaircissant les caractères et en maintenant le fond blanc est une bêtise profonde (on se demande qui l'a inventée... un marchand de lunettes?), crispant les yeux fatigués. Il vaut mieux garder le caractère en noir et griser légèrement le fond, c'est bien plus reposant et consomme moins d'électricité.

8.8 Techniques spécifiques

8.8.1 Prévoir un plan du site

Une page peut sembler 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.dudule.org/sommaire.html, si la partie head contient la ligne suivante:

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

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

8.9 Liens utiles