Pour un codage dans les normes actuelles, la page html ne doit contenir que la structure de la page, sans se soucier de l'aspect. Celui-ci sera intégralement fait grâce aux feuilles de styles CSS, que l'on verra plus tard, et qui permet infiniment plus de variations.

Afin de coder correctement une page HTML, il faut bien garder en mémoire la remarque suivante :

A chaque type d'information, correspond une balise précise.

Voici donc quelques balises élémentaires pour structurer un texte :

• Titres ( de h1 à h6 par ordre décroissant de taille : les balises <h1> forment donc le titre le plus grand ) :

<h1>TITRE</h1>

• Délimitation d'un paragraphe :

<p>Texte du paragraphe</p>

• Balise auto-fermante effectuant des sauts de ligne :

<br />

• Liste ordonnée : une liste numérotée

<ol>
   <li>Texte 1</li>
   <li>Texte 2</li>
   <li>Texte 3</li>
</ol>

Chaque “li” représente une numérotation de la liste.

• Liste non-ordonnée : une liste à puce

<ul>
   <li>Texte 1</li>
   <li>Texte 2</li>
   <li>Texte 3</li>
</ul>

Même remarque.

• Image : pour insérer une image. Le commentaire alternatif est prévu pour les gens n'affichant pas les images dans leurs navigateurs.

<img src="ADRESSE DE L'IMAGE" alt="COMMENTAIRE ALTERNATIF" />

C'est encore une balise auto-fermante.

• Lien : pour insérer un lien vers une autre page

<a href="ADRESSE DU LIEN">TEXTE POUR LE LIEN</a>

• Ancre : permet de créer un lien vers un paragraphe particulier d'une page

<a name="NOM DE L'ANCRE"></a>

Pour utiliser cette ancre, c'est-à-dire pour créer un lien vers l'intérieur d'une page, il suffit de l'appeler à l'aide d'un lien en précisant le nom de l'ancre avec le symbole # :

<a href="#NOM DE L'ANCRE">TEXTE POUR LE LIEN</a>

• Ligne horizontale :

Une autre balise auto-fermante :

<hr />

A propos des adresses de liens

On utilise des adresses soit pour des liens vers des pages, soit pour des images. Il existe à cet effet deux méthodes :

• les adresses relatives : une adresse construite à partir de celle du fichier html,
• les adresses absolues : l'adresse complète.

Exemple sous linux :

Imaginons que la page HTML se trouve dans le dossier /var/www/, et que cette page contienne une image chat.jpg se trouvant dans le même dossier, et une image chien.jpg se trouvant dans le dossier /var/www/images/. Alors :

• l'adresse relative de chat.jpg est simplement "chat.jpg", car l'image se trouve dans le même dossier que la page html,
• l'adresse absolue de chat.jpg est "/var/www/chat.jpg",
• l'adresse relative de chien.jpg est "images/chien.jpg",
• l'adresse absolue de chien.jpg est "/var/www/images/chien.jpg".

Exemple sous windows :

Imaginons que la page HTML se trouve dans le dossier C:\users\www\, et que cette page contienne une image chat.jpg se trouvant dans le même dossier, et une image chien.jpg se trouvant dans le dossier C:\users\www\images\. Alors :

• l'adresse relative de chat.jpg est simplement "chat.jpg", car l'image se trouve dans le même dossier que la page html,
• l'adresse absolue de chat.jpg est "C:\users\www\chat.jpg",
• l'adresse relative de chien.jpg est "images\chien.jpg",
• l'adresse absolue de chien.jpg est "C:\users\www\images\chien.jpg".

Exemple

Le résultat suivant a été obtenu avec le code situé en-dessous :

Un grand titre

Un petit titre

• Premier élément
• Deuxième élément

1. Premier élément numéroté
2. Deuxième élément numéroté

CODE :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<h1>Un grand titre</h1>
 
<h6>Un petit titre</h6>
 
<ul>
   <li>Premier élément</li>
   <li>Deuxième élément</li>
</ul>
 
<br />
 
<hr />
 
<ol>
   <li>Premier élément numéroté</li>
   <li>Deuxième élément numéroté</li>
</ol>
 
<a href="http://www.google.de">Lien vers Google</a>

Le fait de sauter des lignes dans le code ne change rien, seules les balises sont prises en compte par le navigateur.

Remarques

Il y a cependant des remarques très importantes pour éviter les erreurs classsiques :

• chaque navigateur web interprète les balises d'une façon sensiblement différente, donc l'affichage n'est pas forcément le même avec Firefox ou Internet Explorer ( par exemple… )
• la structure de la page créée doit être bien ordonnée et lisible, pour faciliter la résolution d'éventuels problèmes.
• les balises doivent toujours être imbriquées correctement. Par exemple :

<p><a>.........</p></a>

<p><a>.........</a></p>

( ce qui signifie un lien dans un paragraphe ).

• sauf les balises auto-fermantes, toute balise ouverte doit toujours être refermée.