US

Grouper des éléments

On peut vouloir structurer le contenu d'un document en zones logiques par exemple en sections, ou en parties pour pouvoir par exemple appliquer un style commun à toutes les sections du document. Il y a deux éléments pour définir des zones ou divisions du documents : l'élément div et l'élément span.

Division en bloc ou inline

L'élément div représente une division en mode bloc. Voyons un exemple pour comprendre ce que le mode bloc.

1 
Avant la division <DIV>Dans la division</DIV> Et après la division
listing h11.1 L'élément DIV
L'élément DIV
fig h11.1 L'élément DIV

Un texte en mode bloc est donc un texte qui sera automatiquement précédé et suivi d'un saut de ligne. À l'opposé, on à les textes en mode inline (dans le texte) qui ne sont donc pas précédé et suivi d'un retour à la ligne mais restent dans le texte. On utilise à cette fin l'élément SPAN.

1 
Avant la division <SPAN>Dans la division</SPAN> Et après la division
listing h11.2 L'élément SPAN
L'élément SPAN
fig h11.2 L'élément SPAN

Utilisation

Une des utilisations typique du groupement d'éléments est l'application de style à tout le groupe d'un coup. On utilise alors les éléments DIV et SPAN avec les attributs id et class.

L'attribut id permet de donner un identifiant à un élément. Cet identifiant doit être unique dans le document. Par contre, l'élément class indique une liste de classes auxquelles appartient l'élément. Plusieurs éléments peuvent donc appartenir à la même classe.

Imaginons que l'on rédige un document qui représente un article. On va par exemple pouvoir utiliser un élément DIV pour représenter l'article et encadrer les auteurs des photos et de l'article avec un élément SPAN.

1 
2 
3 
4 
 
5 
6 
7 
8 
9 
<DIV id="article">
    <P>Lundi matin, des vents violents ont sévis et ont fait beaucoup de dégats.
 
    <P><IMG src="ventviolent.jpg" alt="Un vent violent">Photo par <SPAN class="auteur">John Doe</SPAN>
 
    <P>Des indemnités ne sont actuellement pas prévues pour les sinistrés.
 
    <P><SPAN class="auteur">John Smith</SPAN>
</DIV>
listing h11.3 Exemple avec DIV et SPAN

Le premier groupe en mode bloc est créé avec un élément DIV et on lui donne un identifiant unique article. Ensuite, on définit deux groupements inline avec l'élément SPAN et on leur donne une classe, la classe auteur. On peut maintenant appliquer un style en tenant compte des groupes.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
<STYLE>
div#article {
font-size: 14px;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
margin: 10px;
}
span.auteur {
font-style: italic;
}
</STYLE>
listing h11.4 Définition d'un style

Et voici le résultat dans un navigateur.

Exemple avec DIV et SPAN
fig h11.3 Exemple avec DIV et SPAN

Grâce à ces divisions, on a pu appliquer facilement un style à un groupe d'élément, de plus, ces division apportent plus d'information au texte, on repère qu'on a un article et deux auteurs.

  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0732341 secondes --- This site uses Thumbshots previews