A quoi sert le langage HTML ?

Le Web n'est rien d'autre qu'un ensemble de fichiers au format HTML, ou autrement dit un ensemble de pages Web, répartis sur toute la planète. La visualisation d'une page Web se fait par l'intermédiaire d'un programme capable d'interpréter le langage HTML, c'est à dire un navigateur (Internet Explorer, FireFox ...).

Le langage HTML (pour Hyper Text Markup Langage) sert à définir la manière dont les objets contenus dans la page (principalement du texte et des images) doivent se présenter visuellement à l'écran. Il ne s'agit donc pas d'un langage de programmation, mais simplement d'un langage permettant de décrire une mise en page.

Principe des liens

Un lien HTML est un objet d'une page web (donc du texte ou une image) associé à une page web. La page web en question est définie par son URL . L'URL contient toute l'information permettant de retrouver la page. Elle permet de retrouver l'adresse IP de l'ordinateur possédant cette page sur son disque par un mécanisme que nous ne décrirons pas ici. L'URL contient en particulier le nom du fichier qui représente la page (par exemple toto.html).

La figure ci-dessus montre ce qu'il se passe lorsqu'un utilisateur clique sur un lien vers une page toto.html. Le navigateur envoie tout d'abord une requête http au serveur Web qui gère cette page. Un serveur Web est un programme qui distribue les pages Web d'un ou plusieurs sites à tous les navigateurs qui en font la demande. Apache par exemple est un serveur Web connu.

Dans la requête HTTP, le navigateur demande au serveur de lui envoyer la page toto.html. Si tout se passe bien, la page toto.html est envoyée au navigateur puis affichée sur l'écran de l'utilisateur. La page toto.html contiendra vraisemblablement d'autres liens qui permettrons ensuite à l'utilisateur d'atteindre d'autres page par le même mécanisme.

Le principe des balises HTML

Le langage HTML est défini par un ensemble de balises. Chaque balise possède un nom et des attributs éventuels.

Les balises n'apparaissent pas à l'écran. Pour que le navigateur puisse les distinguer du texte de la page, elles sont toujours encadrées par les caractères < > . Une balise (sans attributs) se présente donc sous la forme:

 <Nom de balise> 

La majorité des balises possèdent un marqueur de fin du même nom, mais précédé du caractère /. Le marqueur de fin définit l'endroit où la balise cesse d'agir. On a alors une sorte de parenthèsage d'une partie du document de la forme:

<Truc>
     Partie du document sur lequel doit agir la balise Truc 
</Truc> 

Par exemple, la balise < b > permet de mettre du texte en gras. Pour mettre une partie du texte en gras, on écrira le code HTML suivant:

 <b>  Partie du texte à mettre en gras  </b>  

Il existe également des balises sans marqueur de fin. On les appelle, balises autofermantes. Par exemple, la balise < br > qui permet de passer à la ligne suivante ou la balise < input > qui permet de définir différents types de composants de formulaire (champs de texte, bouton radio, etc ...) sont des balises autofermantes.

Les attributs

Certaines balises peuvent avoir des attributs. Ceux ci permettent de préciser plus exactement l'effet de la balise. Une balise avec attribut se présente de la manière suivante :

 <Balise a1 = "v1" a2 = "v2" .... aN = "vN"  > 

ou v₁, v₂, ..., v_N représentent les valeurs des attributs a₁, a₂, ..., a_N.

Par exemple, voici comment mettre un texte en police "Comic Sans MS", couleur verte et taille 4 avec la balise < font >:

<font face ="Comic Sans MS" color ="green" size="4"> 
    Le texte en police Comic Sans MS, couleur verte, taille 4 
</font>

Dans cet exemple, les attributs sont face, color et size. Il représentent respectivement la police, la couleur du texte et sa taille.

Une fois ce code HTML interprété, le navigateur affichera :

Le texte en police Comic Sans MS, couleur verte, taille 4

Structure générale d'une page HTML

Une page HTML est un fichier texte commencant par la balise < html > et se terminant par < /html >

Un document HTML commence par une entête délimitée par les balises < head > et < /head >, suivie du corps de la page délimitée par les balises < body > et < /body >.

On a donc une structure générale de la forme:

<html>
  <head>
      Information générales sur la page 
  </head>
  <body>
     Contenu de la page 
  </body>
</html>

L'entête sert à définir des propriétés générales de la page comme son titre (affichée dans la barre de titre du navigateur), ou le nom de l'auteur de cette page.

Le corps de la page contient ce qui doit être affichée à l'écran.

Tableaux HTML

Les tableaux servent à positionner les éléments d'une page : texte, images, composants de formulaire ....

Un tableau HTML se défini de la manière suivante :

<table> 
  <tr>  Contenu de la première ligne  </tr> 
  . 
  . 
  <tr>  Contenu de la dernière ligne  </tr> 
</table>

Chaque ligne commence par la balise < tr > et se termine par < /tr >.

Chaque élément (ou cellule) d'une ligne est délimité par les balises < td > et < /td >.

Voici par exemple le code HTML d'un tableau à deux lignes et trois colonnes contenant les lettres a,b,c dans la première ligne et les lettres d,e,f dans la deuxième:

<table> 
  <tr> 
     <td> a  </td>  
     <td> b  </td>  
     <td> c  </td>  
   </tr> 

  <tr> 
     <td> d </td>  
     <td> e  </td>  
     <td> f  </td>  
  </tr> 
</table> 

Ce code sera visualisé de la manière suivante par le navigateur :

a	b	c
d	e	f

Les formulaires

Les formulaires HTML servent à saisir des données depuis un site internet.

Les différents composants d'un formulaire HTML sont ceux que l'on rencontre dans les interfaces graphiques de programme: bouton de commande, boutons radios, cases à cocher, zones de texte, liste de sélections ....

Quelques composants de formulaire typiques

Voici quelques définitions basiques de ces composants. Les cinq premiers utilisent la balise input et changent de forme et de comportement selon la valeur de l'attribut type:

• 1: Avec type="button", on obtient un bouton.
• 2: Avec type="submit", on obtient également bouton. La différence avec l'exemple 1 est expliquée plus loin.
• 3: Avec type="text", on obtient une zone de texte permettant de saisir une valeur.
• 4: Avec type="checkbox", on obtient une case à cocher.
• 5: Avec type="radio", on obtient un bouton radio.

Le dernier exemple est une liste de sélection que l'on obtient par la balise select, chaque choix de la liste étant défini par la balise option.

Les boutons radio se différencient des cases à cocher par le fait que l'on peut les rendres mutuellement exclusifs: deux boutons radio de même nom (attribut name), ne peuvent pas être cochés simultanément. Avec les cases à cocher, cela ne fonctionne pas. En voici la preuve.

La balise Form

Les données d'un formulaire sont faites pour être traitées par des scripts, c'est à dire des programmes intégrés à une page Web.

Pour que cela soit possible, tous les composants d'un même formulaire doivent se situer entre <form> et </form>.

La page de traitement des données est spécifiée dans l'attribut action de la balise <form>.

Voici par exemple un formulaire dont la page de traitement est Traitement.html.

Il contient une zone de texte et deux boutons.

La page de traitement n'est appelée que lorsque l'on clique sur un bouton de type submit.

Vous constaterez dans cet exemple, que si vous cliquez sur le bouton b (de type button), il ne se passe rien, alors que si vous cliquez sur le bouton s (de type submit), la page de traitement contenant le message Traitement en cours ... est affichée.

Dans un formulaire, un bouton de type submi fonctionne donc comme un lien vers la page de traitement avec en plus l'envoi des données du formulaire au serveur.