XHTML,HTML5,DOMetCSS
M2G2M,Univ.Paris8parIsisTRUCK
Inspirédediversessources
donthttp://xhtml.le-developpeur-web.comethttp://mymi.domy.be/LTP/index.html
Historique• XHTML(eXtensibleHyperTextMarkupLanguage)
– estissuduHTML(enestuneévolution)etsefondesurlasyntaxeXML– Langagedebalisespourtraiterdelaforme(cf.fondetforme)
• HTML– crééen1998parleW3C(WorldWideWebConsortium,organismede
normalisation)pourcréerfacilementdespagesweb– lesbalisessontfigées(impossibled’encréerdenouvelles,selonsesbesoins)
• XML(eXtensibleMarkupLanguage):– langagedebalisespourécriredesinformationsdemanière"universelle»– estuneversionsimplifiéedeSGML(StandardGeneralizedMarkupLanguage,
datantde1986,quiétaitundes1erslangagededescriptionàbalises)– lesbalisessontcrééesparl’utilisateur
• Ondistinguedeuxtypesdelangages:– leslangagesinterprétés(l’interpréteurlitlecode(lesinstructions)aufuretà
mesure)– leslangagescompilés(lecompilateurlitlatotalitéducodeettransformele
programmeluenunnouveauprogramme,ditexécutable)• HTML,XHTMLetXML,toushéritiersdeSGML,sontdeslangages
interprétés2
ExemplesdebalisesXHTML• <a>
– Signifie«anchor»(ancre)– Utilisation:<a attribut1="…" attribut2="…" …>TEXTE</a> Exempled’attribut:href («hypertextreference»)<a href="http://www.univ-paris8.fr">Mon université</a>
• <h1> – Signifie«heading1»(titrede1erniveau)– Utilisation:<h1>Mon titre entête</h1>
• <br /> – Signifie«break»(pourcasseruneligne=retourchariot)– Utilisation:<p>Ma phrase<br />sur 2 lignes</p> – Ils’agitd’unebaliseautofermante:nepasoublierlespace–slashavantdefermerlechevron(>)
3
Les5règlesdesyntaxeXHTML
• Toutebaliseouvrantedoitobligatoirementêtrefermée
• Lesbalisesetlesattributsdoiventêtreécritsenminuscules
• Lesvaleursdesattributsdoiventêtreentreguillemetsouquotes(apostrophes)
• Chaqueattributdoitavoirunevaleur• Chaqueélémentdoitêtreimbriquécorrectement
4
Arbrelogiqued’undocument• représentationpermettantdecomprendrelastructure
d’undocument(prendrel’exempledeladiapo14)• permetdebiencomprendrecommentsélectionnertelou
telélémentdansledocument,quecesoitenCSSouenJavascript.
• représentationtrèsintuitiveissueduvocabulairegénéalogique:– ROOT:Racinedel'arbre.C'estl'élémentdebasedudocumentXML;pourundocumentXHTML,c'esthtml;c'estl'élémentquiapparaîtdansl'instructionDOCTYPE.
– NODE:Unnœudestunélémentdel'arbre,unebalise.– PARENT:UnélémentPestditparentdeEs'ilestliéparuneouplusieursbranchesàcetenfantets’ilestplushautd'unniveaudanslahiérarchie(parentdirect)oudeplusieursniveaux(parentindirectougrand-parent...);unnœudn'aqu'unseulparentdirect.Parexemple,htmlestleparentdebody.
5
Arbrelogique(suite)– CHILD,CHILDREN:UnélémentEestditenfantdePs'ilestdirectementliéparunebrancheàsonparent,etplusbasd'unniveaudanslahiérarchie;parexemple,bodyestunenfantdehtml.Onparleaussidepetits-enfants,d'enfantsdirectsouindirects.
– Descendant:Lesenfants,petits-enfants,etc.donctouslesélémentsquisontliésàunparentdonnéparunesuccessiondebranchesdel'arbresontlesdescendantsdeceparent.Dansundocument,touslesnœudsdel'arbresontdescendantsdelaracinedel'arbre.
– LEAF:Feuille.C'estunnœuddel'arbrequin'apasd'enfant.EnXML/XHTML,ceseragénéralementdutexte(noté#text),oubienunélémentvideousimple:c'estlamêmechose,cesontcesbalisesquin'ontpasdemarqueurdefermeture.
• Lavisualisationdel'arbrepeutsefairesurpapieraveclaracineenhautetàgauche,ouàl’aided’outilscommel’inspecteurDOM(cf.plusloin)
6
XHTMLetsémantique• Sémantique=sensdonnéàunélémentdelapageweb• Ici,aucunsensdonné:
– <div>Chapitre 1 : Le xhtml et la sémantique</div> <div>Le xhtml doit donner du sens !</div>
• Là,ilyaunsens:– <h2>Chapitre 1 : Le <abbr>xhtml</abbr> et la
sémantique</h2> <p>Le <abbr>xhtml</abbr> doit donner du sens !</p>
• Ondonnedusenspourmieuxséparerlefonddelaforme:– pouraméliorerl'accessibilité:ex.unappareildesynthèsevocalsauraainsi
quetelélémentestletitredelapage,celui-làlesous-titren°1etcetexte-cilepremierparagraphedusous-titren°1.Ilsauraaussiqueces5lettressontuneabréviation,etc.
– pouraméliorersonréférencement:unmoteurderecherchenepeutsavoircequeteloutelélémentdelapagereprésente,sansaide.Entourerunélémentparunebalisespécifiquepermetd’indiqueraurobotcequereprésentecetélément.Lemoteurpourraainsimieux"comprendre"lesensd’unepageetmieuxlaréférencer. 7
XHTMLetaccessibilité• XHTMLpermetd'améliorerl'accessibilitédessites• Accessibilité=capacitéàaccéderunsiteInternetvian'importe
quellogicielcapabledenaviguersurunsiteWeb:– lesnavigateurswebtraditionnels(Firefox,InternetExplorer,Safari...)
etlesnavigateursdestéléphonesmobiles(AndroidBrowser,OperaMini,SafariMobile,Chrome,GoogleGoggles…)
– lesappareilsdesynthèsevocaleutiliséesparleshandicapés,– lenavigateurd’unréfrigérateur(domotique),– lenavigateurintégréautableaudebordd’unevoiture(informatique
embarquée)...• UtilitéduXHTML:réaliserunetunseulsite,demanièreànepas
déclinerautantdesitesqu'ilexistedelogicielscapablesdenaviguersurdespagesWeb=>responsiveWebdesign(cf.slide58)
8
XHTML≠CSS• NepasconfondreXHTMLetCSS
– lesCSSsontdesstylesquidéfinissentlaprésentationdelapage– alorsqueXHTMLdéfinitlastructuredelapage
• Structureetprésentationsontdifférentsmaiscomplémentaires
• Danslecodesuivant<abbr>XHTML</abbr>,– labalise<abbr>définitlastructuredelapageetsasémantiqueenspécifiantqueXHTMLestuneabréviation
– grâceauxstylesCSS,onpeutappliqueruneprésentationparticulièreenaffichantsystématiquementengras,parexemple,touslesmotsentourésdesbalises<abbr>et</abbr>(voirlapartieducoursdédiéeauxCSS)
9
DoctypesXHTML• LedoctypeestlaDTD(DocumentTypeDeclaration:déclarationdetypededocument)delapageweb
• Ilindiquequellessontlesrèglesàsuivre.• Ilestdéclarédansla1religned'instructiond’unfichierXHTML1.0
• 3doctypesontpossibles:– XHTML1.0Transitional– XHTML1.0Frameset– XHTML1.0Strict(préféré)
10
XHTML1.0Transitional• Instruction:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• respecteles5principesdebaseduXHTML• acceptelesbalisesetlesattributsagissantsurla
présentationdelapageweb.Exemple:<font>,<center>,…• accepted'utiliserl'attribut"target"surlesbalises<a>• accepted'utiliserlabalise<iframe>• maiscesbalisesetattributssontàdéconseillerd'unpoint
devueconceptuel.Ilfauttoujoursbienséparerlastructuredelapage(XHTML)desaprésentation(CSS)
• =>Transitional:déconseillé
11
XHTML1.0Frameset• Instruction:<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• respecteles5principesdebaseduXHTML• acceptelesbalisesetlesattributsagissantsurlaprésentationdela
pageweb.Exemple:<font>,<center>,…• accepted'utiliserl'attribut"target"surlesbalises<a>• accepted'utiliserlabalise<iframe>• maiscesbalisesetattributssontàdéconseillerd'unpointdevue
conceptuel.• balise<body>estremplacéeparlabalise<frameset>quicontient
lesbalises<frame>• =>Frameset:déconseillé
12
XHTML1.0Strict• Instruction:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• respecteles5principesdebaseduXHTML• n’acceptepaslesbalisesetlesattributsagissantsurlaprésentationdelapageweb.(<font>,<center>,…)
• n’acceptepasd'utiliserl'attribut"target"surlesbalises<a>
• n’acceptepasd'utiliserlabalise<iframe>• =>Strict:préféré
13
TemplatepourunepageenXHTML1.0Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="kw1,kw2" /> <meta name="description" content="Description de la page" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="fr" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
14
TemplatepourunepageenXHTML1.1
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head>
<title>Document XHTML minimal</title> </head>
<body>
... </body>
</html>
• NB:lechoixd'encodageesticilejeudecaractèresUTF-8,l'encodagerecommandé• =>Cechoixécritdanslecodeimpliquequelefichiersoiteffectivementencodé
enUTF-8(sansBOM,sichoixpossible)aumomentdel'enregistrement! 15
XHTML1.0etXHTML1.1• Onparlede2versions:XHTML1.0etXHTML1.1• Pourlemoment,oncodeenXHTML1.0(siteduW3CestenXHTML1.0):ilfautbien
préciserlebondoctypedanslefichier• Différencesen1.0et1.1:
– XHTML1.0accepted'êtreinterprétécommeundocumentHTML.C'estpourcetteraisonquesontypemimeest"text/html".<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
– XHTML1.1n'acceptepasd'êtreinterprétécommeundocumentHTML.Pourcetteraison,sontypemimedoitêtre"application/xhtml + xml".<meta http-equiv="Content-type" content="application/xhtml + xml ; charset=ISO-8859-1" />
• Laplupartdesserveurssontconfiguréspourenvoyerducontenudetype"text/html"lorsqu'ils'agitdefichiers".php",".html",".asp"...Ilfautdoncmodifierlesdonnéesenvoyéesparleserveur,soitdirectementsurleserveur,soitviaunlangageserveur(voirdiaposuivante).Exempleenlangagephp:header('Content-type:application/xhtml+xml');
• NB:letypemime"application/xhtml+xml"n'estpassupportépartouslesnavigateurs.16
Langageserveur?• encoreappelélangagedescriptcôtéserveur(server-sidescripting)• langagedeprogrammationquiinteragitavecunserveurHTTPpour
produireunepageWebdynamique• estinterprétéparleserveurquigénèreensuiteducode(XHTML,CSS,
Javascript…)interprétésurl'ordinateurduvisiteur(=client)• nécessairepourutiliserunebasededonnées• indispensablepourlamajoritédesscriptscomplexes• Exemplesdelangageserveur:
– PHP(«PersonalHomePage»puis«PHP:HypertextPreprocessor»)– ASP(ActiveServerPages,Microsoft)– CGI(CommonGatewayInterface)– JSP(JavaServerPages)
17
Serveur,client,Kesako?• Serveur:dispositif(hardwareousoftware)quifonctionneen
permanenceetquisaitrépondreàdesrequêtesdeclients(selonuncertainprotocoleréseau)
• Requêtespeuventêtrepour– consulteruncourrierélectronique(serveurdemail)– accéderàuncontenuduWWW(serveurHTTP)– accéderàunfichier,àunebasededonnées,etc.
• Client:logicielquienvoielesrequêtes.Soitlelogicielestmanipuléparunhumain,soitilestautonome(c’estunbot–vientderobot)
1.Requête:demanded’unepageHTML
2.Réponse:envoidelapageHTML
ClientServeur 18
Dialogueclient/serveur:autrescas• CasPHP
• CasJavascript
Source:www.enseignement.polytechnique.fr
Source:www.siteduzero.com19
Exemple:affichagedeladate
=>lesdeuxlangagesdonnentexactementlemêmerésultat,sitoutefoisleclientsupporteetaactivéleJavaScript.
Langage serveur (PHP) Langage client (JavaScript)
Page créée au départ
Nous sommes le <?php echo date('j/m/Y'); ?>
<script type="text/javascript"> today = new Date(); document.write("Nous sommes le ", today.getDate(), "/", today.getMonth()+1, "/", today.getFullYear()); </script>
Code source de la page envoyée au navigateur
Nous sommes le 9/10/2018
<script type="text/javascript"> today = new Date(); document.write("Nous sommes le ", today.getDate() ,"/", today.getMonth()+1, "/", today.getFullYear()); </script>
Résultat dans le navigateur Nous sommes le 9/10/2018 Nous sommes le 9/10/2018
20
Les3typesdebalisesenXHTML
• EnXHTML,ilexiste3typesdebalises:– lesbalisesdetypeBLOC– lesbalisesdetypeENLIGNE– lesbalisesdetypeAUTOFERMANTE
21
BalisesdetypeBLOC• boitesd'élémentsquipeuventcontenirdesélémentsdetypefeuille(commedutextenoté
#textoudescommentairesnotés#comment),desbalisesdetypeENLIGNE,desbalisesdetypeAUTOFERMANTEetd'autresbalisesdetypeBLOC.
• LesbalisesdetypeBLOCsepositionnenttoujourslesunesendessousdesautres.Exemple:<div>J'aime Paris 8</div><div>Vive Paris 8</div> affichera:
J'aimeParis8 ViveParis8
• Leurlargeurnative(=pardéfaut)estcelledel'élémentquilescontient.Exemple1:Labalise<div>occuperatoutelalargeurdelapage(carparent=body)<body> <div>Vive Paris 8</div> </body>
• Exemple2:Labalise<div>enfantoccuperatoutelalargeurdelabalise<div>parent.<div> <div>Vive Paris 8</div> </div>
22
BalisesdetypeBLOC(suite)
• ListedesbalisesBLOC: <address> , <blockquote> , <body> , <dd> , <div> , <dl> , <dt> , <fieldset> , <form> , <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , <head> , <hr /> , <html> , <li> , <map> , <noscript> , <ol> , <p> , <pre> , <script> , <style> , <table> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr> , <ul> 23
BalisesdetypeENLIGNE• nepeuventcontenirque
– desélémentsfeuilles,– d'autresbalisesENLIGNE,– maispasdebalisesdetypeBLOC.
• LestextescontenusdansdesbalisesENLIGNEsepositionnenttoujourslesunsàcôtédesautres(contrairementauxBLOC)
• LesbalisesdetypeENLIGNEn'ontpasdedimension(aucunelargeurnihauteur)
• ListedesbalisesENLIGNE: <a> , <abbr> , <acronym> , <area /> , <bdo> , <br />,
<button> , <caption> , <cite> , <code> , <del> , <dfn> , <em> , <img /> , <input /> , <ins> , <kbd> , <label> , <legend> , <link /> , <meta /> , <object> , <optgroup> , <option> , <param /> , <q> , <samp> , <select> , <span> , <strong> , <sub> , <sup> , <textarea> , <title> , <var>
24
BalisesdetypeAUTOFERMANTE
• balisesquisontouvrantesetfermantesàlafois• ellesn’ontdoncpasdecontenu• onfermelabaliseenajoutantunespaceetunslash(/)àlafindelabalise
• lesbalisesAUTOFERMANTESsont:– soitdesbalisesdetypeBLOC(exemple:<hr/>),– soitdesbalisesdetypeENLIGNE(exemple:<img/>).
• ListedesbalisesdetypeAUTOFERMANTE<area/>,<br/>,<hr/>,<img/>,<input/>,<link/>,<meta/>,<param/>
25
ConseilspourbienstructurerledocumentXHTML
• nepasutiliserlesbalisesetattributsobsolètes– Balisesdépréciées:<basefont>,<center>,<font>,<s>,<strike>,<u>– Attributsdépréciés(parbalise):
<a>(lesattributstarget)<body>(lesattributsalink,background,bgcolor,link,vlink,text)<caption>(lesattributsbgcolor,height,nowrap,width)<hr/>(lesattributsclear,noshade,size,width)<img/>(lesattributsborder,hspace,vspace)<li>(lesattributscompact,type)<object>(lesattributsborder,hspace,vspace)<ol>(lesattributsstar,value)<pre>(lesattributswidth)<table>(lesattributsbgcolor,height,nowrap,width)<tbody>(lesattributsbgcolor,height,nowrap,width)<td>(lesattributsbgcolor,height,nowrap,width)<tfoot>(lesattributsbgcolor,height,nowrap,width)<thead>(lesattributsbgcolor,height,nowrap,width)<th>(lesattributsbgcolor,height,nowrap,width)<tr>(lesattributsbgcolor,height,nowrap,width)
26
Conseils(suite)Utiliserlescommentaires• Syntaxed’uncommentaire:balisespécialecommençantpar<!--etse
terminantpar--> • Pourquoicommenter?
– Pourexpliqueretclarifierlastructuredudocumentnotammentlorsd'imbricationscomplexesdebalisesetlorsquelenombredelignesdecodeestimportant.
– Pourpermettrelatransmissionducode(onécritpourêtrerelu!)
• lescommentairesnesontpasinterprétésparlesnavigateurs• Exemple:
<!-- Debut de la zone de recherche --> <div> … </div> <!-- Fin de la zone de recherche -->
27
Conseils(suite)• Utilisercorrectementlesattributs‘id’et‘class’
– lesbalisesXHTMLpeuventêtrenomméesvia2attributs:idet/ouclass– =>onpeutensuiteappliquerdesstylesCSSauxbalisesainsinommées
• L'attributidpermetd'identifierunebalised'undocumentXHTMLdemanièreunique
• Deuxbalisesnedoiventpasavoir2attributsidayantlamêmevaleurauseindumêmedocument.Exemple:<div> <div id='peinture'> <p>Vermeer, en peignant La jeune fille à la perle…</p> </div> </div>
DansunfichierCSSexterne,onpourraainsimodifierlacouleurdefontdu<div>vialasyntaxesuivante:#peinture {background-color:#ff0000;} 28
Conseils(suite)• L'attributclasspermetdenommerungroupedebalisesauseind'unmême
documentXHTML.• =>Plusieursbalisespeuventainsiavoirunattributclassayantlamême
valeur.Exemple:<div class='peinture'> <div class='peinture'> <p>Vermeer, en peignant La Jeune fille à la perle…</p> </div> </div>DansunfichierCSS,onpourramodifierlacouleurdefonddes2<div>:.peinture {background-color:#ff0000;}
29
Conseils(fin)
• validersoncodeavecdesvalidateurs– UnvalidateurXHTMLestuneapplicationquipermetdevaliderlespageswebauformatsouhaité:XHTMLstrict1.0,XHTMLtransitional1.0,etc.
– Exemplesdevalidateurs(enligne):• http://validator.w3.org/• http://www.validome.org/lang/fr
– LesIDE(IntegratedDevelopmentEnvironment)comprennentgénéralementunvalidateur:• Netbeans• Dreamweaver(payant…)
30
DOM(DocumentObjectModel)
• L'outilDOMInspectordeFirefox,quisetrouvedanslemenuTools/Outilsdunavigateur,génèrelavisualisationrelativeàlapagecourante.
• LeDOMInspectoroffreplusieursvisualisationsrelativesaudocument,parexemplecelleliéeauDOMNodes:l'arbrelogiqueàgauche(choisirDocument-DOMNodes,danslalisteenhautdecevolet),lesinformationssurlesnœudsdel'arbre(choisirObject-DOMNode,danslalisteenhautdecevolet).
• Cesinformationsrenseignentsurletypedenœud,lesattributsassociésetleurvaleur
31
Vocabulairesurledocument
• Les5règlesdesyntaxerésumenttoutcequidoitêtreconnupourécrireundocumentbienformé.
• Undocumentestvalidequandlesrèglesd'imbricationdebalisesetd'utilisationdesattributssontappliquées
• Undocumentestcorrectquandlasémantiqueestrespectée
• Undocumentestlisiblesil'onindentelecodecorrectementetquel'oncommente.
32
Insertiond’images• L'imageintroduiteparlecodeXHTMLdoitavoirunrôlesémantique:
illustrationd'untexte,galeried'images,imagepourlanavigation,imageréactive,unboutonimage...
• Dèsquel'imageestunélémentdécoratif,elledoitêtreintroduiteaumoyendeCSS,entantqu'imagedefondpourunblocouunebarrehorizontale,unevarianteimagedepucedeliste,unedécorationdeboutondeformulaire,...
• Uneimagedoitêtrelégère(bandepassante):résolutiondoitêtrejustesuffisante
• AdobePhotoshopoffrelapossibilitéd'enregistrerpourleWeb.Larésolutionutilepourunaffichageàl'écranestde72dpi(elledoitêtresupérieurepourl'impression).
• Latailledesimageslesplusgrandesdoitresterdel'ordredelacentainedeko;elledoitêtrenettementplusfaiblepourlespetitesimages!Onveilleraànepascréerdepagesavecunpoidstotald'imagesexcessif.Lemécanismedesminiaturesdoitentoutcasêtreutilisépournepasforcerl'utilisateuràtéléchargerdesimagesdetailleimportante.
33
Insertiond’images(suite)
• IlfauttoujourstenircomptedesutilisateursduWebquiutilisentdesaccèsàtrèsfaibletauxdetransfert:télécharger500ko=8*500=4000kbitparpageprend(environ)4000/28.8~140secondes,plusdedeuxminutes,avecuneconnexionà28.8kbit/s.
• Attention,seulslesnavigateursgraphiquespermettentdevisualiserlesimages;ilfautpenserànepaspriverlesautresvisiteursducontenutantquec'estpossible
34
Formatd'imagespourleWeb
• Différentsformatsd'imagessontreconnusparlesnavigateurs:– lesformatsGIFetJPEGsontlesdeuxformatsquisontutilisésdepuisdesannéesetnesouffrentd'aucunproblèmedecompatibilité,
– leformatPNGestapparuplustardivement,maisesttrèsbiensupportéaujourd’hui.
• Cestroisformatssontdetype«imagesexpriméesparleurspixels»
• Ilexisteégalementdesgraphiquesauxformatsvectoriels:parexemple,leformatSVGfondésurXML
• Attention,danslesURL,lacasseestimportante;ilserabondepréférerécriresystématiquementnosextensionsdefichiersenminuscules.
35
Extensionsd’images:GIF,JPEG,PNGLesextensionspossibles,leurtypeMIME,leurscaractéristiques,etles
utilisationsindiquéesdecesdifférentsformats:• Format:GIFExtension:.gifTypeMIME:image/gifLeformatGIF,
pourGraphicsInterchangeFormat,estunformatdehautecompressiond'images
• Format:JPEGExtension:.jpg,.jpegou.jpeTypeMIME:image/jpegJPEG,pourJointPhotographicExpertGroup,estassociéàunprocédédecompressionpluscomplexequeceluidesimagesGIF;procédéégalementutilisépourlacompressionvidéoMPEG.– Cettecompressionestdestructive:ilyaunepertedequalitéquiaugmente
avecletauxdecompression.– Leformatnegèrepaslatransparence,nil'animationmaisgère
l'entrelacementetdoncl'affichageprogressifdel'imageaufilduchargement,quidevientutilepourdesimagesdetailleplusimportante.
• Format:PNGExtension:.pngTypeMIME:image/pngLeformatPNGsignifiePortableNetworkGraphic.SpécialementconçupourleWebparleW3C.Rassemblelesavantagesdesdeuxformatsprécédents. 36
SVG• Format:SVGExtension:.svg,.svgzTypeMIME:image/
svg+xml– LeformatSVG(ScalableVectorGraphics)estunformatd'image
vectorieletnondetypebitmapcommelesprécédents.– CommelePNG,c'estunformatlibrededroits,introduitparune
spécificationduW3C.– IlestfondésurXML,cequiimpliquequelesdonnéessontdetype
texteetnonbinaire:lesélémentsgraphiquessontdécrits(dimensions,couleur,position,remplissagedessurfaces,...),structurés,...
– Ilspeuventêtremanipuléspardesscripts(modificationsd'élémentsgraphiques,...).
– Onpeutassocierdesliensauxélémentspourcréerdesimagesréactives.
37
SVG(Suite)– Onpeutrendrecesimagesdynamiques(animées)etyassocierduson.– Aussi,latailled'unfichiervectorielestpratiquementsystématiquementplus
légèrequ'unfichierbitmap.– Larésolutionestunecaractéristiqueabsente:onpeutagrandiruneimage
vectoriellesansdégradation,pixellisation– L'intégrationd'imagesSVGsefaitégalementàl'aidedelabaliseobjecten
indiquantunmessageencasd’erreur:<objectdata="image.svg"type="image/svg+xml"width="200"height="200">ImagevectorielleauformatSVG.Problèmedansl’affichage.</object>– Onpeutégalementutiliserdirectementlabalisesvgpourcréerdanslapage
sonimage.Exemple:<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red"/></svg>
38
Labaliseimg• Labalise<img/>estuneimageintégréedanslapagewebxhtml
(balisedetypeENLIGNE),ellepeutdoncêtreintégréedansleflotdutexte.Onnepeutpasrencontreruneimageisoléedanslebody.
• Labalise<img/>doitobligatoirementcontenirunattributsrc(source)etalt(textealternatif)
• NB:<img/>nepeutpasêtreimbriquéedansunebalise<pre>.• Utilisation:<div><imgsrc="/image/w3c.gif"alt="LogoW3CXHTML1.0valide"/></div>affichera:(àcondition,biensûr,quel’arborescencedusitecontiennebienunrépertoire«image»etlefichiergifenquestiondedans)
39
Labalise<map>• Labalise<map>estuneimageréactivedelapagewebxhtml(balisede
typeBLOC).• <map>regroupelesdifférenteszonesréactivesd'unemêmeimage.Elle
regroupedonclesbalises<area/>.• <map>possèdeobligatoirementunidentifiant(attributid).• L'attributnamepermetdefaireréférenceàl'imagesurlaquelleonveut
intégreruneouplusieurszonesréactives.Attention,nameestdépréciéenXHTML.EnHTML5,siles2attributsnameetidsontutilisés,ildoiventavoirlamêmevaleur.
• NB:lavaleurdel'attributiddoitêtreidentiqueàcelledel'attributname.• Utilisationpossible:
<imgsrc="/image/w3c.gif"alt="LogoduW3C"usemap="#logo_w3c"/><mapname="map_logo_w3c"id="logo_w3c"><areashape="rect"coords="0,0,31,31"href="http://www.w3c.org"
alt="lapartiegauchedulogoduw3c"/></map>
40
Imagesentantqueliens• L'utilisationd'imagesentantquelien:lecontenudelabalise<a>peutêtreune
image.Onobtientdonclecode:<a href="../index.html" class="lien-navigation" title="vers page d'accueil"> <img src="img/image.png" class="image-lien" title= "Accueil" alt="Page d'accueil" width="50" height="66" /> </a>
• L'imageliens'intègredansleflotdutexte,commeunlienclassique,oucommeuneimage,àl'endroitoùelleestintégréedanslecode.
• Sil'URLestincorrectousil'imageestindisponible,adisparu,celaferaapparaître,àlaplace,letextealternatifdel'image:ildoitdoncêtrechoisidanscecontexted'image-lien,demanièreàindiquerlanaturedulien,commeonlefaisaitpouruncontenutexted'unebalisea.
• Ilnefautpashésiteràemployerdestitle;onpeutobserverquesurlabordure,c'estl'infobulledulienquis'affiche,surl'image,c'estletitredel'image.Lesclassessontchoisiespourrappelerlerôledeséléments.
41
HTML5etXHTML• LechoixdeparlersurtoutdeXHTMLs’expliqueparlefaitqueHTML5est
pluslaxistequeXHTML(<head>et<body>peuventêtreimplicites,abandondesnotionsdeblock(BLOC)etinline(ENLIGNE)enCSS...)
• MaisHTML5estintéressantcarilaétépensépourêtreplusinteractifavecsesAPIs(<canvas>,<audio>,<video>,glisser-deposer...)
• <canvas>:balisequidéfinitunezonerectangulairesurlapage.Pardéfaut,uncanvasn’apasdebordureetpasdecontenu.– Exemple:
<canvasid="monCanvas"width="200"height="100"></canvas>
• <audio>:pourjouerunfichieraudio– Exemple:<audiocontrols>
<sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudioelement.</audio>
• <video>:mêmechosepourlavidéo 42
HTML5• Letableausuivantrécapitulelesnouveauxélémentsdesectionetleurusagele
pluscommun,telquedécritparlaspécification.
43
Nom Détails
<section> Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web
<article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav> Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)
<aside> Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header> Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
<footer> Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).
HTML5(suite)• Iln’yaqu’uneseulefaçondedéclarerundocumentHTML5:
• <!DOCTYPE html>(àmettreentoutepremièrelignedudocument)
• HTML5n’estpasfondésurSGML,contrairementàXHTMLetàHTML4.01,doncnenécessitepasderéférenceàuneDTD(commeonapulevoirprécédemmentpourXHTML)
• HTML5estcompatibleavecXHTMLetautorisedesdocumentsXHTML5
• Ainsi,HTML5spécifiedeuxsyntaxes:HTML5etXHTML5
44
XHTML5• Ainsi,pourdéclarerundocumentXHTML5,deuxsolutionssontpossibles:
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">oubien<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>...</title><meta charset="UTF-8" />
</head>...
45
Historique• CSS:CascadingStyleSheets• Versionactuelle:CSS3,bientôtCSS4(encoursdedéveloppement)• Touslesnavigateursnesupportentpasencorelessélecteursdéveloppés
dansCSS4:voirtestici:http://css4-selectors.com/browser-selector-test/
47Source:SergeyMavrody
CSS
• Une«feuilledestyleencascade»estunensemblederègles.
• Chaquerèglecomprendunsélecteuretundescripteur:• selecteur {descripteur} • lesélecteurdésignelesélémentsXHTMLsurlequels
s’appliquentlesrèglesdéfiniesdansledescripteur• descripteur:suitederèglesséparéesparun; • Chaquerègleestdelaforme:
propriété : valeur;
48
Quefaitl’exempleci-dessous?/* mystyle.css */ h1 { text-align : center; } h2 { color : #0000FF; } p { text-indent : 2em; } p::first-letter { font-size : 120%; }
49
AppelduCSSdepuisXHTML
• Déclarationdanslabalise<head> :<link href="adresse" type="text/css" title="titre" rel="stylesheet"/>
• LabaliselinkliecefichierXHTMLàlaressourceCSSdontl’adresseest,parexemple,l’URLrelatifsuivant: css/screen.css
– Ici,c'estunemiseenpageprévuepourl'affichageàl'écran,nouspourrionsendéfiniruneautrepourl'impressionoupourunautretypedemédia.
50
DéclarationduCSSdirectementdansXHTML
• Ilestpossible,maisilvautmieuxl’éviter,d’écrirelecodeCSSdirectementdanslefichier(X)HTML:– Utilisationdelabalise<style> :
<style type="text/css"> /* css */
</style>
• Ilvautmieuxl’éviterpourcausedelisibilitéetderéutilisationducodeCSS(pourd’autresfichiers(X)HTML)
51
Autresélémentsimportants• DéclarationderèglespouruneclasseenCSS:element.nom /* element = p, table, td, span, ... */ { /* nom = nom de la classe (au choix) */ propriete: valeur; propriete: valeur; ... }
• Pourdéclarerdesrèglespouruneclassevalidepourtousleséléments:.nom { propriete: valeur; propriete: valeur; ... }
• Lesvaleurspardéfaut(pasdeclasse):element { propriete: valeur; propriete: valeur; ... } 52
Autresélémentsimportants(2)• DéclarationderèglespourunidenCSS:element#nom-id /* element = p, table, td, span, ... */ { /* nom-id = id (au choix) */ propriete: valeur; propriete: valeur; ... }
• Déclarationderèglespourlenœudfilsd’unobjetidentifiéparunid:p#nom-id a { background-color: red; }
ExtraitducodeHTMLassocié:... <p id="nom-id"> <a href="http://www.w3c.org">Lien vers le site du W3C</a> </p> ...
53
Autresélémentsimportants(3)
• Déclarationderèglescommunesàplusieurséléments:onindiquelesélémentsàlasuite,enlesséparantpardesvirgules:
element1, element2, element3 { propriete: valeur; propriete: valeur; ... }
• Exemple:
p, h1, h3 { background-color: yellow; color: red; }
54
Autresélémentsimportants(4)Pseudo-classesetpseudo-éléments
• Pseudo-classe:notation: – C’estunmot-clef,précédéd’un‘deux-points’,ajoutéaprèsunsélecteurpour
spécifierquel’onsouhaitedonnerunstyleàl’élémentsélectionnélorsqu’ilestdansuncertainétat.
– Parex.,onpeutvouloirstylerunélémentseulementlorsqu’ilestsurvoléparlasouris,oubienstylerunélémentquiestle1erfilsdesonparentdansleDOM.
– Exemples:• :active • :checked • :nth-child() • :first • :hover
55
Autresélémentsimportants(5)Pseudo-elements::• Ilsressemblentauxpseudo-classes.Ilssontégalementdesmots-clefs,
précédésparundouble‘deux-points’,quipeuventêtreajoutésàlafind’unsélecteurpoursélectionnerunecertainepartied’unélément.
• Exemples:– ::after – ::before – ::first-letter – ::first-line – ::selection – ::backdrop
• LaspécificationCSS3préfixelespseudo-élémentsavecundoubledeux-pointsaulieud’unseul.Donc:first–letterdevient::first-letter,parexemple.IE8etlesversionsantérieuresnesupportentpaslepréfixedoubledeux-points.
56
Bootstrap• ensembled’outilsopensource(frameworkd’interface)pourdévelopper
enHTML,CSS,JS.• ConsisteenunensembledefeuillesdestyleCSSécritesenLess• Less:
– estunpréprocesseurCSS(quigénèredynamiquementduCSS)permettantd’utiliserdesvariables,mixins,etc.
– Ex.variables:@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
57
Bootstrap– Ex.mixin(«appeler»dansuneclassedespropriétésdéfiniesdansuneautre
classe):.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
.bordered;
}
• Fonctionnement:– Unefeuilledestyleprincipale(appeléebootstrap.less)englobeles
feuillesdestyledescomposants– Lesdéveloppeurschoisissentlescomposantsqu’ilssouhaitentenmodifiantla
feuilleprincipale– Bootstrapaunsystèmedegrillepouragencerl'aspectvisueldelapageweb
58
Bootstrap:grille• découpageencellules(row,col)avec12colonnes:
• Onorganiselecontenuenutilisantpourchaqueélémentuneouplusieurscellules:
59Source:https://openclassrooms.com/courses/prenez-en-main-bootstrap/une-grille
Bootstrap:lesmediaqueries• Ellespermettentdeciblerledeviceduclient:
– Ordinateur– Tablette– Smartphone– …
• pourmieuxgérerl’affichagedelapageselonlarésolution,l’orientation,latailledel’écran,etc.=>responsivedesign
60Source:https://openclassrooms.com/courses/prenez-en-main-bootstrap/une-grille
Bootstrap:lesmediaqueries
• Ellesutilisentlarègle@media – Ex:Silafenêtredunavigateuraunetailleinférieureà500pixels,alors
lefondd’écrandevientbleuclair:@media only screen and (max-width: 500px) { body { background-color: lightblue; } }
61
Source:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Source:https://openclassrooms.com/courses/prenez-en-main-bootstrap/une-grille