les balises div et span et leur attributs

Les balises de structuration logique

Fulgence à donc décider de publier différents aspects de sa personnalité. Pour rappel, il veut :

  1. que l'on sache qui il est et d'où il vient ?
  2. que l'on voit sa photo
  3. que l'on parle de ce qui le passionne (cinéma, musique etc...)
  4. indiquer ses sites préférés
  5. Et enfin il veut que les gens puissent lui laisser une message sur son adresse e-mail. Avec bien sur un max d'infos sur eux ;)

Pour refléter le fait de cette différenciation, le plus simple et de diviser sa page en autant de section et/ou de sujets qu'il tient à présenter. Pour cela 2 balises XHTML permettent de structurer votre texte sans y ajouter d'information particulière.

balise de structuration logique
balisetypedescription
balisetypedescription
<div>bloc balise de structuration de type bloc
<span>ligne balise de structuration de type ligne

C'est 2 balises n'ajoutent pas d'informations aux contenus auxquelles elles sont associées, elle se bornent à structurer le document XHTML.

Sachant cela j'ai donc découper en 5 le <body> de sa page XHTML à l'aide de 5 balises <div>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zeng and co.</title>
</head>
<body>
<!-- qui je suis -->
<div></div>
<!-- d'ou je viens -->
<div></div>
<!-- photo -->
<div></div>
<!-- mes passions -->
<div></div>
<!-- mes sites -->
<div></div>
<!-- contact -->
<div></div>
</body>
</html>

Remarque : J'en ai aussi profité pour nommer sa page et donc son site Zeng and Co.

Mais seulement voilà , mise à part moi, personne ne sait ce que ces parties représentent pour la page...Comment faire ?

Les attributs généraux

Le XHTML se différencie du HTML, entre autre, par la généralisation de certains attributs sur l'ensemble des balises. C'est pourquoi en utilisant des attributs génériques je pourrais faire référence à chacune de mes divisions individuellement.

attributs de base
attributdescription
attributdescription
idpermet la structuration du document XHTML en spécifiant une balise unique.
lorsque l'attribut id est utilisé dans une page XHTML, sa valeur doit être unique dans tout le document
classpermet la structuration du document XHTML en spécifiant une structure générale.

Ayant compris que je pouvais tirer partie de ces attributs, nous décidons de corriger le tir et de redécouper plus intelligemment la page de Fulgence :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Zeng and co.</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="contenu">
  <div id="qui" class="section"></div>
  <div id="origine" class="section"></div>
  <div id="hobby" class="section"></div>
  <div id="contact" class="section"></div>
</div>
<div id="footer"></div>
</body>
</html>
  1. Nous avons rajouté des parties non explicitement demandées mais au combien importantes comme:
    • header
    • footer
    • navigation
  2. De plus une photo n'a pas besoin d'une section à elle toute seule, elle peut être associée à la section qui suis-je par exemple.
  3. Enfin pour bien montrer que les activités de fulgences bien que différentes constituent le contenu réelle de la page nous les avons regroupés dans une div commun avec l'id="contenu" et à chacun nous leur avons ajouter l'attribut class="section".

Maintenant que nous avons la structure générale de la page, voyons le texte que l'on va intégrer... mais ça c'est une autre histoire.

Catérogies : Tutoriels