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.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 float
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.1 Liens hypertexte
4.2 id="etiquette"
4.3 Affichage d'image
4.4 Zones cliquables
4.5 Exemple
5.1 Listes ordonnées ol
5.2 Listes non ordonnées ul
5.3 Définitions: dl, dt et dd
6.1 Tableau simple
6.2 Agrégation de cellules
6.3 Spécifications CSS
7.1 input
7.2 textarea
7.3 select / option
7.4 Boîtes à cocher
8.1 Conseils généraux
8.2 Commenter les images
8.3 Permettre de contourner les clics graphiques
8.4 Préciser la langue des pages
8.5 Éviter tableaux cadres (frames)
8.6 Ne pas ouvrir de nouvelles fenêtres
8.7 Se méfier des couleurs
8.8 Techniques spécifiques
8.9 Liens utiles
À quoi peut bien servir l'HTML (Hyper Text Markup Language) ?
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.
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, des liens d'autres sites peuvent pointer vers n'importe quelle de vos pages...
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.
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.
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.
Les éditeurs spécifiques au html (nvu...) ou traitements de texte exportant des pages html (OpenOfffice...) sont à éviter, fabriquant du code lourd et redondant. Le mieux est d'éditer le code avec les éditeurs simple: les éditeurs gedit (Gnome) et kwrite (KDE).
Un fichier HTML 4.01 strict est essentiellement du texte formaté par des balises. Celles-ci sont constituées d'un terme entourés des signes '<' et '>'. Chaque balise est un interrupteur qu'il faut fermer après utilisation. Ainsi, les données d'un fichier HTML commence par la balise <html> et se termine par la balise </html>.
On y trouve deux parties distinctes : la première, ouverte par <head> et terminée par </head>, contient les indications internes et la seconde, ouverte par <body> et fermée par </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 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Le post-modernisme est-il relativiste?</title>
<meta name="author" content="Dudule">
<meta name="description" content="Hyper-relativisme et post-modernisme">
<meta name="keywords" content="post-moderne, relativisme, philosophie">
</head>
<body>
<h1>Un titre, par exemple</h1>
<p>Un premier paragraphe de texte</p>
... et des liens, des images, des tableaux, des listes, etc.
</body>
</html>
<title> permet de définir le titre de la page (et de la fenêtre) et doit se terminer par </title>.
<meta> permet de définir d'autres caractéristiques de la page ainsi que des renvois, en définissant les variables NAME et CONTENT :
<meta name="author" content=""> donne le nom de l'auteur de la page
<meta name="description" content=""> décrit la page
<meta name="keywords" content=""> permet de donner des mots-clés séparés par des virgules
<meta name="robots" content="noindex"> pour empêcher les moteurs de recherche de répertorier la page
<meta http-equiv="options" content="options"> permet certaines commandes vis-à-vis des navigateurs:
<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 précisé
<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 temporaire). content="0" pour une page qu'il faudra toujours recharger (jamais en cache).
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> permet de définir le jeux de caractères de la page, et être lu indifféremment par tout système même si vous utilisez les caracères accentués plutôt que l'encodage html (è...). On utilise de plus en plus UTF8.
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.
Toute donnée doit être entourée d'une de ces balises de bloc:
<p> </p> délimitent des paragraphes espacés.
<div> </div> délimitent des paragraphes non espacés; le paragraphe qui suit collera à ce genre de paragraphe.
<pre> </pre> pour un paragraphe avec fonte non proportionnelle (type machine à écrire); chaque espace et les retours à la ligne sont pris en considération.
<h1> </h1> délimitent le titre de plus haut niveau; <h6> </h6> le plus bas.
Les listes ordonnées <ol> </ol>, non-ordonnées <ul> </ul> et de définitions <dl> </dl>
Les tableaux <table> </table> contenant des lignes entre <tr> et </tr>, contenant elles-mêmes des cellules entre <td> et </td>
Une balise de block, <hr> ne contient pas de donnée. Elle tire une ligne horizontale et comprend sa propre fermeture.
À 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...).
<span> </span> délimite une partie de texte pour définir d'autres attributs de styles.
<tt> </tt> délimitent une protion de texte avec fonte non proportionnelle (type machine à écrire).
<abbr title="Organisation des Nations Unies">ONU</abbr> permet une définition ou une explicitation de sigle dans un post-it: survolez ONU
<br> est une balise "en ligne" forçant un retour à la ligne.
<wbr> (Word BReak) prévoit une coupure à l'endroit précis d'un mot (sans trait de césure)
<nobr> (NO BReak, à fermer) définit une plage sans coupure
Il est possible de modifier le caractère 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: green;">deux,</span> trois</p>
Un, deux, trois
...tandis que la spécification display: inline aura l'effet inverse:
<h3 style="display: inline;">Titre</h3> <p style="display: inline;">Texte</p>
Texte
[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 celluless, 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>
La tendance pour l'édition des pages HTML en est à la séparation du contenu et de la forme. Le contenu se trouve entre les balises <body> et </body> du fichier HTML. Le formatage se trouve soit à l'extérieur dans une feuille de style CSS, (Cascade Style Sheet) soit 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.
Par exemple, une partie de page codée en html 3:
<h1><font color="blue" size="24"><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="style.css" type="text/css" media="screen">
où "style.css" est le nom (de votre choix) du fichier de style.
La feuille de style est un fichier en texte simple contenant une structure attribuant à chaque balise des attributs. On l'appelle par une balise dans la première partie du fichier HTML (entre <head> et </head>):
<link rel="stylesheet" href="votrefeuille.css" type="text/css" media="screen">
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: time; précise une police de caractère: time, sans-serif (suisses: bâtonnets: Arial), cursive, fantasy; courier, monospace (par défaut pour les balises <tt> et <pre>)
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 point dans une ligne de 14.
font-weight: bold; la graisse de la fonte sera grasse, normal sinon.
font-style: italic; force le style penché
text-decoration: underline; souligne; surligné avec overline; et le barré avec line-through;
text-transform: capitalize; ajoute une majuscule à chaque début de mot, lowercase et uppercase transforme les lettres en minuscules ou majuscules
text-align: justify; applique l'alignement pour les balises p, h1-h6,
li, div... Les autres valeurs peuvent être left, right et center
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 d'un texte: 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 et gauche
vertical-align: top; force l'affichage vers le haut d'une cellule de tableau (td). Les autres valeurs sont middle et bottom
Deux balises subsistent pour introduire le gras (<strong> en remplacement de <b>) et l'italique (<em> en remplacement de <i>).
Il est possible de spécifier des classes, qui modifie les attributs d'une balise.
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'
L'affichage traitera différemment les balises <p> et <p class='quote'> :
<p> Le paragraphe normal </p><p class='quote'> Un paragraphe de la classe 'quote', de couleur et de marges différentes </p>
Le paragraphe normal
Un paragraphe de la classe 'quote', de couleur et de marges différentes
Note: 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 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">
<!-- /* pas de fichier .css séparé pour cette page unique */
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>
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é
Concernant les spécifications haut / bas /gauche / droite:
attribut: a b c d; concerne respectivement: haut, droite, bas, gauche
attribut: a b c; haut, gauche et droite, bas
attribut: a b; haut et bas, gauche et droite
attribut: a; les quatre directions
Concernant les cadres:
solid double dotted dashed outset inset groove ridge
inherit: hérite du cadre de l'élément englobant
none: pas de cadre
hidden: résoud certains conflits dans les tables
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)
spécifie la page-cible, celle qui doit être chargée quand le lien est cliqué :
<a href="http://www.quelquepart.com">Cliquez ici</a> : texte cliquable
<a href="http://www.quelquepart.com"><img src="adresse"></a>: image cliquable. Certains navigateurs affichent un bord de la couleur du lien. On l'efface avec style="border: 0px".
<a href="../index.htm">Cliquez ici</a> pointe vers un fichier dans un répertoire parent.
<a href="mailto:dudule@serveur.com">Contact</a> permet l'envoi d'un mail à partir d'un clic.
<a href="ftp://site">Download</a> permet une connexion à une adresse ftp
spécifie l'endroit cible d'une page, atteint par <a href="#lieu">Ici</a>
<h1 id="haut"></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: bold; }
a:link { color: blue; }
a:visited { color: darkgreen; font-style: italic}
a:hover { color: cyan; font-decoration: underline; }
a:active { color: red; } /* pas pris en compte par tous les navigateurs */
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="text" 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
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.
<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, binascci).
usemap "#etiquette" : lie l'image à une définition d'aires cliquables (voir map)
<map name="">...</map> permet la spécification d'une série d'aires cliquables d'une image.
name="etiquette" : en relation avec l'argument de l'attribut USEMAP de <IMG>.
<area alt="" shape="" coords="" href="nose.html"> lie une aire de l'image à vers un lien.
shape="circle" coords="x,y,r" : pour un cercle de centre x,y et de rayon r
shape="rect" coords="x,y,l,h" : pour un rectangle (point d'origine, largeur et hauteur)
shape="poly" coords="x1,y1,x2,y2,x3,y3,..." : pour un polygone défini par une série de points
href="" : définit la page cible
nohref : indique que cette aire ne peut générer aucun lien.
<map name="menu"> <area shape="circle" coords="63,48,49" nohref> <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="15,12,25,20,32,65,45,55" href="mouth.html"> </map> ... <img src="images/moi.jpg" border="0" usemap="#menu">
<ol type="" > ... </ol> définit une liste ordonnée (Ordered List)
<ol> <li>Point trois</li> <li>Point quatre</li> </ol>
donne:
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 */
}
<ul> ... </ul> : définit une liste non ordonnée (Unordered List).
<ul> <li>Une chose</li> <li>Une autre</li> </ul>
donne:
Styles associés à la balise <ul>:
ul
{
list-style-type: circle; /* ou square; disc par défaut */
list-style-image: (url); /* adresse d'une image servant de puce (incompatible avec le précédent)*/
list-style-position: inside; /* augmente le retrait par rapport à la marge; par défaut: outside */
margin-left: -2em; /* ou -20px, permet de réduire le retrait */
}
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><li>
Une autre
<ul><li>
Une sous-chose
<ul><li>
Une sous-sous-chose
</li><li>
Une sous-sous-autre
</li></ul>
</li><li>
Une sous-autre
</li></ul>
</li></ul>
donne :
<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> affiche une définition indentée en dessous du terme.
<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:
Attention: ce qui suit n'est pas du HTML strict!
<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>). 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 |
cellspacing="" nombre de pixels entre chaque cellule
<th>...<th> définit une rangée où le contenu est gras et centré.
<td>...<td> définit une cellule de tableau
width="" valeur de la largeur de la cellule (et donc la colonne
à laquelle elle appartient), en pixels ou pourcentage
td
{
text-align: center; /* left, right */
vertical-align: top; /* bottom, middle... */
}
Il existe encore une séparation possible entre cellules de tête, de pied et de corps de table, à spécifier dans cet ordre: <thead>, <tfoot> et <tbody>
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>
<th colspan="2" style="background:#faa;">Cellule de 2 colonnes</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
| Cellule de 4 rangées |
Cellule de 2 colonnes | |
|---|---|---|
| 1 | 2 | |
| 3 | 4 | |
| 5 | 6 | |
Voici, en vrac, des spécifications pour l'habillage des tableaux:
table {
caption-side: bottom; // où se situe la légende; top par défaut
border-spacing: 10px 5px; // séparation (largeur heuteur) 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 de cellule; 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
La balise initiale d'un formulaire est <form> </form>, qui contiendra toutes les autres balises présentées ici. En paramètre, on lui passera l'adresse du fichier qui traitera les valeurs contenues dans les champs éditables qu'elle contient et la méthode de passage des valeurs à cette page. 'post' signifie que les valeurs seront passées tacitement. 'get' fait passer les paramètres dans l'url (index.php?var=123), ce qui peut être trop long ou inadéquat. Les balises de cette section doivent se trouver entre <form action='votrescript.php' method='post'> et </form>.
Voir l'exploitation PHP des formulaires.
Cette balise permet 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'>
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 par défaut peut être définie avec value=''.
Il est également possible de passer 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'>
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>
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 le nombre de ligne +1, et cols la largeur du rectangle éditable.
<textarea name='votreavis' rows='3' cols='70'>Texte par défaut</textarea>
cette balise permet un menu déroulant, toutes les valeurs devant être placées dans les balises option, l'option par défaut étant marquée selected.
<select name="unite"> <option>mm</option> <option>cm</option> <option selected="selected">m</option> <option>Km</option> <option>a l</option> </ select>
Si ce qui s'affiche n'est pas la valeur que vous désirez transmettre, il faut le spécifier avec value=' ':
<select name="mois"> <option value='0' selected='selected'>Mois:</option> <option value='1'>janvier</option> <option value='2'>février</option> etc. </select>
C'est toujours cette balise qui permet un carré à cocher. 'checked' signifie coché par défaut, la valeur sera transmise si la boîte a effectivement été cochée.
<input type='checkbox' name='opter' value='in' checked='checked'> Oui?
Oui?
C'est enfin cette balise qui permet un choix exclusif (bouton-radio):
<input type='radio' name='couleur' value='rouge' checked='checked'> Rouge <input type='radio' name='couleur' value='vert'> Vert <input type='radio' name='couleur' value='bleu'> Bleu
Voir l'exploitation PHP des formulaires
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:
Un nom du fichier graphique n'étant pas toujours explicite il faut penser à utiliser alt="description de l'image" dans la balise img:
<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, préciser alt="": le nom de fichier de l'image n'encombrera pas la page en mode texte.
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").
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>.
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.
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.
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.
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">
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