HTML pour Hyper Text Markup Language est un langage de desciption de documents. C'est une application du langage de balisage SGML pour Standard Generalized Markup Language . HTML en est à sa version 4.01, la dernière.
SGML est un méta langage de balisage, utilisé pour concevoir d'autres langages (HTML, RTF, etc..). Unanimement reconnu comme étant trop complexe à mettre en oeuvre, SGML est aujourd'hui peu à peu abanonné pour XML.
XML pour Extensible Markup Language est une norme servant à décrire des documents structurés, créé donc à partir de SGML. Il s'agit en fait d'une version simplifiée de SGML (« profil » figé de la norme, DTD optionnelle, syntaxe particulière pour les éléments vides) et plus adaptée au Web (support natif des différents codages internationaux). La version 2 de XHTML est en cours de finalisation.
XHTML est donc un dérivé de HTML, se conformant non plus aux exigences de SGML, mais à celle de XML.
Enfin, si HTML se veut un langage de description de documents (une tentative de spécifier le fond/la structure du document sans en fixer la forme/l'affichage), CSS pour Cascading Style Sheetsest un langage cette fois-ci destiné à la mise en forme du document : la façon de le présenter.
Pour bien comprendre l'évolution de ces langages, un petit retour historique (Source Wikipedia) :
1989 - 1992 : l'HTML a été inventé pour le World Wide Web, afin de pouvoir écrire des documents hypertextes liant les différentes ressources d'Internet. En août 1991, lorsque Tim Berners-Lee annonce publiquement le Web sur Usenet, il ne cite que le langage SGML, mais donne l'URL d'un document ayant l'extension de fichier html. Les premiers éléments du langage HTML sont le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par index. La description d'HTML est alors assez informelle et principalement définie par le support des divers navigateurs Web contemporains.
1993 : L'état de HTML correspond alors à ce que l'on pourrait appeler HTML 1.0. Il n'existe cependant aucune spécification portant ce nom, notamment parce que le langage était alors en pleine évolution. Un effort de normalisation était cependant en cours. À partir de fin 1993, le terme HTML+ sera utilisé pour désigner la version future de HTML. Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures : l'invention de l'élément IMG permet d'intégrer des images (GIF ou XBM) aux pages Web (Mosaic 0.10) ; les formulaires rendent le World Wide Web interactif (Mosaic 2.0pre5) et l'ouvre aux commandes par Internet.
1994 : Avec l'apparition de Netscape Navigator 0.9 le 13 octobre, le support de nombreux éléments de présentation est ajouté : styles de texte, clignotement, centrage... Le développement de HTML prend alors deux voies divergentes. D'une part, les développeurs de navigateurs s'attachent à maximiser l'impact visuel des pages Web. D'autre part, les concepteurs du Web proposent d'étendre les capacités de description sémantiques (logos, notes de bas de page...) et les domaines d'applications (formules mathématiques, tables) de HTML. En ceci, ils suivent les principes de SGML consistant à laisser la présentation à un langage de style. En l'occurrence, les feuilles de style en cascade (CSS) sont prévues pour HTML. Seul le support des tables est rapidement intégré aux navigateurs, notamment parce qu'il permet une très nette élaboration de la présentation. Le manque de structure du HTML alors mis en oeuvre par Netscape Navigator, puis Microsoft Internet Explorer, est parfois dénoncé comme étant de la « soupe de balises » (tag soup en anglais).
1995 - 1996 : En mars 1995, le W3C nouvellement fondé propose le résultat de ses recherches sur HTML+ : le brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes. Fin 1995, la RFC 1866 décrivant HTML 2.0 est finalisée. Ce document décrit HTML tel qu'il existait avant juin 1994, donc sans les nombreuses additions de Netscape Navigator.
1997 : Le 14 janvier, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée début 1996, donc avec une partie des additions de Netscape Navigator et Internet Explorer. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation. Le 18 décembre, le W3C publie la spécification HTML 4.0 qui standardise notamment le support des styles, les cadres (frames) et les objets (généralisation des images et des applets).
1998 - 1999 : La dernière spécification de HTML est la 4.01 datant du 24 décembre 1999. Elle n'apporte que des corrections mineures à la version 4.0.
2000 à nos jours : Le développement de HTML en tant qu'application de SGML est abandonné au profit de XHTML, application de XML. La première étape est la spécification XHTML 1.0, publiée le 26 janvier 2000. Il s'agit d'une reformulation de HTML 4.01 basée sur XML au lieu de SGML. La seconde étape est la spécification XHTML 1.1, publiée le 31 mai 2001. Il s'agit d'un classement des fonctionnalités de XHTML 1.0 en modules.
Le W3C, le World Wide Web Consortium est fondé par Tim Berner-Lee. Depuis sa création, le W3C émet des directives et des standards web ; ces standards, appelés recommandations, sont actuellement au nombre de quelques dizaines (plus de 90).
Le W3C est un consortium international dont la mission est de : « lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web ». Il est administré conjointement par le MIT (USA), l'ERCIM (France) et l'unversité Keyo (Japon). Il est financé par des dons provenant de particuliers, d'entreprises et de fondations.
Le W3C a contribué à fournir au Web des standards permettant ainsi à n'importe quel navigateur sur n'importe quel OS de pouvoir lire les pages Internet. Le W3C insisite également sur l'intérêt d'offrir un Internet accessible et multi langages.
Le W3C a établi depuis quelques années déjà des normes : HTML, CSS, DOM, XML etc... Malheureusement, de nombreux développeurs (designers) web ne connaissent pas bien ces languages et ont encore en tête les balises propriétaires des navigateurs les plus célèbres d'avant la standardisation : Internet Explorer 4, Netscape 4.x. Et les logiciels WYSIWYG de pages HTML produisent souvent du code non standard.
Ainsi, on rencontre encore des sites "spécifiques IE" et une partie de plus en plus importante d'internautes, de la bonne accessibilité à leur site. En effet, de l'eau a coulé sous les ponts et on assiste depuis 3-4 ans à la sortie régulières de nouveaux navigateurs, sur tout les systèmes (Windows, Linux, Mac, Unix, PalmOS, PocketPC...), parfois spécifiques à certaines utilisations (pour les handicapés physiques ou visuels comme les navigateurs "brailles") et qui plus est, conforme pour la plupart aux spécifications des Standards.
Il y a ainsi de nombreuses raisons de respecter les standards du W3C :
une interopérabilité et une portabilité certifiée
une accessibilité universelle aux contenus
la production de contenu Web à moindre coût
tirer profit de la technologie XML
un contrôle qualité optimisé du travail fourni par les prestataires
une réduction considérable du volume des documents
un référencement plus efficace dans les moteurs de recherche
la pérennité des documents
une rétro compatibilité avec les anciens navigateurs
pour l'avenir du Web
Si la plupart des sites se préoccupent peu du respect des recommandations du W3C (exemple : www.clicanoo.com, www.orange.re), il est bien sûr souhaitable de produire du code valide. La difficultés réside dans l'utilisation de plus en plus importante d'objets de toutes provenance au coeur d'une page, et surtout dans les appels à des scripts de programmation (Php, Perl, Python, Ruby, ..) qui peuvent parfois rendre la validation complexe.
Le W3C propose un moteur de validation de page HTML en ligne, à l'adresse http://validator.w3c.org. Je vous encourage vivement à produire du code propre et valide ! Le site www.proze.net propose également un moteur de validation capable de valider l'ensemble d'un site.
Les langages de balisage représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle. Ils opèrent grâce aux balises, unités sémantiques délimitant chacune un ensemble à l'intérieur d'un fichier texte, souvent en unicode.
L'inclusion de balises permet de transférer à la fois la structure du document et son contenu. Cette structure est compréhensible par un programme informatique, ce qui autorise un affichage personnalisé selon des règles pré-établies ; la typographie (en premier lieu la fonte) et d'autres éléments de présentation peuvent changer. On peut de plus inclure des éléments non-textuels.
Exemple 1. Une balise html
<p> Voici donc un paragraphe délimité par ses 2 balises - ouvrante et fermante </p>
Il existe également des balises qui n'encadre pas de texte :
La liste des balises autorisées par le langage est fonction de sa DTD - Document Type Definition. Ce jeu de tags varie donc dans un même langage, d'une version à une autre.
Si en HTML, la casse des mots clefs n'a pas d'importance, en XHTML les noms et les valeurs des balises doivent être écrites en minuscule. Et toutes les balises doivent être fermées en XHTML, même si elles ne le sont pas en HTML.
Exemple 3. Une balise xhtml
<hr></hr> La balise "ligne horizontale" en XHTML On peut choisir de l'écrire <hr />
Les balises HTML peuvent être accompagnés d'attributs qui prennent différentes valeurs selon les besoins. Ainsi, on pouvait (on peut toujours encore !) spécifier certaines propriétés d'affichage directement en HTML, alors que c'est normalement le rôle des feuilles de styles CSS.
Néanmoins, certains attributs sont utiles en HTML, et permettent de donner certaines spécificités. Un exemple peut-être celui d'une liste à puce que l'on souhaite faire commencer au numéro 4 :
Exemple 4. Atttributs d'une liste ordonée
<ol> <li value="4"> cet item de liste a le numéro 4.</li> <li> cet item de liste a le numéro 5.</li> <li> cet item de liste a le numéro 6.</li> </ol>
La liste des attributs possibles pour une balise HTML est définie dans la recommandation du W3C. Certains attributs sont notés obsolètes, et ne doivent plus être utilisés (mais sont tolérés dans le cadre d'une DTD transitoire
Deux attributs particuliers sont applicables à toutes les balises HTML : id et class. id assigne un identifiant unique à un élément (qui peut être vérifié par un analyseur SGML). L'attribut id a plusieurs rôles dans HTML :
comme sélecteur dans une feuille de style ;
comme ancre cible de liens hypertextes ;
comme moyen d'appeler un élément particulier à partir d'un script ;
comme nom d'un élément OBJECT déclaré ;
pour un traitement universel par les agents utilisateurs (par exemple, pour identifier les champs lors de l'extraction des données des pages HTML pour peupler une base de données, pour traduire des documents HTML dans d'autres formats, etc.).
L'attribut class, au contraire, assigne un ou plusieurs noms de classe à un élément ; on peut dire de l'élément qu'il appartient à ces classes. Un nom de classe peut être partagé par plusieurs instances d'éléments. L'attribut class a plusieurs rôles dans HTML :
comme sélecteur dans une feuille de style (quand l'auteur souhaite assigner une information de style à un ensemble d'éléments) ;
pour un traitement universel par les agents utilisateurs.
Bien que HTML soit un langage de description de documents plus qu'un langage de programmation, on retrouve certaines règles propre à la programmation dans l'écriture de code : la lisibilité, l'indentation, les commentaires et l'emboitement des blocs.
L'emboitement des blocs consiste à fermer les blocs fils avant les blocs parents. L'indentation du code peut aider à retrouver facilement la hiérarchie des blocs, et les commentaires de retrouver la construction de la page.
Exemple 5. Erreurs de blocs
<p>Un exemple de paragraphe avec une liste ordonnée <ol> <li value="4"> cet item de liste a le numéro 4.</li> <li> cet item de liste a le numéro 5.</li> <li> cet item de liste a le numéro 6.</li> </p></ol>
1.3.5. La documentation du W3C
Vous l'aurez compris, les recommandations de W3C vont rapidement devenir votre bible du développeur Web ! Les recommandations sont disponibles en plusieurs langues, et voici les liens pour :
La documentation propose l'ensemble des balises et des attributs disponibles dans le langage. C'est donc LA source à consulter en cas de doute sur la syntaxe d'une balise. Voici un example de la documentation :
Exemple 6. Documentation de la balise IMG
<!-- Pour éviter les problèmes avec les agents utilisateurs
en mode texte seul ainsi que pour rendre le contenu d'une image
compréhensible et navigable pour les utilisateurs d'agents
utilisateurs non-visuels, il est nécessaire de fournir une
description avec ALT, et pour éviter les images cliquables
côté serveur -->
<!ELEMENT IMG - O EMPTY -- image incorporée -->
<!ATTLIST IMG
%attrs; -- %coreattrs, %i18n, %events --
src %URI; #REQUIRED -- URI de l'image à incorporer --
alt %Text; #REQUIRED -- description brève --
longdesc %URI; #IMPLIED -- lien vers une description longue
(en complément de l'attribut alt) --
name CDATA #IMPLIED -- nom de l'image destiné aux scripts --
height %Length; #IMPLIED -- surclasse la hauteur --
width %Length; #IMPLIED -- surclasse la largeur --
usemap %URI; #IMPLIED -- utiliser une image cliquable côté client --
ismap (ismap) #IMPLIED -- utiliser une image cliquable côté serveur --
>
Nous avons donc vu que HTML est un langage de description. Mais il en existe plusieurs versions sur Internet, que chaque navigateur doit pouvoir lire. De plus, il est important pour les différents moteurs de recherches d'avoir des informations sur les documents analysés par les robots. Ainsi, une page web est composée de plusieurs parties :
Définition de type de document : quels sont la version du langage, et le codage des caractères
Entête : des méta-informations sur la page (auteur, date, mots clefs, ...)
Corps : ce qui s'affichera dans le navigateur
Globalement, un fichier HTML est donc de ce type :
Exemple 7. Squelette HTML
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <!-- le contenu de ma page --> </body> </html>
Il est nécessaire d'indiquer en tout début de page quel est le langage que l'on va utiliser. Pour cela nous disposons pour chaque langage (HTML, XHTML) 3 types de DTD :
transitoire : cette DTD permet certains abus d'écriture de code. On peut utiliser des balises obsolètes, utiliser des raccourcis (certaines balises n'ont par exemple pas besoin d'être fermées), utiliser des attributs de présentation.
stricte : cette DTD demande un plus grand respect des recommandations.
cadre : DTD utilisée pour les cadres (fractionnement de fenêtre)
Exemple 8. Examples de déclaration de DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
L'élément head contient des informations sur le document courant, tels que son titre, des mots-clés que les moteurs de recherche peuvent exploiter et d'autres données qui ne sont pas considérées comme faisant partie du contenu du document. Les agents utilisateursnavigateurs ne restituent généralement pas les éléments qui apparaissent comme contenu de l'élément head. Il peuvent cependant rendre les informations contenues par l'élément head disponibles aux utilisateurs au moyen d'autres mécanismes.
La balise title est une balise oligatoire, elle contient le titre de la page. Il apparaîtra par exemple dans la barre de titre de la fenêtre du navigateur, ou dans les moteurs de recherche.
Les autres balises d'entête sont pour la plupart des balises meta, qui contiennent des informations complémentaires sur la page et son contenu. Ces informations sont spécifiées en renseignant des valeurs d'attributs. En particlulier on retiendra les suivants :
http-equiv="Content-Type" content="text/html; charset=iso-8859-1" : indique le jeu de caractère utilisé
name="keywords" content=" .... " : donne une liste de mots clefs
Une erreur fréquemment commise concerne le nommage des fichiers d'un site Internet. En effet, les personnes travaillant sous Windows s'autorisent tout genre de fantaisies pour nommer les fichiers. Un exemple courant est l'utiisation d'espace et de majuscules dans les noms de fichiers. Ceci n'a pas grande importance sous Windows, mais une fois le site mis en ligne, peut apporter quelques surprise ...
Il faut donc prendre dès le début de bonnes habitudes pour nommer les fichiers :
la page par défaut d'un répertoire est nommée index.html
les noms de fichiers (html, images, php, ...) ne comportent pas d'espaces, pas de caractères spéciaux, pas de majuscules
les noms des répertoires respectent les mêmes règles
Tout au long de ce cours, nous allons utiliser comme exemple une application web présentant les stagiaires de la formation. Dans cette première partie, vous allez vous attacher à la création de deux pages distinctes, from scratch c'est-à-dire en utilisant tout simplement un éditeur de texte.
La première page est une page de présentation d'un stagiaire, elle contiendra plus tard un certain nombre d'informations sur chacun d'entre vous. Vous devez la créer en utilisant la DTD XHTML STRICT. Une fois la page validées, faites en sorte de suivre les indications du W3C pour faire apparaître le logo XHTML dans la page.
Dans un premier temps, elle ne devra contenir qu'une seule phrase de présentation. Vous vous attacherez à soigner les balises d'entête. Bien sûr, la page devra être valide sur le W3C.
La seconde page est une page dans laquelle vous collerez tous les liens utiles que nous rencontrerons pendant la formation. Vous devez la créer en utilisant la DTD XHTML TRANSITIONAL
Dans un premier temps, elle ne devra contenir qu'une seule phrase de présentation. Vous vous attacherez à soigner les balises d'entête. Bien sûr, la page devra être valide sur le W3C. Une fois la page validées, faites en sorte de suivre les indications du W3C pour faire apparaître le logo XHTML dans la page.