<B>texte</B>
: le texte inclus dans le tag <B>...</B> apparaît en
gras
<I>texte</I> : le texte inclus dans le tag
<I>...</I> apparaît en italique
<U>texte</U> : le texte inclus dans le tag
<U>...</U> apparaît souligné
<S>texte</S> : le texte inclus dans le tag
<S>...</S> apparaît barré
<BIG>texte</BIG> : le texte inclus dans le tag
<BIG>...</BIG> apparaît plus gros que normalement
<SMALL>texte</SMALL> : le texte inclus dans le tag
<SMALL>...</SMALL> apparaît plus petit que
normalement
<SUB>texte</SUB> : le texte inclus dans le tag
<SUB>...</SUB> apparaît en indice
<SUP>texte</SUP> : le texte inclus dans le tag
<SUP>...</SUP> apparaît en exposant
Style logique
et titre
<H1>texte</H1> : de taille 1 ( maximum )
<H2>texte</H2> : de taille 2
<H3>texte</H3> : de taille 3
<H4>texte</H4> : de taille 4
<H5>texte</H5> : de taille 5
<H6>texte</H6> : de taille 6 ( minimum )
<EM>texte</EM> Met le texte en valeur
<CODE>texte</CODE> : affiche le texte pour les
listings de programme
Sauts de ligne
Pour forcer un
saut de ligne à un endroit précis, utilisez le tag <BR> (
ce tag ne nécessite pas de tag de fin )
Pour désactiver les sauts de lignes, utilisez le tag
<NOBR>texte</NOBR> : Attention, avec ce tag, le texte
risque de déborder de la fenêtre du navigateur.
Paragraphes
Les paragraphes
sont le meilleur moyen de structurer votre texte. Le début d'un
nouveau paragraphe est matérialisé par le tag <P> ( ce
tag crée également un saut de ligne ) et respecte un espacement
vertical plus grand par rapport au texte précédant. Pour fermer
le paragraphe, utilisez le tag </P> qui lui aussi crée
automatiquement un saut de ligne.
Alignement
La
plupart des tags acceptent ALIGN comme attribut. Cet attribut
détermine l'alignement horizontal et vertical du texte.
Pour insérer un texte à droite, il faut utiliser l'attribut
ALIGN=RIGHT
Pour insérer un texte à gauche, il faut utiliser l'attribut
ALIGN=LEFT
Pour centrer un texte, il faut utiliser l'attribut ALIGN=CENTER
Par
exemple pour un paragraphe que l'on veut centrer, on utilisera :
<P
ALIGN=CENTER> paragraphe à centrer </P>
On
n'a pas besoin de ressaisir l'attribut d'alignement pour un tag de
fin.
Vous pouvez utiliser l'alignement avec les titres, les images,
bref, tous les objets.
Remarque: Pour
centrer plusieurs objets en une seule opération, il faut utiliser
les tags <CENTER>....</CENTER>. Tous les objets
situés entre ces tags seront centrés :
<CENTER>
objets à centrer </CENTER>
Taille des
caractères
Vous pouvez
choisir votre taille de caractère en utilisant le tag
<BASEFONT> et son attribut SIZE ( valeur entre 1 et 7 ). Le
tag <BASEFONT> ne nécessite pas de tag de fermeture.
Par exemple pour
mettre un texte en taille 1 ( maximum ), il faut faire :
<BASEFONT
SIZE=1> Texte en taille 1
Caractères
d'un texte
Vous pouvez
choisir avec quels jeux de caractères vous voulez que votre page
soit écrite. Il faut pour cela utiliser le tag <FONT> et
son attribut FACE. Vous pouvez également définir des polices
alternatives au cas ou l'ordinateur de l'internaute qui vient
voir votre page n'aurait celle que vous avez choisie.
Voici un exemple
d'un texte écrit en arial (attention aux guillemets):
<FONT
FACE="Arial">texte en arial</FONT>
Pour choisir des
couleurs alternatives, séparez les par des virgules :
<FONT
FACE="Arial,Helvetica">Texte en arial si la police
est présente, sinon en helvética</FONT>
Avec le tag font,
vous pouvez également utiliser l'attribut SIZE. Pour mettre un
texte en taille 2 et en arial :
<FONT
FACE="Arial" SIZE=2 >texte en taille 2 et en arial
</FONT>
Lignes
horizontales de séparation
Vous pouvez
tracer des lignes de séparations horizontales. Vous pouvez
modifier leur aspect à l'aide d'attribut. Pour tracer une ligne
horizontale, il faut utiliser le tag <HR> ( ne nécessite
pas de tag de fermeture. Le tag <HR> possède comme
attributs ALIGN, WIDTH, SIZE, HEIGH. Normalement, les attributs
WIDTH et HEIGHT sont exprimés en pixels, mais il est possible de
définir une largeur en pourcentage de la largeur de la feuille.
L'attribut NOSHADE désactive l'effet 3D standard.
Image
d'arrière plan
L'insertion d'une
image d'arrière plan est très facile. Celle ci se définie à
l'intérieur du tag <BODY>. Vous ne pouvez utiliser qu'une
seule image par page. L'image est mise en mosaïque, cela
signifie qu'elle se répète à l'infini sur votre page. Les
images à utiliser doivent être au format GIF ou JPG. Pour
insérer une image en fond d'écran :
<BODY
BACKGROUND="image.jpg"> ou <BODY
BACKGROUND="image.gif"
Remarque: Ne pas oublier les
guillemets.
Couleur du
texte
Le tag
<FONT> a un autre attribut : COLOR. Celui-ci permet de
définir la couleur des caractères inclus entre les tags
<FONT> et </FONT>. L'attribut COLOR doit être
affecté d'un des seize noms de couleurs reconnus ou d'un code
RVB ( rouge, vert, bleu ) ( le code RVB est précédé du signe #
)
Voici la liste
des couleurs reconnues :
Nom
Couleur
Nom
Couleur
aqua
Bleu clair
navy
Bleu foncé
black
Noir
olive
Vert olive
blue
Bleu ciel
purple
Violet
fuchsy
Brun clair
red
Rouge
gray
Gris
silver
Gris argent
green
Vert
teal
Gris acier
lime
Ocre
white
Blanc
maroon
Brun foncé
yellow
Jaune
Par exemple pour
mettre un texte en rouge, vous avez 2 solutions :
<FONT
COLOR=RED>Texte en rouge</FONT>
ou
<FONT COLOR=#FF0000>Texte en rouge </FONT>
Remarque: ne pas oublier le #
Couleur
d'arrière plan
C'est exactement
pareil pour la couleur d'arrière plan. Cette couleur est
définie par l'attribut BGCOLOR du tag <BODY>, avec la
possibilité de mettre un nom de couleur ou un code RVB ( avec le
# ). La couleur reste la même sur toute la page, on ne peut pas
la changer à la moitié de la page.
<BODY
BGCOLOR=RED>
ou
<BODY BGCOLOR=#FF0000>
Couleur des
liens
Il existe 3 types
de liens :
liens pas
encore visités
liens déjà
visités
Liens actifs
( sur lesquels un clic est en cours )
Les liens pas
encore visités sont pris en charge par l'attribut LINK.
Les liens déjà visités sont pris en charge par l'attribut
VLINK.
Les liens actifs sont pris en charge par l'attribut ALINK.
Ces attributs
font partie du tag <BODY> et acceptent un nom de couleur ou
un code RVB.
Exemple :
<BODY
BGCOLOR=BLACK LINK=RED ALINK=GREEN VLINK=BLACK>
Dans l'exercice
suivant, vous allez devoir essayer de faire exactement pareil que
la page qui s'affichera après avoir cliqué sur Exercice. Un
petit peu d'aide : la couleur de fond utilisée ici est peachpuff. Si vous n'y arrivez pas,
cliquez avec le bouton droit de la souris en sélectionnant la
page d'exercice et sélectionnez Afficher le code source.
Si vous avez trouvez, un grand bravo, vous êtes prêt
pour la suite. Sinon, réessayer jusqu'à réussir.
En savoir +
