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