Tutoriel du HTML (partie 4)

Les liens hypertext :
Pour passer d'une page à une autre en cliquant sur un texte ou une image. Il faut insérer la ligne :
<A HERF="chemindevotrepage2.html">Voici un lien vers la page 2</A>
ou pour une image :
<A HREF="chemindevotrepage2.html"><IMG SRC="chemindevotreimage.gif" Border=0></A>
Si on veut se rediriger sur un autre site et non sur une page, on doit écrire :
<A HREF="http://france-jeunes.net/">Voici un lien vers le site FRANCE-JEUNES.net</A>
Si on veut se rediriger sur une adresse E-Mail, on doit écrire :
<A HREF="mailto:[email protected]">Voici un lien vers mon adresse E-Mail</A>

On peut ajouter le paramètre "Target" pour définir l'endroit où l'on renvoit le lien :
(<A HREF="http://www.france-jeunes.net/" Target="_blank">www.france-jeunes.net</A>)

Target="_blank" renvoi le lien dans une nouvelle fenêtre.
Target="_self" renvoi le lien dans le même cadre que le lien.
Target="_parent" renvoi le lien dans le cadre de second niveau suivant.
Target="_top" renvoi le lien dans le cadre de premier niveau.

Les ancrages :
Il ne sont pas visibles, ils sont utilisés lorsque l'on veut aller par exemple du bas vers le haut de la page.
Ex :
La ligne : <A Name="haut_de_la_page"></A> est placée en haut de la page.
Laligne : <A HREF="chemindevotrepage.html#haut_de_la_page">Remonter en haut de la page</A>est placée en bas de la page.
Lorsque vous cliquez sur 'Remonter en haut de la page' vous vous retrouvez en haut de la page.

Les tableaux :
On utilise les balises <TABLE></TABLE>
Les balises <caption></caption> sont utilisées pour mettre un titre à votre tableau. On utilise le paramètre "align=top" pour le mettre en haut et "align=bottom" pour le mettre en bas (<caption align=top>). Ces balises sont placées juste après <table> et juste avant <tr>. Elles ne sont pas obligatoires.
Les balises de colonnes sont <TD></TD>
Les balises de lignes sont <TR></TR> (ou <TH></TH> pour avoir le texte en gras et centré)
Pour obtenir :
un tableau 1x1
<TABLE>
<TR>
<TD>
</TD>
</TR>
<TABLE>

un tableau 1x2
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>

un tableau 2x1
<TABLE>
<TR>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>
</TABLE>

un tableau 2x2
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>

Sans aucun paramètre, la couleur de fond est transparente, les bordures sont invisibles, la taille des tableaux est automatique, c'est-à-dire qu'elle s'ajuste en fonction du contenu du tableau.

Pour paramètrer la taille des bordures, il faut rajouter le paramètre :
'Border=' (<TABLE Border=1>)
Ce paramètre peut aller de 0 à 5, si l'on veut une bordure plus épaisse.

Pour paramètrer la couleur de fond :
Pour un tableau entier : <TABLE bgcolor="#000000">
Pour une seule case : <TD bgcolor="#000000">

Pour paramètrer la couleur des bordures : <TABLE bordercolor="#000000"> (reconue que par IEXPLORER)

Pour mettre une image de fond, même principe, on remplace bgcolor="#000000" par Background="chemindevotreimage.gif"

Pour paramètrer la taille :
Pour un tableau entier : <TABLE Width=80% Heigth=20%>
Pour une seule case : <TD Width=20% heigth=80%>

Pour paramétrer l'espacement des cadres d'un tableau : <table cellspacing=1> (paramètre de 0 à 5)
Pour paramétrer le remplissage des cadres d'un tableau : <table cellpadding=1> (paramètre de 0 à 5)

Si vous avez un texte long dans un tableau et que vous ne voulez pas qu'il retourne à la ligne, vous pouvez écrire : <td nowrap>.

Note : On peut remplacer les pourcentage par des nombres de pixels :
Width=100 mais celà posera des problèmes esthétiques pour des résolutions d'écran différantes de la vôtre.

Imaginez que vous êtes en 640/480 et que vous faites un tableau de largeur 400 pixels celà fait 62,5% de votre écran... pas de problème. Mais si quelqu'un qui visite votre site a une résolution d'écran de 1600/1200, celà fait 25% de son écran... un peut plus petit que ce que vous aviez prévu !

Pour avoir un tableau où la première case en haut à gauche s'étend sur deux cases, on donne le paramètre : <TD Collspan=2>.
Vous pouvez faire la même chose avec les colonnes : <TD Rowspan=2>.

Il est possible d'insérer un ou plusieurs tableaux dans un autre.
Les tableaux sont des éléments très intéressants pour la pagination, en particulier pour les paramètres d'alignement, vous pouvez y mettre des images, des listes, ou du texte.
Ex : pour afficher :
Texte à gauche Texte au centre Texte à droite

<TABLE>
<TR>
<TD Align=left>
<P>Texte à gauche</P>
</TD>
<TD Align=center>
<P>Texte au centre</P>
</TD>
<TD>
<P>Texte à droite</P>
</TD>
</TR>
</TABLE>