web
web > Xhtml / Css - Introduction
HyperText Markup Language [HTML]
Définition
L’Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d’insérer des hyperliens dans du texte, donc de créer de l’hypertexte, d’où le nom du langage. Techniquement, HTML est une application du Standard Generalized Markup Language (SGML). Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l’Extensible Markup Language (XML).
Architecture de base
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!- il s'agit en fait d'une ligne de déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite-->
<html lang="fr">
<!- html est la balise d'ouverture -->
<head>
<title>Titre de la page</title>
</head>
<body>
<!- ouverture du corps du site -->
<p>hello world!</p>
<!- La balise <p> crée un paragraphe, </p> le termine -->
</body>
</html>Extensible HyperText Markup Language [XHTML]
Définition
XHTML est un langage de balisage servant à l’écriture de pages du World Wide Web. XHTML est le successeur de HTML. XHTML se base sur la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML sur laquelle se base HTML.
XHTML, évolution de HTML
La première version de XHTML (1.0) est une simple reformulation de HTML 4 en XML1.0. Il s’agit donc uniquement d’un changement de syntaxe, aucune fonctionnalité n’ayant été ajoutée ou retirée.
Conversion de HTML en XHTML
Cet exemple illustre les différences syntaxiques les plus courantes entre un document écrit en HTML 4 et en XHTML 1.0 :
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Exemple HTML 4</title>
<ul>
<li>Des éléments comme HTML, HEAD et BODY sont implicites, leurs balises ouvrantes et fermantes sont optionnelles.</li>
<li>De nombreuses balises fermantes sont optionnelles, notamment pour P (paragraphe) et LI (entrée de liste).
<li>Les noms d'éléments et d'attributs peuvent <EM Class="important">librement</Em> mélanger majuscules et minuscules.</li>
<li>Certains attributs ont une valeur par défaut <table border><tr><td>x</td></tr></table>.</li>
<li>Les guillemets ne sont pas <em class=important>toujours</em> obligatoires autour des valeurs d'attribut.</li>
<li>Les éléments vides n'ont pas de balise fermante <img src="i.png" alt="i">.</li>
</ul>XHTML
<!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>
<title>Exemple XHTML 1</title>
</head>
<body>
<ul>
<li>Tous les éléments doivent être explicitement balisés.</li>
<li>Les balises fermantes ne sont pas optionnelles.</li>
<li>Les noms d'éléments et d'attributs <em class="important">doivent</em> être en minuscules.</li>
<li>Tous les attributs doivent avoir une valeur explicite <table border="1"><tr><td>x</td></tr></table>.</li>
<li>Les guillemets sont <em class="important">toujours</em>
obligatoires autour des valeurs d'attribut.</li>
<li>Les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li>
</ul>
</body>
</html>Modularisation de XHTML
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 prendre en charge 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.
La séparation du contenu de la présentation
L’usage de balises sémantiques liées à des règles CSS octroie un gain de temps significatif tant lors de la création d’un site Web que lors de sa refonte. Le double intérêt : respecter la logique du contenu, et ne travailler que sur une seule feuille de style pour l’ensemble des pages (même pour les sites en possédant des milliers). L’argument est encore valable (même d’autant plus) lors de la refonte graphique d’un site déjà conçu en XHTML+CSS : partant du principe que le contenu reste le même, le développeur n’a alors aucune raison de toucher aux fichiers XHTML.
L’exemple le plus probant reste le projet CSS Zen Garden http://www.csszengarden.com/tr/francais/, où à partir d’une page XHTML, des dizaines de designers ont créé des mises en forme très variées avec la seule feuille de style, et les fichiers d’images.
Documents Valide XHTML
Pour qu’un document soit valide XHTML, il doit avoir un type de déclaration (DOCTYPE) et un encodage (souvent en iso) conforme aux spécifications du W3C. Dans un monde parfait, toutes les pages et les navigateurs serait compatibles avec les standards du web. Pour vérifier la validité d’une page, le W3C a mis en place un validateur http://validator.w3.org/ qui comptabilise les erreurs et donne les moyens de les corriger.
Conseil : Utilisez le Web Developer 1.0.2 fr-FR pour Firefox Compatible Firefox 2.0 http://joliclic.free.fr/mozilla/webdeveloper/
html_xhtml_css
PDF
97519
