Leçon 6 : Quelques éléments de plus
Avez-vous pu créer quelques pages par vous-même ? Sinon voici un exemple :
<html>
<head>
<title>Mon site Web</title>
</head>
<body>
<h1>Un titre</h1>
<p>du texte, du texte du texte, du texte</p>
<h2>Sous-titre</h2>
<p>du texte, du texte du texte, du texte</p>
</body>
</html>
Et maintenant quoi ?
Il est temps d'apprendre sept éléments nouveaux.
De la même façon qu'on met du texte en caractères gras en le plaçant entre une balise ouvrante <b> et une balise fermante </b>, on peut afficher le texte en italique avec la balise ouvrante <i> et la balise fermante </i>. Bien sûr, le « i » est l'abréviation de « italique ».
Exemple 1 :
<i>Voici un texte en italique.</i>
Ce qui donne dans le navigateur :
De même, on peut diminuer le texte avec la balise small :
Exemple 2 :
<small>Voici un text diminué.</small>
Ce qui donne dans le navigateur :
Puis-je utiliser plusieurs éléments en même temps ?
Vous pouvez aisément utiliser plusieurs éléments en même temps tant que vous évitez le chevauchement des éléments. Cet exemple le montre mieux :
Exemple 3 :
Si vous voulez écrire un texte en caractères gras et en italique, il faut le faire comme ceci :
<b><i>Un texte en caractères gras et en italique</i></b>
Et NON comme cela :
<b><i>Un texte en caractères gras et en italique</b></i>
La différence tient au fait que, dans le premier exemple, nous avons clos la balise ouverte la première en dernier. Nous évitons ainsi de nous tromper ainsi que le navigateur.
Plus d'éléments !
Comme indiqué dans la leçon 4, il existe des éléments à la fois ouverts et fermés dans la même balise. Ces éléments dits vides ne sont pas associés à un passage particulier dans le texte mais sont des étiquettes isolées. Un exemple d'un tel élément est celui de <br />, qui force un saut de ligne :
Exemple 4 :
Du texte<br /> et encore dans une nouvelle ligne
Dans le navigateur, cela donne :
et encore dans une nouvelle ligne
Remarquez que la balise s'écrit comme la contraction d'une balise ouvrante et d'une balise fermante, avec un espace et une barre oblique à la fin : <br />. En principe, on pourrait aussi l'écrire <br></br>, mais pourquoi rendre les choses plus compliquées que nécessaire ?
Un autre élément ouvert et fermé dans la même balise est <hr />, lequel sert à tracer une ligne horizontale ; « hr » tient pour « horizontal rule » (N.d.T. ligne horizontale) :
Exemple 5 :
<hr />
Dans le navigateur :
Comme exemples d'éléments nécessitant une balise ouvrante et une balise fermante, comme c'est le cas pour la plupart, les éléments ul,ol et li. Ces éléments servent à fabriquer des listes.
« ul » est l'abréviation de « unordered list » (N.d.T. liste non ordonnée), et insère des puces pour chaque élément de liste. « ol » est l'abréviation de « ordered list » (N.d.T. liste ordonnée), et numérote chaque élément de liste. Pour créer les éléments de la liste, on utilise la balise li, abréviation de « list item » (N.d.T. élément de liste). Confus ? Voyez les exemples :
Exemple 7 :
<ul>
<li>Un élément de liste</li>
<li>Un autre élément de liste</li>
</ul>
Ça donnera dans le navigateur :
- Un élément de liste
- Un autre élément de liste
Exemple 8 :
<ol>
<li>Premier élément de liste</li>
<li>Second élément de liste</li>
</ol>
Et dans le navigateur :
- Premier élément de liste
- Second élément de liste
Ouf ! C'est tout ?
C'est tout pour l'instant. Encore une fois, expérimentez et fabriquez vos propres pages avec les sept éléments appris dans cette leçon :
<i>Italique</i>
<small>Texte diminué</small>
<br /> Saut de ligne
<hr /> Ligne horizontale
<ul>Liste</ul>
<ol>Liste ordonnée</ol>
<li>Élément de liste</li>