Vous êtes sur la page 1sur 4

HTML

HTML
Les balises ont deux marqueurs qui encadrent
• HyperText Markup Language du texte:
• Langage pour décrire la structure d’une <marqueur> ... texte .... </marqueur>
page WEB:
Il y a des balises qui contiennent des
– titres
attributs:
– paragraphes
<marqueur att1="v1" ... attn="vn">
– listes
... texte ....
– images </marqueur>
– tables, etc
On appelle souvent les paires de marqueurs
• Langage basé sur des balises. de conteneurs.

XHTML c
Copyright Eliana Coelho 1 XHTML c
Copyright Eliana Coelho 2

HTML
Les conteneurs vides peuvent être écrit de
manière plus concise:

<marqueurvide> </marqueurvide> Structure Générale d’un document


HTML
<marqueurvide/> <html>
Exemple: <head>
<title> ... </title>
<hr/>
</head>
qui insère une ligne horizontal dans le <body>
document HTML. .....
</body>
Les marqueurs vides peuvent avoir des </html>
attributs et nous pouvons les écrire aussi de
manière concise:

<hr width="50%" />

XHTML c
Copyright Eliana Coelho 3 XHTML c
Copyright Eliana Coelho 4
Syntaxe XHTML
• Les noms des balises et des attributs sont
en minuscules.
<p> et non <P>
XHTML
• Les valeurs des attributs sont entre
• Le XHTML c’est du HTML respectant la
guillemets.
syntaxe XML !
<p align="center">
• Le XHTML n’est que du HTML (les
mêmes balises avec les mêmes attributs),
et non <p align=center>
sauf que sa syntaxe ne souffre d’aucune
souplesse. • Tout attribut doit impérativement avoir
une valeur.
<table border="1">

et non <table border>

XHTML c
Copyright Eliana Coelho 5 XHTML c
Copyright Eliana Coelho 6

Syntaxe XHTML Syntaxe XHTML

• Toute balise ouvrante doit être refermée. Listes Imbriquées:

<p> texte </p> et non <p> texte


Une erreur qui se produit souvent dans les
• Toutes les balises vides doivent être listes imbriquées est d’oublier que la liste
fermées: interne doit être dans un élément li comme
<br/> et non <br> dans l’exemple suivant:

<ul>
<hr width="50%" /> <li>Coffee</li>
<li>Tea
et non <hr width="50%"> <ul>
• Les balises doivent être correctement <li>Black tea</li>
imbriquées. <li>Green tea</li>
</ul>
<p><i> texte </i></p>
<li>Milk</li>
</ul>
et non <p><i> texte </p></i>.

XHTML c
Copyright Eliana Coelho 7 XHTML c
Copyright Eliana Coelho 8
Syntaxe XHTML
Listes Imbriquées:

Cela est la forme correcte:


Validation du format XHTML
<ul>
<li>Coffee</li> Pour pouvoir valider si une page web est en
<li>Tea accord avec le format XHTML, il faut:
<ul> • Il faut indiquer le DTD (Document Type
<li>Black tea</li> Definition) du format XHTML.
<li>Green tea</li>
</ul> • Il faut indiquer le code de caractères
</li> utilisé par le document.
<li>Milk</li>
</ul>

Nous avons inséré une balise </li> après la


balise </ul> dans l’exemple correct.

XHTML c
Copyright Eliana Coelho 9 XHTML c
Copyright Eliana Coelho 10

Validation du format XHTML


Pour indiquer le DTD du format XHTML, il
Validation du format XHTML
faut ajouter cette ligne tout au début du
fichier: Pour indiquer le code de caractères utilisé
<!DOCTYPE html PUBLIC dans le document, nous devons ajouter la
"-//W3C//DTD XHTML 1.0 Transitional//EN" balise meta dans la section head du fichier
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML:
Il y a trois DTDs pour le format XHTML:
<meta http-equiv="Content-Type"
• Strict content="text/html; charset=utf-8" />

• Transitional Nous allons utilisé le code de caractères


utf-8 dans ce cours.
• Frameset

Nous allons utilisé le Transitional.

XHTML c
Copyright Eliana Coelho 11 XHTML c
Copyright Eliana Coelho 12
Validation du format XHTML
Dans ce cours nous allons utiliser le service CSS
de validation du consortium W3.
Dans ce cours vous êtes encouragés à utiliser
les feuilles de style CSS.
En bas de chaque page nous pouvons mettre
une image qui indique que le document suit le
format XHTML avec un lien pour faire la Vous pouvez aussi ajouter l’icône de
validation: validation du consortium W3 en bas de
<a href="http://validator.w3.org/check/referer">
chaque fichier HTML généré:
<img src="http://validator.w3.org/images/vxhtml10" <a href="http://validator.w3.org/check/referer">
alt="valid xhtml!"/> <img src="http://validator.w3.org/images/vcss"
</a> alt="Valid CSS!" />
</a>
À chaque fois qu’une page est modifiée, nous
pouvons la revalider en cliquant sur l’image.

XHTML c
Copyright Eliana Coelho 13 XHTML c
Copyright Eliana Coelho 14

Modèle de page XHTML


<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ....</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="fichier.css"/>
</head>
<body>
<table style="border:0;width:100%">
<tr>
<td style="width:15%; text-align:left">
<a href="http://validator.w3.org/check/referer">
<img src="images/valid-xhtml10.png" alt="Valid XHTML 1.0!" />
</a>
</td>
<td style="width:15%; text-align:right">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="images/vcss.png" alt="CSS valide" />
</a>
</td>
</tr>
</table>
</body>
</html>

XHTML c
Copyright Eliana Coelho 15