Les liens
Syntaxe :
<A> ... </A>
A l'intérieur se trouvent des éléments qui paraîtront soulignés à l'affichage, colorés ou entourés selon la couleur des liens définie dans
. Ces éléments sont actifs : cliqués, soit ils feront charger un autre document HTML, soit il feront aller dans une autre partie de la même page.Ses attributs sont NAME, HREF, TARGET.
HREF, ayant pour valeur un nom de fichier avec son chemin dans le serveur, fait pointer le lien vers un fichier.
Celui-ci peut-être un document HTML (c'est la majorité des cas), ou un autre comme
un fichier son, une vidéo, un fichier en téléchargement, etc... Il incombe
au navigateur de charger ce fichier et de s'en occuper. Le protocole HTTP renseigne sur le
format grâce au MIME. Si le logiciel ne peut pas traiter ce format, il transmet le
fichier à des helpers (programmes externes, l'affichage se fait dans ces programmes) ou
à des plugs-in (modules externes, l'affichage se fait dans le navigateur) qui le
géreront.
Ainsi, un fichier HTML sera directement traité. Un fichier PDF peut être
traité par un helper nommé Adobe Acrobat ou un plug-in de Netscape. Un fichier
son WAV sera rendu audible par un helper. Une vidéo MPEG1 sera jouée dans
le browser grâce au plug-in MPEG de Netscape.
NAME sert à nommer le lien, elle sera alors utilisée comme élément, et non plus comme donnant une propriété. Exemple pour le document lexique.html :
... <A HREF="lexique.html#place23">Pharmacognosie</A>...et plus loin dans le texte
... <A NAME="place23">La pharmacognosie se définie...On a ainsi défini un lien intratexte, la première ligne est un lien qui mène plus loin dans le texte, à l'endroit précis où se trouve la définition de la pharmacognosie.
TARGET précise la destination d'affichage. Grâce à NAME de la balise <FRAME>, on avait nommé un cadre "icones". Si l'on écrit :
<A HREF="liste.html" TARGET="icones">Cliquez-moi</A>Le document liste.html sera traité par le navigateur et affiché dans le cadre nommé "icones".
L'attribut TARGET peut prendre des valeurs spéciales qui sont réservées. On peut citer :
La valeur de HREF (comme SRC pour les images, ou BACKGROUND) est très importante, elle
définit le lien hypertexte. C'est en fait une URL. Elle donne le protocole de transfert,
le nom du serveur et le chemin d'accès sur le serveur vers le document. On
appelle cela un chemin direct, tout y est explicité. L'URL peut pointer sur n'importe
quel fichier, vers n'importe quel site.
Si le lien se fait vers un autre document du même site, le chemin peut être indirect.
On accède à un autre fichier grâce à l'URL du document en cours et
à l'arborescence. L'avantage est qu'on n'a pas à toujours écrire l'URL
complète à chaque fois.
Exemples :
En fait, on se dirige comme sur un ordinateur. Plus précisément, on évolue dans une arborescence de fichiers UNIX du serveur (d'où les "/" slashs au lieu des "\" anti-slashs de MSDOS) en indiquant le nom du répertoire pour avancer (exemple : images) ou les deux points .. pour reculer. Tous les éléments du chemin sont séparés par des slashs.
Le formatage
Une balise sert à conserver le formatage ASCII. Il s'agit de <PRE> ... </PRE> pour preformated. Le navigateur tiendra alors compte du retour chariot, de la fin de ligne, des tabulations et des espaces vides. Elle est néanmoins peu employée.
Un paragraphe est déclaré entre les balises <P> ... </P>. On peut simplifier cette écriture, en omettant la fin du paragraphe. <P> seul indique un saut de paragraphe.
Un retour à la ligne est provoqué par <BR>. Le browser étant obligé de couler le texte dans la fenêtre d'affichage, des sauts de lignes automatiques seront générés à divers endroits lorsque nécessaire, toujours entre les mots. Une extension Netscape permet d'empêcher cette cassure automatique. Entre <NOBR> et </NOBR>, la ligne ne sera jamais coupée. Ceci permet par exemple d'afficher des lignes de programmation (qui ne doivent pas être coupée pour la compréhension) ou de contrôler la pagination. Une astuce permet de s'affranchir du <NOBR>, par exemple pour un mot suivant de deux points. Cela consiste à relier les deux entités par le caractère spécial "espace insécable" ou , les deux entités ne forment plus qu'une seule, que le navigateur ne pourra couper.
Exemple : donne Exemple :
L'alignement par défaut à gauche peut être modifié grâce à l'attribut ALIGN. Placé dans <P> ou dans <IMG> et accompagné d'une valeur comme par exemple CENTER, RIGHT, LEFT : on peut ainsi contrôler l'emplacement d'un paragraphe ou d'une image.
L'extension Netscape, très utilisée, <CENTER> ... </CENTER> permet de centrer tout ce qu'elle contient.
De plus, l'emplacement d'un objet peut être encore mieux contrôlé, soit par la technique des tableaux, soit par l'astuce du pixel vide que nous verrons plus loin.
Les styles de texte
code informatique, police à espacement fixe
</CODE>
Netscape a introduit une balise très utilisée : <FONT> ... </FONT>. Son
attribut COLOR permet de définir la couleur du texte, SIZE la taille des polices par
rapport à la taille normale.
La balise <BASEFONT SIZE=?> indique au browser la taille de base.
Les images
SRC permet de définir l'image grâce à un nom de fichier et à son chemin. Ce fichier image est donc externe au document mais doit être sur le web et pouvoir être repéré par une URL.
ALT comporte un texte de remplacement (avec caractères spéciaux si nécessaire) au cas où l'image ne pourrait s'afficher. Ceci est très utile dans le cas des browsers n'affichant que du texte comme Lynx sur plateforme Unix.
WIDTH et HEIGHT permettent de redimensionner l'image respectivement en largeur et en hauteur.
HSPACE et VSPACE créent un espace horizontal ou vertical autour de l'image.
L'attribut ALIGN peut prendre différentes valeurs MIDDLE, TOP, BOTTOM en plus des RIGHT, LEFT, CENTER. Ces trois premières valeurs permettent l'alignement par rapport au texte qui l'entoure.
Un exemple donnerait :
voici la photo de mes vacances :<P> <IMG SRC="../images/photos/lyon.jpg" ALT="vous voyez le jardin botanique du Parc de la Tête d'Or" WIDTH=200 HEIGTH=200 VSPACE=5 HSPACE=5 ALIGN=RIGHT>Les formats d'images actuellement utilisés (Août 1997) sont les formats GIF et JPG.
Le format PNG (Portable Network Graphics, prononcé pingue) déjà fonctionnel est probablement le futur remplaçant du format GIF. Celuiüci est capable de coder des images de 16 millions de couleurs avec la transparence (méthode de l'alpha channel qui est un mécanisme différent de celui des GIFs), avec le meilleur taux de compression qui soit et sans perte de qualité de l'image.
Un élément graphique vient compléter la balise <IMG>. Il s'agit de <HR> qui permet d'insérer une ligne horizontale (un simple trait) dans le document. <HR> accepte certains attributs dont WIDTH qui fixe sa largeur.
Les listes
Une liste à puces se construit en délimitant la zone avec <UL> ... </UL>. La marge gauche est alors légèrement décalée vers la droite. L'élément <LI> permet d'aller à la ligne (sans aucun besoin de <BR>) et d'insérer une puce sorte de gros point qui varie selon les browsers.
Une liste ordonnée se construit de la même façon. La zone est délimitée avec <OL> ... </OL>, et <LI> sert cette fois à la numérotation. Exemple :
J'aime : <OL> <LI>Shakespeare <LI>Allegri <LI>Les ordinateurs Atari <LI>La botanique </OL>La liste décrite ci-dessus apparaît décalée vers la droite et serait numérotée : 1) pour Shakespeare, puis à la ligne, 2) pour Allegri, etc...
Il n'est pas interdit d'utiliser à la fois liste ordonnée et liste à puces, on peut même imbriquer les unes dans les autres. Tout est permis du moment qu'on referme proprement une liste par </OL> ou </UL>. L'indentation dans l'éditeur de texte est alors conseillée pour fournir un code clair et lisible.
De plus, diverses extensions de ces balises, dûes à Netscape ou Microsoft, permettent entre autres de remplacer automatiquement la puce par une image, de commencer la numérotation d'une liste par un chiffre particulier, ou de changer une numérotation en chiffres arabes par une numérotation en chiffres latins.
Les tableaux
L'utilisation des tableaux est rebutante au premier abord. Il suffit juste de comprendre le principe on déclare premièrement le tableau, puis les rangées qui la composent, et on y précise les cases.
La balise <TABLE> délimitera une série de lignes <TR> qui elles mêmes délimiteront une série de cases <TD>, qui, alignées verticalement, donneront une colonne. Il n'y a pas de numéro de case à gérer, c'est le browser qui s'occupe de compter les cases et les lignes du tableau et de l'afficher.
Un exemple donnerait :
<TABLE> <!- déclaration du tableau -> <TR> <!- déclaration d'une ligne avec deux cases -> <TD>1ère ligne 1ère colonne</TD> <TD>1ère ligne 2ème colonne</TD> </TR> <!- on referme proprement la ligne -> alt;TR> <!- nouvelle ligne -> <TD>2ème ligne 1ère colonne</TD> <TD>2ème ligne 2ème colonne</TD> </TR> <!- fermeture de la 2ème ligne -> </TABLE> <!- on referme le tout ->
On a ainsi défini un tableau à 4 cases (2 rangées de deux cases). Pour la clarté du code, on préfère indenter. Les balises indiquant les fins de cases ou de rangées ne sont pas obligatoires, elles sont néanmoins conseillées du fait que les browser n'ont pas tous le même comportement pour gérer un tableau.
Un autre exemple donnerait :
<TABLE BORDER=0 CELLSPACING=5 CELLPADDING=5> <TR> <TD WIDTH=300>To be or not to be, that is the question... <TD WIDTH=200>Etre ou ne pas être, telle est la question... </TABLE>Si le texte est aussi long que le monologue d'Hamlet, on a défini un texte en deux colonnes : une rangée contient deux cases, l'une est remplie avec le texte en anglais, l'autre avec la traduction en français.
Divers attributs complètent la gestion des tableaux.
Pour <TABLE>, on peut citer BORDER dont la valeur définit l'épaisseur du bord (s'il est égal à zéro, on ne voit plus que les éléments contenus dans le tableau), CELLSPACING qui règle l'espace entre les cases, CELLPADDING qui gère une marge interne aux cases, ou WIDTH qui précise la largeur du tableau.
Pour <TD>, on a également WIDTH. On peut aussi colorer le fond de la case avec BGCOLOR, ou déterminer l'alignement vertical des éléments contenus dans la case avec VALIGN (avec les valeur TOP, MIDDLE, BOTTOM). Deux attributs de <TD> sont particulièrement intéressants : COLSPAN et ROWSPAN. Ils permettent de réunir deux ou plusieurs cases respectivement en colonne et en rangée. Leur valeur doit être égale au nombre de cases réunies. Ainsi :
<TABLE> <TR> <TD COLSPAN=2>A1+B1 <!- on déclare ici deux cases, et il ne faut pas déclarer la deuxième -> <TR> <TD>A2 <TD>B2 </TABLE>La case A1+B1 occupera la première rangée. On trouvera les cases A2 et B2 en dessous.
NB : <CAPTION> ... </CAPTION>, placé au même niveau que <TR>, permet d'insérer une légende au tableau.
<TH> ... </TH> équivaut à <TD><CENTER><B> ... </B></CENTER></TD>.
On peut remplir une case avec n'importe quels éléments permis par le langage HTML : textes, images, ligne horizontale, voire même un autre tableau. Cette souplesse fait des tables, avec l'anchor, des balises incontournables de HTML.
Conclusion
HTML est un langage, c'est-à-dire un système de signes permettant la communication. C'est donc aussi une fonction d'expression de la pensée, et à ce titre, la conception d'une page HTML relève plus de la capacité d'imagination et de rigueur que de la simple connaissance des balises.
Rajah Lone
nef@mygale.org
transcription le 14 Février 1998