3. Principes d’XHTML
• Une balise doit être fermée
• Les balises et attributs doivent s’écrire en minuscules
• La valeur d’un attribut doit s’écrire entre
apostrophes ou guillemets
• Un attribut doit avoir une valeur
• Les balises doivent être fermées dans le bon ordre
4. Bloc / en ligne
• Bloc : Peut contenir des bloc et des en ligne
bloc
• En ligne : Peut contenir des en ligne
en
+ des données !
5. Attributs globaux
Attributs que l’on va pouvoir
utiliser sur toutes les balises
• Core
• id : nom
• class : nom de classe(s)
• style : CSS en ligne
• title : tooltip — infobulle
• i18n
• lang : langue du contenu
• dir : direction du texte
• events
• on* : événements
8. bloc
<head>
Représente les méta-informations du document.
<head>
<meta http-equiv="Content-Type" content= "text/html;
charset=UTF-8" />
<title>Mon document</title>
</head>
Note : Il ne doit y avoir qu’une balise
<head> et <body> par document.
9. bloc
<body>
Représente le corps du document.
<body>
<h1>Bienvenue !</h1>
<p>Ce site voue un culte à Friedrich Nietzsche.</p>
</body>
Note : ne peut pas contenir de en ligne directement.
10. bloc
<div>
Neutre.
Permet de regrouper.
<div>
<p>Je voudrais donner, prodiguer ma sagesse…</p>
<p>Il me faudra pour cela descendre dans les…</p>
<p>Il me faudra comme toi décliner, ainsi que disent…</p>
</div>
11. en ligne
<span>
Neutre.
Permet de regrouper.
<p>Il me faudra comme toi
<span><em>décliner<sup>1</sup></em><span>, ainsi que
disent les hommes vers lesquels je veux descendre.</p>
12. bloc
<h1…6>
Représentent des titres,
permettent de hiérarchiser le document.
<h1>Les aliments</h1>
<h2>Les légumes</h2>
<h3>La patate</h3>
<h3>La tomate</h3>
<h2>Les fruits</h2>
<h3>Le kiwi</h3>
<h3>La banane</h3>
Note : ne peuvent pas contenir de bloc
14. bloc
<p>
Représente un paragraphe de texte.
<p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour
où les sages d’entre les hommes se sentiront heureux de
leur folie, les pauvres heureux de leur richesse.</p>
Note : ne peut pas contenir de bloc
15. en ligne
<a>
Représente un lien hypertexte.
Attributs :
• href : adresse du lien
• hreflang : langue de la page ou section ciblée
<a href="http://google.fr">Un lien absolu</a>
<a href="/news/">Un lien relatif</a>
<a href="#moteur-de-recherche">Un lien interne</a>
Note : ne peut pas contenir de <a>
16. en ligne
<em>/<strong>
Mise en exergue (ajoute de l’importance).
<strong> est plus important que <em>
<p>Attention, c’est <em>important</em> !</p>
<p>Faites <strong>très</strong> attention !</p>
17. en ligne
<abbr>/<acronym>
Représente une abréviation (HTML, SNCF)
Représente un acronyme (Laser, Sida).
<p>Aujourd’hui, c’est cours de <abbr title="HyperText
Markup Language">HTML</abbr>.</p>
<p>Attention au <acronym title="RAdio Detection And
Ranging">Radar</acronym> !</p>
18. bloc <blockquote>
en ligne <q>/<cite>
Représente une citation.
<blockquote>
<p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour où les
sages d’entre les hommes se sentiront heureux de leur folie, les
pauvres heureux de leur richesse.</p>
</blockquote>
<p>Hamlet commença son monologue : <q>Être ou ne pas être ?</q></p>
Note : <blockquote> ne peut pas contenir
de en ligne directement.
19. en ligne
<sup>/<sub>
Mise en exposant.
Mise en indice.
<p>C’était ma 1<sup>ère<sup> fois…</p>
<p>J’aime l’<abbr title="Eau">H<sub>2</sub>O</abbr>.</p>
20. en ligne
<ins>/<del>
Représente un texte inséré.
Représente un texte supprimé.
<p>Jean-Claude Vandamme est un <del>philosophe<del>
<ins>acteur<ins> d’origine belge.</p>
21. bloc
<pre>
Représente du texte pré-formaté.
<pre>
(__)
(oo)
/-------/
/ | ||
* ||----||
~~ ~~
</pre>
Note : ne peut pas contenir de <sup>, <sub>,
<img/>, <object>
22. en ligne
<code>/<var>
<kbd>/<samp>
Représente du contenu lié à l’informatique.
<pre><code>
<var>$x</var> = 3;
echo <var>$x</var>; // Affiche <samp>3</samp>
</code></pre>
<p>Tapez <kbd>1</kbd> pour voter pour
Cunégonde, et <kbd>2</kbd> pour voter pour
Pierre-Alfred.</p>
24. en ligne
<img/>
Représente une image.
Attributs obligatoires :
• src : adresse du fichier
• alt : texte alternatif
<img src="images/chatons.jpg" alt="De mignons lolcats" />
25. bloc
<map>
Représente des zones pour une image.
Attributs obligatoires :
• id : nom de l’ensemble de zones
<map id="monde">
<area shape="rect" coords="0,0,100,90" href="france.html"
alt="France" />
</map>
26. en ligne
<area/>
Représente une zone.
Attributs obligatoires :
• alt : texte alternatif
Attributs :
• shape : forme de la zone
• coords : coordonnées de la zone
• href : adresse du lien
<map id="monde">
<area shape="rect" coords="0,0,100,90" href="france.html"
alt="France" />
</map>
28. bloc
<ul>/<ol>/<li>
Représente une liste.
<p>Liste de courses :</p> <p>À faire aujourd’hui :</p>
<ul> <ol>
<li>Pizza</li> <li>Sortir le chien</li>
<li>Patates</li> <li>Manger</li>
<li>Boissons <li>Cours HTML
<ul> <ul>
<li>Bière</li> <li>Finir le cours !</li>
<li>Vodka</li> <li>Donner le cours</li>
</ul> </ul>
</li> </li>
</ul> </ol>
Note : <ul> et <ol> ne peuvent contenir
que des <li> directement.
29. bloc
<dl>/<dt>/<dd>
Représente une liste de définitions.
<dl>
<dt>Le kiwi</dt>
<dd>C’est un fruit, mais aussi un animal</dd>
<dt>Le litchi</dt>
<dd>Un excellent fruit exotique</dd>
</dl>
Note : <dt> ne peut pas contenir de bloc
31. bloc
<form>
Représente un formulaire.
Attributs obligatoires :
• action : adresse de soumission
Attributs :
• method : type de requête
• enctype : content-type pour la soumission
<form method="post" action="inscription.php">
…
</form>
Note : ne doit pas contenir d’autres <form>.
32. en ligne
<input/>
Représente un champ de formulaire.
Attributs :
• type : type de champ
• name : nom de la donnée (utilisé pour traiter le formulaire)
• value : valeur du champ
• maxlength : taille maximale de la saisie (en caractères)
• checked : coché ?
• disabled : désactivé ?
• readonly : en lecture seule ?
34. en ligne
<select>
<optgroup>/<option>
Représente une liste déroulante.
Attributs (<select>) :
• name : nom de la donnée (utilisé pour traiter le formulaire)
• multiple : permet de choisir plusieurs options
• disabled : désactivé ?
Attributs (<optgroup>) :
• label : nom du groupe d’options
• disabled : désactivé ?
Attributs (<option>) :
• value : valeur du champ
• selected : sélectionné ?
• disabled : désactivé ?
35. en ligne
<select>
<optgroup>/<option>
Représente une liste déroulante.
<select name="pays">
<option value="ca">Canada</option>
<option value="jp" selected="selected">Japon</option>
<optgroup label="Europe">
<option value="fr">France</option>
<option value="de">Allemagne</option>
</optgroup>
</select>
36. en ligne
<textarea>
Représente un champ de saisie de texte.
Attributs obligatoires :
• rows : nombre de lignes
• cols : nombre de colonnes
Attributs :
• name : nom de la donnée (utilisé pour traiter le formulaire)
• disabled : désactivé ?
<textarea name="description" rows="3" cols="80">…</textarea>
Note : <textarea> ne peut contenir que du texte.
37. en ligne
<button>
Représente un bouton.
Attributs :
• type : type de bouton
• disabled : désactivé ?
<button type="submit">Envoyer</button>
<button type="reset">Recommencer</button>
<button type="button">Bouton inutile</button>
Note : ne doit pas contenir <input>, <select>,
<textarea>, <label>, <button>, <form>,
<fieldset>, <iframe>.
38. en ligne
<label>
Représente une étiquette associée à un champ.
Attributs :
• for : cible de l’étiquette
<label for="email">Adresse mail :</label>
<input type="text" id="email" name= "mail" />
Note : ne peut pas contenir d’autres <label>.
39. bloc
<fieldset>
Représente une section de formulaire.
<fieldset>
<legend>Informations personnelles</legend>
<input type="text" id="email" name= "mail" />
</fieldset>
Note : doit contenir <legend> directement.
40. en ligne
<legend>
Représente un titre de section de formulaire.
<fieldset>
<legend>Informations personnelles</legend>
<input type="text" id="email" name= "mail" />
</fieldset>
44. bloc
<tr>
<th>/<td>
Représente une ligne de tableau.
Représente une cellule d’en-tête.
Représente une cellule.
Attribut (<th>) :
• scope : spécifie les données qui doivent être associées à ce
<th> (col ou row)
Attributs (toutes) :
• rowspan : nombre de cellules à fusionner sur la ligne
• colspan : nombre de cellules à fusionner sur la colonne
45. en ligne
<caption>
Représente une légende de tableau.
<table>
<caption>Tableau très intéressant</caption>
…
</table>
Note : doit se trouver directement après <table>.
47. en ligne
<title>
Représente le titre du document.
<title>La page web de ma vie</title>
48. en ligne
<meta/>
Représente une méta-information du document.
Attribut obligatoire :
• content : l’information
Attributs :
• name : nom de la méta-information
• http-equiv : nom de l’en-tête HTTP
<meta name="auteur" content="Nicolas Le Gall" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
49. en ligne
<link/>
Représente une relation entre documents.
Attributs :
• type : type MIME du contenu
• href : adresse du document
• media : support pour lequel la relation est faite
<link rel="stylesheet" type="text/css" href="…" media="screen" />
50. en ligne
<base/>
Définis l’adresse de base à utiliser
pour les adresses relatives.
Attribut obligatoire :
• href : adresse de base
<base href="http://example.org/site/" />
