Contenu du cours
I. Généralités
1. But et limitations de ce cours
Le HTML est un langage dit « de balisage » pour concevoir des sites Web. Le but de ce cours est d'en présenter un aperçu général,
ainsi que du langage CSS, qui permet d'en traiter l'apparence visuelle. Les navigateurs de la quatrième génération (en particulier Netscape Navigator 4.xx et Internet Explorer 4) ne supportent pas toutes les balises, les interprètent parfois mal, voire ont introduit d'autres balises qu'ils sont seuls
à comprendre ; cependant, comme ces navigateurs ont quasiment disparu, nous allons nous contenter de passer en revue les recommandations
du HTML 4.01 standardisé.
Nous n'étudierons pas non plus de langage de script (JavaScript ou VBScript), et nous limiterons donc à l'étude de l'HTML dit statique.
Ce cours ne fera pas référence à l'utilisation d'éditeurs dits WYSYWYG (What You See Is What You Get), car ils ne sont pas nécessaires à la compréhension du langage HTML.
2. Historique
a. Le W3C
Le W3C (World Wide Web Consortium, http://www.w3c.org) a été créé à l'occasion du premier standard du HTML : HTML 1.0. Le W3C a été créé pour développer des protocoles communs pour l'évolution du World Wide Web. C'est un consortium industriel piloté par le MIT/LCS (le Laboratoire de Recherches en Informatique du Massachusets Institute of Technology) aux États-Unis, par l'INRIA (Institut National de Recherche en Informatique et en Automatique) en France, et l'Université de Keio au Japon.
Il est constitué de 180 membres : instituts publics et entreprises concurrentes sur le marché Internet parmi lesquels des représentants des constructeurs et éditeurs de logiciels.
C'est un organisme non officiel. Le W3C n'émet que des recommandations : les concepteurs de navigateurs restent libres de s'y conformer.
b. Les versions du HTML en quelques dates
L'histoire du HTML est résumée par le W3C sur son site. On pourrait la synthétiser par le tableau suivant :
|
Date |
Événement |
|---|---|
|
1989-1992 |
Discussions, échanges et projets à l'initiative de chercheurs du CERN aboutissant à un premier |
|
1993 |
Création du navigateur |
|
septembre 1995 |
Recommandations sur le standard |
|
courant 1995 |
Synthèse des nouvelles exigences des auteurs réunies dans les recommandations du |
|
mai 1996 |
Version |
|
juillet 1997 |
Version provisoire du |
|
décembre 1999 |
Dernière version à ce jour, |
|
janvier 2000 |
Sortie du format |
|
juillet 2006 |
Sortie d'une version de travail de la recommandation |
|
juillet 2009 |
Annonce de la fin des travaux sur |
|
septembre 2009 |
Sortie d'une version de travail de la recommandation |
Table 1. Historique du HTML.
Les derniers documents de recommandation de HTML 4.01 et XHTML 1.0 du W3C sont disponibles en ligne, mais de lecture difficile.
3. Outils de production de pages Web
a. Introduction
Ainsi que vous le constaterez, il est possible de créer un site Web entier à l'aide d'un simple éditeur de texte, et d'un client FTP. Fort heureusement, si cette solution reste encore possible pour un dépannage ponctuel sur un fichier, il existe des outils dédiés qui permettent d'automatiser bon nombre des opérations fastidieuses.
b. Éditeurs
Les éditeurs HTML sont des logiciels qui aident à la saisie des balises HTML. Il en existe de deux types :
-
les éditeurs de code proprement dits, similaires à un « environnement intégré de développement » (EDI) pour un langage de programmation, qui permettent de coder les balises directement.
-
les éditeurs dits WYSIWYG, qui offrent un environnement ressemblant plus à celui d'un logiciel de traitement de texte. Ces éditeurs offrent le plus souvent maintenant la possibilité d'alterner un mode de composition visuelle avec un mode de composition directement du code source, afin de mêler les avantages des deux pratiques.
Ces éditeurs offrent de plus des facilités de gestion de site (notion de modèle de document, de projet, gestion efficace des liens internes aux documents, intégration de langages de scripts comme PHP, etc.).
c. Les Weblogs
Ces outils, comme DotClear, WordPress ou Blogger, par exemple, permettent la saisie, la mise en forme et la mise en ligne automatisée de "journaux" personnels. Conçus à l'origine
comme des outils de publication rapide à destination de quelques internautes désireux de mettre rapidement en ligne leurs
impressions quotidiennes, ils ont évolué en interfaces complexes, mais toujours sur le même principe :
-
Un auteur initial écrit un article à l'aide de l'outil, qu'il met en ligne ;
-
Les visiteurs du journal peuvent soit ajouter des commentaires, soit placer des trackbacks sur l'article, afin de créer un lien entre un article qu'ils écrivent sur leur propre blog, et l'article qu'ils sont en train de lire.
Ces fonctions de base peuvent être étendues, mais on aborde là une autre catégorie d'outils de production : les systèmes de publication de contenu proprement dits.
d. Systèmes de publication de contenu
On les désigne parfois sous leur abréviation de CMS (Content Management System). On rencontre principalement deux types de tels outils :
-
les outils entièrement ouverts, comme le format Wiki. N'importe quel internaute peut modifier la page qu'il est en train de lire. Vous pouvez consulter par exemple la Wikipedia, une encyclopédie en ligne maintenue et modifiable par tous ses lecteurs.
-
les outils de publication de contenu proprement dits, tels que SPIP, eZPublish, Joomla, Typo3... Ces outils proposent des interfaces utilisateurs plus ou moins complexes, permettant à des personnes ne connaissant pas le format
HTMLde publier du contenu sur le Web, sous une forme paramétrable.
Ces outils sont cependant loin d'offrir les mêmes fonctionnalités que ce que peut produire un webmestre expérimenté ; il s'agit
de contenu facilement publiable, préformatté. Pour aller plus loin, il est nécessaire de faire appel à un développeur spécialisé,
capable de tirer parti des richesses du langage HTML et de celui permettant sa mise en forme, le CSS. Le développeur construit alors les gabarits des pages pour les CMS.
4. Un langage structuré
a. Introduction
Un fichier écrit en langage HTML n'est autre qu'un fichier texte, mais dont le contenu est structuré à l'aide de repères que l'on appelle des éléments. Chaque élément est constitué de balises et d'attributs qui permettent d'apporter des informations sur son contenu. Nous reviendrons plus loin sur ces notions.
b. Apparence
HTML possède de nombreux éléments de gestion de l'apparence (ou formatage) de la page qui se rapprochent de ce que nous connaissons
sur les éditeurs de texte : mise en gras (b), en italique (i), indentation, taille ou couleur des caractères (font).
Pour les créateurs à l'origine de HTML, ces possibilités ne sont que des « déviances » : dans leur esprit HTML doit décrire la structure du contenu et non son apparence.
c. Qu'est-ce que la structure d'un texte au sens HTML?
Prenons par exemple la notion de paragraphe : un paragraphe peut être présenté « à la française » avec une indentation de la première ligne ou « à l'américaine » sans indentation. L'indentation de la première ligne fait partie des apparences possibles d'une même structure de texte : le paragraphe.
On trouve ainsi dans HTML de quoi structurer listes, titres, tableaux, citations, adresses... autant de structures du texte qui ne définissent pas
l'apparence finale à l'écran.
d. Pourquoi distinguer la structure et l'apparence?
Trois raisons parmi d'autres :
-
Une raison historique :
HTMLest une application du langage documentaireSGML(Standard Generalized Markup Language) conforme au standard ISO 8879. Ce langage de technique documentaire est très complexe. De plus, c'est un langage de structuration de l'information et non un langage de présentation. Or les premières versions duHTMLse sont éloignées de cet aspect de structuration pour tendre vers le codage de la présentation. En ce sensHTMLn'est donc qu'une application abâtardie duSGML; -
Une raison de portabilité : ce langage doit être totalement indépendant des plateformes et des navigateurs. Or plus les balises s'attachent à la gestion de l'apparence finale et sont pour cela détournées de leur fonction de structuration, plus l'effet obtenu est dépendant de la plateforme et du navigateur ;
-
Une raison de libre choix de l'utilisateur : l'utilisateur final doit pouvoir modifier lui-même la présentation (taille des caractères...) à l'aide d'options du navigateur. Un navigateur particulier devrait par exemple pouvoir lire et énoncer à un aveugle le contenu d'un document
HTML. La prise en compte des utilisateurs présentant des handicaps particuliers fait l'objet de soins redoublés depuis quelque temps, en raison notamment de la publication en 2005 de la loi n° 2005-102 du 11 février 2005 « pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées ».
HTML est une chance pour le monde informatique puisqu'il offre un moyen d'échange de document indépendant de tous producteurs
de logiciels. Cet aspect est poussé plus en avant dans la définition du format XML.
e. Une ligne de conduite du W3C
Malgré la création par MicroSoft et Netscape de balises d'apparence, le W3C a tenté avec succès de maintenir cette séparation entre structure et présentation. Le W3C a adjoint au HTML la notion de feuille de style à travers le langage CSS (Cascading Style Sheet). HTML décrit la structure du langage, CSS décrit la présentation. Ainsi, un même document HTML peut être présenté de différentes façons à l'aide de différentes feuilles de style.
Cette tendance est plus développée dans le langage XHTML, une extension du XML, dont la recommandation « stricte » interdit tout élément de présentation dans le corps du document, et reporte les informations
de ce type dans la feuille de style.
f. Validité du code
Les recommandations ont permis aux concepteurs de navigateurs et d'outils d'édition de se mettre d'accord sur ce qu'il était possible de faire faire aux navigateurs. Elles précisent l'ordre dans lequel les éléments doivent être écrits les uns à la suite des autres, ou imbriqués, ainsi que les éléments et attributs autorisés en fonction du contexte.
Lorsque le code source respecte une de ces recommandations, le fichier est dit valide. S'assurerr de la validité d'un code est le préalable indispensable avant de commencer à déboguer par exemple une mise en page incorrecte. En présence de code invalide en effet, les navigateurs doivent extrapoler et essayer de « deviner » ce que le concepteur avait en tête ; il ne peut en résulter que des différences d'interprétation et des risques de voir la mise en page être complètement dégradée.
Bien sûr, valider un code ne suffit pas à régler la totalité des problèmes de mise en page dûs au support incomplet des standards par les navigateurs ; mais cela permet assurément d'en régler la très grande majorité, et c'est par conséquent une démarche indispensable. Nous reviendrons plus loin sur les outils permettant de tester cette validité.
5. Accessibilité
On pourrait voir dans l'importance qui est données aujourd'hui aux questions d'accessibilité une conséquence de l'amélioration
progressive du support des standards du Web par les navigateurs. Aux temps pas si lointains de la « Balkanisation » du Web,
lorsque Netscape et Internet Explorer se livraient une guerre sans merci à coups de balises et d'effets propriétaires, la priorité numéro 1 des développeurs était
de s'assurer que leur site s'affichait grossièrement de la même manière dans les deux navigateurs.
Maintenant que les standards du Web se sont répandus et sont mieux supportés (à la date de révision de ce cours, septembre
2009, au contraire de ce qui se passait il y a six ans, le facteur limitant est incontestablement, dans ce domaine, Internet Explorer qui est de loin à la traîne, même si Internet Explorer 7 puis 8 ont permis de combler une partie de ce retard), la classe de problèmes à résoudre pour les développeurs s'est déplacée.
Il s'agit maintenant de faire en sorte que le plus grand nombre de personnes possibles aient accès à leur site.
Il ne faut pas entendre par là uniquement un accès ADSL ou par modem... mais bien de la consultation possible du site et des informations qui s'y trouvent. Cela passe, par exemple, par l'ajout de contenu alternatif aux images pour les personnes ayant choisi de ne pas les afficher, ou incapables de les examiner en détails, mais aussi par la présentation soignée de données dans un tableau (fournir un résumé du tableau, des entêtes de colonnes reconnus comme tels par des navigateurs-lecteurs de contenu), la structuration du contenu, des aides à la navigation, etc.
Avoir un code valide est, là aussi, la première étape. Des outils existent en ligne ou hors-ligne afin de faciliter ce genre de tests :
Récemment, la loi n° 2005-102 du 11 février 2005 « pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » est parue au Journal Officiel. Cette loi, qui est entrée en application dès la signature du décret le 14 mai 2009 et sa publication au Journal Officiel, stipule ainsi que « les services de communication publique en ligne des services de l'Etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées. » Les sites des administrations et collectivités territoriales devront se mettre en conformité avec la loi dans un délai de trois ans suivant la parution du décret.
Pour plus d'informations sur ce sujet, vous pouvez consulter WebAIM (en anglais), AccessiWeb ou le site du Référentiel Général d'Acessibilité pour les Administrations (en français).
II. Structure et principes de base
1. Les briques : balises et attributs, commentaires
a. Balises
Les briques élémentaires d'un document HTML sont les balises, dotées ou non d'attributs. Ces balises permettent de structurer l'information. Une balise, sauf exceptions,
s'ouvre et se ferme. Par exemple, pour déclarer un paragraphe, on écrira...
<p>Ceci est un paragraphe.</p>
Il est possible également de déclarer un texte souligné :
<p><u>Ceci est un paragraphe souligné.</u></p>
Le navigateur ne fera pas apparaître les balises (ou tags ou marqueurs) <p>, </p>, <u> ou </u> mais interprètera leurs effets. Le deuxième exemple apparaît comme suit :
La balise est le moyen de communiquer avec le navigateur. Elle apparaît entre les caractères réservés < et >.
b. Attributs
Par exemple,
<p align="right">Ceci est un paragraphe aligné à droite.</p>
a pour effet... d'aligner le texte à droite.
La syntaxe utilisée est la suivante :
<balise attribut1="valeur1" attribut2="valeur2" attribut3="valeur3">blabla</balise>
Le séparateur est un espace, l'ordre n'a pas d'importance. La valeur de l'attribut doit être tapée en minuscules, et mise
entre guillemets (pour des raisons de compatibilité XHTML). Certains navigateurs acceptent une écriture sous la forme align=Right, par exemple, mais cela n'est pas conforme aux recommandations du W3C, et les navigateurs récents ne sont pas tenus de respecter
cette syntaxe.
Les attributs permettent de modifier le comportement par défaut d'une balise, ou bien de spécifier des informations indispensables (comme l'adresse d'une image intégrée à la page, ou bien celle d'un lien externe).
Enfin, l'ordre dans lequel les attributs sont écrits n'a pas d'importance.
c. Commentaires
Indispensables dans certains cas, ils alourdissent cependant le temps de chargement d'une page. Ils n'apparaissent pas dans la fenêtre du navigateur. La syntaxe est la suivante :
<!-- Commentaire -->
2. Les parties d'un document HTML
Voici par exemple un document HTML minimal :
<html>
<head>
<title>Premiers pas</title>
</head>
<body>
<p>Bonjour tout le monde!</p>
</body>
</html>
Les deux parties fondamentales d'un document HTML sont l'entête (head) et le corps (body). Nous allons les voir séparément par la suite...
b. Caractères spéciaux
Le langage donne la possibilité de pouvoir afficher à l'écran des caractères qui soit ne peuvent pas être directement saisis
au clavier, soit n'existent pas dans l'encodage choisi. Il faut faire appel pour cela à des entités numériques ou alphabétiques (définies afin de faciliterc la vie des codeurs...). Par exemple, un caractère "espace insécable"
se code indiféremment par , ou bien par  .
Les entités permettent d'avoir accès à des caractères qui ont un sens en HTML. Ces caractères sont :
|
Caractère |
Entité |
|---|---|
|
< |
|
|
> |
|
|
& |
|
Table 2. Tableau de correspondances entre les entités et les caractères réservés en HTML.
D'autres entités renvoient à des caractères spéciaux :
|
Caractère |
Entité |
Caractère |
Entité |
|---|---|---|---|
|
à |
|
â |
|
|
ä |
|
æ |
|
|
é |
|
è |
|
|
ê |
|
ë |
|
|
ù |
|
û |
|
|
ü |
|
ö |
|
|
ï |
|
î |
|
|
ç |
|
œ |
|
Table 3. Principales entités de caractères utilisées en français. Il est également possible d'utiliser des accents sur des majuscules.
Par exemple, l'entité &Aagrave; renvoie au caractère À.
3. L'entête
a. Élément title
Le contenu de l'élément title est le titre du document HTML : ce titre est affiché dans la barre de titre du navigateur.
b. Élément meta
L'élément meta permet de donner des « méta-informations » sur le document. On écrira ainsi, par exemple :
<meta name="author" content="G. Chagnon">
<meta name="keywords" content="HTML, initiation">
<meta name="description" content="Cette page fournit une introduction au langage HTML">
<meta name="date" content="2003-09-19T16:55:37+01:00">
Il est possible également de transmettre des données au navigateur via le protocole HTTP :
<meta http-equiv="Expires" content="Sat, 11 Oct 2003 07:30:27 GMT">
L'exemple précédent indique au navigateur quand il lui sera nécessaire de rafraîchir le contenu de son cache, au cas où l'internaute décide de revisiter la page.
c. Élément script
Cet élément permet d'introduire un script (un petit programme permettant l'utilisation d'effets dynamiques dans la page).
Elle admet un attribut obligatoire, type, qui indique son... type (par exemple, type="text/javascript"). L'attribut language est obsolète. Cette balise admet d'autres attributs, comme src, qui indique la localisation sur le Web du fichier où se trouve le script (ce que l'on appelle l'URL).
d. Encodage des caractères
Les fichiers, sur une unité de mémoire comme un disque dur, sont enregistrés comme des suites de 0 et de 1. Ces suites sont organisées en séquences (par exemple d'un octet), et chaque séquence est associée à un encodage de caractères. Cet encodage est une relation univoque entre une suite de 0 et de 1 d'une part, et un caractère d'autre part. Or les capacités
des disques durs sont limitées ; il a donc fallu limiter en retour le nombre de 0 et de 1 par séquence représentative de caractère.
Comme le nombre total de caractères à représenter dans les langues écrites sur Terre est bien supérieur au nombre de combinaisons
possibles de ces suites de 0 et de 1, une même suite peut être interprétée de plusieurs manières. C'est la raison pour laquelle
il est impératif de mentionner explicitement l'encodage de caractères utilisé lors de la sauvegarde du fichier dans l'entête du fichier HTML ; faute de quoi, on court le risque que les caractères comme les accents par exemple soient affichés dans un autre alphabet.
Cela est réalisé à l'aide de l'élément meta :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
D'autres valeurs d'encodages sont possibles comme l'UTF-8 par exemple, qui offre le plus de possibilités. Il faut néanmoins veiller à ce que l'encodage déclaré corresponde effectivement à l'encodage réel du fichier sur le serveur. Ce dispositif vient en complément du paramétrage de l'entête HTTP délivré par le serveur lorsqu'il doit fournir le fichier au poste client.
e. Élément link
Cette balise permet de spécifier les URLs de fichiers liés d'une manière ou d'une autre au document. Par exemple,
<link rel="stylesheet" type="text/css" href="cours.css">
<link media="print" title="Version PostScript" type="application/postscript" href="http://someplace.com/manual/postscript.ps" rel="alternate">
<link title="The manual in English" rel="alternate" hreflang="en" href="http://someplace.com/manual/english.html" type="text/html">
4. Le corps
Il contient tout ce qui apparaîtra dans la fenêtre du navigateur. Nous y reviendrons quand nous aborderons les éléments HTML.
5. Le prologue
On peut trouver, de manière facultative, à la toute première ligne du document, la déclaration suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
La déclaration précédente fait référence au HTML strict ; le HTML dit « de transition » se déclare ainsi :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Cette seconde déclaration permet d'ajouter des balises de présentation.
Selon la norme SGML, la signification des balises du HTML, leurs syntaxes, leurs organisations sont résumées dans un document appelé DTD, (Document Type Definition). Cette ligne précise à quelle DTD fait référence le HTML utilisé.
Il s'agit donc ici d'une DTD publique écrite en anglais (EN) par le W3C correspondant à la version 4.01 du HTML. Cette déclaration est utile à des validateurs afin de déterminer si le code HTML du document est correct ou non.
Indiquer le type de document et l'encodage de caractères permet la validation du code, à l'aide du validateur HTML en ligne du W3C.
