Développer des sites ou applications web nécessite de bien connaître les standards du web. Ce sont un ensemble de technologies et de protocoles utilisés sur le web. Ils sont définis par le W3C sous forme de recommandations, avec la collaboration des principaux acteurs de l'industrie du Web (Adobe, Microsoft ...), soutenu par le WaSP (Web Standards Project), groupe de professionnels du web ayant très tôt compris l'intérêt des standards du web et ayant aider à rendre des produits phares du web plus compatibles avec les standards et l'accessibilité.
Utiliser les standards permet de :
Jeffrey Zeldman du WaSP explique que la mise en oeuvre des standards du web garanti :
- des coûts de redesign et de maintenance réduits ;
- un affichage plus rapide des pages - l'allègement pouvant atteindre 85% - et moins de bande passante utilisée ;
- un meilleur référencement dans les moteurs de recherche et une augmentation de trafic vers le site grâce à un balisale sémantique ;
- la pérennité d'un site conçu à partir de standards ouverts.
L'objectif du cours n'est pas de passer en revue l'ensemble des standards. Nous allons nous intéresser principalement au XHTML, CCS et JavaScript.
Le niveau de prise en charge des standards par les navigateurs du marchés sont différents. On peut noter deux classes de navigateurs, la première regroupe des navigateurs libres (Firefox, Mozilla, Opera, Konqueror, Camino ...) et quelques navigateurs commerciaux comme Safari. La deuxième est constituée du navigateur MSIE (Internet Explorer) dont la version 6 n'ayant plus de concurrence significative est restée sans réelle mise à jour entre 1999 et la fin 2006.
Les deux classes de navigateurs ont un bon support du HTML et XHTML mais ce n'est pas le cas pour les CSS par exemple. La première classe de navigateur utilisant des moteurs de rendu (centre névralgique de chaque navigateur web) récents prenent mieux en compte les standards, avec tout de même des disparitées au niveau des CSS (cf browser support for css1 & css2) ou du support de JavaScript (1ère classe : JS 1.5 ou 1.7, 2ème classe : pas totalement compatible JavaScript ~ entre JS 1.3 et 1.5)
Début 2005, sous la pression de la concurrence et plus particulièrement de Firefox, Microsoft entreprit de développer une nouvelle version de MSIE. IE7 est disponible depuis fin 2006 et comble en partie son retard.
La prise en charge des standards par les navigateurs web est en perpétuelle évolution et se poursuit dans le bon sens. Ne pas utiliser les standards web aujourd'hui et ne pas faire de veille technnologique régulièrement serait une erreur pour un développeur web tant le monde du web évolue rapidement.
HTML est un langage de description de documents. C'est une application du langage de balisage SGML. HTML permet de décrire la structure et le contenu d'un document multimédia à l'aide de balises, par exemple :
Ici, le texte "Lorem ipsum dolor ..." est délimité par une balise d'ouverture <p> et une de fermeture </p>. De plus la balise p à l'attribut "lang", de valeur "lat". Nous avons ici décrit un paragraphe écrit en latin.
Certaines balises n'ont pas de contenu et apparaissent donc sans balise de fermeture. Sont notamment concernées la balise d'image <img>, la balise de séparation horizontale <hr> et la balise de retour à la ligne <br>.
Tel qu'il a été pensé à ses origines par Tim Berners-Lee, le HTML ne sert pas à décrire le rendu visuel des pages Web, mais plutôt le sens des différentes parties du texte : titre, liste, mise en évidence... Cette séparation du fond et de la forme n'ont pas toujours été respectées au cours du développement du langage.
L'exemple le plus flagrant est celui de l'utilisation des tableaux en HTML. L'utilisation des tableaux devrait être limitée, comme son nom l'indique, à des données tabulaires (statistiques, fréquence, associations à deux dimensions, etc.), mais les créateurs de pages Web utilisent cet élément pour pallier un manque crucial d'éléments permettant de positionner n'importe où un élément HTML. Depuis, le CSS a fait son apparition, permettant de décrire la façon dont les éléments HTML doivent être positionnés.
On assiste parfois à des oublis de balises de fermeture en HTML, alors qu'elles sont nécessaires. Cette erreur s'est répandue sur le web et les navigateurs sont devenus très permissifs à une certaine époque, ce qui a tendu à les complexifier encore davantage.
XHTML est un langage informatique de balisage servant à l'écriture de pages du World Wide Web. XHTML est le successeur de HTML, XHTML respectant la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML respectée par HTML. Comme de nombreux langages basés sur XML, XHTML commence par la lettre X, qui représente le mot extensible. Ainsi le premier document décrivant officiellement XHTML s'appelle XHTML 1.0 The Extensible HyperText Markup Language (« XHTML 1.0 Le langage de balisage hypertexte extensible »). C'est cependant l'abréviation XHTML qui est une marque du World Wide Web Consortium (W3C) et qui est seule utilisée dans les documents suivants.
La première version de XHTML (1.0 en janvier 2000) était une simple reformulation de HTML 4 en XML 1.0. Les syntaxes de HTML et XHTML sont très proches, celle de XHTML héritant de XML l'obligation de réaliser des documents bien formés. Bien que HTML et XML soient deux applications du modèle complexe SGML, le premier a évolué vers deux modes d'édition possédant chacun leur DTD, strict et transitional, le mode strict requiérant un document bien formé comme pour XML alors que transitional est plus permissif et souvent qualifié de mode "brouillon".
Les évolutions suivantes, qui ont abouti à XHTML 1.1, divisent le langage XHTML en modules, chacun regroupant un type de fonctionnalités. Cette division est conçue pour permettre à du matériel informatique aux capacités techniques limitées, notamment du matériel portable, de ne supporter que des parties bien définies de XHTML. Cette modularisation est accompagnée de l'abandon des fonctionnalités de HTML 4 pouvant être reprises dans des feuilles de style (typiquement en CSS) : les fonctionnalités définissant les détails de présentation d'une page Web. Le but de cette séparation entre contenu informatif et présentation est également de doter les pages en XHTML de la souplesse nécessaire pour permettre la consultation avec des appareils très divers, de l'ordinateur de bureau au téléphone portable.
Le XHTML est une évolution du HTML et apporte de nombreux avantages :
La mise en forme par défaut des balises XHTML dans les navigateurs n'a pas d'importance, une balise doit être utilisée pour son sens et nom pour sa mise en forme par défaut fonction du navigateur utilisé.
Ainsi lorsque que l'on utilise la balise h2 on pense qu'il s'agit d'un titre de niveau 2 et non que l'on souhaite écrire avec une taille de police importante. Utiliser la balise table est pour décrire un tableau de données et non pour faire de la mise en page.
La mise en forme doit être effectuée à l'aide de feuilles de style. Lors que l'on rédige un document en XHTML, il faut donc avant tout penser au sens de chaque balise, vous gagnerez en accéssibilité.
Tout document XML, donc XHTML doit commencer par signaler si il utilise un encodage autre que UTF-8, par exemple :
Afin d'indiquer la syntaxe DTD (Déclaration de Type de Document) utilisée, on déclare le DOCTYPE :
Cette déclaration est très importante, elle à une influence sur les navigateurs. En fonction de celle-ci, le code HTML et CSS ne sera pas traiter de la même façon. Utiliser une DTD à jour comme dans l'exemple permettra de se placer dans mode dit "strict" de "respect des standards", alors que utiliser une DTD ancienne et périmée fera passer le navigateur dans un mode dit "quirks", compatible avec les anciennes implémentations de chaque navigateur et par conséquent moins respectueux des spécifications du W3C.
Une fois l'encodage des caractères déclaré et la DTD indiquée l'élément racine du document, la balise html peut être inscrite. Voici la strucure globale d'un document XHTML :
L'entête du document permet de spécifier le titre du document, les méta informations, les scripts javascript, feuilles de styles et documents connexes à utiliser.
Ci-dessous quelques balises utilisées dans l'entête, nous ne ferons pas une liste exaustive de l'ensemble de balises existantes dans ce cours. Le but est de donner une première approche du XHTML, pour aller plus loin, vous pourrez trouver l'ensemble des balises et de leur attribus dans les recommadations du W3C.
Voici un exemple d'entête de document :
Nous allons ici décrire une partie des balises définies par le W3C, il s'agit d'une sélection des balises les plus couramment utilisées.
Quelques exemples
Quelques exemples
Un tableau est délimité par la balise table, l'attribut summary
permet de lui associer un résumé.
Le titre du tableau est définit par la balise caption, élément fils immédiat après
la balise table.
L'entête du tableau est défini par la balise thead.
Le pied de tableau est défini par la balise tfoot.
Les balise thead et tfoot sont placées avant
la balise tbody et sont répétés lors de l'impression sur chaque page,
lorsque le tableau tiens sur plusieurs pages.
Le corps du tableau est définit par la balise tbody. On note que lorsque qu'il
y a plusieurs section logiques dans un tableau, on peut leur dédier une balise tbody.
La balise tr définit une ligne de cellule dans une portion de tableau.
La balise td définit une cellule de tableau contenant des données.
La balise th définit une cellule de tableau contenant un titre de ligne ou de colonne.
Pour les balise td et th, les attributs collspan et
rowspan permettent respectivement de faire des fusions de colonnes et de lignes.
Quelques exemples
Il existe aussi des balises représentant des styles physiques : <b> pour bold (gras), <i> pour italique, <u> pour underline (souligné), <center>, <font>, etc. Comme elle fournissent des informations de présentation (et pas de structure), elles sont déconseillées. Les navigateurs les comprennent néanmoins.
Dernière mise à jour : 22/01/07