Sections pr�c�dentes

	Introduction Terminologie Index par codets Votre premi�re page HTML Les composantes standards La t�te Le corps Le pied Les r�f�rences Liens absolus vs les relatifs Les cadres Les ancres � des fichiers statiques � des fichiers ex�cutables La destination	La table des mati�res La liste par codets Retour � ma page principale

Bienvenue, vous �tes le

^e a acc�der � l'HTML en une page.

La pr�sentation du texte

Le positionnement du texte

Nous aborderons trois cat�gories de codet positionnement : les changements de lignes, les marges et la justification. Remarquez que les codets sp�cifiques au positionnement sont relativement limit�s. Dans la deuxi�me section, nous donnerons certains codets de listes et de d�finitions. Ces codets permettent d'obtenir des effets non-disponibles autrement. Les tableaux sans bordure offrent �galement des possibilit�s non-n�gligeables.

Les changements de lignes

Vous avez s�rement remarqu� que v�tre fureteur ignore les retours de chariot de v�tre fichier source. Il existe deux codets qui peuvent reproduire cet effet : les bris de lignes et les changements de paragraphe. Un bris de ligne ram�ne le texte au d�but de la ligne suivante. Le changement de paragraphe laisse en plus une ligne libre. Notez que les bris de ligne sont cumulatifs, mais pas les changements de paragraphe.

Les bris de ligne

sont cumulatifs.
Les changements de paragraphe

ne le sont pas.

Les bris de ligne <BR> <BR> <BR> sont cumulatifs. <BR> Les changements de paragraphe <P> <P> <P> <P> ne le sont pas.

Quand on met des images ou des tableaux sur les cot�s, il est possible de revenir � la marge avec un seul codet BR, il suffit d'utiliser le param�tre CLEAR. Il peut prendre trois valeurs : LEFT, RIGHT ou le d�faut, ALL.

Texte

Texte
Texte o� la marge de droite est libre.

Texte
Texte o� la marge de gauche est libre.

Texte
Texte o� les deux marges sont libres. <IMG SRC="logo.gif" ALIGN=LEFT HEIGHT=50>Texte<BR> <IMG SRC="logo.gif" ALIGN=RIGHT HEIGHT=70>Texte<BR CLEAR=LEFT> Texte o� la marge de droite est libre.<BR> <IMG SRC="logo.gif" ALIGN=LEFT HEIGHT=70>Texte<BR> Texte o� la marge de gauche est libre.<BR CLEAR=RIGHT> <IMG SRC="logo.gif" ALIGN=RIGHT HEIGHT=50>Texte<BR CLEAR=ALL> Texte o� les deux marges sont libres.

Les marges

Il y a trois effets que j'ai r�ussis � obtenir : l'alin�a, la marge provisoire et la mise en retrait. Comme vous savez, l'alin�a consiste � mettre en retrait la premi�re ligne d'un paragraphe. On utilise pour cela un codet DD. Il s'agit d'un codet de d�finition. Notez qu'� l'int�rieur d'un codet DL, il donne une marge provisoire (rapprochement de seulement la marge de gauche). Pour la marge provisoire, on utilise un codet de liste, par exemple UL. Finalement, il existe un codet sp�cialement pour une mise en retrait : BLOCKQUOTE.

Un alin�a (pour fins de test : t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t )

Une marge provisoire (pour fins de test : t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t )

Une mise en retrait (pour fins de test : t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t )

<DD>Un alin�a (pour fins de test : t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t ) <UL>Une marge provisoire (pour fins de test : t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t ) </UL> <BLOCKQUOTE>Une mise en retrait (pour fins de test : t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t ) </BLOCKQUOTE>

La justification

Normalement, il existe quatre formes de justification : gauche, droite, centr�e et �gauche-droite�. Netscape ne supporte pas la justification gauche-droite. La justification gauche est le d�faut. Il y a deux fa�ons d'obtenir une autre forme de justification : un codet sp�cifique, le param�tre ALIGN d'un autre codet. Il existe le codet sp�cifique CENTER. Je ne sais s'il en existe d'autres, mais je ne crois pas que Netscape les supportent.

texte avant texte centr� texte apr�s texte avant <CENTER> texte centr� </CENTER> texte apr�s

Le param�tre ALIGN permet �galement d'obtenir ce m�me effet. Il peut �tre utilis� avec plusieurs codets. Nous illustrons ici l'utilisation avec le codet P et le codet DIV. (Nous y reviendrons quand nous parlerons des tableaux.) Le param�tre ALIGN peut donc prendre les valeurs LEFT, RIGHT, CENTER, et th�oriquement JUSTIFY, bien que Netscape ne supporte pas cette derni�re.

Le changement de justification d'un codet P est effectif jusqu'au prochain changement de paragraphe explicite ou implicite. Il va sans dire qu'un codet P est un changement de paragraphe explicite, mais certains codets comme un s�parateur, une ent�te ou un codet d' interpr�tation change �galement la justification.

Texte dans un codet centre

� gauche
Un bris de ligne

paragraphe suivant

au centre
Un bris de ligne

� droite
Un bris de ligne

Une ent�te est un changement de paragraphe implicite

Nouveau paragraphe <CENTER> Texte dans un codet centre <P ALIGN=LEFT>� gauche <BR>Un bris de ligne <P>paragraphe suivant </CENTER> <P ALIGN=CENTER>au centre <BR>Un bris de ligne <P ALIGN=RIGHT>� droite <BR>Un bris de ligne <H4>Une ent�te est un changement de paragraphe implicite</H4> Nouveau paragraphe

Le codet DIV joue sensiblement le m�me r�le que le codet FOOTER, il permet de mettre une division logique dans un fichier. Le principal int�r�t de ce codet est de pouvoir changer la justification aussi longtemps que l'on veut. Bien que je ne le recommande pas, les codets DIV imbriqu�s fonctionnent.

Division justifi�e � droite

Division justifi�e au centre, dans la premi�re division

Deuxi�me paragraphe dans la division.

Autre texte

<DIV ALIGN=RIGHT> Division justifi�e � droite <DIV ALIGN=CENTER> Division justifi�e au centre, dans la premi�re division <P> Deuxi�me paragraphe dans la division. </DIV> Autre texte </DIV>

Les s�parateurs

Le codet standard pour les s�parateurs et HR. Netscape supporte 4 extensions : SIZE, WIDTH, ALIGN, NOSHADE. Le param�tre SIZE modifie la largeur de la ligne, il prend une valeur num�rique. WIDTH modifie la longueur de la ligne, il prend soit une valeur num�rique, soit un pourcentage. ALIGN modifie l'alignement horizontal de la ligne, il prend l'une des trois valeurs suivantes : LEFT, RIGHT et CENTER. NOSHADE modifie l'aspect de la ligne et est utilis� seul.

Les en-t�tes

On peut utiliser des en-t�tes standardis�s, les en-t�tes ont une importance relative que l'on repr�sente par un nombre de 1 � 6, appel� niveau.

H1

H2

H3

H4

H5

H6

Il est �galement possible de modifier l'alignement des ent�tes. Il s'agit bien s�r du param�tre ALIGN. Les valeurs possibles sont LEFT (le d�faut), CENTER et RIGHT. JUSTIFY existe peut-�tre, je n'es pas v�rifiez dans la sp�cification, mais g�n�ralement, Netscape ne la supporte pas.

� gauche

Au centre

� droite

<H3 ALIGN=LEFT>� gauche</H3> <H3 ALIGN=CENTER>Au centre</H3> <H3 ALIGN=RIGHT>� droite</H3>

Les polices

On peut changer la grandeur du texte avec la commande FONT SIZE. Elle peut prendre soit une valeur absolue (Netscape supporte les niveaux 0 � 7) soit une valeur relative. Pour une raison que j'ignore, la grandeur z�ro et la grandeur sept se trouvent � �tre les m�mes que la un et la six, si vous savez pourquoi ou que c'est diff�rent chez vous, faites-le moi savoir.

GRANDEUR 0 GRANDEUR -3
GRANDEUR 1 GRANDEUR -2
GRANDEUR 2 GRANDEUR -1
GRANDEUR 3
GRANDEUR 4 GRANDEUR +1
GRANDEUR 5 GRANDEUR +2
GRANDEUR 6 GRANDEUR +3
GRANDEUR 7 GRANDEUR +4
<FONT SIZE=0>GRANDEUR 0</FONT> <FONT SIZE=-3>GRANDEUR -3</FONT><BR> <FONT SIZE=1>GRANDEUR 1</FONT> <FONT SIZE=-2>GRANDEUR -2</FONT><BR> <FONT SIZE=2>GRANDEUR 2</FONT> <FONT SIZE=-1>GRANDEUR -1</FONT><BR> <FONT SIZE=3>GRANDEUR 3</FONT><BR> <FONT SIZE=4>GRANDEUR 4</FONT> <FONT SIZE=+1>GRANDEUR +1</FONT><BR> <FONT SIZE=5>GRANDEUR 5</FONT> <FONT SIZE=+2>GRANDEUR +2</FONT><BR> <FONT SIZE=6>GRANDEUR 6</FONT> <FONT SIZE=+3>GRANDEUR +3</FONT><BR> <FONT SIZE=7>GRANDEUR 7</FONT> <FONT SIZE=+4>GRANDEUR +4</FONT><BR>

Les styles logiques

De l'emphase
Plus d'emphase
Du code
Le r�sultat d'un programme
Une touche du clavier
Une variable
Une d�finition (Aucun effet avec netscape)
Le nom d'une ville

Une adresse

<EM>De l'emphase</EM><BR> <STRONG>Plus d'emphase</STRONG><BR> <CODE>Du code</CODE><BR> <SAMP>Le r�sultat d'un programme</SAMP><BR> <KBD>Une touche du clavier</KBD><BR> <VAR>Une variable</VAR><BR> <DFN>Une d�finition</DFN> (Aucun effet avec netscape)<BR> <CITE>Le nom d'une ville</CITE><BR> <ADDRESS>Une adresse</ADDRESS>

Les styles physiques

Gras
Italique
Soulign�
Format machine � �crire
~~Ray�~~
Clignotant
X^Exposant
X_Indice
Grand (codet cumulatif)
petit(codet cumulatif) <B>Gras</B><BR> <I>Italique</I><BR> <U>Soulign�</U><BR> <TT>Format machine � �crire</TT><BR> <STRIKE>Ray�</STRIKE><BR> <BLINK>Clignotant</BLINK><BR> X<SUP>Exposant</SUP><BR> X<SUB>Indice</SUB><BR> <BIG>Grand <BIG>(codet cumulatif)</BIG></BIG><BR> <SMALL>petit<SMALL>(codet cumulatif)</SMALL></SMALL>

L'interpr�tation

Il existe divers codet qui permettent de modifier la fa�on dont votre fureteur interpr�te les caract�res. Vous avez sans doute remarqu� d�s vos premi�res pages qu'il n'�tait pas d'une grande utilit� de rajouter des retours de chariot. Ils sont normalement ignor�s. La plupart du temps, il vous suffira d'ajouter des codets BR et de remplacer les caract�res pr�f�r�s du fureteur (< > & et ") par leur cha�ne �quivalente (< pour <).

C'est une t�che plut�t facile si vous avez du texte standard. Quand vous arrivez avec du code C, �a devient relativement plus ardu. Dans le cas d'un cgi qui inclue dans un page le r�sultat d'un appel � un autre ex�cutable, il est inutile de d�velopper un convertisseur quand il existe des codets qui fond le travail.

Voici le m�me dans texte, premi�rement interpr�t� normalement, ensuite � l'int�rieur des codets PRE, LISTING et XMP. Il existe �galement un codet PLAINTEXT qui donnent le m�me r�sultat que le codet XMP, � la diff�rence que ce codet n'a pas de fin.

Texte normal Texte
Texte Gras Yahoo

PRE
Texte
Texte Gras Yahoo

LISTING Texte
Texte Gras Yahoo

XMP
Il est �galement possible de mettre du texte en commentaire. Il faut commencer par les caract�res ""*.

*sans les guillemets

Les couleurs

Je ne sais pas quels fureteurs supportent les couleurs � part Netscape2. On utilise le codet FONT comme pour les polices, mais avec le param�tre COLOR au lieu de SIZE. La valeur du param�tre est une cha�ne de caract�res. On peut utiliser soit le nom d'une couleur, soit une valeur RGB (de 00 � FF pour chaque couleur) pr�c�d�e du symbole #.

rouge vert bleu noir blanc cyan jaune magenta orange <FONT COLOR="#FF0000">rouge</FONT> <FONT COLOR="#00FF00">vert</FONT> <FONT COLOR="#0000FF">bleu</FONT> <FONT COLOR="#000000">noir</FONT> <FONT COLOR="#FFFFFF">blanc</FONT> <FONT COLOR="#00FFFF">cyan</FONT> <FONT COLOR="#FFFF00">jaune</FONT> <FONT COLOR="#FF00FF">magenta</FONT> <FONT COLOR="#FF8000">orange</FONT>

Si vous savez d�j� comment composer une couleur en RGB, vous pouvez consid�rer que cette section s'arr�te ici. Vous avez sans doute d�duit des exemples pr�c�dants que les lettres sont regroup�es par paires. Chaque paire repr�sente en effet l'intensit� (en hexad�cimal) de l'une des trois premi�res couleurs primaires (en lumi�re), respectivement le rouge (red), le vert (green) et le bleu (blue). Plus le nombre est �lev� et plus la couleur est intense.

Certaines personnes objecteront sans doute que le jaune est une couleur primaire. Encore une fois, j'invite les autres � poursuivre avec une autre section. Il existe deux ensembles de couleurs primaires. Vous savez sans doute que le blanc est la somme de toutes les couleurs, alors que le noir est l'absence de toutes. Lorsque l'on absorbe les couleurs, par exemple en peinture, on utilise comme couleur primaire le cyan, le jaune et le magenta. La peinture de chacune de ces couleurs n'absorbe qu'une seule des couleurs primaires en lumi�re. Lorsqu'on �met des couleurs, par exemple les �clairagistes d'un spectacle, on utilise comme couleurs primaires le rouge, le vert et le bleu.

Si vous avez bien compris ce qui pr�c�de, il doit vous sembler logique que si on m�lange une quantit� �gale de peinture de deux des couleurs primaires (en peinture), on obtient une des couleurs primiaires en peinture. � l'inverse, si on �claire une surface blanche avec deux des couleurs primaires (en lumi�re), on obtient une des couleurs primaires en peinture.

Vous vous doutez bien qu'il s'agit de varier les combinaisons pour obtenir toutes les couleurs. Par exemple, pour l'orange, on met la lumi�re rouge deux fois plus intense que la verte, ou deux fois plus de peinture jaune que de magenta.

Les listes

Il y a plusieurs codets de liste, on retrouve des codets compos�s pour indiquer le d�but et la fin des listes, et un codet pour indiquer les �l�ments des listes. Le premier effet d'une liste est d'indenter le texte � la mani�re d'une marge provisoire.

ligne avant la liste

�l�ments dans la liste

ligne apr�s la liste ligne avant la liste <UL> ligne dans la liste <LI>�l�ments dans la liste </UL> ligne apr�s la liste

Vous remarquerez toutefois que le symbole qui identifie les �l�ments se retrouve avant la marge. Le symbole apparaissant � l'�cran d�pend du type de liste, nous les aborderons dans les sections suivantes.

Sans ordre

Dans une liste sans ordre, les items sont pr�c�d�s de cercles pleins, des cercles vides ou de carr�s vides. Par d�faut, il s'agit d'un point pour le premier niveau de liste, d'un cercle pour le deuxi�me et d'un carr� pour les autres. On peut modifier l'affichage des items d'une liste gr�ce au param�tre TYPE, il prend les valeurs DISC, CIRCLE et SQUARE.

Il est possible que vous ne voyez pas les bons symboles. Si c'est cas, c'est sans doute que vous utilisez la version de Netscape pour PC. Les cercles vides apparaissent comme des carr�s vides et les carr�s vides comme plein. Si vous trouvez d'autres disparit�s, faites-moi le savoir et il me fera plaisir de les ajouter.

D�sol� pour les partisans du PC, mais si je parle des bons symboles, ce n'est pas par pr�jug�s. Ila sont consistants sur les Mac et les syst�mes UNIX (du moins sur envirionement SunOS et Solaris).

Cercles par d�faut
- Carr�s par d�faut
  - Carr�s par d�faut
    - Item 1
    - Item 2
  - Disques forc�s
    - Item 1
    - Item 2
  - Cercles forc�s
    - Item 1
    - Item 2
Carr�s forc�s
- Item 1
- Item 2
Changement au milieu de la liste
Valide pour les �l�ments subs�quents

<UL> <LI>Cercles par d�faut <UL> <LI>Carr�s par d�faut <UL> <LI>Carr�s par d�faut <UL> <LI>Item 1 <LI>Item 2 </UL> <LI>Disques forc�s <UL TYPE=DISC> <LI>Item 1 <LI>Item 2 </UL> <LI>Cercles forc�s <UL TYPE=CIRCLE> <LI>Item 1 <LI>Item 2 </UL> </UL> </UL> <LI>Carr�s forc�s <UL TYPE=SQUARE> <LI>Item 1 <LI>Item 2 </UL> <LI TYPE=CIRCLE>Changement au milieu de la liste <LI>Valide pour les �l�ments subs�quents </UL>

En ordre

Vous l'aurez devin�, dans les listes en ordre, on retrouve des nombres devant les �l�ments. Le param�tre TYPE existe �galement pour les liste en ordre. Il peut prendre les valeurs suivantes : I, i, 1, A et a; le d�faut �tant 1 pour tous les niveaux. Il est �galement possible de changer de type au milieu d'une liste en utilisant le param�tre TYPE avec le codet LI.

Sans type sp�cifi�
1. Item 1
2. Item 2
Type �I�
1. Item 1
2. Item 2
Type �i�
1. Item 1
2. Item 2
Type �A�
1. Item 1
2. Item 2
Type �a�
1. Item 1
2. Item 2
Changement de type au milieu d'une liste
Valide pour les �l�ments subs�quents

<OL> <LI>Sans type sp�cifi� <OL> <LI>Item 1 <LI>Item 2 </OL> <LI>Type �I� <OL TYPE=I> <LI>Item 1 <LI>Item 2 </OL> <LI>Type �i� <OL TYPE=i> <LI>Item 1 <LI>Item 2 </OL> <LI>Type �A� <OL TYPE=A> <LI>Item 1 <LI>Item 2 </OL> <LI>Type �a� <OL TYPE=a> <LI>Item 1 <LI>Item 2 </OL> <LI TYPE=I>Changement de type au milieu d'une liste <LI>Valide pour les �l�ments subs�quents </OL>

Il est �galement possible de chang� la valeur de l'indice avec le param�tre VALUE du codet LI. Ce param�tre n'a aucun effet si on l'applique � OL, on doit utiliser le codet START. La valeur par d�faut du param�tre VALUE est 1. On ne peut pas utiliser de valeurs n�gatives ou sup�rieurs � 2147483647. Une liste en chiffres arabe d�borde toutefois dans les n�gatifs. Les lettres et les chiffres romains d�bordent beaucoup plus rapidement; les valeurs maximales sont respectivement de 702 et 3999 pour les lettres et les chiffres romains. Souvenez-vous que les chiffres romains sont tr�s longs, surtout en majuscules.

Liste en chiffres arabes commen�ant � 20
1. Item sans valeur sp�cifiez
2. Item sans valeur sp�cifiez
3. Item forc� � 20
4. Item sans valeur sp�cifiez
5. Item forc� � 1
D�bordement sur une liste standard
1. Item forc� � 2147483646
2. Item sans valeur sp�cifiez
3. Item sans valeur sp�cifiez
4. Item sans valeur sp�cifiez
Liste par lettre
1. Item forc� � 700
2. Item sans valeur sp�cifiez
3. Item sans valeur sp�cifiez
4. Item sans valeur sp�cifiez
Liste en chiffre romain
1. Le plus long chiffre romain
  1. 3888
2. Un d�bordement
  1. 3999
  2. Pour 4000
  3. Pour 4001

<OL> <LI>Liste en chiffres arabes commen�ant � 20 <OL START=40> <LI>Item sans valeur sp�cifiez <LI>Item sans valeur sp�cifiez <LI VALUE=20>Item forc� � 20 <LI>Item sans valeur sp�cifiez <LI VALUE>Item forc� � 1 </OL> <LI>D�bordement sur une liste standard <OL> <LI VALUE=2147483646>Item forc� � 2147483646 <LI>Item sans valeur sp�cifiez <LI>Item sans valeur sp�cifiez <LI>Item sans valeur sp�cifiez </OL> <LI>Liste par lettre <OL Type=A> <LI VALUE=700>Item forc� � 700 <LI>Pour 701 <LI>Pour 702 <LI>Pour 703 </OL> <LI>Liste en chiffre romain <OL Type=I> <LI>Le plus long chiffre romain <OL Type=I> <LI VALUE=3888>3888 </OL> <LI>Un d�bordement <OL Type=I> <LI VALUE=3999>3999 <LI>Pour 4000 <LI>Pour 4001 </OL> </OL>

Les menus et les r�pertoires

Il existe �galement des codets MENU et DIR, mais Netscape les traite comme des simples alias des codets de liste sans ordre.

Les d�finitions

Elles sont d�limit�es par un codet DL. Les items d�finis sont pr�c�d�s d'un codet DT et leur d�finition d'un codet DD.

Un nom: Sa d�finition
Un autre nom: Sa d�finition

<DL> <DT>Un nom <DD>Sa d�finition <DT>Un autre nom <DD>Sa d�finition </DL>

Voici comment le code HTML a pens� les d�finitions, remarquez qu'elles sont tr�s utiles dans d'autres circonstances. Elles sont par exemple utilis�es les signets de Netscape. Voici donc quelques caract�ristiques int�ressantes � savoir.

Une d�finition dans une d�finition est trait�e comme une marge provisoire, mais contrairement aux listes, la premi�re d�finition se situe � la marge de gauche.
� l'ext�rieur d'un codet DL, le codet DD agit comme une tabulation. � l'int�rieur de ce m�me codet, il agit comme une marge provisoire (selon Netscape).

Sections suivantes

	Les images L'alignement La grandeur Les bordures Les tableaux Les bordures La largeur des �l�ments L'alignement des �l�ments La grandeur des cellules Emp�cher les c�sures Les caract�res sp�ciaux	La table des mati�res La liste par codets Retour � ma page principale

Texte normal	Texte Texte Gras Yahoo
PRE	Texte Texte Gras Yahoo
LISTING	Texte Texte Gras Yahoo
XMP