Comment créer des liens hypertextes en HTML
Les liens hypertextes permettent de naviguer d'une page à une autre en cliquant sur un texte ou une image. Pour créer un lien texte, insérez la ligne :
<a href="chemindevotrepage2.html">Voici un lien vers la page 2</a>
Pour créer un lien sur une image :
<a href="chemindevotrepage2.html"><img src="chemindevotreimage.gif" border="0"></a>
Liens vers d'autres sites et adresses e-mail
Si vous souhaitez rediriger vers un autre site (et non une page de votre site), écrivez :
<a href="http://france-jeunes.net/">Voici un lien vers le site FRANCE-JEUNES.net</a>
Pour créer un lien vers une adresse e-mail :
<a href="mailto:[email protected]">Voici un lien vers mon adresse e-mail</a>
Utiliser le paramètre target
On peut ajouter le paramètre target pour définir où s'ouvre le lien :
<a href="http://www.france-jeunes.net/" target="_blank">www.france-jeunes.net</a>
target="_blank"ouvre le lien dans une nouvelle fenêtre.target="_self"ouvre le lien dans le même cadre que le lien.target="_parent"ouvre le lien dans le cadre de second niveau suivant.target="_top"ouvre le lien dans le cadre de premier niveau.
Les ancrages HTML : naviguer dans une page
Les ancrages ne sont pas visibles. Ils permettent, par exemple, de remonter du bas vers le haut d'une page.
Exemple :
La ligne <a name="haut_de_la_page"></a> est placée en haut de la page.
La ligne <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 êtes renvoyé en haut de la page.
Comment créer un tableau en HTML
On utilise les balises <table></table> pour créer un tableau.
Titre et structure d'un tableau
Les balises <caption></caption> permettent d'ajouter un titre à votre tableau. Utilisez le paramètre align="top" pour le placer en haut et align="bottom" pour le placer en bas (<caption align="top">). Ces balises se placent 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 un texte en gras et centré)
Exemples de tableaux simples
Tableau 1×1 :
<table>
<tr>
<td></td>
</tr>
</table>
Tableau 1×2 :
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Tableau 2×1 :
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Tableau 2×2 :
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Sans paramètre, la couleur de fond est transparente, les bordures sont invisibles et la taille des tableaux s'ajuste automatiquement au contenu.
Paramétrer les bordures d'un tableau
Pour définir la taille des bordures, ajoutez le paramètre border (<table border="1">).
Ce paramètre peut aller de 0 à 5 pour une bordure plus épaisse.
Personnaliser les couleurs d'un tableau
Couleur de fond :
- Pour un tableau entier : <table bgcolor="#000000">
- Pour une seule case : <td bgcolor="#000000">
Couleur des bordures : <table bordercolor="#000000"> (reconnue uniquement par Internet Explorer)
Ajouter une image de fond
Même principe que la couleur : remplacez bgcolor="#000000" par background="chemindevotreimage.gif".
Définir la taille d'un tableau
- Pour un tableau entier :
<table width="80%" height="20%"> - Pour une seule case :
<td width="20%" height="80%">
Espacement et remplissage des cellules
cellspacing: définit l'espacement entre les cadres d'un tableau :<table cellspacing="1">(de 0 à 5)cellpadding: définit le remplissage à l'intérieur des cadres :<table cellpadding="1">(de 0 à 5)
Empêcher le retour à la ligne
Si vous avez un texte long dans un tableau et que vous ne voulez pas de retour à la ligne, écrivez : <td nowrap>.
Note : Vous pouvez remplacer les pourcentages par des nombres de pixels (width="100"), mais cela posera des problèmes esthétiques pour des résolutions d'écran différentes de la vôtre.
Imaginez que vous êtes en 640×480 et que vous créez un tableau de largeur 400 pixels : cela fait 62,5 % de votre écran… aucun problème. Mais si un visiteur a une résolution de 1600×1200, cela représente seulement 25 % de son écran… beaucoup plus petit que prévu !
Fusionner les cellules d'un tableau
Pour qu'une case s'étende sur deux colonnes, utilisez le paramètre : <td colspan="2">.
Vous pouvez faire la même chose avec les lignes : <td rowspan="2">.
Imbriquer des tableaux et mise en page
Il est possible d'insérer un ou plusieurs tableaux dans un autre.
Les tableaux sont très utiles pour la mise en page, en particulier pour les paramètres d'alignement. Vous pouvez y insérer des images, des listes ou du texte.
Exemple 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 align="right">
<p>Texte à droite</p>
</td>
</tr>
</table>
