Notes de cours sur le langage HTML

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 l'élément 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

Un seul élément, l'élément A, permet à partir d'un document de pointer sur un autre. C'est cet élément qui tisse les fils du web.

Cet élément 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.

Formulaires

Questions et réponses (name, value... et id !)

Dans un formulaire, on trouve des questions et des réponses, elles seront respectivement codées par les attributs HTML name et value. Ce sont les valeurs de ces attributs qui seront transmises lors de la validation du formulaire.

Le nom d'une question donné dans un attribut name peut se terminer par des crochets []. Cela signifie que l'utilisateur pourra donner plusieurs réponses à une même question et c'est une liste de valeurs qui sera transmise.

Selon la forme que prend une question, son name peut apparaître une ou plusieurs fois. L'attribut value peut ne pas apparaître du tout, ou il peut être dans un élément qui porte l'élément name, ou ailleurs !

Enfin, les attributs id peuvent aussi être utilisés, pas spécifiquement pour le traitement des questions/réponses du formulaire, mais pour des mises en forme CSS et des manipulations JavaScript. Il faut alors une certaine discipline pour nommer et discerner le NAME et l'ID d'un même élément !

Le formulaire

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

Il s'utilise avec ses attributs action et method : le premier indique l'adresse du script auquel il faut transmettre les réponses, le second la méthode de transmission (GET OU POST).

Les inputs

La majorité des entrées (texte et boutons) peuvent être réalisées avec l'élément INPUT. Son attribut type est à choisir parmi :

text : saisie d'une ligne de texte,
radio, checkbox : des boutons à cocher, choix unique ou choix multiples,
submit / reset : boutons pour valider le formulaire ou le réinitialiser (l'attribut value précise le texte visible sur le bouton),
range : valeur numérique sur un curseur hortizontal,
number : saisie d'un nombre,
hidden : champ caché à l'utilisateur,
(week, month, date),
(url),
(password).

D'autres attributs peut être précisés :

name pour donner le code de la question,
value pour fixer la réponse,
size pour fixer la taille du texte apparent,
checked pour cocher un bouton à l'avance,
placeholder pour donner une indication qui disparaîtra à la saisie,
min, max, step.

Listes déroulantes

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.

la balise SELECT porte l'attribut NAME,
les balises OPTION portent les VALUEs.

On peut sélectionner une option particulière à l'avance avec l'attribut SELECTED.

Texte sur plus d'une ligne

Si l'on a besoin d'une saisie de texte s'étendant sur plusieurs lignes, on utilisera l'élément TEXTAREA avec attributs NAME, COLS et ROWS (les deux derniers permettant de préciser la taille apparente de la fenêtre de saisie).

Structurations

L'élément LABEL permet d'encadrer l'intitulé d'une question ou d'une réponse. L'attribut FOR permet de préciser l'ID de la question/réponse associée au label.

Les éléments FIELDSET et LEGEND permettent d'encadrer une question et ses options de réponses.

Enfin, l'élément OPTGROUP permet grouper des options dans une liste déroulante. L'attribut LABEL permet de donner un titre à un groupe.

Essai de transmission

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

Langage 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 est le langage de publication sur le web par excellence. Cependant, on note l'abandon des éléments de pure mise en forme, ceux-ci étant avantageusement remplacés par les feuilles de style. Ainsi, il est recommandé de ne plus utiliser les éléments comme FONT, B, I, etc. De manière générale, les balises HTML doivent être utilisées pour structurer le document et pour apporter des informations sémantiques sur le contenu, non plus pour préciser son apparence.

site de Fabien Torre