Nous allons vous présenter les balises les plus importantes.
Les balises de textes
Mettons un titre à notre première page.
Il existe 6 balises pour cela, toutes de type block : <h1> <h2> <h3> ... <h6>
La différence entre chacune d'elles est la taille d'affichage des caractères respectivement de la plus grande taille vers la plus petite. Les plus fréquemment utilisés sont <h1> <h2> <h3>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple balises de titres</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Titre h1</h1>
<h2>Titre h2</h2>
<h3>Titre h3</h3>
<h4>Titre h4</h4>
<h5>Titre h5</h5>
<h6>Titre h6</h6>
</body>
</html>
Voici LA balise pour écrire du texte : <p>Type Block, de type block.
Le retour à la ligne s'effectue obligatoirement par la balise <br/>Type Inline, si vous sautez une ligne dans votre code ceci n'aura aucun effet sur la présentation.
Une séparation horizontale entre deux blocks s'effectue avec la balise <hr/>Type Block.
Il est possible de mettre en valeur votre texte avec les balises <em>Type Inline et <strong>Type Inline
(respectivement valeur faible et forte). Le navigateur interprète généralement ces balises comme une mise en gras ou en italique.
Les mises en indices et exposant s'effectuent avec les balises <sub>Type Inline
<sup>Type Inline.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple balises de titres</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
Cette ligne est écrite dans un bloc paragraphe
si je fait un retour à la ligne en pressant la touche entrée
vous pouvez constater qu'il n'est pas pris en compte dans l'affichage de la page. <br/>
Il faut donc utiliser la balise prévue à cet effet.
</p>
<hr/>
<p>
La balise <hr/> effectue une séparation horizontale entre les 2 paragraphes.<br/>
Il est possible de mettre le texte en valeur par une <em> mise en valeur faible</em> ou <strong> une mise en valeur forte </strong>.
</p>
<hr/>
<p>
Savez-vous résoudre ce polynôme: P<sub>1</sub>(x)=2x<sup>25</sup>+12,49x<sup>14</sup> =122 ????<br/>
Nous non...
</p>
</body>
</html>
Les listes à puces
Il peut être utile d'organiser son texte avec des listes à puces. Le XHTML peut le faire.
Il faut savoir qu'en XHTML il existe 3 types de liste à puces :
- Les listes non ordonnées : éléments de la liste écrits à la suite sans cohérence particulière
- Les listes ordonnées : élément ordonnés de la façon que vous voulez avec un indice indiquant l'ordre des éléments
- Les listes de définition : liste d'élements avec leur définition.
Rien de bien compliqué dans la réalisation d'une liste à puce non ordonnée:
Tous les éléments de la liste seront placés entre les balises <ul>Type Block et </ul>Type Block
Chaque élément de la liste sera placé entre les balises <li>Type Inline et </li>Type Inline
Et c'est tout...
Pour une liste ordonnée, c'est le même principe, il suffit juste de remplacer la balise <ul>Type Block par </ol>Type Block.
Chaque élément à ordonner sera placé dans l'ordre séparé par la balise <li>Type Inline.
En revanche pour les listes de définitions c'est un peu différent, tout les éléments de la liste seront entre les balises <dl>Type Block et </dl>Type Block et chaque élément de la liste sera entre les balises <dt>Type Inline et </dt>Type Inline. La définition correspondant à cet élément sera entre <dd>Type Inline et </dd>Type Inline.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Les puces</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Liste de courses :</p>
<ul>
<li>De la crème</li>
<li>Du dentifrice</li>
<li>De la violette</li>
<li>De la limonade</li>
</ul>
<p>
Comme nous sommes des gens un peu organisés, nous allons mettre une priorité aux éléments de la liste les plus urgents
</p>
<p>Liste de courses ordonnée:</p>
<ol>
<li>De la crème</li>
<li>Du dentifrice</li>
<li>De la violette</li>
<li>De la limonade</li>
</ol>
<p>Définitions :</p>
<dl>
<dt>Crème : </dt>
<dd>Texture blanchâtre se mélangeant parfaitement à des pâtes aux lardons.</dd>
<dt>Dentifrice :</dt>
<dd>Texture généralement blanchatre indispensable à l'haleine matinale.</dd>
<dt>Violette :</dt>
<dd>Liquide bleuâtre se mélangeant parfaitement avec de la limonade et parfois à la vodka<em> Avec modération</em>.</dd>
<dt>Limonade :</dt>
<dd>Liquide dont la seule utilité se rapporte à la définition ci-dessus.</dd>
</dl>
</body>
</html>
Les tableaux
Bon les listes, c'est bien mais ça ne nous permet pas de classer réellement des éléments, pour cela il nous faudra créer des tableaux.
Revenons à la définition simple d'un tableau :
Des lignes et des colonnes.
Ici nous remplissons un tableau en insérant chaque colonnes d'une ligne, ligne apres ligne.
On ouvre un tableau à l'aide de <table>Type Block.
Que met on dans ce tableau ?
Un titre avec caption<Type Inline>.
Remarque : Les balises suivantes contiendront toute la même syntaxe :
On ouvre une ligne, on remplit chaque colonne, on ferme la ligne.
-
La tête du tableau, <thead>Type Block.
Celle ci servira à mettre les grands titres des colonnes.
- <tr>Type Inline permet d'ajouter une ligne.
- <th>Type Inline permet d'ajouter une colonne.
- <tr>Type Inline permet d'ajouter une ligne.
-
Le corps du tableau, <tbody>Type Block.
- <tr>Type Inline permet d'ajouter une ligne.
- <td>Type Inline permet d'ajouter une colonne.
- <tr>Type Inline permet d'ajouter une ligne.
-
Eventuellement un pied de tableau, <tfoot>Type Block,
qui s emploie comme <thead>Type Block, avec les balises
<th>Type Inline et <tr>Type Inline
Attention ! Cette balise doit se trouver entre la tête du tableau et le corps. Ce n'est pas tres logique mais c'est ainsi.
Le navigateur se chargera de tout placer au bon endroit.
Vous voulez fusionner deux, trois cellules ? Quoi de plus simple !
- Fusion horizontale. Utilisez l'attribut colspan dans la première balise de la cellule qui vous interesse, renseignez cet attribut du nombre de cellules que vous désirez et toutes les cellules suivantes de la même ligne (y compris la première) ne formeront qu'une.
- Fusion verticale. La c'est un peu plus compliqué à comprendre. En utilisant l'attribut rowspan vous allez fusionner 2 cellules en verticale. Lors de la prochaine ligne la cellule qui si trouvera au dessous ne sera pas renseigné (logique puisqu'elle est fusionné !) Vous comprendrez mieux avec l'exemple ci dessous dans la partie fusion.
<td rowspan="2">Type Inline
(remplacez 2 par 3 pour trois cellules, mais ça vous l'aurez deviné( enfin j'espère )).
Un exemple vaut mieux qu'un long discours, je vous laisse essayer par vous même.
<caption> Comparaison du développement des pays d'Asie. </caption>
<thead>
<tr>
<th> Pays </th>
<th> Superficie </th>
<th> Population </th>
<th> PIB 2005 </th>
<th colspan="2"> PIB/tête ($PPA) </th>
<th colspan="3"> Croissance moyenne (%) </th>
</th> IDH </th>
</tr>
<tr>
<th> </th>
<th> (milliers km²) </th>
<th> 2005 (millions) </th>
<th> (milliards $PPA) </th>
<th> 1960 </th>
<th> 1997 </th>
<th> 1960-79 </th>
<th> 1979-87 </th>
<th> 1987-97 </th>
<th> 2003 </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Pays </th>
<th> Superficie </th>
<th> Population </th>
<th> PIB 2005 </th>
<th colspan="2"> PIB/tête ($PPA) </th>
<th colspan="3"> Croissance moyenne (%) </th>
<th> IDH </th>
</tr>
</tfoot>
<tr>
<td> Japon </td>
<td> 317,9 </td>
<td> 127,9 </td>
<td> 3943,7 </td>
<td> 3939 </td>
<td> 20290 </td>
<td> 6,5 </td>
<td> 2,7 </td>
<td> 2,4 </td>
<td> 0,943 </td>
</tr>
<tr>
<td> Corée du sud </td>
<td> 99,6 </td>
<td> 48,3 </td>
<td> 1056,1 </td>
<td> 1045 </td>
<td> 12545 </td>
<td> 7,4 </td>
<td> 6,1 </td>
<td> 6,7 </td>
<td> 0,901 </td>
</tr>
<tr>
<td> Taïwan </td>
<td> 36 </td>
<td> 22,8 </td>
<td> 631,2 </td>
<td> 1568 </td>
<td> 16693 </td>
<td> 16,3 </td>
<td> 6,4 </td>
<td> 5,4 </td>
<td> 0,91 </td>
</tr>
<tr>
<td> Fusion 1 </td>
<td colspan="3"> Fusion de 3 cellules horizontales </td>
<td rowspan="2">
<td> 1 </td>
</tr>
<tr>
<td> Fusion 2 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 2 </td>
</tr>
</tbody>
</table>
