Chapitre 4 HTML

4.1 Principes de base

4.1.1 Motivation initiale

La motivation initiale est de pouvoir échanger des documents sur internet en utilisant le protocole HTTP (HyperText Tranfer Protocol).

La solution proposée a été le langage HTML (HyperText Markup Language). Celui-ci est indépendant de la machine et ouvert.

Il ne s'agit pas d'un langage de programmation : HTML permet simplement de spécifier l'apparence d'un document.

Un fichier HTML est un simple fichier texte que l'on peut ouvrir et modifier avec un éditeur quelconque. Outre le texte du document, le fichier contient des balises qui vont préciser la structure et l'apparence du document.

4.1.2 Balises et attributs

Une balise peut prendre trois formes.

La première, la plus simple, un simple nom de balise encadré par les signes inférieur et supérieur :
```
 <nom_de_balise>
```
Ce sera le cas des balises BR ou HR
Dans un deuxième temps, la balise peut porter sur une partie précise du document, auquel cas, elle doit s'ouvrir et se refermer :
```
 <nom_de_balise>texte concerné</nom_de_balise>
```
Le signe / annonce la balise fermante. Voir par exemple la balise B qui met le texte encapsulé en gras.
Enfin, il peut être nécessaire de préciser le comportement de la balise, cela se fait avec des attributs, selon la syntaxe suivante :
```
 <nom_de_balise liste_attributs>texte concerné</nom_de_balise>
```
Un attribut étant défini comme ceci :
```
 nom_attribut="valeur"
```
Ainsi, un paragraphe étant défini par la balise P, l'attribut ALIGN précisera sa justification.

4.2 Structure d'un document HTML

Le squelette de base que l'on retrouvera dans tout document HTML est le suivant :

<HTML>
<HEAD>
    en-tête du document
</HEAD>
<BODY>
    corps du document
</BODY>
</HTML>

Dans l'en-tête, on définira un titre à l'aide de la balise TITLE.

4.3 Format des caractères

Les principales balises sont :

B : gras, par exemple du texte en gras.
I ou EM : mise en valeur, italique, par exemple du texte en italique.
TT : machine à écrire.
SUB : un indice, par exemple a2 qui produira a₂.
SUP : un exposant, par exemple x45 qui produira x⁴⁵.
U : souligné, par exemple un texte souligné.
Il est cependant à noter que l'utilisation de cette balise est très déconseillée : d'abord parce que le soulignement est désuet dans tout texte écrit (subsistance d'un temps où les machines à écrire ne savaient rien faire d'autre en guise de mise en valeur d'une partie du texte), et surtout parce qu'en général dans une page web ce sont les liens hypertextes qui sont soulignés).
BIG : plus gros.
SMALL : plus petit.
FONT : changement de police, taille et couleur (on écrira par exemple  ...  ou FONT COLOR="red"> ...  ou FONT SIZE="+2" COLOR="red"> ... ) bla bla.

Ces balises peuvent être imbriquées, mais il faut faire en sorte que cela produise un un bon parenthésage, comme par exemple pour [()] qui est un parenthésage correct, alors que [(]) ne l'est pas. Ainsi on pourra écrire :

  Le texte peut mis en <EM>italiques</EM>, en <B>Gras</B>, ou
  <U>souligné</U>, <FONT SIZE="+2">plus grand</FONT>, 
  <FONT SIZE="-1">plus petit</FONT> ou tout <B><EM><FONT 
  SIZE="+2">ça mélangé</FONT></EM></B>.

4.4 Mise en page des paragraphes

H1, H2, ..., H6 : titres respectivement de niveaux 1, 2, ..., 6.
Une balise de ce type peut recevoir un attribut ALIGN, comme par exemple :
```
 <H3 ALIGN="center">Un titre centré</H3>
 <H1 ALIGN="right">Un titre aligné à droite</H1>
```
CENTER : pour centrer
PRE : du texte déjà mis en page (les retours à la ligne et les espaces seront pris en compte, contrairemnt à ce qu'il se passe normalement en HTML.
BR : passage à la ligne ( n'existe pas).
P : paragraphe.
On peut utiliser la balise  sans  comme un simple séparateur de paragraphes (même effet que  , mais avec un peu plus d'espace), mais on peut aussi l'utiliser pour la mise en page de tout un paragraphe sous la forme  ...  ou  ...  ou  ... .
HR : tirer un trait horizontal (</HR> n'existe pas).

4.5 Images
La balise <IMG> s'utilise sans </IMG> sous la forme
<IMG SRC="fichier" ALT="descriptif" WIDTH="largeur" HEIGHT="hauteur">
où :
- fichier désigne le nom du fichier image à afficher (seuls formats ,autorisés : GIF, JPG, PNG) ;
- descriptif désigne un déscriptif de l'image destiné à ceux qui ne la verront pas (non ou mal voyant, erreur de votre part, problème de réseau empêchant le chargement, utilisation d'un logiciel n'affichant pas les images) ; cet attribut, bien que facultatif est fortement recommandé ;
- largeur désigne la largeur qu'aura l'image à l'écran ;
- hauteur désigne la hauteur qu'aura l'image à l'écran.
Si ni largeur ni hauteur ne sont présents, l'image aura sa taille originale. Si l'un des deux seulement est présent l'image sera mise à la taille demandée sans déformation (les deux dimensions seront adaptées). Si les deux sont présents, l'image aura la taille demandée, mais elle risque d'être déformée si les valeurs sont mal choisies.
Il s'agit d'une modification à l'affichage, pas d'une modification du fichier : si vous avez une grande images (donc un gros fichier) que vous voulez afficher en petit, il est préférable de modifier vous-même le fichier.

4.6 Caractères spéciaux

Certains caractères ne se trouvant pas sur le clavier peuvent être obtenus par des codages spéciaux.

Pour les lettres accentuées la règle de construction est simple :

le symbole « & »,
la lettre à accentuer (minucscule si on veut une minuscule, majuscule si on veut une majuscule),
l'accent à lui appliquer (acute pour aigu, grave pour grave, cedil pour une cédille, circ pour circonflexe, uml pour un tréma, tilde pour un tilda),
le symbole « ; ».

Ainsi, s'ils ne trouvent pas sur votre clavier :

« à » et « À » s'obtiendront par « à » et « À »,
« ä » et « Ä » s'obtiendront par « ä » et « Ä »,
« â » et « Â » s'obtiendront par « â » et « Â »,
« é » et « É » s'obtiendront par « é » et « É »,
« ï » et « Ï » s'obtiendront par « ï » et « Ï »,
« õ » et « Õ » s'obtiendront par « õ » et « Õ »,
« ç » et « Ç » s'obtiendront par « ç » et « Ç ».

On peut aussi noter l'existence de :

« & » pour obtenir « & »,
« < » pour obtenir « < »,
« > » pour obtenir « > ».

4.7 Liens hypertextes

Une seule balise, la balise A, permet à partir d'un document de pointer sur un autre. C'est cette balise qui tisse les fils du web.

Cette balise permet également de créer des liens à l'intérieur d'un document et de proposer l'envoi d'un mail.

Sa syntaxe de base est :

<A HREF="adresse">texte</A>

où :

adresse est la page web (ou, d'une manière plus générale, l'URL) qui sera activée par le clic.
Il peut s'agir d'un lien vers une adresse email (mainlto:machin@truc.com). Cela peut être une page quelconque sur internet (son adresse complète doit être mentionnée, y compris http://). Cela peut être une page locale (sur la même machine) : son adresse relative suffit alors. Cela peut-être un endroit précis dans la page : on écrira alors HREF="#truc", à condition d'avoir précisé <A NAME="truc"></A> à l'endroit de destination (vous avez libre choix pour le nom que vous voulez utiliser).
On peut également combiner les deux pour aller à un endroit précis d'une autre page avec HREF="page#truc"
texte est le texte qui apparaîtra à l'écran et sur lequel on devra cliquer pour utiliser ce lien.
Cela peut d'ailleurs être aussi une image (voir plus haut pour afficher une image).

4.8 Listes

Il est possible en HTML de définir différents types de listes :

des listes non ordonnées (balise UL) ;
des listes ordonnées (balise OL) ;
des listes de définition (balise DL).

Il est naturellement possible d'imbriquer plusieurs listes, qu'elles soient de même type ou pas.

4.8.1 Liste non numérotée

Ce code HTML...	... produira cet affichage
Un peu de texte avant une liste non numérotée. <UL> <LI> Un élément de liste qui peut être aussi long que nécessaire, produira cet effet, <LI> mais un petit texte <LI> fonctionnera tout autant. </UL> Un peu de texte après une liste non numérotée.	Un peu de texte avant une liste non numérotée. Un élément de liste qui peut être aussi long que nécessaire, produira cet effet, mais un petit texte fonctionnera tout autant. Un peu de texte après une liste non numérotée.

4.8.2 Liste numérotée

Ce code HTML...	... produira cet affichage
Un peu de texte avant une liste numérotée. <OL> <LI> Un élément de liste qui peut être aussi long que nécessaire, produira cet effet, <LI> mais un petit texte <LI> fonctionnera tout autant. </OL> Un peu de texte après une liste numérotée.	Un peu de texte avant une liste numérotée. Un élément de liste qui peut être aussi long que nécessaire, produira cet effet, mais un petit texte fonctionnera tout autant. Un peu de texte après une liste numérotée.

D.Gonzalez (gonzalez@univ-lille3.fr) en date du th ,