Mmento XHTML - Balises courantes
La structure XHTML
Entte
<!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"
xml:lang="fr" lang="fr">
<head>
<title>TITRE DU DOCUMENT</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
</head>
<body>
<!-- Commentaire -->
<p>VOTRE TEXTE</p>
</body>
</html>
<head>
<!-- DESCRIPTION DU DOCUMENT -->
<title>Titre du document</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="author" content="Albert Dupont" />
<meta name="description" content="Description du
contenu de la page Web en 150 caractres maximum." />
<meta name="date"
content="2008-12-31T05:00:00+01:00">
<!-- ICONE DE FAVORIS -->
<link rel="shortcut icon" type="image/x-icon"
href="favicon.ico" />
<!-- FEUILLES DE STYLES CSS -->
<link type="text/css" rel="stylesheet" media="all"
href="style.css" />
<style type="text/css">
<!-/* Placez ici les directives CSS */
-->
</style>
<!-- JAVASCRIPT -->
<script src="script.js" language="javascript"
type="text/javascript"></script>
<script type="text/javascript">
<!-// Placez ici le code Javascript
//-->
</script>
</head>
Autres doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Texte courant
Titres
h1, h2, ..., h6
<h1>Titre de la page</h1>
<h2>Titre de 2e niveau</h2>
<h3>Titre de 3e niveau</h3>
...
Voir aussi la balise
<title> en section
Entte
<h6>Titre de 6e niveau</h6>
Paragraphe
<p>Un simple paragraphe.</p>
Emphase simple et forte
Entits obligatoires
em, strong
<p><strong>Attention</strong>, le texte est protg par un
<em lang="en">copyright</em>.</p>
Retour de ligne
br
<p>Les programmes de Windows se trouvent dans : <br />
<code>C:\Program files</code></p>
Abrviation
abbr
<p>La <abbr title="Socit nationale des chemins de
fer">SNCF</abbr> existe depuis 1938</p>
Indice et exposant
sub, sup
<p>Le 2<sup>e</sup> lment de l'H<sub>2</sub>O est
l'oxygne.</p>
Dfinition d'un terme
dfn
bdo
<p dir="ltr">Il a dit : <q><bdo dir="rtl">< /bdo>
(<em>Was-salaam alaykum</em>)</q>.</p>
Commentaires
<!-- Commentaire -->
Mmento XHTML - Balises courantes
< <
> >
" "
& &
«
»
Entits courantes
Espace inscable
€
©
®
Hyperliens
Lien
<!-- Hyperlien vers une page Web -->
<a href="http://www.example.com"
title="Explication du lien">Texte cliquable</a>
<!-- Hyperlien vers une adresse email -->
<a href="mailto:
[email protected]">Envoyez-nous un
email</a>
Ancre nomme
<p>L'<dfn>eau</dfn> est un compos chimique, trs
courant sur le Terre, [...]</p>
Orientation du texte
Autre encodage courant :
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<a id="identifiant_unique"
name="identifiant_unique">Texte</a>
Images
Image
img
<img src="images/photo.jpg" alt="Texte pour les aveugles"
width="480" height="320" />
1/2
Citations et rfrences
Citations longues
Listes
blockquote
<blockquote cite="http://abu.cnam.fr/">
<p>Une embuscade tait probable.</p>
<p>Trente grenadiers, dtachs en claireurs et
commands par un sergent, marchaient [...]</p>
<cite>Victor HUGO, Quatre-vingt Treize.</cite>
</blockquote>
q
<p>Il dit : <q>Fermez la porte !</q></p>
Rfrence un document
cite
<p>C'est V. Hugo qui a crit <cite>Ruy Blas</cite>.</p>
address
Texte technique
Texte prformat
pre
<pre>$a = "fr_FR";
setlocale(LC_ALL, $a);
date_default_timezone_set('Europe/Paris');
</pre>
<ul>
<li>1er lment de la liste</li>
<li>2e lment de la liste</li>
<li>3e lment de la liste</li>
</ul>
<dl>
<dt>Terme 1</dt>
<dd>Dfinition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Dfinition du terme 2</dd>
<dt>Terme 3</dt>
<dd>Dfinition du terme 3</dd>
</dl>
Tableaux simples
code, var
keyb, samp
<p>Si vous tapez la commande <keyb>del mydir</keyb>, le
programme rpondra <samp>C:\mydir\*, tes-vous sr
(O/N) ?</samp>. Rpondez : <keyb>N</keyb>.</p>
Balises gnriques
Elment Bloc gnrique
div
<div class="avertissement">
<p><strong>Attention</strong></p>
<p>Le formatage peut causer la perte de donnes.</p>
</div>
Elment en-ligne gnrique
span
<p>La fonction <span class="fonction">trim</span> retire
les espaces des extrmits de chaine.</p>
Attributs gnriques
<p class="classe_css" id="id_unique" title="etiquette"
style="color:#FF0000" >Texte de la balise</p>
<iframe src="page.html" width="480" height="240"
name="inclusion1">
<p>Votre navigateur ne peut malheureusement pas
afficher de cadre incorpor. Vous pouvez appeler
la page incorpore par ce lien:
<a href="page.html">Titre de la page</a></p>
</iframe>
table, tr, th, td, caption
<table width="240" border="1">
<caption>Lgende du tableau</caption>
<tr>
<th width="40%">Titre col. 1</th>
<th width="30%">Titre col. 2</th>
<th width="30%">Titre col. 3</th>
</tr>
<tr>
<td>Donnes l1 : col1</td>
<td>Donnes l1 : col2</td>
<td>Donnes l1 : col3</td>
</tr>
<tr>
<td>Donnes l2 : col1</td>
<td>Donnes l2 : col2</td>
<td>Donnes l2 : col3</td>
</tr>
</table>
Fusion des cellules dans un tableau:
<td colspan="2"> Cellule fusionne sur 2 colonnes</td>
<td rowspan="2"> Cellule fusionne sur 2 lignes</td>
Balises obsoltes
... ou en passe de le devenir
tt, i, b, big, small, hr, frame, frameset
Balises non dcrites dans ce document
Cadre incorpor
2/2
dl, dt, dd
Tableaux
<p>La commande <code>$a="fr_FR"</code> permet
d'affecter une valeur la variable <var>$a</var>.</p>
Commandes
OL CSS - list-style-type : none|decimal|lower-roman|upperroman|lower-alpha|upper-alpha
Listes non-ordonnes (puces)
ul, li
UL CSS - list-style-type : none|disc|circle|square
Listes de termes
<address>
Albert Dupont,<br />
<em>Journaliste, spcialiste Web 2.0</em>,<br />
<a href="mailto:[email protected]">
[email protected]</a>
</address>
Code source et variable
ol, li
<ol>
<li>1er lment de la liste</li>
<li>2e lment de la liste</li>
<li>3e lment de la liste</li>
</ol>
Citation courtes
Auteur de la page Web
Listes ordonnes
map et area (zones cliquables)
object, embed et param (incorporation de mdias)
form, input, select, textarea, etc. (formulaires)
del et ins (versionning)
Auteur : Eric Bellot. Mis jour le 2010-01-24
Document publi selon les termes de la licence Creative Commons
CC-BY-SA : http://creativecommons.org/licenses/by-sa/2.0/fr/
Mmento XHTML - Balises courantes
