Embed Size (px)
Citation preview
XHTML
EXtensible HyperText Markup Language
HTML et XML
• HTML (HyperText Markup Language) et XML (eXtensible Markup Language) sont deux spécifications du W3C (consortium World Wild Web http://www.w3.org/)
• Tous deux dérivent de la norme SGML (Standard Generalized Markup Language, ISO 8879) mais sont incompatibles (un document HTML n’est pas un document XML bien formé etc.)
HTML vers XHTML
XHTML est le successeur de l’HTML
• Spécification W3C pour la publication de document sur le World Wild Web
• HTML1989 CERN – projet WWW / 1993 Internet Draft for HTML / 1995 HTML 2.0 / 1997 HTML 3.2 et 4.0
• XHTML 1.0 (1999) est une reformulation de l’HTML 4.01 respectant la syntaxe XML
XHTML 1.0
• Successeur de l’HTML• XHTML 1.0 = fonctionnalités HTML 4.01
Outils de conversion automatique de code HTML 4.01 en XHTML 1.0 (ex. HTML Tidy) http://tidy.sourceforge.net/
• Application XML, avec respect de la syntaxe XML• Modularité
– Support de plates-formes diverses : nouvelles (voitures, téléphones, ultras portables…), de capacités limitées (PDA, téléphones…) ou riches (PC…)
– Librairies mathématiques, graphiques, applicatives etc
.
XHTML versus HTML 4 – 1/3• Document bien formés au sens XML
Balises correctement imbriquéesCorrect : <p>Paragraphe avec texte en <strong>gras</strong></p>
Incorrect : <p>Paragraphe avec texte en <strong>gras</p></strong>
Balises ferméesCorrect : <p>Paragraphe</p> </br>
Incorrect : <p>Paragraphe <br>
• Noms des balises et attributs en minusculesCorrect : <html> <body>Hello</body> </html>
Incorrect : <HTML> <BODY>Hello</BODY> </HTML>
XHTML versus HTML 4 – 2/3
• Valeurs des attributs entre guillemetsCorrect : <div id="monMenu"></div>
Incorrect : <div id=monMenu></div>
• Valeurs abrégées des attributs interditesCorrect : <option value="page.html" selected="selected"></option>
Incorrect : <option value="page.html" selected></option>
• Attribut "name" remplacé par l'attribut "id"Correct : <h1 name="titre" id="titre">…</h1>
Incorrect : <h1 name="titre">…</h1>
XHTML versus HTML 4 – 3/3
• Doit contenir une déclaration de type de document DTD
• Puis doit commencer par la balise html
<!DOCTYPE Type-de-document>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre du document</title>
</head>
<body>
Corps du document</br>
</body>
</html>
Exemple : HTML 4.01 versus XHTML 1.0
<!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 <input type="checkbox" checked value="...">.</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 syntaxe fermante <img src="i.png" alt="i">.</li></ul>
<!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><meta http-equiv="Content-Type" content="text/html;charset=windows-1252" />
<title>Exemple XHTML 1.0</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 <input type="checkbox" checked="checked" value="..." />.</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>
Ex1HTML Ex1XTML
DTDXHTML 1.0 définit 3 types de DTD.
• Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Il est possible d’utiliser les éléments de style HTML à l’intérieur du document.
Exemple : font, center, bgcolor etc.
• Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Les éléments de style doivent être définis dans une feuille CSS.
• Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Identique à Transitional, mais où la balise body est remplacée par la balise frameset, elle-même contenant des balises frame.
Validation de document XHTML
Conversion HTML en XHTML
• Exemple : outil libre HTML Tidyhttp://tidy.sourceforge.net/
• A l’invite de commande :
tidy.exe --output-xhtml yes old.html > new.html
• Source et résultat : old.html, new.html
XHTML 1.1 - Modularité• Modularité
– Support de plates-formes diverses : nouvelles (voitures, téléphones, ultras portables…), de capacités limitées (PDA, téléphones…) ou riches (PC…) : XHTML Basic
– Librairies mathématiques, graphiques, applicatives etc.
• XHTML 1.1 est défini à partir de XHTML 1.0 Strict, avec regroupement des balises et attributs par collections – modules (Image, Style, Applet etc.)
• XHTML 2 a été abandonné au profit de HTML5 – XHTML5
XHTML5 – HTML 5
• HTML5 (HyperText Markup Language 5) est la dernière révision du principal langage du web, HTML. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5
Quelleques différences
• XHTML5 : utilisation du syntaxe xml plus strict du xml
• HTML5 peut utiliser la définition du document
• <!DOCTYPE HTML SYSTEM "http://www.example.com/dtd/my-custom.dtd">
• Exemple
Nouvelles fonctionnalités
• X/HTML 5 des nouveau elements qui partitionnent des pages Web page en sections, ex:
• <dialog> : <dd>, <dt>,
• <figure>: <legend>
Références • Page d’accueil du groupe de travail XHTML du
W3Chttp://www.w3.org/MarkUp/
• Spécification « XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) »http://www.w3.org/TR/xhtml1/
• Valider un document XHTMLhttp://validator.w3.org/
• Exemple de convertisseur d’HTML en XHTML : HTML Tidyhttp://tidy.sourceforge.net/
![XHTML™ 1.0 The Extensible HyperText Markup …index-of.co.uk/Programming/XHTML 1.0 The Extensible...HTML 4 [HTML4 [p.31] ] is an SGML (Standard Generalized Markup Language) application](https://img.dokumen.tips/doc/110x75/5ee0293aad6a402d666b661c/xhtmla-10-the-extensible-hypertext-markup-index-ofcoukprogrammingxhtml-10.jpg)
