web
web > Xhtml / Css - Eléments, balises, attributs, listes, tableaux
Dans ce document nous allons parler d’éléments, de balises et d’attributs. Ces notions ont leur sens propre en XHTML, sens que nous allons expliciter :
Élément > Nom, notion abstraite.
Balise > Forme concrète d’un élément. On parlera aussi de balise ouvrante et fermante. Par exemple <html> est la balise ouvrante de l’élément html.
Attribut - Un attribut est une propriété d’un élément. Il permet de préciser le rôle ou certaines
propriétés d’une balise dans le document.
Voici un exemple d’application de l’attribut xmlns à l’élément html :
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
</html>Les balise et les attributs suivent quelques règles simples :
les noms des balises doivent être écrits en minuscules ;
toute balise ouverte est fermée (par exemple ...) ;
les noms des attributs doivent être écrits en minuscules ;
les valeurs des attributs doivent être entre guillemets doubles.
Titre du document et en-tête
La première chose à faire lorsque l’on crée un document quel qu’il soit est de lui donner un titre. En HTML on donne le titre du document dans une partie appelée en-tête. L’en-tête se situe au début du document (après la balise ) ; elle est délimitée par les balises et . Elle contient des informations qu'un navigateur n'affichera généralement pas dans son espace d'affichage mais qui pourront être utilisées à des fins diverses.
Le titre est défini à l'aide de l'élément title comme dans l'exemple suivant :
Pour tester ce que nous venons d'expliquer, créez un document test.html dans lequel vous
copierez le code suivant :
<?xml version="1.0" encoding="ISO-8859-1"?>
Les navigateurs Web affichent généralement le titre dans la barre de titre de la fenêtre.
Corps du document, titres et paragraphes
Le corps du document est la zone que l’on va trouver après l’en-tête. Il est défini par l’élément body.
Les titres sont au nombre de 6, chacun ayant un niveau d’importance. Le plus haut niveau
d’importance est le titre h1, suivit de h2 et ainsi de suite jusqu’à h6. Ces niveaux sont
largement suffisants pour couvrir l’ensemble de vos besoins les plus courants.
Un paragraphe est défini par l’élément p. Il sera affiché avec un espacement avant et après,
permettant ainsi une bonne séparation des paragraphes entre eux et avec le reste des
éléments du document.
Voici un exemple de titres et paragraphes, vous pouvez le copier dans votre document précédemment créé, juste en dessous de la balise </head> :
<body>
<h1>Titre très important</h1>
<p>Paragraphe.</p>
<h2>Titre moins important</h2>
<p>Second paragraphe un peu plus long que le premier.</p>
</body>Note : En XHTML (et HTML) les retours à la ligne sont considérés comme des espaces. Plusieurs espaces ou retours à la ligne consécutifs ne donneront pour résultat qu’une seule et unique espace (faites l’essai).
Les listes
Les listes sont des outils bien utiles pour présenter des informations. XHTML en offre 3 types différents. Le premier type de liste est la liste non ordonnée, autrement appelée liste à puces. En voici un exemple :
<ul>
<li>1er élément</li>
<li>2ème élément</li>
<li>3ème élément</li>
</ul>Ce type de liste sera présenté avec des petites puces avant le texte de chaque élément. Le second type de liste est la liste ordonnée :
<ol>
<li>1er élément</li>
<li>2ème élément</li>
<li>3ème élément</li>
</ol>Cette liste ne sait pas mieux ranger ou faire le ménage que l’autre, elle doit uniquement son nom au fait qu’elle affiche un numéro au lieu d’un puce avant le texte de chaque élément. Enfin, le dernier type de liste est la liste de définition, permettant de créer des listes possédant un terme et sa définition ; jugez plutôt :
<dl>
<dt>Premier terme</dt>
<dd>Définition du premier terme.</dd>
<dt>Second terme</dt>
<dd>Définition du second terme.</dd>
</dl>Ce dernier type de liste est généralement affiché avec la définition en retrait du terme.
Les tableaux
Longtemps, les tableaux ont été utilisés pour effectuer la mise en page des éléments d’une page Web. Qu’on se le dise, cette période n’est plus. Cependant, les tableaux sont toujours utiles pour présenter des informations de manière plus claire que dans une liste ou des paragraphes.
Tableaux simples
Un tableau HTML est découpé en lignes contenant des cellules. Le nombre de cellules dans chaque ligne doit être le même, ou alors il est nécessaire de spécifier des options de recouvrement. Voici un exemple de tableau très simple :
<table>
<tr>
<th>ligne 1, colonne 1 (en-tête)</th>
<th>ligne 1, colonne 2 (en-tête)</th>
<th>ligne 1, colonne 3 (en-tête)</th>
</tr>
<tr>
<td>ligne 2, colonne 1</td>
<td>ligne 2, colonne 2</td>
<td>ligne 2, colonne 3</td>
</tr>
<tr>
<td>ligne 3, colonne 1</td>
<td>ligne 3, colonne 2</td>
<td>ligne 3, colonne 3</td>
</tr>
</table>Les balises <tr> et </tr> délimitent les lignes du tableau. Dans la première ligne, la balise <th> désigne des cellules d’un type particulier : elles ne contiennent pas de données, mais l’en-tête (ou titre) des colonnes correspondantes. Dans les lignes suivantes, <td> spécifie les cellules de données.
Tableaux avec cellules recouvrantes
Comme nous l’avons dit, des cellules peuvent en recouvrir d’autres, que ce soit en largeur ou en hauteur. Pour qu’une cellule occupe n cellules vers la fin de la ligne, on utilise l’attribut colspan="n". Pour qu’une cellule occupe n cellules vers la fin de la colonne, on utilise l’attribut rowspan="n". Voici un exemple où j’ai volontairement laissé en blanc les cellules supprimées :
<table>
<tr>
<td rowspan="2">ligne 1 et 2, colonne 1</td>
<td>ligne 1, colonne 2</td>
<td>ligne 1, colonne 3</td>
</tr>
<tr>
<td>ligne 2, colonne 2</td>
<td>ligne 2, colonne 3</td>
</tr>
<tr>
<td>ligne 3, colonne 1</td>
<td colspan="2">ligne 3, colonne 2 et 3</td>
</tr>
</table>Titre de tableau
Vous pouvez donner un titre à votre tableau grâce à l’élément caption. Cet élément va placer le titre, généralement au dessus du tableau. Voici un exemple d’usage de l’élément caption :
<table>
<caption>Mon premier tableau</caption>
<tr>
<td>ligne 1, colonne 1</td>
<td>ligne 1, colonne 2</td>
</tr>
<tr>
<td>ligne 2, colonne 1</td>
<td>ligne 2, colonne 2</td>
</tr>
</table>Sauts de ligne et espace insécables
Il est commode pour diverses raisons, de sauter une ligne dans un texte, sans pour autant marquer un saut de paragraphe (en poésie par exemple). Ceci est permis par l’élément br. Cet élément est unique et se termine donc par un /. Voici un exemple :
<p>
vidi lecta diu et multo spectata labore<br />
degenerare tamen, ni vis humana quotannis<br />
maxima quaeque manu legeret. sic omnia fatis<br />
in peius ruere ac retro sublapsa referri,<br />
non aliter quam qui adverso vix flumine lembum<br />
remigiis subigit, si bracchia forte remisit,<br />
atque illum in praeceps prono rapit alveus amni.
</p>
<p>Texte de Virgile.</p>La langue française impose d’utiliser des espaces avant certaines marques de ponctuation telles que le point d’interrogation, le point d’exclamation, le point virgule ou encore les deux points. Ceci est facile à faire, il suffit de mettre un espace. Le problème est que votre marque de ponctuation, avec un espace normal, peut passer à la ligne, ce qui sera des plus disgracieux. Heureusement, il existe un caractère particulier dit espace insécable. Un mot suivi d’un espace insécable et d’une marque de ponctuation ne sera jamais coupé. L’espace insécable est un caractère particulier codé . Voici un exemple :
<p>
Ceci est un paragraphe, veuillez le lire attentivement :
</p>
<p>
Mon paragraphe HTML vous plaît-il ?
</p>
PDF
105055
