Tutoriel HTML-partie 6

Sujet: Tutoriel HTML-partie 6 Dim 18 Nov 2007, 4:49 pm

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 et une balise fermante , on peut afficher le texte en italique avec la balise ouvrante et la balise fermante . Bien sûr, le « i » est l'abréviation de « italique ».
Exemple 1 :
Voici un texte en italique.

Ce qui donne dans le navigateur :Voici un texte en italique.

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 :Voici un texte diminué.

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 :
Un texte en caractères gras et en italique

Et NON comme cela :
Un texte en caractères gras et en italique

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
, qui force un saut de ligne :
Exemple 4 :
Du texte
et encore dans une nouvelle ligne

Dans le navigateur, cela donne :Du texte
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 :
. En principe, on pourrait aussi l'écrire

, mais pourquoi rendre les choses plus compliquées que nécessaires ?
Un autre élément ouvert et fermé dans la même balise est

, lequel sert à tracer une ligne horizontale ; « hr » tient pour « horizontal rule » (N.d.T. ligne horizontale) :
Exemple 5 :

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 :

Un élément de liste

Un autre élément de liste

Ça donnera dans le navigateur :

Un élément de liste
Un autre élément de liste

Exemple 8 :

Premier élément de liste

Second élément de liste

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 :
Italique
<small>Texte diminué</small>

Saut de ligne

Ligne horizontale

Élément de liste