Marqueurs HTML intermédiaires

Listes, citations et autres astuces

Jusqu'ici, nous avons parcouru les notions de base du langage HTML. Déjà, les connaissances acquises devraient vous permettre de réaliser des documents W3 simples mais efficaces. Dans les leçons suivantes, nous verrons d'autres marqueurs qui vous aideront à améliorer la présentation de votre travail.

Les listes non numérotées <UL>

Très souvent, lors de la conception de pages W3, vous vous trouverez dans une situation où vous aurez à faire une liste d'items. À la rigueur, vous pourriez utiliser un marqueur de fin de ligne <BR> ou un marqueur de paragraphe <P> pour séparer chaque item, mais l'apparence de votre page pourrait en souffrir. Heureusement, les marqueurs de listes vous permettront de créer des listes, incluant même un gros point noir devant chaque item. En exemple, si vous désirez créer une liste comme ceci:

• Minou
• Miau
• Minet
• Matou

Vous utiliserez alors le marqueur de liste non numérotée, ou <UL>. De plus, chaque item dans la liste sera précédé par le marqueur d'item de liste ou <LI>. Pour réaliser notre liste, nous avons écrit ce qui suit:

<UL>
<LI> Minou
<LI> Miau
<LI> Minet
<LI> Matou
</UL>

Assurez-vous d'inclure le marqueur de fermeture, </UL>. Le navigateur affiche alors une liste d'apparence agréable dont chaque item sera précédé d'un gros point noir.

Les listes numérotées

Vous aimeriez parfois lister des items numérotés. Le marqueur de liste numérotée, <OL>, crée une telle liste en numérotant automatiquement les items. Ça ressemble beaucoup à un marqueur <UL>: la seule différence réside dans les marqueurs d'ouverture et de fermeture. Essayons ceci:

<OL>
<LI> Minou
<LI> Miau
<LI> Minet
<LI> Matou
</OL>

Le navigateur affiche ainsi la liste:

1. Minou
2. Miau
3. Minet
4. Matou

Les marqueur de liste numérotée sont réellement utiles lorsque vous désirer numéroter vos items. De plus, si vous planifier en ajouter de temps à autre, votre liste reste numérotée sans que vous soyez obligé de réécrire les numéros à chaque fois que vous apportez un changement.

Les listes de définitions <DL>

Une liste de définitions contient ordinairement des marqueur de termes à définir, <DL>, et des marqueurs de définitions de termes, <DD>. Le marqueur <DL> se place avant la liste et le marqueur </DL>, après.

Examinons les exemple déjà cités.


<DL>
<DT>Lynx
<DD>Un logiciel de navigation qui fonctionne en mode non graphique utilisé pour accéder au W3.
</DL>

Le résultat devrait être:

Lynx

Un logiciel de navigation qui fonctionne en mode non graphique utilisé pour accéder au W3.

Une liste de définitions en contient plusieurs, contrairement à l'exemple ci-dessus, mais la règle demeure la même: faites précéder chaque terme d'un marqueur <DT> et chaque définition d'un marqueur <DD>. Terminez par le marqueur de fermeture </DL>. Vous aurez alors une liste bien présentée.

Les entrées <DT> et <DD> peuvent former de nombreux paragraphes séparés par des marqueurs de paragraphes<P>, des listes ou d'autres informations apparentée aux définitions. Il est probable que vous n'utiliserez pas les listes de définitions très souvent, à moins de composer un dictionnaire en ligne...

Les citations et le marqueur de bloc-note

Lorsque vous créez un page W3, vous voulez parfois mettre une citation en évidence à l'intérieur d'un texte. Le marqueur de bloc-note, <BLOCQUOTE>, est utilisé pour renforcer automatiquement la citation et la séparer du reste du texte. En exemple:

Quasimodo est un personnage intéressant du livre de Victor Hugo, Notre-Dame de Paris. <blockquote> Le hideux Quasimodo vit là, au milieu de ses cloches; et son coeur s'éveille à l'amour lorsque, condamné au pilori pour avoir attaqué la Esmiralda, il reçoit à boire des mains de la jeune fille. </blockquote> Mais il y a l'inquiétant Frollo qui, lui aussi, est dévoré de passion pour la Esméralda...

Le résultat est:

Quasimodo est un personnage intéressant du livre de Victor Hugo, Notre-Dame de Paris.

Le hideux Quasimodo vit là, au milieu de ses cloches; et son coeur s'éveille à l'amour lorsque, condamné au pilori pour avoir attaqué la Esmiralda, il reçoit à boire des mains de la jeune fille.

Mais il y a l'inquiétant Frollo qui, lui aussi, est dévoré de passion pour la Esméralda.

Les marqueurs de formatage peuvent être utilisés dans une citation, comme le marqueur de paragraphe, <P> et le marqueur de fin de ligne, <BR>. Mais les marqueur de préformatage du texte, <PRE> et </PRE> les remplacent avantageusement en obligeant le navigateur à afficher un texte tel qu'il est disposé. Il sont souvent d'une grand utilité et je vais les utiliser dans l'exemple suivant. <

<PRE> <B> Mon extrait favori des Fleurs du Mal de Baudelaire est: Les chats Ils prennent en songeant les nobles attitudes Des grands sphinx allongés au fond des solitudes, Qui semblent s'endormir dans un rêve sans fin; Leurs reins féconds sont pleins d'étincelles magiques, Et des parcelles d'or, ainsi qu'un sable fin, Étoilent vaguement leurs prunelles mystiques. Je trouve la poésie, Correspondances, très belle aussi. </B> </PRE> Voici le résultat:

Mon extrait favori des Fleurs du Mal  de Baudelaire est:

 

Les chats



Ils prennent en songeant les nobles attitudes

Des grands sphinx allongés au fond des solitudes,

Qui semblent s'endormir dans un rêve sans fin;



Leurs reins féconds sont pleins d'étincelles magiques,

Et des parcelles d'or, ainsi qu'un sable fin,

Étoilent vaguement leurs prunelles mystiques.

 

Je trouve la poésie, Correspondances, très belle aussi.

Quiz interactif

Les listes et les blocs-notes sont très faciles, même pour un novice en langage HTML. C'est ce que vous constaterez en participant au quiz interactif suivant sur l'hypertexte.

Quand vous l'aurez terminé, passez à la page suivante ou revoyez la présente leçon.

---