Bonnes Pratiques Des Standards Du Web

8/3/2019 Bonnes Pratiques Des Standards Du Web

1/325

Le Campus

Bonnes pratiques des

standards du web

Dan Cederholm odessur www.pe

Prface de Jeffrey Zeldman


2/325

Bonnes pratiquesdes standards

du Web


3/325

Pearson Education France a apport le plus grand soin la ralisation de ce livre an de vous fournir uinformation complte et able. Cependant, Pearson Education France nassume de responsabilits, ni poson utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraiersulter de cette utilisation.

Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions thriques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle.

Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes.

Tous les noms de produits ou autres marques cits dans ce livre sont des marques dposes par leurs proprtaires respectifs.

Publi par Pearson Education France

47 bis, rue des Vinaigriers

75010 PARISTl. : 01 72 74 90 00

www.pearson.fr

Mise en pages : TyPAO

ISBN : 978-2-7440-4155-6

Copyright 2010 Pearson Education France

Tous droits rservs

Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du codela proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas chasans le respect des modalits prvues larticle L. 122-10 dudit code.

No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, includiphotocopying, recording or by any information storage retrieval system, without permission from Pearson EducatioInc.

Titre original : Web Standards Solutions, The Markand Style Handbook

Traduit de lamricain par Sandrine Burriel, avec lacontribution de Monique Brunel et Bruno Sbarte

ISBN original : 978-1-4302-1920-0

Copyright original 2009 by Dan Cederholm

All rights reserved

Chapitre 10 extrait deDOM Scripting de Jeremy Ke

ISBN original : 978-1-59059-533-6

All rights reserved

publi avec laimable autorisation de lauteur et delditeur


4/325

Bonnes pratiquesdes standards

du Web

Dan Cederholm


5/325


6/325

propos de lauteur............................................................................................................ X

Remerciements ........................................................................................................................ X

Avant-propos ............................................................................................................................ XV

Introduction ..............................................................................................................................

Que sont les standards web ?...............................................................................................

Pourquoi les standards web ? ..............................................................................................

Pourquoi XHTML ? ................................................................................................................

Balisage structur .....................................................................................................................

Origines de ce livre ...................................................................................................................

Format de louvrage ................................................................................................................

Code source des exemples .....................................................................................................

Partie I Se faire plaisir avec le balisage

1 Listes...............................................................................................................................................

Allons en courses .......................................................................................................................

Cest lheure du quiz ............................................................................................................... 1

Mthode A : le saut de ligne
............................................................................. 1

la ligne, toute ! ............................................................................................................... 1

Mthode B : une puce qui nous fait tiquer................................................................... 1

Mthode C : on sapproche !........................................................................................... 1

Mthode D : au bonheur des retours la ligne ........................................................... 1

En rsum .................................................................................................................................... 1

Pour aller plus loin ................................................................................................................... 1

Dompter la puce ................................................................................................................. 1

Se faire plaisir avec des puces personnalises ............................................................ 1

Des listes pour naviguer ................................................................................................... 1

Formes de mini-onglets .................................................................................................... 2

Table des matires


7/325

VI Bonnes pratiques des standards du Web

2 Titres ............................................................................................................................................... 2

Quelle est la meilleure manire de baliser le titre dun document ? .................. 2

Mthode A : du sens ? ...................................................................................................... 2

Mthode B : la combinaisonpet b................................................................................ 2

Mthode C : la forme et le fond ..................................................................................... 2

En rsum .................................................................................................................................... 2


Style simple .................................................................................................................................. 2

Ajouter un arrire-plan ..................................................................................................... 3

Icnes interchangeables.................................................................................................... 3

Des mises jour faciles .................................................................................................... 3

Pour conclure.............................................................................................................................. 3

3 Les tableaux sont-ils lincarnation du Mal ? ........................................................ 3

Totalement tabulaire................................................................................................................ 3

Une table laquelle tout le monde peut siger............................................................. 3

Ajouter un rsum.................................................................................................................... 4

Les en-ttes du tableau ........................................................................................................... 4

Relations entre en-ttes et donnes ................................................................................... 4

Utiliser lattribut abbr............................................................................................................. 4

, et .................................................................................................. 4

Les tableaux sont-ils le Mal ? .............................................................................................. 4


Crer une grille ................................................................................................................... 4

Faire disparatre les interstices ....................................................................................... 4

Personnaliser les en-ttes ................................................................................................. 5

En-ttes avec des images darrire-plan....................................................................... 5

Affecter des icnes des identiants............................................................................ 5

Dautres exemples de styles de tableaux......................................................................... 5

Pour conclure.............................................................................................................................. 5

4 Citations ....................................................................................................................................... 5

Mthode A : pas assez de sens ............................................................................................. 5

Mthode B : un peu de classe ? ........................................................................................... 5

Mthode C : lidal, cest .......................................................................... 5


8/325

VTable des matires

Utiliser un marteau pour enfoncer une vis.................................................................... 5

En rsum .................................................................................................................................... 5


Citez vos sources................................................................................................................ 6

Citations intgres au corps de texte ............................................................................. 6Styler ......................................................................................................... 6

Styler avec plusieurs images darrire-plan .................................... 6

Pour conclure.............................................................................................................................. 7

5 Formulaires ................................................................................................................................ 7

Quelles sont nos options pour baliser un formulaire ? ............................................ 7

Mthode A : utiliser un tableau ...................................................................................... 7

Mthode B : sans tableau, mais un peu ltroit ....................................................... 7

Mthode C : simple et plus accessible.......................................................................... 7

Mthode D : dnir un formulaire................................................................................. 7

En rsum .................................................................................................................................... 8


Le fabuleux attribut tabindex.......................................................................................... 8

accesskeypour les formulaires frquents................................................................... 8

Appliquer des styles aux formulaires............................................................................ 8

Y a-t-il un focus dans la salle ? ...................................................................................... 9

6 , et autres lments de structuration des phrases .. 7Prsentation contre structure .............................................................................................. 9

Pourquoi et sont-ils meilleurs que et ?....................... 9

Quen est-il de ? .................................................................................................... 9

Juste du gras ou de litalique, sil vous plat ............................................................... 9

Du gras et de litalique...................................................................................................... 9

En rsum .................................................................................................................................... 10


Les lments de phrase ..................................................................................................... 10Conception de ....................................................................................................... 10

et ..................................................................................................... 10

................................................................................................................................. 10


9/325

VIII Bonnes pratiques des standards du Web

................................................................................................................................ 10

................................................................................................................................. 10

................................................................................................................................. 10

Les microformats ...................................................................................................................... 10

Une nouvelle pousse ......................................................................................................... 10Une explication simple ..................................................................................................... 11Un exemple de hCard........................................................................................................ 11

Pour conclure.............................................................................................................................. 11

7 Ancres............................................................................................................................................ 11

Quel est le meilleur moyen de baliser une ancre pour pointervers une portion spcique dune page ? ....................................................................... 11

Mthode A : un nom vide ................................................................................................ 11

Mthode B : tout est dans le nom .................................................................................. 11Mthode C : joublierai ton nom.................................................................................... 11Mthode D : la solution tout en un ................................................................................ 12

En rsum .................................................................................................................................... 12


Lattribut title ...................................................................................................................... 12

Styler les liens..................................................................................................................... 12

Levez lancre ! ............................................................................................................................ 13

8 Encore des listes..................................................................................................................... 13Quelle est la meilleure manire de baliser une liste numrote ?........................ 13

Mthode A : lordre dans le dsordre ........................................................................... 13

Mthode B : une liste ordonne...................................................................................... 13

Quelle est la meilleure manire de baliser un ensemble de termeset de descriptions ? ................................................................................................................... 14

Mthode A ........................................................................................................................... 14

Mthode B ........................................................................................................................... 14

En rsum .................................................................................................................................... 14

Pour aller plus loin ................................................................................................................... 14Identier les parties ........................................................................................................... 14Des numros personnaliss ............................................................................................. 14Ajouter les numros la CSS ......................................................................................... 14Rsultat................................................................................................................................. 14

Pour conclure.............................................................................................................................. 14


10/325

IXTable des matires

9 Minimiser le balisage .......................................................................................................... 14

Comment minimiser le balisage lorsque nous crons des sites respectueuxdes standards web ? ................................................................................................................. 14

Slecteurs descendants ..................................................................................................... 15

Mthode A : abondance de classes ................................................................................ 15Mthode B : slection naturelle...................................................................................... 15

Le superu.............................................................................................................. 15

Mthode A : en ...................................................................................................... 15

Mthode B : sans ................................................................................................... 15

Autres exemples ................................................................................................................. 15

En rsum .................................................................................................................................... 15


Le balisage brut .................................................................................................................. 15Avoir du style ...................................................................................................................... 15

Puces personnalises ......................................................................................................... 15

Ajouter une bordure .......................................................................................................... 16

Pour conclure.............................................................................................................................. 16

10 Le Document Object Model ou DOM ...................................................................... 16

D pour document ...................................................................................................................... 16

Objets du dsir ........................................................................................................................... 16

Pour accder au modle, tapez M...................................................................................... 16Nuds ................................................................................................................................. 16

getElementById................................................................................................................... 17

getElementsByTagName ................................................................................................... 17

Pour faire le point ..................................................................................................................... 17

getAttribute.......................................................................................................................... 17

setAttribute........................................................................................................................... 17

Et si on parlait contenu ?....................................................................................................... 17

Identier le type dun nud : nodeType....................................................................... 17Obtenir plus dinformations sur un nud : nodeName et nodeValue ................... 17

Ajoutons quelques courses .............................................................................................. 18

Pour conclure ............................................................................................................................. 18


11/325

X Bonnes pratiques des standards du Web

Partie II Styler en toute simplicit

11 Appliquer des CSS ................................................................................................................. 18

Comment appliquer des CSS un document ? ........................................................... 18

Mthode A : llment ...................................................................................... 18

Mthode B : feuille de style externe ............................................................................. 18

Mthode C :@import....................................................................................................... 18

Combiner B et C pour des feuilles de style multiples .............................................. 19

Styles "lo-" et "hi-" ....................................................................................................... 19

Adopter la cascade............................................................................................................. 19

Mthode D : styles intgrs au balisage ....................................................................... 19

En rsum .................................................................................................................................... 19

Pour aller plus loin ................................................................................................................... 19Styles alternatifs ................................................................................................................. 19

Styles de rinitialisation ................................................................................................... 20

Styles utilisateurs ............................................................................................................... 20

Pour conclure.............................................................................................................................. 20

12 Styles pour limpression..................................................................................................... 20

Comment spcier des styles pour limpression ? ..................................................... 20

Types de mdias ................................................................................................................. 20

Deux manires de cibler................................................................................................... 20

Mthode A : lattribut media........................................................................................... 20

Mthode B :@media ou @import................................................................................. 20

Les valeurs multiples sont autorises............................................................................ 20

Sparer les styles pour lcran et pour limpression ................................................. 20

Crer une feuille de style dimpression ........................................................................ 20

En rsum .................................................................................................................................... 21

13 Mise en page avec les CSS............................................................................................... 21Comment utiliser les CSS pour crer une mise en page sur deux colonnes ? 21

Mthode A : faire otter la barre latrale..................................................................... 21

Mthode B : le double ottement .................................................................................. 22

Mthode C : faire otter le contenu .............................................................................. 22

Mthode D : positionnement........................................................................................... 22


12/325

XTable des matires

En rsum .................................................................................................................................... 23


Le problme du modle de botes .................................................................................. 23

Des colonnes factices ........................................................................................................ 23

Pour conclure.............................................................................................................................. 24

14 Styler du texte ......................................................................................................................... 24

Comment donner un peu dallure un hypertexte ?................................................ 24

Police ! ................................................................................................................................. 24

Interligne : la hauteur entre deux lignes ....................................................................... 24

Toute la famille ................................................................................................................... 24

Crnage : lespace entre les lettres ................................................................................ 24

Lettrines ................................................................................................................................ 24Alignement du texte .......................................................................................................... 24

Transformer le texte .......................................................................................................... 24

Petites capitales .................................................................................................................. 25

Indentation de paragraphe................................................................................................ 25

Contraste .............................................................................................................................. 25

En rsum .................................................................................................................................... 25

15 Remplacement de texte par des images ............................................................... 25Comment utiliser les CSS pour remplacer du texte par des images ? .............. 25

Aucune solution nest parfaite ........................................................................................ 25

utiliser, mais avec modration .................................................................................... 25

Mthode A : Fahrner Image Replacement (FIR) ....................................................... 25

Le balisage........................................................................................................................... 25

La CSS ................................................................................................................................. 25

Avantages ............................................................................................................................. 25

Inconvnients ...................................................................................................................... 25Peser le pour et le contre .................................................................................................. 25

Mthode B : Leahy/Langridge Image Replacement (LIR) .................................... 26

Le balisage et la CSS ........................................................................................................ 26


13/325

XII Bonnes pratiques des standards du Web

Ajuster le modle de botes ............................................................................................. 26

Inconvnients ...................................................................................................................... 26

Mthode C : la mthode Phark........................................................................................... 26

Le balisage et la CSS ........................................................................................................ 26

Une solution encore imparfaite ...................................................................................... 26

Mthode D : sIFR ..................................................................................................................... 26

En rsum .................................................................................................................................... 26


Logos interchangeables .................................................................................................... 26

Onglets base dimages, effet de survol et accessibles ........................................ 26

Pour conclure.............................................................................................................................. 27

16 Styler llment .................................................................................................... 27Deux colonnes et parfois trois.............................................................................................. 27

Structure du balisage et du style..................................................................................... 27

Ce a la class ........................................................................................................ 27

Pas seulement pour les colonnes.................................................................................... 27

"Vous tes ici" ............................................................................................................................ 28

La liste de navigation ........................................................................................................ 28

Identier les parties ........................................................................................................... 28

La CSS magique................................................................................................................. 28

En rsum .................................................................................................................................... 28

17 Pour aller encore plus loin .............................................................................................. 28

O aller maintenant ? ............................................................................................................. 28

Organisations et publications .......................................................................................... 28

Blogs inuents et sources dinspiration ....................................................................... 28

Livres ................................................................................................................................. 29

En guise dadieu ........................................................................................................................ 29

Index .............................................................................................................................................. 29


14/325

Dan Cederholm est concepteur de sites web, auteur de livres et fondateur de SimpleBitoute petite agence web.

Expert reconnu dans le domaine de la conception de sites web respectueux des standardDan a travaill avec, entre autres, Google, MTV, ESPN, Fast Company, Blogger, Yahoo!,collabore avec Happy Cog sur des projets choisis. Dans les travaux quil ralise pour sclients, dans ses crits et ses interventions, il dfend des interfaces souples et adaptablerespectueuses des standards web.

Dan est lauteur de deux succs de librairie : Bulletproof Web Design, 2nd ed., New Ride2007 et Web Standards Solutions, Apress/Friends of ED, 2004. Dan tient galement un bl

populaire o il rdige des articles et analyses sur le Web, les technologies et la vie. Et il josacrment bien de lukull.

Il vit Salem, dans le Massachusetts, avec son pouse, Kerry, et leurs deux enfants, Jack Tenley.

propos de lauteur


15/325


16/325

Je suis profondment reconnaissant envers toutes les personnes qui ont permis ce livre dvoir le jour :

Chris Mills, pour avoir soutenu ce projet depuis le dpart, pour mavoir guid et poavoir fait en sorte que lensemble prenne forme ;

Drew McLellan, pour ses excellents conseils et son travail acharn, ainsi que MaHeerema pour son immense travail sur cette dition ;

Jeffrey Zeldman, sans qui je naurais pas crit ce livre et qui a fait plus que nimporqui pour les standards web ;

Douglas Bowman, pour avoir fourni linspiration que procurent ses interfaces impecables et pour avoir dmontr que la mise en page par CSS peut merveilleusemerussir sur de grands sites commerciaux ;

Dave Shea, pour avoir cultiv le jardin et montr que les interfaces bases sur les CSpeuvent faire peu prs tout ce que lon peut en souhaiter ;

Jason Kottke, pour avoir pos LA question (ltincelle) ;

les lecteurs de SimpleBits, pour avoir suscit de prcieuses discussions qui ont fait germlide de cet ouvrage ;

Eric Meyer, Christopher Schmitt, Tantek elik, Molly Holzschlag, Todd DomineMike Davidson, Ryan Carver, Dan Rubin, D. Keith Robinson, Mark Pilgrim, Joe Clar

Craig Saila, Nick Finck, Owen Briggs, Simon Willison, Ian Lloyd, Dan Benjamin et tadautres, dont les efforts en ligne et hors ligne, au sein de la communaut des standarweb, ont aid des milliers de gens comme moi ;

les membres du Web Standards Project, dont les enseignements continuent bnciaux concepteurs et dveloppeurs de sites web partout dans le monde ;

les anciens collgues de mon quipe web chez Fast Company et Inc. particuliremeRob Roesler, qui ma offert une formidable opportunit et un grand soutien ; David Season, que jai appris connatre mieux quil ne le saura jamais ; idem pour Bob JoyaPaul Maiorana, pour avoir support mon obsession pour Journey ; Daigo Fujiwara ; PaCabana ; Nick Colletta ; Heath Row ; Irina Lodkin ; Carole Matthews ; Becca Rees

Alex Ashton ; Peter Wilkinson et Linda Tischler pour mavoir fait entrer chez FC ; mafamilleetmesamiset,avanttout,monpouse,Kerry,poursonsoutieninconditionne

et vous, lecteurs de ce livre.

Les ditions Pearson tiennent galement remercier Sandrine Burriel et Bruno Sbarte poleur travail dadaptation, ainsi que Monique Brunel pour sa contribution ldition franaide louvrage.

Remerciements


17/325


18/325

Vous avez entre les mains un livre de recettes. Avec des exemples clairs et sans discousuperu, Dan Cederholm montre comment mettre en application les standards web pocrer des interfaces lgantes, lgres et accessibles tous.

Dan ne cherche pas vendre la conception de sites web respectueux des standards dupoint de vue commercial ou cratif. Dautres (hum) sen sont dj chargs. Et franchemesi vous avez pris la peine de feuilleter cet ouvrage, vous tes certainement dj convaincdes bnces que procure le respect des standards en termes daccessibilit, de longvit de rsultats commerciaux. Nul besoin dune synthse de plus ou dun argumentaire commercial : ce quil vous faut, cest une vision pratique des composants, qui "met les mai

dans le cambouis", et cest exactement ce que propose ce livre.Dans un style pragmatique et naturel ce style que lon retrouve sur les bons sites web Dan examine les lments universels des sites web tels que la division des pages et la navigtion. laide dune mthode pdagogique quil a mise au point chez SimpleBits.com, Daexplique la faon dont les standards web facilitent la cration de ces composants universeleur modication lorsque votre chef ou votre client demande des changements de derniminute et, surtout, leur utilisation.

Voici un exemple simple illustrant comment fonctionne ce livre et pourquoi vous ny perdrni votre temps, ni votre argent :

Le site que vous tes en train de concevoir ncessite une mise en page sur trois colonnes poles pages principales daccueil et une mise en page sur deux colonnes pour les pages internde contenu. Lapproche classique consiste crer deux tableaux HTML de mise en formsans aucun rapport entre eux, destins servir de modles principaux. Lapproche modernrecommande par le World Wide Web Consortium (W3C) et utilise par les concepteurespectueux des standards, consiste structurer le contenu laide dun balisage smantiqXHTML minimal et faire appel aux feuilles de style (Cascading Style Sheets ou CSS) pola mise en forme.

En tant que concepteur expriment de sites web, vous supposez naturellement que voaurez crer deux modles XHTML diffrents et deux feuilles de style diffrentes pognrer vos deux mises en page, deux et trois colonnes. Mais, comme lillustre ce livrune unique structure XHTML et une unique feuille de style permettent de crer ces deumodles. Basculer dune mise en page lautre est aussi simple que dappliquer un attribclass la balise .

Ce livre est rempli dides pertinentes et de mthodes telles que celle-ci des mthodqui peuvent amliorer votre productivit et simplier votre travail tout en stimulant vot

Avant-propos


19/325

XVIII Bonnes pratiques des standards du Web

crativit. Certaines ont t inventes par Dan lui-mme ; dautres proviennent dun corpmergent de bonnes pratiques modernes, dvelopp par lavant-garde des concepteurs dsites web respectueux des standards. Vous devez les connatre. Et la meilleure manire de lmatriser est justement entre vos mains. Amusez-vous bien.

Jeffrey Zeldman, auteur deDesigning with Web Standard


20/325

Bienvenue dans ce livre de Bonnes pratiques des standards du Web. Pourquoi avons-nousbesoin dun tel ouvrage en 2010 ? Aujourdhui, il existe une telle varit de navigateurs,de supports de consultation des pages web, de besoins utilisateurs satisfaire, que seul lerespect des standards peut vous assurer de toucher une audience large. La plupart des navi-gateurs actuels ont mis laccent sur le respect des standards, et cest une excellente chose. Endautres termes, vous avez aujourdhui de meilleures garanties de cohrence du rendu de voscontenus dun navigateur lautre condition que ces contenus eux-mmes respectentles standards !

Ce livre est conu pour vous donner des billes, de quoi apporter des solutions respectueusesdes standards web vos propres projets et vous permettre de faire de meilleurs choix entermes de balisage et de styles. Dans chaque chapitre, nous comparerons diverses mthodescourantes de conception web, en essayant didentier pourquoi lune peut tre meilleure quelautre. En analysant ces comparaisons, nous serons mme dappliquer dans nos propresprojets loutil le mieux adapt la tche requise.

Mais, tout dabord, nous devons nous assurer que nous sommes sur la mme longueurdonde : ce livre est rempli dacronymes, de blocs de code et de concepts qui vous sont peut-tre trangers. Commenons par parler des standards web.

Que sont les standards web ?Selon les termes mme du World Wide Web Consortium (www.w3.org/Consortium/) :

"Le World Wide Web Consortium a vu le jour en octobre 1994 pour amener le World Wide Web raliser

tout son potentiel en dveloppant des protocoles communs destins promouvoir son volution et

garantir son interoprabilit. Le W3C compte environ 400 organisations membres dans le monde

entier et a gagn une reconnaissance internationale pour ses contributions la croissance du Web."

Fond par Tim Berners-Lee, le W3C est responsable des spcications des standards webqui constituent le Web daujourdhui. Bien que les standards recouvrent des technologies et

langages divers, leur utilisation et surtout leur mise en application passe dabord par unebonne approche du HTML (HyperText Markup Language) et donc par la structuration desdocuments. En ce sens, ceux-ci se doivent dtre valides, structurs, smantiques (nous ver-rons un peu plus loin dans cette introduction ce que recouvre cette notion) et surtout exemptsdlments superus ou inappropris.

Lensemble des standards, loin dtre limit au seul HTML, prsente dautres composantesqui ne viennent que renforcer cette rgle. Les recommandations WCAG (Web ContenAccessibility Guidelines ) visent rendre les contenus accessibles au plus grand nombre et ne

Introduction


21/325

2 Bonnes pratiques des standards du Web

tolrent que faiblement un mauvais balisage. Le XML (eXtensible Markup Language) pemet de baliser linformation avec une granularit plus ne encore et requiert donc structuet prcision en matire de balisage. Le format RDF (Resource Description Framework) eune dclinaison possible du XML. Le protocole HTTP (HyperText Transfer Protocol) nomalise les changes entre clients et serveur, notamment pour lutilisation dAjax (Asynchrnous JavaScript And XML). En matire de scripts, lutilisation du DOM (Document ObjeModel) ncessite de sappuyer sur un balisage (HTML ou XML) robuste et structur. Pola mise en forme des contenus, lusage des feuilles de styles CSS (Cascading Style Sheeou XSL (eXtensible Stylesheet Language) requiert l encore cohrence et structuration danos contenus.

Lobjectif premier de cet ouvrage est de vous apprendre structurer correctement vos informtions. Dans cette optique, nous nous focaliserons principalement sur deux de ces standards

1. Dune part, le langage eXtensible HyperText Markup Language (XHTML) ou langade balisage hypertexte extensible, qui combine la smantique du HTML 4.01 et la sy

taxe du XML. Cest lobjet de la premire partie du livre, qui se conclut sur un chapitdouverture consacre auDocument Object Model (DOM).

2. Dautre part, les Cascading Styles Sheets (CSS) ou feuilles de style en cascade, que noexploiterons pour appliquer des styles au contenu des pages web et mettre en videnltroite relation que lon peut avoir entre structure et mise en forme. Utilises titdillustration dans toute la premire partie de ce livre, elles constituent le cur de seconde partie.

Pourquoi les standards web ?

Hier, je suis all acheter des stores pour mes fentres. Jai mesur la fentre, je suis all amagasin, jai pris dans le rayon un store de 80 cm de large et je lai ramen la maison :correspondait parfaitement.

Lanne dernire, mon pouse et moi avons achet un nouveau lave-vaisselle. Nous avoretir lancien de son emplacement et en avons command un nouveau. Lorsque le nouvemodle est arriv, il sadaptait parfaitement.

Jessaie simplement de dmontrer ici quelque chose : les travaux de rnovation intrieusont facilits par les standards. Quelquun comme moi peut se rendre dans le premier magsin venu, acheter un tuyau dvacuation et celui-ci devrait, selon toute probabilit, conven la perfection. Je peux aussi acheter une nouvelle poigne de porte et, neuf fois sur dix, e

sera adapte la porte sans quil soit besoin de modications majeures.

Des mesures standard prdtermines facilitent la vie des gens qui travaillent sur la constrution et la maintenance des maisons. Lorsque le nouveau propritaire dun logement souhale rnover ou lentretenir, les standards facilitent les rparations et les amliorations.

Cela na, naturellement, pas toujours t le cas. Les maisons construites avant le e sicne respectaient pas toutes les standards. Nallez pas croire que les maisons construites sa


22/325

Introduction

respecter les standards taient dfectueuses : simplement, leur rparation, leur rnovation leur maintenance demandaient davantage de travail.

Souvent, les gens achtent de vieilles maisons pour les rnover. Une fois les gros travaux rnovation termins, le propritaire peut proter des standards de mesure pour en facilit

lentretien.Ce livre ne traite pas des maisons. Pourtant, lanalogie prcdente peut sappliquer au Wesi nous respectons les standards dans nos pages web, il devient nettement plus simple de lmaintenir. Vos collgues concepteurs et dveloppeurs de sites web pourront dautant plfacilement se plonger dans les pages et comprendre comment elles sont structures et style

Historiquement, les concepteurs et dveloppeurs se sont reposs sur une accumulation balises pour parvenir aux interfaces qui, aujourdhui encore, inondent le Web. Des anndurant, la norme a consist imbriquer des tables sur trois niveaux de profondeur, tout en ulisant des images GIF transparentes pour obtenir une mise en page prcise au pixel prs. Madu fait que la prise en charge des standards sest amliore dans les navigateurs populaires,

capacit combiner un balisage minimal et structur avec des feuilles de style CSS a atteun seuil au niveau duquel respecter les standards nest plus synonyme dinterface ennuyeu

La tendance saccentue et ceux qui sont aujourdhui conscients des avantages que reprsentent les standards web auront une longueur davance sur le reste de la communaut dconcepteurs et dveloppeurs de sites web. Cest ainsi que les choses vont voluer.

Comprendre et exploiter les standards web engendre les bnces suivants :

Rduction du balisage. Moins de code signie des pages plus rapides charger. Moide code signie aussi une mobilisation moindre des capacits du serveur, ce qui sotour se traduit par des conomies ralises sur lespace disque et la bande passante.

Augmentation de la sparation entre contenu et prsentation. Utiliser les feuillde style CSS pour contrler lapparence dun site facilite les mises jour et les chagements dapparence du site. On peut modier instantanment lensemble du site mettant jour une unique feuille de style.

Amlioration de laccessibilit. Les standards web nous permettent de toucher le plgrand nombre possible de navigateurs et de priphriques. Les contenus peuvent facilment tre lus dans tout navigateur, tlphone, ordinateur de poche, ou par les internaututilisant des logiciels dadaptation.

Garantie de compatibilit descendante. Crer des pages respectant les standards wgarantit quelles resteront lisibles dans le futur.

Nimporte lequel de ces bnces constitue une raison sufsante de respecter les standarweb. Cet ouvrage vous montrera comment vous dbarrasser de vos mauvaises habitudesvous fournira des astuces et techniques pour crer des interfaces agrables et respectueusdes standards.


23/325


Pourquoi XHTML ?Les exemples de balisage de ce livre sont rdigs en XHTML ou eXtensible HyperTeMarkup Language. Techniquement parlant, XHTML est la reformulation de HTML 4 XML. Quest-ce que cela signie ? Eh bien, vous connaissez dj HTML, nest-ce pas

XHTML est identique, avec quelques rgles en plus.Citons, l encore, le W3C (www.w3.org/TR/xhtml1/#xhtml) :

"La amille XHTML constitue ltape suivante dans lvolution dInternet. En migrant ds aujourdhui ver

XHTML, les dveloppeurs de contenus peuvent entrer dans le monde du XML avec tous les bnfces

quil reprsente, tout en restant confants dans la compatibilit ascendante et descendante de leurs

contenus."

La compatibilit descendante est un bon point de dpart. En crant aujourdhui des pagweb au moyen du XHTML, nous prenons des mesures qui garantissent que ces pages fontionneront avec les navigateurs et priphriques de demain.

HTML ou XHTML ?La logique nous encourage toujours utiliser la dernire version du langade balisage pour nos documents. Ctait par exemple le cas avec XHTML 1.0, que lon prr

au HTML 4.01. La logique est une chose, mais le contexte, les prrences personnelles, les cho

technologiques dentreprise peuvent intervenir dans ce choix qui ne peut donc aire lobjet du

rponse erme et absolue.

Nous le martelons depuis le dbut de cette introduction et nous le rpterons encore tout au lo

de cet ouvrage : la structuration des contenus est un aspect essentiel de leur production. Le langa

de balisage HTML, dans ses direntes versions, nous a apport cet eet son lot de botes et

compartiments pour ranger nos contenus. Mais ce langage, cr il y a plus de dix ans, sest essouet ntait plus en mesure de proposer toutes les structures ncessaires pour rpondre aux besoins

nos applications web modernes. Ce sont ces aiblesses et une bonne dose de rexion qui ont don

le jour une ormidable association entre HTML et smantique qui, complte par les microorma

(voir ce sujet le Chapitre 6), permet dafner le rle des contenus dans le document.

Le W3C a tent daller encore plus loin dans le caractre applicati des contenus, en combinant HT

et XML pour crer le XHTML. Lavantage immdiat de cette nouvelle mouture est dimposer une p

grande rigueur dans lcriture du balisage, mais elle ait aussi intervenir des volutions plus complex

dans leurs eets et dans leur mise en uvre. Le lecteur intress par ce sujet pourra se rrer av

proft la spcifcation du W3C relative aux types de mdias XHTML, disponible ladresse http

www.w3.org/TR/xhtml-media-types/.

Au cours de lt 2009, le W3C a ofciellement annonc HTML5/XHTML5 comme prochaine versi

du standard de balisage. Issu des travaux du WHATWG (groupe non ofciel regroupant des diteu

et dveloppeurs de navigateurs web), HTML5 vise garantir la compatibilit avec les versio

antrieures de HTML tout en amliorant son adhrence au Web, ses volutions et ses besoins.

certains navigateurs commencent travailler lintgration de cette nouvelle version, elle na p

encore atteint le statut de spcifcation ofcielle publie par le W3C. Le balisage HTML 4.01 o

XHTML 1.0 a donc encore de beaux jours devant lui.


24/325

Introduction

XHTML est galement conu pour tre lisible par le plus grand nombre de navigateurs, pphriques et logiciels. Un balisage rdig en XHTML a plus de chances dtre correctemecompris, quel que soit loutil qui le lit.

Mais il y a des rgles.

Dans le monde du XHTML, il existe des rgles plus strictes dnissant ce quest un balisavalide. Toutes les balises et tous les attributs doivent tre en minuscules ; les attributs doivetre encadrs par des guillemets doubles ; enn, toute balise ouvrante doit correspondune balise fermante. Ce ne sont que quelques-unes des rgles hrites du XML. Mais crgles sont une bonne chose pour vous.

En plus dassurer la compatibilit future, les concepteurs et dveloppeurs de sites welorsquils adhrent aux rgles plus strictes gouvernant le XHTML correct et valide, peuveplus facilement dboguer leur code (ce qui est particulirement pratique lorsque plusieupersonnes travaillent sur le mme balisage) et produisent des pages web qui auront plus chances dtre correctement rendues sur les navigateurs comprenant aussi les standard

Tout au long de cet ouvrage, nous utiliserons XHTML pour tous nos exemples.

Balisage structurVous mentendrez recourir abondamment au mot "smantique" tout au long de ce livre. serai aussi amen utiliser le terme "balisage structur". Ces deux expressions sont intechangeables. Lorsque je parle de smantique, je sous-entends que nous essayons dutiser des balises impliquant une signication, plutt quune instruction de prsentation. Vodevez prsenter une liste dlments ? Alors balisez-la comme telle. Sagit-il dun tablede donnes ? Alors structurez-le ainsi.

En structurant les pages web laide dun balisage smantique, nous nous rapprochoencore de la sparation du contenu par rapport la prsentation et nos pages auront plus chances dtre correctement comprises de la manire dont vous voulez les voir compris par un ventail plus large de navigateurs et de priphriques.

Comme je lai mentionn prcdemment, historiquement, les concepteurs de sites web sont reposs sur limbrication de tableaux et des lments graphiques despacement poparvenir des prsentations prcises au pixel prs. Llment servait positionntous les composants dune page web, ajoutant une quantit incroyable de code inutile saparler des pages rsultantes, quasiment illisibles pour les utilisateurs faisant appel un navgateur en mode texte, un priphrique petit cran ou un logiciel dassistance. Ces bourso

ures inutiles touffaient (et cest encore le cas aujourdhui) le Web.Tout au long des chapitres de ce livre, je vais expliquer la manire dont le balisage smatique rend les pages plus lgres, plus accessibles et plus faciles mettre en forme laides CSS.


25/325


Origines de ce livreTout a commenc de manire assez innocente. Javais souhait proposer un simple quiz smon site web personnel. Une question choix multiples, pour laquelle chacune des rponsconduisait des rsultats identiques ou similaires. Pourquoi une mthode est-elle meilleu

quune autre ? Ctait la vraie rponse ma question.Lobjectif de ce quiz tait de montrer le pour et le contre de chaque mthode, en notaque mme des mthodes multiples conduisant un balisage valide ntaient pas forcmetoujours les meilleures solutions. Les lecteurs pouvaient rpondre et laisser leurs commetaires, et cest par le biais de cette discussion que sont arrives les billes dont je parlais peu plus tt. Si nous pouvons comprendre pourquoi il est ncessaire dutiliser des en-ttes dpages et des listes correctes, nous pouvons alors enregistrer ces informations et les appliqudans nos projets quotidiens.

Il est galement important de mentionner que je ne cherche pas imposer une uniqmthode pour baliser tel ou tel composant dune page : comme tout aspect de la conceptio

de sites web, il existe plusieurs mthodes permettant darriver un rsultat identique proche. Utilisez ce qui convient le mieux la tche que vous avez accomplir : cependanen comprenant les avantages et inconvnients de chaque mthode, vous pouvez faire meilleurs choix le moment venu.

Format de louvrageCe livre est constitu de deux parties : la premire traite les sujets relatifs au balisage, seconde aborde les CSS. Chaque chapitre rpond une question donne, souvent en prsentant plusieurs mthodes permettant daboutir au mme rsultat. Nous tudierons atten

vement chaque mthode en analysant ses avantages et inconvnients. la n de nombrechapitres gurent des sections Pour aller plus loin qui approfondissent le sujet du chapiten abordant le balisage et les CSS avancs.

Code source des exemplesLes chiers des exemples de code sont disponibles depuis le site web Pearson (www.peason.fr), en suivant le lien Code source sur la page ddie ce livre.

Jespre que vous lapprcierez : maintenant, allons-y !


26/325

Partie

Se faire plaisiravec le balisage

I

Chapitre 1 : Listes

Chapitre 2 : Titres

Chapitre 3 : Les tableaux sont-ils lincarnation du Mal ?

Chapitre 4 : Citations

Chapitre 5 : Formulaires

Chapitre 6 : , et autres lments de structurationdes phrases

Chapitre 7 : Ancres

Chapitre 8 : Encore des listes

Chapitre 9 : Minimiser le balisage

Chapitre 10 : LeDocument Object Model ou DOM


27/325


28/325

Les listes On en trouve dans peu prs nimporte quelle page web. Des listes de liens, dlistes darticles dans un panier de courses, des listes de lms prfrs et mme des listpour la navigation au sein dun site. Mme si cela peut sembler arbitraire certains, cestmanire de baliser ces listes que nous allons explorer ici, an de dcouvrir les avantages (les inconvnients) de quelques mthodes courantes. Plus tard, nous mettrons ces avantag lpreuve dans divers exemples de mise en forme dune liste ordinaire.

Allons en courses

Initialement, je voulais utiliser une liste rouge comme exemple pour ce chapitre, mais jrapidement ralis que ce nest pas vraiment le genre de liste publier ! Alors, pour cexemple, ce sera une liste de courses

Imaginons que vous deviez baliser une simple liste de courses pour lintgrer votre sweb personnel. Vous pouvez vous demander ce que vient faire une telle liste sur un site wemais ce nest pas important ici. Nous avons simplement besoin dune raison pour commenc rchir aux listes.

Mettons que, sur la page, nous voulons que la liste ressemble une liste, cest--dire unsuite verticale dlments, chacun plac sur sa ligne propre :

Pommes

Spaghettis

Haricots verts

Lait

Voil une tche qui parat plutt simple, non ? Eh bien, comme pour toutes les autres facettdu dveloppement et de la conception de sites web, il existe diffrentes manires daboder le problme pour arriver un rsultat identique ou comparable. Comme pour tous lexemples cits dans cet ouvrage, je prsenterai les choses dun point de vue XHTML (acrnyme de eXtensible HyperTextMarkup Language), en massurant que les mthodes chosies constituent un balisage valide et quelles adhrent aux standards rdigs par le Wor

Wide Web Consortium (W3C, www.w3.org).Nous pourrions ajouter tout simplement une balise
aprs chaque lment et noarrter l. Nous pouvons aussi exploiter diffrents lments de type liste pour parvenir arsultat souhait. tudions trois possibilits diffrentes et les consquences lies lemplde chacune delles.

1Listes


29/325

10 Se faire plaisir avec le balisage

Cest lheure du quizQuelle est, parmi les solutions suivantes, la meilleure pour baliser une liste de courses ?

Mthode A : le saut de ligne
Pommes
Spaghettis
Haricots verts
Lait

La mthode A est assurment en vigueur, depuis des annes et de manire intensive, sun nombre de pages web qui doit se chiffrer en millions. En fait, je suis certain que nosommes tous coupables davoir recouru cette approche un moment ou un autre. Je mtrompe ? Nous voulons que chaque lment de la liste se trouve sur sa propre ligne et, en insrant un saut de ligne (ici au moyen de la version XHTML valide et autofermante,

nous revenons la ligne aprs chaque lment. Cest peu prs tout leffet produit, et cesemble fonctionner.

Que se passerait-il toutefois si nous souhaitions appliquer la liste de courses un stydiffrent des autres lments de la page ? Si, par exemple, nous voulions que les lmende cette liste aient des liens en rouge au lieu de la couleur bleue par dfaut, ou une tailde police diffrente du reste du texte ? Nous ne pouvons pas vraiment y faire grand-chosNous sommes coincs avec les styles par dfaut que nous avons dnis pour le documedans son ensemble (si toutefois nous en avons dnis) et, vu quil ny a aucune balise encdrant les lments de la liste, nous ne pouvons lui appliquer la moindre rgle CSS.

la ligne, toute !

Supposons galement que nous ayons ajout un lment particulirement long notre lisde courses : "Grosse baguette de pain de chez le boulanger". Suivant lendroit o apparacette liste dans la page, les lments trs longs risquent de se trouver rpartis sur plusieulignes si lespace horizontal est insufsant ou si la fentre du navigateur de lutilisateur etrop troite.

Il serait galement bien de prendre en compte lventualit des utilisateurs malvoyantqui augmentent la taille par dfaut du texte an de gagner en lisibilit. Les lments qunous le pensions, tiendraient parfaitement dans une colonne troite (comme la Figure 1.

sont dsormais parpills de manire imprvisible, comme la Figure 1.2. Tout leffort dconception est ruin lorsque lutilisateur augmente la taille du texte.

Figure 1.1Exemple avec la taille de texte

par daut.


30/325

1Listes

Figure 1.2Le mme exemple, avec une

taille de texte plus grande.

Hum Maintenant, je sais que je suis cens acheter du pain, mais les deux lignes qui suive

cet lment dans la liste ne sont pas trs claires.Un problme similaire pointe le bout de son vilain nez lorsque lon afche des lignes logues sur le petit cran dun appareil tel quun tlphone portable ou un Blackberry. Ltechnophile ultime se promne peut-tre au supermarch avec son priphrique de poch la main plutt que la traditionnelle liste de courses sur papier, mais il nira quand mmpar errer sans but, recherchant dsesprment dans les alles "le boulanger" ramener maison.

Jessaie simplement ici de montrer que la mthode ne prend pas en compte un facteur essetiel : la uidit que peuvent avoir les pages web, suivant des variables que le concepteur la page ne contrle pas.

Mthode B : une puce qui nous fait tiquer

Pommes
Spaghettis
Haricots verts
Lait

Lorsque la balise est utilise, la plupart des navigateurs comptents insrent une pucegauche de chaque lment de la liste. On peut parvenir ce rsultat laide de la mthode en ajoutant tout seul ds que lon souhaite afcher une puce. Toutefois, certains de c

mmes navigateurs comptents refuseront dafcher la puce tant que llment nepas contenu dans lun de ses parents lgitimes, le puissant . Lautre parent de


31/325


La puce constitue, dans une certaine mesure, un apport rel au problme du retour la lignChaque nouvel lment de la liste de courses est signal par une puce qui gure sa gauchLorsquun lment est trop long pour tenir sur une seule ligne, labsence de puce au dbde la seconde ligne doit sufre distinguer ce retour la ligne intempestif dun nouvel lment part entire. Mais, malgr le rsultat dafchage, la mthode B pose un problmeelle nest pas valide.

Validation, SVP

Suivant les spcications XHTML 1.0 du W3C, toute balise ouvrante doit correspondune balise fermante. Par consquent, si nous ouvrons une balise pour chaque lmede la liste de courses sans la refermer correctement, comme dans cet exemple, honte nou

Nous avons simul le retour la ligne automatique, qui survient lorsque lon utilise une lis puces, en ajoutant llment
en n de ligne. Mais il existe une meilleure solutio

Il est protable de shabituer lide dcrire systmatiquement un balisage valide. En no

assurant que notre balisage est valide, nous avons moins nous proccuper des ventueproblmes futurs causs par des balises non refermes ou mal imbriques. Sans comptque, si quelquun dautre doit intervenir sur notre code, il est beaucoup plus facile pour toles participants impliqus de se plonger dans le code et de comprendre exactement de quil retourne.

Assurez-vous dutiliser loutil de validation en ligne du W3C (http://validator.w3.orgpour contrler vos chiers par URI ou par transfert. Sur le long terme, vous ne pourrez qvous en fliciter.

Mthode C : on sapproche !PommesSpaghettisHaricots vertsLait

La mthode C nous rapproche encore un peu dune solution acceptable, mais choue lametablement sur un point potentiellement vident : ce nest toujours pas un balisage valide.

Nous avons referm chaque balise de manire approprie et, du fait quil sagit dlments de niveau bloc, cela nous dispense dutiliser un lment
: chaque lmeest dofce mis sur sa propre ligne. Il nous manque nanmoins la couche externe de cet

structure, un lment conteneur qui indique : "Ce groupe dlments est une liste !"Il est galement important de voir cela sous un angle smantique : la liste est un groudlments qui vont ensemble et, par consquent, ils doivent tre identis comme tels. Dsurcrot, utiliser des balises de liste appropries indique trs clairement au navigateur, logciel ou priphrique : "Ce groupe dlments est une liste !" Cest un exemple qui dmontbien comment le balisage smantique structure les lments pour ce quils sont.


32/325

1Listes

lments de niveau bloc et lments en ligne. Les lments HTML peuvent tre soit de nivebloc, soit de type en ligne. Les lments de niveau bloc dbutent sur leur propre ligne et sont sui

dun saut de ligne, tandis que les lments en ligne sont rendus sur la mme ligne que dautr

lments en ligne. Les lments de niveau bloc peuvent contenir dautres lments de niveau b

aussi bien que des lments en ligne, au contraire des lments en ligne qui peuvent conte

uniquement des lments de type en ligne.Parmi les lments de niveau bloc, on peut citer par exemple les balises , et


33/325


Quest-ce donc qui rend la mthode D si spciale ? Dabord et avant tout, le fait quelest totalement valide. Une liste puces correcte possde un conteneur et chacun ses lments est encadr par des balises ouvrante et fermante. Maintenant, juste moment o vous pensiez que notre objectif ici est uniquement de dmontrer comment tvalide pour le simple plaisir dtre valide, nous allons tudier cet exemple en action.

Comme nous avons correctement balis notre liste de courses, chaque lment apparat sune ligne distincte (du fait que la balise est de niveau bloc) et la plupart des navigateuvisuels ajouteront une puce devant chaque lment, en appliquant au texte un retrait en cde retour la ligne (voir Figure 1.3).

Figure 1.3Rendu par daut dune liste

puces.

Les utilisateurs de Blackberry, tlphones portables et autres priphriques petit crpourront galement afcher la liste de manire similaire et clairement organise. Commnous avons indiqu au priphrique ce que sont les donnes (en loccurrence, une liste),peut choisir la meilleure manire de les afcher en fonction de ses capacits.

Si un lment trop long doit faire lobjet dun retour la ligne, cause dune taille de textrop grande ou dune fentre de navigateur trop troite, les retours la ligne se verront appquer un retrait pour tre aligns avec le texte de la premire ligne. Les diffrents lments la liste seront donc parfaitement clairs et identiables, en toutes circonstances.

En rsumMaintenant que jai dissqu chacune des mthodes possibles, rsumons rapidement ce q

jai dcouvert sur chacune delles :

Mthode A :

Elle ne permet pas dappliquer une mise en forme spcique la liste.

Elle peut susciter la confusion lorsque des lments trop longs sont renvoys la ligndans une colonne troite ou un priphrique petit cran.

Elle manque de sens (au niveau smantique).

Mthode B :

Ajouter une puce aide signaler un nouvel lment, mais certains navigateurs peuverefuser de lafcher sans la prsence de la balise parent .

Labsence de conteneur ou de balise fermante se traduit par une difcu mettre en forme.

Elle nest pas valide.


34/325

1Listes

Mthode C :

Utiliser la balise fermante pargne le besoin dlments
.

Oublier llment rend la mise en forme de cette liste particulire plus difcile.

Elle est invalide.

Mthode D :

Elle est valide ! Elle donne un sens au niveau smantique et une structure. Des puces safchent gauche de chaque lment dans la plupart des navigateurs. Sur la plupart des navigateurs, le retour la ligne fait lobjet dun retrait. Elle est plus facile mettre en forme individuellement laide de CSS.

Vous pouvez constater quil est possible dapprendre beaucoup dune question en appareninnocente. Mme si vous utilisez dj exclusivement la mthode D sur toutes vos page

il est bon de savoir pourquoi vous faites les choses de cette manire. Nous continueronsexplorer ces questions de type "pourquoi" tout au long de cet ouvrage, an de vous fourntoutes les munitions ncessaires pour faire le meilleur choix au bon moment.

Pour aller plus loinPour aller plus loin, jetons un il quelques mthodes diffrentes pour tirer parti de notliste de courses balise, en utilisant les CSS pour la mettre en forme de diffrentes manireNous nous dbarrasserons des mises en forme par dfaut et ajouterons des puces personalises, puis nous mettrons la liste " plat" pour vous donner quelques ides de barre navigation.

Dompter la puce

"Mais je dteste lallure des puces sur ma liste de courses, alors je vais men tenir cbalises
."

Point nest besoin de revenir vos bonnes vieilles habitudes : nous pouvons continuerutiliser notre liste puces structure et laisser aux CSS le soin de supprimer les puces les retraits (si cest ce que vous recherchez). La cl ici est de conserver la liste son aspestructur et de laisser les CSS grer les dtails de prsentation.

Commenons par ajouter une rgle CSS qui dsactive les puces :

ul {list-style: none;}

dont vous pouvez observer le rsultat la Figure 1.4.


35/325


Figure 1.4Une liste o les puces

sont dsactives.

Dsactivons maintenant les retraits. Par dfaut, un espace plus ou moins large est ajoutla gauche de toute liste puces. Mais ne vous inquitez pas : nous pouvons le supprimernous le souhaitons :

ul {list-style: none;padding-let: 0;}

Le rsultat est visible la Figure 1.5.

Figure 1.5Une liste sans puce et avec

dsactivation des retraits.

Si lexemple de la Figure 1.5 semble avoir t balis laide de quelques lments


36/325

1Listes

Pour contourner ce problme dalignement vertical soulev par list-style-image daquelques navigateurs populaires, je prfre recourir une mthode alternative qui consistednir limage comme arrire-plan pour chaque lment .

Commenons par dsactiver lutilisation des puces par dfaut, avant dajouter notre prop

image de fond :ul {

list-style: none;}

li {background: url(joliepuce.gif) no-repeat 0 50%;padding-left: 17px;}

no-repeat indique au navigateur quil ne doit pas afcher limage en mosaque (ce qui eson comportement par dfaut), tandis que les nombres 0 50% indiquent au navigateur

positionner larrire-plan 0 pixel de la gauche et 50 % du bord suprieur, ce qui revieessentiellement centrer verticalement joliepuce.gif. Nous aurions galement pu spcier des positionnements absolus, en pixels, pour les deux indications. 0 6px aurait potionn la puce 0 pixel du bord gauche et 6 pixels du bord suprieur.

Nous avons galement ajout un espace de 17 pixels gauche des lments de la liste, manire que notre image de 15 pixels de large sur 5 pixels de haut apparaisse compltemeet quil y ait un peu despace, sans le moindre recouvrement du texte. Cette valeur peut tajuste suivant la largeur de limage que vous utilisez en guise de puce (voir Figure 1.6).

Figure 1.6

Une liste avec des pucespersonnalises.

Des listes pour naviguer

Jai prsent sur mon site personnel (www.simplebits.com) quelques mthodes pour tranformer des listes puces en barres de navigation horizontale, ce qui permet de crer un effdonglets au moyen de code XHTML structur ordinaire, exactement comme notre liste courses dexemple.

Ici, par exemple, nous prendrons la liste des courses et nous la transformerons en barre navigation pour un supermarch en ligne (qui se trouve ne vendre que trs peu darticles)


37/325


Dans le cas prsent, nous voulons que la barre de navigation soit horizontale et quil y aun moyen effectif de surligner un lment lorsque la souris passe dessus ou quil est sletionn, ce qui cre leffet donglets.

Tout dabord, nous allons ajouter un attribut id notre liste an de pouvoir lui appliquer d

styles CSS spciques. Nous allons galement transformer chaque article de la liste en lie

PommesSpaghettisHaricots vertsLait

Crons maintenant la CSS daccompagnement :

#minionglets {margin: 0;padding: 0 0 20px 10px;border-bottom: 1px solid #696;}

#minionglets li {margin: 0;padding: 0;display: inline;list-style-type: none;}

Ici, jai essentiellement dsactiv les puces et le retrait par dfaut. Nous avons galememis en place la premire tape de transformation de la liste en la passant lhorizontalplutt qu la verticale, laide de lattribut display: inline (que lon peut traduire pafchage: en ligne). Nous avons aussi ajout une bordure infrieure an de mieux dnles groupes de liens.

La seconde tape de transformation consiste faire otter nos liens gauche. Nous allogalement styler quelque peu les hyperliens et ajouter des espacements et des marges.



#minionglets a {foat: let;


38/325

1Listes

line-height: 14px;ont-weight: bold;margin: 0 10px 4px 10px;text-decoration: none;color: #9c9;}

Ici nous indiquons tous les lments a de notre liste de otter gauche (oat: left), qui les force saligner en rang horizontal. Nous avons galement ajout un peu de couleupass les liens en gras et dsactiv le soulignement.

Maintenant, crons une bordure de type onglet, sous les liens qui sont activs lorsque souris passe dessus ou lorsquils sont slectionns :



#minionglets a {oat: left;line-height: 14px;font-weight: bold;margin: 0 10px 4px 10px;text-decoration: none;

color: #9c9;}

#minionglets a.active, #minionglets a:hover {border-bottom: 4px solid #696;padding-bottom: 2px;color: #363;}

#minionglets a:hover {color: #696;}

Pour le surlignage et le survol, nous avons ajout une bordure infrieure de 4 pixels de ha

llment survol ou slectionn, an de crer leffet donglet. On peut galememaintenir le surlignage des onglets en ajoutant class="active" au lien href de notchoix :

Spaghettis


39/325


Cette classe active partage les rgles CSS de a:hover.

La Figure 1.7 illustre la barre de navigation rsultante.

Figure 1.7

Barre de navigation rsultanteavec les mini-onglets.

Jai utilis cette mthode de navigation pour une incarnation antrieure de mon site wepersonnel (www.simplebits.com), mais vous pouvez galement la voir en action (ainsi qle code) chezListamatic, un site de ressources pour les listes mises en forme laide de CS(http://css.maxdesign.com.au/ listamatic/horizontal06.htm).

Moyennant quelques ajustements sur les marges et les bordures, vous pouvez crer un larventail deffets de type onglet. Notez que nous sommes parvenus jusquici sans utilisla moindre image ou le moindre code JavaScript, tout en gardant notre liste de coursXHTML lmentaire. Bravo nous !

Formes de mini-onglets

Pour un rsultat qui se distingue un peu des bordures assez carres et ordinaires obtenuavec les CSS, quelques modications mineures nous permettent dadopter des formes upeu plus sympathiques et de crer ainsi des effets de navigation intressants.

laide de la mme liste puces, nous pouvons construire une CSS analogue celle lexemple prcdent :

#minionglets {

margin: 0;padding: 0 0 20px 10px;border-bottom: 1px solid #9FB1BC;}


#minionglets a {oat: left;line-height: 14px;font-weight: bold;padding: 0 12px 6px 12px;text-decoration: none;color: #708491;}


40/325

2Listes

#minionglets a.active, #minionglets a:hover {color: #000;background: url(onglet_pyra.gif) no-repeat bottom center;}

Cette CSS est certainement trs comparable lexemple prcdent. Les diffrences pri

cipales ici sont labsence de la bordure infrieure (border-bottom) qui crait longlet 4 pixels de haut, et lajout dune unique image darrire-plan (background-image) potionne en bas et au centre (bottom center) de chaque lment pour tous les tats de survet de slection (voir Figure 1.8).

Figure 1.8Une barre de navigation avec

mini-onglets constitus par des

ormes en images de ond.

Lastuce ici consiste choisir une image sufsamment troite an quelle tienne sous ll

ment de navigation le plus petit. Vous garantissez ainsi quune seule image sera ncessaipour surligner tous vos liens de navigation, indpendamment des largeurs de caractrvariables. Naturellement, au regard des formes que vous pouvez utiliser pour vos projets, lpossibilits sont innies (voir Figure 1.9).

Figure 1.9Quelques autres ormes

possibles.

Les onglets illustrs la Figure 1.9 sont disponibles dans les exemples de code source founis avec ce livre, sur le site de lditeur www.pearson.fr.

Pour obtenir le code source dexemples de mini-onglets similaires et fonctionnels, consutez www.simplebits.com/work > tips. Et si vous recherchez des solutions encore plcratives pour mettre en forme des listes, jetez un il larticle Taming Lists (Domptles listes) de Mark Newhouse, dans le webzineA List Apart(www.alistapart.com/articletaminglists/).


41/325


42/325

Les titres sont non seulement un lment indispensable toute page web mais, correctemebaliss, ils peuvent tre un outil puissant au service de la structure et de laccessibilit dusite.

Visuellement, un titre de page se traduit gnralement par une taille de fonte plus levet, ventuellement, une couleur ou une police diffrentes du corps de texte. Un titre dpage "dcrit brivement le thme de la section quil introduit", suivant les termes du W3Cdlimitant ainsi les diffrentes sections susceptibles dapparatre dans une page.

Comment devons-nous donc baliser un titre de page pour tirer le meilleur parti des informtions que nous prsentons ? Dans ce chapitre, nous allons explorer quelques mthodes fam

lires de gestion des titres, en essayant de trouver celle qui nous offrira le meilleur retosur investissement. Ensuite, nous adopterons la meilleure mthode et nous lui donnerons dstyle grce quelques techniques et astuces CSS.

Quelle est la meilleure manire de baliser le titredun document ?

Pour rpondre cette question, imaginons que nous placions le titre du document en tte la page. Nous allons tudier trois manires de parvenir des rsultats similaires.

Mthode A : du sens ?

Titre de Page Super Cool

Bien que la balise puisse tre un lment pratique dans certaines circonstances, ena gure de sens pour les titres de page. Lun des avantages de cette mthode est que nopourrions ajouter une rgle CSS pour la classe de titre an de faire apparatre le texte commun titre.

.heading{font-size: 24px;

font-weight: bold;color: blue;}

Maintenant, tous les intituls baliss par cette classe heading apparatront en grande tailen gras et en bleu. Formidable, non ? Mais que se passe-t-il si quelquun afche la pagelaide dun navigateur ou dun priphrique ne grant pas les CSS ?

2Titres


43/325


Que se passerait-il, par exemple, si nous placions cette rgle CSS dans une feuille de styexterne non visible pour les vieilles versions des navigateurs ou si un lecteur dcran lisala page pour une personne malvoyante ? Un utilisateur consultant notre page laide dlune ou lautre solution ne verrait (ou nentendrait) rien qui diffre du texte normal depage.

Si class="heading" ajoute un peu de sens llment, la balise nest quune envloppe gnrique libre de tout style par dfaut dans la majorit des navigateurs.

Les moteurs de recherche parcourant la page ne sarrteraient pas sur llment


44/325

2Titres

Mthode C : la forme et le fond

Titre de Page Super Cool

Ah, ces bonnes vieilles balises de titres. Elles sont l depuis tout ce temps, mais bon nomb

de concepteurs de sites web ne les ont pas encore adoptes pleinement de manire cohrente. Lorsquils sont utiliss correctement, les titres de pages peuvent ancrer le contenu dla page en fournissant une structure souple, facile indexer et styler.

En termes de balisage, on ne peut quaimer leur simplicit. Il est inutile dajouter dlments supplmentaires et lon pourrait mme souligner les quelques octets que lon cnomise les prfrer aux deux options prcdentes. Cest peut-tre ngligeable, mais moindre bit compte.

Les balises traduisent les six niveaux de titres, du plus important () moins important (). Par nature, elles sont de niveau bloc et ne ncessitent donc p

dlment supplmentaire pour tre places sur une ligne propre. Simple et efcace : ceexactement loutil dont nous avons besoin.

Faciles styler

Comme llment que nous employons na quun seul usage (contrairement aux lments ou

qui sont susceptibles dapparatre un peu partout dans la page), on peut lappliquer diffrents styles laide de CSS. Nous aborderons ce point un peu plus loin dace chapitre, la section Pour aller plus loin.

Plus important encore, notons que, sans application du moindre style, un lment de typtitre apparat manifestement comme un titre ! Les navigateurs en mode graphique adopte

pour le rendu de llment une fonte de grande taille, en gras. Afcher la page sansmoindre style fait apparatre la structure du document exactement comme elle a t pensavec les lments de titres appropris traduisant du sens plutt que de simples instructiode prsentation (voir Figure 2.1).

Les lecteurs dcran, les ordinateurs de poche, les tlphones portables et autres navigateuen mode graphique ou texte sauront galement que faire dun lment de titre : ils le grerocorrectement et le traiteront avec plus dimportance que le texte normal de la page. Si loutilise un lment , les navigateurs qui ne peuvent pas grer les CSS le prsenterocomme un lment ne revtant aucune importance particulire.

Mauvais got par dfautHistoriquement, lune des raisons pour lesquelles les concepteurs de sites web vitaiedutiliser les lments de titres tait peut-tre leur apparence bestiale lorsquils safchesans le moindre style, avec le paramtrage par dfaut. Alternativement, certains ont cho


45/325


dviter ou en raison de leur grande taille par dfaut, prfrant plutt des titres niveaux infrieurs an dobtenir une taille plus raisonnable.

Figure 2.1Exemple dafchage sans style dune page utilisant les balises de titres.

Soulignons toutefois que, laide des CSS, nous pouvons facilement modier lapparende ces titres notre guise. Un lment , par exemple, na pas tre un panneau dafchage gant occupant la moiti de lcran de lutilisateur. Un peu plus loin dans ce chapitr

je dmontrerai combien il est simple de styler des titres laide de CSS pour, je lesprattnuer un peu la crainte de lnorme balise .

Optimis pour les moteurs de recherche

Ce point est fondamental. Les moteurs de recherche aiment les lments de titres. Invesement, un lment ou un simple paragraphe pass en gras a moins de sens po

eux. Baliser correctement vos titres laide des lments ne demande que pdefforts et peut nanmoins faciliter lindexation de vos pages par les moteurs de recherchce qui, en n de compte, conduit aussi davantage de personnes consulter votre site.

Les robots des moteurs de recherche accordent une importance particulire aux lmende titres, lesquels sont susceptibles dintgrer des mots-cls. Tout comme ils indexent lbalises et , ils tourneront ensuite leur attention vers les lments de titr


46/325

2Titres

qui peuvent apparatre plus loin dans la page. Si vous ne les utilisez pas, les mots-cls quencadrent nauront pas autant de valeur et pourront mme tre ngligs.

Ainsi don

Documents

Bonnes Pratiques Des Standards Du Web