B - Introduction au langage HTML (C) 1998 E. Larcher (web@larcher.com.pasdespam)

B - Introduction au langage HTML

Dans cette annexe, nous allons présenter quelques concepts de base concernant le langage HTML. Il ne s'agit pas ici de faire une description exhaustive du langage, il existe de nombreux ouvrages le faisant très bien, mais de montrer "à quoi ressemble" le langage permettant de définir une page web. Les informations apportées ici permettront au lecteur de créer facilement des pages simples, avec un éditeur de texte du genre notepad sous Windows.

o Structure d'une page HTML

Nous avons vu dans un précédent chapitre qu'une page HTML était en fait un fichier texte, enrichi d'un certain nombre de codes ou commandes, appelées balises ou tags.

Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères "<" et ">". Exemple : <BALISE>.

Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même nom, mais précédé du caractère "/". Exemple : </BALISE>. La commande spécifiée s'applique donc uniquement au texte situé entre le couple de balises ainsi formé.

Exemple:

<HTML>

...

</HTML>

Notons que :

une balise peut indifféremment être indiquée en minuscules ou en majuscules,

le formatage "manuel" du document (espaces, sauts de lignes,...) est toujours ignoré.

Par exemple : <HTML>...</HTML> est interprété de la même façon par le navigateur web que la syntaxe sur plusieurs lignes indiquée ci-dessus.

Nous venons de découvrir, sans le savoir, un des éléments de la structure d'une page HTML : toute page doit en effet débuter par la balise <HTML> et se finir par </HTML>.

Entre ces deux balises, on définit deux zones : l'en-tête, spécifié par les commandes <HEAD> et </HEAD>, ainsi que le corps, délimité par : <BODY> et </BODY>. Ce qui donne, comme structure de base :

...

</HEAD>

<BODY>

...

</BODY>

</HTML>

Dans l'en-tête, on ne met généralement qu'une seule information, le titre du document qui sera affiché en haut de la fenêtre du navigateur et qui apparaît dans les bookmarks.

Ce titre est indiqué entre les balises <TITLE> et </TITLE>.

Exemple: <TITLE>Ceci est le titre</TITLE>.

Dans le corps, on met en fait tout le document à afficher (texte, définition des images etc.).

Signalons l'existence d'une balise de commentaire, qui peut être utilisée partout dans les documents HTML, définie comme suit :

.

Les commentaires ne sont jamais affichés à l'écran du navigateur.

En résumé, la structure générale d'une page HTML est la suivante.

<TITLE>Titre du document</TITLE>

</HEAD>

<BODY>

...

</BODY>

</HTML>

Notez que l'indentation facilite la lecture du code mais n'est pas reproduite par le browser.

o Styles d'écriture et séparateurs

Les principaux styles gérés en HTML sont le soulignage, l'italique et le gras. Ces modificateurs de styles sont définis par les commandes respectives ..., ... et ....

Par exemple, le document contenant :

Souligné, Italique et Gras s'affichera à l'écran du navigateur comme suit :

Souligné, Italique et Gras.

Il est également possible de changer la taille de la police de caractères, afin de mettre en valeur des titres, sous-titres etc. Pour ce faire, on utilise la balise <Hn>...</Hn> où n peut prendre une valeur entière comprise entre 1 et 6 (dans l'ordre décroissant de taille>.

En ce qui concerne les commandes de type séparateur, le HTML donne la possibilité de :

revenir à la ligne :

définir un paragraphe :

afficher une ligne horizontale : <HR>.

Vous remarquerez que les séparateurs ne fonctionnent pas par paire, contrairement à la majorité des commandes HTML.

o Listes d'éléments

Le langage HTML permet de définir deux styles de listes : les listes numérotées et les listes non numérotées.

Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>.

Exemple :

<OL>

<LI>élément 1,

<LI>élément 2,

<LI>élément 3.

</OL>

Ce qui donne à l'écran :

élément 1,

élément 2,

élément 3.

Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises <UL> et </UL>.

Exemple :

<UL>

<LI>élément 1,

<LI>élément 2,

<LI>élément 3.

</UL>

On obtient cette fois :

élément 1,

élément 2,

élément 3.

Notez qu'il est tout à fait possible d'imbriquer des listes du même type ou de types différents.

Exemple :

<UL>

<LI>élément 1 :

<OL>

<LI>sous-élément A,

<LI>sous-élément B.

</OL>

<LI>élément 2,

<LI>élément 3.

</UL>

On obtient alors :

élément 1,

élément 2,

élément 3.

Enfin, il est possible de définir des listes spéciales, permettant de faire des glossaires, en utilisant les balises suivantes : <DL> et </DL> pour encadrer la liste, <DT> pour spécifier un élément et <DD> pour indiquer sa définition.

Exemple :

<DL>

<DT>HTML<DD>HyperText Markup Language

<DT>HTTP<DD>HyperText Transfert Protocol

</DL>

Donne :

HTML

HyperText Markup Language

HTTP

HyperText Transfert Protocol

o Liens internes et externes

En HTML, il existe deux types de liens : ceux qui sont internes à un document c'est-à-dire qu'ils désignent un point précis, repéré par une balise, dans le corps même du document, et ceux qui spécifient simplement une autre page HTML, un document multimédia ou l'accès à un service comme FTP. Nous allons voir les commandes utilisées pour définir ces liens.

On définit le point vers lequel pointe un lien interne en spécifiant une étiquette, affectée à une portion de texte, avec les balises suivantes :

<A NAME="nom_étiquette">...</A>.

Pour indiquer un lien vers cette étiquette, on utilise la syntaxe :

<A HREF="#nom_étiquette">...</A>.

Prenons un exemple afin de clarifier les choses :

Cliquer ici pour obtenir la définition du terme <A HREF="#def"> HTTP</A>

<DL>

<DT>HTML<DD>HyperText Markup Language

<A NAME="def"><DT>HTTP<DD>HyperText Transfert Protocol</A>

</DL>

On obtiendra alors dans la fenêtre du navigateur :

Cliquer ici pour obtenir la définition du terme HTTP.

HTML

HyperText Markup Language

HTTP

HyperText Transfert Protocol

Notez que le mot "HTTP", situé dans le code HTML entre les deux balises

<A HREF...> et </A> est mis en évidence avec un soulignement (et un changement de couleur en pratique). En cliquant dessus, le navigateur va positionner le texte à la ligne où figure l'étiquette pointée par le lien, à savoir ici le mot "HTTP". Il faut également savoir que la zone encadrée par les balises <A NAME...> et </A> définissant l'étiquette n'est pas mise en évidence et n'est pas cliquable.

Considérons maintenant le cas d'un lien externe. Il suffit en fait de reprendre la syntaxe rencontrée ci-dessus pour définir un lien, en remplaçant le label par une URL, soit : <A HREF="URL">...</A>.

Exemple :

Cliquez <A HREF="http://www.ibm.com">ici</A> pour accéder au serveur web d'IBM.

A l'affichage on obtient :

Cliquez ici pour accéder au serveur web d'IBM.

En cliquant sur le mot "ici", le navigateur va se connecter au serveur web dont on a indiqué l'URL et afficher la page d'accueil du serveur.

Comme nous l'avons dit au début de ce paragraphe, on peut aussi créer un lien vers un fichier multimédia. Prenons l'exemple d'une image GIF.

Il est possible d'<A HREF="http://www.meteo.fr/cartes/lundi_1200.gif>afficher

</A> la carte du ciel de Lundi dernier à 12H.

Donne :

Il est possible d'afficher la carte du ciel de Lundi dernier à 12H.

En cliquant sur "afficher", l'image (fictive) ainsi définie sera affichée à l'écran.

Certains types de fichiers, comme les animations, ne peuvent être traités que grâce à un utilitaire externe au navigateur, pouvant être lancé automatiquement dès la fin du transfert du fichier (en examinant son extension).

Enfin, on peut créer un lien vers un serveur FTP grâce à une syntaxe du type :

<A HREF="ftp://ftp.sun.com/pub">Répertoire public du serveur FTP de Sun</A>.

Dans ce cas, le navigateur affichera à l'écran le contenu du répertoire ainsi défini.

Citons également le service mailto:adresse_email, qui peut être utilisé comme adresse de destination d'un lien. Dans ce cas, le fait de cliquer sur le mot désignant ce lien affiche à l'écran une fenêtre permettant d'envoyer un E-MAIL à l'adresse indiquée.

Exemple : <A HREF="mailto:president@whitehouse.gov">Ecrire au président des Etats Unis</A>.

Nous allons voir maintenant comment définir un lien accessible en cliquant sur une image.

o Inclusion d'images

Dans le paragraphe précédent, nous avons décrit comment définir un lien vers une page HTML ou une image. Dans ce dernier cas, l'image ainsi désignée s'affiche seule à l'écran du navigateur, sans qu'il ne soit possible d'y associer du texte, dans la même page. Nous allons donc voir comment insérer une image dans une page HTML.

Pour ce faire, on utilise la balise dont la syntaxe est la suivante :

<IMG SRC=/rep/sous-rep/.../image.gif>.

On peut également faire référence à une image se trouvant sur un autre serveur en indiquant son URL.

Exemple : <IMG SRC="http://www.amiga.de/images/ami_logo.gif">.

Mais attention, ici il ne s'agit pas d'un lien mais toujours d'une inclusion. La seule différence par rapport à la syntaxe précédente est que dans le dernier cas, l'image ne se trouve pas sur le même serveur que la page qui y fait appel : le navigateur doit donc aller chercher cette image avant de pouvoir l'afficher.

La balise <IMG SRC...> possède une option permettant de spécifier une contrainte d'alignement par rapport au texte de la ligne où l'on désire insérer l'image. Cet argument est défini par le mot clé ALIGN=mode, où mode correspond à TOP (alignement sur le haut de l'image), MIDDLE (sur le milieu) et BOTTOM (bas).

Exemple :

Voici le logo de Netscape : <IMG SRC="images/ns_logo.gif" ALIGN=BOTTOM>

Voyons maintenant comment définir un lien auquel on accède en cliquant sur une image plutôt que sur une portion de texte. En fait, c'est très simple : il suffit de remplacer le texte définissant le lien par la balise d'inclusion d'une image.

Exemple:

<A HREF="http://www.netscape.com" ><IMG SRC=/images/ns_logo.gif></A>.

Dans cet exemple, le fait de cliquer sur l'image affiche la HomePage du serveur de Netscape. Notez qu'une image définissant un lien est différenciée des autres images par le fait qu'elle est entourée d'un cadre et que le curseur de la souris change de forme lorsqu'on le positionne sur cette image.