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

CSS

M2G2M,Univ.Paris8parIsisTRUCK

Inspirédediversessources

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