site de Fabien Torre


Notes de cours sur le langage HTML

Motivations et principes du langage HTML pour la structuration de documents sur le web : éléments, balises, attributs, entités, métadonnées, nouveautés amenées html5, codages de questionnaires sous forme de formulaires HTML, etc.

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

Bgras
Iitalique
Usouligné
Sbarré
TTmachine à écrire
BIGplus gros
SMALLplus petit
FONTchangement de police, taille et couleur
H1 ... H6titre de niveau 1, niveau 2, etc.
EMmettre du texte en avant
STRONGmettre du texte en avant, plus fortement encore
CENTERpour centrer
PREdu texte déjà mis en page
KBDtexte tapé au clavier
SUBun indice
SUPun exposant
BRpassage à la ligne
Pparagraphe
HRtirer un trait
IMGinsérer une image
ABBRdéfinir une abréviation
BLINKtexte clignotant
MARQUEEtexte 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 :

&Eacute;É
&oelig; œ
&Agrave;À
&copy; ©
&ucirc; û
&ccedil;ç
&lt; <
&gt; >
&amp; &
... ...

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.

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.


Fabien Torre Valid HTML5! Valid CSS!
Accueil > Enseignement > Cours > Documents numériques > HTML
(contenu mis à jour )
site de Fabien Torre, université de Lille

Description

Survoler un lien de navigation pour lire sa description ici...