Premiers pas en CSS XHTML - static.fnac-static.com€¦ · Structure de l’ouvrage Le premier...

Francis Draillard

CSS etXHTMLenPremiers pas

3eédition�

12390_CSS_HTML_Titre_OK:CSS_HTML_Titre_OK 17/03/10 17:37 Page 2

© Groupe Eyrolles, 2006, 2008, 2010, ISBN : 978-2-212-12724-9

© Groupe Eyrolles, 2005

Des pages web ? Oui, mais avec du style ! Si les pages que nous concevonsont belle allure, c’est bien ; mais qu’y a-t-il derrière, comment sont codéesces magnifiques pages ?

Sera-t-il facile de changer la charte graphique du site ? Ou de modifier lastructure 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, jantesalliage, rétroviseurs électriques et tout le tralala, s’il faut démonter lemoteur 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 fautpenser à sa maintenance : rectifications, mises à jour, changements de miseen page doivent pouvoir s’effectuer facilement. Alors, existe-t-il une tech-nique pour améliorer les pages HTML classiques, souvent pleines à craquerd’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 quise trouve entre vos mains !

Une méthode moderne, pour créer des sites web de bonne qualité etfaciles à maintenir, consiste à écrire les pages en XHTML, langage clair etefficace, en association avec des feuilles de style ou CSS, pour CascadingStyle Sheets. Nous aborderons également les versions HTML 5 et XHTML 5qui constituent le futur du Web.

Les feuilles de style sont utilisées depuis longtemps dans les traitements detexte. Elles facilitent la mise en forme, tout en rendant plus homogènes les dif-

Avant-propos

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 E N CSS E T XHTML

© Groupe Eyrolles, 2005VI

férentes pages d’un long document. En ce qui concerne les pages web, les pre-mières normes pour les feuilles de style, CSS 1, ont été publiées fin 1996, suiviesdes normes CSS 2 en 1998.

Il a fallu que les logiciels de navigation web les prennent en compte pour que lesconcepteurs puissent enfin les utiliser, d’où un certain « retard à l’allumage ».Nous retrouvons ce même inconvénient avec les nouvelles normes CSS 3, quiconstituent le futur du Web et font l’objet d’un chapitre de ce livre.

Les CSS sont disponibles, profitons-en ! Et découvrons ensemble dans cetouvrage tout le bénéfice qu’elles nous apportent : une façon différented’appréhender la conception des pages web. Il suffit de s’y aventurer pour êtreconquis... Bonne lecture !

Structure de l’ouvrageLe premier chapitre est une introduction qui nous présente le principegé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 unepage web. Il fournit les quelques mots de vocabulaire qui seront utilisés parla suite pour expliquer la conception d’une feuille de style. Les nouvellesnormes HTML 5/XHTML 5 y sont expliquées, dans leur principe et l’utilisa-tion des principales balises qui viennent compléter le XHTML 1.

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 demesure 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 etcelles liées au positionnement des éléments dans la page. Des exemplesillustrent chaque propriété, dont toutes les valeurs possibles sontdétaillées. Les principales nouveautés apportées par la norme CSS 3 sontexpliquées de la même façon, dans le sixième chapitre.

Le septième chapitre nous parle des autres médias pour lesquels des pro-priétés de style existent : impression, son, téléphones et assistants mobiles. Le

A v a n t - p r o p o s

© Groupe Eyrolles, 2005 VII

huitième chapitre présente des astuces très pratiques, pour adapter les feuillesde style aux différents navigateurs, en particulier pour remplacer quelques pro-priétés mal interprétées par les anciennes versions d’Internet Explorer.

En annexes se trouvent les noms et codes des couleurs de base, ainsi qu’untableau 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 http://www.antevox.fr/livre.

Crédits des photographies et illustrationsTous droits réservés pour toutes les photographies et illustrations publiéesdans cet ouvrage.

Les crédits qui ne figurent pas dans les légendes des illustrations sont men-tionnés ci-après.

Pages d’ouverture des chapitres 1, 5 et 6 : extraits du site ZenGardenhttp://www.csszengarden.com/tr/francais/, respectivement les versions« Tranquille » par Dave Shea (http://www.mezzoblue.com) et « Like theSea » par Lars Daum (http://www.redrotate.de/) et « Kyoto Forest » parJohn Politowski (http://www.rpmdesignfactory.com).

Figures 1-3, 2-13, 3-4 à 3-11, 6-3, 7-2, A-2, A-3 (haut), B-1, pages d’ouverturedes chapitres 3, 4 et 7, ainsi que des annexes A, C et D : copyright 2010Francis Draillard, Micro Application et ses concédants.

Figures 1-1, 1-2, 2-1 à 2-8, 2-10 à 2-12, 2-14 à 2-25, 2-28, 3-1, 3-2, 3-12 à 3-14,4-1 à 4-15, 5-1 à 5-14, 6-2, 6-5, 6-7, 6-8, 6-10, 6-11, 7-1, 8-3, 8-4, 8-9 à 8-11, A-1, B-2, B-3, pages d’ouverture du chapitre 8 et de l’annexe B :Francis Draillard.

Page d’ouverture du chapitre 2 : dessin d’Alice Draillard.

Figure 3-3 : extraite du site http://www.wikipedia.fr, photo d’Éric Pouhier(décembre 2005).

Figures 5-9, 5-12 à 5-14, 7-7 et 7-9 : utilisation d’illustrations provenant dusite http://www.wikipedia.fr


© Groupe Eyrolles, 2005VIII

RemerciementsJe tiens à remercier Muriel Shan Sei Fan, éditrice informatique des ÉditionsEyrolles. C’est grâce à elle que la publication de ce livre a été possible et sesconseils m’ont été précieux pour la rédaction finale. Merci aussi àDimitri Robert : auteur d’un excellent livre sur le logiciel Gimp, dans cettemême collection, il m’a aiguillé vers Muriel pour lui proposer mon manuscrit.

Merci encore à celles et ceux qui ont participé aux différents stades de laconception de ce livre :• pour leurs conseils et la coordination de ce livre, à Muriel Shan Sei Fan

pour toutes les éditions, ainsi qu’à Sandrine Paniel à l’occasion de cettetroisième édition ;

• pour la relecture à Eliza Gapenne et Anne Bougnoux (première édi-tion), à Jean-Baka Domelevo Entfellner (deuxième édition) et à San-drine Paniel pour cette troisième édition ;

• pour la mise en page à Gaël Thomas et Jean-Marie Thomas lors de lapremière édition, et à nouveau à Gaël Thomas qui a œuvré seul pourles éditions suivantes.

Je remercie beaucoup pour leur contribution :• Alain Beyrand (http://www.pressibus.org) : 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 (http://nanobox.chipx86.com) : il est l’auteur d’unexcellent travail sur le comportement des différents navigateurs web,dont la synthèse est donnée en annexe.

• Les auteurs du site http://www.w3.org, source extrêmement riche derenseignements qui explique dans tous leurs détails les normes duWorld Wide Web Consortium (W3C), ainsi que Jean-Jacques Solari, quia traduit en français bon nombre de ces documents sur le sitehttp://www.yoyodesign.org. Trois figures sont extraites de ce site, ainsique 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 CoLa Rochelle. Qu’ils me pardonnent : je me suis servi de leurs erreurs et deleurs difficultés pour rendre ce livre plus clair et plus pédagogique.

A v a n t - p r o p o s

© Groupe Eyrolles, 2005 IX

Enfin, c’est de tout mon cœur que je remercie mon épouse et ma fille, pourleur soutien et leur participation.

Francis Draillard

[email protected]

http://www.antevox.fr


Table des matières

1. INTRODUCTION AU XHTML ET AUX FEUILLES DE STYLE CSS . . . . . . . . . . . . . . . . . . . . . . . 1

Signification de XHTML et CSS 2Principes de base pour une page web 2

Choix sensé des balises HTML 3Adaptation aux navigateurs 3Accessibilité 4L’apparence, fonction du thème et du public concerné 4

Polices de caractères 4En résumé, quelques sentiments liés aux couleurs 5

Homogénéité du site 6Principes d’une bonne écriture XHTML/CSS : donner du sens au codage 6

Titre de page 6Mise en gras ou en italique 7Liste de liens hypertexte (menu) 7

Intérêt des feuilles de style 8

2. L’ESSENTIEL DU XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Rappel sur le principe des balises 12Du HTML au XHTML 13Premières règles d’écriture XHTML 14

Règles pour les noms des fichiers 15Règles d’écriture des balises XHTML 15Structure d’une page XHTML 16Espaces, sauts de ligne et commentaires invisibles 17

Principales balises XHTML 18Un exemple pour commencer 19

Les deux premières balises 20En-tête 21Corps de la page 21

Paragraphes et titres 22

P OCHES AC CÈS LIBRE - PRE MIERS PAS EN CSS ET XHTML

© Groupe Eyrolles, 2005XII

Mise en forme commune à une partie du texte 23Italique et gras 23Liens hypertextes 24Listes à puces ou numérotées 27Tableaux 29

Fusionner des cellules 30Insertion d’images 32

Dimensionner une image 33Objets multimédias 34

Animation Flash 34Vidéo 35

Sauts, lignes et caractères spéciaux 37Autres balises de texte 37Autres balises de listes 38Formulaires 38Une page dans un cadre 39

Les nouveautés du (X)HTML 5 41Des sections de toutes sortes 42

Les sections du HTML 5 42Sous-sections de type <div> 43Dialogue 45Détails d’information sur demande 46

Davantage de signification pour le texte 47Surlignage de mots 47Mesures comprises entre deux bornes 48Dates et heures 49

Images et multimédia 49Images, photos et figures 49Contenus audio et vidéo 50Autres contenus multimédias 53

De nouveaux attributs 56Contenu précis pour les zones de formulaire 56Liens hypertextes vers une nouvelle fenêtre 57Personnalisation des listes numérotées 58Éléments déplaçables dans la page 59

À utiliser progressivement 60Deux catégories d’éléments : blocs et en ligne 61

Éléments en ligne 61Éléments de type bloc 62

Hiérarchie des éléments : l’héritage 63Hiérarchie des blocs imbriqués et juxtaposés 63

Termes hiérarchiques utilisés en XHTML/CSS 65

T a b l e d e s m a t i è r e s

© Groupe Eyrolles, 2005 XIII

Héritage des propriétés de style 66Compléments sur les balises d’en-tête 68

Balise DOCTYPE 68Balise meta et codage en utf-8 70Autres balises d’en-tête 71

Validation du code XHTML 71

3. ÉCRITURE DES FEUILLES DE STYLE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Définition d’une règle de style 76Principe 76Exemple de règle de style 76Commentaires 77Emplacement des styles 77

Feuille de style interne 78Feuille de style externe 78Styles en ligne 80Sélecteurs de style 81

Comme au théâtre 81Sélecteur simple 82Classe 83

Une catégorie de balises 83Une même classe pour plusieurs types de balises 84

Identifiant 85Identifiant sans nom de balise 86Différence entre classe et identifiant 87

Pseudo-classes 87Pseudo-classes pour les liens hypertexte 88Autres pseudo-classes 89

Pseudo-éléments 89Règle associée à plusieurs sélecteurs 90Regroupement de propriétés à l’aide de « raccourcis » 91Hiérarchie des sélecteurs 91Hiérarchie précise des sélecteurs 92

Imbrication directe 92Juxtaposition 92

Sélecteur d’attribut [...] 92Sélecteur universel * 93

Ordre de priorité des styles 94Règle de style prioritaire 94Degré de priorité d’une règle de style 95Application 96

Valeurs, tailles et couleurs 97


© Groupe Eyrolles, 2005XIV

Héritage de propriété 97Unités de taille 97

Unités de taille fixe 97Unités de taille relatives (conseillées) 98Tailles définies par mots-clés 98

Codage des couleurs 99Noms de couleurs 99Code RVB 99Couleurs « sûres » 99

Exemple de page avec feuille de style interne 100

4. PROPRIÉTÉS DE MISE EN FORME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Mise en forme des caractères 106Choix des polices 106Taille de police 107Couleur du texte 108Texte en gras 109Italique 110Soulignement et autres « décorations » 110Majuscules et minuscules 112Petites majuscules 112Surlignage de lettres 112Décalage vers le haut ou le bas 113Raccourci pour la mise en forme de caractères 114

Paragraphes et blocs de texte 115Alignement horizontal du texte 115Retrait de première ligne 116Interligne minimum 118Espacement entre les lettres 118Espacement entre les mots 119Conservation des espaces et sauts de ligne saisis 120Modification du curseur de la souris 121Affichage automatique d’un contenu 121Guillemets à utiliser 122Réinitialisation d’un compteur 123Incrémentation d’un compteur 124Sens de l’écriture 124Écriture bidirectionnelle 125

Bordures 126Style de bordure 126Styles de bordure pour chaque côté 127Épaisseur de bordure 128


© Groupe Eyrolles, 2005 XV

Épaisseur de bordure pour chaque côté 128Couleur de bordure 129Couleur de bordure pour chaque côté 129Raccourci pour toutes les propriétés de bordure 130Raccourci des propriétés de bordure pour chaque côté 131Contour superposé à un élément 131

Images et couleurs d’arrière-plan 132Couleur d’arrière-plan 132Image d’arrière-plan 132Répétition ou non de l’image d’arrière-plan 133Alignement de l’image d’arrière-plan 134Fixation de l’image d’arrière-plan 135Raccourcis pour les arrière-plans 136

Listes à puces ou numérotées 136Type de puce ou de numérotation 136Utilisation d’une image comme puce 137Position de la puce 138Raccourci pour toutes les propriétés de liste 139

Les tableaux 139Largeur fixe ou variable des colonnes ou du tableau 139Recouvrement des bordures 140Espacement entre les bordures de cellules 141Contour des cellules vides 142Position du titre du tableau 143Alignement sur la virgule 144Alignement vertical des cellules 144

5. POSITIONNEMENT DES BLOCS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Marges et dimensions d’un bloc 148Marges externes autour d’un bloc 148Raccourci pour les marges externes 149Marges internes d’un bloc 150Raccourci pour les marges internes 151Largeur fixe pour un bloc ou une image 152Hauteur fixe pour un bloc ou une image 152Largeur et hauteur totales d’un bloc 153Largeur et hauteur minimales 155Largeur et hauteur maximales 156

Position des éléments 156Flux normal des éléments 157Principe du positionnement des blocs 157


© Groupe Eyrolles, 2005XVI

Types de position possibles 158Position normale 158Position relative, absolue ou fixe 158Position flottante 158

Utilisation des différents types de positionnement 159Élément dans le flux (position normale) 160Position relative 160Position absolue 160Position fixe 161Élément flottant 161

Type de positionnement d’un bloc 161Décalages indiquant la position d’un bloc 162Niveau d’empilement des blocs 163Transformation en bloc flottant 164Pas d’éléments flottants sur le côté 165Affichage ou non d’un élément 165Affichage des débordements 166Zone visible d’une boîte 166Changement de type d’élément 167

Délimitation des blocs 168Exemples de positionnement 169

Image du haut (nuages) 172Image de l’arbre en position absolue 173Sous-titre « En images » en position relative 174Centrage horizontal du titre 174Titre latéral fixé sur l’écran 175Position absolue pour la galerie d’images 176Images côte à côte en position flottante 177

Centrage d’éléments à l’intérieur des blocs 178Centrage horizontal 178

Centrage horizontal d’éléments en ligne 178Centrage horizontal de blocs 179

Centrage vertical 179Centrage vertical d’éléments en ligne 179Centrage vertical de blocs 180Exemple de centrage vertical 181

6. PRINCIPALES NOUVEAUTÉS DES CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Du relief pour nos pages 186Nouveaux types de sélecteurs 187

Sélecteur de voisinage 188Sélection sur les attributs 188


© Groupe Eyrolles, 2005 XVII

Attribut commençant par... 188Attribut se terminant par... 188Attribut contenant... 189

Pseudo-classes 190Attribut différent de... 190Enfants d’un bloc 190Éléments cochés 191Balises vides 191

Couleurs et niveaux de transparence 191Niveau d’opacité 191Codage RGBA des couleurs 192Codages HSL et HSLA des couleurs 194

De nouveaux effets pour le texte 195Une police originale avec @font-face 195Ombrage du texte 199

Des bordures plus variées 200Lignes d’encadrement variées 200Des images en guise de bordures 201Enfin, des coins arrondis ! 202Des ombres pour nos boîtes 204Dimensions des blocs 205

Couleurs et images de fond 206Plusieurs images d’arrière-plan 206Placement et étendue des images d’arrière-plan 206Fixation de l’image d’arrière-plan 208

Multicolonnage 208Nombre et largeur de colonnes 208Espacement des colonnes 210Trait de séparation des colonnes 211Équilibrage des colonnes 213Titre sur plusieurs colonnes 213

Transformations géométriques 214Propriété de transformation 214Fonctions de transformation 215

Les CSS 3 : pour bientôt 217

7. DIFFÉRENTS TYPES DE MÉDIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Types de média 220Média paginé : styles pour l’impression 221

Gestion des veuves 222Gestion des orphelines 223Saut de page avant 223


© Groupe Eyrolles, 2005XVIII

Saut de page après 224Coupure par un saut de page 224Dimensions d’une page 225Sélecteur de page 225Référence à un type de page 226

Média sonore : fonctions audio 227Média portable : le Web mobile 230

Des feuilles de style spécifiques 231Une sélection plus précise en CSS 3 232Les bonnes pratiques pour les mobiles 236

8. RÈGLES SPÉCIFIQUES À CERTAINS NAVIGATEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Test des pages sur plusieurs navigateurs 242Les marges avec Internet Explorer 6 245Adaptation du code aux navigateurs 247Balises XHTML conditionnelles 248Règles de style en fonction des navigateurs 250

Règles de style pour Internet Explorer 6 et versions antérieures 250Règles de style pour Internet Explorer 7 seul 251Propriétés de style pour IE 6 ou 7 252

Règles pour navigateurs modernes 253Styles pour les navigateurs modernes et IE 7 254Styles pour les navigateurs modernes sans IE 7 254

Marges par défaut 255Règles spécifiques à Internet Explorer 6 256

Projet IE 7 256Largeur ou hauteur minimum 257Position fixe 258

Technique de rattrapage de position 258Stabilisation de l’affichage 259

Espace vertical sous une image 260Transparence des images PNG 260

Affichage d’une image PNG transparente avec Internet Explorer 6 261Affichage d’une image PNG transparente sur tous les navigateurs 261Dimensions d’affichage modifiées 262

A. COULEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Les 16 couleurs de base 268Couleurs sûres 269Liste de toutes les couleurs nommées 270

B. COMPORTEMENT DES PRINCIPAUX NAVIGATEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281


© Groupe Eyrolles, 2005 XIX

Interprétation du XHTML et des propriétés CSS 2.1 282Compréhension des balises HTML 4 et XHTML 1 283

Interprétation des propriétés CSS 2.1 286Unités 287Paramètre !important 288Médias 288Sélecteurs 288Pseudo-classes 289Pseudo-éléments 289Propriétés 290Paramètres d’impression 293

Interprétation des propriétés CSS 3 294Nouveaux sélecteurs CSS 3 295Polices et couleurs 296Propriétés CSS 3 296

C. RÉSUMÉ DES PROPRIÉTÉS CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

Propriétés CSS 2 302Propriétés d’affichage 303Média paginé 318Média sonore 319

Principales propriétés CSS 3 322Propriétés classées par catégories 327

Propriétés CSS 2 327Propriétés CSS 3 329

D. RÉFÉRENCES BIBLIOGRAPHIQUES ET SITES WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Bibliographie 334Sites web utiles 334

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

chapitre


1


Introduction au XHTML et aux

feuilles de style CSS

Que signifient XHTML et CSS ? Quels avantages nous apportent les feuilles de style ? Comment se partagent-elles le « travail » de mise en page avec le code XHTML ?

Sommaire

B Signification de XHTML et CSS

B Principes de base pour une page web

B Principes d’une bonne écriture XHTML/CSS

B Intérêt des feuilles de style



Cette introduction nous emmène à la découverte de quelques notionsfondamentales à propos du XHTML et des feuilles de style CSS. Ce seraaussi l’occasion, à partir d’exemples, de poser les principes d’une bonneécriture des pages web.

Signification de XHTML et CSSLe XHTML est une évolution du HTML, initiales de « Hypertext MarkupLanguage », c’est-à-dire langage de marquage hypertexte.

Cela signifie que la mise en place d’une page web (titres, paragraphes,images...) utilisera des caractères pour marquer d’une certaine façon les dif-férentes parties du texte. Parmi ces caractères de marquage, certains corres-pondront à des liens vers d’autres pages web : ce sont des liens hypertextes.

Le « X » de XHTML vient de XML, soit « eXtensible Markup Language »,langage plus complexe et plus strict que le HTML. C’est lui qui a inspiré latransition du HTML vers la forme plus rigoureuse qu’est le XHTML.

Quant à CSS, cela signifie « Cascading Style Sheets », ce qui se traduit enfrançais par feuilles de style en cascade.

La feuille de style fournit la mise en forme des éléments de la page, qui aurontété écrits en XHTML. Elle s’applique à une ou plusieurs pages du site.

Le terme « en cascade » indique que la mise en forme d’une page peut faireappel à plusieurs feuilles de style. Les différentes propriétés affectées à unmême élément s’ajoutent alors pour lui donner sa mise en forme finale.Lorsque deux propriétés se contredisent, des règles de priorité s’appli-quent et c’est généralement le dernier style défini qui est pris en compte.

Principes de base pour une page webVoici les principales qualités demandées à une page web : qu’elle soit clairedans sa conception, accessible à tous et que son esthétique s’accorde bienavec son contenu.

1 – I n t r o d u c t i o n a u X H T M L e t a u x f e u i l l e s d e s t y l e C S S

© Groupe Eyrolles, 2005 3

Choix sensé des balises HTMLEn HTML, chaque élément doit être porteur de sens. Par exemple :• Pour un titre de page, utiliser un titre de niveau 1 <h1> plutôt qu’un

paragraphe quelconque <p>.• Pour un menu (liste de liens), choisir une liste sans numérotation <ul>.

L’utilisation de balises qui donnent du sens présente plusieurs intérêts :• le code sera plus clair pour le développeur et la maintenance future du

site en sera facilitée ;• les moteurs de recherche indexeront mieux les pages, car ils y retrouve-

ront plus facilement les mots-clés essentiels ;• l’accessibilité sera améliorée pour les personnes en situation de handicap.

Adaptation aux navigateursIl s’agit de couvrir, autant que possible, une large gamme de navigateurs :• différents logiciels du marché ;• divers systèmes d’exploitation ;• d’autres médias que le PC : assistant personnel ou PDA, téléphone

mobile...

De plus, les pages web doivent rester lisibles lorsque la feuille de style n’estpas prise en compte :• lecture en mode texte ;• lecture vocale ou en braille ;• anciens navigateurs qui ne reconnaissent pas les styles.

Figure 1–1 Nos pages doivent pouvoir s’afficher dans différents navigateurs.



AccessibilitéL’accès aux personnes handicapées (que le handicap soit visuel, auditif,moteur) doit être facilité :• Proposez une navigation alternative lorsque sont utilisés des menus

graphiques ou reposant sur des scripts (des modules complémentaires,appelés plug-ins en anglais, sont nécessaires pour Java, Flash...).

• Évitez les structures de page reposant sur des cadres (frames) ou destableaux (réservez les tableaux à la présentation de données en lignesou en colonnes).

• Ne vous basez pas uniquement sur les couleurs, permettez l’augmenta-tion de la taille du texte.

• Proposez une alternative aux contenus purement visuels (images) ouauditifs, facilitez la lecture des liens hypertextes...

L’apparence, fonction du thème et du public concernéLe choix des couleurs et des polices de caractères est fonction du style àdonner aux pages web, donc de leur thème et du public visé.

Polices de caractères• Pour le web, utilisez plutôt des polices sans sérif (Arial, Helvetica, Tre-

buchet, Verdana...).• Réservez aux titres les autres polices et les polices fantaisie.• N’abusez pas de l’italique, à réserver pour quelques mots ou remarques.• Évitez les caractères trop petits pour des paragraphes entiers.• Limitez à deux ou trois le nombre de polices différentes dans une

même page.



En résumé, quelques sentiments liés aux couleursLes différentes couleurs correspondent à des sentiments, des impressions,des atmosphères. Cela peut nous aider à choisir le graphisme du site àcréer, en fonction de son sujet et de la catégorie d’internautes auquel il estdestiné. Voici les valeurs communément associées aux couleurs les pluscourantes :• Les couleurs chaudes, telles que le jaune, l’orange et le rouge, représen-

tent la chaleur et le dynamisme, ainsi que les impulsions.• Les couleurs froides, comme le gris, le bleu, le vert et le violet, indiquent

la fraîcheur, le calme et aussi le raisonnement (sciences).• Les couleurs vives sont associées à l’action.• Les couleurs pastel font penser à la poésie et donnent une impression

de sensibilité.• Enfin, le gris et le blanc sont des couleurs passe-partout.

Figure 1–2 Choisissez des polices lisibles et harmonieuses : ne suivez pas ce trés mauvais exemple !



Homogénéité du siteLes différentes pages d’un site doivent présenter un minimum d’homogé-néité entre elles. Elles proposeront par exemple des variations autour d’ungraphisme commun.

Il est donc important de définir une « charte graphique » (polices, cou-leurs, logos...) à partir de laquelle les pages seront construites.

Principes d’une bonne écriture XHTML/CSS : donner du sens au codageL’essentiel est de séparer le contenu (codé en XHTML) de la mise en forme(feuilles de style CSS). Cette méthode présente plusieurs avantages,notamment la clarté du code et la possibilité de définir des styles com-muns à plusieurs pages.

Voici quelques exemples de mise en forme à l’aide de balises qui donnentdu sens au texte. Ils utilisent le principe des balises, que nous n’avons pasencore détaillé (c’est l’objet du chapitre qui suit). Cependant c’est une pre-mière approche intéressante, avant de se jeter dans le grand bain duXHTML et des CSS !

Titre de pageAu lieu d’écrire le titre dans un paragraphe normal <p> et de l’affubler d’unetonne de mises en forme (grande taille, gras, espacement au-dessus et en

Figure 1–3 Bien choisir les couleurs d’une page



dessous), codez-le plutôt comme « titre de niveau 1 » avec la balise <h1> et,si besoin est, complétez sa mise en forme à l’aide d’une règle de style CSS :• dans le code XHTML : <h1>Ici un titre</h1>• et dans la feuille de style : h1 { ...mise en forme...}

Mise en gras ou en italiquePour mettre des mots en gras ou en italique, il existait en HTML les balises<b> (gras) et <i> (italique) qui sont obsolètes en XHTML : remplacez-lesrespectivement par <strong> et <em>.

L’affichage sera identique avec les anciennes et les nouvelles balises, alorspourquoi ce changement ? Il correspond au raisonnement suivant :• Les nouvelles balises <strong> et <em> indiquent une mise en relief

plus ou moins prononcée sans dire par quel moyen elle s’effectuera,notamment sans imposer le gras ou l’italique comme le font les ancien-nes <b> (« gras » se dit bold en anglais) et <i>.

• Ainsi par exemple, le concepteur de la page peut effectuer cette miseen forme par un changement de couleur du texte, sans recourir au grasni à l’italique. Ce choix serait en contradiction avec le nom des ancien-nes balises, il ne l’est pas avec celui des nouvelles.

Liste de liens hypertexte (menu)Pour écrire un menu, évitez d’avoir recours à une succession de balises <p>.Préférez-leur une structure de liste en délimitant l’ensemble par la balise<ul> (liste non numérotée), et chaque ligne par une balise <li>. Nousreviendrons bientôt sur l’utilisation de ces balises.

Ainsi, cette partie se différenciera du texte et constituera un ensemblehomogène, avec une fonction bien précise : celle d’un menu. Par contre, si lasuite de la page contient des paragraphes <p> incluant aussi des liens hyper-textes, ceux-ci seront bien repérés comme représentant le texte de la page.



Intérêt des feuilles de styleL’utilisation des feuilles de style n’a pas pour seul but de répondre auxnormes et de faire plaisir au W3C (consortium qui définit les règles decodage des pages web : http://www.w3.org). Un bénéfice réel et concretdécoule de cette façon de travailler.

La dissociation du contenu (XHTML) et de la mise en forme (feuille destyle) permet :• de retrouver et corriger plus facilement le texte des pages ;• d’utiliser une feuille de style externe, commune aux différentes pages

d’un site. Il en résulte une meilleure unité graphique entre ces pages etaussi des mises à jour plus simples par la suite. Une modification dansla feuille de style externe se répercute d’un seul coup sur toutes lespages du site.

À noter Menu en début de page

Puisque nous parlons de menu, il faut signaler que sa place de choixdans le code se trouve au début de la page. Celle-ci sera alors mieuxcomprise par les navigateurs qui lisent la page en mode texte, d’oùune accessibilité améliorée pour les personnes handicapées et unmeilleur référencement par les moteurs de recherche.

Figure 1–4 Cet extrait de page contient en haut un titre de niveau 1 (nom du site), à gauche une liste de liens (menu général) et sur la droite un paragraphe de texte. Il provient de la page d’accueil du site http://www.framasoft.net, portail de la commu-nauté francophone des logiciels libres.



La mise en page est beaucoup plus légère, car elle ne nécessite plus l’utilisa-tion de tableaux. Les CSS permettent en effet de positionner les différentespartie d’une page web :• soit de façon rigoureuse : blocs fixes dont les coordonnées sont

choisies ;• soit d’une manière souple : blocs flottants qui s’alignent les uns par rap-

port aux autres.

Cette présentation était l’occasion de connaître quelques principes debase auxquels nous ferons référence plus tard. Le chapitre qui suit va nousdonner des outils concrets pour écrire une page XHTML et nous préparerà la mise en place d’une feuille de style.

Figure 1–5 Une page web est constituée de blocs contenant du texte et des images (extrait de la page http://lea-linux.org/cached/index/Intro-index.html, site franco-phone d’entraide pour les utilisateurs de Linux).

Premiers pas en CSS XHTML - static.fnac-static.com€¦ · Structure de l’ouvrage Le premier...

Documents

Transcript of Premiers pas en CSS XHTML - static.fnac-static.com€¦ · Structure de l’ouvrage Le premier...