PREMIÈRE PARTIE

Le HTML

II. Généralités

1. Introduction

Le HTML (de l’anglais Hyper Text Markup Language [langage de balisage hyper-texte]) a été inventé en 1990 par Tim Berners-Lee, un informaticien britannique du CERN (Centre Européen de Recherche Nucléaire), afin d’améliorer l’échange d’information entre les chercheurs. Plutôt qu’un langage, il définit un format d’hyper-texte, qui permet à chaque page de contenir des liens qui pointent vers des images ou d’autres pages n’importe où sur Internet, créant ainsi une gigantesque toile d’araignée, d’où le nom de World Wide Web [Toile à l’échelle du monde]. La norme est maintenant définie par le W3C (World Wide Web Consortium) qui définit aussi le CCS que nous verrons plus tard, et qui fut fondée par l’inventeur en 1994.

C’est une application de SGML (Standard Generalized Markup Language), lequel permet de définir un ensemble de balises, d’attributs et d’entités. Ils sont utilisés pour introduire des contenus, texte, image… et les paramètres associés. Les pages qu’il décrit n’ont pas un format fixe, mais leur aspect dépend de la machine où il est affiché, comme de sa configuration, la taille de la fenêtre… Il s’agit d’un langage interprété (non compilé), c’est à dire qu’il est lu en continu par un autre logiciel, notamment un navigateur.

Une autre voie a été envisagée comme application de XML, ce qui a donné la norme XHTML qui devait remplacer l'ancienne. Elle a été utilisée dans beaucoup de sites, mais après bien des tergiversations, le W3C est revenu à HTML avec la version 5, qui prend en compte beaucoup de fonctionalités supplémentaires, notamment le multi-media. Des choix définitifs ont alors été fait, ce qui apporte beaucoup de simplifications. En particulier, les syntaxes entre deux chaises qui étaient devenues une habitude sont maintenant sans objet.

2. Les signes diacritiques

La plupart des navigateurs acceptent l’introduction de caractères spéciaux tels quels. Cela peut conduire à une mauvaise représentation des signes souhaités et même, dans certains cas, à des erreurs.

Il est donc préférable, pour obtenir les signes diacritiques, d’employer une des deux méthodes décrites ci-dessous.

On peut obtenir les signes diacritiques grâce à un code numérique :

Pour obtenir le caractère spécial désiré on fait la somme de colonne et de la ligne correspondante précédée de "&#" et suivie de ";". Cette construction s’appelle une entité.

Les caractères diacritiques s’obtiennent aussi grâce à un code se présentant sous la forme de chaîne alphanumérique, précédée par "&" et terminée par ";".

Voici quelques exemples :

Enfin, il y a les caratères d’espacement, non imprimables :

3. Les balises

Le langage HTML, est composé de balises (ou tags), délimités par les caractères "<" pour le début, et ">" pour la fin, et dont le contenu est une commande HTML suivie de paramètres éventuels. Tout ce qui n’est pas compris entre "<" et ">" est considéré comme du texte à afficher.

HTML ne distingue pas les majuscules des majuscules. Ainsi par exemple, la balise <title> est équivalente à <TITLE> ou <TiTlE> ; il existe néanmoins quelques exceptions à ce principe qui sont les séquences d’échappement. Les normes futures n’accepteront plus que les minuscules pour les balises, alors autant prendre des bonnes habitudes dès le début.

Toutes les balises ne sont pas également prises en charge par tous les navigateurs. Si un navigateur en rencontre une qui n’est pas implémentée, généralement, il l’ignore. Celles que nous verrons sont toutes prises en charge par les navigateurs les plus récents.

Il existe essentiellement deux types de balise soit :

Les balises appariées : La grande majorité des balises HTML sont de ce type. Elles débutent par une balise d’ouverture et se terminent par une balise de fermeture.

Voici un exemple de balise appariée :

Les balises solitaires : Typiquement, ce sont des balises représentant des formatages de ligne, des images ou les informations méta (description de votre document HTML, pour les moteurs de recherche notamment.) Les évolutions futures de la norme ne les accepteront plus. Aussi, pour prendre les devants, il existe une notation condensée, par exemple <br>, qui représente les deux balises à la fois. L’espace est obligatoire.

La valeur des attributs doit toujours être entre guillemets, soit double """, soit simple "'". Elle peut elle-même en contenir, à condition d’être entre les guillemets de l’autre type. Si les deux types sont déjà utilisés, il ne reste plus que la possibilité d’utiliser une entité.

L’ensemble des balises d’ouverture et de fermeture avec les attributs, plus ce qui est contenu entre elles, constitue un élément. Le contenu peut être formé lui-même d’éléments, on dit alors que les éléments sont imbriqués.

4. Les commentaires

Il est possible de placer des commentaires dans un document HTML. C’est une pratique utile et recommandée pour en faciliter la maintenance et les extensions futures. La syntaxe est la suivante :

<!-- commentaire -->

Il faut par conséquent éviter des mettre des tirets consécutifs dans le texte du commentaire.

5. Architecture d’un document HTML

Tout fichier HTML doit contenir obligatoirement un certain nombre d’éléments qui en définissent la structure, à savoir une déclaration de type de document, un en-tête et un corps.

L’ensemble du document est tout ce qui est compris entre les balises <html> et </html>.

• L’en-tête, situé entre <head> et </head>,contient généralement le titre du document.
• La balise de type de contenu.
• La balise de titre <title> est recommandée mais n’est pas obligatoire. Le titre sera affiché comme nom de fenêtre du navigateur, et donnera le nom de fichier par défaut en cas de sauvegarde.
• Le corps entre <body> et </body>, qui représente la partie affichée par le navigateur. Contient le texte, composé de paragraphes, de liste et d’autres éléments.

III. Le Texte

Tout texte non entouré de balises sera affiché tel quel. Mais il est préférable d’en mettre, afin d’une part que l’affichage ne dépende pas du navigateur, et d’autre part que le fichier reste compatible avec les évolutions futures de la norme.

Dans tous les cas, les espaces multiples et les sauts de ligne sont interprétés comme des espaces simples. Il est donc nécessaire d’utiliser les balises et les entités prévues.

1. Corps du texte

<p> La balise <p>, couplée avec </p>, définit un paragraphe. Les paragraphes sont habituellement séparés par une ligne blanche. Ils ne peuvent pas être imbriqués. Les paragraphes vides sont ignorés.

Il est temps maintenant de regrouper les connaissances vues jusqu’ici pour écrire notre première page Web :

<!DOCTYPE HTML>
<html>
 <head>
  <charset="utf-8">  
  <title>Première page Web</title>
 </head>
 <body>
  <p>Bonjour monde&nbsp;!</p>
 </body>
</html>

Malgré sa simplicité apparente, elle peut être visualisée par un navigateur, téléchargée sur un serveur, et sera ainsi accessible dans le monde entier.

<br>Les retours à la ligne sont générés par la balise solitaire <br>.

<hr>La balise <hr> introduit une ligne de séparation en forme de règle.

<pre>Le texte entre les balises <pre> et </pre> (pour pré formaté) sera affiché tel qu’il est dans le fichier. C’est-à-dire que les retours à la ligne, les espaces multiples et les indentations déjà présentes seront pris en compte, et les lignes ne seront pas coupées. Une fonte fixe pourrait être utilisée.

2. Titres

<hn>Il y a 6 niveaux de titres numérotés de 1 à 6, qui sont généralement affichés avec des caractères plus gros (et plus gras) par rapport au texte normal.
Ces titres sont introduits par les balises <hn>,dans laquelle n représente un chiffre de 1 à 6 ;les titres de plus haut niveau ont la valeur 1, les plus petits la valeur 6.

<h1>Titre Principal</h1> ... <h6>Titre de 6ème rang</h6>

3. Indices et exposants

<sup>Les caractères entre les balises <sup> ^et </sup> seront en exposant. Elles peuvent être imbriquées, pour avoir des exposants d’exposant…

<sub>Les balises <sub> _et </sub> indique un indice. L’exposant d’un indice ou inversement sera en caractères plus petits que ceux d’origine.

4. Styles

<b>Le texte entre les balises <b> et </b> (pour bold) est affiché en gras

<i>Le texte entre les balises <i> et </i> est affiché en italique.

<small>Pour des caractères plus petits, le texte est mis entre les balises <small> et </small>.

IV. Les Listes

1. Items

<li> HTML prend en charge les listes à puces, les listes ordonnées et les listes descriptives. Chaque éléments d’une liste (i.e. chaque item) commence par une balises <li> (list item.) La balise fermante </li> n’est pas obligatoire, sont usage est néanmoins recommandé.

2. Listes à puce

<ul> Les listes à puce sont encadrées par des balises <ul> (unnumbered list). Chaque élément <li> situé entre une balise <ul> et </ul> sera précédé d’une puce dont le graphisme variera selon le niveau d’imbrication :

Voici un exemple d’emploi de la balise <ul> :

<ul>
  <li>Lapin
    <ul>
      <li>Garenne</li>
      <li>Albinos</li>
    </ul>
  </li>
  <li>Chat</li>
  <li>Cheval</li>
</ul>

3. Listes ordonnées

<ol>La syntaxe des listes ordonnées est identique à celle des listes à puces, les éléments sont également délimités avec la balise <li>. Les balises de début et de fin se nomment ici <ol> et </ol>.

<ol>
  <li>Hibou</li>
  <li>Chou</li>
  <li>Genou</li>
</ol>

4. Listes descriptives

<dl>
<dt>
<dd> Les listes descriptives sont encadrées par des balises <dl> (description list). Elles consistent généralement en une succession de termes (<dt>) et de définitions (<dd>), selon le modèle suivant :

<dl>
  <dt> Terme </dt>
    <dd> Définition </dd>
  ...
</dl>

Nous le voyons, il n’y a pas d’attributs permettant  de contrôler l’aspect des listes. Pour cela, il faut utiliser les feuilles de styles décrites dans la partie suivante.

V. Les Liens

Les liens permettent de naviguer sur le Web. Grâce à eux, on réalise des objets qui réagissent avec la souris pour atteindre d’autres objets. Ils donnent tout son sens au World Wide Web puisque ce sont les liens entre tous les nœuds. C’est donc une partie primordiale que nous décrirons en détails.

<a>La balise <a> (pour anchor) sert à la fois de point de départ et de point d’arrivée d’un lien. Tout ce qui se trouve entre les balises <a> et </a> est la zone sensible, sur laquelle il faut cliquer pour suivre le lien.

L’attribut name donne un nom à l’élément, de sorte qu’il puisse être utilisée comme point d’arrivée. Ce nom doit être unique dans le fichier.

Il y a une autre méthode pour fixer un point d’arrivée, c’est d’utiliser l’attribut id dans n’importe quelle balise de contenu. Il définit un identificateur également unique dans le fichier.

Le paramètre de href est un URI, Universal Resource Identifier [identificateur de ressource universel], qui représente une ressource (fichier, répertoire, disque…) se trouvant n’importe où sur Internet, y compris sur l’ordinateur local. C’est soit un URL (Universal Resource Locator [pointeur de ressource universel]) indiquant le chemin pour trouver la ressource, soit un URN (Universal Resource Name [nom de ressource universel]) qui la définit de façon fixe et unique quelque soit sa localisation, ou les deux.

La première partie de l’URI est l’identificateur du protocole :

http:   Protocole hyper texte
ftp:    Protocole de transfert de fichier
news:   Protocole Usenet, encore appelé groupes de news
mailto: Courrier électronique
file:   Lecteur local ou du réseau local.

Selon le protocole, la syntaxe varie.

Pour les protocoles http: et ftp:

Il représente un fichier ou un répertoire.

Le premier paramètre est le domaine, précédé de "//". Un domaine est noté soit avec son adresse IP, c’est-à-dire quatre nombres entiers de 0 à 255 séparés par des ".", soit avec un nom de domaine. Un nom de domaine est constitué de mots séparés par des ".". En partant du dernier, on a un indicateur donnant l’organisme où est déposé le nom de domaine, qui peut être par exemple fr, com, edu, org, net, etc. Ensuite le nom de domaine proprement dit, puis un ou plusieurs sous domaines, l’exemple le plus courant étant www pour World Wide Web. Notons que s’il est presque systématique, il n’est en rien obligatoire.

Après, on trouve un chemin similaire à celui d’un disque dur, mais utilisant toujours le séparateur "/", qui doit aussi être présent au début et à la fin du chemin. Il est suivi éventuellement du nom de fichier.

Ensuite, une autre partie facultative et séparée par un "?", appelée la requête [query], contient des paramètres supplémentaires qui seront interprétés par la ressource.

Enfin, un autre paramètre facultatif est le fragment, précédé d’un "#", qui représente, dans la page visée, l’attribut name de la balise <a> à partir de laquelle le navigateur l’affichera.

Pour ces protocoles, l’URI est en fait un URL.

Pour le protocole news:

L’URI représente soit un groupe de news, soit un message [post] particulier. Dans le premier cas, la suite de l’URI est constituée du nom complet du groupe de news. Dans le deuxième cas, il est constitué d’un identificateur, suivit de "@" puis du nom du serveur de news, qui est en fait le serveur où a été posté le message à l’origine.

Pour ce protocole, l’URI est donc un URN ou à la fois un URL et un URN. Le groupe visé n’est pas localisé à un endroit particulier, mais est copié de proche en proche dans tous les serveurs de news sous un nom unique.

Pour le protocole mailto:

L’URI représente une adresse d’email. Sa syntaxe est simple : nom@domaine. Le domaine est indiqué sans les sous domaines. Il admet plusieurs paramètres après un "?". Par exemple pour indiquer l’objet : ?subject=objet.

Pour le protocole file:

L’URI représente un fichier, un répertoire, ou un disque local. Le chemin est précédé de "//", puis encore d’un "/" pour représenter la racine, et de la lettre du lecteur.

URI relatif et absolu

Un URI absolu est simplement un URI complet.

<base>Un URI relatif, qui ne peut être qu’un URL, est la chaîne de caractères qu’il faut ajouter à une base pour obtenir l’URL absolu. Cette base, qui est elle-même un URI, est définie par l’attribut href de la balise <base>, qui est placée obligatoirement dans l’en-tête de la page. Si elle n’est pas définie explicitement, elle est par défaut le dossier du serveur où se trouve la page.

Voici quelques exemples :

<a href="page2.html">
  Page suivante 
</a>

<a href="http://arsicaud.imaginet.fr/lune.html">
  Allez voir ce site
</a>

<a href="http://www.test.fr/archive/">
  Contenu du répertoire archive
</a>

<a href="ftp://ftp.big.bz/farfouile/en_vrac.exe/"> 
  Fichiers à transférer
</a>

<a href="anims/donkey.avi">
  Mes vacances en Auvergne (1 Mo)
</a>

<a href="pompompompom.mp3"> 
  Beethoven
</a>

<a href="archive/curriculum.zip">
  Cliquez ici pour transférer ce fichier (239 Ko)
</a>

<a href="mailto:me@somewhere.net?Subject=Web">
  Ecrivez-moi
</a>

<a href="news:alt.mon.super.groupe.de.news">
  C'est discuté ici
</a>

<a href="news:512abcd$$36chandelles@news.isp.com">
  Voir le message de fred
</a>

VI. Les Images

1. Images simples

<img>La balise qui permet d’inclure une image dans une page Web est <img>. Elle est toujours suivie de l’attribut src qui permet de donner l’adresse du fichier contenant l’image. Elle admet également d’autres attributs :

2. Images cliquables

<map>
<area>On peut créer des régions sensibles à l’intérieur d’une image, il existe pour cela plusieurs méthodes. Nous ne retiendrons ici que la plus simple, qui consiste à utiliser la balise <map> (définissant un ensemble de régions) associée à la balise <area> (permettant de les réaliser.)

Trois formes sont disponibles : rectangle, cercle et polygone.

Plusieurs régions peuvent être contenues dans le même élément <map>. Si deux régions se superposent, c’est la première dans la liste qui est active.
La balise <img src="..." usemap="#...">appelle ensuite l’image et les régions.

Rectangle	<map name="Zones"> <area shape="rect" coords="x,y,a,b" href="Fichier.htm" alt="Fichier"> </map> <img src="Image.jpg" usemap="#Zones">
cercle	<map name="Zones"> <area shape="circle" coords="x,y,r" href="Fichier.htm" alt="Fichier"> </map> <img src="Image.jpg" usemap="#Zones">
Polygone	<map name="Zones"> <area shape="poly" coords="x,y,a,b,s,t" href="Fichier.htm" alt="Fichier"> </map> <img src="My_Pic.jpg" usemap="#Zones">
Image entière	<map name="Zones"> <area shape="default" href="Fichier.htm" alt="Fichier"> </map> <img src="Image.jpg" usemap="#Zones">

VII. Les Tableaux

Jusqu’ici, nous avons ajouté pas mal de choses à notre page : du texte, des images, des titres, des liens. Il est temps d’y mettre un peu d’ordre.

Les tableaux divisent l’espace en lignes, colonnes et cellules, dans lesquels sont représentés n’importe quels contenus HTML. Il doivent plutôt être utilisé pour afficher des données tabulées que pour la disposition, comme c'était l'usage autrefois. Les éléments de présentation comme les bords et les fonds peuvent être définis de beaucoup de façons différentes en utilisant les feuilles de style CSS, qui sont l'objet de la deuxième partie.

La création d’un tableau de base s’organise autour de 3 balises :

<table>La définition du tableau est contenue entre les balises <table> et </table>.

<tr>Ensuite les lignes sont définies l’une après l’autre entre les balises <tr> et </tr> (Table Row.)

<td>Chaque ligne est à son tour divisée en cellules définies l’une après l’autre par les balises <td> et </td> (Table Data.)

Deux balises supplémentaires permettent de donner une légende au tableau et de fournir des informations sur le contenu dans la table.

<caption>La légende, qui sera affichée près du tableau, est placée entre les balises <caption> et </caption>. Cet élément est facultatif, mais s’il existe, il ne peut y en avoir qu’un, et tout de suite après la balise <table>.

<th>Si la balise <td> est remplacée par la balise <th>, alors au lieu d’un contenu, il s’agit d’un en-tête [header]. Il est utilisé pour décrire le contenu d’une ligne ou d’une colonne, et est généralement affiché en gras.

Voici un exemple de tableaux avec son code source :

<table> 
  <caption> 
    Légende du tableau.
  </caption> 
  <tr> 
    <th>Colonne 1</th> 
    <th>Colonne 2</th> 
  </tr> 
  <tr> 
    <td>Cellule 1</td> 
    <td>Cellule 2</td> 
  </tr> 
  <tr> 
    <td>Cellule 3</td> 
    <td>Cellule 4</td> 
  </tr> 
</table>

Les lignes et les colonnes d’un tableau peuvent êtres fusionnées afin d’obtenir des cellules plus ou moins grandes et accueillir des données.

Ce fusionnement est réalisé avec les attributs rowspan et colspan. Pour fusionner 2 cellules adjacentes sur une ligne on utilise l’attribut colspan ; pour fusionner 2 cellules adjacentes sur une colonne on emploie rowspan.

Voici un exemple de tableau avec fusions :

  <tr> 
    <td>Cellule 1</td> 
    <td colspan="2">
2 cellules fusionnées<br>
sur la même ligne
    </td>
  </tr>

  <tr> 
    <td>Cellule 2</td> 
    <td>Cellule 3</td> 
    <td rowspan="2">
2 cellules fusionnées<br>	
sur la même colonne)
    </td>
  </tr>

  <tr> 
    <td>Cellule 4</td> 
    <td>Cellule 5</td>
  <tr>

Voici enfin un exemple démontrant tout ce qui a été vu sur les tableaux :

<table> 
  <caption>Tableau d’exemple.</caption> 
  <tr>
    <td></td>
    <th colspan="2">Colonnes</th> 
  </tr><tr>
    <th rowspan="2">Lignes</th> 
    <td>Cellule 11</td> 
    <td>Cellule 12</td> 
  </tr><tr>
    <td>Cellule 21</td> 
    <td>Cellule 22</td> 
  </tr>
</table>

VIII. Les Contenus Spéciaux

Certains contenus ont diverses fonctions particulières dans le texte qu’il est bon de signaler, pour leur apparence à l’écran ou tout autre traitement particulier. De nombreux couples de balises spéciales sont définis pour donner ces informations de structure.

<abbr> Délimite une abréviation ou un acronyme. L’attribut title sert à donner la signification. Il apparaît en info bulle quand le pointeur de la souris est sur cet élément.

<address>Sert à indiquer des

ou autres coordonnées pour un document.

<q>Délimite une citation à l’intérieur d’un paragraphe, ces balises peuvent être imbriquées. Les guillemets adéquats sont ajoutés automatiquement.

<blockquote>

Même chose, mais en un paragraphe séparé. La citation est généralement indentée. Avec ces deux dernières balises, l’attribut cite sert à donner l’URI de provenance.

<cite>Contient une référence à un autre document.

<code>Délimite du code informatique, comme celui d’un langage de programmation. Souvent affiché avec une police à chasse fixe.

<samp>Délimite un exemple de sortie d’un programme (sample).

<var>Indique une variable ou un argument de programme.

<kbd>Indique ce qui est à taper au clavier (keyboard.)

<ins>Délimite un contenu qui a été ajouté (inséré) à une version précédente du document, souvent affiché souligné.

<del>Délimite un contenu qui a été supprimé (delete), souvent simplement affiché barré. Ces deux dernières balises admettent les attributs title et cite pour donner des explications sur la modification. Un autre attribut, datetime, permet d’en préciser la date et l’heure, avec le format : aaaa-mm-jjThh:mm:ssZ (pour le temps GMT.)

<dfn>Indique que le texte délimité est une définition, généralement mis en italique.

<em>Sert à mettre l’accent (emphasis) sur un passage, par affichage en italique par exemple.

<strong>Pour un accent plus important (strong = fort), en italique gras par exemple.

IX. Les Balises Meta et Link

<meta>Les balises <meta> qui se placent dans l’en-tête permettent d’une part de donner des informations sur un document HTML avec une description, des mots-clefs, un champ auteur, un copyright, le langage utilisé, une date d’expiration, etc. Elles proposent également quelques fonctions bien utiles, tel que la redirection, ou l’actualisation.

Tout ceci est invisible dans la page mais peut être lu par un programme et notamment par certains moteurs de recherche tels que Google ou Bing qui s’en servent pour indexer les pages. Mais il faut noter que certains navigateurs ont un menu info qui permet d’afficher les renseignements contenus dans ces balises.

Il y a deux attributs dans un ordre quelconque, l’un spécifiant le nom de la propriété : name ou http-equiv, ce dernier étant plus spécialement destiné au serveur. L’autre le contenu de la propriété : content.

La propriété la plus importance est celle spécifiant le type de contenu du document, définie comme suit :

<meta http-equiv="Content-Type" content="text/html; charset=table de caractères">

La table de caractères permet de définir quel ensemble de caractères est utilisé, et comment ils sont codés pour ceux qui n’appartiennent pas à la norme ASCII stricte, comme les caractères accentués ou de langue étrangère, afin d’avoir une compatibilité maximale. Pour une page en français, ou même en anglais, il suffit de mettre ISO-8859-1 (alphabet occidental ISO.) Mais il faut faire attention que certaines plateformes ont un codage propre, et il faut insérer le bon paramètre. Cependant, si les entités sont utilisées systématiquement, il n’est pas important.

La propriété refresh permet de recharger la page au bout du nombre de secondes spécifié ainsi :

<meta http-equiv="refresh" content="temps en s">

En conjonction avec name, d’autres propriétés sont : generator pour désigner le logiciel qui a servi à créer la page, description pour donner une courte description du contenu de la page, keywords pour définir un ensemble de mots-clés utilisés par les moteurs de recherche pour indexer les pages, author pour indiquer le nom de l’auteur, copyright pour les informations de copyright, revised pour donner la date et l’auteur de la dernière mise à jour…

<link>Cette balise se place également dans l’en-tête du document, et donne des renseignements similaires aux balises <meta>, si ce n’est qu’elle représente un lien comme la balise <a>, sauf qu’il n’y a pas de contenu. Certains navigateurs les affichent tout de même dans une barre de menu ou autre. Elle sert notamment à indiquer des versions alternatives du document (autre langue…), ou à le situer dans une série de documents, à l’usage des moteurs de recherche.

Outre les attributs de <a>, la balise <link> admet l’attribut media décrivant le type de medium de la destination :

X. L’Internationalisation

Les pages Web sont accessibles du monde entier, mais aussi sont écrites dans une grande variété de langues, de caractères, et de paramètres divers comme les points décimaux et les guillemets. Pour mettre un peu d’ordre dans toutes ces particularités locales, par exemple pour les synthétiseurs vocaux et les moteurs de recherche, ce sont bien sûr des balises et des attributs qui sont mis à contribution. Nous avons déjà vu la balise <meta> avec la propriété Content-Type qui définit la table de caractères.

Le principal attribut est lang, utilisable dans n’importe quelle balise de contenu, et qui spécifie la langue principale de l’élément correspondant. Il peut donc spécifier la langue de tout le document s’il est dans la balise <body>. Il sert aussi à spécifier la langue de la valeur d’un attribut dans la même balise, notamment pour les propriétés description et keywords de la balise <meta>. Voici quelques valeurs possibles :

Si c’est pour la langue du document pointé par un URI, c’est l’attribut hreflang qu’il faut utiliser dans la balise <a> ou <link>, avec les mêmes valeurs.

Certaines langues non occidentales (hébreu, arabe) ont une orientation de texte de droite à gauche. Il existe alors l’attribut dir, qui affiche le texte ainsi s’il lui est affecté la valeur rtl (Right To Left), tandis que la valeur ltr (Left To Right) spécifie l’orientation normale. Cela affecte aussi les alignements, en inversant les alignements à gauche et à droite.

XI. Les Formulaires

Les formulaires permettent de collecter des informations entrées par l’utilisateur, et de les transmettre à un URI capable de les traiter.

<form>Avant de pouvoir utiliser les différents éléments de formulaires (zone de texte, liste déroulante, cases à cocher, etc.), il faut déclarer au navigateur qu’il devra gérer des formulaires et ce qu’il devra en faire, on utilise, pour ce faire, la balise <form> :

<form method="post" action="URI d'expédition" enctype="text/plain">
  ... le formulaire proprement dit ...
</form>

L’attribut method offre le choix entre get et post. La différence entre ces deux méthodes repose sur la façon dont les données seront transmises au serveur et exploitées par celui-ci. Avec le temps, la méthode post s’est imposée car elle apparaît plus efficace et permet le traitement d’une quantité plus importante de données. Elle les envoie avec le formulaire au serveur chargé de les traiter, alors que la méthode get les met dans l’URI sous forme de requête, et n’admet par conséquent que des caractères ASCII stricts.

L’exploitation des données par le serveur nécessite l’utilisation d’un langage spécial, mais cela peut être fait dans le document même en utilisant un langage de script, comme Java Script décrit dans ce livre, et des événements. Voir la partie qui traite ce sujet.

1. Ligne de texte

<input>Une ligne de texte indique un champ de saisie d’une seule ligne. C’est le champ le plus simple à mettre en œuvre. Elle est introduite par la balise <input type="text">.

<form>	
  <input type="text" name="nom" size="longueur"
    value="texte initial">
</form>

2. Zone de saisie

<textarea> Les balises <textarea> </textarea> introduit une zone de texte multi lignes et non plus une simple ligne de texte.

<form>
  <textarea name="nom"
    rows="lignes" cols="colonnes">
      Valeur initiale
  </textarea>
</form>

3. Liste déroulante [listbox]

<select>Les balises <select> </select> indiquent au navigateur l’usage d’une liste déroulante. Les éléments de la liste sont introduits par les balises <option> </option>.

<form>
  <select name="nom" size="1">
  <option>lundi    </option>
  <option>mardi    </option>
  <option>mercredi </option>
  <option>jeudi    </option>
  <option>vendredi </option>
  </select>
</form>

<form>
  <select name="nom" size="1">
    <option>lundi</option>
    <option>mardi</option>
    <option selected>mercredi</option>
    <option>jeudi</option>
    <option>vendredi</option>
  </select>
</form>

4. Boutons d’options

Il serait plus logique de parler de groupe de boutons d’option car ils n’ont de sens que s’ils sont plusieurs. Ils ont comme particularité qu’une seule option à la fois peut être activée (le ou exclusif.) Pour la petite histoire le terme radio ferait référence aux anciens postes de radio sur lesquels le fait d’appuyer sur un bouton désactivait le bouton précédemment enfoncé.

<form>
  <input type="radio" name="nom du groupe"
    value="valeur du bouton">
</form>

<form>
  <input type="radio" name="tarif" value="jour">
    tarif de jour
  <input type="radio" name="tarif" value="nuit">
    tarif de nuit
  <input type="radio" name="tarif" value="week-end">
    tarif de week-end
</form>

<input type="radio" name="tarif" value="jour" checked>
  tarif de jour

5. Case à cocher [Checkbox]

La philosophie des cases à cocher est assez similaire aux boîtes d’option. Ici, cependant, plusieurs choix simultanés sont possibles.

<form> 
  <input type="checkbox" name="nom"
    value="valeur attachée au bouton">
</form>

<form>
  <input type="checkbox" name="choix1" value="1">
    glace vanille
  <input type="checkbox" name="choix2" value="2">
    chantilly
  <input type="checkbox" name="choix3" value="3">
    chocolat chaud
  <input type="checkbox" name="choix4" value="4">
    biscuit
</form>

<input type="checkbox" name="choix1" value="1"
  checked> glace vanille

6. Bouton de commande

<form>
  <button type="button" name="nom"
    onclick=fonction></button>
</form>

<form>
  <button type="button" name="nom"
    onclick="alert('Test réussi !')">
      Bouton de test</button>
</form>

7. Bouton submit

Le bouton submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l’URI désignée dans les attributs action et method de la balise <form>.

<form>
  <button type="submit" name="nom">
    texte du bouton</button>
</form>

<form>
  <button type="submit" name="nom">Envoyer</button>
</form>

8. Bouton reset

Le bouton reset a la tâche spécifique de réinitialiser le formulaire en annulant les modifications apportées aux éléments de formulaire et en restaurant les valeurs par défaut

<form>
  <button type="reset" name="nom">
    texte du bouton</button>
</form>

<form>
  <button type="reset" name="nom">Annuler</button>
</form>

Tout le Monde Peut Être Webmaster de Cl.Massé & Pierre Equey est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported.