Abécédaire du HTML

Qu'est-ce que le HTML?

En voilà une bonne question!
Avant tout, sachez que HTML signifie HyperText MarkUp Language : il s'agit d'un langage de description (et non pas d'un langage de programmation) qui va nous permettre de décrire l'aspect d'un document, d'y inclure des informations variées (textes, images, sons, animations etc.) et d'établir des relations cohérentes (du moins sont-elles censées l'être) entre ces informations grâce aux liens hypertextes.

Les avantages du HTML sont nombreux : peux coûteux (un simple éditeur de texte suffit à écrire ses premiers documents HTML), relativement facile à aborder, il représente en outre un bon moyen de dépasser les problèmes de compatibilité entre des systèmes et des formats informatiques différents.

Les Balises

La description d'un document HTML passe par l'utilisation de BALISES (ou "TAGS" en anglais).
Une balise est délimitée par les signes "<" et ">" entre lesquels figure le nom de la balise. Par exemple, la balise de retour à la ligne est 
La plupart du temps, on utilise une balise de début et une balise de fin, qui définissent les propriétés de l'intervalle.

Ce texte est écrit en gras sera traduit par :
Ce texte est écrit en gras

L'imbrication de balises est possible:
Ce texte est écrit en gras et italique à la fois donnera:
Ce texte est écrit en gras et italique à la fois

Néanmois, certaines balises sont utilisées seules; elles n'ont pas de contenu. C'est le cas par exemple de la balise déjà citée et qui sert à indiquer les retours à la ligne, ou de la balise <IMG> qui permet d'inclure des images dans un document HTML, ou encore de la balise <HR> qui introduit un délimiteur comme celui-ci :

Les Attributs des Balises

Les attributs des balises représentent tout simplement les différents paramètres qui leur sont associés. Certains de ces paramètres sont obligatoires pour que la balise fasse correctement son travail, d'autres sont facultatifs.
Un attribut est caractérisé par :
- une chaîne de caractère délimitée par des guillemets
- un symbole représenté par des lettres, des chiffres ou des caractères de ponctuation.

<IMG SRC="image.gif"> affiche l'image dont le nom est "image.gif"
Le nom de la balise est IMG et sont attribut est SRC. La valeur de cette attribut n'est autre qu'une chaine de caractère précisant l'adresse URL de l'image.

A partir de maintenant, lorsque nous parlerons d'une balise, nous ferons donc référence non seulement à son nom, mais également à ses attributs, du moins les plus importants.

Le Squelette d'un document HTML

Pour pouvoir affirmer fièrement qu'un document est un document HTML, il ne suffit pas d'y jeter pêle-mêle quelques balises; il faut l'organiser, ce document, le hiérarchiser, l'arboriser, le bichonner. Bref, il faut le STRU-CTU-RER.

Le squelette d'un document HTML ressemble à ça :

A l'origine, le HTML s'attachait plus à la représentation de la structure d'un document qu'à son apparence. Cette aspect tend à se modifier peu à peu, mais il convient tout de même de dire quelques mots sur cette fameuse structure.

Les balises HTML relèvent grosso-modo de deux catégories: celles qui précisent les caractéristiques de la page (titre, hiérarchie etc.) et celles qui définissent la mise en page (titre centré, image de fond, texte sur deux colonnes etc.)
La première catégorie correspond à l'en-tête qui est délimitée par la balise <HEAD>
La seconde catégorie correspond à l'en-tête qui est délimitée par la balise <BODY>

L'en-tête d'un document HTML

La balise HEAD ne possède pas d'attribut. Les balises HTML suivantes peuvent être mises dans l'en-tête (nous ne les citons pas toutes ici):

<BASE> - Adresse absolue du document:
Cette balise permet de préciser l'adresse HTML absolue du document. Elle est utile lorsque le document est déplacé (changement d'adresse ou de répertoire) et permet au document de retrouver les objets référencés en son sein à l'aide de leurs adresses relatives.

Prenons par exemple un document dont l'adresse relative est:
<BASE HREF="http://www.masociete.com/docs/accueil.htm>
Ce document contient une image décrite comme suit :
<IMG SRC=images/image.gif>
En fait, la véritable adresse de l'image est: "http://www.masociete.com/docs/images/image.gif". Il n'est simplement pas besoin la préciser puisque la balise <BASE> figure dans l'en-tête du document.

<ISINDEX> - Recherche par mots clés:
Cette balise informe le client que le document peut être parcouru à l'aide d'une recherche par mots-clés. Elle est généralement ajoutée automatiquement par le serveur.
La balise <ISINDEX> était utilisée en HTML1, notamment pour interfacer une application de base de données à un serveur. Elle a depuis été remplacée par la balise <FORM>. C'est pourquoi nous ne nous étendrons pas sur son utilisation.

<LINK> - Relation avec d'autres documents:
Cette balise permet de spécifier les relations entre la page qui la contient et d'autres documents. Elle peut contenir plusieurs balise <LINK>.
Les attributs principaux de cette balise sont :
REL - définit le type de relation précisée par la balise <LINK>
REV - définit une relation inverse entre deux documents.
HREF - définit l'adresse URL de l'objet référencé par la balise <LINK>

Cette balise servant essentiellement à définir des menus de navigation entre différents documents connexes, on utilisera les valeurs d'attributs suivants :
REL=Home
Le lien fait référence à une home page ou au sommet de l'arborescence décrivant la hiérarchie dans laquelle s'inscrit le document.
REL=ToC
Le lien fait référence à un document servant de table des matières.
REL=Index
Le lien fait référence à un document servant d'index au document consulté.
REL=GLOSSARY
Le lien fait référence à un document servant de glossaire au document consulté.
REL=Copyright
Le lien fait référence à un document précisant les droits d'auteurs. REL=UP
Lorsque le document fait partie d'une hiérarchie, cet attribut fait référence à son ascendant.
REL=Next
Précise le document suivant à parcourir.
REL=Previous
Précise le document précédent.
REL=Help
Le lien fait référence à un document d'aide. Ceci permet de décrire le contexte dans lequel s'inscrit la page et d'offrir une aide au parcours du document.

Concrètement, voici ce que <LINK> peut contenir:

<LINK REL="Previous" HREF="sommaire.htm"> ou encore :
<LINK REL="Next" HREF="suite.htm">

<META> - Insertion d'informations spécifiques:
Les informations introduites par cette balise servent au client ou au serveur pour identifier et cataloguer la page. <META> est notamment utilisée pour faciliter l'indexation des documents HTML par les moteurs de recherche.
Parmi ses attributs, deux sont utiles:

NAME="chaîne de caractère"
Utilisé pour désigner par exemple l'auteur de la page, la date de parution, les mots devant servir à une indexation de la page par un moteur de recherche etc.
CONTENT="chaîne de caractère"
Utilisée pour préciser les informations déjà fournies par NAME

Par exemple, on pourra trouver dans une page:
<META NAME="description" CONTENT="photo d'un lagon exotique au clair de lune." >
<META NAME="keywords" CONTENT="images libres de droit, photo, mer, lune, vacances" >

<TITLE> - Titre du document:
Comme son nom l'indique, cette balise permet de définir le titre du document. Ce titre apparaît dans la barre du même nom de votre navigateur, et permet également une meilleure indexation par les moteurs de recherche.
Voici un exemple de titre:
<TITLE>Bienvenue sur le site de la société SEPTEM </TITLE>

Le corps d'un document HTML

Les logiciels clients (comme votre navigateur) chargés d'afficher les documents HTML ignorent tout de la mise en page des fichiers ASCII (paragraphes, retour charriot, tabulations). Ainsi que nous l'avons déjà vu, cette mise en page doit être précisée à l'aide de balises HTML à l'intérieur du corps du document. Ce corps des délimité par la balise <BODY>.

Cette balise admet plusieurs attributs, dont les plus importants sont:

BACKGROUND="adresse url de l'image"
Permet de spécifier l'image qui doit être utilisée en fond d'écran.

BGCOLOR="#FFFFFF"
Permet de spécifier la couleur qui sera utilisée en fond de page. La valeur de cette couleur doit être donnée en hexadécimal.

TEXT="#000000"
Permet de spécifier la couleur du texte de la page. Là encore, cette valeur est donnée en hexadécimal.

LINK="#FF6600"
Permet de spécifier la couleur des liens hypertextes.

VLINK="#66CCCC"
Permet de spécifier la couleur des liens hypertextes ayant déjà été visités par l'utilisateur.

ALINK="#ff0000"
Permet de spécifier la couleur des liens hypertextes lorsque l'utilisateur clique dessus.

Il est à présent temps de parler des balises les plus usuelles, qui permettent notamment de jouer sur la typographie.