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.

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. 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 HTML qualifié par la suite de version numéro 0. 1993 Création du navigateur MOSAIC (sans tréma) par le NCSA de l'Université de l'Illinois. Ce navigateur tourne sur les PC. Création du W3C. Publication des recommandations formant la version HTML 1.0. septembre 1995 Recommandations sur le standard HTML 2.0 (insertion d'images, de tableaux, de listes et de formulaires). courant 1995 Synthèse des nouvelles exigences des auteurs réunies dans les recommandations du HTML 3.0 : trop ambitieuse, elle n'a jamais trouvé de consensus au sein même du W3C. mai 1996 Version HTML 3.2 (liens sur image, applet Java, JavaScript...), reprise de la version 3 édulcorée. juillet 1997 Version provisoire du HTML 4.0 (frames, feuilles de style, intégration d'éléments multimédias). décembre 1999 Dernière version à ce jour, HTML 4.01 n'apportant que des corrections minimales à la version précédente. janvier 2000 Sortie du formatXHTML 1.0, une extension du XML. juillet 2006 Sortie d'une version de travail de la recommandation XHTML 2.0. juillet 2009 Annonce de la fin des travaux sur XHTML2.0 à la fin de 2009. septembre 2009 Sortie d'une version de travail de la recommandation HTML 5. 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.

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. 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.). 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. 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 HTML de 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.

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. 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. 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. Trois raisons parmi d'autres : Une raison historique : HTML est une application du langage documentaire SGML (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 du HTML se sont éloignées de cet aspect de structuration pour tendre vers le codage de la présentation. En ce sens HTML n'est donc qu'une application abâtardie du SGML; 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. 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. 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é.

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 : Cynthia Says Wave A-Prompt... 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).

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... Ceci est un paragraphe. Il est possible également de déclarer un texte souligné : Ceci est un paragraphe souligné. Le navigateur ne fera pas apparaître les balises (ou tags ou marqueurs) ]]>, ]]>, ]]> ou ]]> mais interprètera leurs effets. Le deuxième exemple apparaît comme suit : Exemple de soulignement

La balise est le moyen de communiquer avec le navigateur. Elle apparaît entre les caractères réservés et ]]>. Par exemple, rightCeci est un paragraphe aligné à droite. a pour effet... d'aligner le texte à droite. La syntaxe utilisée est la suivante : valeur1valeur2valeur3blabla 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. 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

Voici par exemple un document HTML minimal : Premiers pas Bonjour tout le monde! 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... 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é ]]> 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é à â ä æ é è ê ë ù û ü ö ï î ç œ 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é renvoie au caractère À.

Le contenu de l'élément title est le titre du document HTML : ce titre est affiché dans la barre de titre du navigateur. L'élément meta permet de donner des « méta-informations » sur le document. On écrira ainsi, par exemple : authorG. Chagnon keywordsHTML, initiation descriptionCette page fournit une introduction au langage HTML date2003-09-19T16:55:37+01:00 Il est possible également de transmettre des données au navigateur via le protocole HTTP : ExpiresSat, 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. 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). 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 : Content-Typetext/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. Cette balise permet de spécifier les URLs de fichiers liés d'une manière ou d'une autre au document. Par exemple, stylesheettext/csscours.css printVersion PostScriptapplication/postscripthttp://someplace.com/manual/postscript.psalternate The manual in Englishalternateenhttp://someplace.com/manual/english.htmltext/html

Il contient tout ce qui apparaîtra dans la fenêtre du navigateur. Nous y reviendrons quand nous aborderons les éléments HTML.

On peut trouver, de manière facultative, à la toute première ligne du document, la déclaration suivante : La déclaration précédente fait référence au HTML strict ; le HTML dit « de transition » se déclare ainsi : 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.