Une page en html
Les liens hypertextes
1. Attributs de <a>
La
balise <a> permet d'établir un lien hypertexte (l'essence même du
Web), à l'intérieur même de votre document vers un autre document, ou
encore vers l'extérieur (vers un autre site Web). Ses attributs
principaux sont :
- href : Permet d'indiquer la source du document (relative ou absolue)
- target : Permet de définir la source d'un cadre comme document (dans la cas d'une frame)
- style : Permet de spécifier une feuille de style
- title : Permet de spécifier une description du lien (identique à l'attribut ALT pour une image et uniquement avec Internet Explorer)
2. Liens internes (même page)
Exemple :
<a href="page.html">Page</a>
Les
liens internes permettent de se déplacer à l'intérieur d'un fichier
HTML, sans que le visiteur soit obligé de faire "scroller" la fenêtre.
Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre.
Pour cela deux étapes sont nécessaires : Définir la cible d'un lien
(l'ancre) et associer ce même lien à cette ancre.
3. Définir la cible d'un lien (l'ancre)
Exemple :
<a name="top"></a>
Il
n'est pas nécessaire, dans ce cas précis, de mettre un texte ou une
image, entre les balises d'ouverture et de fermeture (le nom ne doit
pas contenir ni d'espaces, ni d'accents, ni de caractères spéciaux).
4. Associer un lien à une ancre
Exemple :
<a href="#top">top</a>
5. Liens internes (pages différentes)
a ) Lien vers une page située sans le même répertoire
Exemple :
<a href="nom.htm">Cliquez ici</a>
b ) Lien dans un répertoire différent
Exemple :
<a href="sujet/nom.htm">Cliquez ici</a>
c ) Lien dans un même répertoire et vers une ancre d'une autre page
Exemple :
<a href="nom.htm#top">Cliquez ici</a>
d ) Lien dans un répertoire différent et vers une ancre d'une autre page
Exemple :
<a href="sujet/nom.htm#top">Cliquez ici</a>
6. Liens externes
Les
liens externes commencent comme les autres liens, c'est à dire avec la
balise <a href="...."> Par contre suivant le protocole, le reste
de la syntaxe varie.
a ) Lien externe vers un site http
Exemple :
<a href="http://www.allhtml.com">Découvrez ALL HTML</a>
b ) Lien externe vers un serveur FTP
Exemple :
<a href="ftp://ftp.allhtml.com">FTP ALL HTML</a>
c ) Lien
externe vers un serveur de news (Attention pour que ce lien soit valide
il faut que le visiteur soit abonné à ce serveur de news)
Exemple :
<a href="news:news.site">Serveur de news</a>
Note : Avec un lien externe vous pouvez également proposer un fichier (.exe ou .zip) en téléchargement
Exemple :
<a href="util.exe">Cliquez ici pour télécharger le fichier</a>
7. Lien e-mail
Vous
pouvez créer un lien e-mail pour que la messagerie paramètrée par
défaut du visiteur se lance automatiquement. Attention tout de même :
ce lien ne marche pas avec les premières versions de Netscape et
d'I.Explorer. Il possède plusieurs attributs dont : ?subject= pour
définir un sujet (ou objet) automatiquement, ce qui est très pratique
pour trier votre courrier par le biais de votre logiciel classique.
a ) Lien e-mail sans sujet
Exemple :
<a href="mailto:nom@provider.com">nom@provider.com</a>
b ) Lien e-mail avec sujet (ici "renseignement")
Exemple :
<a href="mailto:nom@provider.com?subject=renseignement">nom@provider.com</a>
c ) Lien e-mail avec sujet, et texte dans le corps du message
Exemple :
<a href="mailto:nom@provider.com?subject=renseignement&body=Votre message">nom@provider.com</a>
8. Récapitulatif
Note : La balise de fermeture<a> et </a> sont bien entendu obligatoire.
Lien interne départ (même page) |
<a href="#top"> votre texte </a> |
Lien interne arrivée (même page) |
<a name="top"> votre texte </a> |
Lien interne (page différente) |
<a href="index2.htm">votre texte </a> |
Lien externe |
<a href="http:/conseilscreation.free.fr">votre texte </a> |
Lien e-mail |
<a href="mailto:webmaster@site.fr">votre texte </a> |
Lien vers news |
<a href="news:news.multimania.com">votre texte </a> |
Lien vers serveur ftp |
<a href="ftp://ftp.multimania.com">votre texte </a> |
Mise page
Gras :
< strong> votre texte </strong>
Italic :
<em> votre texte </em>
Tableaux
1. Présentation des tableaux
La balise <table> permet d'insérer un tableau et c'est l'une des balises les plus utilisées (elle est devenue officielle avec la version 3.2 du HTML). En effet, les tableaux permettent une meilleure présentation des informations, nombreux sont les sites qui utilisent les tableaux pour obtenir une mise en page de type "journal".
2. Création des tableaux
La création des tableaux se passe autour de 4 balises :
- <table> : Définit au navigateur la création d'un tableau
- <th> : Définit l'en-tête de chaque colonne
- <tr> : Définit une ligne
- <td> : Définit une cellule
A noter que la balise <caption> qui affiche le titre du tableau possède 2 attributs :
- top : Titre placé au-dessus du tableau (par défaut)
- bottom : Titre placé en dessous du tableau
Bien entendu, toutes ces balises doivent êtres fermées pour indiquer la fin du tableau, d'une colonne ou d'une cellule.
Note : Si vous voulez définir une police de caractère pour le tableau, vous êtes obligé d'en définir pour chaque cellule même si elle est identique, exemple ci-dessous.
<td><font face="arial" size=1>Cellule 1</font></td>
Exemple d'un tableau avec son code source :
Cellule 1 |
Cellule 2 |
Cellule 3 |
Cellule 4 |
<table border="1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Une fois votre page fini et transferer sur votre serveur, vous pouvez verifier si vous n'avez pas commis d'erreur dans le code html et si il respecte bien la norme
Validateur W3C
Il est très rare que votre page soit valide dès la première soumission mais ne vous decouragez pas.