XHTML Doudjinan

WDCLI : XHTML
________________________________________________________________________

DOUDJINAN ROMASSINGARAL
Ingnieur Informaticien, Diplm en Administration des Entreprises Enseignant Chercheur, Consultant TIC
Email : doudjinan@yahoo.fr Cell : 05 08 83 61

1

1. La prsentation et lhistorique
1.1. La prsentation

XHTML signifie eXtensible HyperText Markup Language, c'est--dire langage de balises hypertexte
extensible. Issu de la reformulation du HTML, XHTML permet la restructuration du contenu, la
sparation du contenu de la prsentation. Cest un analyseur simple avec une syntaxe stricte.

Le XHTML est un pont entre deux technologies, le HTML (HyperText Markup Language) et le XML
(eXtensible Markup Language). Il est compatible avec les anciennes versions du HTML et
accompagne le passage aux technologies modulaires et extensibles du XML

Les objectifs et avantages du XHTML sont :

- Un code simplifi, plus lger. Il est plus facile manipuler et mettre jour.
- Une sparation entre le contenu et sa prsentation.
- Un standard qui peut tre soumis validation et permet de se dcharger des spcificits des
diffrents navigateurs.
- Il facilite la mise en place dun web smantique qui a pour objectif de rendre accessible les
informations dune manire standard afin de faciliter lindexation des informations aussi bien aux
humains quaux robots.
- Une proccupation accrue par rapports aux jeux de caractres et linternationalisation.
1.2. Lhistorique

Le XHTML est un langage hybride entre le XML et le HTML. Il ne s'agit, en fait, que d'une
reformulation de HTML pour le rendre compatible avec XML.
Au dpart SGML (Standard Generalized Markup Language) a invent dans les annes 80, pour grer
les documents web. Le SGML est un mtalangage permettant de dfinir des langages baliss, mais ce
langage sest rvl un peu lourd dans son utilisation
1
. Par la suite, on a cr le HTML, un des
langages baliss issu de SGML, fond en particulier sur la notion de lien hypertexte, qui permet de
naviguer confortablement d'une page une autre. Le HTML a trs vite remport un grand succs. Mais
il a aussi rencontr certaines limites. En particulier, il n'est pas extensible et ne permet pas de sparer le
contenu de la prsentation.
Pour pallier les limitations du HTML les chercheurs ont pens trouver des mthodes de stockage (les
styles), mais comme le HTML nest pas extensible, le W3C a dfini le XML.

1
Le SGML est trop vaste et trop gnrique pour que de simples mortels puissent lutiliser.
LE XHTML

WDCLI : XHTML
________________________________________________________________________


2
Le langage XML est prcisment fond sur la notion d'extensibilit. Comme le SGML, le XML est un
mtalangage de marquage formel utilisant de faon slective certaines caractristiques de SGML pour
dfinir des langages de marquage.
Le XML nest pas compatible avec le HTML, version 4.01. Cest pourquoi le W3C, propose le
XHTML, une reformulation de HTML compatible avec le XML. XHTML sefforce de prendre en
charge chaque caractristique de HTML 4.01 en utilisant les rgles plus rigides de XML. Il y parvient
mais prsente la vie difficile un auteur imprgn du langage HTML.
Le tableau ci-aprs rsume lhistorique de XHTML.

Historique du XHTML

anne Langage

description
1969 Generalized Markup Language
(GML)
dveloppement de GML par IBM.
1986 Standard Generalized Markup
Language( SGML)
Dfini dans la norme ISO 8879.
1996 eXtensible Markup Language
(XML 1.0)
Prsente par le W3C sous forme de proposition de
discussion.
1989 Hypertext Markup
Language(HTML)
Conu par Tim Bernes-Lee Genve.
1994 HTML 2.0 Adopt comme norme sous lgide du W3C.
1994 Cascading Style Sheets (CSS
1.0)
Premiers complments apports au HTML, destins
permettre lutilisation de formats dans les
documents HTML
1996 HTML 3.2 La version 3.2 a t adopte la suite de la version
3.0, qui na jamais t applique.
1997 HTML 4.0 Adopt en dcembre 1997 par W3C, sous forme de
directive.
2000 XHTML 1.0 (eXtensible
Markup Language)
Reformulation de HTML 4 en une application
XML 1.0 par le W3C
2001 XHTML 1.1 le W3C a publi une Proposition de
Recommandation XHTML 1.1.

2001 XHTML 1.1 Le W3C a publi la Modularisation de XHTML
2001 XHTML 1.1 Le W3C a publi XHTML 1.1 comme
Recommandation W3C

2002

XHTML 2.0
Le W3C a publi de nouvelles versions de travail
de XHTML 2.0 et XFrames, ainsi qu'une deuxime
dition de la Recommandation XHTML 1.0.

WDCLI : XHTML
________________________________________________________________________


3
2. La structure du XHTML

La structure gnrale dun document XHTML se prsente comme suit :

<!DOCTYPE>

<html>
<head>
<title>Titre</title>

</head>
<body>
contenu de la page
</body>
</html>
2.1. La DOCTYPE ou la dfinition de Type de Document

La premire balise du document doit tre la balise de DTD. Elle est obligatoire et elle sert indiquer
quelles rgles d'criture obit le code d'une page HTML ou XHTML. Cette dclaration est importante
pour une bonne interprtation du code. Elle indique la version de HTML ou XHTML utilise.

Trois diffrentes variantes de DTD existant actuellement pour le HTML 4.0 et le XHTML 1.0 :

- strict (sans utilisation des balises obsoltes) ;
- transitional ;
- frameset.

HTML 4.01 DTD

Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 DTD

Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
WDCLI : XHTML
________________________________________________________________________


4
Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Une seule variante existe pour le XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

La DOCTYPE comprend 2 parties :

- La premier,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/transitional/frameset//EN"

indique le nom gnrique de la DTD.

- La seconde,

"http://www.w3.org/TR/xhtml1/DTD/xhtml1- Strict/transitional/frameset.dtd">

prcise ladresse du fichier xhtml1.dtd qui contient la DTD elle-mme.
2.2. Llment racine

Cest llment <html>correspondant deuxime de chaque page web. Aprs la DTD, il suffit
d'ouvrir la balise <html> qui englobera lensemble des autres balises de votre page.
2.2.1. Les attributs de la balise<html>

Cette balise ou llment racine possde 3 attributs :

- xml:lang dont la valeur est un code de langue normalise qui indique la langue utilise par
dfaut dans la page (fr, en, en-us, de, it, ar, ch, ja, es respectivement pour le Franais, anglais,
amricain,allemand, italien, arabe, chinois, japonais, espagnol). Exemple :

<html xml:lang=fr >

- dir dont les valeurs sont ltr pour le texte qui se lit de gauche droite, notamment les langues
europennes et rtl pour le texte qui se lit de droite gauche autrement dit les langues
orientales telles hbreu, arabe.
- xmlns : spcifie ladresse URL de lespace de nom utilis dans la page.

Do lexemple de llment <html>complet :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

WDCLI : XHTML
________________________________________________________________________


5
La balise <html>contient deux paires de balises:

- Les balises <head> et </head> dlimitant len-tte du document.
- Les balises <body> et </body> dlimitant le corps du document.
2.2.2. Len-tte
Len-tte du document est la partie : <head></head>. Elle contient toutes les donnes relatives au
document (le titre du document et sa description par exemple).
2.2.2.1. Le titre
Le plus important dans l'en-tte est le titre de la page, il se dfinit avec les balises <title>.
<title>Titre de votre page</title>
2.2.2.2. Les balises <meta>
Les balises <meta> sont facultatives, mais importantes pour le navigateur, et pour les moteurs de
recherche.

Encodage de la page :

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Cette ligne contient la norme dencodage utilise pour lenregistrement des pages web, pour indiquer
au navigateur quelle table de caractres il faut prendre en compte.

Les principaux types dencodage sont :

- utf-8(charset=utf-8) : codage universel unicode (sur un ou deux octets), privilgier car cest la
solution davenir.
- iso-8859-1 ou Latin-1 (charset=iso-8859-1) : codage occidental classique, souvent utilis.
- iso-8859-15 ou Latin-9 (charset=iso-8859-15) : codage occidental iso-8859-1 plus quelques
caractres , dont , OE, oe, et .
- Windows-1252 ou ANSI (charset=Windows-1252) : codage provenant du iso-8859-1,
comprenant galement , OE, oe, et .

Description de la page

<meta name="Description" content="Description de la page" />

Langue de la page

<meta name="Language" content="fr" />

Nom de lauteur

<Meta name=" Author " content =" DOUDJINAN ">,
Etc.
WDCLI : XHTML
________________________________________________________________________


6
2.2.3. Le corps
Le corps de la page web (entre les balises <body>et </body>), est la partie visible du document
XHTML, il peut tre constitu dun grand nombre de types de balises diffrents (titres, paragraphes,
liens,...).

Exemple d'une page 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ma premiere page XHMTL</title>
<meta name="Language" content="fr" />
<meta name="Description" content="Description de votre page" />
</head>

<body>
Corps de la page
</body>
</html>
3. Lcriture des balises XHTML

Le HTML, devenu maintenant XHTML, contient les lments afficher sous forme de textes entours
de diffrentes balises qui les caractrisent.
Exemple dlment (ici un titre de niveau 1) :

<h1>premier chapitre</h1>
3.1. Les normes existantes

Les versions 2.0, 3.2, puis 4.0 du HTML ont t remplaces par le XHTML version 1.0, puis 1.1. Le
XHTML 2 est en cours de conception.

Le XTHML est une volution du HTML dans laquelle la syntaxe est plus rigide, mais plus rigoureuse :
cela simplifie beaucoup la maintenance des pages web.

Les feuilles de style CSS2 compltent cette norme.

3.2 Les rgles dcriture des balises
Les normes XHTML nous demandent dcrire les balises de la faon suivante :

WDCLI : XHTML
________________________________________________________________________


7
1. Les balises et les attributs scrivent en minuscules.
2. Toutes les balises doivent tre refermes.

Pour les balises seules, qui nentourent pas de contenu, la barre de fermeture est y intgre :

- <br />au lieu de <br>
- <hr />au lieu de <hr />
- <hr id=intro />au lieu de <hr id=intro>
- <img id=logoist.gif />au lieu de <img id=logoist.gif >

3. Les attributs des balises sont crire entre guillemets (ou encore cotes, cest--dire entre
apostrophes). Exemple :
< img src= logo.gif />
4. Sil y a imbrication de balises, lordre doit tre respect pour leur fermeture.
Exemple :
<h1><em></em></h1>.
4. Les principales balises XHTML

XHTML na repris quune partie des balises HTML, les autres tant remplaces par des proprits
crire dans les feuilles de style.
4.1. Les balises de texte

Les principales balises de texte

em : emphasis=accent ou instance (mise en italique)
strong : stronger emphasis=accent plus fort (mis en gras)
h1, h2, h3, h4, h5, h6 : header=niveaux de titres de 1 6
p : paragraphe
br : break=saut de ligne
div : divers =bloc de paragraphes lis pour mettre en forme
span : porte =ensemble de mots ayant une mise en forme commune.

Les autres balises de texte

q : quote =pour une courte citation (mise en guillemets, sauf pour Internet explorer 6 et 7)
address : paragraphe constitu par une adresse (nouveau paragraphe, mise en italique)
cite : citation au cours dune phrase (en italique)
dfn : dfinition dun mot, en cours de phrase (en italique)
var : nom dune variable (en italique)
code : extrait de code informatique (police Courier)
samp : exemple de code informatique (police Courier)
kbd : saisie au clavier (police Courrier)
pre : prformat (police Courrier, espaces et sauts de lignes affichs tels quils sont nots)
abbr : abrviation (pas de mise en forme)
WDCLI : XHTML
________________________________________________________________________


8
acronym : acronyme (pas de mise en forme)
sub, sup : exposants et indices

Exemples

<body>
<p>Le <abbr title=" Exensible HyperText Language">XHTML </abbr>est un langage de balises
hypertexte extensible.</p>
<p>Extrait du livre : <cite>Discours sur le colonialisme</cite>de <cite>Aim Csaire</cite></p>
<p>La somme des termes d'une suite arithmtique au rang n s'crit : U<sub>n</sub>=
U<sub>0</sub>+q * n </p>
<p>L<dfn>Informatique</dfn>est la science du traitement rationnel et automatique de
linformation.</p>
</body>

Aperu dans navigateur IExplorer 7.0 :

4.2. La balise des liens hypertextes

a : anchor =ancre (lien hypertexte)

Exemple

Cliquez sur le lien suivant pour accder au site de lIST :
<a href="http://www.ist.ga/">http://www.ist.ga </a>.

4.3. Les balises des images et objets

img : image
object : objet
param : paramtre

Exemple

<IMG src=logoist.jpeg alt="Logo IST" border=3 align=left>

WDCLI : XHTML
________________________________________________________________________


9
4.4. Les balises des listes

ol : ordered list : liste numrote
ul : underordered list =liste sans numros
li : list itelm =element de liste (quelle soit numrote ou non)
di : definition list term=un terme de la liste de dfinitions
2
(associe un terme)

Exemple 1
<ul type =circle>
<li>Dpartement GEA</li>
<li>Dpartement INFO</li>
<li>Dpartement TC</li>
<li>Dpartement FORCO</li>
</ul>

Exemple 2

<ol type =a Start=3 >
<li>Dpartement GEA</li>
<li>Dpartement INFO</li>
<li>Dpartement TC</li>
<li>Dpartement FORCO</li>
</ol>

4.5. Les balises des tableaux

table : tableau
tr : table row =ligne tableau
td : table data =donne dune cellule (son contenu)
th : tableau header=en-tte de tableau (centr et mis en gras)
caption : titre du tableau.

Exemple

<table align="center" border=10 cellspacing=3 cellpadding=3 width=40%>
<caption >tableau </caption>
<tr align="center"><td>1</td> <td>2</td><td>3</td></tr>
<tr align="center"><td>4</td> <td>5</td><td>6</td></tr>
<tr align="center"><td rowspan=2>7</td><td>8</td><td>9</td></tr>
<tr align="center"><td colspan=2>10</td></td></tr>
</table>


2
Liste de dfinition
WDCLI : XHTML
________________________________________________________________________


10

4.6. Les balises des formulaires

form : formulaire
textarea : zone de texte (pour la saisie) plusieurs lignes
input : entre (zone de texte une seule ligne, case cocher, case doption, bouton daction)
select : liste de choix
option : lment de liste de choix
optgroup : regroupement dlments de liste de choix
label : tiquette pour la liste de choix

<form>
<p><strong>exemple de balises de formulaire</strong></p>
nom : <input type ="text" size=20 name="nom">
prenom : <input type ="text" size=15 name="prenom">
<br/>sexe : <input type ="radio" name="sexe" value ="masculin" checked>m
<input type="radio" name="sexe" value ="feminin">f
<br/>classe :
<select name="classe" value ="lpi" checked>lpi
<option selected>lpi
<option>info2
<option>info1
</select>
<p>fruits prfers :</p>
<select name="choix" multiple>
<option selected>pommes
<option>oranges
<option>avocats
<option>goyaves
<option>mandarine
</select>
<p>vos commentaires :</p>
<p><textarea name="commentaires" cols=45 rows=3></textarea></p>
<input type="submit" value ="envoyer">
<input name="reset" type="reset" value ="annuler" />
</form>
WDCLI : XHTML
________________________________________________________________________


11


4.7. Les balises de commentaires et espaces

Lespace inscable (qui nest jamais coup par une fin de ligne) scrit &nbsp ;
Lattribut name du HTML est remplac par id en XHTML, sauf pour les noms de contrles dans les
formulaires.

Les commentaires peuvent scrire sur une ou plusieurs lignes, entre les signes <! et -- >.
5. La validation du code HTML

Pour vrifier si le code dune page HTML est valide, suivant la norme indique dans la balise
<!DOCTYPE>, il faut mettre cette page en ligne et indiquer son URL au validateur du W3C,
ladresse :

http://validator.w3.org

NB Le validateur vrifie uniquement la syntaxe de la page, mais pas la logique dans lemploi des
balises, savoir si le sens associ telle base correspond bien au texte quelle encadre
Le site HTMLHelp.compropose des outils de validation pour des pages en local.

WDCLI : XHTML
________________________________________________________________________


12
TABLE DES MATIERES

Le XHTML..1
1. La prsentation et lhistorique ................................................................................................. 1
1.1. La prsentation ..................................................................................................................... 1
1.2. Lhistorique .......................................................................................................................... 1
2. La structure du XHTML .......................................................................................................... 3
2.1. La DOCTYPE ou la dfinition de Type de Document .......................................................... 3
2.2. Llment racine ................................................................................................................... 4
2.2.1. Les attributs de la balise<html>..................................................................................... 4
2.2.2. Len-tte ........................................................................................................................ 5
2.2.2.1. Le titre ........................................................................................................................ 5
2.2.2.2. Les balises <meta>.................................................................................................... 5
2.2.3. Le corps ......................................................................................................................... 6
3. Lcriture des balises XHTML ................................................................................................ 6
3.1. Les normes existantes ........................................................................................................... 6
3.2 Les rgles dcriture des balises ............................................................................................. 6
4. Les principales balises XHTML .............................................................................................. 7
4.1. Les balises de texte ............................................................................................................... 7
4.2. La balise des liens hypertextes .............................................................................................. 8
4.3. Les balises des images et objets ............................................................................................ 8
4.5. Les balises des tableaux ........................................................................................................ 9
4.6. Les balises des formulaires ................................................................................................. 10
4.7. Les balises de commentaires et espaces .............................................................................. 11
5. La validation du code HTML .................................................................................................... 11

XHTML Doudjinan

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

XHTML Doudjinan

Diunggah oleh

Hak Cipta:

Format Tersedia

WDCLI : XHTML

Anda mungkin juga menyukai