Sections précédentes
Bienvenue, vous êtes le
e a accéder à l'HTML en une page.
Les composantes standards
Il y a deux types de documents que l'on peut réaliser. Celui que l'on retrouve
le plus souvent comporte trois parties : la tête (HEAD), le corps (BODY) et le
pied (FOOTER). Les seuls documents à faire exception à cette règle sont les
documents de base des pages en format cadres ("frames"). Ils sont composés
seulement de la tête (HEAD) et d'une section cadre (FRAMESET).
La tête
La tête contient normalement le titre. Le fichier que vous lisez
présentement a la tête suivante :
<![CDATA[
<HEAD>
<TITLE>L'HTML en une page</TITLE>
</HEAD>
]]>
On peut également ajouter dans cette section une référence de
base. Voici un exemple qui dirigerait tous les
liens relatifs d'un fichier
sur le serveur de Netscape.
<![CDATA[
<BASE HREF="http://home.netscape.com/">
]]>
La référence de base doit être un
lien absolu. Il est également
possible de modifier la destination par défaut
avec le paramètre TARGET (même usage que pour les liens, pour une description,
voir la section sur la destination
des références).
À venir : <ISINDEX>,<META>
Le corps
Tout comme la tête se trouve dans un codet HEAD, le corps se trouve dans un
codet BODY. Contrairement à la section précédente, nous ne ferons pas ici la liste des codets utilisables dans le corps, car c'est là que presque tous les
codets s'utilisent. Nous aborderons plutôt les paramètres que le codet BODY
peut recevoir. On peut les diviser en deux catégories : ceux qui modifient le
fond de l'écran (BGCOLOR et BACKGROUND) et ceux qui modifient la couleur du
texte (TEXT, LINK, VLINK et ALINK).
Le paramètre BACKGROUND a comme valeur une référence à une image qui sera mise
au fond de l'écran (et répéter de façon à former une mosaïque). Le paramètre
BGCOLOR prend une couleur sous forme de chaîne qui
sera mise au fond de l'écran. Si vous utilisez ces deux paramètres en même
temps, la couleur apparaîtra d'abord le temps de charger l'image. (Certains
fureteurs attendent d'avoir l'image au complet avant de faire quoi que ce soit.)
S'il s'agit d'une image transparente, on verra encore la couleur en dessous de
l'image.
Les paramètres TEXT, LINK, VLINK et ALINK modifient respectivement
les couleurs du texte, des liens jamais
consultés, des liens déjà consultés et du lien sélectionné. La valeur de ces
paramètres est une couleur sous forme de chaîne.
Voici par exemple le codet BODY de ma page
personnelle.
<![CDATA[
<BODY BACKGROUND="image/marb3" text=#000000 link=#FF1010 vlink=#FFA0A0>
]]>
Le pied
À prime abord, le pied est une séparation logique tout à fait optionnelle.
Elle peut contenir les mêmes codets que le corps. Habituellement, le pied
a une longueur d'environ une demi-douzaine de lignes et contient un lien sur la
page précédente, un sur la page principale, un sur l'index et un sur la page
suivante (si ces derniers existent). Ces liens sont souvent présentés sous la
forme d'une barre boutons.
L'information la plus importante que peut contenir le pied est le nom de
l'auteur accompagné de son adresse électronique. Pour beaucoup de pages,
il est également pertinent d'ajouter l'adresse électronique de l'envoyeur.
Pour de nombreux documents, on ajoute également la date de la dernière
modification.
Les cadres
Pour ceux qui ne sont pas familiers avec les trouvailles de nos traducteurs,
cadre est la traduction française du mot anglais "frames". Les cadres
ne font partie d'aucune spécification HTML, il s'agit d'une extension
ajoutée par la compagnie Netscape. J'en parle qu'en même ici parce que c'est une
technique qui va surement être reprise par les autres fureteurs.
Il sera plutôt difficile d'utiliser le contenu de cette section si vous ne
diposez pas d'un fureteur qui supporte les cadres. Si vous ne le savez
pas, suivez ce lien et revenez à cette
page avec la fonction "BACK" de votre fureteur. Si vous avez vu deux colonnes
avec la table des matières dans la partie droite de votre fenêtre, votre
fureteur les supporte, sinon il ne les supporte pas.
Si vous en êtes à vos premières armes en HTML, il serait préférable que vous
passiez cette section. Les cadres sont parmi les codets les plus compliqués,
et ce sont les codets les plus ennuyants lorsqu'ils sont mal utilisés. Par la
suite, il sera facile de convertir votre site en un site en mode cadre.
D'ailleurs, il est recommandé de créer une version sans cadres de toute
façon.
Les codets des cadres
Il existe deux codets importants concernant les cadres : FRAMESET et FRAME.
Un document en mode cadre commence comme un document standard, mais au lieu
d'avoir des sections BODY et FOOTER, on retrouve la section FRAMESET. Le codet
FRAMESET doit avoir exactement un des deux paramètres suivants : COLS et ROWS.
Les deux paramètres prennent le même type de valeur. Il s'agit d'une suite
de longueurs qui sont séparées par des virgules et interprétées comme des
largeurs(COLS) et des hauteurs(ROWS). Les longueurs peuvent être de trois
types : absolue (un nombre de pixels), relative (un nombre suivi d'un
pourcentage) ou ajustable (un nombre suivi d'un astérisque ou simplement un
astérisque).
Si vous utilisez uniquement des longueurs relatives, vous devez vous assurer
que le résultat est bel et bien de 100%, sinon vous devez mettre au moins une
des longueurs ajustable. L'espace est d'abord réservé pour les longueurs
absolues et relatives. L'espage restant est réparti entre les longueurs
restantes au prorata des nombres précédants les astérisques. (Si le nombre
est omis, la valeur 1 est assumée.)
Par exemple, la combinaison *,120,10%,4* sera interprétée de la façon suivante
pour une largeur de 500.
- On réserve 120 pixels pour la deuxième. Il reste donc 500-120=340.
- On réserve 10% pour la troisième, soit 500*10÷100=50. Il reste dont
340-50=290.
- On partage l'espace restant entre les deux restantes : 290*1÷(4+1)=58 pour la première et 290*4÷(4+1)=232 pour la dernière.
À l'intérieur du codets FRAMESET, on doit retrouver le même nombre de codets
FRAME que le nombre d'éléments de la valeur du paramètre ROWS ou COLS. (Sauf
si on utilise des codets FRAMESET imbriqués. Nous y reviendrons.) Le codet
FRAMES requiert deux paramètres : SRC et NAME. La valeur du paramètre SRC
est l'URL d'un document qui sera le contenu du cadre. Le nom est une chaîne
de caractères qui sera utilisée pour
la destination des liens (voir plus loin).
Voici à titre d'exemple la section FRAMESET du document principale de l'html en
une page.
<![CDATA[
<FRAMESET COLS=*,170>
<FRAME SRC="noframe.html" NAME="main">
<FRAME SRC="menu.html" NAME="menu">
</FRAMESET>
]]>
Les codets FRAMESET imbriqués
Il est possible d'utiliser un codet FRAMESET à l'intérieur d'un autre, le codet
FRAMESET intérieur et son contenu prend alors la place d'un codet FRAME.
Voici un exemple.
<![CDATA[
<FRAMESET ROWS=10%,60%,30%>
<FRAME NAME="T1" SRC="../logo.gif">
<FRAMESET COLS=*,*>
<FRAME NAME="T3" SRC="../logo.gif">
<FRAME NAME="T4" SRC="../logo.gif">
</FRAMESET>
<FRAME NAME="T2" SRC="../logo.gif">
</FRAMESET>
]]>
Les paramètres optionnels d'un cadre
Les cadres ont 4 paramètres optionnels : NORESIZE, SCROLLING, MARGINHEIGHT et
MARGINWIDTH. Le paramètre NORESIZE empêche l'utilisateur de modifier la taille
d'un cadre. À moins d'avoir une très bonne raison, il est préférable de ne pas
l'utiliser. Le paramètre SCROLLING peut prendre 3 valeurs : YES, NO ou AUTO
(le défaut). La valeur NO empêche les barres de défilements d'apparaître
lorsqu'elles sont nécessaires, alors que YES exige leur présence lorsqu'elles
sont inutiles. Finalement, les codes MARGINHEIGHT et MARGINWIDTH permettent de
modifier respectivement les marges supérieures et inférieures, et les marges
gauches et droites. Voici un exemple de ces 4
codes.
<![CDATA[
<FRAMESET ROWS=4*,*,30,20%>
<FRAME NAME="T1" SRC="../logo.gif" NORESIZE>
<FRAME NAME="T2" SRC="../logo.gif" MARGINWIDTH=200>
<FRAME NAME="T3" SRC="../logo.gif" SCROLLING=NO>
<FRAME NAME="T4" SRC="../logo.gif" MARGINHEIGHT=50>
</FRAMESET>
]]>
Le texte alternatif
Finalement, certaines personnes dont le fureteur ne supportent pas les cadres
peuvent suivre un lien sur votre page principale. Leurs fureteurs ne
comprenant pas les codets relatifs aux cadres, ils verront une page avec
seulement un titre. Vous pouvez rémédier à ce problème en ajoutant un codet
NOFRAMES dans votre page principale. Le texte à l'intérieur de ce codet sera
ignoré par les fureteurs supportant les cadres. Vous pouvez également mettre
ce codet dans n'importe quel autre document pour offrir des codes
supplémentaire (ex. : des liens de retour en arrière) aux usagers dont les
fureteurs ne supportent pas les cadres.
Les références
Les références sont ce qui fait la différence entre l'html et un traitement
de textes. Le codet utilisé pour les références est le A. On l'utilise
normalement avec le paramètre HREF, qui prend comme valeur une URL. Voici
par exemple une référence a Yahoo.
Yahoo
<![CDATA[
<A HREF="http://www.yahoo.com">Yahoo</A>
]]>
Les liens absolus vs les relatifs
Une URL contient normalement le type de ressource, le nom du serveur et le
chemin et le nom du fichier. Il est possible de ne pas spécifier certains de
ces éléments. Si on omet les éléments (à partir de la gauche), la référence
est complétée à l'aide de la référence de base (l'URL du document courant par
défaut, pour plus de détails voir la section sur la tête).
Par exemple, le doucument courant a pour référence absolue
http://www-edu.gel.usherb.ca/cotg02/page/index1.html. Si vous suivez
la référence suivante, vous allez tomber sur le document
http://www-edu.gel.usherb.ca/cotg02/. Le lien n'utilise pas l'URL au
complet, mais seulement la différence avec l'URL courante.
ma page web
<![CDATA[
<A HREF="..">ma page web</A>
]]>
Dans certains cas, la référence relative ne contient même pas de nom de fichier,
uniquement une ancre.
Les ancres
Les ancres sont des endroits particuliers où le fureteur commencera
l'affichage. Les références à des ancres se font en ajoutant un dièse (#) à
la fin de l'URL. Voici par exemple une référence au début de cette section.
début
<![CDATA[
<A HREF="#Les ancres">début</A>
]]>
Vous remarquerez qu'il s'agit du cas extrême de référence relative, le fichier
lu reste le même, seul la position change. Bien sûr, l'ordinateur ne devine
pas où une ancre mène, il faut lui indiquer. On utilise pour cela le codet A,
mais avec le paramètre NAME au lieu de HREF. Par exemple, voici le codet
d'ancre pour la référence à cette section.
<![CDATA[
<A NAME="Les ancres"></A>
]]>
Les références à des fichiers exécutables
Certains fichiers exécutables peuvent être lancés avec un fureteur (par
l'entremise du serveur web). Pour cela, ils doivent donner comme sortie
standard soit un texte en format html, soit une adresse URL. Les programmes
peuvent prendre des paramètres. (Nous décrirons dans la section sur les
formulaires (à venir) les diverses façons d'envoyer les paramètres, spécifions
simplement que lorsqu'il y a un point d'interrogation (?) dans l'URL, les
caractères qui le suivent sont des paramètres.) Voici par exemple une
référence à un jeu de tictactoc (le mien). Si vous lisez le code source, vous
remarquerez que le programme ne fait référence qu'à lui-même pour gérer tous
les cas possibles, ce sont les paramètres qui diffèrent.
Une partie, bien mal partie
<![CDATA[
<A HREF=
"../tictactoc/tictactoc.cgi?x---o-o-x">
Une partie, bien mal partie</A>
]]>
La destination
Par défaut, un lien est toujours chargé dans la fenêtre où il se trouve, et
dans le même cadre ("frame"). Le paramètre TARGET permet de faire autrement.
Vous pouvez charger un document dans un cadre précis en précisant son nom, dans
la fenêtre au complet en utilisant le nom _top, ou dans une nouvelle fenêtre en
utilisant un nom quelconque.
Si vous utilisez la version avec des cadres, le premier lien chargera Yahoo
dans le cadre en cours, le second dans toute la fenêtre, le troisième
dans une autre fenêtre, et le quatrième dans le cadre de droite. Pour
récupérer la table des matières après le quatrième test, enfoncez le bouton de
droite de la souris sur le cadre et choisissez «back in frame» ou utilisez ce
lien.
Si vous utilisez la version sans cadres, le deuxième lien agira comme le
premier, et le quatrième chargera Yahoo dans la fenêtre où se trouve déjà une
table des matières ou un index des codets ou dans une nouvelle fenêtre s'il
n'y a pas de telle fenêtre.
Yahoo
Yahoo dans toute la
fenêtre
Yahoo dans une autre
fenêtre
Yahoo à droite
<![CDATA[
<A HREF="http://www.yahoo.com">Yahoo</A><BR>
<A HREF="http://www.yahoo.com" TARGET="_top">Yahoo dans toute la
fenêtre</A><BR>
<A HREF="http://www.yahoo.com" TARGET="ailleurs">Yahoo dans une autre
fenêtre</A><BR>
<A HREF="http://www.yahoo.com" TARGET="menu">Yahoo à droite</A><BR>
]]>
Sections suivantes