Titre de niveau 4 (Balise <H4>)

Pour énumérer différents éléments dans un texte ou pour montrer la succession d'étapes dans un atelier, le HTML permet de créer des listes. Il en existe deux types : à puces et numérotées.

Les listes à puces sont délimitées par la balise <UL> Une autre balise, <LI> précise l'ensemble des éléments de cette liste.

Ainsi :

<UL> <LI> rouge </LI> <LI> vert </LI> <LI> bleu </LI> </UL>

Rouge Vert Bleu

Les listes numérotées utilisent la balise <OL> En revanche, on utilisera toujours <LI> pour définir les différents éléments de la liste.

Une liste numérotée codée de cette façon :

<OL> <LI> jaune </LI> <LI> cyan </LI> <LI> magenta </LI> </OL>

Jaune Cyan Magenta

1.1.10 Utilisation des polices

Par défaut, les textes sont affichés dans une police standard (Times New Roman sous Windows, Helvetica sur Macintosh), avec une taille moyenne et en noir.

La balise <FONT> permet de modifier la police de caractères. Elle prend jusqu'à trois attributs : SIZE, COLOR et FACE.

SIZE indique la taille du texte. La valeur indiquée doit être comprise entre 1 et 7. La taille réelle qui en résulte dépend du navigateur.

COLOR indique la couleur du texte compris entre les balises et .<FONT> et </FONT> La couleur doit être codée en hexadécimal sous la forme #RRVVBB (valeur de rouge, de vert et de bleu).

FACE concerne le nom de la police à utiliser. Il est possible d'indiquer plusieurs noms : le navigateur utilisera la première police qu'il trouvera.

Vous pouvez combiner l'ensemble de ces attributs pour obtenir une mise en forme originale :

<FONT SIZE = "+1" COLOR = "#FF0000" FACE="Arial"> Mon texte en rouge et en police Arial

Mon texte en rouge et en police Arial

Conseil esthétique... N'abusez pas des polices sur votre site.

Lorsque vous créez un document dans votre logiciel de traitement de texte, vous pouvez choisir les polices qui vous plaisent. Sur le Web, les choses ne sont hélas pas aussi simples. Il existe cependant diverses astuces et solutions pour donner à votre page l'allure de votre choix.

1.1.11 Toutes les balises de mise en forme

Pour conclure, voici la liste de toutes les balises de mise en forme du langage HTML. Certaines ne sont pas supportées par tous les navigateurs, d'autres sont déclarées obsolètes. Amusez-vous, faites des essais !

Balise	Description
<B> </B>	Texte en gras
<BIG> </BIG>	Police en taille +1
<BLINK> </BLINK>	Texte clignotant
<BLOCKQUOTE> </BLOCKQUOTE>	Retrait vers la droite
<BR>	Saut de ligne
<CENTER> </CENTER>	Alignement au centre
<CTE> </CITE>	Texte au format "citation"
<CODE> </CODE>	Texte au format "code source"
<DFN> </DFN>	Texte au format "logique"
<Hn> </Hn> ( n compris entre 1 et 6)	Titre de niveau n
<I> </I>	Texte en italique
<LI> </LI>	Elément d'une liste
<OL> </OL>	Liste numérotée
<P> </P>	Paragraphe
<PRE> </PRE>	Texte pré-formaté
<Q> </Q>	Texte au format "citation longue"
<S> </S> ou <STRIKE> </STRIKE>	Texte rayé
<SAMP> </SAMP> ou <XMP> </XMP>	Texte au format "exemple"
<SMALL> </SMALL>	Police en taille -1
<STRONG> </STRONG>	Texte en gras
<SUB> </SUB>	Texte en indice
<TT> </TT>	Texte au format "machine à écrire"
<U> </U>	Texte souligné
<UL> </UL>	Liste à puce
<VAR> </VAR>	Texte au format "variable"

 

1.2 Les liens :

Ce qui fait la richesse et l'interactivité d'un site, ce sont avant tout ses liens. Une seule balise est nécessaire pour définir l'ensemble des liens, pointés vers l'extérieur, vers votre boîte à lettres ou ailleurs...

1.2.1 Comment ça marche ?

Les liens hypertextes, vous les connaissez déjà : ils vous ont permis d'atterrir ici ! Par défaut, ils sont identifiables par leur couleur bleue, leur mise en forme soulignée et l'apparence que prend le pointeur de votre souris dès qu'il les survole. Difficile de les louper dans ces conditions.

De fait, ils conditionnent tous vos déplacements sur le Web. Grâce à eux, vous passez d'une page à l'autre d'un simple clic de souris. C'est ça la navigation ! A condition évidemment de la définir correctement.

Pour créer la navigation au sein de votre site, vous disposez de deux types de liens :

· Les liens internes, qui permettent de se déplacer de page en page à l'intérieur de votre site ou dans les différentes sections d'un document (on parle alors d'ancre).

· Les liens externes, qui vous propulsent sur un autre site, n'importe où sur le Web. Il suffit de connaître l'adresse de ce site pour créer un lien à partir de vos pages.

1.2.2 Liens relatifs et liens absolus

Avant même de créer un lien, vous devez savoir vers quoi celui-ci va pointer. Vers une page de votre site ou une ressource disponible à l'autre bout du monde ? S'agit-il d'un lien relatif ou d'un lien absolu ?

Les liens relatifs

Ils permettent d'aller vers une page selon la position de la page actuelle. On se sert donc de l'emplacement de la page qui contient le lien pour définir la destination. Il est alors impératif que la page de destination se trouve sur le même serveur et dans la même arborescence que la page source.

Par exemple :

<A HREF = "site/test.html"> pointe vers un fichier contenu dans le répertoire parent (symbolisé par les ..).

<A HREF = ".../site/test.html"> remonte d'un répertoire pour se rendre dans le sous-répertoire site et afficher la page test.html.

Les liens absolus

Ils ne dépendent pas de la position de la page source. C'est le cas des liens externes, mais rien ne vous interdit de les utiliser sur votre propre site à la place de liens relatifs. Dans tous les cas, il suffit d'indiquer la totalité de l'adresse du document :

<A HREF = "http://wolfman.est-ici.org/">

Attention à la casse

Certains serveurs et navigateurs Web sont case sensitive, c'est-à-dire qu'ils font la différence entre majuscules et minuscules. Pour éviter ce problème, donnez toujours à vos fichiers des noms en minuscules et nommez-les de même dans vos liens.

1.2.3 Les liens à l'intérieur d'une page

Dans le cas de pages très longues, il peut être intéressant de donner un lien vers une portion précise de la page. Ce qui demande de repérer les positions clés à atteindre dans la page et de les marquer avec des ancres.

La syntaxe de l'ancre est la suivante :

<A NAME = "Nom de l'ancre">

Cette balise est ponctuelle et ne nécessite pas de fermeture.

Reste ensuite à créer un lien vers cette ancre. Il suffit pour cela d'en spécifier le nom précédé d'un #. Exemple :

<A HREF="#nom_de_l_ancre">Lien vers mon ancre dirige vers une ancre de la même page.

<A HREF="page2.html#nom_de_l_ancre">Lien vers mon ancre dirige vers une ancre dans le fichier page2.html.

Cela fonctionne évidemment de la même façon avec des liens absolus.

ASTUCE :

Dans une très longue page, il peut être très pratique d'insérer un sommaire au début du document, avec des liens vers les différents paragraphes. Le visiteur appréciera aussi de pouvoir retourner au début du document d'un simple clic.

1.2.4 Liens vers d'autres destinations

Jusqu'ici, tous nos liens pointent vers d'autres pages ou éléments de pages Web. Mais il est possible aussi de créer des liens vers d'autres types de ressources tels des adresses mail et des serveurs FTP.

Par exemple :

<A HREF="mailto:mister_wolfman@wolf-web.com">Ecrivez moi crée un lien qui ouvrira votre logiciel de mail sur un message vierge vers une adresse présaisie. Il ne vous reste plus qu'à remplir le corps et le sujet, puis à envoyer.

<A HREF="ftp://toto:titi@ftp.multimania.com/monfichier.ext"> Telecharger mon fichier crée un lien sur un fichier qui se trouve sur le serveur FTP ftp.multimania.com et accessible avec le login toto et le mot de passe titi.

D'autres types de ressources tels des serveurs gopher, news ou telnet sont également disponibles.

1.3. Les images :

1.3.1 Les formats d'image utilisables

Le Web ne supporte que peu de formats d'image : le GIF et le JPEG, les plus fréquents, auxquels s'ajoute le PNG, plus récent et encore peu utilisé.

· Le GIF (Graphics Interchange Format) a été créé par CompuServe pour afficher plus rapidement les images sur son service en ligne. Ce format s'est rapidement imposé sur le Web.

· Le JPEG (Joint Photographic Experts Group) utilise une technique beaucoup plus puissante, d'où des images plus compactes mais avec un risque de perte de qualité. En fait, c'est à vous de choisir le taux de compression en fonction de la qualité souhaitée.

Difficile de faire un choix ? Le PNG (Portable Network Graphic) est peut être alors pour vous, puisqu'il allie les qualités des deux formats précédents : transparence, affichage progressif, pas de limitation du nombre de couleurs et bon taux de compression. Malheureusement, seuls les navigateurs de dernière génération reconnaissent ce format.

1.3.2 Intégration d'une image

Une fois votre image placée dans l'arborescence de votre site, vous devez l'insérer dans votre page. C'est ici qu'intervient la balise <IMG>

La balise <IMG> a besoin d'au moins un attribut pour fonctionner : SRC, lequel prend comme valeur le nom de l'image à afficher.

Deux autres attributs, WIDTH et HEIGHT, sont optionnels. Mais leur utilisation est conseillée et souvent très pratique. Ils prennent comme valeurs la largeur et la hauteur de l'image, ce qui permet au navigateur de connaître par avance la taille de l'image et d'organiser le texte en conséquence. Ces valeurs permettent aussi d'étirer ou de rétrécir les images pour obtenir des vignettes.

L'attribut ALT, quant à lui, sert à insérer un commentaire, en remplacement de l'image, au cas où celle-ci resterait introuvable.

Voici un exemple d'intégration d'image avec l'ensemble de ces attributs :

<IMG SRC="images/mon_image.gif" WIDTH="250" HEIGHT="100" alt="photo de vacances">

Dans cet exemple, l'image mon_image.gif doit se trouver dans un répertoire nommé images.

Dans cet exemple, l'image mon_image.gif doit se trouver dans un répertoire nommé images.

L'organisation du texte autour des images est parfois un vrai casse-tête. Heureusement, certains attributs de la balise <IMG> facilitent bien des choses.

Deux attributs permettent de définir une marge autour des images : HSPACE et VSPACE. Ils définissent le nombre de pixels séparant l'image des objets qui l'entourent (que ce soit du texte ou une autre image).

· ALIGN="bottom" indique que le bas de l'image sera aligné avec la base de la ligne du texte.

· ALIGN="middle" indique que c'est le milieu de l'image qui sera aligné avec la base du texte.

· ALIGN="top" indique que le haut de l'image sera aligné avec la base du texte.

1.3.4 Placer une image en arrière plan

Les images ne se placent pas seulement à l'intérieur de votre texte, elles peuvent apparaître aussi en fond de page. Le tout grâce à la balise <BODY> et à l'attribut BACKGROUND.

Exemple :

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINF="#0000FF" VLINK="#000080" BACKGROUND="fond.gif">

L'image fond.gif est affichée en fond de page de manière répétitive (mosaïque). Si elle n'est pas trouvée, le fond sera de la couleur spécifiée ou par défaut.

CONSEIL :

Choix de l'image Le choix de l'image de fond comme celui de la couleur de fond est important : gardez toujours à l'esprit que le texte doit rester lisible par-dessus l'image.

1.3.5 Placer des liens sur une image

Une image peut facilement servir de lien : il suffit de la placer entre les balise <A HREF> et </A>

Une technique plus puissante permet de placer des liens sur une petite zone de l'image. C'est la technique des images réactives.

Exemple :

<MAP NAME="map">

<AREA href="page1.html" alt="Access Guide" shape="rect" coords="0,0,100,100">

<AREA href="page2.html" shape="poly" coords="200,200,200,0,300,20,300,180">

<AREA href="page3.html" shape="circle" coords="150,150,50">

</MAP>

<IMG SRC="image.gif" usemap="#map">

Dans cet exemple, nous avons créé trois zones de liens sur l'image image.gif. L'ensemble de ces zones est regroupé sous la balise <MAP> qui permet de les associer à l'image (grâce à l'attribut usemap de la balise <IMG>) Chaque zone est définie précisément par une balise <AREA>

· La première zone a la forme d'un rectangle (attribut shape="rect"), au coin supérieur gauche en (0,0), au coin inférieur droit en (100,100). Le lien qui lui correspond pointe vers la page page1.html.

· La seconde zone est de forme polygonale (shape="poly") : on définit un par un les sommets du polygone (ici 200,200, puis 200,0, 300,20, 300,180). La forme finale ressemble à une sorte de trapèze dont le côté droit est plus petit que le côté gauche. Le lien pointe vers la page page2.html. ·

La troisième zone est circulaire (shape="circle") : son centre a pour coordonnées 150,150 et son rayon est de 50 pixels. Le lien pointe vers la page page3.html.

Dans tous les cas, ces coordonnées sont relatives à l'image : la coordonnée (0,0) correspond au coin supérieur gauche de l'image.

1.3.6 Les attributs de la balise IMG

Voici un petit tableau récapitulatif des différents attributs que vous pouvez utiliser avec la balise <IMG>

Attributs	Description
Src	Nom du fichier image
Width	Largeur de l'image
Height	Hauteur de l'image
Alt	Commentaire
Hspace	Marge horizontale de l'image
Vspace	Marge verticale de l'image
Align	Alignement du texte par rapport a l'image
Usemap	Nom de la carte d'image réactive utilisée

1.4 Les tableaux :

1.4.1 Un tableau de base

La structure de base d'un tableau est toujours la même. Trois balises permettent de définir le tableau en général, ses lignes et ses colonnes :

<TABLE>

<TR>

<TD> 1 </TD>

<TD> 2 </TD>

<TD> 3 </TD>

</TR>

<TR>

<TD> 4 </TD>

<TD> 5 </TD>

<TD> 6 </TD>

</TR>

</TABLE>

Grâce à ce code, nous venons de créer un tableau composé de six cellules disposées sur deux lignes et trois colonnes :

1	2
3	4
5	6

C'est la balise <TABLE> qui déclare l'ouverture d'un tableau. Chaque balise <TR> correspond au début d'une nouvelle ligne, chaque balise <TD> correspond à la création d'une colonne dans cette même ligne.

Pour indiquer la fin d'une ligne, d'une colonne ou du tableau complet, on utilise les balises de fermeture </TR> </TD> et </TABLE>

Pour indiquer la fin d'une ligne, d'une colonne ou du tableau complet, on utilise les balises de fermeture

1.4.2 Bordure et taille

Comme de nombreux éléments du HTML, les tableaux possèdent un grand nombre d'attributs qui permettent de les personnaliser.

Par défaut, les bordures de votre tableau sont apparentes. La balise </TABLE> possède trois attributs concernant la gestion de ces bordures :

· BORDER, qui indique l'épaisseur de la bordure visible en pixels.

· CELLSPACING, qui indique l'écartement en pixels entre les différentes cellules du tableau.

· CELLPADING, qui indique l'écartement en pixels entre la bordure d'une cellule et son contenu.

CONSEIL :

Des tableaux invisibles Si vous utilisez des tableaux pour la mise en forme complexe d'une page, mieux vaut laisser ces trois paramètres à 0. Cependant, n'hésitez pas à monter l'attribut BORDER à une valeur de 1 pendant votre phase de développement, notamment s'il s'agit de tableaux imbriqués. Vous verrez ainsi exactement l'emplacement des différentes cellules et votre travail de mise en page en sera facilité.

La balise <TABLE> peut recevoir aussi les attributs WIDTH et HEIGHT, lesquels fixent la largeur et la hauteur du tableau par rapport à la page :

· La largeur peut être donnée en valeur absolu <TABLE WIDHT= "200">">, soit 200 pixels) ou en pourcentage de la largeur de la page qui contient la table (<TABLE WIDTH="80%">).

· La hauteur n'est qu'une hauteur minimale. La hauteur réelle du tableau peut être supérieure à la taille spécifiée s'il s'avère trop petit pour son contenu.

Les balises <TD> et <TH> bénéficient des mêmes paramètres WIDTH et HEIGHT.

1.4.3 Jouer avec les cellules

Par défaut, dans un tableau, toutes les lignes ont le même nombre de cellules, toutes les colonnes le même nombre de lignes. Pour modifier cette norme, les balises <TD> et <TH> possèdent deux attributs intéressants : COLSPAN, qui permet de fusionner plusieurs colonnes en une seule, ROWSPAN, qui permet de fusionner plusieurs cellules verticalement..

Deux petits exemples valant mieux qu'un long discours :

<TABLE BORDER="1">

<TR> <TD> 2 </TD> <TD> 3 </TD> </TR>

</TABLE>

La première cellule du tableau s'étend donc sur deux colonnes (colspan="2").

En revanche, avec le code :

<TABLE BORDER="1">

<TR> <TD ROWSPAN="2"> 1 </TD> </TR>

<TR> <TD> 2 </TD> /TD> 3 </TD> </TR>

</TABLE>

Cette fois, la première cellule du tableau s'étend sur deux lignes (rowspan="2"), d'où décalage des autres cellules. Bien sûr, vous pouvez combiner ces attributs pour obtenir des tableaux fantaisistes.

1.4.4 Alignement du texte

Il est possible aussi de positionner votre texte exactement où vous le souhaitez dans une cellule grâce aux attributs suivants :

· ALIGN, qui concerne l'alignement horizontal du texte. Il peut prendre les valeurs top (en haut), middle (au milieu) ou bottom (en bas).

· VALIGN, qui concerne l'alignement vertical. Ses valeurs possibles sont left (à gauche), center (au centre) et right (à droite).

Petit exemple, dans cette cellule, le texte est aligné en haut à droite :

<TABLE WIDTH="300" HEIGHT="200" BORDER="1">

<TR> <TD ALIGN="right" VALIGN="top">

Texte placé en haut à droite

</TD> </TR>

</TABLE>

1.4.5 Un peu de couleur

Vous avez remarqué que le fond de notre table était transparent : on y voit soit l'image, soit la couleur de fond de la page. Sachez que vous pouvez aussi personnaliser la couleur de fond de votre tableau, voire celle de chaque cellule et des bordures.

· Pour changer la couleur de fond d'un tableau ou d'une cellule, utilisez l'attribut BGCOLOR associé aux balises <T ABLE> et <TD>

· Pour la couleur du bord, c'est le paramètre BORDERCOLOR de la balise <TABLE> qu'il faut renseigner.

Voici un exemple de table au fond bleu et aux bords rouges. La cellule centrale est blanche :

<TABLE BORDER="2" BGCOLOR="#0000FF" BORDERCOLOR="#FF0000">

<TR><TD>A</TD><TD>B</TD><TD>C</TD></TR>

<TR><TD>D<TD BGCOLOR="#FFFFFF">E</TD><TD>F</TD></TR>

<TR><TD>G</TD><TD>H</TD><TD>I</TD></TR>

</TABLE>

ASTUCE :

Démarquer les lignes Pour bien démarquer les lignes de votre tableau, s'il contient une longue liste par exemple, alternez une ligne sur deux la couleur de fond des cellules.

1.4.6 Toutes les balises et attributs pour créer des tableaux

Balise ou attribut	Description
<TABLE>	Insertion d'un tableau
<Border>	Epaisseur de la bordure du tableau
<Cellspacing>	Espace entre les cellules du tableau
<Cellpading>	Espace entre le texte et le bord des cellules
<Width>	Largeur du tableau
<Height>	Hauteur du tableau
<Bordercolor>	Couleur des bordures du tableau
<Bgcolor>	Couleur du fond du tableau
<TR>	Insertion d'une ligne
<Height>	Hauteur de la ligne
<TD>	Insertion d'une cellule
<Width>	Largeur de la cellule
<Colspan>	Réunion de plusieurs cellules en largeur
<Rowspan>	Réunion de plusieurs cellules en hauteur
<Align>	Alignement horizontal du contenu de la cellule
<Valign>	Alignement vertical du contenu de la cellule
<Bgcolor>	Couleur du fond de la cellule

CAHIER HTLM