Conception & Réalisation de sites Web

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.

Balise Indication donnée au navigateur
<html> Début de la page HTML
</html> Fin de la page HTML
<head> Début de l'entête de la page
</head> Fin de l'entête de la page
<body> Début du corps (du contenu) de la page
</body> Fin du corps de la page
<title> Début du titre de la page. Cette balise est toujours placée entre les balises <head> et </head>
</title> Fin du titre de la page

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.

Balise Indication donnée au navigateur
<p> Début d'un paragraphe.
</p> Fin d'un paragraphe.
<br /> Ajout d'un saut de ligne. Un saut de ligne ne peut avoir de contenu, on considère donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la balise.
<hr /> Ajout d'une ligne horizontale de séparation comme suit :
Cette balise ne peut avoir de contenu, on considère donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la balise.

Style du texte

Balise Indication donnée au navigateur
<strong> Début d'un texte en gras. La balise <b> donne le même résultat mais elle a été dépréciée, c'est à dire que son utilisation est déconseillée.
</strong> Fin d'un texte en gras.
<em> Début d'un texte en italique. La balise <i> donne le même résultat mais elle a été dépréciée, c'est à dire que son utilisation est déconseillée.
</em> Fin d'un texte en italique.
<u> Début d'un texte souligné.
</u> Fin d'un texte souligné.

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 :

Essai de mise en forme HTML avec des paragraphes.

Je peux mettre des mots en gras ou les souligner ou les mettre en italique. Je peux imbriquer des balises pour mettre des mots à la fois en gras et en italique.

Je peux sauter des lignes dans un paragraphe comme ici :
- 1ere ligne
- 2e ligne

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

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 :

Ma phrase avec des espaces et des sauts de ligne

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 :

Balise Indication donnée au navigateur
<!-- Début d'un commentaire, plus rien ne sera afficher par le navigateur jusqu'à la fermeture du commentaire.
--> Fermeture d'un commentaire.

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).

Balise Indication donnée au navigateur
<h1> Début d'un titre de niveau 1.
</h1> Fin d'un titre de niveau 1.
<h2> Début d'un titre de niveau 2.
</h2> Fin d'un titre de niveau 2.
<h3> Début d'un titre de niveau 3.
</h4> Fin d'un titre de niveau 4.
<h5> Début d'un titre de niveau 5.
</h5> Fin d'un titre de niveau 5.
<h6> Début d'un titre de niveau 6.
</h6> Fin d'un titre de niveau 6.

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 :

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6

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 :

Titre aligné à gauche

Titre aligné à droite

Paragraphe centré

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 :

Mon texte en plus gros, en rouge et en georgia ici.

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<sup>3</sup> ou 9<sub>3</sub>.</p>
<blockquote>Notez la différence d'espacements entre un blockquote et un paragraphe.</blockquote>
<p>Autre paragraphe.</p>

Vous aurez dans votre navigateur :

Les balises indices et exposants sont souvent utilisées avec des nombres : 93 ou 93.

Notez la différence d'espacements entre un blockquote et un paragraphe.

Autre paragraphe.

Balise Indication donnée au navigateur
<font> Début d'un texte mis en forme. Cette balise propose les attributs suivants :
size="Val", Val étant un nombre de 1 à 7. Précise la taille du texte.
face="Val", Val étant le nom d'une police. Précise la police de caractère.
color="Val", Val étant une indication de couleur. Précise la couleur du texte.
</font> Fin d'un texte mis en forme.
<blockquote> Début d'une citation
</blockquote> Fin d'une citation.
<sup> Début d'un texte en exposant. Exemple : texte normal texte en exposant
</sup> Fin d'un texte en exposant.
<sub> Début d'un texte en indice. Exemple : texte normal texte en indice
</sub> Fin d'un texte en indice.

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 :

Mon texte ici

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 :

  1. Mettre sa ceinture
  2. Vérifier les rétroviseurs
  3. Mettre le contact

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 :

  • Faire la lessive
  • Finir ma page web
  • Ranger l'armoire

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 :

  1. Mettre sa ceinture
  2. Vérifier les rétroviseurs
  3. Mettre le contact
  • Faire la lessive
  • Finir ma page web
  • Ranger l'armoire
Balise Indication donnée au navigateur
<ol> Début d'une liste ordonnée.
</ol> Fin d'une liste ordonnée.
<ul> Début d'une liste non-ordonnée.
</ul> Fin d'une liste non-ordonnée.
<li> Début d'un item de la liste (une puce sera ajoutée).
</li> Fin d'un item de la liste.

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Mike Mister
Nom Stuntman Pink
Profession Cascadeur Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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é :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Acteur
Pilote.
Mister Pink Gangster

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 :

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.

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.

enfant à Ngor (Sénégal)
Balise Indication donnée au navigateur
<table> Début d'un tableau. Cette balise propose les attributs suivants :
width="Val", Val étant un entier ou un pourcentage. Précise la largeur du tableau
cellpadding="Val", Val étant un entier. Précise l'espacement entre le texte d'une cellule et le bord de la cellule
cellspacing="Val", Val étant un entier. Précise l'espacement entre 2 cellules
border="Val", Val étant un entier. Précise la largeur du trait des bords des cellules
</table> Fin d'un tableau.
<tr> Début d'une ligne du tableau [tr => table row].
</tr> Fin d'une ligne du tableau.
<td> Début d'une cellule (ou case) du tableau [td => table data]. Cette balise propose les attributs suivants :
width="Val", Val étant un entier ou un pourcentage. Précise la largeur de la cellule
align="Val", Val pouvant être left (gauche), right (droite), center (centré) ou justify (justifié). Précise l'alignement horizontal du texte.
valign="Val", Val pouvant être top (haut), bottom (bas), ou middle (milieu). Précise l'alignement vertical du texte.
</td> Fin d'une cellule (ou case) du tableau.
<th> Début d'une cellule d'intitulé (entête, généralement utilisée pour la première ligne) du tableau [th => table header]. Cette balise propose les mêmes attributs que la balise td (cf ci-dessus).
</th> Fin d'une cellule d'intitulé du tableau.

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 :

- black (example)- blue (example)- fuchsia (example)
- gray (example)- green (example)- lime (example)
- maroon (example)- navy (example)- olive (example)
- purple (example)- red (example)- silver (example)
- teal (example)- white (example)- yellow (example)

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 :

Texte en rose fuchsia.

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.

Le modèle de couleur CMJ Le modèle de couleur RVB
Le modèle de couleur CMJ Le modèle de couleur RGB
On dit que le cyan, le magenta et le jaune sont les couleurs primaires en synthèse soustractive, c'est à dire que l'addition des 3 couleurs tend vers le noir (observer le centre de l'image). On dit que le rouge, le vert et le bleu sont les couleurs primaires en synthèse additive, c'est à dire que l'addition des 3 couleurs tend vers le blanc (observer le centre de l'image).

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 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
En héxadécimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

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....

En décimal 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 ...
En héxadécimal 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 ...

Et ce jusque 255 pour nos valeurs de couleurs :

En décimal ... 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
En héxadécimal ... EF F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF

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 :

Texte noir. Texte blanc. Texte rouge. Texte rouge sombre. Texte bleu. Texte turquoise. Texte jaune. Texte gris...

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é

Balise Indication donnée au navigateur
<a> Début d'un lien hypertexte. Cette balise propose les attributs suivants :
href="Val", Val le chemin complet vers la page à afficher
target="_blank", permet l'ouverture du lien dans une nouvelle fenêtre.
</a> Fin d'un lien hypertexte.

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) :

Illustration des problèmes de suddation

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".
Balise Indication donnée au navigateur
<img /> Insertion d'une image. Cette balise propose les attributs suivants :
src="Val", Val le chemin complet vers l'image
alt="Val", Val étant un texte qui remplace l'image si elle ne peut s'afficher.
border="Val", Val étant un entier. Précise la taille de la bordure de l'image.
width="Val", Val étant un entier. Précise la largeur de l'image.
height="Val", Val étant un entier. Précise la hauteur de l'image.

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 :

Illustration

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 :

Orientation

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) :

exemple de découpage

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 :

Orientation Contact FAQ Accueil

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.

Balise Indication donnée au navigateur
<map> Début d'une image cliquable ou «image map».
</map> Fin d'une image cliquable ou «image map».
<area /> Définition d'une zone cliquable, placée entre les balises <map> et </map>. Cette balise propose les attributs suivants :
shape="Val", Val étant égal à "circle" (pour un cercle), "rect" (pour un rectangle), ou "poly" (pour tout autre polygone)
coords="Val1,Val2,Val3...", Val1, Val2, Val3 étant une liste de coordonnées permettant de dessiner la forme.
href="Val", Val étant le lien ou pointe la zone cliquable
name="Val", Val étant un text alternatif décrivant la zone cliquable

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 :

Veuillez saisir votre prénom :

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 :

Veuillez saisir votre prénom :

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 :

Quel type de prestation recherchez vous ?
Location de mobilier Achat de mobilier

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 :

J'accepte les conditions.

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 :

Civilité :
Madame Mademoiselle Monsieur

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 :

Civilité :
Madame Mademoiselle Monsieur

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 :

Votre message :

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 :

Vous êtes :

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 :

Madame Mademoiselle Monsieur

Votre prénom :

Votre nom :

Votre mot de passe :

Vous êtes

Quel type de prestation recherchez vous ?
Location de mobilier Achat de mobilier

Votre message :

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>

Balise Indication donnée au navigateur
<meta /> Informations sur la page. Cette balise propose les attributs suivants :
name="Val", Val étant le nom de l'information envoyée
http-equiv="Val", Val étant le nom de l'information envoyée via le protocole http
content="Val", Val étant l'information envoyée au navigateur.

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 27 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 28 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 :

Code Résultat dans le navigateur
&nbsp;  [Espace insécable]
&quot; "
&lt; <
&gt; >
&laquo; «
&raquo; »
&amp; &
&euro;
&yen; ¥
&copy; ©
&reg; ®

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 :

Code Résultat dans le navigateur
&agrave; à
&acirc; â
&eacute; é
&egrave; è
&ecirc; ê
&icirc; î
&iuml; ï
&oelig; œ
&ugrave; ù
&ucirc; û
&ccedil; ç

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

Code Résultat dans le navigateur
&Agrave; À
&Acirc; Â
&Eacute; É
&Egrave; È
&Ecirc; Ê
&Icirc; Î
&Iuml; Ï
&OElig; Œ
&Ugrave; Ù
&Ucirc; Û
&Ccedil; Ç

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" />

Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!