Formation HTML

Structure d'un document HTML

Structure générale

Le document est constitué d'un élément racine html. dans le cas du xHTML c'est une contrainte liée au format du XML.
Le document est divisé en 2 parties : entête (head) et corps (body).
Chaque partie peut aussi être subdivisée : body contient div qui contient table ....
Toutes ces parties englobent les éléments descriptifs du document.
Chaque segment commence et se termine par une balise de même type (contrainte du XML) : <p>bonjour</p>.
Les caractères de fin de ligne 0x0D et 0x0A sont vus comme des espaces. Tout groupe d'espaces consécutifs est ramené à 1 espace.

Les balises

Une balise est une suite de caractères entre < et >
Exemple : <body>, <head>
À toute balise de début doit correspondre une balise de fin (contrainte XML). Exemple : <body> ... ... </body>
Une balise sans contenu peut être auto-fermante en se terminant par / (contrainte XML). Exemple : <br/>
Une balise peut contenir des attributs qui s'appliqueront jusqu'à la balise de fin Exemple : <form method="post"> ... ... </form>

On voit souvent apparaître la syntaxe /> (avec présence d'un espace supplémentaire) en fermeture des balises sans contenu comme par exemple <br />. Bien que ceci ait eu un intérêt du temps ou les très vieux navigateurs étaient perturbés par la présence d'un caractère / en fin de nom de balise ceci n'est plus nécessaire depuis le tout début du XXI siècle. Pour ne pas gaspiller la bande passante il sera judicieux de ne pas placer d'espaces désormais inutiles.

Les ressources externes

Le concept de ressources externes est à l'origine du web (introduit par la balise <a>).
Sur le web toute ressource peut être indiquée :
- en absolu, tout est indiqué dans l'URL : http://mon‑super‑site/ma/page/web.html
- en relatif par rapport au serveur (même serveur que celui ayant délivré la page) : /ma/page/web.html
- en relatif par rapport à la page (la recherche partira du même point que la page courante) : web.html
La bonne pratique est d'utiliser au maximum les références relatives.

Les ressources externes

Cas général d'un URL (Uniform Ressource Locator) :

protocole://user:password@serveur:port
    /full/path/name/nom_du_document?arg1=val1&ar2=val2 ...

protocole type de service : HTTP, FTP, file, ...
user utilisateur (connexion authentifiée),
password mot de passe (connexion authentifiée),
serveur nom ou l'adresse IP du serveur,
port port de communication (si autre que port par défaut),
/full/path/name/nom_du_document chemin de la ressource serveur,
arg1=val1&ar2=val2 ... paramètres utilisés par serveur (utiles si script).

Exemples de liens

Lien sur des pages HTML (positionnement absolu permettant de viser un autre site) :
```
<a href="http://www.mon-site.com/accueil">bonjour
 à tous</a>
```

Lien vers un script perl exécuté par le même serveur :

<a href="/cgi-bin/script.pl?age=53&sexe=M">homme
 53 ans</a>

Lien vers la messagerie :

<a href="mailto:Jean.Dupont007@gmail.com">écrire
 à Jean</a>

Exemples de liens

Lien sur des fichiers à télécharger par FTP :

<a href="ftp://mon-site.fr/repertoire/fichier.txt">charger
 le fichier</a>

Lien sur des fichiers locaux (machine du client web) (à éviter) :
```
<a href="file:///home/mdurand/fichier.txt">fichier
 local</a>
```

URL et DNS

Les URL font référence au service de nommage de l'internet (DNS).
Le DNS assure la conversion adresse IP et nom de domaine.
Un URL accepte les deux représentations. Par exemple :
http://127.0.0.1/mon/site/index.html et
http://localhost/mon/site/index.html
conduiront à la même ressource.
Un nom de domaine ne peut contenir des caractères autres que lettres minuscules, chiffres et le signe -,
Il ne peut commencer ni se finir par -.
Le caractère . sert de séparateur de sous domaines.

Quelques ressources externes

Un document HTML a souvent recours à
- des feuilles de style CSS,
- des images PNG pour les graphiques,
- des images JPEG pour les photos,
- des scripts Javascript,
- des applets JAVA, Flash, ...
Les formats d'image GIF bien que normalisés par W3C sont à éviter,
les autres formats tels que BMP, XPM, ... sont à bannir !

Ressources internes

Il est également possible de glisser du contenu dans un fichier HTML sans recourir à des ressources externes.
Le mécanisme repose sur l'utilisation des URI de type données (Data URI scheme).
Une URI de type data est potentiellement très longue car elle contient la donnée identifiée.

Structure d'une URI de type data :

data:[<MIME-type>][;charset=>encoding>][;base64],données

Exemple d'une image embarquée au format png ( image intégrée au document

) :

data:image/png;base64,
 /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////
 ////////////////////////////////////////////2wBDAVVaWnhpeOuCguv/////////////
 ////////////////////////////////////////////////////////////wAARCAAPAFADASIA
 AhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAQIAA//EACgQAAICAAQFBAMBAAAAAAAAAAECABED
 EjHRISIyQVFSYZGSM3Gh4f/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAA
 AAAAAP/aAAwDAQACEQMRAD8A7gKqISq0as1ILrlBGGulnhKz4bYIRm7eIFsO2KvV+0qLVbP40rzI
 ehiEAKB+hFcRFoDE5R2qS7KXLBx8HaRRRNgBbHbKNpiCAenga6f8hY9Y8aHaYkG+cceOh2kFZWuq
 XWtBJv2X6iOYXeca3odoEqT1r8HaBr9l+oiDd2Boew8Q5fWP7tMCovmGh8wP/9k="

L'encodage des données par défaut est celui des URLs avec substitution des carractères spéciaux par leur valeur hexadécimale préfixée de %, c'est pourquoi on lui préférera le base64 qui accepte comme montré dans cet exemple une mise en forme avec des espaces et des sauts de ligne.

L'intérêt de ce type de contenu est dans de la génération de messages électroniques au format HTML. Hélas si la plupart des navigateurs WEB le comprennent parfaitement y compris dans la balise object c'est une toute autre histoire pour les clients E-mails et webmails car ils répondent correctement au format multipart/related et encore avec réserves (pas de CSS externes) mais pratiquement aucun ne supporte le mode des ressources embarquées. Citons cependant thunderbird qui comprend parfaitement ce type de contenu aussi bien en monolithique qu'en multipart.

Les nouveautés en HTML 5

Le HTML 5 apporte les types de contenus suivants :
- les flux vidéos,
- les flux audios,
- les images SVG pour le dessin vectoriel,
- les canevas pour le dessin bitmap, ...

Bien que très attrayant, les flux audio sont à utiliser avec parcimonie, et surtout sur requête explicite de l'internaute car dans un environnement de travail ils conduisent à la réalisation de sites insupportables et qui, je l'espère, pourront être éliminés très en amont par les moteurs de recherches.

Les nouveautés en HTML 5

En HTML 5 l'approche des familles d'éléments de type block et inline a été abandonnée au profit d'un modèle comprenant :
- des contenus de type Metadata
- des contenus de type Flow
- des contenus de type Sectioning
- des contenus de type Heading
- des contenus de type Phrasing
- des contenus de type Embedded
- des contenus de type Interactive

Les éléments peuvent appartenir à plusieurs catégories dans ce modèle.

Les types d'affichage block et inline continuent d'exister mais cette notion ne concerne que les CSS.

Les nouveautés en HTML 5

Pour conclure

Un document HTML est un document composite.
Dans le cadre d'un usage standardisé et donc implicitement reconnu par les navigateurs :
- la présentation sera assurée par des feuilles de style CSS,
- les comportements seront définis par des scripts javascript (DOM),
- la structure sera assurée par le document HTML.