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