Le HTML

1 - La structure de base d'une page html

Une page web contient une structure de base composée des éléments suivants :
la déclaration, la balise html, la balise head et la balise body.

1.1 - La déclaration

« Sans déclaration de type de document (Doctype ou Doctype Declaration en anglais, NdT), votre document HTML n'est tout simplement pas valide et la plupart des navigateurs qui vont visualiser votre document vont passer en mode « quirk », c'est-à-dire qu'ils vont considérer que vous faites absolument n'importe quoi, et en retour vont n'en faire qu'à leur tête. Vous aurez beau être le plus grand champion du HTML que la Terre ait jamais porté, votre HTML aura beau être impeccable et votre CSS parfaite, s'il n'y a pas une déclaration de document, ou si ce n'est pas la bonne, vos pages web pourraient bien finir par ressembler à des pages construites par un bébé gibbon myope et borgne atteint de troubles de l'apprentissage. »
Patrick Griffiths (Extrait de http://www.pompage.net/pompe/declarations/).

La déclaration indique principalement au navigateur la version du langage html que l'on utilise. En effet au fil du temps le W3C a fait évoluer ce langage en faisant apparaître de nouvelles balises, d'autres devenant obsolètes (deprecated).
La déclaration doit se placer en début du document.
Exemple de déclaration :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L'élément qui indique la version du langage html utilisé dans cet exemple est "XHTML 1.0 Strict".
Strict signifie que le code de la page respecte scrupuleusement la norme XTML 1.0.
L'adresse web qui suit pointe sur une page qui contient cette norme, le navigateur peut l'utiliser pour comprendre le code de la page qu'il va devoir interpréter.

Autres exemples de déclaration :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Dans ces déclarations les termes Transitional et Frameset sont utilisés.
Transitional veut dire que l'on peut encore utiliser les balises devenues obsolètes dans la version html précisée.
Framset est a utiliser si la page contient des frames (aujourd'hui il est vivement déconseillé d'utiliser des frames).

1.2 La balise html

La balise ouvrante html suit la déclaration. Elle indique le début du document html et englobe tous les éléments du code. La balise fermante html doit donc se placer en fin de document.

1.3 La balise head

La balise head correspond à l'entête du document. Elle se place à l'intérieur de la balise html.
Toutes les informations contenues dans head ne seront pas visibles dans la fenêtre du navigateur.
Le rôle de cette balise consiste principalement à donner des informations utiles au navigateur (pour afficher le contenu de la page) et aux ordinateurs parcourant le fichier comme les moteurs de recherche (description du contenu de la page).
L'un des éléments à ne jamais oublier dans cet en-tête est la balise title. Elle participe à l'optimisation du référencement de la page dans les moteurs de recherche.

1.4 La balise body

Cette balise correspond au corps de la page, c'est-à-dire au contenu qui sera affiché par le navigateur. Tout élément devant s'afficher dans une page web doit donc forcément être placé à l'intérieur de la balise body.

1.5 Organisation de ces balises

Voici ce à quoi doit ressembler cette structure de base d'une page html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HTML : langage de balises pour les sites web</title>
</head>
<body>
</body>
</html>

2 - Amélioration de la structure de base

2.1 Le couple attribut/valeur

Toute balise à une signification liée à son nom. On peut compléter cette signification en donnant des informations secondaires à l'aide d'attributs et de leurs valeurs que l'on écrit de la manière suivante :
<nomDeLaBalise nomAttribut="valeur(s)" nomAttribut2="valeur(s)" nomAttribut3="valeur(s)">Elément caractérisé par la balise</nomDeLaBalise>
On constate :
- Que les couples attribut/valeur ne sont indiqués que dans la balise ouvrante (jamais dans la balise fermante qui elle ne contient que le nom de la balise).
- Que le nom de l'attribut est toujours suivi du signe =.
- Que la valeur est toujours entourée de guillemets.
- Qu'il n'y a pas de limite concernant le nombre de ces couples.

Important :
Les noms des attributs sont imposés par le langage html.
L'association d'attributs à une balise particulière obéit également des règles. On ne peut associer n'importe quel attribut à n'importe quelle balise.
Même remarque concernant l'association des valeurs à un attribut. Toutefois certains attributs peuvent contenir des valeurs de notre propre choix comme pour les attributs class, id, href, alt, etc. pour lesquelles on peut définir librement les valeurs (class="toto" par ex.).

2.2 Modification de la structure de base

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML : langage de balises pour les sites web</title>
<meta name="description" content="Apprentissage du langage html : structure d'une page html, balise, attribut / valeur, etc." />
</head>
<body>
</body>
</html>

Pour la balise html on précise la langue utilisée dans la page.
Apparition de deux balises meta dans la balise head.
La première contenant charset=utf-8 permet au navigateur d'afficher correctement les caractères. Il faut que le fichier soit également encodé au moment de l'enregistrement dans cette norme (utf-8). Il existe d'autres normes comme iso-8859-1 qui correspond aux langues européennes, l'UTF-8 contient elle toutes des langues. Pour plus de précisions consulter le fichier XhtmlDeclaration.pdf.
La seconde balise meta permet de faire une description en quelques mots de la page. Ce texte est susceptible d'apparaître dans la page de résultat de recherche d'un moteur de recherche.
Remarque concernant la balise meta :
Cette balise est dite à la fois ouvrante et fermante, elle s'écrit <meta .... /> et non <meta ....></meta>.
En effet, la balise meta ne peut caractériser un élément, elle n'a de sens que par elle-même. Elle n'entoure donc pas un élément.
Il existe d'autres balises de ce type comme <br /> qui permet de faire un saut de ligne.

3 - Les entités

La gestion de l'affichage des caractères spéciaux et accentués peut également passer par l'utilisation des entités.
Une entité s'écrit de la manière suivante : &nomOuNumeroEntite;.
Exemple : la lettre é correspond à l'entité &eacute; ou &#233;.
Le charset=utf-8 utilisé dans la balise meta permet d'éviter de saisir dans le code source les entités en tapant directement les caractères spéciaux et accentués, mais dans certains cas il est nécessaire de faire appel à ces entités.
Dans l'exemple ci-dessus, l'entité représentant le é sera interprétée par le navigateur, on obtiendra alors l'affichage suivant : "la lettre é correspond à l'entité é ou é".
Pour obtenir l'affichage du nom des entités de cette phrase on doit remplacer le caractère & par l'entité correspondante : &amp;.
Dans cette page toutes les balises écrites sont donc interprétées par le navigateur. Pour que ces balises s'affichent comme texte avec leurs chevrons on doit donc utiliser les entités &lt; pour < et &gt; pour >.

4 - La gestion des blancs

On appelle blancs l'ensemble des espaces saisis dans le code source. Celles-ci (en typographie, espace est féminin) sont obtenues à l'aide de la barre d'espacement, des touches tabulation (indentation) et entrée. Lors de l'affichage de la page, le navigateur ne tient aucun compte de toutes ces espaces sauf celle qui sépare un mot d'un autre (si plusieurs espaces séparent 2 mots, une seule de ces espaces sera retenue).
Conséquences : 
- On peut utiliser dans le code source le nombre et le type d'espace que l'on désire pour optimiser la présentation et la lecture du code et ceci sans conséquence pour l'affichage dans le navigateur.
- Les retours à la ligne pour le texte affiché dans le navigateur ne s’obtiennent pas en utilisant la touche entrée dans le code source.

5 - Les balises de type bloc et en ligne

Les retours à la ligne affichés dans le navigateur sont obtenus par l'utilisation des balises.
Certaines balises provoquent ces retours, elles sont appelées balises de type bloc (block tag ou block element). Les autres balises sont dites de type en ligne (inline tag ou inline element), elles ne produisent pas de retour (cf. http://xhtml.com/en/xhtml/reference/).
Par exemple la balise p qui signifie «paragraphe» est une balise de type bloc alors que la balise strong qui veut dire «important» est de type en ligne.
A l'intérieur d'un paragraphe on peut faire appel à des retours à la ligne à l'aide de la balise br (cette balise est à la fois ouvrante et fermante).

6 - Structurer le contenu de la page

Le contenu de la page doit être organisé et hiérarchisé. Certaines balises jouent ce rôle en attribuant aux éléments de body différents statuts permettant la mise en place d’une structure (titre, paragraphe, liste, tableau, formulaire, etc.).
Important : toutes ces balises sont de type bloc.
Ces considérations débouchent sur les règles suivantes : 
- Tous les enfants de body doivent obligatoirement être de type bloc.
- A l’intérieur de body chaque élément doit être balisé.
Le non respect de ces règles rend le document non conforme (cf. notion de conformité).

6.1 Les headers : balises h1 à h6

Les headers, h, correspondent a une échelle d’importance des titres : balises h1 à h6.
Ainsi h1 désigne le titre principale, h2 les sous-titres, h3 les sous-sous-titres, etc. 
Dans une page, h1 devrait logiquement être unique mais ce n’est pas une obligation. Lorsque les pages contiennent des éléments hétéroclites l’utilisation de plusieurs h1 peut-être justifiée.
Attention : les headers ne peuvent pas contenir d’élément de type bloc.

6.2 Le paragraphe : balise p

Sémantiquement parlant, un paragraphe est avant tout un ensemble de phrases qui développe une idée. Lorsque l’on change d’idée, on change de paragraphe.
Pour faciliter la lecture d’un long paragraphe on peut faire appel aux retours à la ligne à l’aide d’une balise spécifique : br (break line).
Attention : p ne peut pas contenir d’élément de type bloc.

6.3 Les listes : balises ul, ol, li, dl, dt, dd

Une liste est un paragraphe structuré contenant une suite d'articles.
Il existe trois types de liste qui sont détaillés plus loin.

6.4 Les tableaux : balises table, thead, tfoot, tbody, th, tr, td

On ne doit recourir aux tableaux que pour présenter des données tabulaires c’est-à-dire des données définies chacune par un couple de propriétés (tableau à double entrées).
On ne devrait donc pas faire appel aux tableaux pour réaliser la mise en page (technique que l’on utilisait avant l’apparition des feuilles de style).
Cet aspect est discuté sur ces sites :
http://www.alsacreations.com/actu/lire/100-a-table.html
http://openweb.eu.org/articles/problemes_tableaux/
http://www.cybercodeur.net/weblog/presentations/seybold/
Les balises utilisées pour la réalisation d’un tableau sont détaillées plus loin.

6.5 Les formulaires : form

Un formulaire permet à l’utilisateur d’envoyer des données. Il est composé de différents éléments comme les champs de saisis, les menus déroulants, les cases à cocher, les boutons radio, les boutons de soumission, d’annulation, etc.
Tous ces éléments correspondent à des balises particulières présentées plus loin.
Les pages contenant des formulaires forment les «points critiques» d’un site. Leurs réalisations requièrent une réflexion approfondie sur les questions d’ergonomie et de sécurité.
Les balises utilisées pour la réalisation d’un formulaire sont détaillées plus loin.

7 - Les éléments remplacés, la balise img.

Certaines balises sont considérées comme des éléments remplacés : à l'affichage, le navigateur remplace la balise par une image ou pour les formulaires par un champ de saisi, des cases à cocher, des menus déroulants, des boutons radio, etc.
La balise img permet l'affichage d'une image. Il faut préciser à l'aide de différents couples d'attribut/valeur le nom du fichier de l'image, un descriptif, et accessoirement les dimensions de l’image.
Voici un exemple :
<img src="cheminEtnomImage" alt="description de l'image" whidth="largeurImageEnPixel" height="hauteurImageEnPixel" />

7.1 L'attribut src

Il indique le nom du fichier correspondant à l’image et le chemin pour l'atteindre. Il existe deux méthodes pour indiquer ce chemin :

7.1.1 Adresse ou chemin absolu

Elle commence à partir du dossier racine du site et est suivi de l’arborescence des dossiers permettant d’atteindre le fichier.
Exemple (image du logo html 5):
http://www.w3.org/html/logo/img/mark-word-icon.png
http://www.w3.org correspond au nom de domaine, mais également au dossier racine du site qui contient tous les autres dossiers et fichiers du site.
L’image (mark-word-icon.jpg) sera dans ce cas accessible en indiquant l’adresse absolue : src="http://www.w3.org/html/logo/img/mark-word-icon.png"

7.1.2 Adresse ou chemin relatif

Elle commence à partir de la localisation dans l’arborescence du site du fichier html qui contient la balise img de l’image à afficher. Le navigateur en ouvrant un fichier html connaît forcément sa situation dans la structure des dossiers du site. En lisant le code de ce fichier toute adresse qui ne commence pas par http sera considérée comme relative et aura comme référence l'emplacement du fichier html en cours de lecture.
Si on reprend l’exemple plus haut, le fichier html qui contient la balise img se trouve à l’adresse http://www.w3.org/html/logo/index.html:
Adresse absolue :
src="http://www.w3.org/html/logo/img/mark-word-icon.png"
Adresse relative :
src="img/mark-word-icon.png". En effet le dossier img se trouve au même endroit que le fichier index.html.

7.2 L’attribut alt

Cet attribut est obligatoire, sa valeur correspond à un texte décrivant l’image. Il permet notamment aux malvoyants d’obtenir une information textuel sur l’image (lecteur vocal).

7.3 Les attributs height et width

Ils donnent les dimensions de l’image. Attention, il ne faut pas utiliser ces attributs pour dimensionner une image, mais pour indiquer au navigateur de «réserver» l’espace qui sera occupé par l’image lorsqu’elle sera chargée.
Il est toujours préférable de mettre les images à leurs dimensions finales d’affichage à l’aide d’un logiciel dédié type photoshop (maîtrise de la qualité des images, optimisation du poids des fichiers et de leurs téléchargements, etc.)
Ces attributs sont optionnels.

8 - Les ancres : balise a

Les ancres permettent de faire un lien entre un mot, un groupe de mot, ou une image et un fichier. Un clic sur ces éléments ancre ouvre ou télécharge le fichier ainsi lié.
Si le lien pointe sur un fichier html, le navigateur ouvre alors le fichier : c’est le principe de navigation entre les pages web.
Si le lien porte sur un autre type de fichier (pdf, word, excel, etc.) 2 options sont alors possibles : 
- Soit le navigateur est équipé d’une extension logiciel permettant de lire directement le fichier, dans ce cas il ouvre le fichier.
- Soit le fichier n’est pas reconnu par le navigateur, dans ce cas le fichier est téléchargé.

Comme pour la balise img, il faut indiquer le nom du fichier et le chemin (absolu ou relatif) pour l’atteindre à l’aide de l’attribut href (hypertext reference).
Exemple :
<a href="http://www.w3.org/html/logo/index.html">Le nouveau logo html 5</a>
Ce lien pointe sur un fichier html, un clic sur «Le nouveau logo html 5» ouvre le fichier index.html.
<a href=" http://www.lesliefranke.com/files/reference/htmlcheatsheet.pdf">Liste des principales balises html</a>
Ce lien pointe sur un fichier pdf, un clic sur «Liste des principales balises html» affiche le fichier htmlcheatsheet.pdf si le navigateur est équipé d’un lecteur de pdf ou le télécharge dans le cas contraire.
Autres utilisations des ancres :

8.1 Naviguer dans une même page

Lorsqu’une page contient un contenu volumineux, il est possible de mettre en place des liens permettant la navigation au sein de la même page.
Pour plus de détail sur la mise en place de ces liens :
http://www.siteduzero.com/tutoriel-3-13502-creer-des-liens.html#ss_part_3

8.2 Envoyer un email

Bien qu’il ne soit pas recommandé de faire apparaître une adresse email dans un lien (spam quasi systématique sur cette adresse) la valeur mailto de l’attribut href permet de lancer une fenêtre d’un client mail pour l’envoi de message.
Lire «Un lien pour envoyer un mail» dans http://www.siteduzero.com/tutoriel-3-13502-creer-des-liens.html.
