Le langage HTML/Zones de mise en forme

On peut définir une zone sur laquelle on applique une mise en forme particulière. Cette notion est donc liée au CSS, bien que l'on puisse l'utiliser en HTML « pur ».

Balises complémentaires

XML et XHTML

Il faut s'attacher à la notion d'imbrication de zones : le formatage d'une zone se superpose au formatage environnant, ou éventuellement s'y substitue, selon des règles de priorité (cf. la section Priorité des règles du wikilivre sur le CSS).

Par exemple, si l'environnement indique que le texte est centré et le formatage de la zone indique qu'il est en gras, alors on aura du texte centré et gras. Mais si le formatage de la zone indique que le texte est aligné à droite, alors cela annule la consigne générale.

Note: Cette notion de zonage est fréquemment confondue avec la notion de calque (layer), qui était une notion spécifique à Netscape (introduit en 1997 dans sa version 4.0). Cette confusion est entretenue par certains logiciels de création [1]. La notion de « calque » n'est pertinente que si l'on utilise l'attribut z-index (superposition de couches).

Balises universelles

Toute balise est une zone de mise en forme. En effet, on peut associer un style à toute balise,

soit en écrivant le style dans la balise, par exemple <q style="font-style: italic;">…</q> ;
soit en faisant référence à un style défini dans l'en-tête ou dans un fichier .css lié, par exemple
<h1 id="menu">…</h1>

— ou —

<p class="remarque">…</p>

On a alors une mise en page liée à la fonction de la portion de page.

Il existe de plus, deux balises spécifiques pour créer une zone :

<span>…</span> : balise en-ligne (inline), donc une balise dans un paragraphe ou plutôt dans une balise dite « bloc » ; elle s'utilise au sein d'un bloc pour une modification ponctuelle ;
<div>…</div> : balise de bloc (block), un bloc est créé, il y a un retour à la ligne automatique.

Notons qu'appliquer span ou div sans attribut à un texte ne change rien : leur intérêt réside dans les paramètres que contiennent ces balises.

On peut ainsi définir une mise en forme sur une portion de page sans qu'elle ait une fonction particulière.

Notons que ces balises sont des « éléments de regroupement » qui permettent d'appliquer un traitement à une zone de manière générale, pas nécessairement une feuille de style.

Note: Les éléments span et div ne se substituent pas aux éléments décrivant le contenu. Si le rendu d'un élément ne vous convient pas, il faut le modifier en faisant référence à une classe dans la balise ouvrante ou en y intégrant du code CSS. Mais il serait malvenu de remplacer la balise par un span ou div qui, eux, ne donnent aucun sens au contenu.

On peut imbriquer des balises en-ligne dans des balises blocs, mais pas l'inverse^[1].

La balise div

Utilisation

On va entourer la partie souhaitée par des balises <div> et </div> pour délimiter le bloc auquel vont se rapporter les effets de style.

<!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" xml:lang="fr">
  <head>
    <title>Titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  </head>
  <body>
      <div>
        <p>Texte</p>
      </div>
  </body>
</html>

Mise en lien avec le style

En effet, un div est associé à des informations de style en CSS, qui peuvent être implantées en haut de la page HTML dans un espace entre les balises <head> et </head> ainsi :

<!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" xml:lang="fr" >
  <head>
    <title>Titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
         ''code CSS''
    </style>
  </head>
  <body>
    <div ''référence au formatage''>
      <p>Texte</p>
    <div>
  </body>
</html>

Ou bien dans un fichier séparé, que l'on lie au fichier HTML en remplaçant <style type="text/css"></style> par :

<link rel="stylesheet" media="screen" type="text/css" title="Titre" href="feuilledestyle.css" />

Ou encore directement dans la balise <div> ainsi :

<div style=" ... ''code CSS'' ... ">
  <p>texte</p>
</div>

Caractérisation

Il est conseillé d'opter pour une solution avec feuille de style externe. Mais comment fait-on alors pour personnaliser chaque <div> ? Il suffit d'ajouter dans la balise <div> une information qui permettra de la caractériser, un class ou un id. On précise qu'un id est à usage unique (il ne peut être utilisé qu'une fois par page), pas le class (id : identité unique, class : classe de style ou multiplicité). L'utilisation de ces balises se fait ainsi :

Utilisation de `class` et de `id`
Avec `class`	Avec `id`
Code CSS dans l'en-tête ou le fichier lié
.ma_classe { propriété 1 : valeur 1; propriété 2 : valeur 2; ... }	#mon_id { propriété 1 : valeur 1; propriété 2 : valeur 2; ... }
Code HTML
... <body> <div class="ma_classe"> <p>Texte</p> </div> </body> </html>	... <body> <div id="mon_id"> <p>Texte</p> </div> </body> </html>

Fonctions

Position

La balise <div> peut être placée comme on le souhaite grâce au CSS, jugez plutôt l'aspect CSS que l'on peut obtenir : visibility: visible; position: absolute; top: 20px; left: 20px; width: 100px; height: 100px. De plus le dernier cadre déclaré recouvre celui d'avant si les deux se superposent.

Clarification

Lorsque l'on travaille avec un bloc à part avec un <div>, on peut définir avec le CSS les différentes balises usuelles dans le <div> choisi. D'une manière plus simple il y a une cohérence entre forme et fond.

Mise en application

Voici un exemple de styles de mise en forme avec un menu, un centre de page et un bas de page. La page se compose de trois calques <div> les uns derrière les autres. Les blocs sont modulables : peu importe l'ordre dans lequel on les écrit, on obtient le même rendu final.

<!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" xml:lang="fr" >
   <head>
      <title>Titre</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
         .un
         {
            position: absolute;
            top: 20px; left: 20px; width: 100px; height: 100px
         } 
         .deux
         {
            position: absolute;
            top: 20px; left: 50%; width: 100px; height: 200px
         } 
         .trois
         {
            position: absolute;
            bottom: 20px; left: 20px; width: 100px; height: 20px
         } 
      </style>
  </head>
  <body>
     <div class="un">
        <p>menu</p>
     </div>
     <div class="deux">
        <p>centre</p>
     </div>
     <div class="trois">
        <p>bas de page</p>
     </div>
   </body>
</html>

Voir aussi

Chapitre Interface HTML du wikilivre Programmation CSS

↑ http://www.css-faciles.com/bloc-en-ligne.php

[1] ttp://www.css-faciles.com/bloc-en-ligne.php

[1]