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 <BR>
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 <B>gras</B> sera traduit par :
Ce texte est écrit en gras
L'imbrication de balises est possible:
Ce texte est écrit en <B>gras et <I>italique</I> à la fois</B> 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 <BR> 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.
|
