HTML5 CSS

HTML5etCSS3
Matrisez les standards des applications Web
LucVANLANCKER
Rsum
Ce livre sur le HTML5 et CSS3 s'adresse toute personne appele dvelopper, mettre en place, faire vivre un site Web. En effet, pour dbuter mais surtout pour progresser dans la conception de sites, il faut invitablement passer par une bonne comprhension et une bonne matrise du code source des applications Web. Le livre est conu comme un rel outil de formation, pdagogique de la premire la dernire page, abondamment illustr d'exemples et de captures d'cran et constamment l'afft des lments rellement pratiques pour le webmestre. Sont ainsi passs en revue le HTML (dans sa dernire version et ses nombreuses nouveauts), les feuilles de style avec l'avance spectaculaire des CSS3 en termes de prsentation des pages Web et quelques lments de JavaScript Cet ouvrage n'est surtout pas une encyclopdie exhaustive de ces diffrentes techniques mais un parcours structur de celles-ci. Il fournit aux concepteurs dbutants, voire plus confirms, les rgles rigoureuses mais essentielles de la conception professionnelle d'un site Web. En effet, l'auteur s'est attach encourager l'laboration d'un code respectueux des prescriptions du W3C et particulirement de la sparation du contenu (HTML) et de la prsentation (feuilles de style CSS) comme le prconise plus que jamais le HTML5. Les nombreuses nouveauts abordes ne sont prises en compte que par les dernires versions des navigateurs (Internet Explorer 9, Firefox 3.6 et 4, Google Chrome ou Safari) mais l'auteur a t particulirement attentif fournir un code compatible avec des navigateurs moins volus afin de pouvoir bnficier ds prsent de ce pas important dans la conception des applications Web. Les nombreux exemples du livre sont en tlchargement sur www.editions-eni.fr. Pour les lecteurs dsirant reproduire les exemples l'identique, les images et autres complments y sont galement leur disposition. Les chapitres du livre : Avant-propos - Prsentation du Htlm5 - Premiers lments de feuilles de style - Le texte - La structuration du document - Les liens - Les tableaux Les images et arrires-plans - Les balises smantiques et dorganisation - Les formulaires - Le multimdia - Le dessin 2D - La golocalisation Prsentation des feuilles de style - Notions de base des CSS - La police de caractres - Le texte en CSS - Les listes et les tableaux - Les arrireplans - Les proprits de bote - Les pseudo-classes - Les proprits daffichage - Les proprits dimpression - Les feuilles de style CSS3
L'auteur
Ds les dbuts dInternet, Luc Van Lancker, enthousiasm par lide de communication universelle que vhiculait ce concept, sest compltement investi dans ce domaine. C'est un formateur passionn, trs au fait des nouvelles technologies lies au Web et grand pdagogue.
Ce livre numrique a t conu et est diffus dans le respect des droits dauteur. Toutes les marques cites ont t dposes par leur diteur respectif. La loi du 11 Mars 1957 nautorisant aux termes des alinas 2 et 3 de larticle 41, dune part, que les copies ou reproductions strictement rserves lusage priv du copiste et non destines une utilisation collective, et, dautre part, que les analyses et les courtes citations dans un but dexemple et dillustration, toute reprsentation ou reproduction intgrale, ou partielle, faite sans le consentement de lauteur ou de ses ayants droit ou ayant cause, est illicite (alina 1er de larticle 40). Cette reprsentation ou reproduction, par quelque procd que ce soit, constituerait donc une contrefaon sanctionne par les articles 425 et suivants du Code Pnal. Copyright Editions ENI Ce livre numrique intgre plusieurs mesures de protection dont un marquage li votre identifiant visible sur les principales images.
ENI Editions - All rights reserved - Algeria Educ
- 1-
Avantpropos
LcrituredecelivresurleHtml5etleCSS3atuneentreprisetrsmotivante.LeHtmlnavaitpasconnudvolution majeure depuis 1998 avec le Html 4.0. Une ternit lchelle du dveloppement du Web et dInternet ! Il est important dvaluer les volutions et apports de cette nouvelle version du langage qui est la base de cet outil devenuquotidienquestleWeb.Deleurct,lesfeuillesdestyleCSS3constituentunerelleavanceauniveaudu graphisme des pages avec, par exemple, les bords arrondis, la transparence des images, les ombres ou la typographie. Cet ouvrage sur le Html5 et les CSS3 se veut avant tout un ouvrage structur et formatif plutt quune exploration exhaustivedesnouveautsapportesparcesdeuxtechnologies.Ilvisedeuxpublicsbiendistincts :
q
Les dbutants pourront apprhender les bases du langage source des pages de la toile au fil des chapitres grcedenombreuxexemplescomplets,illustrschaquefoispardescapturesdcranetlapossibilitdeles visionnersurleurcran,vialespacedetlchargementconsacrcetouvrage.Ilspourrontainsientamerleur apprentissage de la conception de pages Web par la dernire volution du Html qui est dores et dj oprationnelle dans de nombreux navigateurs de la dernire gnration et qui sera le standard des annes futures. Ce livre sadresse aussi aux concepteurs familiariss au Html et qui souhaitent dcouvrir les apports et nouveauts du Html5 et des CSS3. Les diffrences par rapport au Html 4.0, parfois subtiles mais dterminantes, sont mises en vidence tout au long de louvrage. Ils pourront aussi dcouvrir les relles nouveauts du Html5 avec les chapitres ddis aux nouveaux champs de formulaires, au dessin 2D, aux nouvellesbalisesaudioetvidoetlentreduJavaScriptavec,parexemple,lagolocalisationdelutilisateur. Limportant chapitre sur les CSS3 les convaincra de la rvolution quelles vont apporter dans le design de la page,lesdbarrassantdupassageobligpardesprogrammesgraphiques.
Cet ouvrage marque galement un tournant dans lapprentissage du code source des pages de la toile. En effet, le Html5 fait table rase de tout aspect de prsentation pour se consacrer exclusivement la structure du document. Il nest donc plus possible en Html5 daligner du texte ou autres lments ou de dessiner des bordures de tableaux. Terminaussilajoutdecouleurautexteouenarrireplan.LeHtml5sedclinedsormaisdefaonaustre,ennoiret blanc ! Tous les lments de prsentation doivent obligatoirement tre repris par les feuilles de style. Il nest plus possibledeconcevoirunapprentissagedemaniretraditionnelleavecunepartieexclusivementconsacreauHtmlet une seconde partie distincte pour les feuilles de style. Ces deux lments sont maintenant intimement lis. Ainsi, il nousasemblutile,voireindispensable,dintroduire ds lapprentissageduHtmldeslmentsbasiquesrelatifsaux feuillesdestyle.Celapermettralapprenantdeconcevoirsespremiresapplicationsdunemanireplusralisteet plusattrayante. Entrons plus profondment dans le dtail des chapitres. La partie Html dbute par les lments basiques et traditionnelsdelapprentissageducodesource.LeHtml5estenpremierlieuunevolutionduHtml4.0.Ilrestedonc un langage de balises. Les premiers lments de lapprentissage progressif concernent le texte, la structuration du document avec les titres et les listes, les tableaux, les images et leur insertion, sans oublier ce qui fait lessencedu langageHtmlcestdirelesliens.UnesriedechapitresabordeensuitelesnouveautsintroduitesparleHtml5.
q
Lesnouvellesbalisessmantiquesquipermettentdorganiserlecodesourcedesapplicationsafindenassurer unemeilleurelisibilit. Ilfautbienavouerquelesformulairestraditionnelscommelaligneoulazonedetexte,lesboutonsradio, choixmultiplesouautresboutonsdecommandesentranentunelassitudecertainedanslaspectvisueldela page.LesapportsduHtml5vontrvolutionnerlesformulairesavecdeslignesdetexteavecsuggestions,des calendriers, des compteurs numriques, des curseurs, une validation sans passer par le JavaScript et bien dautressurprisesdcouvrirdanslechapitrequileurestconsacr. Lesnouvellesbalisesaudioetvidopermettentdsormaisdeliredefaonnativelesfichiersmultimdiasans devoirpasserpardespluginsdivers,souventsourcesdecomplications. Le dessin 2D ouvre de nouvelles perspectives car il est dsormais possible, par exemple, dajouter des graphiquesdirectementparlecode,sanspasserpardescapturesdcrandeprogrammescommeExcel. Pour terminer, il fallait souligner que le Html5 marque aussi lintroduction du JavaScript comme un acteur privilgi dans la conception des applications Web. Ce dernier point est illustr par la golocalisation de linternaute.
PoursuivonsaveclapartieddieauxfeuillesdestyleCSS.Dansunapprentissageprogressifetstructur,ilnestpas possibledignorer les dsormais lmentaires CSS1 et CSS2. Plusieurs chapitres sont ainsi consacrs aux feuilles de style relatives la police de caractres, au texte, aux listes et tableaux, la couleur, aux marges intrieures et extrieures,auxpseudoclassesetauxfeuillesdestylerelativeslaffichageoulimpression.Cettepartiesetermine
- 1-
parlesspcificationsCSS3quivontprofondmentmodifierlaspectvisueldelanavigationsurlatoile.Cechapitrene manquera pas dintresser ceux qui, de prs ou de loin, prennent en charge laspect graphique des sites. Parmi les apportsdecesfeuillesdestyleCSS3,citons :
q
Lesbordsarrondisquipermettentdesortirdelaprsentationrectangulaireetangulairedesdivisions. Lesombresquelonpeutapporterautexteouauximagessanspasserparuneapplicationgraphique. Lespolicesqueleconcepteurpourraenfinchoisirlibrement,marquantainsilintroductiontantattenduedela typographiedanslaconceptiondespagesweb. Laprsentationduncontenutextuelencolonnes. Lesborduresimages. Lesarrireplansmultiples. Lesdgradsdecouleurs. Lapossibilitdejouersurlopacitoulatransparencedlmentscommelesimages.
nen pas douter, cet ouvrage est dense mais prsent dans un langage que nous avons voulu clair, formatif et pdagogique. En tant quauteur, je dois avouer que jai pris un norme plaisir crire ce livre sur le Html5 et les CSS3. Je fais le souhaitqueceplaisirsoitpartagavecleslecteurs.
- 2-
BrefhistoriqueduHtml5
Nousdbutonscethistoriqueen1998aveclafinalisationdelaspcificationHtml4.0.Mispartunelgrervisionen 1999 avec le Html 4.01, plus rien de neuf lhorizon de ce langage premier du Web. Le W3C (World Wide Web Consortium), lorganismequigrelesstandardsdcrituresurlatoile,natilpasannonclpoquequeleHtmldans saversion4.0neconnatraitlavenirplusdedveloppement,enbrefqueleHtmltaitmort? LeW3Cavaitaussiditen1998leXML(eXtensibleMarkupLanguageou,enfranais,lelangageextensibledebalises) pourgrerdefaonstructuredesdonnesdetypetexte,laspectextensiblepermettantlutilisateurdedfinirson propre langage avec ses lments distincts. Le W3C recommandait lpoque fortement le XML pour exprimer des langagesdebalisagesspcifiques. UnedespremiresapplicationsconcrtesduXMLfutlareformulationduHtml4.0selonlasyntaxestricteetformaliste du XML. Le Xhtml 1.0 appart ainsi en 2000. Si les dveloppeurs ont unanimement salu la rigueur que le Xhtml apportaitlcritureducode,ilfautbienconstaterquelamigrationversleXhtmlnapasremportlesuccssouhaitet quebonnombredeconcepteurssontrestsfidlesauHtml4.0transitional,plussouple. Trsrapidement,leW3CmitenchantierlambitieuxprojetduXhtml2.0quidevaitfairetablerasedupassenmatire depublicationsurlatoile.CettepositioninduisaitqueleXhtml2.0neseraitpasrtrocompatibleaveccequiexistait lpoqueetdoncavecleHtml. Cette absence de rtrocompatibilit a engendr un mcontentement certain auprs des firmes qui dveloppaient les navigateurs. Ce qui eut pour consquence la cration dun groupe dissident, le WHATWG (Web Hypertext Application Technology WorkingGroup).Cegroupedetravailseprsentenotammentcommeunerponselalenteurdudveloppementdes standards par le W3C et au caractre trop ferm de son processus interne dlaboration de spcifications. Il se compose loriginedereprsentantsdefirmescommeMozilla,OperaetAppledontlesnavigateursFirefox,Operaet Safarisontbienconnus.IlsfurentrejointsensuiteparGoogle.Leurpositiontaitdiamtralementopposecelledu Xhtml 2.0 en travaillant de faon pragmatique sur base des implmentations actuelles et donc du Html 4.0. Leurs premires ralisations portaient sur les Web Forms 2.0 pour renouveler les formulaires et le nouveau concept de publicationsurleweb,WebApps1.0soitdesapplicationsWeb. Paralllement le Hhtml 2.0, mme si un brouillon (working draft) parat en juillet 2006, connat un dveloppement particulirementlaborieuxetlarumeurrapportedenombreusesdissensionsauseindecegroupedetravail.Enoutre, lesdiffrentsnavigateursprcitsboudaientdlibrmentleHtml2.0. Il apparaissait clairement que le Xhtml 2.0 connaissait de gros problmes. Sir Tim BernersLee, inventeur du Web et prsident du W3C, dcida fin 2006, de rouvrir un groupe de travail sur le Html qui, de faon pragmatique, devait reprendrelasuitedestravauxduWHATWG.Ainsi,ilyeutpendanttoutuntemps,legroupedetravailsurleXhtml2.0 etceluisurleHtml5.Cedernierpubliale22janvier2008,unpremierbrouillondetravailquiaconnudenombreuses volutionsdepuis. MaislesjoursduXhtml2.0taientcompts.Fin2009,lemmeSirTimBernersLeeannonceladissolutiondugroupede travailsurleXhtml2.0etlabandondfinitifdecedernier. On annonce pour 2012, la candidate recommandation du Html5 pour 2012 et, tant donn lampleur des nouveauts annonces,larecommandationfinalepour2022. LannonceduHtml5afaitgrandbruit(unbuzzdanslevocabulairemoderne).Cetintrtsestrapidementconcrtis diffrentsniveaux.Googleaincorportrsrapidement,soitpartirdelaversion5deChromedeslmentsduHtml5. SesautrescomparsesduWHATWGgalementaveclesversionsrcentesdeFirefox,SafarietOpera.MmeMicrosoft, pourtantsouventlatraneenmatiredadoptiondenouveautsetdestandardsincorporeleHtml5danslaversion9 dInternetExplorer.Deleurct,lessmartphonesadoptentgalementlestandardHtml5,quecesoitAppleavecson iPhone,RIMavecsonBlackBerry,GoogleavecsonGooglePhone,etc.Estceencoreunevolution?Nestcepasune rvolution? Paralllement, une reformulation du Html5 selon les rgles et la syntaxe du XML est en cours dlaboration. Celleci portelenomdeXhtml5. DecettegestationmouvementeduHtml5,onretiendra:
q
QuelonneparleplusdepagesWebmaisduconceptpluslargedapplicationsWeb. QueleHtml5estunevolution(importantecertes)duHtml4.0. QueleHtml5atconudirectementparlesnavigateurslesplusinnovantsdumarchcommeFirefox,Safari OpraetGoogle.CequiestlagarantieduneadoptionrapidedesstandardsduHtml5. QuelonpeutsattendreavecleHtml5degrandschangementsconcernantlesformulaires(voirlesWebForms 2.0). Quaprsplusdunedcenniesansrellesnouveauts,leHtml5correspondunrelbesoindesconcepteurs

ENI Editions - All rights reserved - Algeria Educ - 1-
pourrenouvelerlinterfacedesapplicationsWeb.
- 2-
LignesdeforceduHtml5
AvantdeparcourirlesnouveautsduHtml5,dgageonsquelqueslignesdeforcedecettenouvelleversiondulangage Html.
q
LeHtml5estunevolutionduHtml.Ilenreprendlesgrandsprincipes,quitteenamliorercertainsaspects.Il estconupourassurerunertrocompatibilitaveccequiatfaitjusquprsent,entermesdepublication surleWeb. Mme si le codage est moins formaliste que le Xhtml5, lexigence dun code propre, respectueux des rgles fondamentalesdubalisagecontinuedtredactualit.
Le principe de la sparation du contenu et de la prsentation reste de mise et se voit mme renforc. Labandondetouteunesriedebalisesetdattributsdeprsentation(pointFduprsentchapitre)enestla meilleure preuve. Les feuilles de style CSS sont des partenaires indissociables du Html5. Celuici espre quavec la monte en puissance des nouvelles feuilles de style CSS3, linterface de lutilisateur soit compltementtransformedanslesannesvenir. La simplification du code et le dsir dviter toutes complications souvent inutiles sont deux principes suivis dansllaborationduHtml5.Onretrouvecettesimplificationetcepragmatismeparexemple,dansunnouveau doctypesimplifietuncodeHtmldpouilldetoutaspectdeprsentation.
Unechasseauxpluginsquiviennentencombrerlecodeetcompliquerlatchedesconcepteurs,parleurprise enchargedirectedanslenavigateur.Lesnouvellesbalisesaudioetvidoensontunebelleillustration. La reconnaissance du JavaScript comme partenaire de la publication sur la toile. On pense ainsi aux scripts classiques pour vrifier lencodage obligatoire ou la validit dune adresse de courrier lectronique dans les formulaires. Le Html5 vitera ces encodages redondants par la prise en charge de faon native par les navigateurs de ces fonctions. Autre exemple, le codage du dessin 2D et bientt 3D (balise <canvas>) est beaucoupplusprocheduJavaScriptquedunlangagedebalise. Le Html5 devient galement une plateforme dinterfaces dapplications (APIs) intgrant des fonctionnalits complexescommelagolocalisation,lditionenligneouleglisserdposer(drag/drop).
- 1-
LesnouveautsduHtml5
LesnouveautsduHtml5etsurtoutdutrinmeduconcept"Html5+CSS3+applicationsJavaScript"sontnombreuses. Html5
q
Unnouveaudoctypesimplifietunifi. Lasuppressiondesbalisesetattributsdeprsentation. Denouvellesbalisessmantiquesoudorganisation. Denouvellesbalisesaudioetvidoquinencessitentpluslappeldespluginsddis. Ledessin2Detbientt3Dparlanouvellebalise<canvas>. Uneprofusiondeformulairesnovateurscommelescurseursoulescalendriersetlapriseenchargedefaon nativeparlesnavigateursdelavalidationdesdonnes. Etc.
Lobjectif premier de cet ouvrage est bien entendu ltude dtaille de lhritage du Html 4.0 et des nouveauts du Html5. Il faut noter que ce dernier est dj bien implant dans les navigateurs de la dernire gnration. LimplantationactuelleduHtml5permetdjdeledcouvriretdelutiliser.Ilfautcependantnoterquelintgrationdu Html5nestpasencorecomplte.Denouveauxapportssontencoreattendus,particulirementencequiconcerneles formulaires. CSS3
q
Denouveauxslecteurs. Lesbordsarrondis. Lesborduresimages. LespolicespersonnalisespermettantlatypographiedetrouverenfinsaplacedanslesinterfacesWeb. Laprsentationenplusieurscolonnesduntexte. Lesombressurletextecommesurleslments. Lesdgradsdecouleur. Lesarrireplansmultiples. Lopacitoulatransparence. Lestransformations. Lestransitions(sansJavaScript).
CesnouvellesspcificationsCSS3sontdjdisponiblesdanslesversionsrcentesdesnavigateursetenparticulier danslesnavigateursdenotretude(voirlasection"Lesnavigateursdenotretude"dansleprsentchapitre).Ilne fait aucun doute que les CSS3 vont rvolutionner la faon de concevoir et dexploiter les interfaces Web dans les prochainsmoisoulesprochainesannes. LesapplicationsJsAPI
- 1-
Lagolocalisationquipermetdelocaliser(avecsapermission)lutilisateurparsescoordonnesdelongitudeet latitude. DessupercookiesavecWebStoragequipermettraunstockageplusimportantdedonnesdanslenavigateur. LutilisationdesapplicationsWebhorsconnexionaprslamiseencachedesressourcesncessaires. LesWorkersquipeuventexcuterdestchesdefondenparallleduprogrammeJavaScriptprincipaldansun environnementtotalementspardelapage. LesWebsocketsquipermettentdtablirunecommunicationbidirectionnelleasynchroneentrelenavigateuret leserveur. Leglisserdposer(drag/drop)ennatifdanslenavigateur. Lattribut ContentEditable qui permet ldition en ligne du contenu dun lment. Il fait apparatre un diteur WYSIWYG basique qui permet donc dditer directement le contenu dans la page. Toutes les modifications apportesparlutilisateurpourronttretraiteslafindeldition. Etc.
CesapplicationsdpassentlargementlecadredecetouvrageddilapprentissageduHtml5.Certainessontdj implmentesdanslesnavigateursrcents,dautresnon.Nousaborderonscependantbrivementlagolocalisation dansunchapitrepoursonctspectaculaireetintrigant. Uncertainnombredecesfonctionssontdjreprisesdanslescadriciels(framework)JavaScriptcommeDojoetjQuery.
- 2-
LeHtml5estunlangagedebalises
DignesuccesseurdesversionsprcdentesduHtmletduHtml4.0enparticulier,leHtml5esttoujoursunlangagede balises.
1.Lesbalises
Les balises, aussi appeles lments, sont des commandes lintention du navigateur et saisies entre des signes infrieur(<)etsuprieur(>).Ainsiunebalisescrit<balise>. Enrglegnrale,toutebalisedouverturecorrespondunebalisedefermeturequimarquelafindelacommande annonceparlabalisedouverture.Labalisedefermeturereprendlemmenoncquelabalisedouverturemaisce dernier est prcd dune barre oblique (/). Ainsi la balise douverture <balise> correspondrait la balise de fermeture</balise>.Lasyntaxedunebaliseestalors: <balise> </balise> Pourcomprendrelemodedefonctionnementdesbalises,jevousproposeletextesuivant: Ilest<gras>important</gras>dapprendrelelangage<italique>Html5</italique>! Cecipeutsecomprendredecettefaon:
q
crire"Ilest"defaonnormalepuisqueriennestspcifi, ensuitecrirelemot(etuniquementcemot)"important"etlemettreengras, rependrelcriturenormalepour"dapprendrelelangage", crirecettefoiscienitaliquelemot"Html5" etterminerpar"!"encriturenormale.
Cequidonnelersultatsuivant: IlestimportantdapprendrelelangageHtml5! Le langage Html nest ni plus ni moins que cela. Chaque fois que lon donne une instruction au navigateur, par exemple mettre un titre, commencer un tableau ou faire un lien vers une autre page, une balise de dbut est applique.Labalisedefermeturesignaleaunavigateurquelacommandeesttermine. Uneexceptioncependant,Html5ahritduHtmldesbalisesuniques,aussiappelesbalisesvidesquinontpasde balisesdefermeture. Parexemple,labaliseimage<img>. AfindassurerunertrocompatibilitavecleXhtml,cesbalisespeuventgalementscrireenHtml5avecunsignede fermeture. Ainsi,labaliseimage<img>peutgalementscrireenXhtml<img />. Lespaceavantlabarreobliquedefermetureestimportantpourdesraisonsdecompatibilitavecles(trs)anciens navigateurs. Cequinoushandicapeunpeu,nouslesfrancophones,cestlefaitquecesbalisesfontappeldestermesoudes abrviationsdetermesanglosaxonsquilesrendent(aupremierabord)abstraitesetdonccomplexes. Exemples bpourboldcequisignifiegras ipouritaliccequisignifieitalique ppourparagraphcequisignifieparagraphe
<b> <i> <p>
- 1-
<div> <table> <form> <img /> Etc.
divpourdivisioncequisignifiedivision tablesignifietableau formsignifieformulaire imgpourimage
2.Lesattributsdelabalise
Il est parfois ncessaire de complter une commande par des spcifications plus prcises dans lun ou lautre domaine.Pourcefaire,lelangageHtml5disposedesattributsdelabalise.Lattributsinsredanslabalise,entrele motdecommandeetlesigne>final. Lasyntaxecompltedunebaliseavecunattributest:<balise attribut="valeur"> </balise> Lattributcomportetoujoursunevaleur,cellecisindiqueencomplmentdelattributparunsignegal(=)suividela valeur mise entre des guillemets. Il est impratif de mettre cette valeur entre guillemets. Le strict respect de la syntaxeveutquilnyaitpasdespaceavantetaprslesignegal. Il est possible dutiliser plusieurs attributs, spars par un espace, dans une mme balise : <balise attribut1="valeur" attribut2="valeur"> ... </balise>.
- 2-
Lebonusagedesbalises
VoiciquelquesrglessimplesquilfaudrarespecterlorsdelcrituredesbalisesHtml5.
q
EnHtml5,lesbalisesnesontpassensibleslacasse.Ainsi,onpeutcrireindiffremment<BALISE>,<Balise> ou<balise>.Certainsvoyaientmmeenlutilisationdesmajuscules,unmoyenefficacepourdistinguerlecode Html du contenu dans un document. Cependant, lusage sest gnralis dcrire les balises en minuscules (commeenXhtml). Larglegnraleveutquetoutebaliseouverte<balise>doittreferme</balise>.Leslibertsprisesdans lcritureduHtml3.2causedufonctionnentplusoumoinspermissifdesnavigateursnesontplusdactualit. LarigueurapporteparleHtml4.0strictetleXhtml1.0doitcontinuerguidervotrecriture. Lesbalisesdoiventtrecorrectementimbriques.Lorsquonaffecteplusieursbalisesunlment,lordrede fermeture de cellesci est essentiel. La premire balise de fermeture doit correspondre la dernire balise douverturenonferme.Unexempleettoutserabeaucoupplusclair: Estcorrect:<a><b><c>contenu</c></b></a>. Estincorrect:<a><b><c>contenu</a></c></b>.
Lesvaleursdesattributsdoiventtoujoursfigurerentredesguillemets.Iciaussi,larigueurdanslecodereste demise.
- 1-
LesbalisesetattributsHtml4.0disparus
Lesdiffrences,tantauniveaudesbalisesquedesattributs,sontnombreusesetimportantesparrapportauHtml4.0.
1.Auniveaudesbalises
Notons tout dabord la disparition complte des cadres. Les balises <frame>, <frameset> et <noframes> ont dfinitivementdisparudesoutilsladispositiondesauteurs.Cecineconstituepasrellementunesurprisecarils taientdcrisdepuisdenombreusesannes.Lesconcepteursprofessionnelslesvitaientcommelapestedepuis que Google avait annonc lattention des webmestres quil ne pouvait garantir la bonne indexation des sites comportantdescadres.Labalise<iframe>quantellesubsisteenHtml5. Ensuite,ladisparitiondecertainesbalisesdeprsentationcomme<big>,<center>,<font>,<strike>,<tt>et<u>.Ici aussi,pasdegrandesurprisecarleprincipedelasparationdecontenuetdelaprsentationestprsentbien tabli.CesbalisesdeprsentationdoiventmaintenanttreprisesenchargepardesfeuillesdestyleCSS.
2.Auniveaudesattributs
LeHtml5vaauboutduprincipedelasparationducontenuetdelaprsentation.Cequitonne,cestlampleurdes attributs concerns. En rsum, ce sont tous les attributs relatifs lalignement, la largeur, les arrireplans (de couleurouavecimage),lesborduresetlanumrotationdeslistesquisontpassslatrappe. Tous ces attributs doivent tre pris en charge par les feuilles de style qui deviennent ainsi indissociables du code Html5. Defaonplusdtaille:
q
align dans les balises<caption>, <iframe>,<img>, <input>,<object>, <legend>,<table>, <hr>, <div>,<hx>, <p>,<col>,<colgroup>,<tbody>,<td>,<tfoot>,<th>,<thead>et<tr>. alink,link,textetvlinkdanslabalise<body>. backgrounddanslabalise<body>. bgcolordanslesbalises<table>,<tr>,<td>,<th>et<body>. borderdanslesbalises<table>et<object>. cellpaddingetcellspacingdanslabalise<table>. frameborderdanslabalise<iframe>. heightdanslesbalises<td>et<th>. hspaceetvspacedanslesbalises<img>et<object>. marginheightetmarginwidthdanslabalise<iframe>. noshadedanslabalise<hr>. nowrapdanslesbalises<td>et<th>. rulesdanslabalise<table>. sizedanslabalise<hr>. typedanslesbalises<li>,<ol>et<ul>.
- 1-
valigndanslesbalises<col>,<colgroup>,<tbody>,<td>,<tfoot>,<th>,<thead>et<tr>. widthdanslesbalises<hr>,<table>,<td>,<th>,<col>,<colgroup>et<pre>.
Ainsi,ilnestpluspossibledefixer,enHtml5,lesbordures,lalignement,lesarrireplansventuelsetlalargeurdes tableauxsansavoirrecoursauxfeuillesdestyleCSS. Avecladisparitiondesattributscoloroubgcolor,leHtml5sedclineennoiretblanc. Cette absence complte dattributs de prsentation nous a obligs de revoir notre structure dapprentissage traditionnelleduHtmlavecdunctlesbalisesHtmletparailleurslesfeuillesdestyleCSS.Ainsi,dslespremiers pasenHtml,nousavonsadjointdesnotionslmentairesdefeuillesdestylepourlaprsentation.Pourpermettre lapprenant de sexercer, par exemple, dans lapprentissage des tableaux, des lments de feuilles de styles se rvlaientindispensablespouraumoinsvisualiserceuxciparunebordure.Unetudepluspousseetplusdtaille despropritsCSSestabordecommedhabitudelasuitedeltudedesbalisesetattributsduHtml5.
- 2-
Lesnavigateursdenotretude
Ces technologies de pointe que sont le Html5 et les feuilles de style CSS3 ne sont reprises que par les dernires versionsdesnavigateurs. Enoutre,lintgrationduHtml5etdesCSS3nestencorequepartielleetvariedunnavigateurlautre.cestade,il estainsincessairederetenirpournotretudelesprincipauxacteursdecestechniquesinnovantespourassurerune vuedensembledesapportsimportantsquilsentranentouentranerontdanslditionetlapublicationdesdocuments Web. Une intgration complte du Html5 et des CSS3 par les navigateurs de pointe prendra encore quelques mois, voire quelquesannes.MaistantdonnlimplicationdesfirmesellesmmesdansllaborationduHtml5,onpeutprsager quelesvolutionsserontrapides. Ilfaudragalementattendreuncertainnombredannesavantque,parlesystmederenouvellementoudemises jourdesnavigateurs,leHtml5etlesfeuillesdestylesCSS3deviennentdesapplicationsgrandpublic. Ilestintressantdenoterlimportance donne soudainement au JavaScript dans la conception des pages ou plutt desapplicationsWeb.Cetteprisedepositionseconcrtisedanslefaitquetouslesnavigateurssesontdotsdun nouveau moteur JavaScript. Que ce soit Opera 10.5 avec Carakan, Safari avec Nitro, Google Chrome avec V8 ou InternetExplorer9avecChakra.OnannoncemmedeuxmoteursJavaScriptdansFirefox4avecSpiderMonkeyetle toutnouveauNarcissus. Notons aussi lapparition de lacclration matrielle qui fait supporter par la carte graphique et non plus par le processeur,larestitutiondesanimationsetvidos. InternetExplorer9 Internet Explorer 8 est arriv bout de course et prsente un retard consquent par rapport la concurrence en raisondesapriseenchargequasinulledesnouveauxstandardsHtml5etdesfeuillesdestyleCSS3. InternetExplorer9,annonccourant2011,serepositionnedanslegroupedesnavigateursmodernesenassimilant (enfin)duHtml5etunepartiedesspcificationsCSS3. UnproblmedetaillesubsistetoutefoispuisquInternetExplorer9nestprvuquesousMicrosoftVistaetSeven.Donc pas dInternet Explorer 9 pour les utilisateurs de XP. Cet abandon de XP sexplique du ct de Microsoft par lacclrationmatrielledInternetExplorer9quirclameunsystmedexploitationmoderne.Pourtant,lesspcialistes rtorquentquedesnavigateursmodernescommeFirefox,ChromeetOperafontbiendelacclrationmatriellesous XP.Cetteprisedepositionestentoutcasregrettablepourles50%dutilisateursrestsfidlesXP.Maiscestpeut trecettefidlitquiestreproche Quelques mots pour terminer sur le cauchemar des dveloppeurs Web. En effet, les statistiques indiquent que fin 2010,encore5%desinternautesutilisentletotalementobsolteInternetExplorer6. Firefox4 Attendu dbut 2011, Firefox 4 restera sans nul doute le navigateur prfr des concepteurs grce son systme dextensions qui en font le partenaire incontournable dans le dveloppement dapplications Web. On pense spcialement Firebug et WebDeveloper qui sont des extensions devenues quasi indispensables pour de nombreux dveloppeurs. Les versions bta disponibles ce jour font apparatre de relles avances par rapport son prdcesseurFirefox3.6quecesoitparsoninterfacerenouvele,unemeilleurepriseenchargedesstandardsHtml5, lesCSS3,lacclrationgraphique,etc. Firefox3.6,vieillissantparrapportlaconcurrenceetspcialementcelledeGoogleChrome,neserapastotalement oubli pour autant. Il faut garder lesprit quil reprenait dj de nombreux effets des CSS3 alors que dautres navigateurs(lireInternetExplorer)lesignoraientcompltement. GoogleChrome7 Apparuenseptembre2008,GoogleChromenacessdepuisdaccrotresespartsdemarch.Onpeutconsidrerquil est lheure actuelle le troisime navigateur le plus utilis sur la toile. Depuis les versions se sont succdes un rythmesoutenuettoujourslapointedetechnologiescommeleHtml5etlapriseenchargeprogressivedesfeuilles de style CSS3. Il faut souligner que les versions rcentes sont rapidement adoptes par les utilisateurs. Ce qui confirmelamodernitetledynamismedecejeunenavigateur. Safari5 Safari est depuis 2003, le navigateur par dfaut des plateformes Mac OS X. Depuis sa version 4 (juin 2009), il est galementdisponiblepourWindows.Cetexcellentnavigateur,rapideetinnovant,acependantquelquesdifficults tre adopt par les utilisateurs de Windows. Pourtant le navigateur Safari est la pointe de la prise en charge du Html5etdesfeuillesdestyleCSS3etneconcderienenperformanceslaconcurrence. Opera10.6
- 1-
Ce navigateur sympathique mais plutt confidentiel nous sera trs utile pour notre tude du Html5 car il est le plus novateurenlamatire.Ilnouspermettraparexemple,dillustrerlesnouveautsenmatiredeformulairesduHtml5 quinesontpasencorereprisescejourparlesnavigateursprcits.
- 2-
LedocumentHtml5minimum
1.Ledoctypeetsonimportance
ToutdocumentHtmldoitcommencerparundoctype.LeHtml5proposeundoctypeuniqueetsimplifi. <!DOCTYPE html> Pourserendrecomptedelasimplification,ilsuffitdelecompareravecundoctypeduHtml4.0. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Nettementpluscourtetenfinmmorisable! Ledoctype,aussiappelDTDsertindiqueraunavigateurquellesrglesdcritureobitlecodesourcedelapage HtmlouXhtml.IlutiliseracellescipourafficherlapageselonlesstandardsduW3C.Touslesnavigateursappliquant lammergle,voustesainsiassurdunrenduidentiqueentrelesdiffrentsnavigateurs. En labsencedun doctype, le navigateur ignore selon quelles rgles il doit traiter la page. Il se rabat ainsi sur des procduresquiluisontproprespouraffichervaillequevaillevotrepageHtml.Cequipeutentranerdesdiffrencesde restitutionsensiblesentrelesdiffrentsnavigateurs.Cemodebancalestappelmodecompatibilitouquirksmode. Vouspouvezaismentvrifierdansquelmode(quirksourespectdesstandards)setrouvelenavigateur. DansFirefox3.6+,accdezaumenuOutilsInformationssurlapageongletGnralModederendu.
PourInternetExplorer8+,encodezjavascript:alert(document.compatMode)danslabarredadresse.Siunefentre dalerte indique CSS1Compat, il sagit du mode standard. Si la fentre dalerte affiche BackCompat, il sagit du mode quirks. LedoctypedoitsesituerlapremirelignedufichierHtml.Silyanimportequoidautre,mmeunsimple espace ou une ligne blanche, certains navigateurs considreront que la page na pas de doctype et afficherontcellecienquirksmode.
2.LabaliseHtml
Labalise<html>indiqueaunavigateurquilsagitdundocumentHtml. La balise <html> est llment le plus haut ou llment racine du document. Elle prend donc place juste aprs la dclarationdedoctype. <!DOCTYPE html> <html lang="fr"> </html>
- 1-
Labalise<Html>peutprendrecommeattributlang="fr"quispcifiequeledocumentestenlanguefranaise.Cette informationestfortpriseparlesmoteursderecherchecommeGoogleainsiqueparlessynthsesvocalesutilises parlespersonnesmalvoyantes. ladresse www.w3schools.com/tags/ref_language_codes.asp, vous pouvez trouver une liste complte des autres languesrfrences.
3.Lenttedudocument
Labalise<head> </head>quisepositionnejusteaprsledoctypeetlabalise<html>contientcequonappellelen ttedudocument. Dans cet entte du document se situe toute une srie dinformations relatives au document luimme, indpendammentducontenudeceluici. Cesinformationspeuventtredenaturestrsdiverses:
q
Letitredudocument.Soitlabalise<title> <title>repriseaupointsuivant. DesdclarationsoudesappelsdefeuillesdestyleCSS. DesfonctionsoudesliensversdesfichiersJavaScript. Desinformationslintentiondesmoteursderecherchepourlerfrencementdelapage. Desinformationslintentiondesnavigateurs. Desbalisesmtaquireprendrontquantelleslencodage,ladescriptiondelapage,lesmotsclsassocis lapage,lenomdelauteur,desmentionsdecopyright,etc.
Dansunsoucidesimplification,leHtml5spcifiedesvaleurspardfautpourlattributtypedesscripts,desstyleset leslmentslink.Saufsivousavezexpressmentbesoindunevaleurdiffrentequecellesdfiniespardfaut,vous pouvezomettreenHtml5cetattributdetype. LeJavaScriptestdfinicommelangagedescriptpardfaut. Ainsi,enHtml4.0,ondevaitcrire: <script type="text/javascript"> </script> Et <script type="text/javascript" src="fichier.js"></script> EnHtml5,onpeutsecontenterde: <script> </script> Et <script src="fichier"></script> LesCSSsontdfiniscommelelangagedefeuillesdestylepardfaut. Ainsi,enHtml4.0,ondevaitcrire: <style type="text/css"> </style>
- 2-
Et <link rel="stylesheet" type="text/css" href="fichier.css"> EnHtml5,onpeutsecontenterde: <style> </style> Et <link rel="stylesheet" href="fichier.css"> NotredocumentminimalHtml5devient: <!DOCTYPE html> <html lang="fr"> <head> ... </head> ... </html>
Mis part le titre de la page (voir ciaprs), aucun lment compris entre les balises <head> </head> napparatdanslenavigateur.
4.Letitredudocument
Labalise<title>,inclusedanslenttedudocument,estlaseulebaliseobligatoiredeceluici. Labalise<title> </title>donneuntitrevotrepage. Cetitreestaffichdanslabarredetitre,situeenhautgauchedetoutnavigateuret/oudanslesongletsouverts parceluici.
Labalise<title>auneplaceimportantedanslalgorithmederfrencementdeGoogle.Onveilleraavoirpourles documents Web, un titre accrocheur et synthtique. Il nest pas inutile non plus dy inclure un ou des mot(s)cl(s) relatif(s)lapage. LedocumentHtml5secomplteainsi: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> </head> ... </html>
- 3-
Si par mgarde il y avait une erreur dans les balises <title> <title>, une simple page blanche est affiche.
5.Lencodage(charset)dudocument
La notion du jeu de caractres utilis (charset) est une notion essentielle dans le dveloppement de pages Web. Cette notion est pourtant parseme dembches, surtout en termes dinteroprabilit. Navezvous jamais reu demailsocertainscaractrestaientremplacspardautressignescabalistiquescommedes t ouvrification? Lejeudecaractresdsignelafaondontlescaractresdunalphabetdonnsontconvertisenoctetsdansunfichier informatique(etviceversa).Certainesmthodesdencodagesontspcifiquesunenvironnementinformatiquedans une langue ou un alphabet donn, dautres sont multiplateformes et multilingues. Exemple dencodage : ASCII, windows1252,ISO88591,ISO885915,UTF8,etc. ASCII Jeudecaractrebasique.Ilentranerauneinteroprabilitmaximale maisilfaudraencoderlescaractresaccentusetspciauxpardes entitsdugenre&eacute(pourle)ou&euro(pourl). JeudecaractresutilisparWindowsetdenombreusesapplications Microsoft.Cestlaporteouvertedesproblmesdecompatibilitsur dautressystmes. LISO88591estlecodagepardfautsurdenombreuxprotocoles rseau,cequiestlegageduneexcellenteinteroprabilit. VersionactualisedelISO88591quicomporteentreautreslesigne. ApplicationdelUnicodequiestprsentcommelasolutiondelavenir. Sonadoptionestlheureactuellefreineparsapriseencharge problmatiquedanscertainslangagesdeprogrammation(PHP).
windows1252
ISO88591
ISO885915 UTF8
Les navigateurs possdent bien une fonction de dtection automatique du jeu de caractres. Mais lencodageainsi retenudefaonarbitraireestparfoislaporteouvertedeserreursdinterprtation. Des surprises peuvent ainsi apparatre. Vous pouvez lire ce sujet lexcellentarticleetladiscussionquisen suit : "ISO88591, ISO885915, UTF8, lequel choisir ?" ladresse http://forum.alsacreations.com/topic.php? fid=17&tid=1201. Ilfaitainsipartiedesbonnespratiquesdelapublicationsurlewebdedfinirprioritairementlencodagedudocument. CeluiciseraliseenHtml5parlabalise: <meta charset="iso-8859-1">ou<meta charset="UTF-8"> Lcrituresuivante,rappelantleXhtml1.0,estgalementaccepte. <meta charset="iso-8859-1" />ou<meta charset="UTF-8" /> Ainsi,ilnyapasqueledoctypequiestsimplifienHtml5.Pourrappel,cettedclarationdencodageprenaitenHtml 4.0laforme: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> NotredocumentHtml5minimalestalors: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> ... </html>
La spcification Html5 du W3C, suivant en cela lIETF (Internet Engineering Task Force) qui dicte les standardsInternet,recommandelusagedelutf8.Riennempchecependantderetenirleformatiso88591 plusfrquemmentutilisenEuropeoccidentale.
- 4-
6.Lecorpsdudocument
Les balises <body> </body> dterminent ce que lon appelle le corps du document. Cest entre ces balises que prendraplacelecodeHtml5quiserautilispourlaborerlecontenudelapage. CestcettepartiedudocumentHtmlquiseraaffichedanslafentredunavigateuretdoncvisibleparlinternaute. En Html5, les attributs ddis la prsentation du corps du document de la balise <body> sont maintenant abandonnspourlaisserplacelutilisationdesfeuillesdestyle. Cesattributsquidterminaientlacouleurdelarrireplan(bgcolor), limagedarrireplan(background)oulacouleur dutexte(text)nontplusleurplaceenHtml5. Aufinal,notredocumentHtml5minimalseprsenteainsi: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> </body> </html>
- 5-
Lafaondeprocder
LeslangagesutilisssurleWebontcetavantagequilsnerclamentpasncessairementunlogicielddi.Pourcrire en code source, pas besoin de logiciel coteux ! Un simple diteur de texte, prsent dans tous les systmes dexploitation,faitparfaitementlaffaire. Limportantestdavoirdutextebrutsansaucunemiseenforme. SousWindows,vouspouvezutiliserleBlocnotesouNotepad.Pourrappel,onyaccdepar Touslesprogrammes AccessoiresBlocnotes.
Cet diteur de texte aux fonctions rudimentaires est cependant "parfait" pour encoder du texte brut (sans aucun formatage). Il est important de respecter une procdure denregistrementcorrecte.Aprsavoirfait Fichier Enregistrer sous, veillezactiverdanslazoneTypeloptionTouslesfichiers.
Dans le cadre de cet ouvrage consacr au Html5, les fichiers auront comme extension *.htm ou *.html. Lusage de lextension*.htmsemblesegnraliser. Pouraffichervotrefichier,ilsuffitdouvrirvotrenavigateuretdindiquerlecheminverslefichierconcern. Cette opration semble toute simple. Cependant, avec la tendance dune interface de plus en plus simplifie des navigateurs, elle nest pas toujours intuitive. Pour Firefox, Safari et Opera, il faut dans un premier temps activer la barredesmenus,puisretrouverlefichierparFichier Ouvrirunfichier.PourInternetExplorer9etGoogleChrome dontlinterfaceestencoreplusdpouille,ilnypasdautrealternativequeleraccourciclavier[Ctrl]O. En cas de modifications apportes au code source initial, noubliez pas de ractualiser la page pour que le navigateurtiennecomptedecellesci.
Exemple cestade,touslesoutilssontrunispourralisernotrepremierdocumentHtml5. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Un premier document Html5 </body> </html> CequisaffichedansFirefox4.0:
- 2-
LavalidationducodeHtml5
BienqueleHtml5soitmoinsformalistequeleHtml4.0strictouleXhtml1.0,ilresteutilevoireindispensabledevalider lecodesource. Lesavantagesduncodeparfaitetdoncdelavalidationsont:
q
UnevrificationenprofondeurduHtml5pourlescodeursdbutants(etconfirms). Lassurance que votre page sera toujours correctement affiche par la plupart des navigateurs. Une page invalidepeutamenerlesnavigateursinterprtercellecidemaniretrsdiffrente. Ladmonstrationdevoscapacitsprofessionnellesenfournissantuncodedequalit,conformeaustandard duhtml5. Lessynthsesvocalesetautresaidestechniqueslattentiondespersonnesmoinsvalidessebasentsurun codevalidepourrestituerlespagesdelatoile.
Si le document soumis au validateur nest pas correct, celuici vous fournira une analyse des problmes qui vous permettradecorrigervotrecode.Lespremiresvalidationspeuventtretrsfrustrantesmaisconstituentunexcellent apprentissageducodesource.Lerapportderreurestcependantsouventtrstechnique. Poureffectuerleurfonctiondevrificationetdevalidation,lesvalidateursontbesoindudoctypedudocument (voirsectionLedocumentHtml5minimumLencodage(charset)dudocumentduprsentchapitre). LesvalidateursHtml5(enligne)disponiblessont:
q
LevalidateurduW3Cluimme. LevalidateurduW3Qubec. Levalidateurvalidator.nu.
LevalidateurduW3C LeW3Cluimmeprsenteunvalidateurdecode(validator.w3c.org).Cequinepeuttrequungagedequalit. LavalidationduHtml5estcependantencoreannoncecommetantaustadeexprimental.
Notons:
q
Quilestenanglais. Quiloffredevaliderunfichierparsonadressehttp,unfichierprsentsurvotreordinateurouducodeinsr dansunezonedetexte. Quilesttrspointilleux. Quesesremarquesetexplicationssonttrstechniquesvoireparfoissibyllines. Quilest"la"rfrencedesprofessionnels.
LevalidateurduW3Qubec
- 1-
Le W3Qubec est un organisme sans but lucratif visant promouvoir lensemble des normes, standards ouverts et bonnespratiquesduWebetdumultimdia.
Ilproposeunvalidateur:
q
Enfranais. Aveclapossibilitdevaliderunfichierparsonadressehttp,unfichierprsentsurvotreordinateurouducode insrdansunezonedetexte. Lesavertissementsouerreurssontfournisenfranaisdansunlangagetechniquemaisaccessible. Ilmanqueparfoisdesexplicationsplusexplicitespourcorrigerlecodesoumis. IlsagitenfaitdunetraductionenfranaisduvalidateurduW3C.
IlfautnoterquelevalidateurduW3Qubec(www.w3qc.org/validateur/)taitenreconstructionlorsdelaconception decetouvrage. Levalidateurvalidator.nu Lesitevalidator.nuproposegalementaustadeexprimentalunvalidateurHtml5(html5.validator.nu/). SignalonsquilfutlepremierproposerunvalidateurHtml5. Onpeutsouligner:

q
Quilestenanglais. Quesoninterfaceesttrssimplifie. Quiloffredevaliderunfichierparsonadressehttp,unfichierprsentsurvotreordinateurouducodeinsr dansunezonedetexte. Quilsembledexcellentequalit.
PourlesamateursdextensionsFirefox,lemoduleHtml5Validatorvouspermet,aprsinstallation,devalidervotrepage vialemenucontextuelparlevalidator.nu. Test Nousnavonspasrsistlatentationderaliseruntestpartirduncodehtml5erron. Lecodeerronest: 1. <!DOCTYPE html> 2. <html lang="fr"> 3. <head> 4. <title>Html5</title> 5. <meta charset="iso-8859-1"> 6. </head> 7. <body> 8. <p align="center"> 9. <s>Html5</s> 10. </p> 11. <table width="200px"> 12. <tr> 13. <td>1</td><td>2</td> 14. </tr>
- 2-
15. 16. 17. 18. 19. 20.
<tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
Leserreurssont:
q
laligne8,lusagedelattributalignquiestsupprim(obsolte)enHtml5. laligne9,lusagedelabalisedesoulignement<s>quinexisteplusenHtml5. laligne11,lusagedelattributwidthdelabalise<table>estsupprimenHtml5.
LevalidateurduW3Cdtectesansdifficultsceserreurs. Line8,Column18: <p align="center"> Line9,Column3: <s>Html5</s> Line11,Column21:<table width="200px"> Thewidthattributeonthetableisobsolete.Use CSSinstead. Theselementisobsolete.UseCSSinstead. Thealignattributeonthepelementisobsolete. UseCSSinstead.
Laffichagedececodeerronnousfournitunebellejustificationdelutilitdunevalidationducode.Eneffet,tousles navigateursdenotretudeaffichentletermeHtml5barralorsquunsoulignementtaitprvuparlabalise<s>.
- 3-
Prambule
LapprentissagedelapublicationsurleWebseffectuaittraditionnellementendistinguantleHtmldesfeuillesdestyle CSS.AvecladisparitionenHtml5detouslesattributsdeprsentation,ildevientdifficile,voireimpossible,dillustrerle codeetlesbalisesduHtml.Defaonlogique,ilapparatncessairedintroduirequelqueslmentsdefeuillesdestyle pourrpondredescontraintesdeprsentationafindepouvoirillustrerlesexplicationsetlesexemples. CechapitreprsenteleslmentsbasiquesdesfeuillesdestylequiserontutilissdanslapartieconsacreauHtml5. LesCSSserontbienentendutudiesdefaondtailledanslapartiequileurestconsacre. Limportant, ce stade de notre tude, est simplement de comprendre les fonctions respectives du Html ddi la structurationducontenuetdesfeuillesdestyleaffecteslaprsentationdeceluici.
- 1-
Lespropritsdestyle
Les feuilles de style prennent en charge tout ce qui concerne la prsentation du document Html comme la couleur, lalignement,lesbordures,lataille,lesarrireplansoulinterligne. Ladclarationdunstyleseffectueparlebinmeproprit: valeur;. Exemple text-align: center; Cequipeutselire:"alignerletextedefaoncentre". Dtaillonscettenotation:
q
propritindiquellmentdeprsentationquiestconcernparexemplecolorpourlacouleur,text-align pourlalignement,borderpourlesbordures,font-sizepourlatailledescaractres. lapropritestsparedesavaleurparundoublepoint. valeurspcifieparunmotclunpourcentageouunegrandeurenfonctiondelapropritlaquelleelleest assigne. lepointvirgulefinalquiindiquelafindeladclarationdestyleestobligatoire. lesespacessontpermis.Ainsi,certainsauteursontprislhabitudedemettreunespaceentreledoublepoint etlavaleurpourlalisibilitducode.
- 1-
Lesslecteurs
IlfautensuitedterminerquelslmentsducodeHtmlserontconcernsparceteffetdeprsentation.Ceslments sontappelslesslecteurs. Slecteurdebase LepremierslecteurquivientlespritestlabaliseHtml.Ainsi,onpeutparexemple"accrocher"ladclarationdestyle prcdente(alignerletextedefaoncentre)labalise<h1>.Lasyntaxedevient:slecteur { proprit: valeur;} Exemple h1 { text-align: center;}
Commentaires
q
On reprend simplement la dnomination de la balise sans les signes infrieur (<) et suprieur (>). Donc uniquementletextedelabalise. Ladclarationdestyleestcompriseentredesaccolades. Ilnefautpasoublierlaccoladefermantesinonlenavigateurneprendpasencompteladclarationdestyle.
Decettefaon,touteslesbalises<h1>serontalignesdefaoncentre. Slecteursdeclasse Danscertainessituations,onnesouhaitepasapporteruneffetdeprsentationtouteslesbalisesduntypedonn mais certaines balises librement choisies. Les feuilles de style ont alors introduit la notion de classes (class) permettantauconcepteurdedfinirsespropresslecteurs.Dolenomdeslecteuruniversel. La balise laquelle on dsire appliquer la dclaration de style sera distingue des autres par lattribut class="nom_classe"soit,parexemple,<h1 class="effet1"> </h1>. Lasyntaxeestalors:.nom_classe { proprit: valeur;} Soitlenomdonnlaclasse,prcddunpointetsuivideladclarationdestyle. Exemple .effet1 { text-align: center;} Ici seule la balise <h1> avec lattribut class="effet1" sera centre. En outre, cet effet de prsentation pourra tre appliqudautresbalisesducodecommeunparagrapheouuneimage. Slecteurdidentifiant Son concept est proche des slecteurs de classe mais ici, on ne souhaite appliquer leffet de style qu un seul et unique lment de la page. Cet lment tant unique, il pourra tre trait comme un objet qui sera ventuellement manipulparduJavaScript. Cetlmentuniqueestidentifiparlattributid="nom_identifiant"soit,parexemple,<h2 id="titre2"> </h2>. Lasyntaxeestdanscecas:#identifiant { proprit: valeur;} Exemple #titre2 { text-align: center;} Soitlenomdonnlidentifiant,prcddusignedise(#)etsuivideladclarationdestyle.
- 1-
Lincorporationdustyle
IlexistedemultiplesfaonsdincorporerdesdclarationsdestyledansunepageHtml.cestadedenotretudedes CSS,nousenretiendronslespluslmentaires. Styleenligne LadclarationdestyleestajoutedirectementunebalisedonnedanslecodeHtmlparlattributstyle. Exemple <h1 style="text-align: center;"> </h1> Cette faon basique ne respecte pas la rgle de la sparation du contenu de la prsentation. Son usage doit donc resterexceptionnel. Styleinterne Les diffrentes dclarations de style sont regroupes dans lentte du document soit entre les balises <head> </head>.Lasyntaxeseprsenteainsi: <style type=""text/css"> Dclarations de style </style> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type=""text/css"> h1 { color: red;} .effet1 { padding-left: 20px; font-style: italic;} </style> <body> <h1>Titre 1 en rouge</h1> <h2 class="effet1">Sous-titre en italique</h2> <h1>Titre 2 en rouge</h1> </body> </html>
- 1-
Letextesimple
ToutlecontenudevotrepageWebseplacedanslecorpsdudocumentHtml5,soitentrelesbalises<body> </body>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Un texte en Html5 </body> </html>
OnnoteraquenHtml,lesespacesmultiplessontignors.Seulunespaceestretenuparlenavigateur.
- 1-
Lecontrledepassagelaligne
EnHtml,lesretourschariot,oupassageslalignedanslecode,sontignorsetassimilsunespace. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Html5 succde au Html 4.0 </body> </html>
OnremarquequeleHtmlaffichetoutsuruneseuleligne. Pourforcerlepassagelaligne,ilfaututiliserlabalise<br>. Notreexempledevient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Html5 succde au<br> Html 4.0 </body> </html>
- 1-
Commentaires
q
Labalise<br> estunebalisediteuniquecarellenecomportepasdebalisedefermeture. Lanotation<br />,issueduXhtml1.0,estgalementaccepteenHtml5.
- 2-
Lamiseengras
LeW3Cprnelastrictesparationducontenuetdelaprsentation.LeHtmlsechargeantdelaseulestructuredu document et les feuilles de style CSS de tout laspect de mise en forme visuelle. Il peut ainsi sembler paradoxal de retrouver des balises de prsentation ! Rassurezvous, il ne sagit que de quelques formatages de texte des plus basiquescommemettredutexteengras,enitalique,enexposantouenindice,etc.Ltudedtailledesfeuillesde styleCSSpermettradeplusgrandesfantaisiesdeprsentation. Pourmettredutexteengras(boldenanglais),ilsuffitdinclureceluicientrelesbalises<b> </b>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <b>Du texte en gras</b> </body> </html>
Danslemmeordredide,labalise<strong> </strong>permetgalementdemettreengrasdanslesnavigateurs visuels. La diffrence entre les balises<b> et<strong> est pourtant sensible en Html. La balise<b> induit un effet purement typographique et visuel. La balise <strong> a pour but de mettre en avant, de renforcer le texte. Si les navigateurs visuelsontadoptlammeformedemiseengras,linterprtationenestfortdiffrentedanslessynthsesvocalesqui lisentlespagesWeblintentiondespersonnesvisuellementdficientes.Labalise<strong>renforceralecontenupar uneintonationdevoixdiffrenteouunniveausonorepluslev.Lesensdonnautexteparlabalise<strong>est ainsifortdiffrent.
- 1-
Lamiseenitalique
Pourmettreletexteenitalique(italic),ilfautlinclureentrelesbalises<i> </i>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <i>Du texte en italique</i> </body> </html>
Commentaires
q
Il est possible de mettre du texte en gras et en italique par le cumul des balises <b> et <i>. Il importe cependantquecesbalisessoientalorscorrectementimbriques.Cequisignifiequelordredefermeturedes balises soit linverse de lordre douverture de cellesci. Ainsi, <b><i>texte</i></b> sont correctement imbriques.Parcontre,avec<b><i>texte</b></i>,lesbalisessechevauchentetlordredimbricationnestpas respect. Ilexisteaussilabalise<em>(emphase).Cellecimetgalementletexteenitaliquedanslesnavigateursvisuels. Il faut en trouver la diffrence avec la balise<i>, dans le sens donn ces deux balises. La balise <i> est purement typographique et visuelle. La balise<em> a pour but de mettre en avant, de mettre en exergue le textequellecontient.Cequipeuttrerenduduneautrefaondanslesnavigateursnonvisuels.
- 1-
Lamiseenexposantetenindice
Il est parfois ncessaire de mettre des caractres en exposant ou en indice dans, par exemple, des formules mathmatiquesouchimiques. Labalise<sup> </sup>mettralecontenuenexposantetlabalise<sub> </sub>enindice. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup><br> H<sub>2</sub>O </body> </html>
- 1-
Lesautresbalisesdetexte
Ilyadautresbalisesdetextedontlemploiestmoinsfrquentsinonrare.
1.Letextebarr
Labalise<del> </del>permetdemarquerunlmentdetextecommesupprim(delete)ouprim,parexemple lorsdunemisejourdeprixdansunsitecommercial.Letexteapparatalorsbarrlcran. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> La balise <del>Html 4.0</del> Html5 <br> Cl USB au prix de <del>29.99</del> 24.99 </body> </html>
Commentaire Labalise<strike>duHtml4.0,quipermettaitdebarrerdutexte,napastreprisedansleHtml5.Labalise<del>, quiprsenteletextecommebarr,peuttreunealternative.
2.Letexteprformat
Labalise<pre> ...</pre>permetdafficherletextetelquilatencoddanslditeurdetexte.Lesespaces,les tabulations et les retours chariot sont respects lcran. Si elle comporte du texte, celuici sera affich avec une policepasfixe. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <pre>
- 1-
Le texte inclus dans une balise pre est affich dans une police pas fixe et prserve les espaces Ainsi que les passages la ligne. <pre> </body> </html>
3.Ladirectiondutexte
Certainssystmesdcriture,telsquelalphabetarabeethbreu,scriventdedroitegaucheaucontrairedusens dcriture conventionnel de gauche droite des langues utilisant lalphabet latin (telles que le franais). Le Html, langageuniversel,sedevaitdetenircomptedecettefaondespcificit. La balise <bdo> </bdo> indique le sens daffichage du texte (de la gauche vers la droite ou de la droite vers la gauche). Lesattributssont:
q
dir="ltr"(lefttoright)pourlesensdelecturedelagaucheversladroite(dfaut). dir="rtl"(righttoleft)pourlesensdeladroiteverslagauche.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <bdo dir="ltr">engage le jeu que je le gagne</bdo><br> <bdo dir="rtl">engage le jeu que je le gagne</bdo> </body> </html>
- 2-
- 3-
Lescommentaires
IlestparfoisutiledecommenterlecodeHtml(commepourtoutcodedeprogrammationdailleurs),pourenfaciliterla comprhensionlorsdunemisejour. En Html5, tout comme en Html 4.0, les commentaires doivent tre prcds de la balise . Tout ce qui sera crit entre ces balises ne sera pas affich lcran par le navigateur. Notons cependant que ces commentairesrestentvisibleslorsquonconsultelecodesourcedelapage. Ajoutons que les commentaires peuvent occuper plusieurs lignes et peuvent prendre place indiffremment dans le <head> </head>oudansle<body> </body>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <b><i>Texte en gras et en italique</i></b>  </body> </html>
- 1-
Lescaractresspciaux
Ilexisteunefouledecaractresspciauxquilfautparfoisencoderdefaonparticulire. OnpensedansunpremiertempsauxcaractresquisontutilissparlecodeHtml5.Parexemple,lesigneinfrieur (<) qui marque louverture dune balise. la lecture du code, le navigateur risque alors dtre mis en difficult. Le validateurduW3Csignaleparailleurscetteambigutlorsdelavrificationdevotrepage. Unpeucommepourlesmotsrservsdansunlangagedeprogrammation,ilyaunelistedlmentsviterdansle codagedutexte.Ceslmentsparexemple:
q
Lesigne<quimarqueledbutdunebalise. Lesigne>quimarquelafindunebalise. Lesigne"utilisdanslesattributsdebalise. Lesigne&quimarqueledbutdunerfrencedecaractre.
Cesdiffrentssignesdoiventtreencodsenutilisantlesentitssuivantes: < > " & < > " &
Remarquezbienlepointvirgulefinalobligatoire. Parailleurs,ilyaensuiteunesriedecaractresquinexistentpassurleclaviernormalcommeleducopyrightoule de la marque dpose. Dautres caractres sont spcifiques aux mathmatiques comme le signe pour les intgrales.Pourlespersonnesintresses,unelonguelistedecaractresspciauxutilissenHtmlestdisponible ladressehttp://alexandre.alapetite.fr/docalex/alx_special.html. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> La balise <b> </b> met le texte en gras.<br> &spades; &clubs; &hearts; &diams; </body> </html>
- 1-
QuenestildesautrescaractresspciauxquifoisonnaientenHtml?QuenestilenHtml5desé(pourle), des&grave;(),des&circ;(),desà(),des (espaceinscable),etc.? En principe, si le caractre existe dans le jeu de caractres (charset) dclar dans le document Html5, il nest pas ncessairedcrirelescaractresspciauxaumoyendesentits. Ainsi, dans les encodages iso88591 et iso885915, le existe et il nest donc pas ncessaire davoir recours lentité.Cequinepeutquamliorerlalisibilitducode. Parcontre,aveclencodageiso88591, le signenexistepascartropancienpoursupportercecaractredansson jeu.Ilfautalors,obligatoirement,passerparsonentit€. Pour en savoir plus ce sujet, vous pouvez consulter les prescriptions du W3C ladresse www.la grange.net/w3c/html4.01/charset.html. Il existe bien une dtection automatique de lencodage dans les navigateurs mais celleci peut dans certaines circonstances,rserverdemauvaisessurprises.Ilestrecommanddebienspcifierlecharset.
- 2-
LesbalisesHtml4.0supprimes
Pourrappel,leHtml5vajusquauboutduprincipedelasparationducontenuetdelaprsentationensupprimant touteunesriedebalisesetdattributsayanttraitaveclaprsentation. Ainsi,lesbalisessuivantesduHtml4.0ontdisparudanslaspcificationHtml5:
q
Lesbalises<big>et<small>quipermettaientdafficheruntextedefaonplusgrandeoupluspetite. La balise <font> pour la police de caractres ainsi que ses attributs size, color et face qui dterminaient respectivementlataille,lacouleuretletypedecelleci. Labalise<s>quipermettaitdesoulignerdutexte. Labalise<strike>quipermettaitdebarrerdutexte. Labalise<tt>quipermettaitdafficherdutextedansunepoliceespacementfixe.
- 1-
Leformatagedutexteaveclesfeuillesdestyle
Commeexpliquauchapitre"Premierslmentsdefeuillesdestyle",nousintroduisonsciaprsquelqueslmentsde feuilles de style afin de rendre vos premiers essais en Html5 plus agrables. En effet, le Html5 qui se proccupe exclusivementdelastructuredudocument,estpourlemoinsdpouill. Limportantcestadeestdecomprendrelemcanismedesfeuillesdestylepourraliserdeslmentsbasiquesde prsentation.Leurtudedtailleseraabordedanslapartie2consacreauxCSS.
1.Gras
IlestpossibledemettreengrasaveclesfeuillesdestyleCSSsanspasserparlabalise<b>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> span { font-weight: bold;} </style> </head> <body> Texte en <span class="gras">gras</span> </body> </html>
La proprit de style font-weight (textuellement, le poids ou limportance de la police) est mise sur bold (soit en gras). Cette proprit CSS concerne les balises <span>.Lapropritcomplte span { font-weight: bold;}mettra touteslesbalises<span>dudocumentengras.
2.Italique
IlestpossibledemettreenitaliqueaveclesfeuillesdestyleCSSsanspasserparlabalise<i>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .italique { font-style : italic;} </style> </head> <body> Texte en <span class="italique">italique</span> </body>
</html>
Ici, la proprit de style font-style (le style de la police) est mise sur italic (en italique). Cette proprit CSS concerne les balises avec un attribut de classe que nous avons nomm class="italique". La proprit complte .italique { font-style : italic;} mettra toutes les balises dotes de lattribut class="italique" du documentenitalique.
3.Latailledescaractres
Aveclasuppressiondelabalise<font>etdesonattributsize,latailledescaractresestuniquementdfinieparla propritdestyleCSSfont-size. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #grand { font-size: 36px;} </style> </head> <body> <div id="grand">Texte en grand</div> </body> </html>
La taille des caractres (font-size) est fixe 36 pixels (36px). Elle ne sappliquera qu la seule balise <div> identifieparid="grand".
4.Lacouleurdescaractres
- 2 ENI Editions - All rights reserved - Algeria Educ
Avec la suppression de lattributcolor de la balise<font>, la couleur des caractres se dfinit par la proprit de styleCSScolor. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 {color: red;} </style> </head> <body> <h1>Titre en rouge</h1> </body> </html>
Lesbalises<h1>aurontleurtextedanslacouleur(color)rouge(red).
5.Lalignement
LalignementdutexteseraliseparlapropritdestyleCSStext-align. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #centre { text-align: center;} </style> </head> <body> <div id="centre">Texte align au centre</div> </body> </html>
- 3-
Laproprittext-alignindiquequelalignementdutexteestcentr(center).
6.Lesoulignement
Sur la toile, le soulignement est la convention adopte pour signaler un lien. Tout autre soulignement de texte ne peutainsiquinduirevotrevisiteurenerreur.Ainsi,ildoittrevit,sinonproscrit,lorsdelcritureducodeHtml. Lasuppressiondelabalisedesoulignementdetexte<s>enestlillustration. Ilestnanmoinspossibledesouligneruntexteparunepropritdestyle. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .souligne { text-decoration: underline;} </style> </head> <body> Texte <span class="souligne">soulign</span> </body> </html>
Lapropritdestyleindiquequeladcorationdutexte(text-decoration)estlesoulign(underline).
- 4-
Lestitres
Quoideplusutilequedeprvoirdiffrentestaillesdetitrespourstructureruncontenu?Ilsuffitdepenserauxtitres quiidentifientunegrandesectiondetexteouunetabledesmatires. Le langage Html5 propose six grandeurs de caractres pour les titres. Quand on sait que titre se dit en anglais heading,llaborationdelabalisedetitredevientvidente<h>pourheadingsuividunumro1(pourleplusgrand),2, 3,4,5,6(pourlepluspetit)etle>defermeture.Parlasuite,lanotation<hx> </hx>serautiliseoxestunniveau de16. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6> </body> </html>
Commentaires Malgrlasimplicitdecettebalise,plusieursremarquessimposent:
q
CettebalisedatantdutoutdbutduHtmlestparfaitementcompatibleavectouslesnavigateurs. Pardfaut,aveclabalise<hx> </hx>,letexteestmisengras. Pardfautgalement,commepourtousleslmentsdeblocaussiappelsleslmentsdedivision(voirpoint Fduprsentchapitre),labaliseajouteunelignevideentrelecontenudelabaliseetlasuitedudocument.

Pourobtenirdescaractresplusgrandsoupluspetitsqueceuxproposspardfautouuneautrepoliceque lapolicepardfautdunavigateur,ilfautpasserparunefeuilledestyleCSS. LesbalisesdetitreendbutdepagesontfortementprisesparlesmoteursderecherchecommeGoogleet influenceront de faon pertinente le rfrencement et le classement du site, particulirement lorsquelles contiennentdesmotsclspertinents. LeW3CinsistepourquenHtml5,lesbalisesdetitre<hx>retrouventtoutesleursqualitsdestructurationdes pagesWeb.Lusagedesbalisesdetitresdoitdonctrerservleurfonctionoriginelle.Ilimportedenepas lesdtournerdeleurbutpremierpour,parexemple,mettredutexteengrasouavecunetailledecaractres dtermine.LesfeuillesdestyleCSSsontlpourralisercesprsentations. Lattribut align, disponible dans le Html 4.0, nest pas repris dans le Html 5. Lalignement du paragraphe se raliseainsiparunepropritdestyleCSS.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> #centre { text-align: center;} #droite { text-align: right;} </style> </head> <body> <h3>Titre de niveau 3</h3> <h3 id="centre">Titre de niveau 3</h3> <h3 id="droite">Titre de niveau 3</h3> </body> </html>
- 2-
Lesparagraphes
Uncontenutextuelgagneenlisibilitetcomprhensionlorsquilestdivisendiffrentsparagraphes. Pourdfinirunparagraphe,labalise<p> </p>estutilise. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p> </body> </html>
Commentaires
q
Cettebaliseestparfaitementcompatibleaveclesnavigateursanciensetmodernes. Par dfaut, chaque paragraphe est prcd et suivi dun espace correspondant un saut de ligne pour marquerlasparationaveclecontenuprcdentetsuivant.Cetespacepeuttremodifiparlesfeuillesde style. Lattribut align du Html 4.0 a disparu dans la spcification Html5. Lalignement (gauche, centr, droite et justifi)doitainsitreralisparunepropritdestyleCSS.
- 1-
Lescitations
Lescitationssontmisesenavantdanslecontenutextuelparlesbalises<blockquote> </blockquote>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Alexandru Vlahuta a dit :<br> <blockquote>La chance est un hasard,<br> le bonheur une vocation.</blockquote> </body> </html>
Commentaires
q
Lacitationestafficheavecunsautdeligneavantetaprscellecicommepourlesparagraphes. Ellesaffichegalementavecunlgerretraitparrapportlamargegauche.Lusagedelabalise<blockquote> estparfoisdtournpourobtenirceretrait.Prfrezpluttlapropritdestylemargin-left. Il existe aussi la balise <q> </q> pour les citations. Celleci naffiche pas despace avant et aprs, ni de retrait.Elleestcependantrepriseentredesguillemets.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Alexandru Vlahuta a dit : <q>La chance est un hasard, le bonheur une vocation.</q> </p> </body> </html>
- 1-
- 2-
Lessparateurshorizontaux
Letraithorizontalpeutservlerfortutilepourdfinirunchangementdanslecontenu.Labalise<hr> ralise cette fonction. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Chapitre 1 <hr> Chapitre 2 </body> </html>
Commentaires
q
Pasdeproblmesdecompatibilitpourcettebaliseassezancienne. La balise <hr> est une balise unique qui ne comporte pas de balise de fermeture. Le Html5 admet aussi la notation<hr />driveduXhtml1.0. Pardfaut,cettelignehorizontaleoccupetoutelalargeurdelafentredunavigateur. Les designers prfrent souvent remplacer ce trait plutt basique sur le plan esthtique par une image graphiquementpluslabore. Tous les attributsalign, noshade,size,widthdjdprcis(deprecated)dansleHtml4.0nexistent plus en Html5.Ilfautpasserparlesfeuillesdestylepourendterminerlalignement,latailleetlalargeur.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> hr { text-align: center;
- 1-
height: 3px; background-color: black; width: 100px;} </style> </head> <body> Chapitre 1 <hr> Chapitre 2 </body> </html>
- 2-
Leslistes
Les listes, bien connues des utilisateurs de traitement de texte, sont une faon efficace pour structurer un contenu textuel.
1.Leslistesordonnes
Unelisteordonneestmiseenplaceparlabalise<ol> <ol>. Ondtermineensuite,lintrieurdecesbalises,leslmentsoulesitemsdelaliste,soitlesbalises<li> </li>. Lastructuregnraledunelisteordonneounumroteestdonc: <ol> <li>Chapitre <li>Chapitre <li>Chapitre <li>Chapitre </ol> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Les listes en Html5 : <ol> <li>Listes ordonnes</li> <li>Listes non-ordonnes</li> <li>Listes imbriques</li> <li>Listes de dfinition</li> <li>Le menu de listes</li> </ol> </body> </html>
1</li> 2</li> 3</li> 4</li>
Commentaires
q
Labalise<ol>estunclassiqueduHtml.Elleestainsibienreconnueparlesnavigateurs. Lattribut type, qui permettait de remplacer les chiffres par les lettres (majuscules ou minuscules) ou des chiffres romains, ne fait plus partie du Html5. Nous y reviendrons dans la partie consacre aux feuilles de styleCSSpourmodifierlesnumrotations.
Lattribut start permet de commencer la numrotation un autre chiffre que 1. Pour les amateurs de prcision,cetattributtaitdprci(deprecated)enHtml4.0maisilestpourtantbienreprisdansleHtml5. Le nouvel attribut Html5 reversed permet une numrotation descendante (5, 4, 3, 2, 1) au lieu de la numrotation ascendante habituelle (1, 2, 3, 4, 5). ce jour, ce nouvel attribut nest repris par aucun navigateur.
2.Leslistesnonordonnes
Leslistesnonordonnes,aussiappeleslistespuces,sontintroduitesparlabalise<ul> </ul>. Ondtermineensuite,lintrieurdecettebalise,leslmentsoulesitemsdecelleci,soitlesbalises<li> </li>. Lastructuregnraledunelistepucesestdonc: <ul> <li>Chapitre <li>Chapitre <li>Chapitre <li>Chapitre </ul> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Les listes en Html5 : <ul> <li>Listes ordonnes</li> <li>Listes non-ordonnes</li> <li>Listes imbriques</li> <li>Listes de dfinition</li> <li>Le menu de listes</li> </ul> </body> </html>
1</li> 2</li> 3</li> 4</li>
Commentaires
q
Labalise<ul>estunclassiqueduHtml.Elleestainsibienreconnueparlesnavigateurs.
- 2-
Lattributtypequipermettaitdechangerquelquepeulaformedelapuce(rondepleine,rondevide,carre) nexisteplusenHtml5.NousyreviendronsdanslapartieconsacreauxfeuillesdestyleCSSpourmodifierla formedespucesoulesremplacerpardesimages. Laformedespuces(disquepleinoudisquevide)estdtermineparlenavigateur.
3.Leslistesimbriques
Riennesopposelaborerdeslistesordonnesetdeslistesnonordonnesimbriques.Lecodageestsimplement unpeupluscomplexe. Exemple Soitunelistenumrotedanslaquellesimbriqueunelistepuces. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <ol> <li>Les titres</li> <li>Les listes en Html5 <ul> <li>Listes ordonnes</li> <li>Listes non-ordonnes</li> <li>Listes imbriques</li> <li>Listes de dfinition</li> <li>Le menu de listes</li> </ul></li> <li>Les tableaux en Html5</li> <li>Les formulaires en Html5</li> </ol> </body> </html>
4.Leslistesdedfinition
LeHtmlproposeunederniresortedeliste,particulirementutilepourprsenter,parexemple,desglossaires.Cette liste,ditededfinition,prsenteunelistedetermes,chacundentreeuxtantsuividesadescription. Lalisteseconstruitdabordparladclarationdunelistededfinition(definitionlist),soit<dl> </dl>.
- 3-
Entre ces balises, on reprend ce quon a appel le terme par labalise <dt> </dt> suivi par la description dans labalise<dd> </dd>. Lastructuregnraledunelistededfinitionestdonc: <dl> <dt>Terme 1<dt> <dd>Definition 1</dd> <dt>Terme 2<dt> <dd>Definition 2</dd> <dt>Terme 3<dt> <dd>Definition 3</dd> </dl> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Balises de listes disponibles :</p> <dl> <dt>ol</dt> <dd>Liste ordonne</dd> <dt>ul</dt> <dd>Liste non-ordonne</dd> <dt>dl</dt> <dd>Liste de dfinition</dd> </dl> </body> </html>
- 4-
Lesdivisionsdepage
1.Leslmentsdetypebloc
CommenousavanonsdansnotretudeduHtml,ilnousparatopportundeparlerdeladivisionenblocetenligne deslments. Chaque balise Html est interprte par les navigateurs qui en dterminent le rendu visuel ou laffichage par lintermdiairedefeuillesdestyleCSSappliquespardfaut. Ilexistedeuxgrandsgroupesdebalises:lesbalisesderenduCSSbloc(block)etlesbalisesderenduCSSenligne (inline). LesbalisesderenduCSSblococcupentpardfauttoutelalargeurdelafentredunavigateur.Ellesseplacentainsi les unes audessus des autres. Gnralement, le navigateur insre automatiquement un espace audessus et en dessousducontenudelabalise Cestlecasdelabalisedetitre<hx>etdetouteslesbalisesdecechapitre.Ellessonttoutesdesbalisesdetype bloc. Unebalisedetitreoudeparagrapheoccupetoutelalargeurdelapageetestspareparunespaceplusoumoins important. Le code <p>Paragraphe 1</p><p>Paragraphe 2</p> va safficher sur deux lignes car la balise <p> est une balise de typebloc.Chaqueparagraphevaoccuperuneligne. Lesprincipauxlmentsdedivisiondetypeblocquiserontdtaillstoutaulongdenotretudesont:
q
Lesbalisesdetitres<hx> </hx>. Lesbalisesdeparagraphe<p> </p>. Lesbalisesdecitation<blockquote> </blockquote>. Labalise<hr>quiintroduitunelignehorizontale. Lesbalises<ol> </ol>deslistesordonnes. Lesbalises<ul> </ul>deslistespuces. Lesbalises<dl> </dl>deslistesdedfinitions. Lesbalisesdetableaux<table> </table>. Lesbalisesdedclarationdeformulaires<form> </form>. Labalise<div> </div>spcialementconuepourintroduireunedivision(divpourdivision)sanspasserpar une des balises cites ciavant. Cette balise est particulirement utile pour appliquer une dclaration de feuillesdestyleCSS.
Notons quune balise de type bloc peut contenir une (ou plusieurs) balise(s) de type bloc. Ainsi, par exemple, une citationinclusedansunparagraphe. Lextension Web Developer de Firefox permet de visualiser les diffrents lments bloc dune page et par consquencelastructuredecelleci:OutilsWebDeveloperEntourerEntourerleslmentsdetypeblock. Soitlecode: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head>
- 1-
<body> <h1>Le Html5</h1> <h3>Le document Html5 minimum</h3> <p>Un document Html5 doit contenir :</p> <ul> <li>un doctype</li> <li>la balise html</li> <li>la balise head</li> <li>la balise title</li> <li>la balise body</li> </ul> <p>Ragir cet article :</p> <form action=""> <textarea rows="2" cols="25"></textarea><br> <input value="Envoyer" type="submit"> <input value="Rtablir" type="reset"> </form> </body> </html> DansFirefoxaveclextensionWebDeveloper:
2.Leslmentsdetypeenligne
Aucontrairedeslmentsdetypebloc,leslmentsenligneseplacenttoujourslunctdelautreafinderester danslefluxdutexte. Ainsi,lecodetexte en <b>gras></b> et en <i>italique</i>estrestitusuruneseuleligne,sansinterrompreleflux dutexte:texteengrasetenitalique.
- 2-
Lechapitreprcdentcontenaitbeaucoupdebalisesenlignecarellesnaffectaientquedutexte. Lesprincipalesbalisesenlignesont:
q
Labalise<b> </b>demiseengrasdutexte. Labalise<i> </i>demiseenitaliquedutexte. Labalise<br>depassagelaligne. Labalise<a>pourlesliens. Labalise<img>pourlesimages. Lesbalisesdechampsdeformulaires<input>,<select> </select>et<textarea> </textarea>. La balise <span> pour introduire une division en ligne dans le texte. Cette balise est particulirement utile pourappliquerunedclarationdefeuillesdestyleCSS.
- 3-
Linsertiondunlien
Lesliensconstituentlessence du langage Html et des pages Web. La richesse de la fonction hypertexte permet de tissercettetoilegigantesquequestleWeb. Labalise<a> </a>introduitunlien.Sasyntaxedebaseest: <a href="destination_du_lien">Texte de lien</a> Ladestinationdulienpeuttre:
q
Unendroitdelapageencours. Uneautrepagedusite. Unendroitdansuneautrepagedusite. UnepagedunautresitesitusurleWeb. Uneadresselectronique. Unfichiertlcharger.
Labalisedelienpossdediffrentsattributs: href Lattributhrefdfinitladresse(url)delacibledulien. hreflang Prciselalanguedudocumentciblesicelleciestdiffrentedecelledudocumentdedpart. ping NouveauenHtml5.Lattributpingpeutcontenirunelistedadressesurl(sparesparunespace)quirecevrontune notificationlorsquelutilisateursuitlelien. <a href="html5.htm" ping="http://www.monsite.com/data/visites.php> Html5</a> Le navigateur va alors envoyer une requte POST ladresse url spcifie dans lattribut. Ce nouvel attribut sera particulirement utile pour les statistiques dun site. Dans le cas prsent, il permettra de connatre le nombre de visiteursdelapartieconsacreauHtml5. rel NouveauenHtml5.Spcifielarelationentreledocumentdedpartetlefichiercibledulien. Les valeurs sont nombreuses : alternate, archives, author, bookmark, contact, external, first, help, icon, index, last,license,next,nofollow,noreferrer,pingback,prefetch,prev,search,stylesheet,sidebar,tag,up. Cetattributnestquetrspartiellementimplmentdanslesnavigateursrcents. target Spcifieaunavigateurlafaondafficherlacibledulien.Celapeuttredansunenouvelleinstancedunavigateurouun nouvelongletdunavigateur(target="_blank"),danslammefentrequelapagededpartdulien(target="-self") etdanslammefentremaisenoccupantlatotalitdelafentredunavigateur. Nousyreviendronspluslonguementlasection"Lelienversunefentrespcifique"duprsentchapitre. type IndiqueaunavigateurletypeMIMEdelaciblesiceluicinestpasundocumentHtml5,parexempleunfichiersonou uneimage. LesattributsHtml4.0suivantsontdisparudelaspcificationHtml5:charset,coords,name,revetshape. Leplusfrquemmentutilistaitlattributnamepourdfinirlesancrespourleslienslintrieurdundocument.Nousy
- 1-
reviendronslasection"Lelienlintrieurdunepage"duprsentchapitre.
- 2-
Lelienversuneautrepage
LespremierslienslorsdelapprentissagedelapublicationWeb,consistentpointerversuneautrepagesituedans lesite(adressagerelatif). Pour la cration dun site, il est fortement recommand de regrouper tous les fichiers relatifs au site dans un seul dossier.Librevousdecrerdanscedossierdessousdossiers.
1.Lienversunepagesituedanslemmedossier
Ladressagerelatifnestpassansposerdeproblmesdanslecasdunearborescencecomplexe. Dbutons notre tude par le cas le plus simple. Soit deux fichiers (page1.htm et page2.htm) situs dans le mme dossier.
Effectuonsdanslapage1unlienverslapage2. Lecodeduliendanslapage1devient: <a href="page2.htm">Lien vers page 2</a>
Ilestimpratifderespecterscrupuleusementlesmajusculesetminusculesdanslenomdufichierainsique dviter les espaces car ce qui est reconnu par Windows install sur votre ordinateur ne le sera peuttre pasparlhbergeurdevotresitequiutilise,parexemple,unserveurUnix.
2.Lienversunepagesituedansunautredossier
Danslessitesdunecertaineimportance,onnepeutsecontenterdemettretouslesfichiersdansunseuletunique rpertoire.Pourstructurerlesite,ilnestpasraredavoirdanslemmedossierdedpartplusieurssousdossiers. La conception du chemin daccs au fichier peut se rvler quelque peu droutante dautant que la mthode dadressagesinspiredecelleadopteparUnix,peufamilireauxconcepteurshabitusWindows. Soit la situation suivante. Le dossier de dpart comporte la racine un fichier index.htm, un sousdossierdossier1 avec le fichier page1.htm et un autre sousdossier dossier2 avec le fichier page2.htm. Cette arborescence nous permettradaborderplusieurscasdefigure.
a.Lienpartirdeindex.htmverspage1.htm
- 1-
Lecodedansindex.htmdevient: <a href="dossier1/page1.htm">Texte du lien </a>
Commentaires
q
Le fichier index.htm et le dossier dossier1 se situent au mme niveau de larborescence. Une fois dans dossier1,ilsuffitde"descendre"verspage1.htm. Cestbienlabarreoblique/quiestutiliseetnonlabarreobliqueinverse\quelonrencontreparfoisavec Windows.
b.Lienpartirdepage1.htmverspage2.htm
Lecodedanspage1.htmdevient: <a href="../dossier2/page2.htm">Texte du lien</a>
Commentaires Pour aller de page1.htm vers page2.htm, il faut dabord remonter dun niveau pour sortir de dossier1. Pour remonterdunniveau,onutiliselanotation"../".Unefoisremontdunniveau,ilfautdescendreversdossier2et unefoisdansdossier2,descendrepourallerchercherpage2.htm.
c.Lienpartirdepage2.htmversindex.htm
Lecodedanspage2.htmdevient: <a href="../index.htm">Texte du lien</a>
Commentaires
- 2-
Pour aller de page2.htm vers index.htm, il faut dabord remonter dun cran dans larborescence pour sortir de dossier2,dolanotation../.En"redescendant",ontrouvedirectementindex.htm.
- 3-
Lelienlintrieurdunepage
Dans une page dune certaine importance, gnralement dessence textuelle, il est intressant de pouvoir mener lutilisateurunendroitprcisdudocument.Onutilisealorslatechniquedesancres(anchor)oudessignets.
Celienlintrieurdelapagesexcuteendeuxtemps:
q
Ladclarationdelancre. Lelienverslancre.
Ladclarationdelancre Lesancresvontdfinirunendroitdanslapage,cequipermettradefaireunlienversceluici. Lasyntaxedecrationduneancreest: <a id="nom de lancre"></a> AvecladisparitiondelattributnameenHtml5,ladclarationdelancrageseraliseparunidentifiantid.Ctaitdjle casenXhtml1.0. Notonsaussiquelancrenestpasaffichedanslenavigateur. Lesliensversuneancresituedanslammepage Aprsavoirdfinilancre,ilfauteffectuerlelienverscelleci. Pourcrercelien,ilsuffitdereprendredanslattributhreflenomdelancredirectementprcddusignedise(#). <a href="#nom de lancre>Texte du lien</a> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="#chapitre2">Aller au chapitre 2</a> <h3>Chapitre 1</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam...</p> <h3>Chapitre 2</h3> <a id="chapitre2"></a> <p>Contenu du chapitre 2</p> </body> </html>
- 1-
Lesliensversuneancresituedansuneautrepage Leprincipeestlemmemaisilfaudragalementdfinirladressage(relatifouabsolu)delapage. Exemple partirdufichierindex.htm,effectuezunlienversuneancredufichierpage1.htmdudossierdossier1. Aprs avoir ajout une ancre, soit <a id="ancre"></a> dans le fichier page1.htm, le lien dans le fichier index.htm devient: <a href="dossier1/page1.htm#ancre>Texte du lien</a>
- 2-
Lelienversunautresite
Unlienpeutfairerfrencedespagesdautressites,situesuneautreadressesurleWeb.Ladestinationdansla balisedelienseraalorsladressecompltedusiteoudelapage.Onparlealorsdadressageabsolu. Soitparexemple: <a href="http://www.w3.org/standards/index.htm">Lien</a> Prcisonsquil sagitbiendeladresse complte, avec la mention du protocole http://. En effet, avec les navigateurs rcents,cettementionestdevenuefacultativeetestignoreparlaplupartdesutilisateurs.
- 1-
Lelienversuneadresseemail
Pour ajouter un lment dinteractivit, il est intressant de permettre aux visiteurs de vous contacter par courrier lectronique. Ladestinationdanslabalisedelienseraalorsladresselectronique,prcdeduprotocoleducourrierlectronique (mail),soitmailto:(avecsimplementundoublepoint). <a href="mailto:editions@eni.com">Lauteur</a> Lactivationdulienouvriraunefentredelapplicationdemessagerielectroniquepardfautduvisiteur.Parexemple, MicrosoftOutlook. Bienquil ne sagissepasdecodeHtmlproprementparler,ilestaussipossibledeprdfinirunobjetdumessage ainsienvoyouprvoirlenvoidunecopieunautredestinataire.
q
Pourprdfinirunobjetlemail: <a href="mailto:editions@eni.com?subject=Formation Html5">Editions ENI</a>olecontenudesubjectest lobjet(prdfini).Danslecasdenotreexemple,ilsagitde"FormationHtml5".
Pourdfinirunecopiedumessage: <a href="mailto:editions@eni.com?cc=auteur@eni.com">Editions ENI</a> o le contenu de cc est ladresse lectroniquedestinelacopie.
Pourcombinerlespossibilits: <a href="mailto:editions@eni.com?subject=Formation Html5&cc=auteur@eni.com">Editions ENI</a>
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="mailto:editions@eni.com?subject=Formation Html5&cc=auteur@eni.com"> Editions ENI</a> </body> </html>
- 1-
- 2-
Lelienpourtlchargerunfichier
Pour permettre de tlcharger un fichier, il suffit de spcifier le nom (avec lextension) de celuici. Cette faon de procderestvalablepourautantquelefichierHtmletlefichieroffertentlchargementsoientsitusdanslemme dossierousousdossier. Soitunfichier"formation.pdf"situdanslemmedossier.Lecodedevient: <a href="formation.pdf">Version PDF</a> Si une application qui lit les fichiers pdf (Adobe Acrobat Reader par exemple) nest pas installe sur lordinateur du visiteur, le navigateur de celuici propose la fentre dinvite de tlchargement. Par contre, si lapplication Adobe AcrobatReaderestprsentesurleposteduvisiteur,lenavigateurouvrelapplicationetaffichelefichier. Il en sera de mme pour tous les autres types de fichiers. Quand il ny a pas dapplication dfinie par dfaut pour lextensiondufichier,lenavigateurtlchargelefichier,aprsavoirproposlafentredinvitedetlchargement.
- 1-
Lelienversunefentrespcifique
Lespagesciblesparunlienpeuventsouvrirdansdesfentresspcifiquesgrcelattributtarget. Passonsenrevuelesdiffrentespossibilits:
q
target="_self"(dfaut).Lapagecibleduliensouvredanslammefentrequelapagededpartdulien. target="_top".Lapagecibledulienestaffichedanslammefentremaisoccuperalatotalitdelafentre daffichage.cestadedenotretude,selfettopontuneffetquivalent. target="_blank".Lapagecibleduliensouvredansunenouvelleinstancedunavigateurouunnouvelonglet deceluici.
Nousillustronscetattributtargetetspcialementtarget="_blank". DanslefichierPage1: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Vers <a href="page2.htm" target="_blank">Page 2</a> </body> </html>
- 1-
Lacouleuretlesoulignementdesliens
Hritage datant du dbut du Html, les liens apparaissent par dfaut souligns et de couleur bleue pour le lien non visit,decouleurpourprepourlelienvisitetrougepourlelienactif. Le soulignement est une convention majeure du Web pour indiquer les liens hypertextes. Pour ne pas drouter linternaute dbutant, celleci doit tre maintenue le plus souvent possible. Pourtant sous le plan esthtique, le soulignementsystmatiquedansunepagecomportantdenombreuxliens,peutalourdirlaprsentationdelapage. Ilestpossibledenleverlesoulignementparunesimplefeuilledestyle(text-dcoration: none). Demme,pouruniformiserlacouleurdesliens,lapropritdestylecolor: valeur;peuttreutilise. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <style type="text/css"> a { text-decoration: none; color: black;} </style> <meta charset="iso-8859-1"> </head> <body> Vers <a href="page1.htm">Page 1</a><br> Vers <a href="page2.htm">Page 2</a><br> Vers <a href="page3.htm">Page 3</a><br> </body> </html>
- 1-
Uneinfobullesurunlien
Lattributtitle="texte" (qui nestpasspcifiquelabalisedelien)permetdeproposeruneinfobulleexplicativeau survoldulienparlecurseurdelasouris.Cepetit"plus"energonomieestsurtoutapprcientermesdaccessibilit, parlesinterfacesvocalesquiguidentlessurfeursnonvoyants. InitialementrepriseparInternetExplorer,cetteinfobulleapparatdanstouslesnavigateursdenotretude. <a href="page2.htm" title="lien vers le chapitre 2">Suite</a> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="page2.htm" title="Lien vers le chapitre 2">Suite</a> </body> </html>
- 1-
Lesnouvellespossibilitsdeliens
Leslienspeuventmaintenantportersurnimportequellmentdetypebloccommelesdivisions(<div>)etitemsde liste(<li>). Ainsi,lecodesuivantestvalideenHtml5alorsquilnelestpasenHtml4.0. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="fr"> <head> <title>Html5</title> <style> div { width: 280px; height: 100px; border: 1px solid black; padding-left: 3px;} a { text-decoration: none; color: black;} </style> <meta charset="iso-8859-1"> </head> <body> <p>Cliquez sur lextrait pour le texte complet.</p> <a href="page2.htm"> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam...</div> </a> </body> </html>
Lecurseurenformedemainattestelexistencedunliensurlensembledeladivision. Voilquirisquedtredroutantpourlutilisateurquandcecisemettraenplace!
- 1-
Prambule
Le mouvement stait dj amorc avec le Html 4.0 et le Xhtml 1.0. Il se renforce avec le Html5. Les tableaux sont exclusivement rservs la prsentation de donnes. Il nest plus question dans une application Web moderne dutiliser les tableaux pour raliser la disposition de la page. Ces tableaux de prsentation, souvent imbriqus dans dautrestableaux,taientledfautdelaconceptiondepagesWebdanscequelonpeutappelerpostriorileWeb 1.0.Cesmultiplestableauxalourdissaientlecodesourceetenrendaientlalecturequasiimpossible.Parailleurs,ces tableauxcomplexescompliquaientgrandementlalecturedesaidesvocalesutilisesparlespersonnesnonvoyantes. Ladispositiondeslmentsdelapageestmaintenantassurepardesbalises<div>. RiendebiennouveaudansleHtml5parrapportauHtml4.0.Ilfautcependantnoterladisparitiondetrsnombreux attributs de prsentation qui doivent maintenant tre imprativement repris par des feuilles de style CSS. Tout ceci seradtailldanslasuitedecechapitre. Toutes les balises et tous les attributs du Html5 relatifs aux tableaux sont parfaitement compatibles avec les navigateursdumarch.
- 1-
Lacrationduntableau
Untableau(<table>)comportedeslignes<tr>.Ceslignescontiennentdescellules<td>. Lagencement de ces diffrentes balises pour afficher un tableau suit une logique que lexemple suivant nous permettradillustrer. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html> LetableauenHtmlseconstruitainsi:
q
Ondclarequelonouvreuntableauaveclabalise<table>. Cetableaucomporteunepremireligneintroduiteparlabalise<tr>. Cettelignecomporteunepremirecellulequelonouvreaveclabalise<td>. Soit1commeuniquecontenudecettecellule. Fermeturedecettepremirecellule</td>. Passonslasecondecellule<td>2</td>. Findelapremireligne,donc</tr>. Vientlalignesuivantesoitnouveau<tr>. Cettelignecontientlescellules<td>3</td><td>4</td>. Findelasecondeligne</tr>. Etenfinlabalisedefermeturedutableau</table>.
- 1-
Commentaires
q
Cettebalise,basiqueenHtml,estparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise<table>doitobligatoirementtreferme.Encasdoublidelabalisedefermeture</table>,letableau risquedenepassafficherounepassaffichercorrectement.
Passons aux attributs de la balise <table>. notre grande surprise, cette balise ne comporte plus dattributs en Html5!Enfait,nousaurionspucrire,necomporteplusdattributs.LeHtml4.0proposaitlesattributswidth,border, cellpadding,cellspacing,frameetrules.TouscesattributsontdisparuenHtml5etdoiventtreprisenchargepar desfeuillesdestyleCSS. Lesbalises<tr>et<td>suiventlemouvementavecladisparitiondesattributsalignetvalign.
1.Lalargeurdutableau
LalargeurdutableauestdtermineparlapropritdestyleCSSwidth(largeur). Exemple Lecodeprcdentpourunelargeurdetableaude250pixelsdevient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { width: 250px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
- 2-
Ilestgalementpossiblededterminerlahauteurdutableauparlapropritdestyleheight. <style> table { height: 150px;} </style>
2.Lesborduresdutableau
Les bordures dun tableau et dautres lments Html sont introduits par la proprit de style CSS border (pour bordure). Pourobtenirdesborduresclassiquesduntableau,ladmarcheestunpeuplusparticulire. Notrebutestdajouterunebordurede1pixel(1px),decouleurnoire(black)etavecuntraitplein(solid). <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; width: 250px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
Le rsultat ne rpond pas tout fait nos attentes et cest logique car nous avons demand par la proprit de styledajouterunebordureautableau(table).Ilfautgalementdemanderdajouterunebordureauxcellules<td> quiconstituentletableau(td). <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title>
- 3-
<meta charset="iso-8859-1"> <style> table { border: 1px solid black; width: 250px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
Cequinecorrespondtoujourspasaursultatescomptcarilsubsisteunespaceentrelaborduredutableauetles borduresdescellules(vestigedelattributcellspacingpourlesinitis).Pourrduirecesdeuxborduresenuneseule, onutiliselapropritdestyleborder-collapse. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
- 4-
IlexisteenCSSdautresformesdebordures.Cellesciserontdtaillesdanslapartiedecetouvrageconsacreaux feuillesdestyle.
3.Lalignementdutableau
Letableauesticialigngauche.Pourunalignementcentr,ilfautpasserparuneastuce.Lefaitdemettreune marge(margin)automatiquegauche(left)etdroite(right)dutableauprovoquelecentrage. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
- 5-
4.Lalignementdescellulesdutableau
Lecontenudescellulesesticialigngauche.Ilseraitplusesthtiquedelecentrer(center)danslescellules.La propritdestyletext-alignestalorsutilise. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
- 6-
Commentaire Avec text-align: center appliqu au tableau (<table>), toutes les cellules du tableau auront un contenu centr danscellesci.
- 7-
Lescellulesdetableaux
LescellulespeuventcontenirtousleslmentsdfinisparleHtml,soitdutexte,desimages,desliens,desarrire plansetmmedestableaux. EnHtml5,lesattributswidth,height,align,valign,abbr,axisetscopeduHtml4.0ontdisparu.
1.Lalargeurdescellules
Pardfaut,lenavigateuradaptelalargeurdescellulesselonleurcontenu. Soitlexemplesuivantduntableaudetroiscolonnessansspcificationsparticulires.
Il faudra avoir recours la proprit de style width mais cette fois applique la balise <td> pour uniformiser la largeurdescellules. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td>Cellule 1</td><td>Cel 2</td><td>3</td> </tr> <tr> <td>Cellule 4</td><td>Cel 5</td><td>6</td> </tr> </table> </body> </html>
- 1-
2.Lalignementhorizontal
Lalignement horizontal du contenu dune cellule peut tre gauche, centr ou droite. Celuici est obtenu par la propritdestyletext-alignappliqueunecellule.Laproprittext-alignpeutprendrelavaleurleft(gauche), center(centr)ouright(droite).Lavaleurpardfautestleft. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 290px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td style="text-align: left;">Produit 1</td> <td style="text-align: center;">En stock</td> <td style="text-align: right;">3.43 </td> </tr> <tr> <td style="text-align: left;">Produit 2</td> <td style="text-align: center;">En commande</td> <td style="text-align: right;">6.72 </td> </tr> </table> </body> </html>
La proprit de style a t applique ici directement dans le code le la balise <td> par style="text-align: xxx;" (style en ligne). Il y a dautres faons dimplmenter cette proprit de style. Vous les dcouvrirez lors de ltudeplusdtailledesfeuillesdestyleCSS.
3.Lalignementvertical
Par dfaut, lalignement vertical du contenu dune cellule est le milieu de la cellule. Ce qui risque dentraner des situationspeuesthtiqueslorsdellaborationdevotretableau.
- 2-
Ilestprudentdeprvoirunalignementverticalverslehautparlapropritdestylevertical-align: topappliqu auxcellules<td>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 140px;} td { border: 1px solid black; vertical-align:top;} </style> </head> <body> <table> <tr> <td style="width: 10%;">1</td> <td>xxxxx xxxxx xxxxx xxxxx xxxxx</td> </tr> <tr> <td style="width: 10%;">2</td> <td>xxxxx xxxxx</td> </tr> <tr> <td style="width: 10%;">3</td> <td>xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx</td> </tr> </table> </body> </html>
- 3-
4.Lamargeintrieuredescellules
Dansnoscapturesdcran,lecontenudelacelluleestaccollaborduredecelleci.Cequinestpastrsesthtique etnuitlalisibilitdesdonnes.Lapropritdestylepaddingpermetdajouterdelespaceentrelecontenudela celluleetlaborduredecelleci. Ilestimportantdedistinguerlamargeextrieurequiestdsigneparmarginetlamargeintrieurequiestreprise souslevocablepadding. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; padding: 15px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> </html>
On remarque que la proprit de style padding a ajout de lespace tout autour du contenu de la cellule. Il est possibledenajouterunespacequentrelaborduregaucheetlecontenuparlapropritpadding-left. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black;
- 4-
border-collapse: collapse; width: 250px;} td { border: 1px solid black; padding-left: 5px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> </html>
5.Larrireplandecouleur
Depuis la disparition de lattribut bgcolor, lajout dune couleur darrireplan doit passer par la proprit de style background-color. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} .couleur { background-color: #99ccff;} </style> </head> <body> <table> <tr> <td>1</td> <td class="couleur">2</td> </tr> <tr> <td>3</td> <td class="couleur">4</td> </tr>
</table> </body> </html>
Cettepropritdestyledarrireplanbackground-colorpeutaussisappliquerauxbalises<table>et<tr>. Nous en apprendrons plus sur la notation des couleurs au chapitre Notions de base des CSS La notation des couleurs.
- 6-
Lafusiondescellules
Ilestpossibledefusionnerhorizontalementouverticalementdescellules. Soituntableaudedpartdedeuxlignesettroiscolonnes. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
1.Lafusiondecolonnes
Pour fusionner des colonnes, le Html5 dispose de lattribut de cellule colspan="x" o x correspond au nombre de colonnesquelonsouhaitefusionnerhorizontalement. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style>
- 1-
table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td colspan="3" style="text-align: center;">Titre du tableau</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
2.Lafusiondelignes
Pourfusionnerdeslignes,leHtml5disposedelattributdecellulerowspan="x"oxcorrespondaunombredelignes quelonsouhaitefusionnerverticalement. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td>
</tr> </table> </body> </html>
Commentaire Lapremirecolonnedesdeuxlignesestfusionne.Remarquezlalignementverticalcentrpardfaut.
- 3-
Lescellulesdentte
Lescellulesdenttedecolonnesoudelignessontdfiniesparlabalise<th> </th>.Ellesfournissent,enquelque sorte,untitreauxdonnesdelacolonneoudelaligne. Dans les navigateurs visuels, le contenu de la balise<th> apparat en gras et en centr. Cest peuttre pour cette raison que celleci est souvent nglige par les concepteurs. Elle fait pourtant partie historiquement des balises dencodagedestableauxenHtml.NotonsqueleurapparencepeuttoujourstremodifiepardesfeuillesdestyleCSS. La balise<th> a t garde dans la spcification du Html5 car elle est dune grande utilit avec les lecteurs dcran utilis par les personnes non voyantes. Elle contribue ainsi laccessibilit des sites web et particulirement des tableauxqui,silssontdunecertaineampleur,posentviteproblmelorsquilssontdcouvertsparlaudition. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <th>Attribut</th> <th>Fonction</th> </tr> <tr> <td><i>colspan</i></td> <td>Pour la fusion de colonnes</td> </tr> <tr> <td><i>rowspan</i></td> <td>Pour la fusion de lignes</td> </tr> </table> </body> </html>
- 1-
Lersumdutableau
Lattributsummarydelabalise<table>permetdefournirunrsumdutableau. Cersumnapparatraenaucunefaondanslaprsentationvisuelledelapage.Celuicinestprisenchargequepar lessynthsesvocalesetautresbarrettesbraillepourfournirunrsumdutableauavantlexploration des donnes parlespersonnesvisuellementdficientes.Cestunefoisdeplusunoutilpourlaccessibilitdessites. NotonsquenHtml5,lattributsummaryestleseuletuniqueattributdelabalise<table>. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table summary="Le tableau prsente les attributs utiliss pour fusionner les lignes et les colonnes dun tableau Html"> <tr> <th>Attribut</th> <th>Fonction</th> </tr> <tr> <td><i>colspan</i></td> <td>Pour la fusion de colonnes</td> </tr> <tr> <td><i>rowspan</i></td> <td>Pour la fusion de lignes</td> </tr> </table> </body> </html> Lacapturedcranestidentiquecelledupointprcdenttantdonnquecetattributnaaucuneactionvisuelle.
- 1-
Lalgendeduntableau
Labalise<caption>permetdassocieruntitreouunelgendeautableau. Labalise<caption>doittreplacejusteaprslabaliseouvrante<table>etnepeutapparatrequunefoisdansle tableau. Par dfaut, la plupart des navigateurs affichent le contenu de la balise <caption> de faon centre audessus du tableau.IlestpossibledemettrecettelgendeendessousdutableaulaidedelapropritdestyleCSScaption {caption-side: bottom}. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <caption>La lgende du tableau</caption> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
- 1-
Legroupementdecolonnes
Labalise<colgroup>estutilisepourgrouperdescolonnesenvuedeleurappliquerunemiseenformelensemble desbalisesdugroupeparlentremisedunefeuilledestyleCSS. Lattributspan="x"dterminelenombredecolonnesainsigroupes.Pardfaut,lavaleurdexest1.Cetattributspan estleseulattributdelabalise<colgroup>.Lesattributsalign,valign,widthduHtml4.0ontdisparu. Enoutre,labalise<colgroup>sepositionnejusteaprslabalise<table>(oujusteaprslabalise<caption>sicelleci estutilise)etavanttoutebalise<tr>ou<td>. Pardfinition,labalise<colgroup>nesappliquequepourlestableaux. Exemple1 Soit un tableau de trois lignes et trois colonnes. Un arrireplan de couleur ainsi quun alignement centr sont appliqusauxdeuxpremirescolonnes. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} colgroup { background-color : #99ccff; text-align: center;} </style> </head> <body> <table> <colgroup span="2"></colgroup> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
Exemple2
- 1-
Silonsouhaiteregrouperlesdeuxdernirescolonnes,ilfautdclarerplusieursbalises<colgroup>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} #colonnes { background-color : #99ccff; text-align: center;} </style> </head> <body> <table> <colgroup span="1"></colgroup> <colgroup id="colonnes" span="2"></colgroup> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
- 2-
Lastructurationduntableau
LeHtml5prvoitdesbalisespourstructurerdefaonlogiquelecontenuduntableau. Cesbalisessont:
q
<thead>pourregrouperlesinformationsconcernantlenttedutableaucommeparexempleletitreetlintitul descolonnes. <tbody>pourlecorpsdutableau,soitlensembledesdonnesdeceluici. <tfoot>pourlecontenudebasdepagecommeparexempledesremarquesouunelgende.
Cesdivisionslogiquesnaffectentenrienlaprsentationpardfautdutableaumaisellespeuventtrereprisespar despropritsdestylepouragrmenterlaprsentationdutableau. Onnoteraquelabalise<tfoot>doitsesitueravantlabalise<tbody>desortequelenavigateurpuisseprvoirlepied depageavantlarceptiondeslignesdedonnes. Exemple Appliquonscesbalisesuntableau. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <thead> <tr> <td colspan="2" style="text-align: center;">La fusion de lignes et de colonnes</td> </tr> </thead> <tfoot> <td colspan="2" style="text-align: center;">W3C Working Draft 24 June 2010</td> </tfoot> <tbody> <tr> <td><i>colspan</i></td> <td>Pour la fusion de colonnes</td> </tr> <tr> <td><i>rowspan</i></td> <td>Pour la fusion de lignes</td> </tr> </tbody> </table> </body> </html>
- 1-
Cetableauneprsenteriendeparticulier.Lemmetableauavecdespropritsdestyleaffectantlesbalises<thead> et<tfoot>devient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} thead { background-color: #99ccff; font-size: 1.4em;} tfoot { font-size: 0.7em;} </style> </head> <body> <table> <thead> <tr> <td colspan="2" style="text-align: center;">La fusion</td> </tr> </thead> <tfoot> <td colspan="2" style="text-align: center;">Source : W3C Working Draft 24 June 2010</td> </tfoot> <tbody> <tr> <td><i>colspan</i></td> <td>Pour la fusion de colonnes</td> </tr> <tr> <td><i>rowspan</i></td> <td>Pour la fusion de lignes</td> </tr> </tbody> </table> </body> </html>
- 2-
Commentaire Labalise<tbody>estindispensablepouraccderaucontenuduntableauenJavaScript.
- 3-
Lesformatsdimage
Pour rduire au maximum le temps de tlchargement, le Web rclame des formats de fichier particuliers le format GIF,JPEGetPNG.Cestroistypesdeformatcomportenttousunalgorithmedecompression. Sansdbordersurlesujetdutraitementdesimagesnumriquesquidpasseraitlecadredecetouvrage,dtaillons brivementcestroisformats. LeformatGIF Le format GIF (pour Graphics Interchange Format) a connu son heure de gloire aux dbuts du Web. Il tait alors parfaitementadaptauxcartesgraphiquesdelpoque(souventmaximum256couleurs)etauxfaiblescapacitsdes lignesdetlphoneanalogiques(tauxdecompressionlev).
Caractristiques
Le format GIF ne permet de coder les images quen maximum 256 couleurs. Ce qui nest plus trs raliste avec les dveloppementsetlespossibilitsdesimagesnumriques.
q
Cestunformatdecompressionefficaceetrapide.LesimagesGIFsontdunpoidsenoctetrduit. Lacompressionseffectuesanspertededonnesetsanspertedequalit. La fonction dite entrelace permet un affichage rapide dimages qui deviennent progressivement de plus en plusnettes. La possibilit, sous la spcification GIF89a, de dfinir une des 256 couleurs comme tant transparente. laffichage apparaissent alors les lments qui sont placs sous le graphique aux endroits o limage est transparente. Lesimagessontfacilementditablesetmodifiablesvulenombrelimitdecouleurs. Seulformatquipermettedeconstruiredesanimations,sortesdepetitsdessinsanims,aveccequonappelle lesGIFSanims. LeformatGIFfaitlobjetdunbrevetdtenuparUNISYS.
Conclusion
Enraisondesalimitation256couleurs,leformatGIFnestpasdutoutappropriauxgraphiqueshautersolution commelesphotos,lesimagesnuancesetlesdgrads.Parcontre,ilexcelleencorepourlespetitslogos,boutons, puces, barres, symboles, et autres cliparts frquents pour certains graphiques du Web qui ne ncessitent pas une palettedecouleurstrstendue.IlestcependantdeplusenplussupplantparleformatPNG. LeformatJPEG LeformatJPEGfigurepourJointPhotographicExpertGroup,doncnonpaspourlenomduformatgraphiquemaispourle nomdelacorporationquiadveloppceformat.Cestletypedeformatleplusrpandudansluniversdelaphoto numrique.
Caractristiques
LeformatJPEGpermetdesauvegarderjusqu16,7millionsdecouleursparimage. Sontauxdecompressionestefficaceencequiconcernelataillersultante. Ilpermetdefairevarierletauxdecompressionselonlesbesoinsduconcepteur.Unecompressionde1520 %fournirauneimagedequalitsatisfaisantepourunetailledefichierrduite. Revers de la mdaille, il y a une perte de qualit en fonction du taux de compression. Plus le facteur de compressionestlev,pluslaqualitdelimageestmauvaise.Cestdoncunecompressiondestructive.
- 1-
Desdformations(artifactsouartefacts)apparaissentsouventdanslespassagesdecouleurstranchs,donc surlescoinsetlesbordsdesobjets. Depuisquelquesannes,lafonctionentrelaceestimplmente,cequipermetunaffichageprogressifetplus rapidesurleWeb. LeformatJPEGnoffrepasdepossibilitdetransparencenidanimations.
Conclusion
Le JPEG est un excellent format pour les photos, spcialement celles o il y a des tonalits diverses et des dgradsdecouleurs.Maisilnestpasexemptdedfautsavecsespertesdedonnesetsesdformations. cause des pertes de donnes et des dformations, il est impratif de respecter la rgle de sauvegarder limageoriginaleetdetravailleruniquementsurdescopiesdecelleci.
LeformatPNG LeformatPNG,pourPortable Network Graphic,estprsentcommeleformatdufutur.Ilsagitdun format graphique conuspcialementpourlamiseen uvresurleWeb.LarecommandationduW3CconcernantlePNGremonte1996. LePNGdoitthoriquementrassemblertouslesavantagesdeGIFetduJPEG.Ilcommencetrelargementretenupar lesconcepteursdapplicationsWeb.
Caractristiques
LeformatPNGsoutient16,7millionsdecouleurscommeleformatJPEG. LeformatPNGestunespcificationconuespcialementpourInternetetestlobjetdunerecommandationdu W3C. Sacompressionestperformante.LetauxdecompressionduformatPNGestde5%25%suprieurcelui duformatGIF. Cettecompressionseffectuesanspertesdedonnesetdequalit. Ilpermetlatransparencejusqu256couleurs. LeformatPNGestunformatouvertetnestpasbrevet. Safonctionentrelacepermetunaffichageprogressif. Ilnepeutgnrerdesimagesanimes.
Conclusion
Le format PNG est appel tre de plus en plus utilis lavenir car il reprsente un excellent compromis entre le formatGIFetJPEG.LesprofessionnelsladoptentlargementenlieuetplaceduGIFetpourlespetitesphotos. LeformatWebP LeWebPestunnouveauformatdimagequirisquedeprendredelimportancedanslesprochainesannes.Ceformat est dvelopp par Google partir dun des formats de la nouvelle balise <video> du Html5 (le WebM). Selon les premiersessais,leWebPrduiraitlatailledesfichiersde39%parrapportauxformatsJPEG,PNGetGIF,sansperte dequalitperceptible. Lepoidsdesphotos Ilsembleillusoiredechargerdirectementunephotodevotreappareilphotonumriquesurunsite.Certaines"psent" jusqu4Mo,cequi,mmeavecuneconnexionrapide,prendrauntempscertaindechargement. Onpeutconseiller:
- 2-
Derecadrerlesimagespournerecueillirquecequiestutile. Deredimensionnercetteimagerecadre. Dadopter un taux de compression denviron 15 20 % pour les images JPEG. La perte de qualit nest quasimentpasperceptiblel ilnormal. Dediminuerlenombredecouleursdelimage,siloprationsyprte.
Ces diffrentes manipulations devraient ramener la taille du fichier une dimension beaucoup plus raisonnable et amliorersensiblementletempsdetlchargement.
- 3-
Linsertionduneimage
Linsertionduneimageestobtenueparlabalise: <img src="adresse du fichier image"> La balise <img> est une balise unique qui ne comporte pas de balise de fermeture. La notation Xhtml 1.0 <img src="adresse du fichier_image" />estaussiaccepteenHtml5. EnHtml5,labaliseimage<img>necomportequunseulattributobligatoire: Lattribut src="adresse du fichier image". En Html, limage nest pas directement incluse dans le document mais provientdunfichierexterne,appelparlattributsrc.Celuiciprciseladresserelativeouabsoluedufichierimagequi doittreaffichdanslapage. Ainsi,pouruneimagesituedanslemmerpertoirequelapageHtml(adressagerelatif),oncrira: <img src="image.png"> ou <img src="image.png" /> PouruneimagesituesurunsiteduWeb(adressageabsolu),oncrira: <img src="http://www.html5.com/images/image.png"> ou <img src=http://www.html5.com/images/image.png /> Lesrglesdadressagesontidentiquescellesabordesauchapitre"Lesliens". Lesattributsfacultatifsdelabaliseimagesont:
q
Les attributs heightet width. Ces attributs permettent de dfinir en pixels, respectivement la hauteur et la largeur de limagelcran.Ladfinitiondecesattributspermetaunavigateurderserverunemplacement pourlimageavantsontlchargementcomplet,toutenluipermettantdecontinuerlacompositiondelapage etafficherletextedecelleci. En dfinissant la dimension de limage,lechargementestacclretdonne matire patienter aux internautes impatients. Bien que facultatifs, ces attributs sont considrs comme essentielsparlesconcepteursprofessionnels. Silefichiernestpasdisponibleousiladressageesterron,uneicneseraafficheenlieuetplacedelimage souhaite.
Lattribut alt="texte associ". Cet attribut contient une brve description de limage. Ce texte est surtout prvu pour les personnes non voyantes car il sera lu par les interfaces vocales. Plus rcemment encore, le contenudelattributaltestaussiutilisparlesmoteursderecherche(dontGoogle)pourlerfrencementet leclassementdunsiteainsiquepouralimenterleurbanquedimages. ObligatoireenHtml4.0etenXhtml1.0,est(re)devenufacultatifenHtml5.Cecaractrefacultatifalimentede nombreuses ractions, discussions et controverses dans les forums spcialiss. Rappelons que la recommandationHtml5nestpasencoredfinitiveaumomentdelcrituredecetouvrage.
Les attributs de prsentationalign, border,hspace etvspace, dj dprcis (deprecated) en Html 4.0, ne sont plus reprisdansleHtml5.IlfaudrafaireappeldesfeuillesdestyleCSSpourremplacercesattributsdisparus. Pour les spcialistes du Html, signalons galement que lattribut longdesc qui permettait dajouter une description dtaillelattentiondessynthsesvocalesagalementdisparu. Exemple <!DOCTYPE html> <html lang="fr"> <head>
- 1-
<title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <img src="globe.jpg" width="120" height="120" alt="Globe terrestre"> </body> </html>
Limageglobe.jpgestdisponibledanslespacedetlchargement.
- 2-
Linsertiondunliensuruneimage
Leslienspartirduneimageseralisentsimplementenentourantcelleciparlabalisedelien<a> </a>. Certains navigateurs continuent entourer cette image dune bordure (inesthtique) pour signaler le lien. Internet Explorer 8 et 9 ainsi que Firefox 3.6 perptuent cette faon de procder. Les autres navigateurs de notre tude (Firefox4,Opera10,Safari5etChrome7)najoutentpluscettebordure.
Pourenlevercettebordure,ilfautpasserenHtml5parunedclarationdestyle.Danslattentedeltudedtailledes feuillesdestyle,ilsuffitdajouterlabalise<img>ladclarationstyle="border: none;". Lecodecompletdevient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a> <img src="globe.jpg" width="120" height="120" alt="Globe terrestre" style="border: none;"> </a> </body> </html>
- 1-
- 2-
Linsertiondunecouleurdarrireplan
Depuisladisparitiondelattributbgcolor,ilnestpluspossibledajouterunarrireplandecouleurunlment.Ilfaut imprativementpasserparlespropritsdestyleCSS,background-colorenloccurrence. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <style> body {background-color: rgb(200,215,230);} </style> <body> </body> </html>
LesfeuillesdestylerelativesauxarrireplansseronttudiesendtaildanslapartieconsacreauxCSS.
- 1-
Linsertionduneimagedarrireplan
LattributbackgroundtantdclarobsolteenHtml5,ilnyadautresolutionquedepasserparlapropritdestyle background-imagepourinsreruneimagedarrireplan. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <style> body {background-image: url(bg.gif);} </style> <body> </body> </html>
- 1-
Lesimagesractives
1.Notion
Lesimagesractivespermettentdeffectuerdesliensdistinctsenfonctiondunepartiedimageoudunezone(area) prdfiniedecelleci.Ainsi,parexemple,surunecartedelaFrance,onpeutimaginerquunclicsurcellecimnerait levisiteurversunfichieraveclenometlesinformationsdudpartementconcern. IlfautsignalerquelemploidesimagesractivesdevientdeplusenplusraredanslesapplicationsWebactuelles. Lesproblmesquellesposentpourunrfrencementefficaceparlesmoteursderechercheysontpourbeaucoup. Onprenduneimage.
Pourchaquezoneretenue(iciuncube),onvaassocierunfichier.
Pourcefaire,onvadfinirdeszonesdanslimage,unpeucommeavecunecartedegographie(mapenanglais)et associerchacunedeceszonesunfichierHtml.
On obtient ainsi une image ractive, dite aussi "mape", car elle est dcoupe en zones linstar des cartes gographiques. On appellera la carte (map), les balises Html qui reprennent la fois les zones de limage et les fichiersassocis. Il existe plusieurs mthodes pour raliser cet effet dimages ractives : les mthodes NCSA, CERN et CSIM. La mthodeCSIM(ClientSideImageMap)estdeloinlaplusutiliselheureactuellecarellefaitpartiepartentiredu langageHtml.Aveccettemthode,lesfichiersdelacartesontinclusdanslapageHtmletnencessitentpaslappel desressourcesadditionnellesctserveurpourraliserleursfonctions.Cestcettemthodequenousutiliserons.
2.Lesbalisesetattributs
Les balises des images ractives peuvent sembler trs hermtiques pour lutilisateur moyen. Cependant, une fois dcodes,ellesdterminent,enpeudlments,toutcedontlenavigateurabesoinpourlestraiter. Labalisedelimageractive
- 1-
<img src="fichier_image" usemap="#nom_de_la_carte"> En fait, on ajoute simplement la balise classique de limage lattribut usemap pour avertir le navigateur quil doit employer pour celleci une carte (usemap) et le nom de la carte en question. Cette carte sera alors incluse directementdanslefichier,unpeucommeuneancredelien.Lecodereprenddailleurslanotationavecledise#, propreauxancres. Lesbalisesdelacarte Pourrappel,lacarte(map)estdcoupeenzones(area). <map> <map id="nom_de_la_carte"> <area shape="forme" coords="coordonnes" href="destination"> ... autres balises area ... </map> Reprenonsleslmentsunparun:
q
Labalise<map id="nom_de_la_carte"> </map>. Ondonneunnomlacarte(map)parlidentifiantidetcestcenomquiseraretenudanslattributusemap,vu quelqueslignesplushaut.
Labalise<area shape="forme" coords="coordonnes" href="destination">. <area> Cettebalisedtermineleszonesractivesdelimage.
Lattributshapede<area> Lattributshape="forme"dterminelaformedelazone:
q
rectpourunrectangle. circlepouruncercle. polygonpourunpolygoneirrgulier. defaultpourgrerlesclicseffectusendehorsdunedeszonesractives.
Lattributcoordsde<area> Lattributcoords="coordonnes"notelescoordonnesquipermettrontaunavigateurdereconstituerlaforme gomtrique. Nous dtaillons ciaprs la faon, spcifique chaque mthode, de noter ces coordonnes. La vritable difficult pour le webmestre est de trouver les coordonnes des points dans limage. Cest ici quune applicationdetraitementdelimage,commeAdobePhotoshopouGimp,servleutile. Pourunrectangle:coords="x,y,x,y".
Pouruncercle:coords="x,y,r"soitlepointcentraletlerayon.
Pourunpolygone:coords="x1,y1,x2,y2,x3,y3,x4,y4"etcepourautantdepointsquilyadesommetsdans lepolygone.
Lattributhrefde<area> Lattributhref="destination"spcifielefichierassocilazoneslectionne.Ladressagesefaitdelafaon tout fait classique en Html. Facultatif si le concepteur souhaite quun clic sur une zone nentraneaucune action.
Lattributaltde<area> Lattributalt="commentaire"(facultatifenHtml5)permetdajouteruneillustrationtextuelle.
3.Unexemplecomplet
SoitlefichierHtml5suivant: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p> <img src="cubes.gif" height="121" width="136" alt=""> </p> </body> </html> Etlacartenomme"cartons"delimage"cubes.gif": <map id="cartons"> <area shape="rect" <area shape="rect" <area shape="rect" <area shape="rect" <area shape="rect" <area shape="rect" </map>
coords="37,9,72,40" href="a.htm" alt=""> coords="18,46,47,79" href="b.htm" alt=""> coords="61,43,93,78" href="c.htm" alt=""> coords="9,84,36,119" href="d.htm" alt=""> coords="48,85,77,116" href="e.htm" alt=""> coords="89,81,123,115" href="f.htm" alt="">
- 3-
Incluonslacarte(map)danslefichierHtml5pourcrerlimageractive. Cetteinclusionseraliseendeuxtemps: Onajoutedabordlinformationpourlenavigateurusemap="#cartons"danslabalisedelimage. OninclutensuitelacartenimporteodanslefichierHtml5. Lefichierfinaldevient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p> <img src="cubes.gif" usemap="#cartons" height="121" width="136" alt=""> </p> <map id="cartons"> <area shape="rect" coords="37,9,72,40" href="a.htm" alt=""> <area shape="rect" coords="18,46,47,79" href="b.htm" alt=""> <area shape="rect" coords="61,43,93,78" href="c.htm" alt=""> <area shape="rect" coords="9,84,36,119" href="d.htm" alt=""> <area shape="rect" coords="48,85,77,116" href="e.htm" alt=""> <area shape="rect" coords="89,81,123,115" href="f.htm" alt=""> </map> </body> </html> Limageetlesfichierssontdisponiblesdanslespacedetlchargement.
4.Leslogicielsdisponibles
LesditeursHtmlvolus,commeparexempleDreamweaver,disposentdefonctionspourraliserdirectementces imagesractives. Pourceuxquiprfrentencodermanuellement,ilexistequelquesapplicationsquipeuventaiderlesraliser.Citons MapThis,quevouspouveztlchargerladressewww.lehtml.com/htmlplus/mapthis.htm.Celogicielestfreeware,en anglais,efficacemaissonlookdevientdsuet.RetenonsXmap,unfreewaregalementenanglaismaisassezintuitif. Ilpeuttretlchargladressewww.carlosag.net/Tools/XMap/.
s
Ouvronslapplication.
Commenonsparchargerlimage(Loadimage)grceaumenulextrmegauchedelafentre.Nousavonsretenu limagemap.pngdisponibledanslespacedetlchargement.
- 4-
Appliquonsunezoneractivechaquepanneau.
Dans le mme menu, retenons loption rectangle (Rectangle HotSpot) et positionnons le rectangle sur le panneau suprieurgauche.
Remarquonslabotedeproprits(Properties)lextrmedroitedevotrecran.Ellenouspermettradedterminer lefichiercibledelazoneenprcisantsonattributHREF.
Faisonsdemmepourunsecondpanneau.Lelienattribuestb.htm.
Etensuitelespanneauxsuivants.
Le code de limage ractive est gnr au fur et mesure des manipulations dans la sousfentre au bas de lapplication.
Lecodecompletdevient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p> <img src="map.png" usemap="#map" height="135" width="135" alt=""> </p> <map name=map> <area shape=rect coords=0,0,90,90 href=a.htm> <area shape=rect coords=0,94,90,184 href=b.htm> <area shape=rect coords=94,0,180,90 href=c.htm> <area shape=rect coords=94,94,180,184 href=d.htm> </map> </body> </html>
- 6-
- 7-
Prambule
Il est souvent difficile de percevoir le pourquoi du comment de ces balises dites smantiques. Surtout que leur implmentation ne rpond en rien la dfinition acadmique de la smantique comme relation entre le signifi et le signifiant. Cesbalisessmantiquesdcriventlanaturedecertainslmentsducontenudunepage.Cesdernierspourrontainsi treplusfacilementrcuprsetrutilisspardesprogrammesautomates,soitdesmoteursderecherche. Exemple Lanouvellebalisesmantiqueoudorganisationdelapage<nav> </nav>indiquesimplementquesoncontenuest unmenudenavigation. <nav> <a href="#">Accueil</a> | <a href="#.htm">Item 1</a> | <a href="#.htm">Item 2</a> | <a href="#.htm">Item 3</a> | <a href="#.htm">Contact</a> </nav> Il est dautant plus difficile en comprendre lutilit que ces balises Html nont aucune influence sur la structure du contenuetbiensouventaucuneinfluencesurlaprsentationetlaffichagedelapage. Ce concept du Web smantique est une ide matresse de Tim BernersLee(linventeur du Web) qui le dfend avec convictiondepuisdenombreusesannes.
- 1-
Lesanciennesbalisessmantiques
LeHtml5ahritdesanciennesbalisessmantiquesduHtml4.0.Cesbalisespossdentunemiseenformequileur estspcifique. Cesbalisessmantiquessont:
q
<abbr> </abbr>quisignaleuneabrviation,parexempleSARLouTVA.Outresafonctionsmantique,cette balisesignaleauxsynthsesvocalesdenepastenterdelirelemottelquilseprsentemaisdelpeler. <acronym> </acronym>quisignaleunacronyme,soitunmotformdinitialesoudesyllabesdeplusieursmots commeONUpourOrganisationdesNationsUnies,nestplusrepriseparleHtml5.Onutiliseralabalise<abbr>. <address> </address>quiafficheuneadressedecontact.Soncontenuestaffichpardfautenitaliqueet enpetitscaractres.Prcisonsquaucunlienverscetteadressenesteffectuparcettebalise. <cite> </cite>quiafficheunecitation.Pardfautcettecitationestafficheenitalique. <code> </code>quisignaleunesyntaxeouducodeinformatique.Pardfaut,soncontenuestaffichdans unepoliceespacementfixe. <samp> </samp>quimetenvidenceuntextedexemple.Pardfaut,soncontenuestaffichdansunepolice espacementfixe. <dfn> </dfn>quidonneladfinitiondunterme.Pardfaut,cettedfinitionestafficheenitalique. <kbd> </kbd>quiindiquelutilisateurlessaisiesauclaviereffectuer.Pardfaut,soncontenuestaffich dansunepoliceespacementfixe. <var> <var> qui contient une variable. Par dfaut, le texte de la variable est reprsent dans une police italique. <strong> </strong>dfinituntexteimportant.Pardfaut,soncontenuestaffichengras. <em> </em>marqueuntextesurlequelonveutinsister.Pardfaut,soncontenuestaffichenitalique.
Commentaire Onpeutdonneruneautreallurequelaprsentationpardfautenutilisantlesfeuillesdestyle. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p> <address> Ecrit par Untel</b> <a href="mailto:untel@exemple.org">Contact mail</a><br> Addresse : BP 58 Ailleurs<br> Tlphone : 01 30 79 79 30 </address> </body>
- 1-
</html>
- 2-
Lesnouvellesbalisesdorganisation
Ces balises dorganisation sont plutt destines au concepteur de la page afin quil puisse distinguer plus aisment desportionsdecode.
1.Lesbalises<header>,<nav>,<footer>et<aside>
Siloneffectueunesynthsedespagesexistantessurlatoile,onpeutconstaterquellescomportentlaplupartdu temps,entotalitouenpartie,leslmentssuivants:
q
Un entte de page avec, par exemple, un logo, une bannire, le nom du site, un slogan ou un champ de recherche. Lesoutilsdenavigation,prcieuxetindispensablespourlaconsultationdesdiffrentespartiesdusite. Unepartieconsacreaucontenu. Une zone annexe qui permet dapporter des lments accessoires au contenu proprement dit, comme une publicit. Unpieddepageavecparexemplelamentionduncopyright,leplandusite,lesmentionslgales,lesrgles daccessibilit,etc.
Cequivisuellementpeutprendrelesformessuivantes:
Ouencore:
- 1-
Ouencore:
LideduHtml5atdecrerdenouvellesbalisespourpermettredidentifierplusclairementetplusrapidementces grandespartiesdudesigndelapage.Ainsi:
q
<header> </header>regroupeleslmentsdelenttedelapage.Cettebalisepeutremplacerutilement les<div id="header">quelonrencontrefrquemment. <nav> </nav>indiqueleslmentsdunmenudenavigation. <footer> </footer>signaleleslmentsdepieddepage.Cettebalisepeutremplacerutilementles<div id="footer">quelonrencontrefrquemment. <aside> </aside>avertitquilsagitdlmentsannexesaucontenu.
Prenonsunexempledecode: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title>
- 2-
<meta charset="iso-8859-1"> </head> <body> <img src="logo.png"> <h1>Nom du site</h1> <form action="http://www.google.com/search"> <input type="text" size="15" value=""> <input type="submit" value="Rechercher"> </form> <div> <a href="index.htm">Accueil</a> | <a href="item1.htm">Item 1</a> | <a href="item2.htm">Item 2</a> | <a href="item3.htm">Item 3</a> | <a href="item4.htm">Item 4</a> | <a href="contact.htm">Contact</a> </div> <h2>Nom de la page</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </p> <hr> <p>Copyright 201x</p> </body> </html> Soitunepageassezcommuneavec:
q
Unlogo. Lenomdusite. Unformulairederecherche. Desliensdenavigationdanslesite. Letitredelapage. Ducontenu. Unelignehorizontale. Unementiondecopyright.
- 3-
Ce code est correct, cestmmeduHtml5toutfaitvalide,maisriennest incorpor pour organiser la page et en distinguer des lments majeurs comme le code relatif lentte, aux menus de navigation et du pied de page. CetteinformationestapporteparlesnouvellesbalisesHtml5<header>,<nav>et<footer>. AveclesnouvellesbalisesdorganisationduHtml5,cecodepourraitprendrelalluresuivante: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <header> <img src="logo.png"> <h1>Nom du site</h1> <form action="http://www.google.com/search"> <input type="text" size="15" value=""> <input type="submit" value="Rechercher"> </form> </header> <nav> <a href="index.htm">Accueil</a> | <a href="item1.htm">Item 1</a> | <a href="item2.htm">Item 2</a> | <a href="item3.htm">Item 3</a> | <a href="item4.htm">Item 4</a> | <a href="contact.htm">Contact</a> </nav> <h2>Nom de la page</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
- 4-
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <footer> <hr> <p>Copyright 201x</p> </footer> </body> </html> Lecodeapparatainsipluslisibleetlonpeutdistinguerdupremiercoupd illeslmentsdecoderelatifslentte delapage,auxoutilsdenavigationetaupieddepage. VoillaseuleetuniquefonctiondecesnouvellesbalisesHtml5.Ilnefautpasleurchercherdesfonctionsdemiseen page ou de prsentation. Elles ne servent qu organiser la page et rendre la lecture du code plus aise principalementpourleconcepteur. Lacapturedcranestparailleurstotalementidentiquelaprcdente. CestlauteurdassocierventuellementdesfeuillesdestyleCSScesbalisespourenassurerlaprsentation.
2.Lesbalises<section>et<article>
Lecontenuprincipalpeutsontourtreorganisendiversesparties:
q
Labalise<section>dtermineunepartieducontenudelapageserapportantunthmedtermin. La balise <article> dfinit un contenu indpendant du document qui possde une identit part entire danslapagecommelarticledunblog,unpostdansunforumouunproduitdansunsitecommercial.
Prenonscommeexempleunblogavecdiffrentssujetsabordschaqueentrejournalire. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Jour 1</h1> <h2>Sujet 1</h2> <div>Prsentation du sujet 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <h2>Sujet 2</h2> <div>Prsentation du sujet 2</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <hr> <h1>Jour 2</h1> <h2>Sujet 1</h2> <div>Prsentation du sujet 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </body> </html> Cequisaffichecommesuitdanslenavigateur:
- 5-
Appliquonsdesbalises<section>et<article>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <section> <h1>Jour 1<h1> <article> <h2>Sujet 1</h2> <div>Prsentation du sujet 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </article> <article> <h2>Sujet 2</h2> <div>Prsentation du sujet 2</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </article> <hr> </section> <section> <h1>Jour 2<h1> <article> <h2>Sujet 1</h2
- 6-
<div>Prsentation du sujet 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </article> <hr> </section> </body> </html> Cetteorganisationducodepeutsevisualiserainsi:
3.Unexemplegnral
Organisons maintenant une page complte avec les balises <header>, <nav>, <footer>, <aside>, <section> et <article>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <header> <img src="logo.png"> <span>Nom du site</span> </header> <nav> <ul> <li><a href="">Accueil</a></li> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Contact</a></li> </ul> </nav> <section> <h1>Sujet de la page</h1> <article> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
- 7-
non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </article> </section> <aside> <h3>Archives</h3> <ul> <li><a href="">Aot 201x</a></li> <li><a href="">Juillet 201x</a></li> <li><a href="">Juin 201x</a></li> <li><a href="">Mai 201x</a></li> </ul> </aside> </body> </html> Letoutagrmentdequelquesfeuillesdestylepeutdonner,parexemple,lersultatsuivant:
L o cela se complique, cest que rien ninterdit de mettre des <nav> dans des <footer>, des<header> dans des <section>,des<header>dansdes<article>.CommecesbalisessontnouvellesetemblmatiquesduHtml5,certains auteursenusentetenabusent. Lexemple suivant tente dillustrer que lusage intensif de ces balises dorganisation risque finalement de plus embrouillerlecodequedelorganiser <section> <header> <h1>Les animaux de larctique</h1> </header> <article> <header> <h3>Lours polaire</h3> </header> <p>Lours blanc ou ours polaire (Ursus maritimus) est un grand mammifre carnivore originaire des rgions arctiques. Cest, avec lours kodiak, le plus grand des carnivores terrestres et il figure au sommet de sa pyramide alimentaire.</p> <footer> Source : Wikipdia </footer>
- 8-
</article> <article> <header> <h3>Les phoques</h3> </header> <p>On rencontre communment six espces de phoques dans les eaux canadiennes : le Phoque commun (Phoca vitulina), le Phoque annel (P. hispida), le Phoque du Groenland (P. groenlandica), le Phoque barbu (Erignathus barbatus), le Phoque capuchon (Cystophora cristata) et le Phoque gris (Halichoerus grypus).</p> <footer> Auteur : IAN MCTAGGART-COWAN Source : Lencyclopdie canadienne </footer> </article> <footer> Compilation darticles </footer> </section> Pourquecesbalisesdorganisationatteignentleurobjectif,ellesdoiventdonctreutilisesavecmodration.
- 9-
Denouvellesbalisessmantiques
LeHtml5introduitgalementunefouledenouvellesbalisessmantiques. Labalise<hgroup> Cettebalise<hgroup>estdestinecontenirungroupedebalises<hx>(aumoinsdeux).Elleestuneformedrivede labalise<header>. <hgroup> <h1>Titre de larticle</h1> <h2>Sous-titre de larticle</h2> </hgroup>
Labalise<time> La balise <time> dfinit une date et/ou une heure. Lattribut facultatif datetime indique la date et lheure selon la reprsentationnumriqueinternationaledelanormeISO8601. <time>Demain</time> est un autre jour. <time datetime="2012-10-05">Le 5 octobre</time> <time datetime="2012-04-13T00:19:00+02:00">Samedi 13 mars 19h</time>
Labalise<mark> Labalise<mark>metenvidenceunepartiedutexte. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <mark>Html5</mark> a remplac le Html 4.0. </body> </html> Le contenu de cette balise devrait tre surlign sur fond jaune, lidentique des rsultats de recherche dans les navigateurs. cejour,seuleslesversionsrcentesdeGoogleChromeetdeFirefoxinterprtentcettebalise<mark>.
Labalise<meter> La balise <meter> dfinit une mesure. Utilise uniquement pour les mesures avec un minimum connu et une valeur maximale. Cettebalisepossdesixattributs:
- 1-
value:lavaleurdecettedonnesurlchelle. min:leminimumpossible. low:leminimumatteint. high:lemaximumatteint. max:lemaximumpossible. optimum:lemaximumidal. cejour,seulGoogleChromeinterprtecettebaliseparunejaugeduplusbeleffet. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Votre score est de <meter value="14" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20. </body> </html>
Labalise<figure> Labalise<figure>peuttreutilisepourregrouperdeslmentstelsquedesimages,desvidosoummedutexte quiviennentenillustrationducontenuprincipal. Labalise<figcaption>,utiliseconjointementlabalise<figure>,fournitunelgendeauxlmentsainsiregroups. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h3>Les oliennes</h3> <p>Une olienne est une machine utilisant la force motrice du vent. Cette force peut tre utilise mcaniquement (dans le cas dune olienne de pompage), ou pour produire de llectricit (dans le cas dun arognrateur) [Source Wikipdia].</p> <figure> <img src="eole1.jpg" alt=""> <img src="eole2.jpg" alt=""> <figcaption>Quelques oliennes</figcaption> </figure> </body>
- 2-
</html>
Lesbalises<details>et<summary> La balise <details> dfinit des dtails ou un contenu accessoire. La balise <summary> fournit un rsum de ces lmentsaccessoires. Exemple <details> <summary>Plus dinformations...</summary> <p>Voici les ractions de nos lecteurs concernant le dveloppement... </p> </details> Aucun navigateur ne reconnat encore ces balises <details> et <summary>. Pourtant les perspectives sont intressantes car selon les spcifications du W3C, au clic du texte spcifi par la balise<summary>, le contenu de la balise <details> devrait apparatre la faon dun menu droulant. Et ceci de faon native, sans faire appel du JavaScript.
- 3-
Prsentation
Les formulaires occupent une place prpondrante dans la conception et lexploitation dune application ou un site Web.Cesteneffetlaseulefaonderecevoirenretourdesinformationsprovenantdirectementdelutilisateurfinal,et enoutre,structuresselonlesbesoinsduconcepteur.Ilsuffitdepensertouslessitesvocationcommercialepour lesquelscesformulairessontindispensables. La proccupation premire des dveloppeurs dapplication Web est de rcuprer des donnes valides. Citons par exempleuncodepostalfranaisaveccinqcaractresnumriquesouuneadresseemaildontlasyntaxeestvalide.Une des applications premires du JavaScript a t (et est toujours) la validation en direct (ct client) des donnes encodes par lutilisateur. Ainsi, tous les formulaires dune certaine importance comportent, outre le code Html, une bonnedosedeJavaScriptpourlavalidationdesdonnes.UnedesidesmajeuresduHtml5estdefaireprendreen chargeparleHtml(etdoncparlesnavigateurs)lavalidationdeschampsdeformulaires,librantainsilecodesource descriptsredondants.Etce,mmedanslecasolapriseenchargeduJavaScriptauraittdsactive. Les formulaires font partie du langage Html depuis une quinzaine dannes et nont pas t modifis depuis. Il faut avouerquegraphiquement,mmeavecdesajoutsdepropritsdestyle,unelassitudecertainesestinstalleautant chezlesdesignersquelesusagers.EnoutreavecleWeb2.0,lutilisateursesthabituuneprsentationplusproche des applications logicielles que des pages Web classiques. Citons les calendriers qui sont devenus usuels dans les sites de rservation en ligne ou les curseurs utiliss dans divers logiciels. En intgrant dans le langage Html les spcificationsXforms,leHtml5marqueindniablementlesespritsenajoutantauxformulaireshritsduHtml4.0un nombre impressionnant de formulaires indits, se rapprochant de ce qui est utilis dans les applications logicielles. Lintgration de ces nouveaux formulaires dans les navigateurs se fait hlas progressivement et il faudra peuttre encore attendre quelques annes avant que tous les navigateurs usuels ne les grent compltement. Mais il est indniablequeleHtml5ouvreenlamatiredesperspectivesconsidrablesauxconcepteursetdesigners. Le but ultime des formulaires est le traitement automatis des donnes rcoltes. Il faut alors faire appel, ct serveur,deslangagesdeprogrammationetdegestiondebasesdedonnescommeparexemplePHPetMySQL.Un apprentissagequidpasselargementlecadredecetouvrageservleraindispensable.Onentreldansundomaine rservauxamateurstrsavertis,sinonauxprofessionnels.Heureusement,ilexistepourlesdbutantsleprotocole mailto,quipermetlenvoidesdonnesdesformulairesuneadressedecourrierlectronique.Sicesystmeprsente lavantage de pouvoir tre utilis par tout un chacun, sans faire appel des ressources externes, il comporte nanmoinsdeslimitescertaines.Enoutre,letraitementultrieurdesdonnesdevratreeffectumanuellement.
- 1-
Ladclarationdeformulaire
Labalise<form> </form>acommeuniquefonctiondedclareraunavigateurquildoitmettreenplaceunformulaire. Elle englobera les lments ou champs de formulaires comme une ligne de texte, des cases cocher, des listes droulantes,etc. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Elments du formulaire </form> </body> </html> Ensoi,labalise<form>nafficheriendanslafentredunavigateur.Unecapturedcrannadoncpasdesens. Lesattributsusuelsdelabalise<form>sont: name Pourattribuerunnom(name)auformulaire. action Lorsquevousdonnezlordreaunavigateurdetransmettrelesdonnesduformulaire,ilabesoindeconnatrelaction quildoiteffectuer. Cetteactionsera:
q
soitladresse dun programme de traitement des donnes, situ sur le serveur, en CGI, Perl, PHP, ASPPar exemple,action = "http://www.serveur/traitement.php". soituneadressedecourrierlectroniquepourrcuprersimplementlesdonnes.Leprotocolemailtoestalors utilis.Parexemple,action="mailto:mon_email@serveur". soit, lorsque les donnes dun formulaire sont traites en interne (ctclient) par du JavaScript, lattribut actionrestevide.Parexempleaction="".
SivousutilisezlevalidateurduW3C(http://validator.w3.org),laprsencedelattributactionestobligatoire. enctype Lattributenctypespcifiesousquelformatinformatique(mimetype)seronttransmiseslesdonnesduformulaire.Par dfaut, la valeur estapplication/x-www-form-urlencoded. Pour lenvoi de fichiers (voir la section "Les formulaires de transfertdefichiers"danscechapitre),celleci doit tremultipart/form-dataetenfin,pourlenvoiversuneadresse lectroniqueavecleprotocolemailto,lavaleurseratext/plain. method Latransmissiondesdonnesdun formulaire seffectueselonlamthodeGEToulamthodePOST.LamthodeGET effectueletransfertencaractresASCIIetlesdonnesnepeuventexcder100caractres.LamthodePOSTgreles caractres nonASCII et une quantit de caractres illimite. Dans la pratique, la mthode POST sest impose pour desraisonsdefacilitetdefficacit. Lorsquelesdonnesduformulairesonttraiteseninterne(action=""),lesattributsmethodetenctypesontinutilescar ilnestpasfaitappelauserveur. Commentaires
q
Cettebalise,basiqueenHtml,estparfaitementcompatibleentrelesdiffrentsnavigateurs. La balise <form> doit obligatoirement tre ferme. En cas doubli de la balise de fermeture </form>, aucun lmentdevotreformulaireneseraaffichdanslenavigateur.
- 1-
Lalignedetexte
Cettelignedetextepermetdaccueillirlencodagededonnestantalphabtiquesquenumriques. Exemple Proposonslutilisateurunelignedetextepourencodersonnom.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Nom : <input type="text"> </form> </body> </html> Commentaires
q
Cettebalise,basiqueenHtml,estparfaitementcompatibleentrelesdiffrentsnavigateurs. La balise <input> na pas de balise de fermeture. Lcriture <input type="text" />, inspire du Xhtml, est galementaccepteenHtml5.
Lesattributspossiblessont: name Dfinitunnom(name)uniquepourcetlment.Cetattributestutilispourcollecterlecontenudelalignedetextelors delasoumissionduformulaire. size Dfinit le nombre de caractres visibles de la ligne de texte et, par consquent, la largeur de la zone de texte. Lutilisateur peut nanmoins encoder autant de caractres quilsouhaitemmesils dbordent du champ de la zone visible.Lavaleurpardfautdesizeestde20. maxlength Dtermine le nombre maximal de caractres que lutilisateur peut encoder dans la ligne de texte. Cet attribut est particulirementutilepourdesdonnesavecunnombredfinidecaractrescomme,parexemple,cinqchiffrespourle codepostalfranais. value Dfinitlavaleurpardfautdelalignedetexte.Celleciapparatdanslalignedetexteauchargementdelapage.Par exemple,<input type="text" value="Votre nom ici !">. readonly
- 1-
Indiquequelavaleurattribuepardfautlalignedetextenepourratremodifieparlutilisateur. DenouveauxattributssontapparusenHtml5.Leurpriseenchargeparlesnavigateursestcejournulleouencours dimplmentation.Envoiciquelquesuns: placeholder Permet dafficher une suggestion de saisie qui apparat en gris dans le champ de formulaire au chargement de la page.Cetextedisparatdsquelutilisateurdonnelefocusllmentconcern. Cet attribut nestpasencorereprispartouslesnavigateursrcentsmaisestdjreprisparFirefox4+,Safari4+et Chrome3+.Cetattributseraignorparlesnavigateursquineleprennentpasencoreencharge. <input type="text" placeholder="votre nom de famille">
Certainspourraientavancerquelattributvalueeffectuelammefonction.Ladiffrenceestrellemaissubtile.Avec value, lutilisateur doit effacer le texte avant deffectuer son propre encodage. Avec placeholder, le texte est effac automatiquement ds que le focus est donn llment. En outre, avec lattribut value, en cas de soumission du formulairesansmodificationdecettevaleurpardfaut,cestcelleciquiseratransmise. autofocus Donne le focus llment lors du chargement de la page. Cet attribut pargne quelques lignes de JavaScript qui ralisaientcettefonction. CetattributnesemblepourlinstantntrereprisqueparSafari4+,Chrome3+etOpera10+.Cetattributseraignor parlesnavigateursquineleprennentpasencoreencharge. required Rend lencodage de llmentobligatoireparlutilisateur pour la soumission et le traitement du formulaire. Trs utile pourdeslmentsessentielscommelenomouladresseemaildelutilisateur. Opera10+nousfournituneillustrationdelaractiondunavigateurlorsquunchamp requiredseraitlaissvidela soumissionduformulaire. <form action=""> Email (obligatoire) : <input type="text" name="mail" required><br> <input type="submit" value="Soumettre"> </form>
- 2-
Souhaitonscependantuneinfobullepluslaboresurleplanesthtique. pattern DfinitlexpressionrgulireJavaScriptquiestutilisepourlavalidationdelencodage.Parexemple,pattern="[0-9]" signifiequelavaleurdellmentdoittreunnombrecomprisentre0et9. height Dtermine, en pixels ou en pourcentage, la hauteur de la ligne de texte. Peut tre remplac par la proprit CSS height. width Dtermine,enpixelsouenpourcentage,lalargeurdelalignedetexte.PeuttreremplacparlapropritCSSwidth.
- 3-
Lazonedetexte
Dans certaines situations, il faut prvoir plus despace lutilisateur pour sexprimer.Cestlecas,parexemple,pour des commentaires, remarques ou suggestions. On utilise alors la balise <textarea> </textarea> qui introduit une zonedetextedeplusieurslignes. Exemple Unezonedetexteddieauxcommentairesdelutilisateur: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>Commentaires : </p> <textarea rows="4" cols="30"></textarea> </form> </body> </html>
Commentaires
q
Cettebalise,basiqueenHtml,estparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise<textarea>comporteunebalisedefermeture</textarea>. Une valeur par dfaut peut tre prvue dans la zone de texte, non par lattribut value mais de la faon suivante:<textarea rows="4" cols="25">Vos suggestions ici! </textarea>.
Lesattributspossiblessont: name Dfinitunnompourcetlment. cols Dfinitlenombredecaractresvisiblesenlargeurdelazonedetexte.PeuttreremplacparlapropritCSSwidth. rows Dfinitlenombredelignesvisiblesenhauteurdelazonedetexte.PeuttreremplacparlapropritCSSheight.
- 1-
readonly Indiquequelavaleurattribuepardfautlalignedetextenepourratremodifieparlutilisateur. DenouveauxattributssontapparusenHtml5.Leurpriseenchargeparlesnavigateursestcejournulleouencours dimplmentation.Envoiciquelquesuns: autofocus Donnelefocusllmentlorsduchargementdelapage. maxlength Dterminelenombremaximaldecaractresquelutilisateurpeutencoderdanslazonedetexte.Permetdelimiterles utilisateursprolixes. required Rendlencodagedellmentobligatoire. wrap Spcifielafaondegrerlesretoursautomatiqueslalignedutextelorsdelasoumissiondelazonedetexte.Avec wrap="hard",uncaractredepassagelaligneesttransmisavecletexte.Avecwrap="soft"(dfaut),aucuncaractre dechangementdelignenesttransmis. Pourlespuristes,cetattributnefaisaitpluspartieduHtml4.0.IlatrintroduitdanslaspcificationHtml5,sousune formemodifiecependant. placeholder Afficheuntextedanslechampdeformulaireauchargementdelapage.Cetexteseffaceautomatiquementdsque lutilisateurdonnelefocuslazonedetexte
- 2-
Lalistedroulante
Lalistedroulanteproposediffrentesoptionslutilisateur. Exemple Demandonslutilisateursonnavigateurprfr: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>votre navigateur prfr : <select> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Safari</option> <option value="4">Opera</option> <option value="5">Google Chrome</option> </select> </p> </form> </body> </html>
Commentaires
q
Labalise <select> </select> indique au navigateur lusage dune liste droulante. Les lments de la liste sontintroduitsparlesbalises<option> </option>. Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs.
Lesattributspossiblessont: name Dfinitunnompourlalistedroulanteenvueduntraitementultrieur. size Pardfaut,lattributsizedelabalise<select>estgal1,cequiestassezpratiquecarcelapermetungaindeplace apprciable dans la disposition de la page. Cependant par lattribut size="x", vous pouvez dfinir le nombre dlmentsdumenuquiseravisible.Votremenunauraalorsplusriendedroulant! <body>
- 1-
<form action=""> <select size="4"> <option>Moins de 20 ans</option> <option>De 20 40 ans</option> <option>De 40 60 ans</option> <option>Plus de 60 ans</option> </select> </form> </body>
multiple Pardfaut,lutilisateurnepeutchoisirquunlmentdumenudroulant.Aveclattributmultipledelabalise<select>, plusieurschoixpeuventtreeffectus.Pourcefaire,lutilisateurdoitmaintenirlatouche[Ctrl]duclavieretcliquersur les lments avec la souris. Il est alors prfrable de rappeler dans la page cette faon de procder peu commune pourlinternautemoyen. Lattributsizedoittrespcifietgalaunombredesbalises<option>. selected Par dfaut, le premier lment de la liste est retenu. Mais il est possible de prslectionner un autre lment par lattributselecteddelabalise<option>. <body> <form action=""> <p>Votre navigateur prfr : <select> <option value="IE">Internet Explorer</option> <option value="FF">Firefox</option> <option value="S" selected>Safari</option> <option value="O">Opera</option> <option value="GC">Google Chrome</option> </select> </p> </form> </body>
value Enprincipe,cestletextedellmentchoisiplacderrire<option>quiesttransmislorsdelenvoiduformulaire.Vous pouveztoutefoisspcifierquuneautrevaleur(gnralementnumrique)soittransmiseaveclattributvalue="valeur". Mispartautofocus,ilnyapasdenouveauxattributssignificatifsenHtml5.
- 3-
Lesboutonsdechoixunique(radio)
Lesboutonsdechoixunique,aussiappelsboutonsradio,ontcommeparticularitquuneseuleoptionlafoispeut treactive(le"ou"exclusif). Exemple Informonsnousdusexedelinterlocuteur: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Sexe :<br> <input type="radio" name="sexe">Masculin <input type="radio" name="sexe">Fminin </form> </body> </html>
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. La balise <input> na pas de balise de fermeture. Lcriture <input type ="radio"/>, inspire du Xhtml, est galementaccepteenHtml5.
Lesattributspossiblessont: name Ici lattribut name est obligatoire. En outre, dans le cas de boutons radio, le nom doit tre identique pour tous les boutons. checked Permetdeprslectionnerunboutonradio. value Envueduntraitementultrieur,onattribueunevaleurchaqueboutonradioparlattributvalue="valeur". Mispartautofocus,ilnyapasdenouveauxattributssignificatifsenHtml5.
- 1-
Lesboutonsdechoixmultiples(checkbox)
Lamiseen uvredecesboutonsdechoixmultiples,aussiappelsboutonscheckbox,estprochedesboutonschoix uniquemais,danslecasprsent,plusieurschoixsimultanspeuventtreraliss. Exemple Demandonsdeprciserlesgarnituresdunepizza. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Votre pizza avec :<br> <input type="checkbox" name="n1"> <input type="checkbox" name="n2"> <input type="checkbox" name="n3"> <input type="checkbox" name="n4"> <input type="checkbox" name="n5"> <input type="checkbox" name="n6"> <input type="checkbox" name="n7"> </form> </body> </html>
Mozzarella<br> Jambon<br> Sauce tomate<br> Poivrons<br> Champignons<br> Olives noires<br> Sauce piquante
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise<input>napasdebalisedefermeture.Lcriture<input type="checkbox" />,inspireduXhtml,est galementaccepteenHtml5.
Lesattributspossiblessont: name Lattribut name="nom" est obligatoire. Les rgles sont moins prcises que pour les boutons doption. Vous pouvez utiliserdesnomsidentiquesoudesnomsdiffrentspourchaquecasecocher.Cependantdesnomsdiffrentssont indispensablespourleurutilisationdansunscript.
checked Lattributcheckedpermetdeprslectionnerunecasecocher. <form action=""> Votre pizza avec :<br> <input type="checkbox" <input type="checkbox" <input type="checkbox" <input type="checkbox" <input type="checkbox" <input type="checkbox" <input type="checkbox" </form>
name="n1" checked > Mozzarella<br> name="n2"> Jambon<br> name="n3" checked > Sauce tomate<br> name="n4"> Poivrons<br> name="n5"> Champignons<br> name="n6"> Olives noires<br> name="n7"> Sauce piquante
value En vue dun traitement ultrieur, on attribue bien entendu une valeur chaque bouton checkbox par lattribut value="valeur". Mispartautofocus,ilnyapasdenouveauxattributssignificatifsenHtml5.
- 2-
Leboutondenvoi
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <input type="submit"> </form> </body> </html>
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise <input>na pas de balise de fermeture. Lcriture<input type="submit" />, inspire du Xhtml, est galementaccepteenHtml5. Le texte du bouton est choisi par le navigateur. Force est de constater que celuici varie dun navigateur lautre:SoumettrelarequtepourInternetExporer,EnvoyerpourFirefoxetOpera,SoumettrepourSafariet ValiderpourGoogleChrome.Ilestpossibledemodifierletextepardfautduboutonparlattributvalue.La balisedevientalors,parexemple,<input type="submit" value="Envoyer le formulaire">. Ilestpossiblederemplacerleboutondesoumissionparuneimagegrcelabalise<input type="image>.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Nom : <input type="text"><br> Mail : <input type="text"><br> <input type="image" src="submit.gif" alt="Soumettre" width="50" height="50"> </form> </body> </html>
- 1-
- 2-
Leboutondannulation
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <input type="reset"> </form> </body> </html>
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. La balise <input> na pas de balise de fermeture. Lcriture <input type="reset" />, inspire du Xhtml, est galementaccepteenHtml5. Lintitulduboutonestchoisiparlenavigateur.LaplupartdeceuxciontadoptRinitialisersaufFirefoxqui prfreEffacer.Ilestpossibledemodifierletextepardfautduboutonparlattributvalue.Labalisedevient alors,parexemple,<input type="reset" value="Recommmencer">.
- 1-
Leboutondecommande
Enmatiredeboutons(button),ilyaaussilabalise<button> </button>.Ellepermetdedclencher,auclicdecelui ci,uneactionspcifiquedfinieparleconcepteurdusite,gnralementlaidedeJavaScript.Elleoffregalementla possibilitderaliserlasoumissionetlannulationduformulaire(submitetreset). Enoutre,cettebalise<button>alavantagedepossderunebalisedouvertureetdefermeture.Ilestainsipossible dyincluredutexte,desimagesouducontenuHtml.Notonsgalementquecettebalise<button>napasbesoindtre imbriquedansunformulaire<form>etpeutainsitreutilisedansdemultiplescontextes. Toutcecienfaitunebalisepolyvalenteetjustifiesonsuccsauprsdesdveloppeurs. Exemple Auclicdunbouton,unefentredalertesaffiche: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <button onclick="alert(Action JavaScript)"> Cliquez-moi</button> </body> </html>
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise<button>abienunebalisedefermeture,soit</button>. Le texte du bouton prend place entre les balises et non par lattributvalue. Par exemple, <button>Cliquezmoi</button>.
Lesattributspossiblessont: name Spcifieunnompourlebouton. type Lattributtypeadmettroisarguments:
- 1-
button:utilislorsqueleboutondclencheunscript(gnralementrepriscommedfautparlesnavigateurs). submit:poursoumettreleformulaire. reset:pourrinitialiserleformulaire.
Lessitesetlesforumsspcialissrecommandentdetoujoursspcifierlattributtypecarlargument buttonnestpas repriscommevaleurpardfautpartouslesnavigateurs(parexemple,InternetExplorer8enmodeXhtmlStrict). disabled Permet de dsactiver le bouton au chargement de la page. Celuici apparat alors en gris. Un script permettra de lactiver(enabled)aprsuneactiondelutilisateur,parexemple,aprsavoiracceptdesconditionsdutilisation. Mispartautofocus,ilnyapasdenouveauxattributssignificatifsenHtml5. Illustrons la possibilit dadjoindre une image la balise<button> par lajout dune petite icne (ok.png) disponible danslespacedetlchargementrservcetouvrage. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <button><img src="ok.png" alt="Soumettre" width="15" height="15"> Soumettre </button> </body> </html>
- 2-
Lesformulairescachs
Lesformulairespermettentdestockerdesdonnesquineserontpasvisiblesparlevisiteurdelapage.Cetypede champestparfoisutilisparlesprogrammeursconfirms(spcialementenJavaScript)carilpeutcontenirdesdonnes dunformulaireprcdent,desdonnesbrutesoudesdonnesissuesdunautrescript. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <input type="hidden" name="c" value="3.1416"> </body> </html> Unecapturedcrannapasdesenspuisquelechampdeformulairesestcach(hidden). Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise <input>na pas de balise de fermeture. Lcriture<input type="hidden" />, inspire du Xhtml, est galementaccepteenHtml5.
- 1-
Lesformulairesdetransfertdefichiers
Labalise<input type="file">prendenchargeletransfertdefichiers(file)dupostedelutilisateurversunordinateur detypeserveur. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <input type="file"> </form> </body> </html>
Le clic du bouton Parcourir (intitul variable selon les navigateurs) ouvre larborescence de votre ordinateur pour slectionnerlefichiertransfrer. Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. La balise <input> na pas de balise de fermeture. Lcriture <input type="file" />, inspire du Xhtml, est galementaccepteenHtml5. Lesattributshabituelsdelabalise<input>peuventtreutiliss.Signalonscependantlattributmaxlengthqui permetdefixerlataillemaximaledefichiertransfrer. Dans la dclaration de la balise <form>, il faut imprativement utiliser les attributs method="post" et enctype="multipart/form-data"pourletransfertaubonformatdufichier. Il y a aussi lattribut accept qui permet de limiter le transfert certains types de fichiers. On peut citer des fichierstexte(txt),Word(doc),Excel(xls),pdf,desfichiersimage(jpeg,gifoupng),etc.Dansladsignation desfichiers,lejoker*estaccept. Il faut noter que cette balise Html ne sert qu slectionner le fichier transfrer. Le transfert luimmedoit treprisenchargepardesapplicationsctserveurcommeparexemplePHP.
- 1-
Lesformulairesdemotdepasse
Cetypedeformulaireestenfaitunesimplelignedetextemaisdontlencodageestremplac,laffichage, par des pucesoudesastrisques. Ceformulairedemotdepasseneprotgeenaucuncaslesdonnescarellesseronttransmisesenclair.Ellesvous protgentuniquementcontrelespersonnesquipourraientvousliredurantlencodage. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Login : <input type="password"> </form> </body> </html>
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. Labalise<input>napasdebalisedefermeture.Lcriture<input type="password" />,inspireduXhtml,est galementaccepteenHtml5. Lesattributsusuelsdelalignedetextename,size,maxlength,etc.peuventtreutiliss.
Mispartautofocus,ilnyapasdenouveauxattributssignificatifsenHtml5.
- 1-
Lorganisationdeschampsdeformulaires
Danslecasdeformulaireslongsetcomplexes,ilestparfoisutilederegroupergraphiquementcertainslmentspour organiser la page de faon logique. Les balises <fieldset> et <legend> permettent damliorer sensiblement lergonomieetlusabilitdesformulaires. Labalise<fieldset> </fieldset>englobeleschampsdeformulairesquevousdterminez.Ceschampssontalors visualisslcranparunebordure. Labalise<legend> </legend>,quiseplacedirectementderrirelabalise<fieldset>,ajouteunelgendequivient sinsrerdanslaborduredessineparle<fieldset>(voircapturedcransuivante). Exemple Regrouponslesentres,lespizzasetlesdessertsdansunelistechoixmultiples: <!DOCTYPE html> <html lang="fr"> <head> <meta charset="iso-8859-1"> </head> <body> <form action=""> <fieldset> <legend>Nos entres</legend> <input type="checkbox" name="n1"> Chikenitos<br> <input type="checkbox" name="n2"> Salade de saison<br> <input type="checkbox" name="n3"> Buffalo wings<br> </fieldset> <fieldset> <legend>Nos pizzas</legend> <input type="checkbox" name="n4"> Classique<br> <input type="checkbox" name="n5"> Campagnarde<br> <input type="checkbox" name="n6"> Diabolique<br> </fieldset> <fieldset> <legend>Nos desserts</legend> <input type="checkbox" name="n7"> Glaces varies<br> <input type="checkbox" name="n8"> Cookies<br> <input type="checkbox" name="n9"> Moelleux au chocolat<br> </fieldset> <input type="submit"> <input type="reset"> </form> </body> </html>
- 1-
Commentaires
q
Cettebaliseestparfaitementcompatibleentrelesdiffrentsnavigateurs. Ilnefautpasoublierlesbalisesdefermeture. IlnyaplusdalignementgaucheoudroitdelalgendeenHtml5.Cetteoprationdoitsefaireparunefeuille destyleCSS.
- 2-
Ltiquetagedeschampsdeformulaires
Labalise<label>associeexplicitementlintitulunchampdeformulaireparticulier.Unpeucommesioncollaitune tiquette(label)enfacedunlmentdeformulaire. Dansunpremiertemps,labalise<label>amlioregrandementlergonomiedesformulairesenpermettantdactiverun lmentdeceluici,parexempleunboutonradio,encliquantsurleboutonradioluimmeousurlintituldeceluici. Mais les balises <label> sont aussi particulirement utiles dans le domaine de laccessibilit des sites Web aux personnes non voyantes. Ces "tiquettes" sont prises en charge par les aides techniques (barrettes braille ou synthsesvocales)etfacilitentgrandementlutilisationdesformulairesparlespersonnesvisuellementdficientes. Dansunpremiertemps,letexteassignunlmentdeformulairedoittreplacentrelesbalises <label> </label>. <label>Nom</label> : <input type="text"><br> Ilfautensuitereliercettetiquettelabelaucontrledeformulaire.Pourcefaire,llmentdeformulaireseradfinipar unidentifiantdetypeid. <label>Nom</label> : <input type="text" id="f1"><br> Lattribut for="" ajout la balise <label> permet de raccorder directement ltiquette au champ de formulaire en faisantrfrencecetidentifiant. <label for="f1">Nom</label> : <input type="text" id="f1"><br> Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>Paiement par :<br> <label for="cash1">Visa</label> <input type="radio" name="cash" id="cash1"><br> <label for="cash2">American Express</label> <input type="radio" name="cash" id="cash2"><br> <label for="cash3">Mastercard</label> <input type="radio" name="cash" id="cash3"> </p> </form> </body> </html> ...
- 1-
IlnyapasdenouveauxattributssignificatifsenHtml5.
- 2-
Lalignedetexteaveclistedesuggestions
La balise <datalist> ajoute une ligne de texte ouvre une liste de suggestions dencodage au focus de celleci. Lutilisateur peut retenir une suggestion ou encoder une valeur de son choix. Ceci est proche de ce que Google Suggestprsentelorsdelentredunmotcldanssabarrederecherche. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Choisir un fruit : <input type="text" list="fruits"> <datalist id="fruits"> <option value="Orange"></option> <option value="Pomme"></option> <option value="Poire"></option> <option value="Prune"></option> </datalist> </form> </body> </html> La balise <datalist> contient une liste de balises <option> reprenant les suggestions dencodage. Ces balises <option>doiventtoujourspossderunattributvalue. Labalise<datalist>estrelieunchampdeformulaireparunidentifiantidquirenvoielattributlistdeceluici,ici lalignedetexte. Cettebalisenestpasencorerepriseparlesnavigateurs,saufparOpera10+.
- 1-
Lalignedetextedadresseemail
Combien de fois ne vous aton pas demand votre adresse de courrier lectronique lors de votre utilisation de la toile? QuelcassetteaussipourlesconcepteursdapplicationsWebafindedisposerduneadressemailvalide! LeHtml5rpondcebesoinaveclabalise<input type="email">. CettebalisenestencorereprisecejourqueparlenavigateurinnovantmaisassezconfidentielquestOpera.Ilnous permettradillustrerlesperspectivesouvertesparcellenouvellebaliseintroduiteparleHtml5. Elleservleparticulirementintressanteparlavalidationdirecteparlenavigateur,sanslajoutdeJavaScriptparle concepteur. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Email : <input type="email" name="mail" required> <input type="submit" value="OK"> </form> </body> </html> Apriori,lalignedetexteintroduiteparcettebalisenesedistinguepasdunelignedetextenormale.
Cependant,lasoumissionduformulaire,uneinfobulleannoncequeladresseemailestincorrecte.
- 1-
Enoutre,deparlattributrequired,uneautreinfobullesignalequelechampdoittreobligatoirementcomplt.
Espronscependantqulavenircesinfobullessoientplusesthtiques. ProfitonsdecettebaliseemailpourparlerdelattributautocompleteduHtml5disponibledansplusieurslmentsde formulaires.Pourautantqueloptionsoitactivedanslesprfrencesdunavigateur,cetattributproposedecomplter automatiquementlalignedeformulairepartirdevotreadressedecourrierlectronique.
- 2-
Lalignedetextedurl
Assezprochedelabaliseprcdente<input type="email">,labalise<input type="url">estdestinerecueillirdes adressesWeb(url). Cette balise nest encore reprise ce jour que par Opera. Il nous permettra cependant dillustrer les perspectives ouvertesparcettenouvellebaliseintroduiteparleHtml5. Iciaussiunevalidationestraliseendirect(sansJavaSript)parlenavigateurluimme. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Url de votre site : <input type="url" name="web"> <input type="submit" value="OK"> </form> </body> </html>
- 1-
Lalignedetextedeformatnumrique
Autre nouveau formulaire apport par le Html5, les compteurs numriques. Ces compteurs, que lon retrouve frquemment dans les applications logicielles comme les traitements de texte, sont prsent utilisables dans les formulairesWeb. Cettenouvellebalise<input type="number">adesattributsspcifiques: min Indiquelavaleurminimaleducompteur. max Indiquelavaleurmaximaleducompteur. step Dterminelepasdavancementchaquepressiondelasourissurlaflche value Lavaleurdedpartducompteur. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Nombre darticles (conditionns par 2) : <br> <input type="number" name="q" min="2" max="10" step="2" value="2"> </form> </body> </html> Audpart: ou .
Parunepressiondespetitesflches,lutilisateurpeutaugmenteroudiminuerlecompteur.
- 1-
EnutilisantlefichierHtml5disponibledanslespacedetlchargement,onremarqueraquelavaleurinitialeestde2, quilnest pas possible de descendre en dessous de 2 et audessus de 10 et que chaque pression sur les (petites) flchesaugmenteoudiminuelecompteurde2units(voirlecodesourcedelexemple). Commentaires
q
Austadedelcrituredecelivre,cecompteurnestimplantquedanslesversionsrcentesdOpera10+. Lecoderestenanmoinscompatibleaveclesnavigateursquineprennentpasencoreenchargecettenouvelle baliseenaffichantunesimplelignedetextecompltermanuellement.
Gageonsqulavenircenouveauchampdeformulairesconnatraunsuccscertainnotammentdanslessitesdevente enligne.
- 2-
Lalignedetextedeformatdedate
Les calendriers ont pris une place prpondrante dans les applications du Web 2.0. Leur utilit est indniable dans touslessitesderservationenligne,quecesoitpourunbilletdavionoudunechambredhtel. Pourlesdveloppeurs,lesformatsdedateposentunrelproblme,surtoutpourlessitesvocationinternationale (jj/mm/aaoumm/jj/aa). cejour,cescalendrierstaientaffichsenfaisantappeldesscriptscomplexesoudesframeworksJavaScript(par exempleDojo). Le Html5 propose ( lavenir) des champs de formulaires spcialement adapts lencodage de dates et de faire apparatre automatiquement par navigateur interpos, sans plugins particuliers, un calendrier o lutilisateur aura le choixdansladateauformatsouhaitparleconcepteur. IlsagitdunedesavancesmajeuresduHtml5entermesdeconceptiondesites. cejour,seulOpera10+permetdillustrercettenouvellefonctionnalit. Audpart:
Aufocusduchamp,lecalendrierapparat:
Lecodedececitientenquelqueslignes: <!DOCTYPE html> <html lang="fr">
- 1-
<head> <title>Html5</title> <meta charset="iso-8859-1"> <form action=""> Date darrive : <input type="date" name="in"><br> Date de dpart : <input type="date" name="out"> </form> </body> </html> Cettebalise<input>deformatdedatesedclinesousplusieursformes. <inputtype="date"> Laplusgnrale,illustreciavant.Ellepermetdeslectionnerlanne,lemoisetlejour. <inputtype="month"> Pourlemoisetlanne.Utileparexemplepourladatedexpirationdunecartedecrdit.
Datedexpiration:<input type="month" name="in"> <inputtype="week"> Pourunesemainedtermine.
- 2-
Semainerserve:<input type="week" name="in"> MaisHtml5nenrestepasl.Ilproposegalementunoutilpourleformathoraire: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <form action=""> Livraison de la pizza : <input type="time" min="11:00" max="23:00" step="900" value="11:00"> </form> </body> </html>
Lattributminpermetdefixeruneheurededbutducompteur,maxuneheuredefinetstep lavancement,icide15en 15minutes(900secondes)chaquepressionsurlapetiteflche. Et enfin il est possible de combiner le calendrier et le compteur horaire avec les balises<input type="datetime">et <input type="datetime-local">.
- 3-
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <form action=""> Jour et heure darrive : <input type="datetime" name="in"> </form> </body> </html>
- 4-
Lalignedetextederecherche
TrsnombreuxsontlessitesouapplicationsWebquiproposentunoutilderecherche.Celuiciprendsouventlaforme dunelignedetexte. LeHtml5proposeaveclabalise<input type="search">unelignedetextespcialementddiecettepossibilitde recherche. Cettebalisenestpasencorerepriseparlesnavigateurs. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <form action=""> Moteur de recherche : <input type="search"> <input type="submit" value "Go"> </form> </body> </html> Il se dit dans les blogs spcialiss dans le Html5 que cette ligne de texte ddie aux outils de recherche pourrait prendreuneformeparticulire.Pourquoipasunelignedetextebordsarrondis,cequiluidonneraitunlookMacintosh OSX?
- 1-
Lalignedetextedecouleur
Html5 prvoit galement une ligne de texte destine recevoir lencodage dune couleur (en hexadcimal) avec la balise<input type="color">. Aufocusdecettelignedetexte,unepalettedecouleurdevraitapparatreautomatiquementetauchoixdunecouleur, lavaleurdecelleciseraitreporte. Nousparlonsauconditionnelcarcejourcettefonctionnalitnestimplmentedansaucunnavigateur.Lacapture dcransuivantenestdoncquunesimulationralisepartirducadricielDojo.
- 1-
Lescurseurs
Lescurseurssontdesoutilsconviviauxetintuitifspourfixerdanslesapplicationslogiciellesunevaleur,gnralement numrique. Ils sont prsents ainsi par exemple dans les traitements de texte ou autres programmes graphiques commePhotoshop. Les curseurs sont introduits dans le Html5 par la balise <input type="range">. Gageons que ce contrle original est appelconnatreungrandsuccsauprsdesconcepteursetquilenvahiralesapplicationsWeb2.0dansunavenir proche. LescurseursnesontpourlinstantoprationnelsquedanslesderniresversionsdeChrome5+,Safari5+etOpera 10+. Les autres navigateurs traitent les balises <input type="range"> comme de simples lignes de texte (<input type="text">).Ilnyadoncpasderaisonsdesenpriveretdelesadopterdsprsent.
Lecodeest: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Quantits commandes<br> <input name="curseur" type="range"> </form> </body> </html> Cettenouvellebalise<input type="range">adesattributsspcifiques,identiquesceuxde<input type="number">. min Indiquelavaleurminimaleducompteur. max Indiquelavaleurmaximaleducompteur. step Dtermine le pas davancement chaque pression de la souris sur la flche augmenter ou diminuer (voir capture dcransuivante). value Lavaleurdedpartducompteur. Habill de quelques feuilles de style, lexemple suivant met en place un curseur qui se positionne au dpart sur 3 (attributvalue)etdontlesvaleursminimalesetmaximalessont1et5. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1">
- 1-
<style> span {margin-right: 25px;} </style </head> <body> <form action=""> Quantits commandes<br> <input name="curseur" type="range" min="1" max="5" value="3" step="1" style="margin-top: 10px"><br> <div style="margin-top: -2px"> <span style="margin-left: 2px;">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </form> </body> </html>
Pourconvaincrelelecteurouconfirmerlutilisateurlechoixeffectu,quelqueslignesdeJavaScriptferontapparatre lavaleurainsiretenue. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> span {margin-right: 25px;} </style> <script type="text/javascript"> function afficher(choix){ document.getElementById("valeur").innerHTML = choix; } </script> </head> <body> <form action=""> Quantits commandes<br> <input name="curseur" type="range" min="1" max="5" value="3" step="1" style="margin-top: 10px" onchange="afficher(this.value)"><br> <div style="margin-top: -2px"> <span style="margin-left: 2px;">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div>
- 2-
<p>Vous avez choisi... <span id="valeur">3</span></p> </form> </body> </html>
- 3-
Uneapplicationcomplte
laboronsunformulairepouruneactivitcommerciale.Lespremierschampsduformulaireonttraitauxcoordonnes du client nom et prnom, adresse, code postal et pays (France exclusivement). Les autres lments ont trait la commande(lemodleRoad66),latailleetlesquantits. LesgroupesClientetCommandepeuventtreregroupsparunebalise<fieldset>. Le protocole mailto, malgr ses limites, est utilis pour lenvoi du formulaire pour des raisons pratiques dapprentissage. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> fieldset { border : 1px solid black;} </style> </head> <body> <form action="mailto:votre_adresse_email" method="post" enctype="text/plain"> <fieldset> <legend><i>Client</i></legend> Nom et prnom : <input type="text" name="Nom"><br> Adresse: <input type="text" name="Adresse"><br> Code Postal : <input type="text" name="CP" size="4" maxlength="5"><br> Pays : <input type="text" readonly name="Pays" value="France"> </fieldset> <br> <fieldset> <legend><i>Commande</i></legend> Modle : <input type="text" readonly name="Modele" value="Road 66"><br> Taille : <br> <input type="radio" name="Taille" value="S">S<br> <input type="radio" name="Taille" value="M">M<br> <input type="radio" name="Taille" value="L">L<br> <input type="radio" name="Taille" value="XL">XL<br> Quantit : <input type="text" name="Quantite" value="1"><br> </fieldset> <br> <input type="submit" value="Commander"> <input type="reset" value="Recommencer"> </form> </body> </html>
- 1-
larception,lecourrierpeutprendrelaformesuivante: Nom=Dumoulin Adrien Adresse=Rue de la gare, 22 Perpignan CP=66000 Pays=France Modele=Road 66 Taille=L Quantite=2 Soit chaque fois le nom donn (name) au champ de formulaire, le signe gal = et les donnes encodes par lutilisateur. CeformulaireestensoiassezsimilaireunformulaireHtml4.0.Ilnousparatintressantdyadjoindredesbaliseset attributspropresauHtml5etdemettreenavantlesnouvellesfonctionnalitsapportesparleHtml5. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> fieldset { border : 1px solid black;} </style> </head> <body> <form action="mailto:votre_adresse_email" method="post" enctype="text/plain"> <fieldset> <legend><i>Client</i></legend> Nom et prnom : <input type="text" name="Nom" required placeholder="Nom et prnom"><br> Adresse: <input type="text" name="Adresse" required><br> Code Postal : <input type="text" name="CP" size="4" maxlength="5" required pattern="[0-9]"><br> Pays : <input type="text" readonly name="Pays" value="France"> </fieldset>
<br> <fieldset> <legend><i>Commande</i></legend> Modle : <input type="text" readonly name="Modele" value="Road 66"><br> Taille : <br> <input type="range" name="Taille" min="1" max="4" step="1" value="2"> <div> <span>S</span> <span>M</span> <span>L</span> <span>XL</span> </div> <br> Quantit : <input type="number" name="Quantite" min="1" max="6" step="1" value="1"><br> </fieldset> <br> <input type="submit" value="Commander"> <input type="reset" value="Recommencer"> </form> </body> </html>
CeformulairefaisantappelauHtml5estdjvisuellementfortdiffrentaveclajoutduncurseurpourlestaillesetdun compteurpourlesquantits. Les champs Nom et prnom et Adresse se sont vus complts par une suggestion de saisie qui apparat en gris (attributplaceholder). Divers champs se sont vus complts par lattribut required qui les rend obligatoires. la soumission, une infobulle apparatpourcomplterlechamp.
- 3-
Le code postal sest vu dot dune expression rgulire (attribut pattern) qui rclame un encodage exclusivement numrique.Uneinfobulleapparatsilencodagenestpasvalide. Lecompteurpourlesquantitspermetdimposerunequantitmaximale,ici6pices,parlattributmax. VoilquidevientfortdiffrentduHtml4.0etouvredenombreusesperspectivespourlesfuturesapplicationsHtml.
- 4-
Linsertiondunfichieraudio
1.Labalise<audio>
Jusqu prsent, il ny avait pas de standard pour ajouter du son dans une application Web. Cette opration seffectuait par lappel un plugin, par exemple Flash, mais tous les navigateurs ne disposaient pas des mmes plugins. Le Html5 propose prsent une nouvelle balise pour reproduire les fichiers sonores, quels que soient les plugins installschezlutilisateur. Linsertiondunfichieraudioseralisetrssimplementparlabalise: <audio src="fichier_son"></audio> tantdonnlimplmentationencoretrslimitedecettebalise<audio>danslesnavigateursexistants,ilnestpas inutiledeprvoiraumoinsunmessagepourlesnavigateursquineprennentpasenchargecettebalise. <audio src="fichier_son"> Votre navigateur ne supporte pas la balise audio. </audio> Affichonsunpremierexemple: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <audio src="piano_ogg.ogg" controls> Votre navigateur ne supporte pas la balise audio. </audio> </body> </html> LadressagedufichieraudiosupposeiciqueceluicisetrouvedanslemmerpertoirequelefichierHtmlcontenant labaliseaudio. RsultatdansFirefox3.6,quireconnatlabalise<audio>etleformatogg:
RsultatdansInternetExplorer8,quinereconnatpaslabalise<audio>:
- 1-
Lesattributsdelabalise<audio>sont: src Obligatoire.Dfinitladressedufichierson. controls Affiche les contrles du lecteur audio (voir capture dcran). Ceuxci comportent les fonctions de lecture, darrt, davancementetdevolume. <audio src="son.ogg" controls> Enlabsencedelattributcontrols,lescontrlesdulecteurneserontpasaffichsparlenavigateur. LanotationXhtmldesattributscontrols="controls"estaussirencontre. autoplay Dfinitlalectureautomatiquedufichieraudiodsqueceluiciseradisponible,soitauchargementdelapage. <audio src="son.ogg" autoplay> Fautilrappelerquecettelectureautomatiquedufichieraudionestpasforcmentapprciepartouslesutilisateurs. Ceuxcicoutentpeuttreleurpropremusiqueouconsultentvotresitedansunespaceolesilenceestderigueur. Enoutre,cetteintroductionsonoreseratrsgnantepourlesutilisateursdunesynthsevocale. LanotationXhtmldelattributautoplay="autoplay"estgalementaccepte. loop Spcifiequelefichiersonserajouenboucle.Ainsi,lemorceausonoreestjounouveaulorsquilsetermine. <audio src="son.ogg" autoplay> Lanotationloop="loop"estaussiaccepte. preload Indiqueaunavigateurquil doit tlcharger le fichier audio au chargement de la page de sorte quil soit disponible pourunelectureimmdiatelorsdelademandedelutilisateur. <audio src="son.ogg" preload> Cetattributpeuttreprcis:
q
preload="none".Pasdeprchargement. preload="metadata".Prchargementdesmtadonnes(metadata)attachesaufichier. preload="auto".Prchargementautomatique.
Cetattributpreloadestignorsilattributautoplayestprsent.
- 2-
Il faut noter la concision de linsertion dun fichier sonore grce cette balise <audio> et ses attributs en nombrerduit.
2.Lesformatsdefichieraudio
Lasituationidaleauraittquunseulformatdefichiersoitreprisetquenoutreceformatsoitunformatlibre. Leformatogg CefutloptiondeFirefoxquilepremierimplmentalabalise<audio>danssonnavigateur.Leformatlibreoggat retenu. OggestlenomduprincipalprojetdelafondationXiph.orgdontlebutestdeproposerlacommunautdesformats etcodecsmultimdiasouverts,libresetdgagsdetoutbrevet.Lextension.oggestunedesextensionspossibles pourlesfichiersauformatogg.Parabusdelangage,onappellecouramment"fichierOgg"unfichieraudioauformat oggcontenantdesdonnesaudiocompressesenVorbis,lundescodecsduprojetogg(sourceWikipdia). Lesfichiersoggconstituentunealternativelibreauformatmp3,beaucoupplusconnuetrpandu. Le format ogg est reconnu par Firefox 3.6+, Chrome 5+ et Opera 10.6+. Il ne lest pas par Safari 5+ et Internet Explorer9. Leformatmp3 Difficiledesepasserdelemblmatiqueformatmp3pourlesfichiersson. LeMPEG1/2AudioLayer3,plusconnusoussonabrviationdeMP3,estlaspcificationsonoredustandardMPEG 1/MPEG2, du Moving Picture Experts Group (MPEG). Cest un algorithme de compression audio capable de rduire drastiquementlaquantitdedonnesncessairepourrestituerdelaudio,maisqui,pourlauditeur,ressembleune reproduction du son original non compress, cestdire avec perte de qualit sonore significative mais acceptable pourloreillehumaine(sourceWikipdia). Le mp3 est souvent peru par lutilisateur final comme une technologie gratuite. Celuici peut en effet coder ou dcodersamusiquedemaniretoutfaitlgalepourpeuquelenregistrementoriginalluiappartienneouquilsoit unecopieusagepriv.Pourtant,cettetechnologiepropritairefaitlobjetdebrevetsetdunelicencecommerciale. Le format mp3 est reconnu par Chrome 5+, Safari 5+ et Internet Explorer 9. Il ne lest pas par Firefox 3.6 et 4 et Opera10.6. Leformatacc Ilyaplusperformantentermesdecompressionqueleformatoggetmp3.Cestleformatacc. Le format ACC (Advanced Audio Coding) est un algorithme de compression audio avec perte de donnes ayant de meilleures performances en termes de compression que le format plus ancien MPEG1/2 Audio Layer 3 (plus connu souslenomdemp3).Pourcetteraison,ilatchoisipardiffrentesfirmescommeAppleouRealNetworks(source Wikipdia). LeformataccestleformatdesfichiersaudiosupportsparAppleauseindesonbaladeurnumriqueiPodetdeson logicieliTunes. Ilsagiticigalementdunformatpropritaire. LeformataccestreconnuparChrome5+,Safari5+etInternetExplorer9.IlnelestpasparFirefox3.6et4,Opera 10.6. Leformatwav Citons pour mmoire lantique format waw mais qui, par son absence de compression, napparat pas des plus adaptslatoile.Eneffet,latailledesfichierswavestsouventtrs(outrop)volumineuse. Le format wav est reconnu par Firefox 3.6+, Safari 5+ et Opera 10.6+. Il ne lest pas par Chrome 5+ et Internet Explorer9. Tableaucomparatif Chrome5+ ogg oui Firefox3.6+ oui Opera10.6+ oui Safari5+ non Explorer9 non
- 3-
mp3 acc wav
oui oui non
non non oui
non non oui
oui oui oui
oui oui non
Enguisedeconclusion:
q
Labalise<audio>estbienimplmentedanslesnavigateursrcents. GoogleChrome5+apparatdeloinlepluspolyvalentencequiconcernelesformatsaudio.
Le Html5 nest encore quau stade naissant. Un nouveau format audio peut encore apparatre. Un navigateur peut encore reconnatre un format ce jour non retenu. Lauteur vous conseille de consulter rgulirement la rubrique Html5AudioCodecsdusitewww.findmebyip.com/litmus/pourlesdveloppementsfuturspossibles.
3.Labalise<source>
Labalise<source>vanouspermettredersoudrecetteproblmatiquedesformatsdefichiersdiffrents. Labalise<source>estutilisepourspcifierplusieursressourcesaudio.chargedunavigateurdechoisirleformat quilprendencompte. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <audio controls> <source src="piano_ogg.ogg"> <source src="piano_mp3.mp3"> <source src="piano_acc.acc"> Votre navigateur ne supporte pas la balise audio. </audio> </body> </html>
Lesfichierssontdisponiblesdanslespacedetlchargement. Ilestimportantdecomprendrelefonctionnementdecesdiffrentesbalises<source>. SupposonsquecettepageestlueparlenavigateurSafariqui,pourrappel,nereconnatpasleformatogg.Safari ignorelapremirebalise<source>quirenvoieunfichierogg.Ilpasselasecondebalise<source>quiproposeun fichiermp3.Commeleformatmp3estreconnuparSafari,cest cette ressource qui sera utilise pour reproduire le fichierson.
- 4-
Par contre, Firefox, qui gre les fichiers ogg, reprend la premire ressource. Les autres balises <source> sont ignores. Lesbalises <source>sontluesdanslordredapparitiondanslecode.Lenavigateurutiliseralapremireressource quilprendencharge. Ces multiples balises <source> assurent une parfaite prise en charge des diffrents formats de fichier audio. Cependant, le concepteur du site ou de lapplication Web doit encoder le fichier audio plusieurs fois afin de le convertirdanslesdiffrentsformats. Lesattributsdelabalise<audio>sont: src Obligatoire.Dfinitladressedufichierson. type DfinitletypeMIMEducontenu.Soit:
q
type="audio/ogg". type="audio/mpeg". type="audio/acc".
Onpeutgalementspcifierlecodecutilis.Lattributtypedevientalors:type="audio/ogg; codecs=vorbis". En spcifiant lattributtype,vousacclrezleprocessusdepriseenchargedelabalise<source>laplusadquate pourlenavigateur.
4.Desconvertisseursaudio
De nombreux convertisseurs audio, gratuits ou en version dvaluation sont disponibles sur la toile. pinglons les deuxlogicielssuivants. SwitchAudioConverter Logicielgratuit.Tlchargeableladressewww.nch.com.au/switch/index.html.ExistepourWindowsetpourMac. Switchpermetdeconvertirauformatogg,mp3etaccmaisaussienbiendautresformatsaudio(wma,flac,raw).En outre,laqualitdufichierdesortiepeuttreajusteafindenrduirelataille.
Audacity Avec Audacity, vous disposez dun diteur audio relativement complet et facile dutilisation. Il est disponible pour Windows,MacOSX,Linuxetbiendautressystmesdexploitation.
- 5-
Il vous permet dditer les fichiers audio par copier/coller, mixer plusieurs pistes, ajouter des effets de fondu en ouvertureet/ouenfermeture,ajouterdeseffetssonores,corrigerlebruitetlevolume,etc. Auniveaudelaconversiondesformatsaudio,Audacityproposedetrsnombreuxformatsdexportation dont bien entendulesformatsogg,mp3etACCdelabalise<audio>.
5.Compatibilitaveclesanciensnavigateurs
Ilestpossibledassurerunecompatibilitpourlesnavigateursquinesupportentpaslabalise<audio> comme par exempleInternetExplorer8. Nousavonsvuquuncontenualternatifpouvaittrefournilabalise<audio>.Pluttquunesimplephraseannonant que le navigateur ne prend pas en charge cette balise, il est tout fait possible dinclure les balises <object> et <param>ncessairescetteanciennegnrationdenavigateurspourlirelesfichiersaudio. Lecodeperdainsiensimplicitmaislacompatibilitseraassure. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <audio controls> <source src="piano_ogg.ogg"> <source src="piano_mp3.mp3"> <source src="piano_acc.acc"> <object type="audio/mpeg" data="piano_mp3.mp3" width="280" height="45" classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95> <param name="src" value="piano_mp3.mp3"> <param name="autoplay" value="false"> <param name="loop" value="false"> <param name="controller" value="true"> </object> </audio> </body> </html> LefichierestalorscompatibledansInternetExplorer8.
- 6-
Linsertiondunfichiervido
1.Labalise<video>
Depuisquelquesannes,lavidoaenvahileWeb.Ilsuffit,parexemple,depenserausuccsdeYouTube.Pourtant, en Html 4.0, il ny avait pas de standard pour ajouter de la vido dans une application Web. Cette opration seffectuaitparlappelunplugin:QuickTime,RealPlayerouFlash.Letouttaitdavoirlebonpluginaubonmoment. Le Html5 propose prsent une nouvelle balise pour reproduire les fichiers vido quels que soient les plugins installschezlutilisateur. Linsertiondunfichiervidoseralisetrssimplementparlabalise: <video src="fichier_video"></video> tantdonnlimplmentationencoretrslimitedecettebalise<video>danslesnavigateursexistants,ilnestpas inutiledeprvoiraumoinsunmessagepourlesnavigateursquineprennentpasenchargecettebalise. <video src="fichier_video"> Votre navigateur ne supporte pas la balise vido. </video> Affichonsunpremierexemple. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <video src="video_ogv.ogv" controls> Votre navigateur ne supporte pas la balise vido. </video> </body> </html> LadressagedufichiervidosupposeiciqueceluicisetrouvedanslemmerpertoirequelefichierHtmlcontenant labalisevido. RsultatdansFirefox3.6quireconnatlabalise<video>etleformatogv.
- 1-
Lesattributsdelabalise<video>sont: src Obligatoire.Dfinitladressedufichiervido. width Dterminelalargeurdelavido. height Dterminelahauteurdelavido. Commepourlabalise<img>,vouspouvezdfinirexplicitementlesdimensionsdevotrevido.Sinon,llmentsera par dfaut affich la largeur et la hauteur du fichier vido. Si vous spcifiez une dimension mais pas lautre, le navigateurvaajusterlatailledeladimensionnonspcifieafindeprserverlesproportionsdelavido. poster Lattribut poster permet de spcifier une image que le navigateur utilisera alors que la vido est en cours de tlchargement ou jusqu ce que lutilisateur commence la lecture de la vido. Si cet attribut nestpasspcifi,la premireimagedelavidoserautiliselaplace. <video src="video_ogv.ogv" poster="image.png"> controls Affichelescontrlesdulecteurdevido(voircapturedcran). Ceuxcicomportentlesfonctionsdelecture,darrt, davancementetdevolume. <video src="video_ogv.ogv" controls> Enlabsencedelattributcontrols,lescontrlesdulecteurneserontpasaffichsparlenavigateur. LanotationXhtmldesattributscontrols="controls"estaussirencontre. autoplay Dfinitlalectureautomatiquedufichiervidodsqueceluiciseradisponible,soitauchargementdelapage. <video src="video_ogv.ogv" autoplay> Nous rappelons que cette lecture automatique nest pas apprcie par tous les utilisateurs surtout si, dans le cas
- 2-
prsent,lapagecomporteuncontenutextuel. LanotationXhtmldelattributautoplay="autoplay"estgalementaccepte. loop Spcifiequelefichiervidoserajouenboucle.Ainsi,lavidoestjouenouveaulorsquellesetermine. <video src="video_ogv.ogv" loop> Lanotationloop="loop"estaussiaccepte. preload Indique au navigateur quil doit tlcharger le fichier vido au chargement de la page de sorte quil soit disponible pourunelectureimmdiatelorsdelademandedelutilisateur. <video src="video_ogv.ogv" preload> Cetattributpeuttreprcis:
q
preload="none".Pasdeprchargement. preload="metadata".Prchargementdesmetadataattachesaufichier. preload="auto".Prchargementautomatique.
Cetattributpreloadestignorsilattributautoplayestprsent.
2.Lesformatsdefichiervido
Toutcommepourlesfichiersaudio,ilexisteplusieursformatsdefichiersvido. Formatogv Leformatogvestlependantvidodelextensionoggpourlesfichiersaudio. LesfichiersdevidoogvreprennentlecodecTheorapourlavidoetVorbispourlapartieaudio. Rappelonsquelesformatsoggetogvsontdesformatslibres. CeformatfutreprisparFirefox3.6dslimplmentationdelabalisevido(juin2009).Opera10.5+etChrome3+le prennentgalementencompte. FormatH.264 LenavigateurSafaripourMacetPCfaitlargementappelQuickTimequireconnatdenombreuxformatsmaispasle formatoggetlescodecsTheoraetVorbis.IlsetournaalorsverslecodecH.264. H.264 est un codec de compression vido numrique des images et vido haute dfinition la norme MPEG4, dveloppparleVCRG(VideoCodingExpertsGroup)enpartenariatavecleMPEG(MovingPictureExpertsGroup),aussi connusouslappellationAVC(AdvancedVideoCoding).LeformatH.264estaussireprissouslevocableMPEG4AVCou encoreMPEG4Part10. Ceformat,soutenuparApple,connatunsuccsindniablesurtoutdepuissonadoptionparYouTube. MaisleformatH.264nestpasunformatlibreetgratuit.Cestunformatpropritairequiestsoumisdesredevances etroyalties. DevantlesprotestationsdesdfenseursdunWeblibre,leconsortiumMPEGLAadabordlibralisleformatH.264 pourlessitesetlesplatesformesproposantgratuitementleurscontenusvidojusquen2011.Cettechancefut repousse ensuite jusquen 2016. Finalement sous la pousse dun nouveau format libre, le WebM, soutenu par Google, le consortium a dcid de rendre le format libre de royalties dans les cas o la vido est gratuitement accessibleparlutilisateurfinal. Belleillustrationdelaguerredesformatsvidolaquellenousassistonspourlinstant LeformatH.264estreconnuparChrome5+,Safari5+etInternetExplorer9.IlnelestpasparFirefoxetOpera10.6. FormatWebM
- 3-
GoogleestdevenupropritaireducodecvidoVP8depuislerachatdelentrepriseOn2Technologies. PourcontrerlascensionfulguranteduformatH.264,Googleapublienmai2010lecodesourceducodecVP8sous licencelibre.IlsestassociMozillaetOperapourproposerunformataudiovidoouvert,leWebM,quirassemble VP8pourlesfluxvidoetVorbispourlesfluxaudio. Le format WebM est reconnu par Firefox 4+, Chrome 6+ et Opera 10.6+. Il ne lest pas par Safari 5+ et Internet Explorer9. Tableaucomparatif Chrome Firefox Opera 10.6+ 4 oui non oui oui non oui non oui non non oui non Safari5+ Explorer 9
5 ogv H.264 WebM oui oui non
6 oui oui oui
3.6 oui non non
Enguisedeconclusion:
q
Labalise<video>estbienimplmentedanslesnavigateursrcents. GoogleChrome6+apparatdeloinlepluspolyvalentencequiconcernelesformatsvido.
Le Html5 nest encore quau stade naissant. Un nouveau format vido peut encore apparatre. Un navigateur peut encore reconnatre un format ce jour non retenu. Lauteur vous conseille de consulter rgulirement la rubrique Html5VideoCodecsdusitewww.findmebyip.com/litmus/pourlesdveloppementsfuturspossibles.
3.Labalise<source>
Labalise<source>permetdersoudrecetteproblmatiquedesformatsdefichiersdiffrents. Labalise<source>estutilisepourspcifierplusieursressourcesvido.chargedunavigateurdechoisirleformat quilprendencompte. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <video controls> <source src="video_ogv.ogv"> <source src="video_mp4.mp4"> <source src="video_webm.webm"> Votre navigateur ne supporte pas la balise vido. </video> </body> </html>
- 4-
Lesfichierssontdisponiblesdanslespacedetlchargement. Ilestimportantdecomprendrelefonctionnementdecesdiffrentesbalises<source>. SoumettonscefichieraunavigateurSafariquipourrappel,nereconnatpasleformatogv.Safariignorelapremire balise<source>quirenvoieunfichierogv.Ilpasselasecondebalise<source>quiproposeunfichiermp4.Comme leformatmp4estreconnuparSafari,cestcetteressourcequiserautilisepourreproduirelefichiervido. Par contre, Firefox, qui gre les fichiers ogv, reprend la premire ressource. Les autres balises <source> sont ignores. Lesbalises <source>sontluesdanslordredapparitiondanslecode.Lenavigateurutiliseralapremireressource quilprendencharge. Ces multiples balises <source> assurent une parfaite prise en charge des diffrents formats de fichier vido. Cependant, le concepteur du site ou de lapplication Web doit encoder le fichier vido plusieurs fois afin de le convertirdanslesdiffrentsformats. Lesattributsdelabalise<source>sont: src Obligatoire.Dfinitladressedufichiervido. type DfinitletypeMIMEducontenu.Soit:
q
type="video/ogg". type="video/mp4". type="video/webm".
Onpeutgalementspcifierlescodecsutiliss.Lattributtypedevient:
q
type=video/ogg; codecs="theora, vorbis". type=video/webm; codecs="vp8, vorbis". type=video/mp4; codecs="avc1.42E01E, mp4a.40.2".
En spcifiant lattributtype,vousacclrezleprocessusdepriseenchargedelabalise<source>laplusadquate pourlenavigateur.
- 5-
4.Desconvertisseursvido
Denombreuxconvertisseursgratuitsouenversiondvaluationsontdisponiblessurlatoile.Nousenavonsretenu quelquesuns. MiroVideoConverter Miro Video Converter est logiciel libre pour Windows et Mac. Il peut tre tlcharg ladresse : www.mirovideoconverter.com/ Il convertit nimporte quelle vido pour permettre sa lecture sur iPhone, Android, PSP, etc. Glissez/dposez simplementlefichiertransformersurlinterfacedulogicielpuisslectionnezleformatsouhait(MP4,OggTheora, WebM,etc.)oulappareil de destination : Android, PSP, iPhone, iPad, etc. Enfin, cliquez surConvert! et le tour est jou!
Ilestdifficiledefaireplussimpleenmatiredeconversiondefichiersvido.Seulinconvnient,ilnestpaspossiblede configurerprcismentlesparamtresdeconversion. PrismVideoConverter Prism Video Converter est un convertisseur vido gratuit qui prend en charge la plupart des formats vido. Vous pourrez ainsi encoder vos fichiers AVI, DivX, MPG, VOB, WMV, 3GP aux formats compatibles PSP, iPod, mobiles, lecteurdesalon,etc.Trssimpledutilisation,cetteapplicationcomportegalementdesparamtresdeconfiguration etdepersonnalisationtelsqueletauxdecompressionetlarsolutiondesfichierssortants,ouencorelaccsdirect parlemenucontextuel.
- 6-
Firefogg FirefoggestuneextensiondeFirefoxquiconvertitautomatiquementlesvidosversunformatouvert(OgvetWebM). Tlchargeableladressehttp://firefogg.org/.
LesconversionsavecFirefoggsontparfaitementparamtrables.
CommeFiregoggestuneextensiondeFirefox,lutilisateurestainsiassurdedisposerdesderniersprogrsence quiconcernelesformatsretenus.
- 7-
5.Compatibilitaveclesanciensnavigateurs
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <video controls> <source src="video_ogv.ogv"> <source src="video_mp4.mp4"> <source src="video_webm.webm"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="550" height="320"standby="Chargement..."> <param name="src" value="video_mp4.mp4"> <param name="type" value="aplication/x-mplayer2"> <param name="autoplay" value="true"> <param name="quality" value="high"> <p>La vido ne peut tre affiche. Lien vers le <a href="http://www.apple.com/quicktime/download/">plug-in</a> tlcharger ou lien vers le <a href="video_mp4.mp4">fichier vido</a> directement.</p> </object> </video> </body> </html>
- 8-
Introduction
Lanouvellebalise<canvas>permetdintgrerdeszonesdedessinen2Ddanslapage.Cesdessinspermettent,par exemple, dafficher des graphiques du genre Excel sans passer par des captures dcran. En outre, ces lments pourronttrerendusdynamiquespartirdescriptsJavaScript. Cette nouvelle fonctionnalit canevas est bien reconnue par les navigateurs modernes de notre tude : Safari 5+, Chrome 7+, Opera 10.6+, Internet Explorer 9+, et noublions pas Firefox 3.6+, qui a t linstigateurdecettebalise <canvas>. Celleci laisse entrevoir de belles opportunits en termes de design et de graphisme, surtout que le dessin 3D est annonc.CertainsnhsitentpasyvoirunconcurrentsrieuxdeFlash.
- 1-
Labalise<canvas>
Labalise<canvas>introduitunezonequiaccueilleralesdessinsetautresgraphismes. Lesdimensionsdecettezonesontintroduitesparlesattributswidthetheightquienfixentlalargeuretlahauteur. <canvas width="200px" height="200px"></canvas> Cettezonederenduestpardfauttransparente.Unecapturedcrancestadeestinutile. Pourvisualisercettezoneintroduiteparlabalise<canvas>,ajoutonslui,parunepropritdestyle,unesimplebordure de1px. Enoutre,prvoyonsunidentifiantdetypeidafindepouvoirutilisercettezonegraphiqueinitieparlabalise<canvas>. Lecodedevientainsi: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas. </canvas> </body> </html>
La balise <canvas> nest compatible quavec les toutes dernires versions des navigateurs. Il est ainsi prudent de prvoiruncontenualternatifpourlesnavigateursplusanciensquineprennentpasenchargecettedernire: <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas. </canvas> Lecodecompletestalors: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1">
- 1-
</head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas. </canvas> </body> </html> EnvoicilersultatdansInternetExplorer8,quinereconnatpaslabalise<canvas>:
Commentaires
q
Lorsquelesattributswidthetheightnesontpasspcifis,lecanevasserainitialementde300pixelsdelarge et150pixelsdehaut. Ilestpossibledavoirplusieursbalises<canvas>surlammepage.Lidentifiantidprenddanscecastouteson utilit. Llment<canvas>peuttrestyldelammefaonquenimportequelleimagenormale(marges,bordures, fond,etc.).Cesrglesnaffectentenrienledessinducanevasluimme.
- 2-
AppeldelAPIdedessin
EtcesttoutpourleHtml.CeluicipasselamainauJavaScriptpourmettreen uvrelesdessinsetautresgraphismes delazonederendu. CecipeuttredconcertantpourceuxquidcouvrentlcrituredepagesWebparleHtml.JavaScriptestunlangage deprogrammationquivientparfoissajouteraucodeHtml.LesinstructionsJavaScriptsontgresparlenavigateur luimme(ctclient)etapportentunedosedinteractivitauxapplications. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="150px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById( "zone" ); var contexte = myCanvas.getContext( "2d" ); // Suite du script </script> </body> </html> Dtaillonscesnouvelleslignesdecode. <script type="text/javascript"> ... </script> LesscriptsJavaScriptsontintroduitsparlabalise<script type="text/javascript"> ... </script>.Cettebalisepeut seplacerdansle<head>oule<body>dudocumentHtml. var canevas = document.getElementById("zone"); La variable canevas contient llment du document (document) identifi par lidentifiant zone (getElementById ("zone")).IlfautrespecterscrupuleusementlacassedegetElementById. var contexte = canevas.getContext("2d"); LavariablecontextevachercherlapplicationAPIdedessin2D(getContext("2d"))appliquerlavariablecanevas. Commentaires Les spcifications du Html5 prvoient pour lavenir des dessins en 3D. Des applications, au stade exprimental, fonctionnentdjsousOpera10maisonestencoreloindunequelconquestandardisation.
- 1-
Dessinerunrectangle
Avantdepasseraucoderelatifauxdessins,ilestncessairedespcifierlanotationutilisepourlescoordonnes.
Loriginedesaxesxetyestplacedanslecoinsuprieurgauche[coordonnes(0,0)].Tousleslmentsducanevas sont dfinis relativement ce point dorigine. Ainsi, larte suprieure gauche du carr colori est dfinie x pixels horizontalementpartirdelagaucheetypixelsverticalementdepuislehaut[coordonnes(x,y)]. UnrectanglepleinestdessinparlafonctionfillRect(x,y,width,height). Exemple Dessinonsunrectanglepleindontlartesuprieuregaucheestsitue25pixelsdubordgaucheet25pixelsdubord haut.Notrerectangleaunelargeur(width)de150pixelsetunehauteur(height)de100pixels. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById( "zone" ); var contexte = canevas.getContext( "2d" ); contexte.fillRect(25,50,150,100); </script> </body> </html>
- 1-
Pardfaut,lacouleurestlenoir.Dslepointsuivant,nousdcouvrironscommentcolorierlesdessins. LafonctionclearRect(x,y,width,height)effacelazonespcifieetlarendentirementtransparente. Exemple Dcouponsunezonedanslerectangledfiniciavant. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById( "zone" ); var contexte = canevas.getContext( "2d" ); contexte.fillRect(25,50,150,100); contexte.clearRect(50,75,100,50); </script> </body> </html>
- 2-
Etenfin,lafonctionstrokeRect(x,y,width,height)dessineunrectanglevidedontseulelabordureestvisible. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext( "2d" ); contexte.strokeRect(25,50,150,100); </script> </body> </html>
- 3-
Ajouterdelacouleur
Pourajouterdelacouleur,vousdisposezdesproprits fillStyle="couleur"etstrokeStyle="couleur". LanotationdescouleursacceptetouteslesspcificationsdecouleursCSSetmmecellesdesCSS3(voirplusloindans celivre).Ainsi,lacouleurorangepeutsedfinirpar: ctx.fillStyle ctx.fillStyle ctx.fillStyle ctx.fillStyle = = = = "orange"; "#FFA500"; "rgb(255,165,0)"; "rgba(255,165,0,1)";
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="dessin" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canvas = document.getElementById( "dessin" ); var contexte = canvas.getContext( "2d" ); contexte.fillStyle = "#99ccff"; contexte.fillRect(25,50,150,100); </script> </body> </html>
Commentaire SivousdfinissezlapropritstrokeStyleet/oufillStyle,lanouvellevaleurdevientcellepardfautpourtoutesles formes dessines partir de cet instant. Pour chaque forme qui doit tre dans une couleur diffrente, vous devrez rassignerlespropritsfillStyleoustrokeStyle.
- 1-
Tracerunelignedroite
La mthode lineTo(x,y) permet de dessiner des lignes droites. Les arguments x et y sont les coordonnes de lextrmitfinaledelaligne.Lepointdedpartdpenddescheminsdessinsprcdemment,puisqueledernierpoint dun chemin est le point de dpart du suivant, etc. Le point de dpart peut galement tre chang laide de la mthodemoveTo. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); contexte.beginPath(); contexte.moveTo(25, 25); contexte.lineTo(175, 175); contexte.moveTo(175,25); contexte.lineTo(25, 175); contexte.stroke(); </script> </body> </html>
Dtaillonslecode: contexte.moveTo(25, 25); contexte.lineTo(175, 175); Lescriptpositionnelestylovirtuelsonpointdedpart(moveTo(25, 25))etdessinelapremirediagonale(lineTo (175, 175)). contexte.moveTo(175,25); contexte.lineTo(25, 175);
- 1-
Ensuite,lestyloestdplacjusqulextrmitdelasecondediagonale(moveTo(175,25))etiltracecelleci(lineTo(25, 175)). contexte.stroke(); Aveclesrectangles,touteslesoprations(dessin,couleur,etc.)taientappliquesdirectementdanslecanevas.Pour toutes les autres formes, cest comme si vous utilisiez un stylo sans encre. Il faut en quelque sorte faire apparatre lencrelafindudessin,dolecodestroke(). Plusieurspropritspermettentdechangerlestyledeslignes. LapropritlineWidth=valeurdfinitlpaisseurdutraitdelalignecourante.Lavaleurpardfautestde1pixel. Dessinonsplusieurslignesverticalesdpaisseursdiffrentes. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); contexte.strokeStyle = "#99ccff"; contexte.beginPath(); contexte.lineWidth = 5; contexte.moveTo(50, 25); contexte.lineTo(50, 175); contexte.stroke(); contexte.beginPath(); contexte.moveTo(100,25); contexte.lineWidth = 10; contexte.lineTo(100, 175); contexte.stroke(); contexte.beginPath(); contexte.moveTo(150,25); contexte.lineWidth = 15; contexte.lineTo(150, 175); contexte.stroke(); </script> </body> </html>
- 2-
La proprit lineCap=valeur dtermine comment sont dessines les extrmits de chaque ligne. Les trois valeurs possiblespourcettepropritsont:butt,roundetsquare.Pardfaut,celleciestdfiniebutt.
LacapturedcranetlexemplesuivantillustrentchacunedesvaleursdelapropritlineCap:
q
La valeur round ajoute un demicercle lextrmit de la ligne. Le rayon de celuici est de la moiti de lpaisseurdelaligne. Lavaleurbutt(dfaut)setermineexactementlendroitdfiniparlecode. Lavaleursquareajouteunebotedelalargeurdelaligneethautedelamoitidelpaisseurdecelleci.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); contexte.strokeStyle = "#99ccff"; contexte.lineWidth = 25; contexte.beginPath(); contexte.moveTo(50, 25); contexte.lineCap="round"; contexte.lineTo(50, 175); contexte.stroke(); contexte.beginPath(); contexte.lineCap="butt"; contexte.moveTo(100,25); contexte.lineTo(100, 175); contexte.stroke(); contexte.beginPath(); contexte.moveTo(150,25); contexte.lineCap="square"; contexte.lineTo(150, 175); contexte.stroke(); </script> </body>
- 3-
</html> La proprit lineJoin=valeur dfinit la faon dont deux lignes qui se rejoignent sont relies entreelles. Les trois valeurspossiblespourcettepropritsont:round,beveletmiter.Pardfaut,celleciestdfiniemiter. LacapturedcranetlexemplesuivantillustrentchacunedesvaleursdelapropritlineJoin:
q
Lavaleurroundarronditlescoinsdelaforme.Lerayondelarrondiestgallpaisseurdelaligne. Lavaleurbevelneffectueaucuneopration. Lavaleurmiter(dfaut)faitprolongerleslignespourquellesserejoignentenunseulpoint.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="220px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); contexte.strokeStyle = "#99ccff"; contexte.lineWidth = 20; contexte.beginPath(); contexte.lineJoin="round"; contexte.moveTo(25,100); contexte.lineTo(100,25); contexte.lineTo(175,100); contexte.stroke(); contexte.beginPath(); contexte.lineJoin="bevel"; contexte.moveTo(25,150); contexte.lineTo(100,75); contexte.lineTo(175,150); contexte.stroke(); contexte.beginPath(); contexte.lineJoin="miter"; contexte.moveTo(25,200);
- 4-
contexte.lineTo(100,125); contexte.lineTo(175,200); contexte.stroke(); </script> </body> </html>
- 5-
Dessinerdesformesgomtriques
Pour dessiner des arcs et des cercles, il faut utiliser la mthode arc(x, sensInverse). y, rayon, angleDpart, angleFin,
Cettemthodeprendcinqparamtres:xetysontlescoordonnesducentreducercleetrayonestbienentenduson rayon.LesparamtresangleDpartetangleFindfinissentlespointsdedpartetdarrivedelarcenradians.Ceuxci sontmesurspartirdelaxex.LeparamtresensInverseestunevaleurboolennequi,lorsquelleestmisetrue, dessine larc dans le sens inverse des aiguilles dune montre. Autrement (false), le dessin se fait dans le sens des aiguillesdunemontre. Notonsquelesanglesdanslafonctionarcsontexprimsenradiansetnonendegrs.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="200px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); contexte.fillStyle = "#99ccff"; contexte.lineWidth = 2; contexte.beginPath(); contexte.arc(85, 85, 70, 0, 2*Math.PI, true); contexte.fill(); contexte.beginPath(); contexte.strokeStyle = "black"; contexte.arc(140, 140, 40, 0, 2*Math.PI, true); contexte.stroke(); </script> </body> </html> Pour les formes complexes, les courbes de Bzier sont galement disponibles dans les fonctions de canevas. Les courbesdeBzierdessinentlescourbespartirdeformulesmathmatiques.Leurapprentissageestaussicomplexe quelescourbesdessinesetrclameuneformationeninfographiepousse.Ellessontreprisesicipourinformation. Deuxfonctionssontdisponibles:quadraticCurveToetbezierCurveTo.UnecourbedeBzierquadratiqueaunpointde dpart,unpointdarriveetunpointuniquedecontrle.UnecourbedeBziercubiquedisposeparcontrededeux pointsdecontrle.
Lutilisation de courbes de Bzier quadratiques et cubiques peut savrer relativement ardue car, contrairement aux logicielsdedessinvectorielcommeAdobeIllustrator,onnedisposepasdunretourvisueldirectsurcequelonesten traindlaborer.Celarendledessindeformescomplexesassezdifficile. Voiciquelquesexemplessimples. LepremierexploitelafonctionquadraticCurveTo. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="150px" height="150px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); contexte.beginPath(); contexte.lineWidth = 2; contexte.moveTo(75,25); contexte.quadraticCurveTo(25,25,25,62.5); contexte.quadraticCurveTo(25,100,50,100); contexte.quadraticCurveTo(50,120,30,125); contexte.quadraticCurveTo(60,120,65,100); contexte.quadraticCurveTo(125,100,125,62.5); contexte.quadraticCurveTo(125,25,75,25); contexte.stroke(); </script> </body> </html>
LesecondexemplereprendbezierCurveTo. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="zone" width="150px" height="150px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canevas = document.getElementById("zone");
- 2-
var contexte = canevas.getContext("2d"); contexte.beginPath(); contexte.lineWidth = 2; contexte.moveTo(75,40); contexte.bezierCurveTo(75,37,70,25,50,25); contexte.bezierCurveTo(20,25,20,62.5,20,62.5); contexte.bezierCurveTo(20,80,40,102,75,120); contexte.bezierCurveTo(110,102,130,80,130,62.5); contexte.bezierCurveTo(130,62.5,130,25,100,25); contexte.bezierCurveTo(85,25,75,37,75,40); contexte.stroke(); </script> </body> </html>
- 3-
Importerdesimages
Limportationdesimagesseraliseendeuxtapes:
q
Il faut dabordcreruneimagecommeobjetJavaScript.Ilnestpaspossibledinclureuneimagesimplement parlattributHtmlsrc. La fonctiondrawImage est utilise pour dessiner limage dans le canevas. Il est important de veiller ce que limagesoitbienchargeavantdefaireappellafonctiondrawImage.
LasyntaxedecettefonctiondrawImage(image, x, y)oimageestunerfrencelimageetx,ylescoordonnesdu placementdelimagedanslecanevas. LesimagespeuventtreauformatGIF,JPEGouPNG. Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <script type="text/javascript"> function dessin() { var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); var img = new Image(); img.src = rose.png; contexte.drawImage(img,5,5); } </script> <body onload="dessin()"> <canvas id="zone" width="210px" height="194px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <img src="rose.png" style="visibility: hidden;"> </body> </html>
Exemple2 Ilestbienentendupossibledesuperposerdeslignessuruneimage.
- 1-
Soituneimagedefonddegraphique:
cetteimage,inclusedanslecanevas,nousallonsajouterunelignedegraphique. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <script type="text/javascript"> function dessin() { var canevas = document.getElementById("zone"); var contexte = canevas.getContext("2d"); var img = new Image(); img.src = graphe.png; contexte.drawImage(img,0,0); contexte.beginPath(); contexte.lineWidth = 2; contexte.moveTo(18,244); contexte.lineTo(72,67); contexte.lineTo(124,186); contexte.lineTo(176,36); contexte.lineTo(228,212); contexte.lineTo(280,126); contexte.stroke(); } </script> <body onload="dessin()"> <canvas id="zone" width="285px" height="260px"> Votre navigateur ne supporte pas la balise canvas </canvas> <img src="graphe.png" style="visibility:hidden;"> </body> </html>
- 2-
- 3-
Ajouterdutexte
Pourajouterdutextedanslecanevas,leconcepteurdisposedesmthodesfillText("texte", x, y)etstrokeText ("texte", x, y) o texte est le texte inclure,x la coordonne horizontale du dbut du texte et y la coordonne verticaledudbutdutexte. Cesmthodescomportenttroisproprits: Lapropritfontdfinitlapolicedecaractresutiliserlorsdudessin.Lasyntaxeestidentiquecelledelaproprit destyleCSSfont.Lavaleurpardfautest10pxsansserif. Exemple contexte.font = "20pt Arial"; LaproprittextAligndterminelalignementdutexte.Lesvaleurspossiblessont:
q
leftpourunalignementgauche. rightpourunalignementdroite. centerpourunalignementcentr. start(dfaut)pourlalignementdudbutdelignepourlcrituredegauchedroite. endpourlalignementlafindelignepourlescrituresdedroitegauche.
Exemple contexte.textAlign = "left"; Etenfin,laproprit textBaselinedfinitlalignederfrencedelcrituredutexte.Lesvaleurspossibles,illustres parlimagesuivante,sonttop,middle,alphabetic(dfaut)etbottom.
Exempledajoutdetexte: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="dessin" width="240px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript">
- 1-
var canvas = document.getElementById( "dessin" ); var contexte = canvas.getContext( "2d" ); contexte.textBaseline = "alphabetic"; contexte.textAlign = "left"; contexte.font = 36px "Segoe UI" bold; contexte.fillText("Html5 canvas", 10, 70); contexte.font = "80px "Segoe UI" bold"; contexte.strokeText("Html5", 10, 150); </script> </body> </html>
- 2-
Ajouterdelombre
LeseffetsdombresontajoutsparlespropritsshadowOffsetX,shadowOffsetY,shadowBluretshadowColor. Les proprits shadowOffsetX=valeur et shadowOffsetY=valeur indiquent le dport de lombre par rapport laxe horizontal et vertical. Des valeurs ngatives peuvent tre reprises pour une ombre dirige vers le haut et vers la gauche.Lesvaleurspositivesinduisentuneffetdombrageverslebasetversladroite.Lavaleurpardfautest0pour lesdeuxproprits. LapropritshadowBlur=valeurdtermineleffetdedispersiondelombre.Lavaleurpardfautest0. LapropritshadowColor=couleurindiquelacouleurdeleffetdombrage.Cettecouleurestindiqueselonlanotation desfeuillesdestyleCSS.Pardfaut,lacouleurestlenoir(black). Latentationestgrandedajouteruneffetdombreautextedelexempleprcdent: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <canvas id="dessin" width="240px" height="200px" style="border: 1px solid black"> Votre navigateur ne supporte pas la balise canvas </canvas> <script type="text/javascript"> var canvas = document.getElementById( "dessin" ); var contexte = canvas.getContext( "2d" ); contexte.textBaseline = "alphabetic"; contexte.textAlign = "left"; contexte.font = 36px "Segoe UI" bold; contexte.shadowOffsetX = 5; contexte.shadowOffsetY = 5; contexte.shadowBlur = 5; contexte.shadowColor = "black"; contexte.fillText("Html5 canvas", 10, 70); contexte.font = "80px "Segoe UI" bold"; contexte.strokeText("Html5", 10, 150); </script> </body> </html>
- 1-
Transformations
Jusqu prsent le dessin initi par la balise <canvas> tait statique. Les diffrentes transformations rendent les lmentsdynamiques. Translation La mthode translate(x,y) dplace un lment du canevas de son origine vers un nouveau point dont les coordonnessontfourniesparxety. Rotation Lamthoderotate(angle)estutilisepourfairetournerunlmentautourdesonpointdorigine.Leparamtreangle estexprimenradianseteffectuelarotationdanslesensdesaiguillesdunemontre. Notonsquelepointcentraldelarotationesttoujourslepointdorigine.Pourmodifiercedernierilestncessairede dplacerllmentlaidedelamthodetranslate. Miselchelle Lamiselchelle permet dagrandiroudiminuerlatailledeslmentsdanslecanevas.Onutiliselamthodescale (x,y)oxestlefacteurdchelledansladirectionhorizontaleetyceluideladirectionverticale.Lesdeuxparamtres doivent tre des nombres positifs. Les valeurs plus petites que 1.0 rduisent la taille de lunit, et les valeurs plus grandesque1.0augmententlatailledelunit.Positionnerlefacteurdchelleexactement1.0naaucuneffetsurla tailledelunit. Ainsi,commelunitdebaseestlepixel,silonappliqueunfacteurdchellede0.5,lunitrsultantedevient0.5pixels etlesformesdessinesdiminuentlamoitideleurtaille.Dunemaniresimilaire,enpositionnantlefacteurdchelle 2.0 on augmente la taille de lunit et celleci devient alors gale deux pixels. Le rsultat est que les formes dessinesaugmententdedeuxfoisleurtaille. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <script type="text/javascript"> function draw() { var ctx = document.getElementById(canvas).getContext(2d); ctx.translate(75,75); for (i=1;i<6;i++){ ctx.save(); ctx.fillStyle = rgb(255,+Math.abs(306-51*i)+,0); for (j=0;j<i*6;j++){ ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } </script> <style type="text/css"> canvas { border: 1px solid black;} </style> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
- 1-
- 2-
Prambule
LeHtml5comportedefaonnativedenombreusesinterfacesdeprogrammation(ApplicationProgrammingInterfaceou API).Citons:
q
Lagolocalisation,quipermetdelocaliserlutilisateurparsescoordonnesdelongitudeetlatitude. Dessupercookies,avecWebStoragequipermettraunstockageplusimportantdedonnesdanslenavigateur. LutilisationdesapplicationsWebhorsconnexionaprslamiseencachedesressourcesncessaires. LesWorkers,quipeuventexcuterdestchesdefondenparallleduprogrammeJavaScriptprincipaldansun environnementtotalementspardelapage. LesWebsockets,quipermettentdtablirunecommunicationbidirectionnelleasynchroneentrelenavigateuret leserveur. Leglisserdposer(drag/drop)ennatifdanslenavigateur. LattributContentEditable,quipermetlditionenligneducontenudunlment.Ilfaitapparatreunditeur WYSIWYG basique qui permet donc dditer directement le contenu dans la page. Toutes les modifications apportesparlutilisateurpourronttretraiteslafindeldition. Etc.
Laplupartdpassentlargementlecadredecetouvrage.Intressonsnousnanmoinslafonctiondegolocalisation.
- 1-
Conceptetutilit
Lagolocalisation(geolocation)estunprocdpermettantdepositionnerunobjetouunepersonnesurunecarteou unplan.AuniveauduWeb,lagolocalisationpermetunsitedeconnatrelescoordonnesgographiques(longitude etlatitude)dunutilisateur. Ceconceptnestpasnouveausurlatoile.Lanouveautrsidedanslefaitquecettefonctionnalitestinclusedefaon nativedansleHtml5soitsansbibliothqueouAPIsupplmentaire. Lesapplicationsdelagolocalisationpeuventtremultiples.Unsitecommercialpeutainsiproposerdesrevendeursde sonproduit,situsproximitimmdiatedelendroitorsidelutilisateur.Unrseausocialpeutvousindiquerdes affilis correspondant votre profil qui rsident prs de chez vous. Un moteur de recherche peut galement vous proposer des htels, restaurants ou lieux de loisirs dans les environs dune ville tape. En fonction de votre lieu de rsidence,unsitedeventeenligneinternationalpourraafficherlesprixdansvotredeviseouafficherlesdatesselon votremodlehabituel(jj/mm/aaaaoumm/jj/aaaa).
- 1-
Lefonctionnement
Doproviennentcesdonnesquipermettentdevouslocaliser? Tout dabord, de ladresse IP de lutilisateur.Cest une procdure simple de connatre ladresse IP de lutilisateur. Il suffit alors de consulter des registres dattribution pour connatre votre adresse physique. La prcision de la golocalisation est parfois sujette surprise car, dans certains cas, cest ladresse de votre fournisseur daccs qui serareprise. Ensuite, de votre rseau wifi. La golocalisation de votre rseau wifi sobtient par triangulation par rapport des points daccs ou bornes wifi aux alentours. Rappelezvous quen mai 2010, la socit Google a rvl que ses vhicules chargs de prendre des photos pour son application Google Street View engrangeaient galement des informationsrelativesauxrseauxwifirencontrs.Lagolocalisationainsiobtenueestassezprcise,surtoutdansles zonesurbaines. Etenfin,pourcertainstlphonescellulairesdeladerniregnration(iPhone),parlescoordonnesGPS.Laprcision delagolocalisationestalorsquasiabsolue.
- 1-
Lesnavigateurs
La plupart des navigateurs reconnaissent cette fonctionnalit de golocalisation en Html5. Citons Chrome5+, Firefox 3.6+,Opera10.6etSafari5+.InternetExplorer8et9nereconnaissentpaslagolocalisation. Il faut cependant signaler que ltat davancement de linclusion de cette API varie grandement dun navigateur lautre.
- 1-
Protectiondelavieprive
Cette golocalisation peut se rvler assez indiscrte et tous les utilisateurs ne souhaiteront pas partager leurs donnesdegolocalisation.LeW3Cmetdesrglesdutilisationtrsstrictes. La golocalisation doit tre une dmarche volontaire de lutilisateur. Avant toute procdure de golocalisation de la partdunsite,unefentrepopupouunbandeaudoitapparatredanslenavigateurdemandantlautorisationexpresse delutilisateur. CapturedcrandelademandedepartagedelalocalisationdansFirefox4:
LammefentredautorisationdansSafari:
Quandunnavigateurprocdeunegolocalisation,lesinformationschangesseralisentparlintermdiairedune connexionchiffre. aucunmomentlenometladressedusiteWebvisitnedoiventtrepartags. Lidentifiant client alatoire attribu pour une procdure de golocalisation doit expirer aprs un dlai de deux semaines. Faisonslev uquecesprocduressoientscrupuleusementrespectespartouslesintervenantsdelatoile
- 1-
Longitudeetlatitude
Cettebibliothque(API)degolocalisationfaitlargementappelauJavaScript. LeJavaScriptposition.coordsretournelescoordonnesmaisaussibiendautresvaleurs:
q
position.coords.longituderenvoielalongitudedelaposition. position.coords.latituderenvoielalatitudedelaposition. position.coords.altituderetournelaltitudedelaposition. position.coords.accuracyindiquelaprcisiondescoordonnes. position.coords.altitudeAccuracyfournitlaprcisiondelaltitude. position.coords.headingdonnelapositionendegrparrapportaunord. position.coords.speedquicorrespondlavitessedelutilisateurparrapportsadernireposition.
Cesvaleursnesontpasencoretoutesprsentesdanslesnavigateursmaisdonnentuneidedupotentieldecette application. laboronsunexemplequiretournelalongitudeetlalatitude: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <script type="text/javascript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; document.getElementById("latitude").innerHTML = latitude; document.getElementById("longitude").innerHTML = longitude; }); } else { alert("Votre navigateur ne supporte pas la golocalisation"); } </script> </head> <body> <h1>Html5 golocalisation</h1> Latitude : <span id="latitude">Loading...</span><br> Longitude : <span id="longitude">Loading...</span> </body> </html>
- 1-
Pourprserverlesdonnesprivesdelauteur,lescoordonnesdelongitudeetdelatitudecorrespondent cellesdelatourEiffel. Lescriptestdisponibledanslespacedetlchargementrservcetouvrage. PourillustrerlaspectencoreexprimentaldecetteAPI,lescriptfonctionneenlocalsousFirefox3.6+etOpera10.6+. PourChrome,lapagedoittreenligneetSafari(sousWindows)bloquesurlcrandaccueil. Explicationsduscript: <script type="text/javascript"> ... </script> LesbalisesquiintroduisentunscriptJavaScript: if (navigator.geolocation){ ... } Lescripttestesilafonctiondegolocalisation(geolocation)estpriseenchargeparlenavigateur(navigator). var latitude = position.coords.latitude; var longitude = position.coords.longitude; Si cest bien le cas, la variable latitude est obtenue par position.coords.latitude et la variable longitude par position.coords.longitude. document.getElementById("latitude").innerHTML = latitude; document.getElementById("longitude").innerHTML = longitude; }); On reporte dans le Html (innerHTML) la variable latitude lintrieur dans la balise <span> dote de lidentifiant Id id="latitude".Onprocdedemmepourlalongitude. Else { alert("Votre navigateur ne supporte pas la golocalisation"); } Silenavigateurnacceptepaslagolocalisation,unefentredalerteapparat.
- 2-
- 3-
Localisationsurunecarte
Unefoislalongitudeetlalatitudeconnues,latentationestgrandedereportercettepositionsurunecarteenfaisant appelGoogleMaps. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false &key=ABQIAAAA8JXb0YDVa4otOLnM95w50BSeC_rwpfX9fQbnbMGMDH8BB4BVRTjxWS14T5WLZf7TpXaaAtk_SIb-Q" type="text/javascript"> </script> <script type="text/javascript"> var map; var geocoder; function init() { map = new Gmap2(document.getElementById("carte")); map.setCenter(new GLatLng(34, 0), 1); geocoder = new GclientGeocoder(); } function sur_carte(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("Dsol, nous ne pouvons golocaliser votre adresse."); } else { place = response.Placemark[0]; point = new GlatLng(place.Point.coordinates[1], place.Point.coordinates[0]); marker = new Gmarker(point); map.setCenter(point, 13); map.addOverlay(marker); } } function geolocalisation() { var adresse = document.form.latitude.value + "," + document.form.longitude.value geocoder.getLocations(adresse, sur_carte); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; document.form.longitude.value = longitude; document.form.latitude.value = latitude; geolocalisation(); }); } else { alert("Votre navigateur ne supporte pas la golocalisation"); } </script> </head> <body onload="init()"> <div style="text-align:center; width: 400px;"> <h1>HTML 5 Geolocalisation</h1> <form name="form" action=""> <p> Longitude : <input type="text" name="longitude" value="" size="20"><br> Latitude : <input type="text" name="latitude" value="" size="20"> </p> </form>
- 1-
<div id="carte" style="width: 400px; height: 250px;"></div> </div> </body> </html>
Pourprserverlesdonnesprivesdelauteur,lescoordonnesdelongitudeetdelatitudecorrespondent cellesdelatourEiffel. LapageHtmletlescriptsontdisponiblesdanslespacedetlchargement. Quelquesexplications: Lagolocalisationseffectuecommeaupointprcdentparlescriptsuivant: if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; document.form.longitude.value = longitude; document.form.latitude.value = latitude; geolocalisation(); }); } else { alert("Votre navigateur ne supporte pas la golocalisation"); } Les coordonnes trouves sont envoyes la fonction geolocalisation. Cette dernire fait son tour appel la fonction sur_carte qui exploite la bibliothque (API) Google Maps Api. Pour plus dinformations sur linsertion dune carteGooglemapsdansunsite,consultezladressehttp://code.google.com/intl/frFR/apis/maps/.
- 2-
- 3-
Conceptdesfeuillesdestyle
LesfeuillesdestylesontdesajoutsdecodeaulangageHtmlquivontprendreenchargelaprsentationdudocument oudelapplicationWeb.
Le concept de feuilles de style repose sur le principe de la sparation du contenu et de la prsentation dans llaborationdapplicationsHtml. Ainsiunmmecontenupourraittreutilis,selonlafeuilledestyleadopte,pourunaffichagesurdesmdiasaussi diversquuncrantraditionnel,lcrandunordinateurdepocheoudunmobile,desfeuillesdepapierimprimes,une barrettebraille,etc. Cestainsitoutledomainedelaprsentationquiestprisenchargeparlesfeuillesdestyle,lerleduHtmlselimitant alorslastructureetlencodagedelinformationbrute.
- 1-
Utilitdesfeuillesdestyle
LesfeuillesdestylereprsententunoutilpuissantdontlesimplicationsdanslaconceptiondesapplicationsWebsont multiples. UnpassageobligenHtml5 Le Html5 va au bout du concept de la sparation du contenu et de la prsentation. Presque tous les lments de prsentationdesbalisesoudesattributsprsentsdansleHtml4.0ontainsidisparu.UndocumentHtml5sansfeuille de styles pour en assurer la prsentation nest alors plus quune morne structure du contenu textuel. Citons, par exemple,labsenceenHtml5delattributborderquiassuraitlaprsencedunebordurelabalisedetableau<table>, rendantainsilareprsentationdestableauxproblmatiquesenpurHtml. LesfeuillesdestylevontbeaucoupplusloindansledomainedelaprsentationquelesanciennesbalisesduHtml.De par leur richesse et leur varit, elles ont profondment modifi laspect visuel des applications en dcuplant la crativitdeswebgraphistes. Unesimplificationducode Il semble dj bien lointain, le temps o le code source des pages Web tait un imbroglio incomprhensible de tableauximbriqusetdastucesentoutgenrepourassureruneprsentationagrable. Lesfeuillesdestyleontpermisdallgerconsidrablementlecodesourceenlerendantpluslisibleetplusaccessible. Unemaintenancedesitefacilite De par lutilisation croissante du Web comme source dinformation, la dimension des sites Web a considrablement augmententermesdenombredepagesparsite.Ilnestplusrarederencontrerdessitesdeplusieurscentainesde pages.Unemisejourgraphiquepeutainsiconstitueruntravailgigantesque. Pluttquededevoirreprendreetretravailler,uneparune,chacunedespagesdusite,lesfeuillesdestylepermettent, parlaseulemodificationdununiquefichier,demodifierlaprsentationgraphiquedelensembledunsite,toutenlui assurantunecohrencegraphique. Unevoieverslaccessibilit Depuis quelques annes, laccent a t mis sur laccessibilit des sites Web pour les personnes prsentant des dficiences visuelles. Beaucoup de concepteurs de sites ont pris conscience de limportance du Web comme media dinformationsirremplaablepourcespersonnescomportantunhandicapdelavue.Pourrendreunsiteaccessible,soit procurer aux malvoyants un accs immdiat la mme information et au mme volume dinformation, lusage des feuillesdestylesavretreunoutilessentiel. Sansentrerdanslesdtails,lesfeuillesdestyleoffrent,parexemple,lapossibilitdafficherunepagedetexteavec descaractresplusgrandsetdoncpluslisibles.
- 1-
Brefhistorique
Lorsque, dbut 1991, Tim BerneersLee inventa le Web, le langage Html tait principalement conu pour faciliter lchangedinformationsentrescientifiques.LespremirespagesWebtaientpourlemoinsaustresavecleurfond depagegris,untextedecouleurnoireetstructuruniquementavecdestitresetdeslistes.Ilfallutmmeattendre quelquesannespourvoirapparatrelespremiresimagesen256couleurs!OntaitloindenosapplicationsWeb actuelles. Assez rapidement cependant, ds 1994, devant les relatives faiblesses du Html en matire de prsentation, lide dadjoindreauHtmldesstyles,commedansleslogicielsdetraitementdetexte,fitsonapparition. Lorsquen1995leW3C(pourWorldWideWebConsortium)commenafonctionner,unedesespremiresralisations concrtes fut la publication en novembre 1995 dune premire bauche de travail (working draft) sur les feuilles de style. Ce document devint une recommandation officielle le 17 dcembre 1996 sous le nom de "Feuilles de style en cascadeniveau1"(CascadingStyleSheets,level1)oudemanireabrgeCSS1. Danslafoule,ungroupedetravailspcifiquefutcraveccommemissiondtendreleconceptdesfeuillesdestyle. Unenouvellerecommandationfutpubliele12mai1998souslevocableCSS2. Quelquescorrectionsetdesextensionsmineuressontproposescourant2006sousladnominationCSS2.1. Depuis2009,ilestbeaucoupquestiondesCSS3.MaisonnepeutplusparlerderecommandationCSS3carlegroupe detravailascindlaspcificationenunemultitudedemodulesquisuiventchacunleurvolutiondansletemps.Citons le module CSS3 des couleurs (CSS Color Module Level 3), le module CSS3 de texte (CSS Text Level 3), le module qui soccupedesarrireplansetdesbordures(CSSBackgroundsandBordersLevel3),etc. Les diffrentes marques de navigateurs portent un intrt vident pour ces nouvelles CSS3 et les intgrent rapidement.Parfois,cellescisontmmeimplantesdefaonprovisoireenattendantlaspcificationdfinitive.
- 1-
Compatibilitaveclesnavigateurs
On peut considrer que les feuilles de style CSS1 et CSS2 sont bien reprises par les navigateurs prsents sur le march,mmesilsubsistequelquesbmolsetbugsdanslesnavigateursplusanciens. Pour les navigateurs de notre tude (pour rappel, Interner Explorer 9, Firefox 3.6+, Safari 5+, Chrome 7+ et Opera 10.6+),lesfeuillesdestyleCSS1etCSS2neposentplusdeproblmesdecompatibilit. LasituationestloindtrelammepourlesCSS3(voirchapitre"LesfeuillesdestyleCSS3").Ilimportedsprsent dinsistersurlectnouveauvoireexprimentaldelincorporationdecesfeuillesdestyleCSS3danslesnavigateurs modernes.Ainsi,unepropritestreprisepartelnavigateurmaispasparunautre,unepropritnestincorporeque dans la version X dun autre ou encore chaque navigateur traite celleci avec un prfixe particulier. Nous avons cependantveillfourniruncodeavecunecompatibilitmaximalemmesiltudedecesCSS3estencoreardue. Ne manquez cependant pas de percevoir lavance marquante des CSS3 dans la prsentation du document car les nouveauts sont nombreuses et devraient modifier radicalement laspect des applications Web dans les prochaines annes. Citons larrive de la typographie avec les polices personnalises, la prsentation dun contenu textuel en colonnes multiples, les ombres sur le texte et les lments bote, les bords arrondis, les dgrads de couleurs, la transparencedecellesci,etc.
- 1-
Outilspourlesfeuillesdestyle
Tout comme pour ltude du Html5, un simple diteur de texte brut comme NotePad ou SimpleText fait parfaitement laffaire.Dautrespetitslogicielsdditionpeuventtreutilissmaislimportantestdavoirdutextebrutsansaucune miseenforme. Paralllement au validateur de documents Html (Prsentation du Html5 La validation du code Html5), il existe galementunvalidateurddiauxfeuillesdestyle. LevalidateurenligneduW3CpourlesCSS(http://jigsaw.w3.org/cssvalidator/)estunoutildegrandevaleuretdont lesqualitssontunanimementreconnues.Ilpermetdefournirdespagesparfaites,scrupuleusementrespectueuses desnormesditesparleW3C.
Cependant,sonusageneservlepastrsadaptdanslecadredunapprentissage.Laconceptiondecevalidateur atguideparleprincipedelastrictesparationentrelastructureetlaprsentation.Cefaisant,ilprsupposeque lesinformationsdeprsentationcontenuesdansledocumentHtmlsontintgrespardesfeuillesdestyleexternes (Validationpartlchargementdufichierversleserveuretvalidationparsaisiedirecte),cequiestrarementadopt lorsdunapprentissage.Eneffet,lencodagedesfeuillesdestylesousformedecodeCSSinterneaudocumentHtmlse rvleplusabordableetplusconvivial.LevalidateurduW3CoffrebienlapossibilitdevaliderunfichierHtml5avec CSS mais dans ce cas, le fichier doit tre prsent sur un serveur Web (Validation par URI), ce qui rclame une procdurelongueetpeupratiquepouruneformation. lheureactuelle,levalidateurnintgrepasencorelesfeuillesdestyleCSS3. LevalidateurCSSduW3Cservledonctreplusunoutildestinauxprofessionnelsquauxapprentisconcepteurs.
- 1-
LadclarationdestyleCSS
Ladclarationdunstyleseffectueparlebinmeproprit: valeur; Exemple background-color: red; Cequipourraitselire:"mettrelacouleurdelarrireplanlavaleurrouge". Dtaillonscettedclaration:
q
La proprit identifie ce qui sera dfini dans le style adopt. Ces proprits sont numres dans les spcificationsCSS.Ilexistedenombreusespropritsportant,parexemple,surlapolicedecaractre(font), surletexte(text),surlarrireplan(background),surlabordure(border),etc. Lapropritestsparedesavaleurparundoublepoint. Lesespacessontpermis.Ainsicertainsauteursontprislhabitudedemettreunespaceentreledoublepoint etlavaleurpourunemeilleurelisibilitducode. Lavaleuridentifielanaturedeleffetdestylesouhait.Lavaleursexprimeparunmotcl, un pourcentage, unegrandeurenfonctiondelapropritlaquelleelleestassigne. Unedclarationdestyleseterminetoujoursparunpointvirgule. Ilestpossiblededfinirplusieursdclarationsdestylepourunslecteur.Parexemple:proprit1:valeur; proprit2:valeur; proprit3:valeur;.
- 1-
Lesslecteursdebase
1.Lesslecteursdebalise
Danslechapitreprcdent,nousavonsdfinilesfeuillesdestylecommedesajoutsaucodeHtml5. Lapropritdestylevientdonc"saccrocher"unlmentouunebaliseHtml.Cestcequonappelleunslecteur. Lasyntaxedunslecteurdebaliseestladnominationdelabalisesuiviedeladclarationdestylecompriseentre desaccoladesouvrantesetfermantes. slecteur { dclaration de style} Exemple div { background-color: red;} Remarquezquelonreprendsimplementladnominationdelabalisesanssessignesinfrieur(<)etsuprieur(>). Doncuniquementletextedelabalise. Cequipourraitselire:"appliquertouteslesbalisesdedivision<div>leffetdestyledcritentrelesaccolades". Il est aussi possible daffecter le mme effet de style diffrents slecteurs de balise. Dans ce cas, chacune des balisesconcernesdevratrespareparunevirgule. Soit: h1,h2,h3 { dclaration de style} Cequisignifiequelesbalises<h1>,<h2>et<h3>aurontlemmeeffetdestyledcritentrelesaccolades.
2.Lesslecteursdeclasse
Nousavionsvujusquprsentquelesfeuillesdestylesappliquaientunslecteuretqueceslecteurpouvaittre unebaliseHtml. Maiscetteseulenotiondeslecteuresttroplimitative.Ilfaudraitpouvoirappliquerplusieursstylesdiffrentsune mme balise. Cest ce quapportent les classes. Avec cellesci, le concepteur pourra, en quelque sorte, dfinir lui mmesespropresslecteurs. Ladfinitionduneclasseest: .nom_de_la_classe { dclaration(s) de style} Soitunpoint,suividunomquevousvoulezattribuerlaclasse,suivideladclarationdestyleentredesaccolades. Exemple .rouge { background-color: red;} Cette dfinition de classe pourra tre utilise pour nimporte quelle balise du document ou de lapplication. Dole termedeclasseuniverselle. Cependant,laclasseainsidfinienaaucuneinfluenceaussilongtempsquellenestpasappeledansledocument. Lappeldelaclassedestylesefaitpar: <balise class="nom_de_la_classe"> Exemple <div class="rouge"> ... </div>
- 1-
Commentaires:
q
Lepointduslecteurdeclassenestpasutilispourlappeldelaclasseclass(erreurfrquente). UnemmeclassepeuttreappeleplusieursfoisdansledocumentHtml.Parexemple: <div class="rouge">Item 1<div> <div>Item 2<div> <div class="rouge">Item 3<div> Ici,seuleslesdivisionsaveclaclasserougeaurontunarrireplandecouleurrouge.
Onpeutmlangerlesdclarationsclassetid. Unnomdeclassepeutcomporterdeslettres,deschiffres,letiretetlecaractredesoulignement.Lepremier caractrenepeuttreunnombre,untiretouuncaractredesoulignement.Lesespacessontviterainsi quelesnomsrservsduJavaScript.
Il existe une autre faon de dfinir une classe, mais elle est moins pratique (et donc moins utilise) que la prcdente: nom_balise.nom_de_la_classe {dclaration(s) de style} Soitunnomdebalise,suividunpoint,suividunomquevousvoulezdonnerlaclasse,suivideladclarationde styleentredesaccolades. Exemple blockquote.rouge { background-color: red;} Aveccettedfinitiondeclasse,cellecinepourratreappliquequlaseulebalisedsigne,soiticiblockquote.
3.Lesslecteursdidentifiant
Leslecteurid,aussiappelidentifiantid,permetdappliquerunefeuilledestyle(commeleslecteurclass)maisil nepourratreappelquuneseulefoisdansledocumentHtml. Le slecteur id permet donc didentifier un lment unique dans la page. Cette distinction prend toute son importancequandonferaappelduJavaScriptouduDhtml.Eneffet,idnepouvanttreappelquunefoisdansle document par un lment, celuici pourra tre trait comme un objet unique qui sera par la suite manipul par le JavaScript. Ladfinitiondunslecteuridest: #nom_de_lidentifiant {dclaration(s) de style} Soit un dise (#), suivi du nom que vous voulez donner lidentifiant id, suivi de la dclaration de style entre des accolades. Exemple #rouge { background-color: red;} Cetteslectionnepourratreutilisequuneseulefoisdansledocument. Leslecteurainsidfininaaucuneinfluence,aussilongtempsquilnestpasappeldansledocument. Lappelsefaitpar: <balise id="nom_de_lidentifiant"> Exemple
- 2-
<div id="rouge"> ... </p>
Commentaires
q
UnidentifiantidnepeutfigurerquunefoisdansledocumentHtml.Ainsi,cequisuitseraitincorrect! <p id="rouge"> </p> <p id="rouge"> </p>
Undocumentpeutbienentenducomporterplusieursidentifiantsiddenomsdiffrentsmaisilsnepourront treappelschacunquuneseulefois. Onpeutmlangerlesdclarationsclassetid. Un nom didentifiant peut comporter des lettres, des chiffres, le tiret et le caractre de soulignement. Le premier caractre ne peut tre un nombre, un tiret ou un caractre de soulignement. Les espaces sont viterainsiquelesnomsrservsduJavaScript.
Il existe une autre faon de dfinir une classe mais elle est moins pratique (et donc moins utilise) que la prcdente: nom_balise#nom_de_lidentifiant {dclaration(s) de style} Soitunnomdebalise,suividundise(#),suividunomquevousvoulezdonnerlidentifiant,suivideladclaration destyleentredesaccolades. Exemple blockquote#rouge { background-color: red;} Avecceslecteur,celuicinepourratreappliququlaseulebalise<blockquote>dsigneparlidentifiantrouge. SignalonsquelesfeuillesdestyleCSS3ontajoutdenombreuxslecteurs.Ceuxciserontabordsendtail auchapitreLesfeuillesdestyleCSS3LesslecteursCSS3.
- 3-
Lescommentaires
Toutlangagededescriptionoudeprogrammationpermetlinsertiondecommentairespourlacomprhensionducode et sa maintenance ultrieure. Dans une feuille de style CSS, un commentaire commence par les caractres barre obliqueettoile(soit/*)etseterminepartoileetbarreoblique(soit*/).Onpeutplacerdescommentairesnimporte odanslafeuilledestyle,exceptlintrieurdunechanedecaractres. Exemple /* Ceci est un commentaire */
- 1-
Lesunitsdemesure
Les feuilles de style CSS permettent dutiliser de nombreuses units de mesure soit en pouces (inches), en centimtres,enmillimtres,enpoints,enpicas,enpixelsetenpourcentage. On distingue les valeurs relatives qui peuvent varier selon lordinateur utilis et les valeurs absolues qui restent constantesquelquesoitlematrieloulesoftwareutilis. Lesvaleursabsoluessont: Unit pt pc mm cm in Nom point pica millimtre centimtre inch Description 72pt=1inch 1pc=12pt 1mm=.24pc 1cm=10mm 1in=2.54cm Valeur entier rel entier entier rel Exemple 48pt 4.5pc 60mm 6cm 0.1in
Lesvaleursrelativessont: Unit em Description Unitrelativese basantsurlataillede policepardfautdela page. Unitrelativela hauteurdela minusculedellment slectionn. Lepixelestlaplus petitepartiedune image.Dpenddela rsolutiondcran. Pourcentage Valeur rel Exemple 1.8em
ex
rel
1.3ex
px
entier
220px
% Commentaires
q
entier
80%
Lesunitsdemesuresonttoujoursnotesparuneabrviationcomportantdeuxlettres. Ilnepeutyavoirdespaceentrelavaleuretlunit.Siunespaceestmisentrelavaleuretlunit,lafeuillede styleneserapasaccepteetneseradoncpasaffiche. Certainespropritsacceptentdesvaleursngatives. Ilestgnralementrecommanddutiliserlunitempourdcrirelatailledespolicesdecaractrespourune plusgrandestabilitentrelesdiffrentssystmesdexploitationetnavigateurs.
- 1-
Lanotationdescouleurs
LesfeuillesdestyleCSSproposentdemultiplesnotationspourdclarerunecouleur.Soit:
q
La notation hexadcimale classique soit #ffcc00. Cette manire est dj bien connue de ceux qui sont habitusauxcouleursenHtml.Elledfinitlacouleur,oupluttsestroiscomposantesrouge(rpourred),vert (gpourgreen)etbleu(bpourblue),viaunenotationhexadcimaledetype#rrggbb. La notation hexadcimale abrge soit #fd3. Cette notation particulire permet de gagner quelques caractres. Chaque chiffre est alors implicitement dupliqu. Par exemple, #fd3 correspond la notation classique#ffdd33.Oncomprenddoncquonnepourrapasabrgerunecouleurcomme#cfe4f5. Lanotationdcimalesoit,parexemple,color: rgb(0, 0, 255).LecodeRGB(RVBpourlesfrancophones)dela couleur nest plus encod en valeur hexadcimale mais par un nombre entier compris entre 0 et 255. Cest donclquivalentdcimaldelanotationhexadcimale. Lanotationenpourcentagesoit,parexemple,color: rgb(25%, 50%, 0%).Lavaleur0%signifielabsencedela composante,100%quelleestsonmaximum. Lesmotsclssoit,parexemple,color: red.Cescouleurs,aunombrede17,sontdsignesparunnomen anglaisetconstituentlescouleursbasiques.Onyretrouve:green(vert),yellow(jaune),blue(bleumoyen), orange (orange), white (blanc), red (rouge), black (noir), maroon (brun marron), lime (vert citron), aqua (turquoise), teal (cyan fonc), navy (bleu marine), olive (olive), fuchsia (fuchsia), purple (pourpre), silver (gris clair)etgrayougrey(grisfonc).
cesnotations,laspcificationCSS3aajout:
q
La notation RGBa, qui obit aux mmes rgles de fonctionnement que la notation classique RGB, mis part quune composante est ajoute la valeur : rgb(0,0,0). Celleci devient donc rgba(0,0,0,0). La dernire valeurindiquantledegrdopacitoudetransparenceentre0et1. La notation HSL (Hue Saturation Luminance), qui correspond la notation TSL en franais (Teinte Saturation Luminosit).LanotationHSLconsisteentroisvaleurs.Lapremireestexprimeendegrsde0359(mais lesymboledegrnapparatpasdanslanotation).Ellecorrespondunecouleurdanslarouechromatique : lerouge(0),lejaune(60),levert(120),lecyan(180),lebleu(240)etlemagenta(300).Lessecondes ettroisimesvaleurssontexprimesenpourcentageetnotentrespectivementlasaturationetlaluminosit. Parexemple,color: hsl(0, 100%, 50%)pourlerouge. LanotationHSLa,quiajouteunevaleurcompriseentre0et1pourlatransparenceoulopacit.Parexemple, color: hsl(0, 100%, 50%, 0.5)pourunrougesemitransparent.
Pourvousaiderdanslecodagedescouleurs,lessitessuivantsvousserontdunegrandeutilit: http://codecouleur.com/ http://fr.wikipedia.org/wiki/Liste_de_couleurs http://www.ficml.org/jemimap/style/color/couleur.html http://www.webmasterhub.com/outils/color.html http://www.gratos.be/webmaster/code_couleur.htm
- 1-
Uneconventiondcriture
Les feuilles de style ne sont pas sensibles la casse (case insensitive). Peu importe donc quelles soient crites en majusculesetminuscules.Cependant,leslmentsquinesontpassouslecontrledesfeuillesdestylecommeles nomsdepoliceoulesURLspeuventtresensiblesauxmajusculesetauxminuscules(casesensitive). Lusageveutquelonencodelesfeuillesdestyleenminuscules.
- 1-
LesCSSintgresunlmentHtml5
EnHtml,ilestenvisageabledajouterdirectementdanslecode,unedclarationdestyleunebalisedtermine. Cestyleenligneseprsenteainsi: <h1 style="color: red;">Votre titre de niveau 1</h1> Cettefaondeprocderestcependantviterenvertuduprincipedelasparationducontenuetdelaprsentation. Ellepeutcependanttreutilepourdonnerlaprioritunepropritdestyleparrapportcequiatspcifidans ladclarationinterneouexterne. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1 style="font-style: italic;">Titre 1</h1> <h1>Titre 2</h1> </body> </html>
Seulelapremirebalise<h1>avecladclarationdestyleestafficheenitalique.
- 1-
LesCSSinternesaudocumentHtml5
LutilitprincipaledesfeuillesdestyleCSSestdedterminerunstylequisappliquelentiretdunepageHtml5. cet effet, le code des feuilles de style sera regroup dans lentte du document, soit entre les balises<head> et </head>.Onparlealorsdestyleinterne. Lasyntaxeseprsentealorsainsi: <head> <style type="text/css"> h1 { color: red;} </style> </head> Cettedclarationdestyleauracommeeffetdemettreenrougeletextedetouteslesbalises<h1>dudocumentHtml. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { font-style: italic;} </style> </head> <body> <h1>Titre 1</h1> <h1>Titre 2</h1> </body> </html>
Onremarquequetouslestitresdeniveau1decettepageserontenitalique.
- 1-
LesCSSexternesaudocumentHtml5
Ilestgalementpossiblederegrouperlesdclarationsdestyledansunfichierexterne(distinct)aufichierHtml. Cettefaondeprocderrespecteaumieuxlasparationducontenuetdelaprsentation. Unedespotentialitsdecesfeuillesdestyleexterneestquilestpossibledecrerunefeuilledestylequisapplique nonpasuneseulepageHtmlmaislensembledespagesdunsiteouduneapplication. Cettetechniquemeten uvredeuxfichiers:
q
Unfichierquicontientladclarationdestyle.Cefichieraurauneextension.css. UndocumentHtmlquicontientunlienverslefichierCSSainsicr.
Lafeuilledestyleexterne h1 { text-decoration: overline;} Ilfautnoter:

q
Quecefichierentextebrutpeutsecrer,parexemple,avecleBlocnotesdeWindows. Quilcontientuniquementdesdclarationsdestyle. Quil ne peut donc pas contenir de balises Html et en particulier les balises <style type="text/css"> </style>desfeuillesdestyleinternes. Onenregistreracefichiersousunnomdefichierquelconqueavecuneextension.css.Soiticiexemple.css. Pourlasimplicit,cefichiersesituerasouventdanslemmedossierqueledocumentHtml(adressagerelatif oulocal).
LedocumentHtml5 Onajouteradanslentte,soitentrelesbalises<head>et</head>,unlienverslafeuilledestyleenquestion. <link rel="stylesheet" type="text/css" href="exemple.css"> tudionscettelignedecode:

q
linkindiqueaunavigateurquecequisuitestunlien. rel="stylesheet"prcisequecelienestrelatifunefeuilledestyle. href="exemple.css"estlcritureclassiquedunlienenHtml. Lelienpeuttreabsolu(commenantparhttp://...)ourelatif. Riennempchedemettreplusieursbalises<link>versdesfeuillesdestyleexternesdiffrentes. Riennempchenonplusdutilisergalementunefeuilledestyleinterne.
Exemple Lecodedufichierexemple.cssesttoutsimplement: h1 { text-decoration: overline;}
- 1-
LecodedufichierHtml5: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <link rel="stylesheet" type="text/css" href="exemple.css"> </head> <body> <h1>Titre de niveau 1</h1> </body> </html> Touslestitresh1detouteslespagesfaisantrfrencecettefeuilledestyleserontsurligns.
Mme si cette mthode respecte au mieux les prescriptions du W3C (sparation du contenu et de la prsentation), nous adopterons cependant, dans la suite de cet ouvrage, la technique des feuilles de style internes,moinsabstraitesetpluscomprhensibles.
- 2-
CSSimporte(@import)
Uneautrefaondutiliserdesfeuillesdestyleexternesestdutiliser@import. <style type="text/css"> @import url(exemple.css); </style> @importestunepropritdestyleCSS2(alorsquelabalise<link>estduHtml).Lavantageestquelonpourranon seulement lutiliser pour appeler une feuille de style externe dans un document Html mais aussi pour importer une autrefeuilledestyledanslafeuilledestyleexterne. Commentaires
q
Lesbalises<style> </style>sontncessairescar@importestunepropritdestyle(CSS2). Ilnyapasdespaceentrelarobaseetimport. Ladressedelafeuilledestylepeuttreglobale(http://)oulocale. Noubliezsurtoutpaslepointvirgulefinal!Pourrappel,@importestunepropritdestyleCSS. Labalise<link>nestplusncessaire.
Lecodecompletpourraittre: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> @import url(exemple.css); </style> </head> <body> <h1>Titre de niveau 1</h1> </body> </html> Toutcommepourlesstylesexternes,touslestitres<h1>detouteslespagesdusiteserontsurligns. Lacapturedcranestidentiquelaprcdente.
- 1-
Lanotiondecascade
lalecturedespointsprcdents,onconstatequelonpeutavoirplusieursdfinitionsdestylesoitenligne,interne(s) ou externe(s). En cas de concurrence entre plusieurs lments de style, intervient alors la notion de "cascade" (le CascadingdeCascadingStyleSheets)oudordredepriorit. Le navigateur prend dabord en considration les spcifications des feuilles de style externes (avec lextension css), ensuite celles de style internes (soit celles lintrieur des balises <head>) et ensuite des feuilles de style en ligne (cellesliesunlmentHtml5). Ainsi,encasdeconflitentreunespcificationdestyledfinielafoisdansunefeuilledestyleexterneetdansune feuilledestyleinterne,cestlaspcificationdelafeuilledestyleinternequiseraretenueparlenavigateur.Demme, encasdeconflitentreunefeuilledestyleinterneetenligne,cestcettedernirequilemportera. Lordrecroissantdepriorit(delaplusbasselaplushaute)est: 1.Propritsdunavigateur. 2.Lesfeuillesdestyleexternes. 3.Lesfeuillesdestyleinternes. 4.Lesfeuillesdestyleenligne. Lesstylesdclarsdanslafeuilledestyleenligneontdoncbienlaplushautepriorit. La rgle de priorit, pour laffichage du document par le navigateur, sera dutiliser la feuille de style la plus prochedellment.
Exemple Dfinissonsunefeuilledestyleexterneaveclestitresdeniveau1soulignsetunefeuilledestyleinterneavecces mmestitresdeniveau1surligns. Lefichierdestyleexterne(style1.css): h1 { text-decoration: overline;} LedocumentHtml5: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <link rel="stylesheet" type="text/css" href="style1.css"> <style type="text/css"> h1 { text-decoration: overline; } </style> </head> <body> <h1>Titre de niveau 1</h1> </body> </html>
- 1-
Letitredeniveau1estbienaffichcommesurlign(text-decoration: overline),soitavecleffetdustyleinterne,le plusprochedeltapedaffichage. Il est cependant possible de passer outre ces rgles de priorit par dfaut en utilisant la valeur !important et redonnerlaprsanceunedclaration,peuimportelesdclarationsquipeuventlasuivre. Exemple Ondonneralaprioritaustyleexternesoitausoulignementparlavaleur!important. Lefichierdestyleexterne(style2.css): h1 { text-decoration: underline !important;} LedocumentHtml5 : <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <link rel="stylesheet" type="text/css" href="style2.css"> <style type="text/css"> h1 { text-decoration: overline; } </style> </head> <body> <h1>Titre de niveau 1</h1> </body> </html>
- 2-
Lanotiondhritage
LeprincipedelhritagepeuttreexpliquparunrappelduHtmletdesesbalisesimbriques. Soitleboutdecode: <b>Les ditions Eni <i>Collection <code>Ressources informatiques<code></i></b> Ressources informatiquesseranonseulementsousunepolicepasfixe(lesbalises<code> </code>)maisaussien italique(comprisdansdesbalises<i> </i>)etgalementengras(balises<b> </b>). OnpourraitdirequeRessources informatiquesahritduformatageitaliquedelabalise<i>etduformatagegrasde labalise<b>. Ilenestdemmepourlesstyles.
Lestyle2secaractriseparsonproprestyleetceluidustyle1dontilahrit. Lestyle3secaractriseparsonproprestyleetceluidustyle1et2dontilahrit. Danslammelogique,onutiliseraletermede"parent"et"enfant". Lestyle1estbienentenduparentdustyle2.Demme,lestyle2etlestyle1sontparentsdustyle3.Ouencore,le style2estenfantdustyle1etlestyle3estenfantdesstyles2et1. Ces notions de cascade et dhritage sont assez subtiles et dlicates comprendre. Elles se prciseront en cours dtudedesfeuillesdestyle.
- 1-
Typedepolice
La police de caractres est un lment important de la prsentation dun document, que ce soit lcran ou limpression. Le vritable problme pour les concepteurs Web est quils sont dpendants des polices de caractres rellement disponiblessurlamachinedeleursvisiteurs.Lesfeuillesdestyleapportentuneplusgrandediversitdanslechoixde lapolicemaissanscontournerleproblmedespolicesinstalleschezlutilisateur. Lasyntaxedeladclarationdestylepourletypedepolicedutexteest: font-family: Nomdelapolice Exemple font-family: Arial; nomdelapoliceoufamilledelapolice
Commentaires
q
Silonindiqueplusieurspolices,lenomdecellescidoittresparparunevirgule.Soitparexemple:fontfamily: Arial, Helvetica, Georgia; Danscecas,lenavigateurutiliseralapremirepolicenomme,conditionquellesoitprsentesurlesystme du visiteur. Sinon, il passera la suivante, etc. Si aucune des polices dsignes nexiste sur le systme, le navigateurrevientlapolicepardfaut.
Si le nom de la police comporte des espaces, le nom complet doit tre mis entre guillemets (simples ou doubles):font-family :Courrier New, Trebuchet MS, Lucida Console . Le nom des polices nest pas sensible la casse (case insensitive). Il est quivalent dcrire "Times New Roman"ou"timesnewRoman".
Exemple <!DOCTYPE html> <html lang="fr"> <head> <meta charset="iso-8859-1"> <style type="text/css"> h1 {font-family: Lucida Console;} </style> </head> <body> <h1>HTML5 + CSS</h1> </body> </html>
- 1-
Lersultatpeutvarierdunordinateurlautreenfonctiondespolicesinstalles. Familledepolice Aulieudespcifierlenomdelapolice,onpeututiliserdesfamillesdepoliceoudesnomsdepolicesgnriques:

q
serif. Les polices de type serif ont des terminaisons au bout de leurs traits et un espacement des lettres proportionnel(TimesNewRoman,Bodoni,Georgia,Garamond). sansserif.Lespolicessansserifontlesboutsdestraitspleins,sansvasementetunespacementdeslettres proportionnel(Arial,Verdana,Helvetica,Trebuchet). cursive.Familledepolicesdontlersultatestprochedunecrituremanuscrite(Script,AdobePoetica). fantasy.Lespolicesfantaisiesoudcoratives(Wingdings). monospace. Toutes les lettres ont les mmes dimensions. Laspect est semblable celui obtenu avec une machinecriremanuelleetonemploiesouventcetypedepolicepourcrireducodeinformatique(Courier, CourierNew).
Lenavigateurchoisiraluimmelapolicedisponiblesurlamachinedelutilisateurquicorrespondauxcritresdunom gnrique. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .serif {font-family: serif;} .sans-serif {font-family: sans-serif;} .cursive {font-family: cursive;} .fantasy {font-family: fantasy;} .monospace {font-family: monospace;} </style> </head> <body> <p class="serif">Texte en serif</p> <p class="sans-serif">Texte en sans-serif</p> <p class="cursive">Texte en cursive</p> <p class="fantasy">Texte en fantasy</p> <p class="monospace">Texte en monospace</p> </body> </html>
- 2-
Lersultatpeutvarierdunordinateurlautreenfonctiondespolicesinstalles. Commentaire Il est recommand de spcifier un nom de police gnrique aprs une numration de noms de police afin que laffichagerespectelegenredepoliceretenupluttquelapolicepardfautdunavigateur. Exemple:font-family: Arial, Verdana, Helvetica, sans-serif; Ne manquez pas de dcouvrir, au chapitre "Les feuilles de style CSS3 Les polices personnalises", la possibilit offerte par les CSS3 dimporter et dafficher des polices personnalises. Cette nouveaut marque lentredelatypographiedanslesapplicationsWeb.
- 3-
Italique
Cettepropritpermetdcrireuntexteenitalique,ouavecuneinclinaisondescaractresouencriturenormale. font-style: italic; ouoblique; ounormal; Commentaires Ladistinctionentreitalicetobliqueestassezsubtileetpeuvisiblelaffichage.Lavaleuritalicreprendlaversion enitaliquedelapoliceretenuetandisquelavaleurobliqueestsimplementlinclinaisonversladroitedescaractres delapolice,parlenavigateur. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .italic {font-style: italic;} .oblique {font-style: oblique;} </style> </head> <body> <h2 class="italic">Titre en italique</h2> <h2 class="oblique">Titre en oblique</h2> </body> </html>
- 1-
Petitemajuscule
Cettepropritpermetdafficheruntextenormalenpetitesmajuscules. font-variant: small-caps;ou normal; Commentaire Lavaleursmall-capsafficheletexteenmajusculesmaisdedimensionpluspetite(small)quelesmajusculesnormales. Cequidonneunrsultatmoins"agressif". Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .caps { font-variant:small-caps;} </style> </head> <body> <h1>MAJUSCULES</h1> <h1 class="caps">petites majuscules</h1> </body> </html>
- 1-
Graisse
Cettepropritpermetdemettreletexteengras.Notons,mmesilesdiffrencesnesontpastoujoursperceptibles, quelespossibilitssontnettementplusnombreusesquaveclabalise<b>. font-weight: bold;ou bolder;ou lighter;ou normal;ou valeurentre100et900 Commentaires
q
Lavaleurbold(gras)metlapolicedecaractresengras. Lavaleurbolder(plusgras)accentuelagraisseparrapportllmentparent. Lavaleurlighter(pluslger)diminuelagraisseparrapportllmentparent.
Unevaleurnumriqueentre100et900.Lesvaleursdisponiblessont100,200,300,400,500,600,700,800, 900. Lavaleur500correspondsouventlagraisse"normal". Lavaleur700correspondgras. Lavaleur900correspond(thoriquement)supergras.
Si cette propritfont-weight autorise de nombreuses valeurs, la totalit de ces valeurs ne sera cependant paspriseencomptepartouteslespolicescarellesnontpastoutesplusieursversionsdecaractresengras.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .bold { font-weight: bold;} .bolder { font-weight: bolder;} .bold900 { font-weight: 900;} </style> </head> <body> <p class="bold">Texte en gras</p> <p class="bolder">Texte en gras</p> <p class="bold900">Texte en gras</p> </body> </html>
- 1-
Danslecasprsent,ladiffrencenestpasperceptible.
- 2-
Tailledescaractres
AlorsqueleHtml4.0selimitaitsepttaillesdecaractresdanslesbalises <hx>,lesfeuillesdestylepermettentde dfinirunnombreillimitdetaillesdecaractresetceciavecdemultiplesnotations. font-size: valeurenptou valeurenpxou valeurenemou xx-small,x-small,small,medium(dfaut),large,x-large,xx-largeou smaller,largersoitpluspetit,plusgrandparrapportllmentparentou enpourcentagedelatailledellmentparent Commentaires
q
Latailleenvaleurpeuttreindiqueenpoints(pt)ouenpixels(px).Lanotationenpointestplusutilisepour les pages destines tre imprimes et le pixel est plus rpandu pour laffichage lcran. On saccorde considrerlataillede12pxcommeplusoumoinsquivalentecellede12pt. Les valeurs peuvent aussi tre indiques en mm, cm, ex, in ou pica mais elles sont peu frquentes pour laffichagedescaractres. Ilnyapasdespaceentrelavaleuretlunit,soit12pxestcorrect,12pxnelestpas. Onpeutaussidterminerlavaleurparrapportlahauteuremdunepolice.1emcorrespond100%dela tailleencoursdelapolice,1.2em120%,0.8em80%.Lusagedeemestlimitauxpolicesdecaractres. Lesvaleursxx-small,x-small,small,medium,large,x-large,xx-largesontillustresciaprs:
Lesvaleurssmaller(pluspetit),larger(plusgrand)etenpourcentagesontaussiappelesvaleursrelatives carellesdpendentdelatailledecaractresdellmentparent. Lataillepeutvarierdunsystmedexploitationlautre.Ainsi,unetailledecaractresde12pointsapparatra plusgrandesousWindowsquenMacintosh.
- 1-
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .taille {font-size: 96px;} </style> </head> <body> <h1>En Html5</h1> <p class="taille">En CSS</p> </body> </html>
Limit pour des raisons de mise en page du livre, on aurait pu afficher, avec les feuilles de style, des tailles de caractresencoreplusgrandes.
- 2-
Raccourcifont
Bienquelespropritsdepolicepeuventtredfiniesdefaonindpendante,leraccourcifontpermetderegrouper, enuneseuledclaration,lesdiffrentespropritsfont-style,font-variant,font-weight,font-sizeetfont-family. Cequireprsente,danslapratiquedelcriture,ungaindetempsapprciable. Unexempleserait: font: italic bold small-caps 24pt Arial, sans-serif; Cetteseuledclarationcorrespond: font-style: italic; font-weight: bold; font-variant: small-caps; font-size: 24pt; font-family: Arial, sans-serif;
Commentaires
q
Lesdiffrentsattributsdoiventtreindiquslasuite,sparsdunespace. Lordrenapasdimportance.Ilnestpasobligatoirededfinirchaquepropritdepolice.Pourlesproprits nondfinies,lesvaleurspardfautserontretenues. Le raccourci font permet galement de dfinir linterligne (proprit de texte, abord au chapitre Le texte Interligne). La notation est un peu particulire. On indique la valeur de taille de caractre (proprit fontsize),suiviedunebarreoblique,suiviedelavaleurdelinterligne(propritline-height).Ainsi,parexemple, pourfont: italic bold small-caps 24pt/1.5 Arial, sans-serif;,latailledelapoliceseraitde24pointset linterlignede1.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> p {font: italic bold small-caps 24pt Arial, sans-serif;} </style> </head> <body> <p>Le raccourci font</p> </body> </html>
- 1-
- 2-
Lespolicessystme
DepuislaspcificationCSS2,ilestpossibledutiliserlespolicessystmedfiniessurlordinateurdelutilisateur. Ilsuffitpourceladutiliserunedclarationdestylefontsuiviedundesmotsclssuivants: font: caption,policeassocieauxboutons. font: icon,policeassocieauxtiquettesdesicnes. font: menu,policeassocieauxmenus. font: message-box,policeassocieauxfentresdedialogue. font: small-caption,policeassocieauxtiquettespluspetites. font: status-bar,policeassocielabarredestatut. Cettepossibilitestpeuretenuedanslapratique.
- 1-
Couleur
Cettepropritpermetdedfinirlacouleurdutexte. color: nomdecouleurou notationhexadcimalesoussaforme#rrvvbbou notationhexadcimaleabrgesouslaforme#rvbou notationenmodeRVBavecdesentiersde0255ou notationenmodeRVBavecdes%de0100ou notationenmodeRVBaoaestcomprisentre0et1ou notationenmodeHSLou notationenmodeHSLaoaestcomprisentre0et1ou transparent Ces diverses notations des couleurs ont dj t abordes au chapitre Notions de base des CSS La notation des couleurs. Ainsi,ilestquivalentdenoterpourlacouleurrouge: color: color: color: color: color: color: color: color: red; #ff0000; #f00; rgb(100%,0%,0%); rgb(255,0,0); rgb(255,0,0,1); hsl(0, 100%, 50%); hsl(0, 100%, 50%,1);
Notonsquelacouleurpardfautdutexteestlenoir. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { color: #ff0000;} </style> </head> <body> <h1>Texte en rouge</h1> </body> </html>
- 1-
Commentaire Bienqutudieicipourletexte,cettepropritcolorpeutsappliquerbiendautreslmentscomme,parexemple, lesligneshorizontales,leslmentsdeformulairesoulesarrireplans.
- 2-
Dcoration
Cettepropritpermetdepersonnaliserlapparencedutexte,parexempleaveclesoulignementoulesurlignement. text-decoration: underline.Souligneletexte. overline.Surligneletexte. line-throught.Barreletexteensonmilieu. none.Enlvetouteapparencedfinieparailleurs. Commentaires
q
Riennempchededfinirplusieursvaleursdedcoration.Ilsuffitdelessparerparunespace,parexemple, text-decoration: underline overline;. Dans le cas prsent, le texte sera en mme temps soulign et surlign. La valeur line-through est particulirement utile dans les sites commerciaux pour indiquer notamment une rvision de prix. Par exemple, . Rappelons la balise <del> qui ralise le mme effet. Appliquelabalisedelien(<a>),ladclarationdestyletext-decoration: none;enlveralesoulignementpar dfautdesliens.Cestassurmentlsaprincipaleutilisation. NutilisezquetrsrarementlesoulignementdanslaconceptiondevospagesetapplicationsHtml5.Eneffet,le soulignementsurleWebindiqueparconventionunlien.Ilnyariendeplusagaantquedecliquersurceque lon pense tre un lien et qui ne se rvle tre quun soulignement inappropri. Il existe dautres faons de mettredeslmentsenvidence.Pourrappel,labalisedesoulignement<S>atretireduHtml5. Pourlesamateursdeprcision,lavaleurblinkquifaisaitclignoterletextea(heureusement)disparudansla spcificationCSS3.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .deco1 { text-decoration: overline;} .deco2 { text-decoration: underline;} .deco3 { text-decoration: underline overline;} .deco4 { text-decoration: line-through;} </style> </head> <body> <p class="deco1">Texte surlign</p> <p class="deco2">Texte soulign</p> <p class="deco3">Texte soulign et surlign</p> <p class="deco4">Texte barr</p> </body> </html>
- 1-
- 2-
Transformation
Cettepropritaffichedutexteenmajusculesouenminuscules,quellequesoitlafaondontlescaractresfigurent danslecodesource. text-transform: capitalize.Metlapremirelettredechaquemotenmajuscule. uppercase.Mettoutesleslettresenmajuscules. lowercase.Mettoutesleslettresenminuscules. none.Laisseleslettresinchanges.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .transform1 { text-transform: capitalize;} .transform2 { text-transform: uppercase;} .transform3 { text-transform: lowercase;} </style> </head> <body> <h2 class="transform1">texte en minuscules</h2> <h2 class="transform2">texte en minuscules</h2> <h2 class="transform3">TEXTE EN MAJUSCULES</h2> </body> </html>
Commentaire Sicettepropritneparatpasduneutilitvidentedansledomainedeldition,elleseraapprciepourformater lesdonnesdestinesauxouprovenantdebasesdedonnes.
- 1-
Indentation
Cettepropritpermetdindenterlapremirelignedetextedunparagraphe. text-indent: valeurprcise(parexemple20px)ou valeurrelativeenpourcentageparrapportlalargeurdu paragraphe. Celgerretrait,nonprvudansleHtml,taitobtenuparlarptitiondisgracieusedanslecodedenombreuxespaces inscables( ). Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .indentation { text-indent: 30px;} </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus... </p> <p class="indentation">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus... </p> </body> </html>
Commentaire Lavaleurdelindentationpeuttrengative.Cecipermetderaliserdeseffetsinattendusmaislersultatnestpas toujoursgaranti.
- 1-
Espaceentreleslettres
Cette proprit permet de faire varier lespacement entre les caractres. Ce qui, utilis sans exagration, peut favoriserlalisibilitduntexte. letter-spacing: valeurdelongueur(parexemple8px) normal Commentaires
q
Lesvaleursdelongueurdoiventtredterminesenvaleursabsolues.Lesvaleursrelatives,parexempleen pourcentage,nesontpasadmisesici. Unevaleurpositiveajoutedelespaceentreleslettres.Unevaleurngativediminuelespaceentreleslettres. Lajustificationdutextepermetaunavigateurdemodifierlinterlettrage.Unevaleurdeletter-spacingmise 0empcheralajustificationdutexte. Pourempcherquelapropritletter-spacingnerapprochetroplesmotsetrendeainsiletexteillisible,on peutlacoupleravecunespacementnormaldemotsword-spacing: normal;(voirpropritciaprs).
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .espace1 { letter-spacing: 15px;} .espace2 { letter-spacing: -3px;} </style> </head> <body> <h2 class="espace1">Texte tir</h2> <h2>Texte normal</h2> <h2 class="espace2">Texte condens</h2> </body> </html>
- 1-
Espaceentrelesmots
Cette proprit, trs proche de la prcdente concernant lespace entre les lettres, permet ici de faire varier lespacemententrelesmots.Cequi,utilissansexagration,peutfavoriserlalisibilitduntexte. word-spacing: valeurdelongueur(parexemple8px) normal Commentaires
q
Lesvaleursdelongueurdoiventtredterminesenvaleursabsolues.Lesvaleursrelatives,enpourcentage parexemple,nesontpasadmisesici. Unevaleurpositiveajoutedelespaceentrelesmots.Unevaleurngativediminuelespaceentrelesmots. Lajustificationdutextepermetaunavigateurdemodifierlespaceentrelesmots.Unevaleurdeword-spacing dfiniede0empcheralajustificationdutexte. Leseffetsdecettepropritsurlalisibilitdutextesontparfoisdsastreux.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .espace1 { word-spacing: 20px;} .espace2 { word-spacing: -5px;} </style> </head> <body> <h3 class="espace1">Les mots, toujours les mots</h3> <h3>Les mots, toujours les mots</h3> <h3 class="espace2">Les mots, toujours les mots</h3> </body> </html>
- 1-
Interligne
Cettepropritoffrelapossibilitdemodifierlesinterlignes. line-height: unnombreou unevaleurdelongueurou unpourcentageou normal Commentaires
q
Lenombredeline-heightmultiplielinterligneinduitparlatailledelapolicedecaractres.Parexemple2pour undoubleinterligne. Une valeur de longueur. Celleci dtermine linterlignage sans tenir compte de la police de caractres. Par exemple,18px. Unpourcentage.Linterligneseradterminenpourcentagedelinterligneinduitparlatailledelapolice.Ainsi undoubleinterlignepeuttredterminpar200%. Lavaleurdonnepeuttrengative.Cequidiminueralinterlignenormaletbiensouventlalisibilit. Lavaleurnormalcorrespondlinterlignenormal.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .interligne { line-height: 200%;} </style> </head> <body> <p class="interligne"> Lorem ipsum dolor sit amet, consectetuer adipiscing<br> elit. Sed non risus. Suspendisse lectus tortor, dignissim<br> sit amet, adipiscing nec, ultricies sed, dolor. Cras<br> elementum ultrices diam. Maecenas ligula massa,... </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing<br> elit. Sed non risus. Suspendisse lectus tortor, dignissim<br> sit amet, adipiscing nec, ultricies sed, dolor. Cras<br> elementum ultrices diam. Maecenas ligula massa,... </p> </body> </html>
- 1-
Ilfautrappelerqueleraccourcifont(chapitreLapolicedecaractrescritureraccourcie)permetgalementdedfinir linterligne.Linterligneestdfiniaveclatailledecaractres.Lanotationsindiqueparlavaleurdetailledecaractres (propritfont-size),suividunebarreoblique,suividelavaleurdelinterligne(propritline-height). Exemple font: italic bold small-caps 24pt/1.5 Arial, sans-serif;
- 2-
Espacesvides
Cettepropritpermetdecontrlerlesespacesvides. Depuis ses origines, le langage Html ignore les espaces vides, quil ramne un seul espace, ainsi que les retours chariot. Les espaces vides multiples et les retours chariot sont aussi pris en charge en Html5 par la balise <pre> </pre>. Par contre lattribut nowrap du Html 4.0, qui empche la rupture de ligne automatique, nest pas repris en Html5.Ilestdoncimpratifdanscecasdepasserparlaprsentedclarationdestyle. white-space: preou nowrapou normal. Commentaires
q
Lavaleurpreprservelesespacesmultiplesetlesretourschariot. La valeur nowrap empche la rupture de ligne et affiche le texte horizontalement quelle que soit la place utiliserdanslenavigateur.Danscertainscas,lutilisateurdevrautiliserlabarrededfilementhorizontalepour lirelatotalitdutexte. Lavaleurnormallaisselenavigateurgrersongrlesespacesmultiples,lesretourschariotetlesruptures deligne.
Exempledepre
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h2 { white-space: pre; } </style> </head> <body> <h2> Editions ENI R e s I n f o </h2> </body> </html> s r o u m a t r i c q u e e s s
- 1-
Exempledenowrap
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 200px; border: 1px solid gray} .exemple { white-space: nowrap;} </style> </head> <body> <div> Depuis ses origines, le langage Html ignore les espaces vides quil ramne un seul espace. </div> <pre> </pre> <div class="exemple"> Depuis ses origines, le langage Html ignore les espaces vides quil ramne un seul espace. </div> </body> </html>
- 2-
Alignementhorizontal
Cettepropritpermetderaliserunalignementcommedansleplusbanaltraitementdetexte. text-align: left;Textealigngauche(pardfaut). right;Textealigndroite. center;Textecentr. justify;Textejustifi. auto;Alignementpardfaut. La justification, qui donne chaque ligne de texte la mme longueur, entrane parfois lcran des rsultats inattendus,voiredcevants.Lesopinionsdiffrentquantlalisibilit. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> p { text-align: justify;} </style> </head> <body> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa,... </p> </body> </html>
- 1-
Alignementvertical
Cettepropritdterminelalignementverticalduntexteparrapportunautrelmentducode. vertical-align: baseline;(pardfaut). sub; super; top; middle; bottom; sansmention. valeurdelongueur. pourcentage. Commentaires
q
Lesvaleursbaseline,supetsupersutilisentparrapportunelignedetexte. Lavaleurbaselinealigneletexteparrapportaubasdelalignedetexte(lignedebase). Lavaleursubmetletexteconcernenindice,soitendessousdelalignedebase. Lavaleursupermetletexteconcernenexposant,soitaudessusdelalignedebase. Cet alignement sans mention de valeur de longueur ou de pourcentage laisse la main au navigateur pour laffichage. Lesvaleurstop,middle,bottomalignentrelativementllmentparent,quipeuttredutexteouencoreune oudescellule(s)detableau. Lavaleurtopaligneparrapportauplushautdellmentparent. Lavaleurmiddlealigneparrapportaumilieudellmentparent. Lavaleurbottomaligneparrapportauplusbasdellmentparent. Unevaleurdelongueurpositivealigneaudessusdelalignedebase.Unevaleurngative,endessous.Par exemple,vertical-align: 1.7emmettraenexposantde1.7em. Unpourcentagepositifaligneaudessusdelalignedebase.Unevaleurngative,endessous.Parexemple, vertical-align: -20%mettraenindicede20%.
Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .align1 { vertical-align:super;} .align2 { vertical-align:baseline;}
.align3 { vertical-align:sub;} </style> </head> <body> <h2>Ressources <i class="align1">Informatiques</i></h2> <h2>Ressources <i class="align2">Informatiques</i></h2> <h2>Ressources <i class="align3">Informatiques</i></h2> </body> </html>
Exemple2 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> table { border: 1px solid gray; border-collapse: collapse; width: 200px;} td { border: 1px solid gray; width: 100px;} .top { vertical-align:top;} .middle { vertical-align: middle;} .bottom { vertical-align: bottom;} </style> </head> <body> <table> <tr> <td><br> </td> <td class="top">texte</td> </tr> <tr> <td><br> </td> <td class="middle">texte</td> </tr> <tr> <td><br> </td> <td class="bottom">texte</td> </tr> </table> </body> </html>
- 2-
- 3-
Directiondutexte
Cettepropritpermetdechangerladirectiondutexte.Silefranaisselitdegauchedroite,cettepropritdestyle seraparticulirementutilepourleslanguesquiselisentdedroitegauchecommelarabeetlhbreu. direction: ltr(lefttoright).crituredegauchedroite. rtl(righttoleft).criturededroitegauche.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .direction1 { direction: rtl;} .direction2 { direction: ltr;} </style> </head> <body> <p class="direction1">Ressources Informatiques</p> <p class="direction2">Ressources Informatiques</p> </body> </html>
- 1-
Longueurethauteur
Les proprits de style width et height vont permettre dassocier, certaines balises de texte, respectivement la largeuretlahauteurdunezoneentourantlecontenutextuel. Cettepropritesttrsutilecarellevitedepasserparlastucedetableauxfacticespourafficherdutextedansune zonerectangulaire. width: height: valeurdelongueuroupourcentage valeurdelongueuroupourcentage
Commentaires
q
Lesvaleurswidth(largeur)etheight(hauteur)dterminentlalargeuretlahauteurducontenu. Lavaleurdelongueurspcifieunevaleurfixe. Lepourcentagespcifieunevaleurrelative.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> p { width: 235px; text-align:justify;} </style> </head> <body> <p>La puissance du Web est dans son universalit. Laccs pour tous, quelles que soient les incapacits, en est un aspect essentiel.</p> </body> </html>
Les proprits width et height ncessitent de nombreux commentaires. Nous rservons ceuxci lors de leur tude dtailleauchapitreLespropritsdeboteLargeurethauteur.
- 1-
Sortesdemarqueurs
Cettepropritpermetdedterminerlapparencedelapuceoulestyledenumrotationdelaliste. list-style-type: disc;Cercleplein. circle;Cerclevide. square;Carr. ou decimal;Soit1,2,3,etc. decimal-leading-zero;Soit01,02,03,etc. upper-roman;SoitI,II,III,etc. lower-roman;Soiti,ii,iii,etc. upper-alpha;SoitA,B,C,etc. lower-alpha;Soita,b,c,etc. Commentaires Leslmentsdisc,circle,squaresontidentiquesceuxdelabalise<ul>enHtml5.Aveccellecicependant,laforme estdterminepardfautparlenavigateur. Mmeconstatationpourlesnumrotationsdelabalise<ol>.Celleciestuniquementdcimale. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .style1 { list-style-type:disc;} .style2 { list-style-type:circle;} .style3 { list-style-type:square;} .style4 { list-style-type:decimal;} .style5 { list-style-type:decimal-leading-zero;} .style6 { list-style-type:upper-roman;} .style7 { list-style-type:lower-roman;} .style8 { list-style-type:upper-alpha;} .style9 { list-style-type:lower-alpha;} </style> </head> <body> <ul> <li class="style1">Disque plein</li> <li class="style2">Cercle</li> <li class="style3">Carr</li> </ul> <ol> <li class="style4">Dcimal</li> <li class="style5">Dcimal</li> <li class="style6">Romain majuscule</li> <li class="style7">Romain minuscule</li> <li class="style8">Alphabet majuscule</li> <li class="style9">Alphabet minuscule</li> </ol> </body> </html>
- 1-
- 2-
Marqueurgraphique
CettepropritdeCSSpermetderemplacerlespucesparuneimage.Cequiapporteunpeudediversitparrapport auxpucestraditionnellesduHtml. list-style-image: url(votre_puce.gif); none; Commentaires
q
Lavaleururl(votre_puce.gif)dsigneladresse(URL)delimageutilisercommepuce.Onpeutemployerune adresserelativeversuneimagecomprisedanslemmedossier(commedansnotreexemple)ouuneadresse absolue(avechttp://...). LesimagespeuventtreauformatGIF,JPEGouPNG.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> ul { list-style-image: url(puce.gif);} </style> </head> <body> <ul> <li>Elment 1</li> <li>Elment 2</li> <li>Elment 3</li> <li>Elment 4</li> </ul> </body> </html>
Limagepuce.gifestdisponibledanslespacedetlchargement.
- 1-
Retrait
Cettepropritdterminelapositiondelasecondeligne(etlessuivantes)dunlmentdelisteparrapportlapuce oulanumrotation. list-style-position: outside;(pardfaut) inside; Commentaires
q
La valeur outside est la prsentation classique des listes avec toutes les lignes de llment en retrait par rapportlapuceouaunumro. Lavaleurinsideestuneprsentationunpeuparticulireavecunretraituniquementsurlapremirelignede llmentdelaliste.Lesautreslignesdellmentviennentsalignersurlemarqueur.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .position1 { list-style-position: outside;} .position2 { list-style-position: inside;} </style> </head> <body> <ul> <li class="position1">Elment 1<br> Suite lment 1<br /> Suite lment 1</li> </ul> <ul> <li class="position2">Elment 2<br> Suite lment 2<br /> Suite lment 2</li> </ul> </body> </html>
- 1-
- 2-
crituredelisteraccourcie
Cette proprit permet de reprendre dans une seule dclaration de style les valeurs prcdentes (list-style-type, list-style-image,list-style-position). Exemple list-style: url(puce.gif) circle inside;
Commentaires
q
Lesvaleurssontregroupesetsparespardesespaces. Ilpeutsemblerbizarrededterminerunepuceenimageetunepucedetypecercle.EnCSS,celasignifieque silenavigateurnetrouvepaslimageladressespcifie,ilafficheraunepuceenformedecercle. Aucunedecesvaleursnestobligatoireetonpeutaussinedfinirquuneseulevaleur.
- 1-
Espaceentrelescellulesdetableaux
Cette proprit permet de spcifier lespacement entre chaque cellule. Cestlquivalent de lattribut cellspacingdu Html4.0. border-spacing: valeurnumriqueen px. valeurnumriqueen pt. pourcentage. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> table { width: 200px; text-align: center; border : 1px solid gray; border-spacing: 10px;} td { border : 1px solid gray; background-color: rgb(213,230,245);} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
Sanslapropritdestyleborder-spacing,letableauseprsentepardfautainsi:
- 1-
Ilestpossibledenavoirquuneseuleborduredetableauavecborder-spacing: 0px.
- 2-
Lesborduresdestableaux
Nousavonsvuquepardfaut,lenavigateuraffichedeuxborduresauxtableaux:labordurequienfaitlecontouret lesborduresquientourentlescellules. Lapropritdestyleborder-collapsepermetdegrercettesituation. border-collapse: collapse; separate; Commentaires
q
Lavaleurcollapsefusionnelesdeuxborduresadjacentes,cequidonnelaspectdunebordureunique. Lavaleurseparateaffichelesdeuxborduressparment,cequiestlasituationpardfaut.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> table { width: 200px; text-align: center; border : 1px solid gray; border-collapse: collapse;} td { border : 1px solid gray;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
- 1-
- 2-
Lescellulesvidesdetableaux
Cette proprit permet de dterminer le comportement du navigateur lorsquil rencontre une cellule vide dans un tableau. empty-cells: show; hide; Commentaires
q
Lavaleurshowaffichelacellulevide.Lesborduresetlarrireplansontainsivisibles. Lavaleurhidenaffichepaslacellulevide.Lesborduresetlarrireplansontainsiinvisibles.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> table { width: 200px; text-align: center;} td { border : 1px solid gray; background-color: rgb(213,230,245);} .show {empty-cells: show;} .hide {empty-cells: hide;} </style> </head> <body> <table> <tr> <td class="show"></td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td class="hide"></td> </tr> </table> </body> </html>
- 1-
- 2-
Positiondelalgende
Lattribut align de la balise <caption> en Html 4.0 ayant disparu, il faut faire appel cette proprit de style pour positionnerlalgendedutableau. caption-side: top;Lgendeaudessusdutableau(dfaut). bottom;Lgendeendessousdutableau.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> table { width: 200px; text-align: center; border : 1px solid gray; border-collapse: collapse;} td { border : 1px solid gray;} caption { caption-side: bottom;} </style> </head> <body> <p></p> <table> <caption>Lgende de tableau</caption> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
- 1-
Prambule
Le Html 4.0 offrait, par certains attributs, la possibilit dajouter une couleur ou une image de fond aux pages et ventuellementauxtableauxouauxcellulesdetableaux.LeHtml5neproposequantluiaucunattributpourraliser ces effets de prsentation. Il faut, en Html5, passer imprativement par les feuilles de style CSS pour ajouter un arrireplan un lment. Il faut signaler cependant que les possibilits offertes par les feuilles de style sont plus tendues.Ellespermettent,parexemple,decontrleraugrdevotrecrativitlarptitiondelimagedefondquine seraplusainsincessairementdisposeenmosaque.
- 1-
Couleurdarrireplan
Cettepropritpermetdedonnerunecouleurdefondunlment. background-color: nomdecouleurou notationhexadcimalesoussaforme#xxxxxxou notationhexadcimaleabrgesouslaforme#xxxou notationenmodeRVBavecdesentiersde0255ou notationenmodeRVBavecdes%de0100ou notationenmodeRVBaoaestcomprisentre0et1. notationenmodeHSL notationenmodeHSLaoaestcomprisentre0et1. transparent LesdiffrentesnotationsdescouleursonttabordesendtailauchapitreNotionsdebasedesCSSLanotation descouleurs. Notonsquelavaleurtransparent,lorsquelleestappliquelarrireplandelapage,nefaitquereprendrelacouleur pardfautdunavigateur. Exemple1 Appliquerunecouleurdefondlapage. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-color: rgb(215,230,245);} </style> </head> <body> </body> </html>
Exemple2 Appliquerunecouleurdefondunedivision<div>. <!DOCTYPE html> <html lang="fr"> <head>
- 1-
<title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 300px; background-color: #9cf; font-size: 250%; text-align: center;} </style> </head> <body> <div> <p>HTML5 + CSS3</p> </div> </body> </html>
- 2-
Insertionduneimagedarrireplan
Cettepropritinsreuneimagedefonddisposedefaonclassique,soitenmosaque. background-image: url(fichier_image); none; Commentaires
q
Onpeututiliserladressagerelatifouabsolupourindiquerladresse(URL)delimage. LesimagespeuventtreauformatGIF,JPEGouPNG. Lavaleurnonenafficheaucuneimagedarrireplan.
Exemple Mettreuneimagedefondlapage(prsentationclassique). <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-image: url(bulles.jpg);} </style> </head> <body> </body> </html>
Limagebulles.jpgestdisponibledanslespacedetlchargement.
- 1-
Rptitiondelimage
Cettepropritdonnelecontrleauconcepteurquantlarptitiondelimagequineseraainsiplusncessairement disposeenmosaque. background-repeat: repeat; repeat-x; repeat-y; no-repeat; Commentaires
q
Cettedclarationdestylenadeffetquesiuneimagedefondatdfinieparlapropritbackground-image: url(fichier_image). Lavaleurrepeatrptelimagehorizontalementetverticalement.Lersultatestdesplusclassiquesetentout pointsemblableladclarationbackground-image: url(fichier_image). Lavaleurrepeat-xrptelimageseulementhorizontalement(selonlaxedesx).Limageformeainsiuneligne horizontaledanslehautdellment. La valeurrepeat-y rpte limage seulement verticalement (selon laxe des y). Limage forme ainsi une ligne verticalelelongductgauchedellment. Lavaleurno-repeataffichellmentuneseulefoissanslerpter. Rien nempche de dfinir (par background-color) une couleur darrireplan en mme temps quune image darrireplan. Ceci permettra certains effets assez cratifs. En outre, larrireplan de couleur sera toujours affichmmesilimagenestpastrouveladresseindique.
Exemple1 Illustronslavaleurrepeat-x. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-image: url(gris.jpg); background-repeat: repeat-x;} </style> </head> <body> </body> </html>
- 1-
Limagegris.jpgestdisponibledanslespacedetlchargement. Exemple2 Illustronslavaleurrepeat-y. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-image: url(gris.jpg); background-repeat: repeat-y;} </style> </head> <body> </body> </html>
Exemple3 Illustronslavaleurno-repeat. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-image: url(coin.gif); background-repeat: no-repeat;} </style> </head>
<body> </body> </html>
Limagecoin.gifestdisponibledanslespacedetlchargement.
- 3-
Positionnementdelimage
Cettepropritvapermettredepositionnerprcismentlimagedefonddunlment,aupixelprs. backgroundposition: valeurdelongueurvaleurdelongueur pourcentagepourcentage leftoucenterouright/topoucenteroubottom; Soitparexemple: background-position: 50px 100px; background-position: 20% 50%; background-position: center center;
Commentaires
q
Cettedclarationdestylenadesensquesiuneimagedefondatdfinieparladclarationbackgroundimage: url(fichier_image). Cettedclarationnesutilisegnralementquelorsquelimagenestpasrpte(background-norepeat). Lapremirevaleuratraitlapositionparrapportaubordgauche(axehorizontal)etlasecondevaleurla positionparrapportaubordsuprieur(axevertical).Lesdeuxvaleurssontsparesparunespace. Les pourcentages respectent le mme principe mais videmment en pourcentage de la taille de llment parent. Onpeutnedonnerquunevaleur.Danscecas,celleciserainterprtecommetantlavaleurhorizontale(la premire valeur). La valeur verticale ou seconde valeur sera alors automatiquement dfinie par dfaut la valeurcenterou50%. Les valeurs en pourcentage et de longueur peuvent tre combines. Ainsi, background-position: 50px 30%; estcorrect. Lesvaleursleft(gauche),center(centre)ouright(droite)dterminentlapositionhorizontale. Lesvaleurstop(haut),center(centre),bottom(bas)dterminentlapositionverticale. Lesvaleursngativessontacceptes.
Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 250px; height: 200px; border: 1px solid gray; background-image: url(paper1.png); background-repeat: no-repeat; background-position: 20px 20px;} </style> </head> <body> <div> </div>
- 1-
</body> </html>
Exemple2 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 250px; height: 200px; border: 1px solid gray; background-image: url(paper3.png); background-repeat: no-repeat; background-position:bottom right;} </style> </head> <body> <div> </div> </body> </html>
- 2-
- 3-
Dfilementdelimage
Cettepropritpermetdefixeruneimagedefondquinedfilepasaveclerestedelapage. background-attachment: scroll; fixed; Commentaires
q
Lavaleurscrollfaitdfilerlimagedarrireplanaveclecontenudelapage. Lavaleurfixedlaisselimagedarrireplanfixealorsquelecontenudelapagepeutdfiler.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-image: url(gris.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;} </style> </head> <body> </body> </html>
- 1-
critureraccourcie
La propritbackground permet de regrouper les diffrentes proprits en une seule ligne en ne reprenant que les valeursdecelleci. Comme les diffrentes proprits et valeurs darrireplan sont plutt longues encoder manuellement, ce raccourci permetdegagnerdutempsmaisrduitpeuttrelalisibilitducode. background: url(format_image) white no-repeat right top fixed; Cetteseuledclarationcorrespond: background-image: url(xxx.gif); background-color: white; background-repeat: no-repeat; background-position: right top; background-attachment: fixed;
Commentaires
q
Lesdiffrentsattributsdoiventtreindiquslasuite,sparsdunespace. Lordrenapasdimportance. Ilnestpasobligatoirededfinirchaquepropritdarrireplanpourlespropritsnondfinies,lesvaleurs pardfautserontretenues.
Exemple LecodedelexempledelasectionDfilementdelimagepourraitainsiscrire: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background: url(gris.jpg)no-repeat center center fixed;} </style> </head> <body> </body> </html>
- 1-
Conceptdumodledebote
LlmentboteestunenotionimportanteenCSS.Cettenotion,unpeuabstraite,doittrecorrectementintgrepour la suite de notre tude et tout particulirement en vue du positionnement (chapitre Les proprits daffichage Positionnement). Cetlmentboteestaussiappelunconteneurouunbloc(block). LeW3Cdfinitunlmentbotecommeunezonerectangulaireconstitue: duncontenu, dunemargeintrieure(padding), dunebordure(border), etdunemargeextrieure(margin).
Prcisonsque:
q
Lecontenupeuttre,parexemple,letextedunparagraphe. Celuiciestentourdunespaceallantdutexteauxborduresducadre,quelonappelleralamargeintrieure ouinterne. Lesborduresducadre(facultatives). Unespaceentourantletout,appelmargeextrieureouexterne.
Lesfeuillesdestylevontreprendreettendrecettenotiondebotepourdonnerauconcepteurlecontrletotaldela margeintrieureetextrieureetdelabordure. AveclesfeuillesdestyleCSS,onpourra,parexemple,rglerdistinctement:

q
Lesquatremargesextrieuresetcedanstouteslesdirections, Lesquatrebordures(dimension,style,couleur), Lesquatremargesintrieuresetcedanstouteslesdirections, Lesdimensions(largeurethauteur)ducontenu.
La source principale de confusion est que, aprs avoir prcis la largeur et/ou la hauteur du contenu, on na pas explicitementdfiniladimensiontotaledellmentbote,quicomprendladimensionducontenu,lamargeintrieure, ladimensiondelabordureetlamargeextrieure. Ainsi, la proprit width applique au contenu (le petit rectangle central) nest quun lment de la dimension de
- 1-
llmentbote,ilfautyajouterlamargeintrieure,labordureetlamargeextrieurepourobtenirlespacetotalrel dellmentbote. Cestbienentendulammechosepourlahauteurdtermineparlapropritheight. La dimension totale de llment bote se calcule donc ainsi : contenu + marges intrieures + bordures + marges extrieures. Soituneboteaveclespropritssuivantes:
q
largeurdecontenu200pixels, margeintrieure20pixels, borduredunelargeurde10pixels, margeextrieure20pixels.
Lalargeurdellmentboteestdoncbien,dansnotreexemple,de300pixelsquisedcomposentainsi(degauche droite) : 20 pixels de marge extrieure + 10 pixels pour la bordure + 20 pixels de marge intrieure + 200 pixels de contenu+20pixelsdemargeintrieure+10pixelsdebordure+20pixelsdemargeextrieure.Letotalestbiende 300pixels. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> p { width: 200px; border: 10px solid rgb(125,165,205); padding: 20px; margin: 20px; background-color: rgb(215,230,245);} </style> </head> <body> <p>Notion de bote en CSS</p> </body> </html>
- 2-
Commentaires
q
InternetExplorer9avecledoctypeduHtml5(<!DOCTYPE html>)affichelemodledeboteconformmentaux spcificationsduW3C.
Cependant, sans le doctype ou avec un doctype erron, Internet Explorer 9 passe en mode de compatibilit arrire (quirks mode) et reprend son modle de bote de Microsoft erron. En effet, Microsoft a longtemps considrquelamargeintrieureetlesborduresprennentplacelintrieurdelazonedecontenu.Lalargeur apparente dune bote sera alors gale la seule largeur spcifie pour le contenu laquelle on ajoutera simplement les marges extrieures. La bote prcdente noccupera donc lcran quune largeur de 240 pixels.Sazonedecontenusetrouverarduitedesdimensionsdebordureetderemplissage,soitici60pixels parrapportaumodlestandard.
Toutceciillustrebienlimportancedudoctype.
- 3-
lmentblocouenligne
Nousavonsdjabordprcdemmentlanotiondlmentblocouenligne. Lapropritdestyledisplaypermetderedfinirunlmentenlignecommetantunlmentblocetinversement. display: inline;(enligne) block;(detypebloc) Cette proprit est trs riche en possibilits de prsentation et est souvent utilise pour des feuilles de style CSS complexes. Exemple1 Lesnouvellesbalisessmantiques(chapitre"Lesbalisessmantiquesetdorganisation")sontdeslmentsenligne. Pour leur attribuer une fonction de prsentation, il est impratif de les dfinir comme des lments de type bloc. Appliquonscecilabalise<nav>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> nav { display: block; width: 350px; border: 1px solid gray; background-color : rgb(215,230,245); padding-left: 4px;} a { text-decoration; none;} </style> </head> <body> <nav> <a>Home</a> | <a>Produits</a> | <a>Solutions</a> | <a>Points de vente</a> | <a>Contact</a> </nav> </body> </html>
Exemple2 Lesitemsdelistessontdeslmentsdetypebloc.Ilsapparaissentdailleurslesunsendessousdesautres.Pourtant aveclapropritdisplay: inline,ilestpossibledelesaffichersuruneligne. <!DOCTYPE html> <html lang="fr"> <head>

<title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> ul { list-style: none ; padding: 5px;;} li { display: inline; border: 1px solid gray; background-color: rgb(215,230,245); text-align: center; margin-right: 3px; padding-right: 15px; padding-left: 15px;} </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>
- 2-
Largeurethauteur
Lespropritsdestylewidthetheightvontfixerrespectivementlalargeuretlahauteurdellmentbote. width: autoou valeurdelongueurou pourcentage height: autoou valeurdelongueurou pourcentage Commentaires
q
Les valeurs width et height spcifient la largeur et la hauteur du contenu (sans marges intrieures, sans borduresetsansmargesextrieures). Lavaleurautoajusteautomatiquementladimensionaucontenu. Lavaleurdelongueurspcifieunevaleurfixe. Lepourcentagespcifieunevaleurrelative.
NotonsquilexisteenCSS2despropritspourdterminerlatailleminimaleetmaximaledunlmentdetypeblocou dunlmentremplacdynamiquementparduJavaScript. max-height: min-height: max-width: min-width: Fixelahauteurmaximale Fixelahauteurminimale Fixelalargeurmaximale Fixelalargeurminimale
Lapropritmax-heightestgnralementutiliseconjointementaveclapropritmin-heightpourfixerunemargede man uvre pour laffichage des lments concerns. Ceci vaut aussi pour les proprits max-width et min-width. laide de ces proprits CSSmax-width et min-width, vous aurez ainsi la possibilit de contrler la largeur de votre designdefaoncequilsadapteauxrsolutionsdcrandesvisiteurs. Ainsi,silalargeurdpassecellespcifieparmax-width,lenavigateurrecalculelalargeurdellmentensebasant surlavaleurdemax-width.Demme,silalargeurestinfrieurecelledemin-width,lenavigateurrecalculelalargeur enfonctiondelavaleurdterminedansmin-width.Lenavigateurprocdedemmepourlespropritsmax-heightet min-height. Ilfautnoterquelespropritsmax-height,min-height,max-widthetmin-widthnincluentpaslesmargesintrieures, lesborduresetlesmargesextrieures. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>width</p> <div style= "border: 2px solid black; width: 250px;"> xxx xxx xxx xxx xxx xxx xxx xxx </div> <p>min-width</p>
<div style="border: 2px solid black; min-width: 250px;"> xxx xxx xxx xxx xxx xxx xxx xxx </div> <p>max-width</p> <div style="border: 2px solid black; width: 250px; max-width: 150px;"> xxx xxx xxx xxx xxx xxx xxx xxx </div> </body> </html>
la premire division, la largeur est fixe par width: 250px. la seconde, celleci est dtermine par min-width: 250px.Commecettevaleurminimalenestpasatteinte,ladivisionprendtoutelalargeurdelafentre.ladernire division,lalargeurrpondlavaleurmaximalemax-width: 150px.
- 2-
Margesexternes
Cettepropritpermetdedfinirlamargeextrieuredellmentbote. margin: margin-top: margin-right: margin-bottom: margin-left: Commentaires
q
autoou valeurdelongueurou pourcentage
Lavaleurautolaisselamainaunavigateurpourafficherlesmargesexternes. Unevaleurdelongueurdfinitprcismentlesmargesextrieures. Unpourcentagedfinitlalongueurparrapportllmentparent. La marge extrieure de chaque ct de llment bote peut galement tre dfinie individuellement laide despropritsmargin-top,margin-right,margin-bottometmargin-left.Lesdirectionstop,right,bottom,left dsignent respectivement la bordure suprieure, droite, infrieure et gauche. Ces proprits sont des spcificationsCSS2. On peut raccourcir lcriture des proprits de marge externe margin-top, margin-right, margin-bottom et margin-left,endsignantune,deux,troisouquatrevaleurslapropritmargin. Siuneseulemargeexterneestindique,elleseraappliqueauxquatrects. Avecdeuxmarges,lapremireseraappliqueauxctssuprieursetinfrieurs. Lasecondeauxctslatraux(droiteetgauche). Avectroismarges,lapremireseraappliqueauctsuprieur,lasecondeauxctslatrauxetlatroisime auctinfrieur. Avec quatre marges, cellesci sont attribues dans le sens des aiguilles dune montre en partant du ct suprieur,soitctssuprieur,droit,infrieuretgauche.
Les marges peuvent tre dfinies avec des valeurs ngatives, ce qui peut engendrer des effets visuels intressants,maiscesvaleursngativesrisquentdtreinterprtesdiffremmentselonlesnavigateurs.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .body { margin: 0px;} .bloc { border: 1px solid black; margin: 20px 20px 0px 20px; text-align: center;} </style> </head> <body> <div class="bloc"> marge extrieure </div>
- 1-
</body> </html>
- 2-
Margesinternes
Cettepropritpermetdedfinirlamargeintrieuredellmentbote. padding: padding-top: padding-right: padding-bottom: padding-left: Commentaires
q
autoou valeurdelongueurou pourcentage
Lavaleurautolaisselamainaunavigateurpourafficherlesmargesinternes. Unevaleurdelongueurdfinitprcismentlesmargesintrieures. Unpourcentagedfinitlalongueurparrapportllmentparent. Lamargeintrieuredechaquectdellmentbotepeutgalementtredfinieindividuellementlaidedes propritspadding-top,padding-right,padding-bottometpadding-left.Lesdirectionstop,right,bottom,left dsignentrespectivementlaborduresuprieure,droite,infrieureetgauche. On peut raccourcir lcriture des proprits de marge interne padding-top, padding-right,padding-bottom et padding-left,endsignantune,deux,troisouquatrevaleurslapropritpadding. Siuneseulemargeinterneestindique,elleseraappliqueauxquatrects. Avec deux marges, la premire sera applique aux cts suprieurs et infrieurs. La seconde aux cts latraux(droiteetgauche). Avectroismarges,lapremireseraappliqueauctsuprieur,lasecondeauxctslatrauxetlatroisime auctinfrieur. Avec quatre marges, cellesci sont attribues dans le sens des aiguilles dune montre en partant du ct suprieur,soitctssuprieur,droit,infrieuretgauche.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .marge { width: 300px; padding-left: 50px; border: solid 1px gray;} </style> </head> <body> <div class="marge"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </body> </html>
- 1-
- 2-
Couleurdelabordure
Cespropritsdestylepermettentdedfinirlacouleurdesquatreborduresdellmentboteoudechaquebordure priseindividuellement. border-color: border-top-color: border-right-color: border-bottomcolor: border-left-color: nomdecouleur notationhexadcimalesoussaforme#xxxxxx notationhexadcimaleabrgesouslaforme#xxx notationenmodeRVBavecdesentiersde0255 notationenmodeRVBavecdes%de0100ou notationenmodeRVBaoaestcomprisentre0et1. notationenmodeHSL notationenmodeHSLaoaestcomprisentre0et1. transparent Commentaires
q
La proprit CSS1border-colordfinitlacouleur(unique)desquatrectsdellmentbote.Ainsi,avecla propritborder-color: red,lesquatreborduresaurontlacouleurrouge. La couleur ne peut tre applique que si le type de la bordure (border-style) et lpaisseur de la bordure (border-width)onttdfinis,sansquoilabordureserainexistante. Lescouleursdechaquectsdellmentbotepeuventgalementtredfiniesindividuellementlaidedes proprits border-top-color, border-right-color, border-bottom-color et border-left-color. Les directions top,right,bottom,leftdsignentrespectivementlaborduresuprieure,droite,infrieureetgauche. On peut faire limpasse sur lcriture (un peu longue) des proprits border-top-color, border-right-color, border-bottom-color et border-left-color, en dsignant une, deux, trois ou quatre couleurs la proprit border-color. Siunecouleurestindique,elleseraappliqueauxquatrects. Avec deux couleurs, la premire sera applique aux cts suprieurs et infrieurs. La seconde aux cts latraux(droiteetgauche). Avectroiscouleurs,lapremireseraappliqueauctsuprieur,lasecondeauxctslatrauxetlatroisime auctinfrieur. Avec quatre couleurs, cellesci sont attribues dans le sens des aiguilles dune montre en partant du ct suprieur,soitctssuprieur,droit,infrieuretgauche.
Aveclavaleurtransparent,lacouleurdesborduresesttransparentemaiscellesciexistentbeletbien.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { border-style: solid; border-width: 7px; border-top-color: rgb(215,230,245); border-bottom-color: rgb(215,230,245); border-left-color: rgb(125,165,205); border-right-color: rgb(125,165,205);
text-align: center;} </style> </head> <body> <p></p> <h1>Html5 + CSS3</h1> </body> </html>
- 2-
paisseurdelabordure
Cette proprit permettra de dfinir lpaisseur des quatre bordures simultanment ou de chaque bordure prise individuellement. border-width: border-top-width: border-right-width: border-bottom-width: border-left-width: Commentaires
q
valeurdelongueur thin; medium; thick;
Lavaleurthinintervientpourunebordurefine,mediumpouruneborduremoyenneetthickpourunebordure paisse.Linterprtationdelpaisseurpartirdecesmotsclsvariedunnavigateurlautre. Lpaisseurneseraaffichequesiletypedebordure(border-style)atdfini. Lpaisseur de chaque ct peut galement tre dfinie individuellement laide des propritsborder-topwidth,border-right-width,border-bottom-widthetborder-left-width.Lesdirectionstop,right,bottom,left dsignentrespectivementlaborduresuprieure,droite,infrieureetgauche. On peut faire limpasse sur lcriture (un peu longue) des proprits border-top-width, border-right-width, border-bottom-widthetborder-left-width,endsignantune,deux,troisouquatrepaisseurslaproprit border-width. Siunepaisseurestindique,elleseraappliqueauxquatrects. Avec deux paisseurs, la premire sera applique aux cts suprieurs et infrieurs. La seconde aux cts latraux(droiteetgauche). Avec trois paisseurs, la premire sera applique au ct suprieur, la seconde aux cts latraux et la troisimeauctinfrieur. Avecquatrepaisseurs,cellesci sont attribues dans le sens des aiguilles dunemontreenpartantduct suprieur,soitctssuprieur,droit,infrieuretgauche.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { border-style: solid; border-color: rgb(125,165,205); border-width: thin thick; text-align: center;} </style> </head> <body> <h1>Html5 + CSS3</h1> </body> </html>
- 1-
- 2-
Styledelabordure
CettepropritCSSapporteunevaritdeborduresparrapportauseulstyledeborduresduHtml. border-style: border-top-style: border-right-style: border-bottom-style: border-left-style: Commentaires
q
solidoudashedoudottedoudoubleougrooveouridgeouinsetou outsetouhiddenounone
Il convient dillustrer ces diffrentes bordures, qui pour la plupart sont nouvelles dans le domaine de la conceptiondepagesWeb.Ainsi,lemotclaffiche: solid:untraitplein, dashed:destirets, dotted:despointills, double:desdoublestraitspleins, groove:effet3Dgravdanslapage(opposderidge), ridge:effet3Dsortantdelapage(opposdegroove), inset:borduresrentrantes,incrustesdanslapage(inversedeoutset), outset:borduressortantesextrudesdelapage(inversedeinset), hidden:pasdebordure(influesurlabordureadjacente), none:quivautborder-width: 0pxsoit,pasdebordure.
solid dashed dotted double groove ridge

inset outset
Pourdouble, la largeur dfinie par border-width correspondra la taille des deux traits et de lespaceentre ceuxci. Lestyledebordureneseraaffichquesilpaisseurdebordure(border-width)atdfinie. Lestyledechaquectpeutgalementtredfiniindividuellementlaidedespropritsborder-top-style, border-right-style, border-bottom-style et border-left-style. Les directions top, right, bottom, left dsignentrespectivementlaborduresuprieure,droite,infrieureetgauche. On peut faire limpasse sur lcriture (un peu longue) des proprits border-top-style, border-right-style, border-bottom-styleetborder-left-style,endsignantune,deux,troisouquatrepaisseurslaproprit border-style. Silestyleestindiqu,ilseraappliquauxquatrects. Avec deux styles, le premier sera appliqu aux cts suprieurs et infrieurs. Le second aux cts latraux (droiteetgauche). Avectroisstyles,lepremierseraappliquauctsuprieur,lesecondauxctslatrauxetletroisimeau ctinfrieur. Avecquatrestyles,ceuxcisontattribusdanslesensdesaiguillesdunemontreenpartantductsuprieur, soitctssuprieur,droit,infrieuretgauche. Lersultatauniveaudesraccordsnestpasgaranti.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h2 { border-style: double; border-width: 10px; border-color: gray; text-align: center;} </style> </head> <body> <h2>Une bordure qui a du style</h2> </body> </html>
- 2-
- 3-
critureraccourciedebordure
Cette proprit de style permet de noter de faon raccourcie les diffrentes proprits permettant de dfinir les borduresdunlment,soitborder-color,border-styleetborder-width. Exemple border: red double 5px;
Commentaires
q
Cecinevautquedanslecasolesquatreborduressontidentiques. Les valeurs de ces diffrentes proprits sont regroupes et peuvent tre nonces la suite, peu importe lordre,maissparespardesespaces. Pour une compatibilit optimale des navigateurs, il est recommand que les trois proprits soient renseignes.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { border: dotted 1px black; text-align: center;} </style> </head> <body> <h1>Raccourci border</h1> </body> </html>
- 1-
Notiondepseudoclasse
Ilexiste,dansundocumentHtml,deslmentsnondfinisparunebaliseouparunattributquipourraientservler intressantspourleurappliqueruneffetdestylecomme,parexemple,lelienvisit(attributabsentenHtml5)oula premirelettredunparagraphe. LeW3Caintroduit,pourcertainsdeceslmentsnonrfrencsdelapage,lanotiondepseudoclasses.Onparle aussidepseudostyleoupseudolment. Lasyntaxedespseudoclassesest: slecteur:pseudo-classe { dclaration(s) de style } Soitleslecteur,doublepoint,lenomdelapseudoclassesuiviparladclarationdestyleentreaccolades. Lespseudoclassespeuventgalementtreutilisesavecdesclasses.Ellessenoterontalors: slecteur.classe:pseudo-classe { dclaration(s) de style } Soitleslecteur,point,lenomdelaclasse,doublepoint,lenomdelapseudoclassesuiviparladclarationdestyle entreaccolades. Tout comme pour les classes, les pseudoclasses sont dfinies lintrieur de balises <style type="text/css"> </style>dansleheaddelapageoudansunefeuilledestyleexterne.
- 1-
Pseudoclassesdelien
1.a:link
Lapseudoclassea:linkpermetdedfinirlapparencedunlienquinapasencoretslectionn. Onnepeutpasmanquercegrandclassiquedesfeuillesdestylequiconsisteenleverlesoulignementdeslienspar dfaut. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> a:link { text-decoration: none; color: black;} </style> </head> <body> <p><a href="test.htm">Ceci est pourtant un lien !</a></p> </body> </html>
Notons que la dclaration de style a {text-decoration: none;} soulignementtouslestatsdulien(link,active,hoveretvisited). aurait t possible. Elle aurait enlev le
2.a:visited
Lapseudoclassea:visitedpermetdedfinirlapparencedunlienquiadjtvisit. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> a:visited {text-decoration: line-through; color: black;} </style> </head> <body> <p><a href="test.htm">Ceci est un lien visit.</a></p> </body>
</html>
3.a:hover
Lapseudoclassea:hoverpermetdedfinirlapparencedunlienaupassageducurseurdelasouris. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> a:hover { font-weight: bold; font-style: italic; font-size: 1.5em;} </style> </head> <body> <p><a href="test.htm">Ceci est un lien.</a></p> </body> </html>
4.a:active
Lapseudoclassea:activepermetdedfinirlapparencedunlienaumomentoilestcliquparlevisiteur. Exemple
- 2-
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> a:active { text-decoration: underline overline;} </style> </head> <body> <p><a href="test.htm">Ceci est un lien.</a></p> </body> </html>
Commentaires
q
Lapseudoclasse:activesutilisegnralementconjointementavec:visited,:hoveret:link. Pourobtenirunrsultatcorrect,ilestindispensablednoncerlesapparencesdeliendanslordresuivant:
q
:link :visited :hover :active
Lapseudoclasse:hoverpeutsutilisersurdautreslmentsquelesliens.
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <style type="text/css"> div { width: 200px; height: 50px; border: 1px solid black;} div:hover { background-color: rgb(125,165,205);} </style> </head> <body> <div></div> </body> </html>
- 3-
- 4-
Pseudoclassesdeparagraphe
1.:firstletter
Cettepseudoclasse:first-letterpermetdedfinirlapparencedelapremire(etuniquementlapremire)lettre dunparagraphe.Oncreainsiuneffetdelettrine. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { border: 1px solid black; margin-left: 30px; width: 200px; padding: 10px;} .lettrine:first-letter { margin-right: 5px; font-size: 4em;} </style> </head> <body> <div id="box"> <div class="lettrine">Voici un texte qui illustre leffet de lettrine que lon peut obtenir avec :first-letter.</div> </div> </div> </body> </html>
2.:firstline
Cettepseudoclasse:first-linepermetdedfinirlapparencedelapremire(etuniquementlapremire)lignedun paragraphe. Lalongueurdelapremireligneestvariable,elledpendradelalargeurdellmentbote,delatailledepolice,etc. Exemple <!DOCTYPE html> <html lang="fr">
- 1-
<head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .box { border: 1px solid black; margin-left: 30px; width: 200px; padding:10px;} .ligne1:first-line { font-variant: small-caps; font-weight: bold;} </style> </head> <body> <div class="box"> <p class="ligne1">Voici un texte qui illustre leffet de style que lon peut obtenir avec :first-line.</p> </div> </body> </html>
On voit apparatre en CSS3 la notation ::first-letter et ::first-line afin de ne pas confondre ces pseudoclasses avec les pseudoclasses de slection, par exemple :first-child ou :first-of-type (voir chapitreLesfeuillesdestyleCSS3LesslecteursCSS3).
- 2-
Insreruncontenu
1.:before
Lapseudoclasse:before,associelapropritcontent,permetdinsreruncontenuavantunlment. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1:before {content:url(arrow.gif);} </style> </head> <body> <h1>Chapitre 1</h1> <p>Lorem ipsum dolor sit amet...</p> <h1>Chapitre 2</h1> <p>Lorem ipsum dolor sit amet...</p> </body> </html>
Lapropritdestylecontentajouteuneflche(arrow.gif)devantchaquetitredeniveau<h1>(h1:before). Limagearrow.gifestdisponibledanslespacedetlchargementconsacrcetouvrage.
2.:after
Lapseudoclasse:after,associelapropritcontent,permetdinsreruncontenuaprsunlment. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title>
- 1-
<meta charset="iso-8859-1"> <style type="text/css"> h2:after {content:url(new.gif);} </style> </head> <body> <h2>Chapitre 1</h2> <p>Lorem ipsum dolor sit amet...</p> <h2>Chapitre 2</h2> <p>Lorem ipsum dolor sit amet...</p> </body> </html>
Lapropritdestylecontentajouteuneflche(new.gif)aprschaquetitredeniveau<h2>(h2:after). Limagenew.gifestdisponibledanslespacedetlchargementconsacrcetouvrage. On voit apparatre en CSS3 la notation ::before et::after afin de ne pas confondre ces pseudoclasses aveclespseudoclassesdeslection(voirchapitreLesfeuillesdestyleCSS3LesslecteursCSS3).
- 2-
Prambule
Dans le pass, le positionnement exact dun lment en Html tournait rapidement au cauchemar et il ne pouvait gnralementseraliserquegrceunpuzzledetableauximbriqus. Les feuilles de style CSS proposent maintenant des outils pour positionner, au pixel prs, un lment dans votre document Html. dites lorigine sous le terme CSSP, ces proprits de positionnement ont t reprises sous la spcificationCSS2. Ces lments ainsi positionns par les feuilles de style CSS pourront ventuellement tre rendus dynamiques par lapportduJavaScriptetduDhtml.
- 1-
Positionnement
Unlmentpeutsepositionnerdequatrefaonsdiffrentes.
1.Positionnementstatique
Cestlepositionnementnormaldellmentselonlafaonhabituelledeprocderdunavigateur. Lepositionnementstatiquesedterminepar: position: static; Leconcepteurnadoncpaslecontrle.Llmentnepeuttrepositionnourepositionnetsavisibilitnepeuttre modifie.IlnestgalementpaspossibledutiliserduJavaScriptpourchangerlapositiondellment.
2.Positionnementrelatif
Cestlepositionnementdunlmentparrapportsapositionnormaleoustatique. Cetlmentrestedanslefluxdesdonnesmaisestenquelquesorteexcentrparrapportsapositionnormale. Lapositionestdfinieparlescoordonnes(x,y)o:
q
x est la distance par rapport au bord gauche de llment parent ou de la fentre du navigateur (axe horizontal).Ainsi,leftdtermineladistanceentrelagauchedellmentetlagauchedelapageetright,la distanceentreladroitedellmentetladroitedelapage. y est la distance par rapport au bord suprieur de llment parent ou de la fentre du navigateur (axe vertical).Ainsitopdtermineladistanceentrelebordsuprieurdellmentetlebordsuprieurdelapage etbottom,ladistanceentrelebordinfrieurdellmentetlebordinfrieurdelapage.
Lepositionnementrelatifsedterminepar: position: relative; left:valeurou% top:valeurou% right:valeurou% bottom:valeurou% Commentaires

q
En pratique, une seule spcification sur laxe horizontal (leftou right) et une seule spcification sur laxe vertical(topoubottom)suffisent. Lesvaleursdetop,left,rightetbottompeuventtrengatives.
Exemple <!DOCTYPE html>
- 1-
<html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .normale { width: 180px; border: 2px solid gray; text-align: center;} .relative { position: relative; top: 30px; left: 60px; width: 180px; border: 2px solid gray; text-align: center;} </style> </head> <body> <div class="normale"> Position normale statique </div> <p>. . . . . . . . . . . . . . . . . . . . .</p> <div class="relative"> Position relative </div> </body> </html>
3.Positionnementabsolu
Le positionnement absolu cre un lment indpendant du reste du document. Les lments dfinis en position absoluesontretirsdufluxnormaletsepositionnentlemplacementexactdfiniparleconcepteur. Lapositionestdfinieparlescoordonnes(x,y)o:
q
x est la distance par rapport au bord gauche de llment parent ou de la fentre du navigateur (axe horizontal).Ainsi,leftdtermineladistanceentrelagauchedellmentetlagauchedelapageetright,la distanceentreladroitedellmentetladroitedelapage. y est la distance par rapport au bord suprieur de llment parent ou de la fentre du navigateur (axe vertical).Ainsitopdtermineladistanceentrelebordsuprieurdellmentetlebordsuprieurdelapage etbottom,ladistanceentrelebordinfrieurdellmentetlebordinfrieurdelapage.
Lepositionnementabsolusedterminepar: position: absolute; left:valeurou% top:valeurou% right:valeurou%
- 2-
bottom:valeurou%
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .absolu { position: absolute; left: 50px; top: 50px; width: 180px; border: 2px solid black; text-align: center;} </style> </head> <body> <div class="absolu"> Position absolue </div> </body> </html>
Commentaires
q
Lepositionnementabsolunestpassansrisquepourlaffichagecorrectdelapagesousdautresrsolutions dcranquecelleutilisepourlaconceptioncarllmentainsipositionnpeutsafficherenempitantsurle fluxnormaldesautresdonnesdelapage. IlfautserappelerquelesnavigateursajoutentpardfautunemargeaucorpsdelapageHtmletquecette margepardfautvariedunnavigateurlautre.Ilestainsiprudentencasdepositionnementdespcifier lesmargesdelabalise<body>.
4.Positionnementfixe
Le positionnement fixe cre aussi un lment indpendant dont on peut dfinir la position. Ici llment reste fixe mmelorsquelonfaitdfilerledocument. position: fixed; Ce positionnement fixe a longtemps t boud par les navigateurs. Il est prsent parfaitement intgr dans les navigateursdenotretude. Exemple <!DOCTYPE html>
- 3-
<html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .fixe { position: fixed; top: 50%; left: 50px; width: 180px; border: 2px solid black; text-align: center;} </style> </head> <body> <div class="fixe"> Position fixe </div> </body> </html>
- 4-
Flottement
Lapropritfloatretireunlmentbotedufluxnormalpourlaplacerleplusdroiteouleplusgauchepossibledans sonlmentparent,soitsonconteneur. float: right;ou left;ou none; Commentaires
q
Lavaleurrightalignellmentconcerndroite,poussantlesautreslmentssalignergauche. Lavaleurleftalignellmentconcerngauche,poussantlesautreslmentssalignerdroite. Lavaleurnonenespcifierienetrendlamainaunavigateur. Lapositionfloatnepeutsappliquerencasdepositionnementabsolu.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <div style="float:right;"> <img src="cup.png"> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p> </div> </body> </html>
Llmentconteneurestladivisionbox.Lapropritdestylefloat: right;forcelimagesepositionnerdroitedans leconteneur.Letexte,quantlui,saffichealorsgauche.
- 1-
Limagecup.pngestdisponibledanslespacedetlchargement.
- 2-
Dgagement
Lapropritclearpermetdannulerleflottementintroduitparlapropritfloat. clear: right;ou left;ou both;ou none; Commentaires
q
lavaleurrightannuleleflottementdroite. lavaleurleftannuleleflottementgauche. lavaleurbothannuleleflottementdesdeuxcts. lavaleurnoneannuletoutepropritdeflottement.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <div style="float:right;"> <img src="cup.png"> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p style="clear:right">Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p> </div> </body> </html>
- 1-
- 2-
Superposition
Lapropritz-indexajouteunaxeenprofondeurpermettantdepositionnerdeslmentsaudessusouendessous dunautrelment.
Ainsi,llmentavecunepropritz-index: 2apparatraavantouaudessusdellmentavecunepropritz-index: 0. zindex: unnombreentier (positif)
Cettepropritnefonctionnequavecunpositionnementabsoludeslments. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .boite1 { position: absolute; left: 20px; top: 20px; width: 80px; height: 40px; padding: 4px; border: 2px solid gray; background-color: rgb(125,165,205); z-index: 1;} .boite2 { position: absolute; left: 40px; top: 50px; width: 80px; height: 40px; padding: 4px; border: 2px solid gray; background-color: rgb(215,230,245); z-index: 2;} .boite3 { position: absolute; left: 60px; top: 80px; width: 80px; height: 40px; padding: 4px; border: 2px solid gray; background-color: white; z-index: 3;} </style> </head>
- 1-
<body> <div class="boite1"> z-index 1 </div> <div class="boite2"> z-index 2 </div> <div class="boite3"> z-index 3 </div> </body> </html>
- 2-
Dpassement
Lapropritoverflowdterminecequelenavigateurdoitfairelorsquunlmentestplusgrandquellmentparent quilecontient. overflow: hidden;ou scroll;ou visible;ou auto; Commentaires
q
Aveclavaleurhidden,lapartiequidpasseestcachesanspossibilitdelavoiroudyaccder. Aveclavaleurscroll,lapartiequidpasseestcachemaisaccessibleparunebarrededfilement. Aveclavaleurvisible,lapartiequidpasseestaffiche,ignorantlesspcificationsdellmentparentquile contient. Aveclavaleurauto,onrendlamainaunavigateur.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .boite { width: 280px; height: 60px; border: 1px solid black; overflow: auto;} </style> </head> <body> <div class="boite"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </body> </html>
- 1-
Dcoupage
Cettepropritclipdterminelapartievisibledellment,gnralementuneimage.Ainsi,limageentireserabien prsentedansledocumentmaisseulementunepartie(rectangulaire)decelleciseravisible. clip: rect(sup_gauchesup_droitinf_droitinf_gauche) auto;
Soitparexemple: clip: rect(10px 270px 190p 50px);
Commentaires
q
Les coordonnes du rectangle dcoup sont donnes par les sommets suprieurgauche, suprieurdroit, infrieurdroitetinfrieurgaucheparrapportlimageinitiale. Onrecommandedinclurellmentquiseraainsidcoupdansunebalise<div>ou<span>. Cettepropritnefonctionnequavecunpositionnementabsoludellment.
Pourlinstant,seulelaformerectangulaireestimplmente.Onprvoitunplusgrandchoixdeformeslavenir. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .coupe { position: absolute; clip: rect(0px 50px 115px 0px);} </style> </head> <body> <p></p> <div class="coupe"> <img src="cup.png"> </div> </body> </html>
- 1-
- 2-
Affichage
Lapropritdisplaypermetdecontrlerlaffichagedeslmentsdanslapage. display: block;ou inline;ou none; Au chapitre Les proprits de bote lment bloc ou en ligne, nous avons dj trait de la proprit display qui permetderedfinirunlmentenlignecommeunlmentblocetinversement(display: blocketdisplay: inline) Cestlapropritdisplay: nonequinousintressespcialementici.Elledfinitquunlmentneserapasaffich.Cet lmentestalorsretirdudocumentetdelamiseenpage.VoirlasectionVisibilitciaprs,pourladiffrenceavecla propritvisibility: hidden;. Exemple1 Laffichagenormaldelimage. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>xxx xxx xxx xxx xxx xxx</p> <div> <img src="cup.png"> </div> <p>xxx xxx xxx xxx xxx xxx</p> </body> </html>
Exemple2 Aveclapropritdisplay:none. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css">
- 1-
.displaynone { display: none;} </style> </head> <body> <p>xxx xxx xxx xxx xxx xxx</p> <div class="displaynone"> <img src="cup.png"> </div> <p>xxx xxx xxx xxx xxx xxx</p> </body> </html>
Lacapturedcranillustrebienquelimageatretirecommesielletaitabsenteducodesource.
- 2-
Visibilit
LapropritCSSvisibilitydterminesiunlmentestvisibleoucach. visibility: visible;ou hidden; Commentaires
q
Lavaleurvisibleaffichellment. Lavaleurhiddencachellment. Attention!Malgrlavaleurhidden,llmentoccupetoujourssaplacedansledocumentetunrectangleblanc apparat l o il pourrait tre affich. De cette manire, la mise en page est conserve malgr labsence (apparente) de limage et les autres lments de la page conservent leur position relative initiale. La valeur hiddendiffreenceladelapropritdisplay: none;quiretirepurementetsimplementllmentdelapageet nerservepasdeplacepourceluici.
Exemple Aveclapropritvisibility: hidden. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .hidden { visibility: hidden;} </style> </head> <body> <p>xxx xxx xxx xxx xxx xxx</p> <div class="hidden"> <img src="cup.png"> </div> <p>xxx xxx xxx xxx xxx xxx</p> </body> </html>
Lacapturedcranmontreclairementque,mmesilimagenestpasvisible,lespacedecelleciabientrservlors delamiseenpage.
- 1-
Curseurdelasouris
Cettepropritcursorpermetdemodifierlecurseurdelasouris. cursor: motcl
Lesdiffrentsmotsclssont:
q
pointer.Lecurseurreprsenteundoigtindiquantunlien. move.Lecurseurindiqueunobjetquonpeutdplacer. e-resize.Curseurpointantverslest. ne-resize.Curseurpointantverslenordest. nw-resize.Curseurpointantverslenordouest. n-resize.Curseurpointantverslenord. se-resize.Curseurpointantverssudest. sw-resize.Curseurpointantverslesudouest. s-resize.Curseurpointantverslesud. w-resize.Curseurpointantverslouest. text.Lecurseurindiquequonpeutslectionnerletexte.Souventun .
wait.Lecurseurindiqueuneprogression.Souventunemontreouunsablier. help.Lecurseurindiqueuneaide.Souventunpointdinterrogation. default.Lecurseurpardfautselonlaplateforme.Souventuneflche. crosshair.Lecurseurindiqueunecroix. progress.Lecurseurenformedeflcheavecsablier. not-allowed.Lecurseurenformederondbarr. no-drop.Lecurseurenformedemainavecundoigtdplietunrondbarr. col-resize.Curseurfaitdedeuxtraitsverticauxavecuneflchedechaquect. row-resize.Curseurfaitdetraitshorizontaux. auto.Lenavigateurdtermineluimmelecurseurselonlecontexte. url.Spcifieunfichierimagespcialpourlecurseur.LefichierimagedelURLdoittreauformatcur(curseur) ouani(curseuranim).
Ouquelquescurseurssousformeimage:
- 1-
pointer
move
e-resize ne-resize nw-resize n-resize
se-resize sw-resize s-resize
w-resize text
wait
help
crosshair
Attention,lapparenceducurseurpeutvarierselonlesnavigateursetlesystmedexploitation. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h2 { cursor: help;} </style> </head> <body> <h2>Les feuilles de style CSS</h2> </body> </html>
- 2-
- 3-
Numrotationautomatique
LaspcificationCSS2aintroduitlanotiondecompteurs(counter)danslespropritsdestyle.Grceceuxci,ilsera possibledegnrer,parexemple,unenumrotationautomatiquedesectionsetsoussections. counter-reset: counter-increment: Commentaires
q
nomducompteur nomducompteurvaleurdincrmentation
Lapropritcounter-resetcreourinitialiselecompteurdsign. Lapropritcounter-incrementincrmentelecompteurdsign. Lepasdincrmentationestpardfautde1.Maisuneautrevaleurpeuttrespcifie.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { counter-reset: section; font-size: 50%;} h1 { counter-reset: item;} h1:before { counter-increment: section; content: "Chapitre " counter(section) " : ";} h2:before { counter-increment:item; content: counter(section) "." counter(item) " ";} </style> </head> <body> <h1>Partie Html</h1> <h2>Html 4.0</h2> <h2>Xhtml 1.0</h2> <h2>Xhtml5</h2> <h1>Partie scripts</h1> <h2>JavaScript</h2> <h2>Dhtml</h2> <h1>Partie cadriciels</h1> <h2>jQuery</h2> <h2>Dojo</h2> </body> </html> Cespropritsdestylencessitentquelquesexplications. body { counter-reset: section;} Oninitialiseuncompteurappelsectiondontlechampdactionestlecorpsdudocument. h1 { counter-reset: item;} Oninitialiseunautrecompteuritemdontlechampdactionestlestitresdeniveau1. h1:before { counter-increment: section; content: "Chapitre " counter(section) " : ";} chaquetitre<h1>,lecompteursectionsincrmenteduneunit(counter-increment: section).Lapropritdestyle critdevantlestitres<h1>(h1:before)lecontenu(content)reprisentrelesguillemets.Soitletexte"Chapitre"suivide
- 1-
lavaleurducompteursection. h2:before { counter-increment:item; content: counter(section) "." counter(item) " ";} chaquetitre<h2>,lecompteuritemsincrmente duneunit(counter-increment: item).Lapropritdestylecrit devantlestitres<h2> (h2:before)lecontenu(content)reprisentrelesguillemets.Soitletexte"Chapitre"suividela valeurducompteuritem.
- 2-
Utilitdesfeuillesdestylepourlimpression
Vous avez invitablement dj t du lors de limpression dune page Web. Entre autres dsagrments, on peut citer:
q
La page imprime a puis une bonne partie de vos cartouches dencre avec des images ou des bannires inutiles. Les menus de navigation, si utiles sur la toile, encombrent votre feuille imprime avec des informations inutilisables. Lapoliceutiliselcranservledifficilementlisiblesurlaversionpapier. LapageWebestmalimprimecardespartiesdudocumentsontabsentesdevotrefeuille. Etc.
Lesfeuillesdestyleviennentvotresecourspourprvoiruneversionimprimablesansdevoircrireunepagedistincte ceteffet. Ilneserapasncessairedimprimerlapagepourfairedesessaisoudesmisesaupoint.Unaperuavantimpression permetdevisualiserlapagecommesielletaitimprime.
- 1-
Feuillesdestyleselonlemdiadesortie
1.Prsentation
Lesfeuillesdestylepermettentdesreprsentationsdiffrentesselonlemediadesortie. Si nous sommes des habitus du Web partir de lcran, dautres internautes le sont partir dun ordinateur de poche,dunsmartphone,duneinterfacevocale,dunebarretteBrailleoudundocumentimprim. Avec lattribut media, qui vient sajouter la dclaration de style, on peut concevoir des feuilles de style pour diffrentsmdiasdesortie. media="all" Lesstylesdfinissappliquenttouslestypesdemdias(valeurpar dfaut). Lesstylessappliquentlaffichagesuruncranclassique. Lesstylessappliquentlimpressionsurpapier.Lesnavigateurs utiliserontcesspcificationslorsquelutilisateurdemandedimprimerla pageWeb. Lesstylessappliquentlaprojectiondedonnesavecdesprojecteurs. Lesstylessappliquentlaffichagesurdesordinateursdepocheoudes smartphonespermettantlanavigationsurleWeb. Lesstylessappliquentdessystmesderestitutionvocaleassistepar ordinateur. LesstylessappliquentdesbarrettesBrailleconuespourlesnon voyants. LesstylessappliquentdesimprimantesperforationBrailleconues pourlesnonvoyants.
media="screen" media="print"
media="projection" media="handheld"
media="aural"
media="braille"
media="embossed"
Cesdiffrentespossibilitsnesontpasencoretoutesprisesenchargeparlesnavigateursrcents.Onpenseaux propritsvocales(media="aural")dontlesfeuillesdestylesontditesdepuislongtempsmaisquinontpasencore treprisesparlesnavigateursgrandpublic.SeulOpera8+lesprendpartiellementencharge.
2.Incorporation
IlexistediffrentsmoyenspourincorporerdansundocumentHtml5cesstylesspcifiquesunmdia. Styleinterne LespropritsdestylesencodenticidanslenttedudocumentHtml. Exemple <head> <style type="text/css" media="print"> /* Feuilles de style qui sappliquent au document imprim */ </style> <style type="text/css" media="screen"> /* Feuilles de style qui sappliquent lors de laffichage lcran */ </style> <style type="text/css" media="all"> /* Feuilles de style qui sappliquent en toutes circonstances */ </style> </head>
- 1-
Styleexterne Les proprits de style sencodent ici dans un document distinct du document Html5. Cest sans aucun doute la mthodelaplusutiliseparlesconcepteursdesitecarlapluscompatibleetlaplusprochedelespritduHtml5. Exemple <link rel="stylesheet" type"text/css" href="print.css" media="print"> Dclarationquiappellelafeuilledestyleexterneprint.css,prparepourlimpression(print). <link rel="stylesheet" type"text/css" href="ecran.css" media="screen"> Dclarationquiappellelafeuilledestyleecran.css,destinelaffichagelcran(screen). Styleimport Exemple @import url(print.css) print; Dclarationquiappellelafeuilledestyleexterneprint.css,prparepourlimpression(print). @import url(ecran.css) screen; Dclarationquiappellelafeuilledestyleecran.css,destinelaffichagelcran(screen). @media Outrelapossibilitdincorporer diverses feuilles de style spares pour diffrents mdias de sortie dans une page Html,ilexistegalementlapossibilitdedfinirdiffrentsmodesdesortiesdansuneseuledclarationdestyle. <style type="text/css"> @media print { /* dfinition de formats pour limpression */ } @media screen { /* dfinition de formats pour une sortie cran ... */ } </style> Exemple CemodedenotationpeuhabituelenCSSdonneraitenpratique: <style type="text/css"> @media print { body { background-color: white;} } @media screen { body { background-color: black;} } </style>
- 2-
Optimiserunepagedimpression
Avant dexplorer les proprits de style propres limpression, il convient de passer la page en revue afin de loptimiser.Onprocderaentroistemps:
q
dceler et liminer tous les lments qui se rvleront inutiles voire drangeants lorsque la page sera imprime. revoirleformatageducontenutextuelenvuedelalecturesurpapier. ajouterdesinformations,habituellementrserveslaffichagelcran.
OnpeutdirequunepageWebaffichelcrandoittreplaisantel il et quuneinformationpapierdoit treplaisantelesprit.Plusquejamais,cestlarichessedelinformationouducontenuquiestrecherchesur lapageimprime. Sanstrelimitatif,ilfaudraveiller:

q
auxarrireplansdecouleurouavecimage. lacouleurdescaractres. autypedepolicedecaractres. latailledescaractres. auxliens. auximages. aumenudenavigation. auxanimationsFlash,JavaScriptetDhtml. auxformulaires. auxmarges...
Reprenonscesdiffrentspointsendtail:
q
Modifier les arrireplans. Par dfaut, la plupart des navigateurs nimpriment pas les couleurs et les images darrireplan. Cependant, si votre visiteur a coch loption avance Imprimer les couleurs et les images darrireplan, il risque de ne pas apprcier votre page spcialement conue pour limpression et de vous considrer(tort)commeunpitreconcepteur.Ainsi,ilestprudentdedfinirpourcettepagedimpressiondes arrireplansblancs. body { background: white; background-image: none;}
Mettreennoirlespolicesdecouleur.Parfoisplaisantslcran,descaractresdepolicecolorisrisquentde consommerinutilementdelencreetnapportentpasdenrichissementlinformationsurpapier. body { color: black;}
Changer la police en serif. Bien que ce soit une question dapprciation personnelle, daucuns trouvent les polices sansserif (Arial , Verdana, Helvetica) plus lisibles lcran que les polices de type serif (Times New Roman,Garamond),plusadapteslalecturesurpapier.
- 1-
font-family : Arial, Verdana, sans-serif;

q
Veillerlatailledelapolice.SivotrepageWebestcriteavecunepolicedepetitedimension,ilestprudent dadopterunetailledecaractresde11ptou12pt,voireplusgrandeenfonctiondevotreaudience.Ilest conseilldetravailleravecdespoints(pt),plusspcifiqueslimpression,pluttquedespixels(px). font-size : 12pt;
Identifierlesliens.Questiondlicatequecelledeshyperliens.Detoutevidence,ilsnesontpasaussiutiles surpapierqulcran,maisilestsouventimportantdindiquerquilyavaitdesliensdansloriginal. Pourcefaire,plusieurspolitiquespeuventtreadoptes.Onpeutforcerlesoulignementdesliensdontceluici avaitteffacparlaproprittext-decoration: none;. a { text-decoration : underline;} Certainsprconisentdecomplterlelienavecsonadresse. a:after { content: " (" attr(href) ") ";} Lesmentions"cliquezici",djpeuplaisanteslcran,sonttoutfaitinutilesenversionpapier.
Enlevertouteimageetbannireinutilelacomprhensionducontenu.Ilestcependantconseilldeconserver leslogospourvousidentifierauprsdelutilisateur. .noprint { display: none;} ... <div class="noprint"><img scr="xxx.jpg" alt=""></div>
Enlever les outils de navigation. Les menus de navigation, particulirement sils sont placs sur les cts, occupent de la place inutilement sur la feuille dimpression. En les enlevant, vous permettrez au texte de simprimerplusefficacement. #navigation { display: none; } ... <div id="navigation"> ... </div>
Lesmarges.Lesmargesontpeuttretmodifiesparrapportauxmargespardfautpourlaffichage.Pour limpressionpapier,cellescidevrontventuellementtrerevues. margin-left: 20pt;
EnleverlesanimationsFlash,JavaScriptetDhtml,carellessimprimenttrsmalvoirepasdutout.Mmefaon deprocderaveclapropritdisplay: none;. Lesformulairesnesontdaucuneutilitenversionpapier.Mmefaondeprocderaveclapropritdisplay: none;. Lesajouts.Certainesinformationsrisquentdtre absentes de la page imprime, comme lindication de lURL originaledusitepourpermettrelutilisateurderetournersurvotresiteWeb,votrelogoetlamentiondun copyrightsincessaire.
Exemple Soitlapage:
- 2-
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { background-color: rgb(200,215,230);} .titre { font-size: 36px; font-weight: bold;} .texte { width: 350px; background-color: rgb(125,165,205); color: white; padding: 5px; font-size: 9pt; font-family: Arial, sans-serif;} .formulaire { width: 350px; background-color: rgb(125,165,205); color: white; font-size: 9pt; font-family: Arial, sans-serif; padding: 5px;} </style> </head> <body> <p><img src="fish.png" width="40" height="40" alt=""> <span class="titre">Les poissons</span></p> <div class="texte"> Les poissons sont des animaux aquatiques sang froid, pourvus de nageoires et dont le corps est couvert dcailles. Ils respirent grce des branchies. Jusqu prsent, on a rpertori plus de 27 315 espces de poissons. <br> </div> <div class="formulaire"> <form action=""> Documentation gratuite - Email : <input type="text" size="20"><br> <input type="submit" value="Envoyer"> <input type="reset" value="Rtablir"> </form> </div> </body> </html> Cettepageetlesimagessontdisponiblesdanslespacedetlchargement.
- 3-
Pourunepagedimpression,onferaensorte:
q
denleverlimagedupoisson,inutilepourlecontenu. dadopterdesarrireplansblancs.Bienquepardfaut,lesnavigateursnimprimentpaslescouleursetimages darrireplan,onprendracependantcetteprcautionpourlesutilisateursquiauraientdsactivcetteoption. dimprimerletextedansunepoliceplusgrandeetdoncpluslisible. dcrireletexteennoirpluttquenblanc. dabandonnerleformatageengrasdutextepourunecriturenormale. deretenirunepolicedetypeserifaulieudelasansserifinitiale. dterlarrireplandecouleurdutexte. denepasimprimerleformulaire,inutileenversionpapier.
Lecodedevient: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css" media="screen"> body { background-color: rgb(200,215,230);} .titre { font-size: 36px; font-weight: bold;} .texte { width: 350px; background-color: rgb(125,165,205); color: white; padding: 5px; font-size: 9pt; font-family: Arial, sans-serif;} .formulaire { width: 350px; background-color: rgb(125,165,205); color: white; font-size: 9pt; font-family: Arial, sans-serif; padding: 5px;} </style> <style type="text/css" media="print"> body { background-color: white;} img { display: none;} .titre { font-size: 36px; font-weight: bold;} .texte { background-color: white; color: black; font-size: 12pt; font-family: sans-serif;} .formulaire {display: none;} </style> </head> <body> <p><img src="fish.png" width="40" height="40" alt=""> <span class="titre">Les poissons</span></p> <div class="texte"> Les poissons sont des animaux aquatiques sang froid, pourvus de nageoires et dont le corps est couvert dcailles. Ils respirent grce des branchies. Jusqu prsent, on a rpertori plus de 27 315 espces de poissons. <br> </div>
- 4-
<div class="formulaire"> <form action=""> Documentation gratuite - Email : <input type="text" size="20"><br> <input type="submit" value="Envoyer"> <input type="reset" value="Rtablir"> </form> </div> </body> </html> limpression:
- 5-
Sautdepageavant
Cettepropritforceraunsautdepageavantunlmentdelapage. page-break-before: always; avoid; auto; Commentaires
q
Leparamtrealwaysforceunsautdepageavantllmentoilestdfini. Leparamtreavoidempcheunsautdepageavantllmentoilestdfini. Leparamtreautolaisselamainaunavigateur. Cettepropritestreconnuepartouslesnavigateursdumarch.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css" media="screen"> h1 { font-style: italic;} </style> <style type="text/css" media="print"> h1 { font-style: normal;} .normal { font-size: 120pt;} .break { font-size: 120pt; page-break-before:always;} </style> </head> <body> <h1 class="normal">Page 1</h1> <h1 class="break">Page 2</h1> </body> </html> Cequidonnelcran:
- 1-
Laperuavantimpressionrvle:
- 2-
Sautdepagearrire
Cettepropritforceraunsautdepageaprsunlmentdelapage. page-break-after: always; avoid; auto; Commentaires
q
Leparamtrealwaysforceunsautdepageaprsllmentoilestdfini. Leparamtreavoidempcheunsautdepageaprsllmentoilestdfini. Leparamtreautolaisselamainaunavigateur. Cettepropritestreconnuepartouslesnavigateursdumarch.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css" media="screen"> h1 { font-style: italic;} </style> <style type="text/css" media="print"> .normal { font-size: 120pt;} .break { font-size: 120pt; page-break-after:always;} </style> </head> <body> <h1 class="break">Page 1</h1> <h1 class="normal">Page 2</h1> </body> </html> Laperuaprsimpressionfournitlemmersultat.
- 1-
viterlessautsdepage
Cette proprit vitera le saut de page dans llment dsign. Particulirement utile pour viter quun tableau soit imprimsurplusieurspages. page-break-inside: always; avoid; auto; Commentaires
q
Leparamtrealwaysforceunsautdepageaprsllmentoilestdfini. Leparamtreavoidempcheunsautdepageaprsllmentoilestdfini. Leparamtreautolaisselamainaunavigateur. cejour,cettepropritnestreconnuequeparlenavigateurOpera.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css" media="screen"> h1 { font-style: italic;} </style> <style type="text/css" media="print"> table { page-break-inside:avoid;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> ... <td>96</td><td>97</td><td>98</td><td>99</td><td>100</td> </tr> </table> </body> </html>
- 1-
Leslecteur@page
LaspcificationCSS2aajoutleslecteur@page,rservauxpropritsdestyledimpressionspcifiques. Forceestdeconstaterque,mmedesannesaprs,peudecespropritsspcifiquessontimplmentesdansles navigateursmmercentsalorsquelesspcificationsduW3Ccesujetsontnombreusesetapriorifortpratiques. Onpenseauslecteurdepage@page,quitaitimplantdanslenavigateurOpra8+ettotalementignorparles autresnavigateurs.Pourtant,cesfonctionssontpourlemoinsallchantes.Citonslespossibilits:
q
dimprimerenmodeportraitoumodepaysage. dedimensionnerlapageimprime. dajouterdesmarquesdedcoupe. deprvoirunstylepourlapremirepage,lespagesdegaucheetlespagesdedroite. etc.
ProfitonsdeloccasionpourexplorercespossibilitsdansOpera10.6. Exemple1 Forcerlimpressionenmodepaysagepar@page{size: landscape;}. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css" media="print"> @page{ size: landscape;} .normal { font-size: 120pt;} .break { font-size: 120pt; page-break-after:always;} </style> </head> <body> <h1 class="break">Page 1</h1> <h1 class="break">Page 2</h1> <h1 class="normal">Page 3</h1> </body> </html> lcran:
- 1-
limpression(simulation):
Exemple2 Appliquer un style diffrent aux pages de gauche et aux pages de droite par respectivement @page:left et @page:rightpourtenircomptedelareliureparexemple. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css" media="print"> @page:left{ margin-right: 420px;} @page:right{ margin-left: 420px;} .normal { font-size: 120pt;} .break { font-size: 120pt; page-break-after:always;} </style> </head> <body> <h1 class="break">Page 1</h1> <h1 class="break">Page 2</h1> <h1 class="normal">Page 3</h1> </body>
</html> limpression(simulation):
- 3-
LesslecteursCSS3
Les slecteurs de base du CSS1 sont assez limits. Les spcifications CSS2 et CSS3 ajoutent une multitude de slecteurs.
1.Lesslecteurshirarchiques
A B Descendants SlectionnetoutlmentBquiestdescendantdunlment A. SlectionnetoutlmentBquiestenfantdirectdunlment A. SlectionnetoutlmentBimmdiatementprcddun lmentA.
A > B
Enfants
A + B
Frreadjacent
Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #division h1 { width: 200px; background-color: #9cf;} h1 { margin-top: 5px; margin-bottom:5px; font-size: 20px;} p { margin-top: 5px; margin-bottom:5px;} </style> </head> <body> <div id="division"> <h1>Titre 1</h1> <div id="contenu" style="padding-left: 20px;"> <h1> Titre 1 bis</h1> <p>Paragraphe 1</p> </div> <h1>Titre 2</h1> </div> </body> </html>
Exemple2
- 1-
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #division > h1 { width: 200px; background-color: #9cf;} h1 { margin-top: 5px; margin-bottom:5px; font-size: 20px;} p { margin-top: 5px; margin-bottom:5px;} </style> </head> <body> <div id="division"> <h1>Titre 1</h1> <div id="contenu" style="padding-left: 20px;"> <h1> Titre 1 bis</h1> <p>Paragraphe 1</p> </div> <h1>Titre 2</h1> </div> </body> </html>
Exemple3 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> li.un + li { width: 200px; background-color: #9cf;} </style> </head> <body> <ul> <li class="un">Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </body> </html>
- 2-
2.Lespseudoclassesdeslection
:root Reprsentellmentracineoullmentleplushautdundocument.Par exemple,enHtml5,labalise<html>. Correspondauxlmentsvidesetquinontdoncpasdenfants. Reprendlenfantunique.Celuicinadoncpasdlmentfrre. Slectionnelepremierlmentenfant. Slectionneledernierlmentenfant. Dsignelenimelmentenfantonestunnombreoulesmotscls even(pairs)ouodd(impairs). Slectionnelenimeenfantenpartantdudernierlment. Reprendluniquelmentdecetype. Reprsentelepremierlmentdecetype. Reprsenteledernierlmentdecetype. Dsignelenimelmentdecetypeonestunnombreoulesmots clseven(pairs)ouodd(impairs). Slectionnelenimelmentdecetypeenpartantdudernierlment.
:empty :only-child :first-child :last-child :nth-child(n)
:nth-last-child(n) :only-of-type :first-of-type :last-of-type :nth-of-type(n)
:nth-last-of-type(n)
CesslecteurssontimplmentsdansFirefox3.6+,Safari5+,Chrome7+,Opera10.6+etInternetExplorer9+. Lanumrotationdencommence1etnonpas0commeenJavaScript.
Exemples Les exemples se basent sur le document Html5 suivant. Il comprend une balise parent <ul> et cinq balises enfant <li>. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body>
- 3-
<ul> <li>Item <li>Item <li>Item <li>Item <li>Item </ul> </body> </html>
1</li> 2</li> 3</li> 4</li> 5</li>
Lepremieritemdelaliste ul :first-child { background-color: #9cf;} ou li:first-of-type { background-color: #9cf;}
Ledernieritemdelaliste ul :last-child { background-color: #9cf;} ou li:last-of-type { background-color: #9cf;}
Letroisimeitemdelaliste ul :nth-child(3) { background-color: #9cf;} ou li:nth-of-type(3) { background-color: #9cf;}
- 4-
Lequatrimeitemdelaliste(oulesecondenpartantdudernierlment) ul :nth-last-child(2) { background-color: #9cf;} ou li:nth-last-of-type(2) { background-color: #9cf;}
Leslmentsimpairs ul :nth-child(odd) { background-color: #9cf;} ou li:nth-of-type(odd) { background-color: #9cf;}
Leslmentspairs ul :nth-child(even) { background-color: #9cf;}
- 5-
ou li:nth-of-type(even) { background-color: #9cf;}
3.Lesslecteursdattributs
[attr] [attr="valeur"] Dsigneunlmentquicomportelattributattrindiqu. Dsigneunlmentquicomportelattributattrfourniparlavaleur indique. Correspondtoutlmentdontlattributattrcontientunelistede valeurssparespardesespacesetdontlunedellesestvaleur. Correspondtoutlmentdontlattributattrcontientunelistede valeurssparespardestiretsdbutantparvaleur. Reprsenteunlmentdontlattributattrcommenceavecleprfixe fourniparlavaleurindique. Reprsenteunlmentdontlattributattrsetermineaveclesuffixe fourniparlavaleurindique. Reprsenteunlmentdontlattributattrcontientuneinstancedela valeurindique.
[attr~="valeur"]
[attr|="valeur"]
[attr^="valeur"]
[attr$="valeur"]
[attr*="valeur"]
Ces slecteurs dattributs sont implments dans Firefox 3.6+, Safari 5+, Chrome 7+, Opera 10.6+ et Internet Explorer9+. Exemples <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <div class="titre">Slecteurs dattribut</div> <div name="un">Lorem ipsum</div> <div title="deux">Lorem ipsum </div> <div title="trois">Lorem ipsum </div> <div name="dernier">Lorem ipsum </div> </body> </html> lment(s)aveclattributname
div[name] { background-color: #9cf;}
lmentaveclattributclass="titre" div[class="titre"] { background-color: #9cf;}
lmentavecunattributnamequicommencepar"de" div[name^="de"] { background-color: #9cf;}
lmentdontlattributtitleseterminepar"x". div[title$="x"] { background-color: #9cf;}
- 7-
lmentdontlattributtitlecontient"roi" div[title*="roi"] {background-color: #9cf;}
Notonsquilestpossibledecombinerlesslecteurs. div[name="un"][class="titre"]
- 8-
Lesbordsarrondis
Aprspresque20ansdeformesrectangulairesavecdesanglesdroitsetpointus,voicivenirenfinlesbordsarrondis, toutenrondeurs. Jusquprsent,lesbordsarrondisnepouvaienttreralissqueparunegymnastiquequirelevaitplusdurayondes trucsetastucesavecdemultiplesdivisions<div>etdesimagesplacesdansleurarrireplan.AvecleCSS3,cesbords arrondissontralissdirectementavecquelqueslignesdepropritsdestyle. Lesbordsarrondisdesquatreextrmitssontintroduitsparlaproprit: border-radius xy oxetysontunevaleurouunpourcentage Lesvaleursdexetydterminentlesrayonshorizontauxetverticauxdunquartdellipse,cequiinduiralacourburede langle. Lesexemplessuivantssontplusparlants.
Uneseulevaleurpeuttreindique.Danscecas,lavaleurdexestgalelavaleurdey. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #round { width: 200px; height: 80px; background-color: rgb(185,205,225); border: 1px solid gray; border-radius: 1em;} </style> </head> <body> <div id="round"></div> </body> </html>
- 1-
CettepropritCSS3estreconnueenltatparInternetExplorer9+,Opera10.6+,Safari5+etChrome7+. EtFirefox?Unepetitecomplicationseprsente.Firefoxaintroduitlapropritradiusdepuisdenombreusesannes, sansattendrelesrecommandationsCSS3.AinsipourFirefox3.6+,onutiliseralapropritborder-radiusprcdedu prfixe-moz.Soit: -moz-border-radius: 1em; Safari et Chrome, qui reprennent le moteur de rendu Webkit, ont galement anticip cette proprit CSS3 et leurs versionsantrieurescellessignalesciavantncessitentleprfixe-webkit.Soit: -webkit-border-radius: 1em; Uneversionparfaitementcompatibledenotreexempledevientalors: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #round { width: 200px; height: 80px; background-color: rgb(185,205,225); border: 1px solid gray; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;} </style> </head> <body> <div id="round"></div> </body> </html> CommesouventenCSS,ilestpossibledespcifierindpendammentunanglepourchaqueextrmit. border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius xy oxetysontunevaleurouunpourcentage
border-top-left-radius: 10px 5px; Ilestgalementpossiblededfinirlarrondidechacundesangles,laidedunecritureraccourciequiselitcomme laccoutumedanslesensdesaiguillesdunemontreendbutantparlehaut(top,right,bottom,left). border-radius: liste valeurs / liste valeurs La premire liste de valeurs reprsente les rayons horizontaux des angles, la deuxime liste reprsente les rayons verticauxdesangles. border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; Lescrituresaveclesprfixes-mozet-webkitsont: -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft -moz-border-radius-topleft
- 2-
-webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius -webkit-border-top-left-radius
Ilfautsoulignerlapositiondiffrentedumotradiusetladiffrenceentretop-rightettopright. Toutcecipermetdesfiguresassezinhabituellesdansledesigndespages. Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #round1 { width: 70px; height: 70px; background-color: rgb(185,205,225); border: 1px solid gray; border-radius: 35px; -moz-border-radius: 35px; -webkit-border-radius: 35px;} #round2 { width: 12em; height: 4em; background-color: rgb(185,205,225); border: 1px solid gray; border-radius: 1em 4em 1em 4em; -moz-border-radius: 1em 4em 1em 4em; -webkit-border-radius: 1em 4em 1em 4em;} </style> </head> <body> <p></p> <div id="round1"></div> <p></p> <div id="round2"></div> </body> </html>
Exemple2 Lesbordsarrondisnesappliquentpasquauxdivisions<div>.Voiciuneapplicationdansuntableau. <!DOCTYPE html>
- 3-
<html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type=text/css> table { width: 200px; background-color: rgb(185,205,225); text-align: center; margin:30px; border:1px solid gray; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> </body> </html>
Lesbordsarrondisnesontpaspossiblesaveclapropritcollapse. Exemple3 Lesbordsrondspeuventaussisappliquerdesimagesetce,sanspasserparunprogrammegraphique. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #round { width: 250px; height: 108px; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border: 1px solid gray; background-image: url(blue.png);} </style> </head> <body> <div id="round"></div> </body> </html>
- 4-
Limageblue.pngestdisponibledanslespacedetlchargementconsacrcetouvrage.
- 5-
Lesborduresimages
Une des nouveauts des CSS3 est de permettre lutilisation dune image pour lappliquer la bordure dun lment bote. Lapropritborder-imageprenduneimagerectangulaireetladiviseen9parties(voircapturedcrancidessous).Les 8partiesducontoursontalorsutilisespourlesanglesetlescts.Lecentreestcachpourpermettrelaffichagedu contenu.
Lcrituredecettepropritestassezcomplexe. border-image url(fichier_image) a b c d valeur valeur; o url(fichier_image)estladresserelativedelimageservant confectionnerlesbordures. a,b,cetdsontladimensiondunmorceaudelagrilledanslesctsde labordure. valeursoitround,repeatoustretch. Soitparexemple: border-image: url(border.png) 27 27 27 27 round round;
Commentaires
q
On peut ne signaler quun paramtre. Dans ce cas, celuici est appliqu pour les quatre cts. Avec deux paramtres,ceuxcidterminentladimensiondesctssuprieur/infrieuretgauche/droite.Troisparamtres, respectivement le ct suprieur, gauche/droite et infrieur. Et enfin quatre paramtres, dans lordre, bord suprieur,borddroit,bordinfrieuretbordgauche. Lemotclroundreproduitlesimagesetredimensionnecellesciafinquellessajustentexactementlalargeur etlahauteurdellment.Lemotclrepeat(nonreprisparcertainsnavigateurs)effectuelemmetravailque round mais sans ajustement. Et enfin, stretch (dfaut) tire limage aux dimensions de la bote. Une seule valeur dtermine les quatre cts. Deux valeurs sappliquent respectivement au ct suprieur/infrieur et gauche/droit.
Lapropritborder-imageestrepriseparFirefox3.6+,Safari3+,Chrome2+etOpera10.6+.Ellenestpasintgre dansInternetExplorer9. Exemple1 Audpartdelimage(border.png)reproduiteciavantetdisponibledanslespacedetlchargement. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:220px; height: 80px; border-width:20px; border-image:url(border.png) 30 30 round;
- 1-
-moz-border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; padding: 10px; text-align: center;} </style> </head> <body> <div id="box"><h1>Html5 et CSS3</h1></div> </body> </html> Remarquezquilestncessairedefixerlalargeurdelabordure(border-width).Cequiparatlogique.
Exemple2 Aveclavaleurdtirementstretch: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:220px; height: 80px; border-width:20px; border-image:url(border.png) 30 30 round stretch; -moz-border-image:url(border.png) 30 30 round stretch; -webkit-border-image:url(border.png) 30 30 round stretch; padding: 10px; text-align: center;} </style> </head> <body> <div id="box"><h1>Html5 et CSS3</h1></div> </body> </html>
- 2-
Exemple3 Soitlimagededpart(border_image.png),
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:220px; height: 80px; border-width:20px; border-image:url(border_image.png) 30 30 round; -moz-border-image:url(border_image.png) 30 30 round; -webkit-border-image:url(border_image.png) 30 30 round; padding: 10px; text-align: center;} </style> </head> <body> <div id="box"><h1>Html5 et CSS3</h1></div> </body> </html>
- 3-
- 4-
Lesombres
AveclespropritsCSS3,ilestprsentpossibledajouteruneffetdombresurletexteouleslmentsbote.
1.Lesombressurletexte
text-shadow: x y z couleur o xestledportdelombreversladroite. yestledportdelombreverslebas. zestlintensitdudgradouduflou(facultatif,pardfaut0). couleurestlacouleurdelombre. Les paramtres x et y admettent des valeurs ngatives. Le dport de lombre est alors respectivement vers la gaucheetverslehaut. CettepropritdestyleestintgreparFirefox3.6+,Safari3+,Chrome2+etOpera10+. Pour Internet Explorer (mme la version 9), il faut passer par le filtre propritaire Microsoft Shadow. Pour un effet dombragecompatible,ilfautainsiajouterparexemple: .ombrage { filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999, Direction=135, Strength=4);} Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type=text/css> .ombre { text-shadow: 2px 2px 4px #999; filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, Direction=135, Strength=6);} .relief { color : white; text-shadow: 2px 2px 3px black; filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, Direction=135, Strength=12);} </style> </head> <body> <h1 class="ombre">Html5 + CSS3</h1> <h1 class="relief">Editions Eni</h1> </body> </html>
- 1-
Pourlesamateursdeprcision,text-shadowtaitinclusdanslaspcificationCSS2(do labsencedeprfixes).Ila tretirdelaCSS2.1etrevientaveclesCSS3.
2.Lesombressurleslmentsbote
box-shadow x y z couleuro xestledportdelombreversladroite. yestledportdelombreverslebas. zestlintensitdudgradouduflou(facultatif,pardfaut0). couleurestlacouleurdelombre. Les paramtres x et y admettent des valeurs ngatives. Le dport de lombre est alors respectivement vers la gaucheetverslehaut. Notonsquelapropritsappliquesurlabotedellmentetnonsursabordure.Lombragenaffectedoncpasla tailledelabotedellment. CettepropritdestyleestintgreparFirefox3.6+,Safari3+,Chrome2+etOpera10.6+. CommepropritCSS3,ilfautajouterlesprfixes-mozpourFirefoxet-webkitpourSafarietChrome. Pour Internet Explorer (mme la version 9), il faut passer par le filtre propritaire Microsoft Shadow. Pour un effet dombragecompatible,ilfautajouterparexemple: .ombrage { filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, Direction=135, Strength=12);} Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .ombre { border: 3px solid white; box-shadow: 2px 2px 12px black; -moz-box-shadow: 2px 2px 12px black; -webkit-box-shadow: 2px 2px 12px black; filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, Direction=135, Strength=12);} </style> </head> <body> <img src="blue.png" class="ombre" alt=""> </body> </html>
- 2-
Leffetdombreauraitputredirectementappliqusurlimage.
- 3-
Lespolicespersonnalises
JusquprsentlespagesWebntaientpasunemerveilledetypographie.Eneffet,commelespolicesdpendentde celles installes sur lordinateur de linternaute, peu de polices sont la fois disponibles sur les postes quips de WindowsouMac. Les CSS3 permettent dimporter et dutiliser une police personnalise mme si celleci nest pas installe chez lutilisateur.Cetteproprit@font-faceconstitueainsiuneinnovationsignificativepourleswebgraphistesquipourront ainsireprendredestypographiespluscratives. Ladoptiondunepoliceparticulireseffectueendeuxtemps. Ilfautdabordtlchargerlapolicedecaractrespourlincorporerdanslapage. @font-face { font-family: "nom_police"; url("nom_police.extension_police");}
Commentaires
q
font-family: "nom_police"indiquesousquelnomlapoliceserautilisedanslecodedelapage. url("nom_police.extension_police")indiquelurlenadressagerelatifouabsoludelapolicepersonnalise.En adressage relatif, la police sera ainsi prsente dans le rpertoire du site comme une image ou un fichier de feuille de style externe. On retiendra de prfrence des polices adaptes au Web (webfonts) dont la taille rduitenepnaliserapasletempsdetlchargement. extension_police dtermine lextension dune police de caractres, par exemple lextension ttf (True Type Fonts).
Unefoislapolicetlchargeavec@font-face,cellecipeuttreappliqueunlment,commenimportequellepolice, aveclapropritfont-family. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> @font-face { font-family: "mapolice"; src: url(fantaisie.ttf);} .fontface { font: 100px mapolice, fantasy;} </style> </head> <body> <div class="fontface">Html5 + CSS3</div> </body> </html> Lapolicefantaisie.ttfestdisponibledanslespacedetlchargementddicetouvrage.
- 1-
CecifonctionneparfaitementavecFirefox3.6+,Safari5+,Chrome5+etOpera10.6+. Internet Explorer 9 reconnat lui aussi la proprit @font-face mais ne prend en compte que la police au format eot (EmbeddedOpenType),propritaireMicrosoft. Unscriptcompatiblepourraittre: @font-face { font-family: "Boston"; src: url(boston_traffic.eot); src: url(boston_traffic.ttf);} Mais, Internet Explorer a quelques difficults avec lattribut src lorsquil appelle tantt une police eot et tantt une policettf. Ilfaudramettreenplaceuneastucepourrendrelafeuilledestylecompatibleavectouslesnavigateursdenotretude. <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> @font-face { font-family: Boston; src: url(boston_traffic.eot); src: local(x), url(boston_traffic.ttf) format(TrueType);} .police {font: 40px Boston, Arial, sans-serif;} </style> </head> <body> <p></p> <p class="police">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </body> </html> Parmilesattributsquelonpeutajouterlaproprit@font-face,ilexistelattribut(facultatif)local("nom_police")qui demandeaunavigateurdevrifiersilexisteuneversionlocaledelapoliceavantdelatlcharger.InternetExplorer tlchargebienlapoliceeotmaisbloquesurlelocal("x")quilnereconnatpasetneseproccuperadoncpasdela policettf.Lesautresnavigateurs,netrouvantpasenlocallapolicex,tlchargerontalorslapolicettf. Lespolicesboston_traffic.eotetboston_traffic.ttfsontdisponiblesdanslespacedetlchargement.
- 2-
IlexisteunautremoyendutiliserdespolicesparticuliressurunepageWebsansavoirsoccuperde@font-faceet parfaitementcompatibleaveclesdiffrentsnavigateurs.IlconsistepasserparGoogleFontApi.Lespolicesproposes parceservicesontparfaitementadapteslaffichagedansunnavigateuretdunpoidsrduit. IlsuffitsimplementdajouterunefeuilledestylevotrepageHtmlafindobtenirlanouvellepolice. <link href=http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin rel=stylesheet type=text/css> IlsuffitalorsdelappliquerdansuneclasseCSSaveclapropritfont-family. Ilnefautdoncpaspasserparlaproprit@font-face,nisoccuperduformatdelapolice.ToutestgrparGoogleafin dassurerlemeilleuraffichagedecellecidanslenavigateur. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <link href=http://fonts.googleapis.com/css?family=Reenie+Beanie&subset= latin rel=stylesheet type=text/css> <style> h1 { font-family: Reenie Beanie, arial, serif; } </style> <body> <h1>Making the Web Beautiful !</h1> </body </html>
Pour trouver des polices de caractres adaptes au Web, une recherche sur Google avec le motcl webfont vous
- 3-
fourniraladressedesitesspcialiss. Citonsnanmoins:
q
www.fontsquirrel.com/ kernest.com/ www.webfontlist.com/ www.smashingmagazine.com/2007/11/08/40excellentfreefontsforprofessionaldesign/
Noubliezpasquilpeutexisteruncopyrightsurlespolicesetquecertainessontpayantes. Ilsubsistelaquestiondesavoircommentconvertirdespolicesttfenformateotoudautresformatsdepolices. Il y a bien entendu le logiciel vieillissant et peu ergonomique Microsoft Weft pour convertir en format eot. On lui prfrera un convertisseur en ligne ladresse www.kirsle.net/wizards/ttf2eot.cgi ou le programme eotfast (http://eotfast.com/). Un convertisseur multiformats en ligne, en http://www.convertissez.fr/convertisseurpolice.php. franais, est quant lui disponible ladresse
- 4-
Ajusterlahauteurdescaractres
Despolicesdiffrentes,malgrunetailledecaractresidentique,peuventparatreplusgrandesoupluspetitesque lespolicesavoisinantes.
En outre, avec la proprit font-family, vous navez pas la matrise de la police rellement affiche. En effet, lorsquune police de caractres nexiste pas sur lordinateur de lutilisateur, les navigateurs utilisent une police de remplacement. Celleci na pas forcment les mmes caractristiques dimensionnelles que la police originale, et ce, mmesilatailledescaractresestidentique. La proprit font-size-adjust permet dobtenir des caractres toujours de la mme taille, aussi bien pour les majusculesquepourlesminuscules,enfigeantlecoefficientdaspect.Lapropritfont-size-adjustdoittredfinie lavaleurducoefficientdaspectdelapoliceprfrentielle. font-size-adjust: 0.465; Ce coefficient daspect peut se dfinir par ttonnements, mais il est plus simple de consulter des sites comme www.brunildo.org/test/aspecttable.html,quisontddiscettetche. Pourlinstant,seulFirefox3.6+aintgrlapropritfont-size-adjust,pourtantbienutile. Exemplesansfont-size-adjust
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 200px; float: left; margin-right: 15px;} #calibri p { font: 14px Calibri sans-serif; } #verdana p { font: 14px Verdana, sans-serif;} </style> </head> <body> <div id="calibri"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </p> </div> <div id="verdana"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </p> </div> </body> </html>
- 1-
Exempleavecfont-size-adjust
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width:200px; float:left; margin-right:20px;} #calibri p { font:14px Calibri, sans-serif;} #verdana p { font: 14px Verdana, sans-serif; font-size-adjust: 0.465;} </style> </head> <body> <div id="calibri"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </p> </div> <div id="verdana"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </p> </div> </body> </html>
- 2-
Pour une information plus fouille sur la proprit font-size-adjust, consultez la page www.babylon design.com/site/index.php/2010/04/12/262maiscestquoiaujustefontsizeadjust.
- 3-
Lesarrireplansmultiples
LesCSS3rendentpossiblelaffichagedeplusieursimagesdansunmmearrireplanenpermettantdecumulerles valeursauseindespropritsbackground-image,background-positionetbackground-repeat(PartieCSSLesarrire plans). Ceteffetntaitpossiblequensuperposantdesdivisions<div>dfiniesenpositionabsolue,unpeulamaniredes calquesdanslesapplicationsgraphiques. Tous les navigateurs de notre tude reconnaissent les arrireplans multiples, soit Internet Explorer 9, Firefox 3.6+, Opera10.1+,Safari4+etChrome4+. Exemple Soitlesimagesflore1.png,flore2.png,flore3.pngetflore4.png:
<!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:300px; height: 200px; border: 1px solid gray; background: url(flore1.png) url(flore2.png) url(flore3.png) url(flore4.png) </style> </head> <body> <div id="box"></div> </body> </html>
top left no-repeat, top right no-repeat, bottom right no-repeat, bottom left no-repeat;}
- 1-
Ledgraddecouleurs
LesstandardsCSSpourlesdgradsdecouleursnesontpasencorefinaliss.CequinapasempchFirefox,Safari etGoogleChromedelesimplanter. Quenestildesprfixes-mozet-webkit?Pourcetteproprit,ladfinitiondesprfixesestfortdiffrente. Pourwebkit Lesdgradslinaires,pourlesnavigateursSafarietChrome,scriventselonlaproprit: background: -webkit-gradient(linear, origine, fin, from(couleur), to (couleur)); o:
q
linearpourlesdgradslinaires. origineestlepointdedpartdudgrad.Celuiciestdtermin pardeuxvaleurssparesparunespace.Lasyntaxesupporte desnombres,despourcentagesoulesmotsclstop,right, bottometleft.Soit,parexemple,top left. finestlepointdefindudgrad.Celuiciestdterminpar deuxvaleurssparesparunespace.Lasyntaxesupportedes nombres,despourcentagesoulesmotsclstop,right,bottom etleft.Soit,parexemple,bottom right. from(couleur),lacouleurdedbutdudgrad. to(couleur),lacouleurdefindudgrad.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:250px; height: 80px; border: 1px solid gray; background: -webkit-gradient(linear, left top, right bottom, from(#7DA5CD), to(white));} </style> </head> <body> <div id="box"></div> </body> </html>
- 1-
Pourlesdgradscirculaires,lapropritest: background: -webkit-gradient(radial, origine, radius1, fin, radius2, from(couleur), to (couleur)); o:

q
radialpourlesdgradscirculaires. origineestlepointdedpartdudgrad,soitducercleintrieur.Celuici estdterminpardeuxvaleurssparesparunespace.Lasyntaxe supportedesnombres,despourcentagesoulesmotsclstop,right, bottom,leftetcenter.Soit,parexemple,center center. radius1estleradiusducercleintrieur. finestlepointdefindudgrad.Celuiciestdterminpardeuxvaleurs sparesparunespace.Lasyntaxesupportedesnombres,des pourcentagesoulesmotsclstop,right,bottom,leftetcenter. radius 2estleradiusducercleextrieur. from(couleur),lacouleurdedbutdudgrad,soitducercleintrieur. to(couleur),lacouleurdefindudgrad,soitducercleextrieur.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:200px; height: 200px; border: 1px solid gray; background: -webkit-gradient(radial, center center, 0, center center, 150, from(white), to(#7DA5CD));} </style> </head> <body> <p></p> <div id="box"></div> </body> </html>
- 2-
PourMozillaFirefox Pourlesdgradslinaires: background: -moz-linear-gradient(point dorigine, couleur de dpart, couleur fin); o

q
linearpourlesdgradslinaires. point dorigineestchoisirentretop,right,bottomouleftouunepaire devaleurs(sparesparunespace)laborepartirdetop,right,bottom ouleft. couleur doriginepourcouleurdedpartdudgrad. couleur finpourlacouleuraveclaquellesetermineledgrad.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:250px; height: 80px; border: 1px solid gray; background: -moz-linear-gradient(top left, #7DA5CD, #ffffff);} </style> </head> <body> <div id="box"></div> </body> </html>
- 3-
Pourlesdgradscirculaires: background: -moz-radial-gradient(position, forme, couleur dbut, couleur fin); o

q
radialpourlesdgradscirculaires. positionestlepointcentraldugradientradial.Motclchoisirentretop, right,bottom,left,centerouunepairedevaleurs(sparesparun espace)laborepartirdetop,right,bottom,leftoucenter.Par exemple,center center. forme,laformedugradientradialsoitcircle(circulaire)ouellipse (elliptique). couleur dbut,couleur fin.Lacouleurdedbutdudgradetcelledefin.
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:200px; height: 150px; border: 1px solid gray; background: -moz-radial-gradient(top left, circle, white, #7DA5CD);} </style> </head> <body> <p></p> <div id="box"></div> </body> </html>
- 4-
MozillaFirefoxajouteencorebiendautresoptionspermettantdecrerdesgradientsdeplusenpluscomplexes. PourInternetExplorer8+ InternetExplorernereprendpaslapropritdestylegradient.IlserabatsurunfiltrepropritairesMicrosoft. filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#00FF00, EndColorStr=#000000, GradientType=1); AvecStartColorStrpourlacouleurdedpart,EndColorStrpourlacouleurdefinet gradientTypeavecunevaleur0 pourlesdgradsverticauxetunevaleurde1pourlesdgradshorizontaux. Lecodedundgradcompatibleserait: <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:250px; height: 80px; border: 1px solid gray; background-color: #7DA5CD; filter:progid:DXImageTransform.Microsoft.Gradient( StartColorStr=#7DA5CD, EndColorStr=#ffffff, GradientType=1); background: -moz-linear-gradient(top left, #7DA5CD, #ffffff); background: -webkit-gradient(linear, left top, right bottom, from(#7DA5CD), to(white));} </style> </head> <body> <div id="box"></div> </body> </html>
- 5-
Lopacitoulatransparence
AveclesCSS3,ilestpossibledefairevarierlopacitoulatransparencedunlment. CettepropritatadoptetrsttetestainsicompatibleavecFirefox1+,Safari1+,Chrome1+etOpera9+. Ilnestdoncpasncessairedeseproccuperdesprfixes-mozet-webkit. opacity: Valeurcompriseentre1et0.Aveclavaleur1,lopacitestcomplteetla transparencenulle.Avec0,lopacitestnulleetllmentcompltement transparent.
Commentaires
q
Le rsultat de la proprit opacity est assez proche de celui de la notation de couleur RGBa avec transparence.Ilfautcependantnoterquelapropritopacitysappliquellmentdanssonintgralit,soit toussesdescendants.RGBanesappliqueuniquementqullmentslectionn. Llment dot de la proprit opacity est translucide. Il laisse apparatre llment qui se trouve ventuellementsituendessousdelui(voirexempleciaprs).
cestadedenotretudedesCSS3,onnestonneraplusdufaitquInternetExplorernereprennepaslaproprit opacity.Ilestncessairedepasserparlefiltrealpha,propritaireMicrosoft. filter:alpha(opacity=x)oxestunevaleurcompriseentre100et0. Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <body> <img src="fleur.png" style="opacity: 1; filter:alpha(opacity=100)"> <img src="fleur.png" style="opacity: 0.6; filter:alpha(opacity=60)"> <img src="fleur.png" style="opacity: 0.3; filter:alpha(opacity=30)"> </body> </html>
Exemple2
Illustronslatranslucidit. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div.background { width: 250px; height: 108px; background:url(blue.png); border:2px solid black;} div.box { width: 200px; height: 60px; margin:24px 25px; border:1px solid black; background-color:#ffffff; filter:alpha(opacity=50); opacity:0.5; text-align: center;} </style> </head> <body> <p></p> <div class="background"> <div class="box"> <h2>Lorem ipsum dolor</h2> </div> </div> </body> </html>
Exemple3 Ilesttentantdemodifierlopacitdelimageausurvolducurseurdelasouris. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <body> <img src="hiver.jpg" style="opacity: 0.4; filter:alpha(opacity=40)" onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4; this.filters.alpha.opacity=40"> </body> </html>
- 2-
Dansunpremiertemps,limagesafficheavecuneopacitde0.4.Ausurvolducurseurdelasouris(onmouseover),celle ci saffiche avec une opacit maximale. Lorsque le curseur quitte celleci (onmouseout), limage revient dans son tat initialavecuneopacitde0.4.
- 3-
Lescolonnesmultiples
PrsenteruncontenuenplusieurscolonnescommeavecAdobeInDesignestuneautrenouveautdesCSS3. column-count: Entierquidterminelenombredecolonnesdanslesquellesseraaffichle contenudellment. Valeurquidcritlalargeuroptimaledechaquecolonne(facultatif). Valeurquidterminelespaceoulepaddingentrelescolonnes. Dfinitunebordureentrelescolonnes.
column-width: column-gap: column-rule:
cejour,lescolonnesmultiplesnesontpasreprisesparInternetExplorer9etOpera10.6.SeulsFirefox3+,Safari 3.1+etChrome4+permettentcettemiseenpagemaisavecrespectivementlesprfixes-mozet-webkit. -moz-column-count: -moz-column-width: -moz-column-gap: -moz-column-rule: -webkit-column-count: -webkit-column-width: -webkit-column-gap: -webkit-column-rule:
Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width:420px; height: 240px; text-align: justify; column-count: 2; column-gap: 2em; column-rule: 1px solid silver; -moz-column-count: 2; -moz-column-gap: 2em; -moz-column-rule: 1px solid silver; -webkit-column-count: 2; -webkit-column-gap: 2em; -webkit-column-rule: 1px solid silver;} </style> </head> <body> <div id="box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit in amet, adipiscing nec, ... </div> </body> </html>
- 1-
- 2-
Transformations
Encore une proprit CSS3 dont les rsultats sont pour le moins spectaculaires. En effet, elles brisent le carcan rectangulaire du design des pages Web. Cette proprit permet dappliquer des transformations sur un lment comme la rotation, le dcalage, le zoom ou la dformation oblique. Associ aux transitions (voir point suivant), ce binmedechocrisquedemodifierprofondmentlamiseenpagedessitesdufutur. Enoutre,sipourlinstantcestransformationssonten2D,la3Destdjannonce. transform: rotate(angle), rotateX(angle), rotateY(angle) scale(nombre), scaleX(nombre), scaleY(nombre) skew(angle), skewX(angle), skewY(angle) translate(longueur), translate(longueur), translate(longueur) Comme toujours avec les CSS3 exprimentales, la proprit transform se dcline avec un prfixe selon les navigateurs: -webkit-transform. -moz-transform. -o-tranform. La proprit transform est prise en charge par presque tous les navigateurs de notre tude (Firefox 3.6+, Opera 10.6+,Safari4+,Chrome4+).ElleestparcontreencoreignoreparInternetExplorer9. Passonsenrevuelesdiffrentsparamtresdecetteproprittransform. Rotation La rotation dun lment est obtenue par le paramtre rotate(angle) o langle peut tre dfini en degrs (deg), radians(rad)ougradients(grad).Lesvaleurspositiveseffectuentlarotationdellmentdanslesensdesaiguilles dune montre et les valeurs ngatives tournent celuici dans le sens inverse. Lorsquune seule valeur est indique, celleciprvautpourlesdeuxaxesXetY.Avecdeuxvaleurs,cellescisappliquentlaxedesXetdesY. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> body { padding-left: 15px;} #box { width:200px; height: 80px; font-size: 70px; border: 1px solid black; padding-left: 10px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg);} </style> </head> <body> <h1 id="box">CSS 3</hi> </body> </html>
- 1-
Modificationdchelle Lamodificationdelchelledunlmentestobtenueparleparamtrescale(nombre)olenombrepeuttreunentier ou un dcimal, positif ou ngatif. Les valeurs positives effectuent un zoom avant et les valeurs ngatives, un zoom arrire.Lorsquune seule valeur est indique, celleci prvaut pour les deux axes X et Y. Avec deux valeurs, cellesci sappliquentlaxedesXetdesY. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { border: 1px solid black; background-color: #9cf; width:100px; height: 50px;} #box { margin: 40px 50px; -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2);} </style> </head> <body> <div></div> <div id="box" style=""></div> </body> </html>
- 2-
Dformationoblique Unedformationobliquedunlmentestobtenueparleparamtreshew(angle)olanglepeuttredfiniendegrs (deg), radians (rad) ou gradiants (grad). Les valeurs positives effectuent la rotation de llment dans le sens des aiguilles dune montre et les valeurs ngatives tournent celuici dans le sens inverse. Lorsquune seule valeur est indique,celleciprvautpourlesdeuxaxesXetY.Avecdeuxvaleurs,cellescisappliquentlaxedesXetdesY. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width: 100px; height: 100px; border: 1px solid black; background-color: #9cf; margin-left: 50px; -moz-transform: skew(-30deg); -webkit-transform: skew(-30deg); -o-transform: skew(-30deg); transform: skew(-30deg);} </style> </head> <body> <p></p> <div id="box" style=""></div> </body> </html>
- 3-
Dplacement Ledplacementdunlmentestobtenuparleparamtretranslate(longueur)olalongueurpeuttredfinieenpx, %,em,in,mm,cm.Lesvaleurspositiveseffectuent,surlaxedesX,undplacementversladroiteetverslagauche pour les valeurs ngatives. Pour laxe des Y, une valeur positive effectue le dplacement vers le haut et une valeur ngative vers le bas. Lorsquune seule valeur est indique, celleci prvaut pour les deux axes X et Y. Avec deux valeurs,cellescisappliquentlaxedesXetdesY. Exemple <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width: 100px; height: 100px; border: 1px solid black; background-color: #9cf; -moz-transform: translate(220px, 0); -webkit-transform: translate(220px, 0); -o-transform: translate(220px, 0); transform: translate(220px, 0); </style> </head> <body> <p></p> <div id="box" style=""></div> </body> </html>
Pour tester toutes les transformations http://www.westciv.com/tools/transforms/. possibles, ne manquez pas de consulter le site
- 4-
Lestransitions
LespropritsCSS3transitionapportentdumouvementdansledesigndelapage,linstardecequiseraliseavec duJavaScript. Lesanimationsseralisentprincipalementpartirdequatreproprits: transition-property PrciselespropritsCSSanimer,parexemple,lacouleur(color)etla largeur(width).Cespropritssontprcisesenleslistant,spares pardesvirgules. Lemotclall(dfaut)dsignetouteslespropritsanimablesde llment. transition-duration Prciseladuredelatransition.Celleciestexprimeens(seconde)ou ms(milliseconde). Prciselafonctiondetransitionutiliser: ease:rapidesurledbutetralentisurlafin. linear:vitesseconstantesurtouteladuredelanimation. ease-in:lentaudbutetacclredeplusenplusverslafin. ease-out:rapidesurledbutetdclresurlafin. ease-in-out:ledpartetlafinsontlents. transition-delay Prciseleretard(oulavance)dudpartdelatransition.Celuiciest exprimens(seconde)oums(milliseconde).
transition-timing-function
Leraccourcitransitionvitedereprendrechaqueproprit. transition: width 2s ease, height 3s linear; Laproprittransitionestpriseenchargeparpresquetouslesnavigateursdenotretude(Firefox4+,Opera10.6+, Safari4+,Chrome4+).ElleestparcontreignoreparInternetExplorer9. Exemple1 <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .transition a { padding: 8px; text-decoration:none; color: black; border-bottom:1px solid black; -webkit-transition: border 1s ease-out ; -moz-transition: border 1s ease-out; -o-transition: all 1s ease-out; transition: border 1s ease-out;} .transition a:hover{ border-bottom: 50px solid #9cf;} </style> </head> <body> <nav class="transition"> <a href="#">Accueil</a> <a href="#">Html5</a> <a href="#">CSS3</a> <a href="#">Contact</a> </nav> </body> </html>
- 1-
Lasituationdedpart:
Ausurvoldelasouris:
Exemple2 Laprsentationdecontenusousformedaccordonconnatunfrancsuccssurlatoile.LapropritCSS3transform permetderaliserceteffetuniquementpardesfeuillesdestyle,sansfaireappelducodeJavaScript. <!DOCTYPE html> <html lang="fr"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 300px;} .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:30px; width: 300px; background-color: rgb(215,230,245); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out;} .verticalaccordion>ul>li>h3 { display:block;
- 2-
margin: 0; padding:10px; height:19px; border-top:#f0f0f0 1px solid; font-family: Arial, Helvetica, sans-serif; font-size: 80%; color: #000; background: rgb(185,205,225);} .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:150px;} .verticalaccordion>ul>li:hover { height: 150px;} .verticalaccordion:hover>ul>li:hover>h3 { color:#fff; background: rgb(125,165,205); font-size: 80%;} .verticalaccordion>ul>li>h3:hover { cursor:pointer;} </style> </head> <body> <div class="verticalaccordion"> <ul> <li> <h3>Item 1</h3> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </li> <li> <h3>Item 2</h3> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </li> <li> <h3>Item 3</h3> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </li> <li> <h3>Item 4</h3> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </li> </ul> </div> </body> </html>
- 3-
- 4-

HTML5 CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML5 CSS

Încărcat de

Drepturi de autor:

Formate disponibile

HTML5etCSS3

Matrisez les standards des applications Web

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

crire"Ilest"defaonnormalepuisqueriennestspcifi, ensuitecrirelemot(etuniquementcemot)"important"etlemettreengras, rependrelcriturenormalepour"dapprendrelelangage", crirecettefoiscienitaliquelemot"Html5" etterminerpar"!"encriturenormale.

<b> <i> <p>

ENI Editions - All rights reserved - Algeria Educ

<div> <table> <form> <img /> Etc.

divpourdivisioncequisignifiedivision tablesignifietableau formsignifieformulaire imgpourimage

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

LevalidateurduW3Cluimme. LevalidateurduW3Qubec. Levalidateurvalidator.nu.

LevalidateurduW3C LeW3Cluimmeprsenteunvalidateurdecode(validator.w3c.org).Cequinepeuttrequungagedequalit. LavalidationduHtml5estcependantencoreannoncecommetantaustadeexprimental.

Quilestenanglais. Quiloffredevaliderunfichierparsonadressehttp,unfichierprsentsurvotreordinateurouducodeinsr dansunezonedetexte. Quilesttrspointilleux. Quesesremarquesetexplicationssonttrstechniquesvoireparfoissibyllines. Quilest"la"rfrencedesprofessionnels.

ENI Editions - All rights reserved - Algeria Educ

IlfautnoterquelevalidateurduW3Qubec(www.w3qc.org/validateur/)taitenreconstructionlorsdelaconception decetouvrage. Levalidateurvalidator.nu Lesitevalidator.nuproposegalementaustadeexprimentalunvalidateurHtml5(html5.validator.nu/). SignalonsquilfutlepremierproposerunvalidateurHtml5. Onpeutsouligner:

Quilestenanglais. Quesoninterfaceesttrssimplifie. Quiloffredevaliderunfichierparsonadressehttp,unfichierprsentsurvotreordinateurouducodeinsr dansunezonedetexte. Quilsembledexcellentequalit.

ENI Editions - All rights reserved - Algeria Educ

15. 16. 17. 18. 19. 20.

<tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

laligne8,lusagedelattributalignquiestsupprim(obsolte)enHtml5. laligne9,lusagedelabalisedesoulignement<s>quinexisteplusenHtml5. laligne11,lusagedelattributwidthdelabalise<table>estsupprimenHtml5.

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

Labalise<br> estunebalisediteuniquecarellenecomportepasdebalisedefermeture. Lanotation<br />,issueduXhtml1.0,estgalementaccepteenHtml5.

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

Commentaire Labalise<strike>duHtml4.0,quipermettaitdebarrerdutexte,napastreprisedansleHtml5.Labalise<del>, quiprsenteletextecommebarr,peuttreunealternative.

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

Lesigne<quimarqueledbutdunebalise. Lesigne>quimarquelafindunebalise. Lesigne"utilisdanslesattributsdebalise. Lesigne&quimarqueledbutdunerfrencedecaractre.

Cesdiffrentssignesdoiventtreencodsenutilisantlesentitssuivantes: < > " & &lt; &gt; &quot; &amp;

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

ENI Editions - All rights reserved - Algeria Educ

Cesdiffrentssignesdoiventtreencodsenutilisantlesentitssuivantes: < > " & < > " &