Les feuilles de style (6/8)

Organisez vos documents !

Maintenant, vous voudriez donner de la présentation à des parties de votre document qui ne sont pas comprises entre deux balises. Problème insoluble ? Le suspense est insoutenable … Hé bien non !

 

Les balises <div> et <span>

Ces balises servent à encadrer des parties de votre document. <div> (pour division) c'est pour un bloc de votre document, par exemple toute votre partie menu de navigation, comme nous allons voir plus tard. Attention pour que votre document soit bien structuré, il faut que toute balise ouvrante contenue entre <div> et </div> ait aussi sa balise fermante dans le bloc.

<span> c'est pour des éléments en ligne, typiquement des bouts de phrases. Donc dans la plupart des cas, vos balises <span> et </span> seront à l'intérieur de <p> et </p>. Veuillez là aussi à ce que votre document reste bien structuré.

 

id et class sont les amis de <div> et <span>

Maintenant vous pouvez structurer votre document en grandes parties distinctes grâce à <div>. Par exemple, vous pouvez mettre le titre de votre page dans un div avec une id particulière ; de même pour votre menu, et enfin pour le contenu de votre page. Vous pourrez ensuite les positionner, les mettre en forme etc.

Par exemple pour le menu :

<div id="Menu">
	<!-- Tout le code du menu, avec la liste à puces, etc. -->
</div>

Regardez le code source de notre page d'exemple pour voir comment nous avons structuré notre page en trois div : un pour le titre, un pour le menu et un autre pour le contenu de la page. Ca ne change rien à l'apparence … pour l'instant. Mais on va pouvoir affecter à chacun de ces div des propriétés particulières afin de les disposer dans la page.

Notez aussi que nous avons encadré le seul mot "paragraphe" grâce aux balises span.

 

Il ne nous reste plus qu'à nous servir de cette nouvelle structure pour apporter la touche finale à notre document.

 

Revenir au sommaire de cette leçon
Revenir à l'index des leçons Web

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French