Le langage HTML/Zones de mise en forme

Ajouter des liens
Un livre de Wikilivres.
Balises complémentaires Balises complémentaires
XML et XHTML XML et XHTML

[ Modifier le sommaire ]

Balises complémentaires Balises complémentaires
XML et XHTML XML et XHTML

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

Logo

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 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[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 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[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]

  1. ↑ http://www.css-faciles.com/bloc-en-ligne.php
Récupérée de « https://fr.wikibooks.org/w/index.php?title=Le_langage_HTML/Zones_de_mise_en_forme&oldid=716349 »