Séparer le fond de la forme
L'objet web
En suivant ce principe de séparation du fond et de la forme, un objet web (site, page, composant de page...) répondant aux normes fixées par le W3C est :
- un fichier XHTML contenant divers médias (textes, images, modules Flash)
- dont la présentation est gérée par la feuille de style (CSS)
- et dont l'affichage peut être modifié à la volée selon les actions de l'utilisateur par un code JavaScript
Pour bien observer les différentes "couches" de code, il est utile d'installer la Web Developer Toolbar de Firefox : https://addons.mozilla.org/en-US/firefox/addon/60.
Pour aller plus loin, l'outil Firebug permet d'inspecter, d'éditer (localement) le code d'une page Web : https://addons.mozilla.org/fr/firefox/addon/1843?id=1843&application=firefox
Le fond : XHTML
Successeur du langage HTML, le XHTML est le langage répondant aux standards du Web.
C'est le langage de base du Web.
Compatible avec les navigateurs d'hier et de demain, il permet de structurer les contenus d'un site, laissant le soin de la présentation et de la mise en forme aux CSS.
Le code XHTML est structuré de balises. Chaque balise a une signification et doit porter le contenu qui convient.
Quelques exemples de balises :
- Titres : h1, h2,...h6 (le numéro indique l'importance du titre)
- Paragraphe : p
Un contenu est encapsulé entre une balise ouverte <>
et une balise fermée </>
<body>
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<p>Premier paragraphe</p>
<p>Second paragraphe dans lequel je veux mettre des <strong>mots en avant</strong>.</p>
</body>
Il convient de respecter une structure logique entre ces balises qui fonctionnent sur un principe d'imbrication et de hiérarchisation. On ne mettra pas un titre au sein d'un paragraphe par exemple.
On distingue les éléments en bloc qui viennent "naturellement" (sans le recours aux CSS) se positionner verticalement (les uns en dessous des autres) des éléments en ligne qui se positionnent horizontalement (les uns à côté des autres).
La forme : CSS
Les feuilles de styles CSS (Cascading Style Sheet) ajoute la couche graphique à la structure XHTML.
C'est dans la feuille de style que l'on va déclarer toute la mise en forme des pages :
- La mise en page, l'emplacement des blocs
- Les choix typographiques : polices de caractères, tailles, interlignage...
- Les couleurs
On parle de feuilles de style en cascade parce qu'il y a une hiérarchie dans les commandes de feuilles de style. Il y a 3 façons d'intégrer une feuille de style à un document XHTML :
- Elle s'applique à une partie du document.
- Elle est intégrée au document et s'applique à tout le document.
- Elle est enregistrée dans un fichier séparé et plusieurs documents XHTML peuvent s'y référer.
Avantages
- Le distinction entre le contenu structuré par le XHTML et son apparence gérée par les CSS rend la construction du site plus claire.
- Le code est plus propre (contrairement aux mises en pages anciennement fondées sur des « tableaux ») et plus léger : le chargement des pages est plus rapide.
- Penser en CSS favorise la réflexion sur les contenus et sur leur hiérarchisation.
- Les mises à jour deviennent plus simples car la maquette graphique est placée à part.
- Les sites deviennent accessibles à tous, y compris aux personnes handicapées. Les CSS proposent des solutions alternatives au contenu visuel et sonore : texte de remplacement pour les images, aggrandissement de la taille des textes sans que la mise en page soit cassée.
- La majorité des plates-formes et des navigateurs reconnaissent les CSS.
Utilisation des CSS sur le site CSSZenGarden : un clic permet d'appeler une feuille de style différente et de rhabiller intégralement la page.
Inconvénients
Tous les navigateurs n'ont pas encore assimilé les dernières propriétés des feuilles de styles. C'est le cas d'Internet Explorer.
Pour maîtriser les CSS, il convient de maîtriser un minimum le langage XHTML sur lequel elles portent.
En savoir plus
Le site de référence en français sur les standards du web : http://www.openweb.eu.org