Francis Draillard
Premiers pas
en
CSS et
XHTML
� 2eédition
© Groupe Eyrolles, 2006, 2008,
ISBN : 978-2-212-12390-6
Avant-propos
Des pages web ? Oui, mais avec du style ! Si les pages que nous concevons
ont belle allure, c’est bien ; mais qu’y a-t-il derrière, comment sont codées
ces magnifiques pages ?
Sera-t-il facile de changer la charte graphique du site ? Ou de modifier la
structure d’une page ? Sera-t-il possible de créer de nouvelles pages en réu-
tilisant le travail de mise en forme déjà effectué ?
Bref, à quoi sert d’avoir une voiture rutilante, avec toit ouvrant, jantes
alliage, rétroviseurs électriques et tout le tralala, s’il faut démonter le
moteur pour faire la vidange ? C’est une comparaison exagérée, certes,
mais qui a le mérite de poser clairement le problème.
Vous avez donc compris qu’au-delà du résultat affiché d’un site web, il faut
penser à sa maintenance : rectifications, mises à jour, changements de mise
en page doivent pouvoir s’effectuer facilement. Alors, existe-t-il une tech-
nique pour améliorer les pages HTML classiques, souvent pleines à craquer
d’attributs de mise en forme et de tableaux pour obtenir du côte à côte ?
Bien sûr ! Et vous avez de la chance, c’est justement l’objet de l’ouvrage qui
se trouve entre vos mains !
Une méthode moderne, pour créer des sites web de bonne qualité et
faciles à maintenir, consiste à écrire les pages en XHTML, langage clair et
efficace, en association avec des feuilles de style ou CSS, pour Cascading
Style Sheets.
Les feuilles de style sont utilisées depuis longtemps dans les traitements de
texte. Elles facilitent la mise en forme, tout en rendant plus homogènes les
différentes pages d’un long document. En ce qui concerne les pages web,
© Groupe Eyrolles, 2005
P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C XHTML E T CSS
les premières normes pour les feuilles de style, CSS 1, ont été publiées
fin 1996, suivies des normes CSS 2 en 1998.
Il a fallu que les logiciels de navigation web les prennent en compte pour
que les concepteurs puissent enfin les utiliser, d’où un certain « retard à
l’allumage » que nous retrouverons de la même façon avec les normes
CSS 3 à venir.
Les CSS 2 sont disponibles, profitons-en ! Et découvrons ensemble dans cet
ouvrage tout le bénéfice qu’elles nous apportent : une façon différente
d’appréhender la conception des pages web. Il suffit de s’y aventurer pour
être conquis... Bonne lecture !
Structure de l’ouvrage
Le premier chapitre est une introduction qui nous présente le principe
général du XHTML, des feuilles de style et d’une bonne écriture XHTML/CSS.
Le deuxième chapitre présente de façon concrète les bases du XHTML. À
partir d’exemples, il détaille l’utilisation des principales balises XHTML,
présente leur classement par types de balise et leur hiérarchie dans une
page web. Il fournit les quelques mots de vocabulaire qui seront utilisés par
la suite pour expliquer la conception d’une feuille de style.
Au troisième chapitre apparaissent les feuilles de style. À partir d’exemples,
nous verrons de quelle façon et à quel endroit les écrire, quelles unités de
mesure utiliser, etc.
Les propriétés CSS sont détaillées dans les quatrième et cinquième chapi-
tres, qui expliquent respectivement les propriétés de mise en forme et
celles liées au positionnement des éléments dans la page. Des exemples
illustrent chaque propriété, dont toutes les valeurs possibles sont
détaillées.
Le sixième chapitre nous parle des autres médias pour lesquels des pro-
priétés de style existent et le septième chapitre présente des astuces très
pratiques, pour adapter les feuilles de style aux différents navigateurs, en
particulier pour remplacer quelques propriétés mal interprétées par la
version 6 de Internet Explorer.
VI © Groupe Eyrolles, 2005
Avant-propos
En annexes se trouvent les noms et codes des couleurs de base, ainsi qu’un
tableau de synthèse sur le comportement des principaux navigateurs. Sui-
vent un index des propriétés, en guise de formulaire, puis une liste de réfé-
rences bibliographiques et de sites web utiles.
Les fichiers qui servent d’exemples dans le livre peuvent être téléchargés à
l’adresse [Link]
Crédits des photographies et illustrations
Tous droits réservés pour toutes les photographies et illustrations publiées
dans cet ouvrage.
Les crédits qui ne figurent pas dans les légendes des illustrations sont men-
tionnés ci-après.
Pages de garde des chapitres 1 et 5 : extraits du site ZenGarden
[Link] respectivement les versions
« Tranquille » par Dave Shea ([Link] et « Like the
Sea » par Lars Daum ([Link]
Figures 1-3, 3-4 à 3-11, 6-2, B-1, pages de garde des chapitres 3, 4 et 6, ainsi
que des annexes A, C et D : copyright 2006 Francis Draillard, Micro Appli-
cation et ses concédants.
Figures 1-1, 1-2, 2-1 à 2-8, 2-1, 2-12 à 2-16, 3-1, 3-2, 3-12 à 3-14, 4-1 à 4-15,
5-1 à 5-16, 6-1, 7-7 à 7-9, A-1, B-2, B-3, pages de garde du chapitre 7 et de
l’annexe B : Francis Draillard.
Page de garde du chapitre 2 : dessin d’Alice Draillard.
Figure 3-3 : extraite du site [Link] photo d’Éric Pouhier
(décembre 2005).
Figures 5-9, 5-12 à 5-14, 7-7 et 7-9 : utilisation d’illustrations provenant du
site [Link]
© Groupe Eyrolles, 2005 VII
P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C XHTML E T CSS
Remerciements
Je tiens à remercier Muriel Shan Sei Fan, éditrice informatique des Éditions
Eyrolles. C’est grâce à elle que la publication de ce livre a été possible et ses
conseils m’ont été précieux pour la rédaction finale. Merci aussi à
Dimitri Robert : auteur d’un excellent livre sur le logiciel Gimp, dans cette
même collection, il m’a aiguillé vers Muriel pour lui proposer mon manuscrit.
Merci encore à Eliza Gapenne et Anne Bougnoux pour la relecture de ce
livre, à Gaël Thomas et Jean-Marie Thomas pour sa mise en page.
Pour cette deuxième édition, je tiens à remercier Jean-Baka Domelevo
Entfellner pour la relecture, Muriel Shan Sei Fan et Karine Joly pour leurs
conseils et la coordination, Gaël Thomas pour la mise en page.
Je remercie beaucoup pour leur contribution :
• Alain Beyrand ([Link] : son classement des cou-
leurs est très intéressant. Il est publié en annexe (mais en moins bien,
car sans les couleurs !).
• David Hammond ([Link] : il est l’auteur d’un
excellent travail sur le comportement des différents navigateurs web,
dont la synthèse est donnée en annexe.
• Les auteurs du site [Link] source extrêmement riche de
renseignements qui explique dans tous leurs détails les normes du
World Wide Web Consortium (W3C), ainsi que Jean-Jacques Solari, qui
a traduit en français bon nombre de ces documents sur le site
[Link] Trois figures sont extraites de ce site, ainsi
que les tableaux des propriétés CSS, qui se trouvent en annexe.
Je suis reconnaissant également à mes étudiants de l’EIGSI et de Sup de Co
La Rochelle. Qu’ils me pardonnent : je me suis servi de leurs erreurs et de
leurs difficultés pour rendre ce livre plus clair et plus pédagogique.
Enfin, c’est de tout mon cœur que je remercie mon épouse et ma fille, pour
leur soutien et leur participation.
Francis Draillard
contact@[Link]
[Link]
VIII © Groupe Eyrolles, 2005
