Notes de cours sur le langage HTML

Rappel succinct des points évoqués en cours sur le langage HTML et en particulier les nouveautés amenées par HTML5.

Principes généraux

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 uniquement de structurer 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 ou l'apparence du document.

Balises et attributs

Une balise peut prendre trois formes.

La première, la plus simple, un simple nom d'élément encadré par les signes inférieur et supérieur :
```
  <nom_élément>
```
Ce sera le cas des éléments 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_élément>texte concerné</nom_élément>
```
Le signe / annonce la balise fermante. Voir par exemple l'élément 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_élément liste_attributs>texte concerné</nom_élément>
```
Un attribut étant défini comme ceci :
```
  nom_attribut="valeur"
```
Ainsi, un paragraphe étant défini à l'aide de l'élément P, l'attribut ALIGN précisera sa justification.

Structure d'un document

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 obligatoirement un titre à l'aide de l'élément TITLE.

Voir également les attributs de la balise BODY pour la définition des couleurs du document et d'une éventuelle image de fond.

Pour être plus rigoureux, la première ligne d'un document HTML doit mentionner un DOCTYPE, c'est-à-dire le langage HTML que l'on va utiliser dans la suite. Les variations possibles sont :

respecter ou pas les contraintes d'un langage XML : si oui, il s'agit de XHTML, sinon de HTML 4.01 ;
se restreindre aux éléments purement sémantiques ou s'autoriser les éléments de mise en forme : dans le premier cas on fait du Strict, sinon du Transitional.

Une autre précision important est l'encodage utilisé pour les caractères : il pourrait s'agir de latin1, d'utf8, etc.

Finalement, si l'on fait le choix d'un HTML avec contraintes XML, éléments de mise en forme et codage des caractères en UTF8, le squelette du document devient :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    en-tête du document avec un title

</head>
<body>

    corps du document

</body>
</html>

Éléments, balises et attributs

Éléments de base

`B`	gras
`I`	italique
`U`	souligné
`S`	barré
`TT`	machine à écrire
`BIG`	plus gros
`SMALL`	plus petit
`FONT`	changement de police, taille et couleur
`H1 ... H6`	titre de niveau 1, niveau 2, etc.
`EM`	mettre du texte en avant
`STRONG`	mettre du texte en avant, plus fortement encore
`CENTER`	pour centrer
`PRE`	du texte déjà mis en page
`KBD`	texte tapé au clavier
`SUB`	un indice
`SUP`	un exposant
`BR`	passage à la ligne
`P`	paragraphe
`HR`	tirer un trait
`IMG`	insérer une image
`ABBR`	définir une abréviation
`BLINK`	texte clignotant
`MARQUEE`	texte défilant

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 ou encore de proposer l'envoi d'un mail.

Listes

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

des listes non ordonnées (élément UL, l'élément LI permet de définir chaque item) ;
des listes ordonnées (élément OL, l'élément LI permet de définir chaque item) ;
des listes de définition (DL, LH, DT et DD).

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

Caractères spéciaux et réservés

Les entités permettent d'obtenir des caractères qui ne sont pas toujours accessibles depuis une combinaison de touches au clavier, ou des caractères qui sont déjà réservés par le langage HTML.

Une entité est un code encadré par une esperluette (&) et un point-virgule (;). Quelques exemples :

`É`	É
`&oelig;`	œ
`À`	À
`©`	©
`û`	û
`ç`	ç
`<`	<
`>`	>
`&`	&
`...`	...

Tableaux

Quatre éléments pour définir des tableaux :

TABLE pour la définition du tableau ;
TR pour définir une ligne ;
TH pour une case de titre ;
TD pour une case de données, c'est-à-dire une case quelconque.

Images réactives

La base est une image quelconque insérée avec l'élément IMG en précisant, à l'aide de l'attribut USEMAP qu'une carte est associée à l'image.

Les éléments MAP et AREA permettent ensuite de définir des régions dans l'image et d'associer des adresses à chacune de ces régions.

En cas de superposition de deux zones, c'est la première définie qui sera activée si l'utilisateur vient à cliquer dans la partie commune aux deux zones.

Frames

Définition de frames

Inconvénients de frames

difficulté pour les moteurs de recherche d'indexer correctement un site utilisant des frames ;
impossibilité pour un utilisateur de poser des favoris sur les pages internes d'un tel site.

C'est pourquoi les frames ne sont plus utilisées sur Internet. Cependant, elles peuvent être utilisées lorsque les deux inconvénients deviennent négligeables, par exemple pour aider à la navigation sur un CD-ROM contenant des documents HTML.

Formulaires

Un premièr élément permet de délimiter le formulaire et de préciser le traitement qui devra être effectué sur les données recueillies : FORM.

La majorité des entrées (texte et boutons) peuvent être réalisées avec l'élément INPUT.

Si l'on a besoin d'une saisie de texte s'étendant sur plusieurs lignes, on utilisera l'élément TEXTAREA.

Pour une liste déroulante, il s'agira de l'élément SELECT associé à l'élément OPTION pour définir chacun des items de la liste.

Vous pouvez tester vos propres formulaires en suivant les instructions de cette page.

Nouveautés HTML5

On décrit ici les nouveautés HTML5 (simplications, nouveaux éléments sémantiques et microdata) qui ne concernant pas les aspects dynamiques. Pour les questions de canvas et de programmation Javascript, on se reportera au cours de JavaScript et à la page des travaux pratiques JavaScript.

Simplifications et nouveautés

HTML5 introduit des simplifications du début des fichiers HTML, en particulier la première ligne de DOCTYPE, la déclaration du codage des caractères utilisé, le lien vers la feuille de style et l'inclusion de code JavaScript.

Ainsi, le squelette général d'une page HTML5 sera :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script href="truc.js"></script>

    en-tête du document avec un title

</head>
<body>

    corps du document

</body>
</html>

Notons aussi :

l'attribut prefix pour remplacer la notation xml des espaces de noms,
de nouveaux types d'input pour les formulaires, date par exemple.

Disparitions

Fin des éléments center, tt (à compenser par css),
fin des attributs de mise en forme des tableaux ou des images : align et valign, width et height, cellpadding et cellspacing, border,etc. (à compenser par css),
disparition de l'attribut name pour définir des ancres (au profit de id),
interdiction d'une action vide pour un formulaire (dans ce cas, on ne met pas du tout l'attribut action dans la balise ouvrante form).

Nouveaux éléments sémantiques

Liste non exhaustive :

main: Délimite la portion principale du document.
article: Permet de définir un tout cohérent pouvant être extrait du document et resté autonome.
section: Identifie un bloc de contenu qui est lié au reste du document et qui par conséquent ne justifie une existence propre.
aside: Décrit un contenu sans rapport direct avec le contenu du document (publicités, archives du site, etc.).
header: Spécifie l'en-tête du bloc concerné, ce bloc pouvant être le document lui-même, un article ou une section.
footer: Idem pour le pied de page du bloc concerné.
nav: Délimite une partie du document dédiée à un rassemblement de liens internes au site.
time: Permet d'indiquer une date ou une durée.
figure: Encadre une ou plusieurs images accompagnées d’une légende.
figcaption: Précise la légende au sein d'une figure.
mark: Attire l'attention du lecteur sur une portion de texte.
video: Permet d'insérer un contenu vidéo.
audio: Permet d'insérer un contenu audio.

Les microdata

les différents vocabulaires http://schema.org/docs/schemas.html

trois nouveaux attributs en HTML5

itemscope
itemtype
itemprop

La valeur est le texte sauf pour A (HREF) et IMG (SRC)

Conclusion

HTML reste aujourd'hui le langage de publication sur le web par excellence. Cependant, on note l'abandon des balises de pure mise en page, celles-ci étant avantageusement remplacées par les feuilles de style. Ainsi, il est recommandé de ne plus utiliser de balises comme FONT, B, I, etc.

De manière générale, les balises HTML ne doivent être utilisées que pour structurer le document, et non plus pour préciser son apparence.

site de Fabien Torre