Introduction

L'Internet et le Web, quelle différence ?

Internet est un réseau informatique mondiale.

Le World Wide Web, que l'on appelle le plus souvent Web, est un des services disponibles sur Internet. D'autres services disponibles sur Internet sont par exemple la messagerie electronique (email) ou le transfert de fichier (FTP).

Le Web ou World Wide Web, à quoi ça sert ?

Le Web ("la toile" en français) est un système permettant de visualiser et d'échanger des informations à distance. Les informations sont présentées sur des pages Web et reliées les unes aux autres par des liens hypertextes.

Qu'est-ce qu'une page Web ? Qu'est-ce qu'un site Web ?

Une page Web est généralement un fichier texte écrit dans un langage informatique baptisé HTML. Ce fichier peut contenir des images ou d'autres contenus multimédias (audio, vidéo, application).

Un site Web est un ensemble de pages Web reliées les unes aux autres par des liens hypertextes et accessible en ligne à une adresse.

Le langage HTML

HTML est l'accronyme d'Hypertext Markup Language qui peut se traduire ainsi : langage hypertexte à balise.

Le HTML est un langage informatique utilisant des textes et des balises. On peut utiliser un simple éditeur de texte pour créer un fichier HTML (exemple, le Bloc-Note sur Windows).

Pour visionner un fichier en HTML on utilise un navigateur. Un navigateur est un logiciel qui va lire le code HTML et l'interpreter. Chaque balise donne au navigateur des informations sur comment afficher tel ou tel élément.

Il existes plusieurs navigateurs, les plus connus étant Internet Explorer (sur Windows), Firefox (Windows, Mac, Linux) et Safari (Mac et Windows). En théorie, tous ces navigateurs devraient afficher une même page HTML de manière identique. Dans la réalité, des différences subsistent.

Et le XHTML ?

Le XHTML (Extensible Hypertext Markup Language) est une reformulation plus récente et plus rigoureuse du HTML. Seule la syntaxe change, les fonctionnalités sont les mêmes.

Dans ce cours, nous utiliserons la syntaxe du XHTML pour écrire nos pages Web.

Ma première page Web en HTML

A propos des balises

Une balise (tag ou markup en anglais) est un mot clé qui va donner des indications au navigateur sur ce qu'il doit afficher.

• Une balise HTML commence par le caractère « < » (inférieur) et termine par le caractère « > » (supérieur).
• Les caractères qui ne sont pas compris entre les signes « < » et « > » sont donc considérés comme du texte et seront affichés tel quel par le navigateur.
• Il existes des balises ouvrantes et des balises fermantes qui correspondent au début et la fin d'une instruction.
• Les balises de fermeture sont identifques à celles d'ouverture à l'exception de l'ajout d'un caractère « / » (slash) pour signaler la fermeture. Ce caractère se place juste après le signe « < » (inférieur)

Exemple de balise ouvrante :

<nom_de_ma_balise>

Pour fermer cette balise, on utilisera :

</nom_de_ma_balise>

Entre ma balise ouvrante et ma balise fermante, je peux mettre un texte:

<nom_de_ma_balise> Contenu textuel ici ! </nom_de_ma_balise>

Ou une autre balise pouvant contenir elle aussi un texte ou une autre balise....

<nom_de_ma_balise>
   <autre_balise>Mon text</autre_balise>
</nom_de_ma_balise>

Ou plusieurs balises....

<nom_de_ma_balise>
   <autre_balise>Mon text</autre_balise>
   <nouvelle_balise></nouvelle_balise>
</nom_de_ma_balise>

Ou encore plusieurs balises et textes....

<nom_de_ma_balise>
   Un texte ici
   <autre_balise>Un autre texte ici</autre_balise>
   <nouvelle_balise>Un texte ici</nouvelle_balise>
   ...
</nom_de_ma_balise>

Une balise doit être considéré comme une boite contenant une ou plusieurs autres boites, contenant elles-mêmes d'autres boites, etc....

Une balise ne peut-être ouverte et fermée dans 2 balises séparées. En effet une boite ne peut-être rangée à cheval dans 2 boites situées côte à côte !

Par conséquent le code suivant est incorrect :

<nom_de_ma_balise> <autre_balise> </nom_de_ma_balise> </autre_balise>

Structure d'un fichier HTML

Un fichier HTML (synonyme : un document HTML) commence par l'ouverture d'une balise <html> et se termine par la balise fermante </html>

Tous les fichiers HTML sont composés d'une entête (balise "head") et d'un corps (balise "body"). L'entête contient des informations sur la page. Le corps contient le contenu de la page.

Exemple :

<html>
   <head>
   
   </head>
   <body>
      Texte de la page ici.
   </body>
</html>

Une balise élémentaire pour l'entête

Un exemple d'information à placer entre les balises head est le titre de la page.
Ceci est rendu possible grace à la balise title qui s'utilise ainsi :

<html>
   <head>
      <title>Titre de la page</title>
   </head>
   <body>
      Texte de la page ici.
   </body>
</html>

Notez bien que le titre ne s'affiche pas dans la page (seul ce qui est dans le body peut s'y afficher) mais dans la barre située en haut du navigateur.

HTML et XHTML quelle différence ?

Du HTML au XHTML

Le HTML est un langage qui évolue. Plusieurs versions se sont succédées : HTML 1, HTML 2, HTML 3 puis HTML 4.

Le XHTML 1 (Extensible Hypertext Markup Language) est apparu peu après le HTML 4.
Il s'agit en fait d'une reformulation plus rigoureuse du HTML. Seule la syntaxe change, les fonctionnalités sont les mêmes.

Le choix est fait dans ce cours d'utiliser le XHTML pour la création de pages Web.
Ceci pour les raisons suivantes :

• C'est la version la plus récente et celle qui a le plus d'avenir.
• Si sa syntaxe est plus précise, elle est également plus logique, et donc plus facile à comprendre.
• Notons que les différences de syntaxe entre HTML et XHTML sont minimes et qu'il est facile de passer de l'un à l'autre.

La balise «doctype» ou comment préciser au navigateur
quelle syntaxe est utilisée

Pour préciser au navigateur (Internet Explorer par exemple) quelle langage est utilisé dans notre page Web, nous allons commencer toutes nos pages par une balise un peu étrange baptisée «doctype» (comme "type de document"). Elle précise la syntaxe (HTML ou XHTML) et le numéro de version utilisée pour l'écriture de notre page.

Exemple pour un document XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Exemple pour un document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

NB : Il ne s'agit pas d'apprendre ces lignes par coeur mais de comprendre pourquoi elles sont là !

Notons enfin qu'en XHTML, il faudra également préciser dans la balise <html> l'indication suivante : xmlns="http://www.w3.org/1999/xhtml". En fait, il s'agit de préciser où sont définies les règles de nommage des balises (xmlns est l'accronyme de XML Name Space, soit "espace de nom XML").

En résumé, la structure exacte d'une page Web XHTML sera toujours la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Titre de la page</title>
   </head>
   <body>
      Texte de la page ici.
   </body>
</html>

Tandis que la structure exacte d'une page Web HTML sera toujours la suivante :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Titre de la page</title>
   </head>
   <body>
      Texte de la page ici.
   </body>
</html>

Quelques balises pour débuter

Balises élémentaires de mise en page

Notez que la syntaxe présentées ici est la syntaxe XHTML.

Style du texte

Exemple, si vous saisissez ceci dans votre editeur de texte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Titre de la page</title>
   </head>
   <body>
      <p>Essai de mise en forme HTML avec des paragraphes.</p>
      <p>Je peux mettre des <strong>mots en gras</strong> ou <u>les souligner</u> ou les mettre <em>en italique</em>.
      Je peux imbriquer des balises pour mettre des mots à la fois <strong><em>en gras et en italique</em></strong>.</p>
      <p>
      Je peux sauter des lignes dans un paragraphe comme ici :
         <br />- 1ere ligne
         <br />- 2e ligne
      </p>
      <p>
      Si je n'utilise pas de la balise "br", les sauts de ligne que je mets dans l'editeur de texte ne seront pas visibles dans le navigateur. Exemple :
         - 1ere ligne
         - 2e ligne
      </p>
      
   </body>
</html>

... vous aurez le résultat suivant dans votre navigateur Web :

Plus de possibiliés avec les attributs

Des indications complémentaires sur les balises

Un attribut permet de donner des précisions sur un balise.

Si les balises ou tags disent au navigateur quelle action effectuer, les attributs lui disent comment l'effectuer.

Une balise peut avoir un ou plusieurs attributs.

Un attribut se compose le plus souvent d'un mot-clé auquel on donne une valeur. Pour cela on utilise le caractère « = » et on met la valeur entre 2 guillemets (« " »).

Exemple :

<ma_balise nom_de_l_attribut="valeur_de_l_attribut"> contenu </ma_balise>

Un exemple concret avec <hr />

La balise hr (qui trace une ligne horizontale de séparation) a plusieurs attributs. Avec l'attribut size, on peut préciser la taille de la ligne.

Exemple :

<hr size="8" />

Ce qui donne dans le navigateur, un gros trait magnifique :

Un code propre et lisible

Constat de départ

Les navigateurs ne prennent pas en compte les sauts de ligne et les multiples espace que l'on met dans notre code HTML.

Considérons les 2 extraits de code HTML suivant :

<p>         Ma phrase         avec des   espaces
et des sauts
      de ligne
</p>

<p>Ma phrase avec des espaces et des sauts de ligne</p>

Ces deux exemples donneront le même résultat dans votre navigateur, c'est à dire :

Nous sommes donc libres de mettre en forme notre code HTML comme bon nous semble !

Indenter son code

En plaçant judicieusement des sauts de lignes et des tabulations dans notre code source, nous allons veiller à mettre en évidence les balises ouvrantes et les balises fermantes qui leur correspondent. On dit alors que l'on indente son code.

L'identation permet de relire plus facilement son code, la présentation mettant en évidence les incohérences.

Par exemple, le code suivant contient une erreur et il parait difficile de la détecter :

<html>
<head>      <title>Mon titre         </title>
   <body>   Mon texte ici.</body></html>

Une fois indenté, il est plus facile de voir qu'il manque la fermeture de la balise head :

<html>
   <head>
      <title>Mon titre</title>
   <body>
      Mon texte ici.
   </body>
</html>

Les commentaires

Il est conseillé de mettre des commentaires dans son code HTML afin de faciliter sa compréhension. Ceci sera très appréciable lorsque l'on aura besoin de modifier sa page Web plusieurs mois après son élaboration.

Un commentaire sera donc un texte libre, qui sera lisible dans le code source, mais pas affiché par le navigateur. Un commentaire débute pars les caractères <!-- et se termine par -->

Exemple de commentaires :

<!-- Début du menu -->
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="presentation.html">Presentation</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Fin du menu -->

Dans votre navigateur vous ne verrez que la liste ul :

S'assurer de la validité de son code

Les règles (ou normes) du HTML et du XHTML sont rédigées par le Worlde Wide Web Consortium plus souvent appelé W3C.

Le W3C propose un outil pour vérifier la validité de son code. Il listera vos erreurs jusqu'à temps que vous ayez une page valide : http://validator.w3.org/

Un code valide est le meilleur moyen d'augmenter ses chances d'avoir une page visible correctement sur l'ensemble des navigateurs.

Mettre en forme du texte

Les titres

Il est possible de mettre des titres en avant grâce aux balises <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Chacune de ces balises correspond à un niveau de titre, allant du titre principal <h1> aux titres secondaires <h2> et en descendant jusqu'au titres les moins importants <h6> (rarement utilisé, le plus souvent 4 niveaux de titres suffisent largement pour une même page).

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Vous aurez dans votre navigateur :

Choisir l'alignement du texte

Les balises p, h1, h2(...) supportent un attribut "align" qui permet de modifier l'alignement horizontal du texte. Il peut prendre les valeurs suivantes :

• left : aligné à gauche (par défaut),
• right : aligné à droite,
• center : centré,
• justify : justifié (aligné à droite et à gauche).

Il est à noter que le texte justifié est assez peu utilisé sur le web car son implémentation n'est pas très poussée (les navigateurs ne gèrent pas les césures de texte !).

Différents exemples :

<h2>Titre aligné à gauche</h2>
<h3 align="right">Titre aligné à droite</h3>
<p align="center">Paragraphe centré</p>

Ce qui donne dans le navigateur, le résultat suivant :

Modifier la police de caractère

Il est possible de modifier la police de caractère d'un texte avec la balise <font>.

Utiliser <font> Mon texte </font> seul n'aura aucun effet : ce sont les attributs de cette balise qui sont intéressants :

• l'attribut size permet de préciser la taille du texte allant de "1", le plus petit à "7" le plus grand.
• l'attribut face permet de préciser la police utilisée, par exemple "verdana", "times", etc..
• l'attribut color permet de préciser la couleur du texte, par exemple "red".
  Cliquez-ici pour en savoir plus sur les couleurs en HTML.

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

<p>Mon texte <font size="3" face="georgia" color="red">en plus gros, en rouge et en georgia ici</font>.</p>

Vous aurez dans votre navigateur :

Autres balises de mise en forme

Il existe d'autres balises de mise en forme en voici 3 exemples qui peuvent s'avérer utiles.

• La balise <blockquote> généralement utilisée pour des citations. Elle se comporte comme un paragraphe avec un décalage horizontal en plus.
• La balise <sup> pour mettre un mot en exposant
• La balise <sub> pour mettre un mot en indice

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

<p>Les balises indices et exposants sont souvent utilisées avec des nombres : 9³ ou 9₃.</p>
<blockquote>Notez la différence d'espacements entre un blockquote et un paragraphe.</blockquote>
<p>Autre paragraphe.</p>

Vous aurez dans votre navigateur :

Structures de mise en page

Les paragraphes

La balise <p> permet de créer un paragraphe. C'est la structure la plus simple.
Par défaut, elle se traduit par un bloc de texte avec un espace avant et après.

Exemple de paragraphe :

<p>
   Mon texte ici
</p>

Ce qui donne dans le navigateur :

Les listes

Il est possible de faire des listes ordonnées ( 1, 2, 3 ou a, b, c) ou non ordonnées (avec des puces rondes ou carrés).

Pour cela nous allons utiliser une balise <ol> ("Ordered List") ou <ul> ("Unordered List") dans laquelle nous placerons autant de balises <li> (accronyme de "list item") que nous avons d'élements dans notre liste.

Exemple de liste ordonnée :

<ol>
   <li>Mettre sa ceinture</li>
   <li>Vérifier les rétroviseurs</li>
   <li>Mettre le contact</li>
</ol>

Ce qui donne dans le navigateur :

Exemple de liste non-ordonnée :

<ul>
   <li>Faire la lessive</li>
   <li>Finir ma page web</li>
   <li>Ranger l'armoire</li>
</ul>

Ce qui donne dans le navigateur :

Il est possible de choisir le type de puce que nous souhaitons grâce à l'attribut type.

Pour une liste ordonnée (ol), l'attribut type peut avoir les valeurs suivantes :

• type="1" => pour une suite numérique
• type="a" => pour une suite alphabétique
• type="A" => pour une suite alphabétique en majuscule
• type="I" => pour une suite numérique en chiffres romains

Pour une liste non-ordonnée (ul), l'attribut type peut avoir les valeurs suivantes :

• type="disc" => pour un rond plein
• type="circle" => pour un rond vide
• type="square" => pour un carré

<ol type="A">
   <li>Mettre sa ceinture</li>
   <li>Vérifier les rétroviseurs</li>
   <li>Mettre le contact</li>
</ol>
<ul type="square">
   <li>Faire la lessive</li>
   <li>Finir ma page web</li>
   <li>Ranger l'armoire</li>
</ul>

Ce qui donne dans le navigateur :

Les tableaux html

Présentation des balises

La balise <table> permet de créer un tableau. Il faudra utiliser la balise <tr> pour créer une nouvelle ligne dans le tableau. Entre les balises <tr> et </tr> nous mettrons nos cellules grâce aux balises <td>. Entre les balises <td> et </td> nous mettrons le contenu de la case (texte, image...).

La balise <td> peut être remplacée par <th> si la case est un intitulé de colonne.

Exemple de tableau :

<table>
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Les balises <th> (intitulés de colonne) peuvent être placée n'importe où dans le tableau.

Autre exemple de tableau :

<table>
   <tr>
      <th>Prénom</th>
      <td>Mike</td>
      <td>Mister</td>
   </tr>
   <tr>
      <th>Nom</th>
      <td>Stuntman</td>
      <td>Pink</td>
   </tr>
   <tr>
      <th>Profession</th>
      <td>Cascadeur</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Les attributs de la balise <table>

On peut afficher les bordures des cellules avec l'attribut border placé dans la balise table.

Exemple :

<table border="1">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

On peut modifier l'espacement entre le texte et les bords des cellules avec l'attribut cellpadding placé dans la balise table.

Exemple :

<table border="1" cellpadding="15">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur un tableau plus aéré :

On peut aussi modifier l'espacement deux cellules avec l'attribut cellspacing placé dans la balise table.

Exemple :

<table border="1" cellpadding="15" cellspacing="10">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

On peut enfin spécifiée la largeur du tableau avec l'attribut width placé dans la balise table. Cette valeur sera indiquée en pixel (width="400") ou en pourcentage (width="100%").

Exemple :

<table border="1" cellpadding="10" cellspacing="1" width="100%">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Des attributs pour les cellules (<td> et <th>)

Pour chaque cellule, on peut spécifier une largeur grace à l'attribut width placé dans la balise td ou th. Notez bien que :

• La largeur peut être spécifiée en pixel (width="100") ou en pourcentage (width="33%")
• Attention à la cohérence des largeurs données à chaque cellule. Si on utilise des pourcentages, le total doit être égal à 100% ! Si on utilise des pixels, le total ne doit pas dépasser la largeur du tableau.
• Il n'est pas utile de préciser la largeur de chaque cellule. On donne généralement une largeur à la première cellule d'une colonne et celle ci sera valable pour toute la colonne.

Exemple :

<table border="1" cellpadding="10" cellspacing="1" width="100%">
   <tr>
      <th width="20%">Prénom</th>
      <th width="20%">Nom</th>
      <th width="60%">Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Pour chaque cellule, on peut aussi préciser l'alignement horizontal du texte grace à l'attribut align qui peut prendre les valeurs suivantes :

• left (texte aligné à gauche)
• center (texte aligné au centre)
• right (texte aligné à droite)
• justify (texte justifié, peut utilisé sur le web car pas bien rendu)

Pour chaque cellule, on peut enfin préciser l'alignement vertical du texte grace à l'attribut valign (vertical align) qui peut prendre les valeurs suivantes :

• top (texte aligné en haut)
• middle (texte aligné au milieu)
• bottom (texte aligné en bas)

Exemple :

<table border="1" cellpadding="10" cellspacing="1" width="100%">
   <tr>
      <th width="20%" align="center">Prénom</th>
      <th width="20%" align="center">Nom</th>
      <th width="60%" align="left">Profession</th>
   </tr>
   <tr>
      <td align="center" valign="top">Mike</td>
      <td align="center" valign="top">Stuntman</td>
      <td align="left" valign="top">
         Cascadeur<br />Acteur<br />Pilote.
      </td>
   </tr>
   <tr>
      <td align="center" valign="top">Mister</td>
      <td align="center" valign="top">Pink</td>
      <td align="left" valign="top">Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

En html, les tableaux sont très largement utilisés pour des mises en pages complexes.

Une utilisation détournée mais courante des tableaux :
On peut se servir de tableaux pour mettre en page des textes ou des images sur plusieurs colonnes. On précisera alors border="0" pour que le tableau ne soit pas visible.

Exemple :

<table border="0" cellpadding="5" cellspacing="0" width="100%">
   <tr>
      <td valign="top"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
         <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p></td>
      <td align="right" valign="top"><img src="i/cours/enfant-regarde-la-rive.jpg" width="200" height="253" alt="enfant à Ngor (Sénégal)" /></td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Les couleurs

Une liste restreinte de couleurs

Le HTML et le XHTML proposent un petit nombre de couleurs prédéfinies dont les principales sont :

Exemple d'utilisation, si vous saisissez ceci entre les balises <body> et </body> :

<p><font color="fuchsia">Texte en rose fuchsia.</font></p>

Vous aurez dans votre navigateur :

Cette liste de couleurs étant très reduité, il existe un système permettant de choisir la nuance de couleurs que l'on souhaite.

Deux modèles de couleurs, un seul pour le Web

Le modèle de couleur CMJ
Si vous avez fait de la peinture, vous savez certainement que l'on peut obtenir n'importe quelle couleur en mélangeant les 3 couleurs primaires que sont le bleu (cyan), le rouge (magenta) et le jaune. En imprimerie, on y ajoute le Noir (pour facilité l'obtention de gris) et on parle de couleurs CMJN (Cyan Magenta Jaune Noir) ou CMYK (Cyan Magenta, Yellow, Black) en anglais.

Le modèle de couleur RVB
Sur un écran d'ordinateur ou en vidéo, on utilise également 3 couleurs primaires mais elles diffèrent légèrement. On utilise en fait le Rouge, le Vert et le Bleu pour obtenir toutes les nuances que l'on souhaite. On parle de couleurs RVB (Rouge Vert Bleu) ou RGB (Red Green Blue) en anglais.

Dans les pages Web, nous utilisons le modèle de couleur RVB (RGB en anglais).

Les codes de couleurs RGB pour le Web

Un code couleur RGB sera donc composé de 3 nombres :

• le premier correspond à la valeur de Rouge
• le deuxième correspond à la valeur de Vert
• le dernier correspond à la valeur de Bleu
• Chaque nombre varie de 0 à 255 soit 256 intensités différentes par couleur.

Par exemple, si le rouge est à 255, que le vert est à 0 et le bleu à 0 également, nous obtiendrons un rouge pure.

Cependant, dans notre code HTML ou XHTML, nous n'utilisons pas directement ces valeurs décimales, mais leurs équivalent héxadécimales !

• Nous avons l'habitude de compter en décimal : avec dix chiffres allant de 0 à 9. On dit également que l'on compte en base 10
• En héxadécimal, on compte avec 16 chiffres, allant de 0 à F. On dit alors que l'on compte en base 16.
• Ce format est très utilisé en informatique car il est plus facile à convertir pour les ordinateurs (qui eux compte en binaire, c'est à dire en base 2).

En décimal, quand on arrive au dernier chiffre disponible (9), on ajoute une dizaine et on remet l'unité à 0 (10).
En héxadécimal, c'est identique. Quand on arrive au dernier chiffre disponible (F), on décale d'un cran et remet l'unité à 0 (10). Ainsi, 16 en décimal vaut 10 en héxadécimal. Nous pouvons donc continuer à compter....

Et ce jusque 255 pour nos valeurs de couleurs :

Les valeurs de chaque composant RVB en HTML vont donc de 00 à FF.

Un code héxadécimal d'une couleur pourra ainsi s'écrire avec 6 chiffres : les 2 premiers donnent la valeur de rouge, les 2 suivants la valeur de vert et les 2 derniers le bleu.

Ainsi, le rouge pur sera codé ainsi : #FF0000. Le caractère # sert à indiquer au navigateur que l'on donne un code et pas le nom d'une couleur.

Une petite application pour mieux comprendre

Déplacez les curseurs rouge, vert et bleu pour obtenir la couleur de votre souhait. Le code de couleur correspondant à votre choix s'affiche au dessus de la tête du mouton (oui, il s'agit d'un mouton).

Télécharger cette application pour Windows | Télécharger cette application pour Mac

En résumé

Dans nos page web, on peut préciser une couleur de manière très précise avec un code héxadécimal qui se présente ainsi :
#RRVVBB
- # permet d'indiquer que l'on donne un code de couleur
- RR est un nombre allant de 00 à FF donnant la valeur de rouge
- VV est un nombre allant de 00 à FF donnant la valeur de vert
- BB est un nombre allant de 00 à FF donnant la valeur de bleu

Si vous ne comprenez pas le pourquoi du comment, ni le calcul en héxadécimal, sachez que vous pourrez obtenir facilement le code d'une couleur HTML en choisissant dans une palette dans la plupart des logiciels d'image (photoshop, flash) ou avec Dreamweaver. Vous pouvez également utiliser la petite application ci-dessus.

Exemple d'utilisation de codes couleurs :

<font color="#000000">Texte noir.</font> <font color="#ffffff">Texte blanc.</font> <font color="#ff0000">Texte rouge.</font> <font color="#660000">Texte rouge sombre.</font> <font color="#0000ff">Texte bleu.</font> <font color="#00cccc">Texte turquoise.</font> <font color="#ffff00">Texte jaune.</font> <font color="#999999">Texte gris...</font>

Dans votre navigateur vous verrez :

Les liens hypertextes

La balise «a»

Une des principales originalité du Web, est la possibilité de passer d'une page à une autre, ou d'un site à un autre, en cliquant sur des liens.

Ceci est rendu possible en HTML par l'utilisation de la balise «a» et de son attribut href.

Exemple d'utilisation:

<a href="page2.html">Cliquez ici pour afficher une autre page</a>

Dans votre navigateur vous verrez :

On place donc entre les balises <a> et </a> le texte qui sera cliquable.

On précise le chemin de la page à accéder avec l'attribut href (comme hypertexte référence). Notez bien que :

• le nom de la page dans l'attribut href doit être en tout point identique au nom du fichier HTML appelé. N'oubliez pas de préciser l'extension (.html) et de respecter la casse des caractères (majuscules / minuscules).
• le nom du fichier ne doit comprendre aucun caractère spéciaux autre que les tirets (pas d'espace, pas d'accents, etc...). Evitez également les minuscules pour s'éviter des erreurs. Par exemple, si votre page s'appelle, "historique de l'année.html", renommer la en "historique-annee.html".
• si la page n'est pas situé dans le même réperoire que la page qui l'appelle, il faut préciser le chemin pour y accéder. Par exemple, si la est dans un sous-dossier "pages", nous l'appellerons ainsi : src="pages/page2.html".

En résumé

Les images

Préparer ses images

Il est important de garder à l'esprit que les pages que nous mettons sur Internet sont vues à distance par nos visiteurs. Leurs navigateurs téléchargent un à un tous les fichiers composants notre page. Des fichiers images trop volumineux ralentissent les temps de chargement de notre site Web ce qui peut décourager les visiteurs.

Par conséquent, avant de mettre une photo en ligne, nous veillerons à l'enregistrer dans l'un des 3 formats d'optimisations suivants :

• Jpeg (fichiers en .jpg) généralement utilisé pour des photos ou des images avec des dégradés de couleurs
• Gif (fichiers en .gif) généralement utilisé pour des illustrations avec des applats de couleurs.
• Png (fichiers en .png) généralement utilisé pour des images avec des ombres sur fond transparent

Ces formats sont des formats d'optimisation permettent de réduire le poid des fichiers images. Par conséquent, ce sont les seuls qui sont acceptés par les navigateurs.

La plupart des logiciels de retouche d'image proposent une option de type "enregistrer pour le web" qui vous permettra de choisir le meilleur format de compression pour une image donnée. Vous pouvez également réduire les dimensions d'une image pour alléger son poids.

Une fois votre image optimisée, il faut la placer dans votre site. Vous pouvez choisir de la mettre dans le même répertoire que votre page Web, ou dans un répertoire de votre choix.

La balise «img»

Nous pouvons ajouter des images grâce à la balise «img». Comme les balises «hr» et «br», elle ne peut avoir aucun contenu. Nous l'écrirons donc :

<img />

... plutôt que :

<img></img>

La balise img s'utilise avec les attributs suivants :

• l'attribut src (obligatoire) précise le chemin vers le fichier image à afficher. Si l'image est dans le même répertoire que le fichier HTML qui l'appelle, le nom du fichier du fichier suffira.
• l'attribut alt (obligatoire) permet de préciser un text alternatif qui s'affichera si l'image ne peut s'afficher.
• l'attribut border permet de spécifier la largeure de la bordure de l'image (de 0 à n)
• les attributs width et height permettent de spécifier respectivement la largeure et la hauteure de l'image. Si ces attributs ne sont pas renseignés, le navigateur calculera lui même la taille des images. Cependant, cela peut ralentir l'affichage de la page.

Exemple d'insertion d'une image. Dans cet exemple l'image "sueur.gif" est placée dans un répertoire "cours" lui même placé dans le répertoire "i" :

<img src="i/cours/sueur.gif" width="270" height="295" alt="Illustration des problèmes de suddation" border="0" />

Dans votre navigateur vous verrez une bien jolie image (© Bastien Devaux) :

Attention au respect du chemin de l'image

Précision sur le chemin de l'image (attributs src) :

• le nom de l'image dans l'attribut src doit être en tout point identique au nom du fichier image. N'oubliez pas de préciser l'extension (ex: .jpg) et de respecter la casse des caractères (majuscules / minuscules).
• le nom de l'image ne doit comprendre aucun caractère spéciaux autre que les tirets (pas d'espace, pas d'accents, etc...). Evitez également les minuscules pour s'éviter des erreurs. Si votre image s'appelle, "mon Châlet montagne.jpg", renommer la "mon-chalet-montagne.jpg".
• si l'image n'est pas situé dans le même réperoire, il faut préciser le chemin pour y accéder. Par exemple, si l'image est dans un dossier "images", nous l'appellerons ainsi : src="images/mon-chalet-montagne.jpg".

Les images map ou images cliquables

Plusieurs zones cliquables sur une image

Nous avons vu dans les leçons précédentes comment faire un lien (<a href="...) et comment insérer une image (<img src="...). Nous sommes donc capable de faire un lien sur une image en imbriquant ses 2 balises.

Cela est en effet réalisable avec le code suivant :

<a href="page2.html"><img src="i/cours/sueur.gif" width="151" height="164" alt="Illustration" border="0" /></a>

Ce qui donne dans le navigateur :

En HTML ou XHTML, on peut également faire plusieurs zones de liens sur une seule image. On va ainsi dessiner des zones et attribuer un lien à chaqu'une d'entre elle.
C'est ce que l'on appelle une "image map" ou image cliquable en français.

Comment réaliser une "image map"

Nous allons d'abord préciser dans notre balise image que l'on utilise un "map" avec l'attribut usemap en précisant son nom.

Dans notre exemple nous baptiserons notre map «panneaux».
Notez bien l'ajout d'un dièze (#) avant le nom :

<img src="i/cours/panneau.gif" width="374" height="162" alt="Orientation" border="0" usemap="#panneaux" />

L'image affichée est la suivante :

Nous allons ensuite ajouter une balise <map> avec le nom correspondant. C'est ici que nous définirons nos zone cliquables. Cette balise peut-être placée n'importe où dans le corps de la page.

<map name="panneaux">
....
</map>

Enfin nous allons ajouter à notre map autant de balises <area> que nous avons de zones cliquables.

Pour chacune d'elle nous allons préciser les attributs suivants :

• shape, la forme de la zone cliquable qui peut-être :
  - un cercle (shape="circle"),
  - un rectangle (shape="rect"),
  - un polygone (shape="poly")
• coords, une suite de coordonnées dessinant la forme choisie
• href, le lien vers la page que l'on souhaite afficher lors du clique sur la zone
• alt, un text alternatif décrivant la zone cliquable

Je choisis de faire 3 zones cliquables sur mon image (en orange ci-dessous) :

J'aurais donc 3 balises <area> la première étant un rectangle (contact), la 2ème un cercle (FAQ) et la dernière une polygone (accueil).

Pour dessiner le rectangle, je vais donner les positions en x (horizontale) et en y (verticale) du point supérieur gauche, et du point inférieur droit.

J'aurais donc 4 chiffres pour l'attribut coords :

<area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />

Pour dessiner le cercle, je vais donner les positions en x (horizontale) et en y (verticale) de son centre, puis son rayon.

J'aurais donc 3 chiffres pour l'attribut coords :

<area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />

Pour dessiner le ploygone, je vais donner les positions en x (horizontale) et en y (verticale) de tous les points que je souhaite. Il faut au moins 3 points pour dessiner un polygone (un triangle), et nous pouvons en mettre autant que l'on en souhaite.

J'aurais donc de 6 à N chiffres pour l'attribut coords :

<area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" />

Notre exemple complet

Voici un exemple complet avec notre image :

<img src="i/cours/panneau.gif" alt="Orientation" width="374" height="162" border="0" usemap="#panneaux" />
<map name="panneaux" id="panneaux">
   <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
   <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
   <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" />
</map>

Ce qui donne le résultat suivant :

A propos du calcul des coordonnées de nos zones cliquables

Repérer les coordonnées horizontales et verticales de chaque point pour dessiner une forme n'est pas évident. L'utilisation d'un outil adapté tel Adobe Dreamweaver est alors recommandé. Il va nous permettre de dessiner directement sur nos images nos zone grâce à une interface adaptée.

Les formulaires

Permettre au visiteur de saisir des informations

Un formulaire HTML ou XHTML permet de saisir et de transmettre des informations. Un formulaire est déclaré grâce à la balise <form> dont on précisera généralement 3 attributs :

• name, le nom que l'on souhaite donner au formulaire
• action, le chemin vers la page ou les données du formulaire seront envoyées. Généralement, il s'agira d'une page dite "dynamique" (en .php ou .asp par exemple), c'est à dire une page qui peut interagir avec le serveur pour sauvegarder les données dans une base, les envoyer par mail, ou réaliser tout autre traitement.
• method, la méthode d'envoi des données qui est soit "POST", soit "GET" (voir plus bas)

Exemple d'ouverture et fermeture d'un formulaire

<form name="mon-formulaire1" action="page-envoi.html" method="get">
...
</form>

Méthode GET ou POST ?

Un formulaire peut envoyer les informations d'une page à une autre de deux manières différentes :

• En GET, les données du formulaire seront transmises via l'URL de la page. On verra alors des variables s'ajouter à la fin de l'URL dans la barre d'adresse.
• En POST, les données du formulaire seront transmises via l'entête de la page WEB. Les variables seront alors invisibles pour l'utilisateur.

Si j'envoie avec mon formulaire une variable nom qui serait égale à Gandhi sur la page page-envoi.html avec la méthode GET :

http://www.example.com/page-envoi.html?nom=Gandhi

Si j'envoie avec mon formulaire une variable nom qui serait égale à Gandhi sur la page page-envoi.html avec la méthode POST, l'URL n'est pas modifiée :

http://www.example.com/page-envoi.html

Les différents champs de saisie avec <input />

On va ensuite insérer différents types de champs de saisies entre les balises <form> et </form>.

Pour un champs texte simple

Nous allons utiliser la balise <input /> en précisant l'attribut type="text".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché pré-rempli.

Exemple :

Veuillez saisir votre prénom :<br />
<input type="text" name="prenom" value="" />

Ce qui donne dans le navigateur :

Pour un champs de mot de passe

Un champs de mot de passe se comporte comme un champs texte simple à la différence que les caractères qu'on y saisi sont masqués.

Nous allons utiliser la balise <input /> en précisant l'attribut type="password".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché prérempli.

Exemple :

Votre mot de passe :<br />
<input type="password" name="motdepasse" value="blabla" />

Votre mot de passe :

Pour une case à cocher

Nous allons utiliser la balise <input /> en précisant l'attribut type="checkbox".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier la valeur qui sera envoyée si la case est cochée

Exemple :

Quel type de prestation recherchez vous ?<br />
<input type="checkbox" name="interet" value="loc" /> Location de mobilier
<input type="checkbox" name="interet" value="achat" /> Achat de mobilier

Ce qui donne dans le navigateur :

Nous pouvons afficher une case pré-cochée en précisant l'attribut checked="checked" :

<input type="checkbox" name="conditions" value="ok" checked="checked" /> J'accepte les conditions.

Ce qui donne dans le navigateur :

Pour un bouton d'option ou «bouton radio»

Nous allons utiliser la balise <input /> en précisant l'attribut type="radio".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier la valeur qui sera envoyée si l'option est sélectionnée

Les boutons radio se distingue des cases à cocher :

• Visuellement, par leur forme ronde
• Ergonomiquement, par une différence de comportement. Les boutons radios n'autorisent qu'un seul choix là ou les checkbox permettent de cocher plusieurs cases.

Exemple :

Civilité :<br />
<input type="radio" name="civi" value="Mme" /> Madame
<input type="radio" name="civi" value="Mlle" /> Mademoiselle
<input type="radio" name="civi" value="Mr" /> Monsieur

Ce qui donne dans le navigateur :

Nous pouvons afficher un bouton radio pré-coché en précisant l'attribut checked="checked" :

Civilité :<br />
<input type="radio" name="civi2" value="Mme" /> Madame
<input type="radio" name="civi2" value="Mlle" /> Mademoiselle
<input type="radio" name="civi2" value="Mr" checked="checked" /> Monsieur

Ce qui donne dans le navigateur :

Pour un bouton d'envoi

Nous allons utiliser la balise <input /> en précisant l'attribut type="submit".
L'attribut value permet de spécifier le texte qui sera affiché sur le boutton.

Lors du clique sur ce bouton, les données du formulaires seront envoyées à la page précisée par l'attribut action du formulaire.

Exemple :

<input type="submit" value="Envoyer" />

Ce qui donne dans le navigateur :

Pour un bouton d'annulation ou «reset»

Nous allons utiliser la balise <input /> en précisant l'attribut type="reset".
L'attribut value permet de spécifier le texte qui sera affiché sur le boutton.

Lors du clique sur ce bouton, les données saisies par l'utilisateur seront effacées.

Exemple :

<input type="reset" value="Annuler" />

Ce qui donne dans le navigateur :

Pour un bouton simple

Nous allons utiliser la balise <input /> en précisant l'attribut type="button".
L'attribut value permet de spécifier le texte qui sera affiché sur le boutton.

Lors du clique sur ce bouton, aucune action ne sera effectuée. On verra ultérieurement que l'on pourra lui attribuer une action avec une commande javascript.

Exemple :

<input type="button" value="Mon bouton" />

Ce qui donne dans le navigateur :

D'autres champs de saisie

Nous avons vu ci dessus que la plupart de champs de formulaire s'écrivent avec la balise <input />.
Cependant, certains champs de saisie utilisent des balises spécifiques.

Pour un champs texte sur plusieurs lignes ou «zone de texte»

Nous allons utiliser les balises <textarea> et </textarea> .
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut rows permet de préciser le nombre de lignes de la zone de texte. Plus le chiffre sera grand, plus notre textarea sera long.
L'attribut cols permet de préciser le nombre de caractère par ligne de la zone de texte. Plus le chiffre sera grand, plus notre textarea sera large.
Le texte placé entre les balises <textarea> et </textarea> permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché prérempli.

Exemple :

Votre message :<br />
<textarea name="le-message" rows="6" cols="40">Vous pouvez saisir ici un message.</textarea>

Ce qui donne dans le navigateur une zone de texte de 6 lignes de 40 caractères :

Pour un champs de sélection

Les champs select permettent de proposer une liste déroulante de choix.

Nous allons utiliser les balises <select> et </select> .
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.

Exemple :

Vous êtes :<br />
<select name="profil">
...
</select>

Entre ces balises <select> et </select>, nous allons placer autant de couple <option> et </option> que nous avons de choix.

Pour chaque balise <option>, nous précisons le nom de la variable qui sera envoyé avec l'attribut value. Nous précisons également le texte qui sera affiché pour l'utilisateur en le plaçant entre les balises <option> et </option>.

Exemple :

Vous êtes :<br />
<select name="profil">
   <option value="parti">Un particulier</option>
   <option value="profe">Un professionnel</option>
   <option value="insti">Un institutionnel</option>
</select>

Ce qui donne dans le navigateur une champs de sélection avec 3 choix :

Nous pouvons afficher le champs select avec une option pré-sélectionnée selected="selected" :

<select name="profil">
   <option value="parti">Un particulier</option>
   <option value="profe" selected="selected">Un professionnel</option>
   <option value="insti">Un institutionnel</option>
</select>

Ce qui donne dans le navigateur :

Un exemple complet

<form name="mon-formulaire1" action="page-envoi.html" method="get">
<p>
   <input type="radio" name="civi" value="Mme" /> Madame
   <input type="radio" name="civi" value="Mlle" /> Mademoiselle
   <input type="radio" name="civi" value="Mr" /> Monsieur
</p>
<p>
   Votre prénom :<br />
   <input type="text" name="prenom" value="" />
</p>
<p>
   Votre nom :<br />
   <input type="text" name="nom" value="" />
</p>
<p>
   Votre mot de passe :<br />
   <input type="password" name="passe" value="" />
</p>
<p>
   Vous êtes<br />
   <select name="profil">
      <option value="parti">Un particulier</option>
      <option value="profe" selected="selected">Un professionnel</option>
      <option value="insti">Un institutionnel</option>
   </select>
</p>
<p>
   Quel type de prestation recherchez vous ?<br />
   <input type="checkbox" name="interet" value="loc" /> Location de mobilier
   <input type="checkbox" name="interet" value="achat" /> Achat de mobilier
</p>
<p>
   Votre message :<br />
   <textarea name="le-message" rows="6" cols="40">Vous pouvez saisir ici un message.</textarea>
</p>
<p>
   <input type="submit" value="Envoyer" />
   <input type="reset" value="Annuler" />
</p>
</form>

Ce qui donne dans le navigateur :

Les balises "meta" ou métabalises

Des métadonnées placées dans l'entête

Les balises meta vont nous permettre de donner au navigateur des informations sur la page web à afficher. On dit que ce sont des métadonnées (du grec meta "après" et du latin data "informations", soit une donnée servant à définir ou décrire une autre donnée).

Les balises meta seront toujours placée entre les balises <head> et </head>. En effet, nous avons vu précédemment que l'entête d'un document HTML contient des informations sur la page alors que le corps (body) contient tout ce qui doit être affiché.

On distingue 2 types de balises méta :

• Les balises méta "name" qui permette de décrire la page.
• Les balises méta "http-equiv" qui envoie des informations supplémentaires via le protocole HTTP.

Les balises méta "name"

Elles s'utilisent toujours comme ceci :
<meta name="mot clé ici" content="valeur ici" />

Elles nous permettent notamment de préciser :

• L'auteur de la page grâce au mot clé author :

<meta name="author" content="Nom de la personne qui a réalisé la page" />

• Une description de la page grâce au mot clé description :

<meta name="description" content="Brève description de la page ici" />

• Une liste de mots clés pour qualifier la page grâce au mot clé keywords. Ces mots clés seront séparés par des virgules :

<meta name="keywords" content="mot clé 1, autre mot clé, blabla" />

• Le logiciel utilisé pour réaliser la page grâce au mot clé generator :

<meta name="generator" content="Adobe Dreamweaver" />

Les balises méta "http-equiv"

Elles s'utilisent comme ceci :
<meta http-equiv="mot clé ici" content="valeur ici" />

Elles nous permettent :

• de préciser l'encodage utilisé pour la page grâce au mot clé Content-Type. Vous pouvez en savoir plus l'encodage des fichiers en cliquant sur L'encodage et les caractères spéciaux. Exemple pour un encodage au format UTF-8 :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• de préciser si la page ne doit pas être sauvegardée dans la cache du navigateur (c'est à dire que la page ne sera pas mémorisée dans les fichiers temporaires du visiteur) grâce au mot clé pragma :

<meta http-equiv="pragma" content="no-cache" />

• de préciser une date d'expiration pour la page grâce au mot clé expires :

<meta http-equiv="expires" content="Tue, 20 Aug 1996 14:25:27 GMT" />

• de demander à la page de se raffraichir (= se réactualiser) toutes les N secondes grâce au mot clé refresh. Par exemple, pour que la page se réactualise toutes les 30 secondes :

<meta http-equiv="refresh" content="30" />

• de rediriger le visiteur vers une autre page au bout de N secondes grâce au mot clé refresh et à la précision URL=chemin-vers-ma-page. Par exemple, pour rediriger le visiteur sur le site alistapart.com au bout de 2 secondes :

meta http-equiv="refresh" content="2;URL=http://www.alistapart.com/" />

Notez bien : Le W3C recommande cependant de faire ce type de redirection de préférence côté serveur (c'est à dire en PHP, ASP...) mais ceci peut toujours servir.

En résumé

Exemple d'entête plus complète pour une page web :

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ma page</title>
   <meta name="author" content="Erwan Dupeux-Maire" />
   <meta name="keywords" content="html, xhtml, conception, creation de site web, realisation de site web, formation, cours" />
   <meta name="description" content="Support du cours de conception et réalisation de sites Web en XHTML" />
</head>
<body>
   Contenu ici
</body>
</html>

L'encodage des fichiers et les caractères spéciaux

L'encodage des caractères

Un bon exemple pour comprendre l'encodage des caractères est l'exemple du code morse. En morse, chaque caractère alphabétique est traduit par une de sons courts et/ou longs. Ainsi, 3 bips cours donnent un "S", 3 bip longs un "O", etc...

En informatique, les caractères alphabétiques sont associés à des codes binaires, c'est à dire composés d'une suite de 1 et de 0. Il existe plusieurs façon de traduire les caractères en codes binaires :

• En ASCII, les caractères sont codés sur 7 bits, soit un code composé de sept chiffres qui sont tous égaux à 0 ou à 1. Il permet donc de représenter 2⁷ soit 128 caractères différents. 128 caractères sont suffisant pour mémoriser notre alphabet, les chiffres, des élements de ponctuation (...), mais pas suffisant pour stocker nos caractères spéciaux (accents, cédilles...)
• En ISO 8859-1 (souvent appelée Latin-1), les caractères sont codés sur 8 bits. Il permet donc de représenter 2⁸ soit 256 caractères différents. 256 caractères sont suffisant pour mémoriser notre alphabet latin avec les caractères spéciaux (accents, cédilles...)
• L'ISO 8859-15 (souvent appelée Latin-9) est une variante réactualisée du Latin-1. Toujours codée sur 8 bits, il ajoute notamment le caractère euro (€) et les caractères œ et Œ à la place de certains caractères peu utilisés.
• Le Windows-1252 (parfois appelé AINSI) est un encodage propre aux ordinateurs Windows. S'il est lui aussi codé sur 8 bits, certains caractères diffèrent des codages ISO vu ci-dessus.
• Le MacRoman est un encodage propre aux ordinateurs Apple Macintosh. S'il est lui aussi codé sur 8 bits, certains caractères diffèrent des codages ISO et Windows-1252 vu ci-dessus.
• L'UTF-8 est un encodage dit "Unicode". L'Unicode vise à donner à tout caractère quelque soit son alphabet (latin, cyrillique, asiatique...) un code unique et compatible sur toutes les plateformes (Windows, Mac, Unix). L'UTF-8 est codé sur 8 à 32 bits ce qui permet d'encoder un nombre de caractères quasi illimité. Voir en fin de page pour en savoir plus.

A l'origine, les fichiers HTML sont faits pour être encodé en ASCII, c'est à dire sans caractères spéciaux. Pour pallier à ce problème, le langage HTML permet de traduire chaque caractère spécial par un code alpha numérique comme décrit dans la table ci-après.

Ajourd'hui encore, utiliser cette table de conversion permet de se prémunir contre les incompatibilités. Imaginons par exemple que je crée une page Web sur Mac et l'enregistre en MacRoman : si un visiteur vient voir ma page depuis un PC, il risque de voir mes accents remplacé par un code incompréhensible (ex : «J'aime l'√©at√©a» au lieu de «J'aime l'été»).

Les caractères spéciaux en HTML

En HTML, tous les caractères spéciaux peuvent être remplacés par un code commençant par & (esperluète ou « et commercial ») et terminant par ; (point virgule). En voici une liste non exhaustive :

Les caractères accentués ou encore les lettres avec cédilles sont également des caractères spéciaux. Chacun a donc sa représentation en HTML. En voici quelques exemples :

Ces caractères peuvent également être utilisés en majuscule :

L'avantage de l'UTF-8

L'UTF-8 est aujourd'hui compris par tous les navigateurs courrants. Il permet d'encoder un nombre quasi illimité de caractères (plus de 4 milliards !).

En utilisant l'UTF-8 dans nos pages, on s'affranchit de la conversion des caractères spéciaux en code HTML. Un "e" avec accent aigu pourra donc être écrit directement "é" et non "&eacute;" dans notre code source.

Pour écrire nos pages en UTF-8, il faut d'abord préciser lors de leur enregistrement l'encodage souhaité. Généralement, en choisissant "enregistrer sous" dans votre éditeur de texte, vous pouvez sélectionner l'encodage. Choisissez alors "UTF-8" !
Sur Adobe Dreamweaver, appuyez simultanément sur les touches «Ctrl» et «J» («Pomme» et «J» sur Mac) pour afficher les propriétés de la page. Choisissez ensuite "Titre et encodage", puis choisissez "Unicode 4.0 UTF-8" en face de "Encodage".

Il vous faudra ensuite, si ce n'est pas déjà le cas, préciser dans l'entête de votre page l'encodage choisi grâce à une balise Meta :

Ajouter le code suivant entre les balises <head> et </head> :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />