Comme on peut le constater, les trois caractères < > et & sont utilisés pour les tags et le codage des caractères. Si l'on en a besoin dans le texte original, ces caractères seront codés comme suit :

Convention

Les espaces consécutifs sont supprimés par un seul. Pour forcer plusieurs espaces d'affilés, il faut mettre le tag &nbsp;.

Un simple retour chariot ne suffit. Il faut mettre le tag <p> pour indiquer un début de paragraphe et le tag </p> pour en indiquer la fin.

Le tag <br> indique un changement de ligne.

Un commentaire est codé par le tag <!>. Exemple :

Comme l'instruction rem des fichiers batch sous DOS, le tag <!> signifie qu'il ne faut pas interpréter ce qu'il y a à l'intérieur.

Polices de caractères

Le choix de la police se fait par le tag :

Police

La police s'indique par la directive name.

En théorie on peut utiliser n'importe quelle police dont on dispose. Mais dans la pratique, que se passe-t-il ? Prenons une police tartempion <font name="tartempion"> parce que sur son ordinateur on dispose de cette police. On pourra certes avoir conçu et réalisé toute notre mise en page en conséquence ; Mais si c'est une police qui n'est pas très répandue, les Internautes risquent de se retrouver avec un texte en Arial ou en Times parce que, eux, ils ne disposent justement pas de cette police.

Le plus simple est de n'utiliser que les cinq polices suivantes : arial, times, courrier, wingdings et symbol. Étant les polices les plus utilisées dans le monde, on n'est quasiment sûr que le texte s'affichera correctement comme prévu (surtout si l'on souhaite utiliser des symboles comme p, a ou b par exemple). Cela a l'avantage d'éviter les surprises désagréables au sujet du résultat final de la mise en page.

La police globale du texte de l'ensemble d'une page s'indique par le tag :

Une partie de texte peut voir sa taille modifiée si elle est entourée de la balise :

Sept tailles sont disponibles et la valeur par défaut est 3, la plus grosse étant de valeur 6.

La couleur des caractères est indiquée l'attribut color, ainsi

Permet de colorier les caractères (ici en rouge).

Notons que les noms de couleurs peuvent être donnés en toutes lettres (red, blue, green,...) :

Voir le chapitre sur le codage des couleurs.

Attributs des caractères

<b>Texte en gras</b>

<i>Texte en italique</i>

<u>Texte souligné</u>

<s>Texte barré</s>

On peut bien sûr combiné les attributs. Exemples :

^.... Permet d'entrer des exposants.

_.... Permet d'entrer des indices.

Exemple :

Mise en forme des paragraphes

Ces balises agissent sur le paragraphe en cours et sont sans effet pour le reste du document.

Trait

<hr> trace un trait de séparation dans le texte, comme ceci :
 

Cette balise peut être utilisée seule ou paramétrée de la façon suivante :

• <hr size=nombre> donne une épaisseur au trait.
• <hr width=nombre|pourcentage> donne la longueur du trait.
• <hr align=left|right|center> le trait peut être aligné à droite, à gauche ou centré.
• <hr noshade> le trait n'a pas d'ombre.

Signalisation des paragraphes

<p> est une marque de paragraphe.

<p align=center|left|right> permet d'avoir des paragraphes centrés, calés à gauche ou à droite. Dans ce cas, la balise</p>localisera la fin de la portée de la balise.

<br> est une marque de fin de ligne sans saut de paragraphe.

<br clear=all|left|right>

Le couple de balises <div align="left|center|right">...</div> permet de placer un texte à droite, au centre, ou à gauche.

De même, le couple de balises <center>...</center>permet de centrer le texte qu'il encadre.

<pre width=nb>texte</pre width>. Les retours chariots de tout le texte placé entre ces deux tags est respecté. Le paramètre nb indique la longueur maximale des lignes. Il n'y a pas besoin de mettre les tags <p> et </p>. Le navigateur respecte le nombre d'espaces s'il y en a plusieurs regroupés. Un exemple d'utilité en est le source d'un logiciel dans un site sur les langages de programmation.

Liste à puces

Exemple :

• texte 1
• texte 2

Programmation :

On peut bien sûr imbriquer les listes :

• Niveau 1
  • Niveau 2
  • Niveau 2
• Niveau 1

Ceci se programme de la façon suivante :

Numérotation des paragraphes

Le principe est exactement le même que pour les listes à puces, à la différence près que l'on utilise le tag <ol> au lieu du tag <ul>.

Exemple :

Programmation :

La balise peut prendre les arguments suivants :

Outre les numéros 1, 2, 3 etc.. vous pouvez accéder aux numéros A,B,C etc... et pouvez commencer à un autre rang que le premier (start).

Divers

Fond d'écran

Par défaut toute page, comme le papier, a un fond blanc. Mais on peut y mettre en fond une couleur unie ou une image.

Voir le chapitre sur le codage des couleurs.

Il est possible d'attribuer une couleur au fond, par exemple :

Vous pouvez assigner les attributs suivants à la balise body :

pour reproduire le fichier (l'image fond.jpg dans l'exemple) en tant motif d'arrière plan de vos pages. Le nombre d'images à afficher est automatiquement déterminé par le navigateur.

Dans quelques grands logiciels, il existe des bibliothèques d'images (clipart), mais vous pouvez en créer avec n'importe lequel logiciel de dessin reconnaissant les format gif et jpeg.

Pour vous donner des idées, vous pouvez consulter les pages bases de fond de pages Medialink.

Enfin les arguments suivants vous permettent de jouer sur les paramètres de couleur de texte et de fond d'écran :

Les couleurs

Le codage utilisé est rouge, vert, bleu avec 256 valeurs pour chaque composante.

Les couleurs sont à donner en valeurs hexadécimales, le tableau suivant vous donne les premières correspondances :

Ainsi la syntaxe d'un attribut de changement de couleur du fond d'écran en blanc est : bgcolor="#ffffff" ; Entre guillemets, un dièse et les six caractères de la couleur.

Couleurs de base :

Tableau des principales couleurs utilisées

Les liens

Un lien est une passerelle vers un autre site ou un autre endroit de la page. Dans ce dernier cas, il doit y avoir un signet (une marque).

La syntaxe générale est <a href=adresse>texte</a>. C'est le texte (situé entre > et <) qui est affiché dans le document en cours mais renvoyant à l'adresse précisée quand on clique sur le texte.

Source du document :

Commentaire :

Les images

Les formats d'images standard sont GIF et JPG. La syntaxe générale est :

La directive ALT permet d'afficher un commentaire lié à l'image. Exemple :

Cette directive est intéressante dans le cas où dans le navigateur on a désactivé le chargement des images pour une question de rapidité de chargement des sites.

Les compteurs

Un compteur donne le nombre de visiteurs du site.

Syntaxe du tag :

Le paramètre nom_d'utilisateur correspond au nom principal du site. Exemple pour le site de Toto (le nom principal étant toto) :

Les tableaux

Les tableaux sont organisés en cellules disposées en ligne et en colonnes.

Un tableau est encadré par le tag table :

Les principaux tags sont :

• <tr ...></tr> Chaque tag tr détermine une ligne du tableau.
• <td ...></td>Chaque tag td détermine une cellule à l'intérieur d'une ligne. On trouve autant de balises td que de colonnes par ligne.

Programmation :

Les titres

<th ...></th> Ce couple de balises indique les entêtes du tableau, c'est-à-dire la première ligne ou la première colonne. La différence avec une balise TD réside dans l'alignement, qui par défaut est centré et la police de caractères qui est en gras.

Programmation :

<caption> ... </caption>La balise caption peut être utilisée dans un texte délimité par les balises table (mais pas dans ceux délimités par tr ou td), elle sert à donner un titre au tableau et peut être en haut (align=top) ou en bas (align=bottom).

Exemple :

Programmation :

border définit les bordures du tableau. Se met derrière la déclaration table pour indiquer que le tableau sera délimité. L'absence de l'attribut border, équivalent à border=0, n'affichera pas de bord au tableau.

Exemple :

Programmation :

align=top|bottom Indique si la légende est en haut ou en bas. S'applique à la balise caption.

align=center|left|right Dans les commandes tr, th et td permet d'aligner les cellules au centre à gauche ou à droite.

valign=top|middletop|baseline Dans les commandes tr, th et td permet d'aligner le texte verticalement en haut, au centre ou en bas.

colspan Dans les commandes th ou td donne le nombre de cellules à mettre. Par défaut la valeur est 1. Avec une valeur supérieure on peut recouvrir plusieurs colonnes.

Exemple :

Programmation :

affichera le tableau suivant :

rowspan Dans les commandes th ou td donne le nombre de lignes à mettre. Par défaut la valeur est 1. Avec une valeur supérieure on peut recouvrir plusieurs lignes.

border=valeur La valeur border est utilisable avec la commande table et permet de définir l'épaisseur du trait extérieur du tableau.

cellspacing=valeur La valeur cellspacing est utilisable avec la commande table et définit l'espacement inter cellule. La valeur par défaut est 2.

cellpadding=valeur La valeur cellpading est utilisable avec la commande table et définit la distance entre le bord de la cellule et son contenu.

width=pourcentage Cet attribut de la commande table est utilisé pour donner la largeur du tableau en pourcentage de la largeur du document. Le champ pourcentage devra être de la forme "nb%". À l'intérieur d'une cellule, <td width=33%> indique la largeur en pourcentage par rapport à la largeur totale du tableau ; dans notre exemple <td width=33%> indique que la largeur de la cellule équivaudra à un tiers par rapport à la largeur du tableau.

Les formulaires

Un formulaire, comme son nom l'indique, permet à l'utilisateur de remplir un questionnaire qui sera renvoyé (via e-mail par exemple) à la personne chargé de récolter les résultats.

La syntaxe générale est : <form action="url"> ... </form>.

Le paramètre action indique une adresse de site sur lequel sera renvoyé l'utilisateur à l'issue du formulaire.

Le paramètre method (comme nous allons en voir un exemple) est la