Différences entre balises bloc et en-ligne

Seules les balises en bloc peuvent avoir des propriétés de largeur ( width ) et de hauteur( height ). Les unités les plus utilisées sont px ( pixel ), em ( dimensions de l'utilisateur ) et %. L'utilisation des dimensions permet notamment de simplifier la mise en page.

De plus, les règles de positionnement sont différentes entre les balises en bloc et les balises en ligne :

• les blocs se mettent les uns en dessous des autres par défaut,
• les éléments en ligne se mettent les uns à côté des autres dans la mesure du possible, par défaut.

<a href="http://www.wikipedia.org"> <h2> Lien vers wikipédia </h2></a>

Création d'un bloc

Soit le bloc est contenu dans une balise ( du type “ol” par exemple ), soit il faut créer le bloc soi-même.

Dans le premier cas, il suffit de personnaliser la balise “ol”. deux outils sont à notre disposition : id et class.

La différence pincipale est qu'un id ne peut être utilisé qu'une seule fois, tandis que class peut l'être plusieurs fois. Donc dans la pratique, on préfèrera utiliser les id pour des éléments de nature unique ( entête, menu, pied de page, etc... ), et class pour des éléments ayant tendance à se répéter dans la page ( paragraphes particuliers, liens particuliers, etc... ).

Par exemple :

<ol id="menugauche">
  <li><a href="index.html#html">Langage html</a></li>
  <li><a href="index.html#php">Langage php</a></li>
  <li><a href="index.html#css">Langage css</a></li>
  <li><a href="index.html#autre">Autres exemples</a></li>
</ol>

On a donc besoin de spécifier les propriétés de l'élément menugauche dans la feuille CSS. Pour marquer le fait qu'il s'agisse d'un id, il faut faire précéder son nom par un dièse # :

#menugauche {
  propriété 1;
  ...
}

<ol class="menugauche">

et dans le CSS, il faut faire précéder le nom de class par un point . :

.menugauche {...}

Dans le deuxième cas, c'est-à-dire si il faut créer le bloc soi-même, on regroupe les éléments dans une balise div :

<div id="menugauche">
  <h3>Sommaire</h3>
 
  <ol>
    <li><a href="index.html#html">Langage html</a></li>
    <li><a href="index.html#php">Langage php</a></li>
    <li><a href="index.html#css">Langage css</a></li>
    <li><a href="index.html#autre">Autres exemples</a></li>
  </ol>
 
  <a href="article1.html">Lien vers la page suivante</a>
</div>

Le formatage sur l'ensemble de ces éléments se fera donc sur l'id menugauche, ce qui nous permettra par exemple de mettre la même couleur de fond pour la balise h3, la liste ol et le lien a de ce bloc.

Remarques :

• Il ne faut pas abuser des balises div, car cela peut ne pas produire de langage propre. Il y a suffisamment de balises HTML pour faire un bon fichier CSS.
• Pour effectuer un formatage particulier sur un morceau de texte, on peut utiliser la balise span, à ne pas confondre avec div.

Par exemple :

<p>Ceci est un paragraphe avec un mot <span class="soulignerouge">souligné et en rouge</span>.</p>

On écrira dans la feuille CSS :

.soulignerouge {
  text-decoration: underline;
  color:red;
color:red; }

position:absolute;
left:30px;

float:left;

Nous avons ici essayé de positionner le sommaire. Il est temps de donner quelques petites explications à ce sujet.