Le langage HTML/Zones de mise en forme

Un livre de Wikilivres.
Aller à : navigation, rechercher


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 ».

Il faut s'attacher à la notion d'imbrication de zones : le formattage d'une zone se superpose au formattage 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 formattage de la zone indique qu'il est en gras, alors on aura du texte centré et gras. Mais si le formattage 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[modifier | modifier le wikicode]

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.

Attention !

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

La balise div[modifier | modifier le wikicode]

Utilisation[modifier | modifier le wikicode]

On va entourer la partie souhaitée 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[modifier | modifier le wikicode]

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 formattage'' 
         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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

Position[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]