Les standards du Web Journée 2

Transcription

1 LesstandardsduWeb Journée2 PatrickVINCENT

2 Partie1 LespagesHTML basesthéoriquesetpratiques

3 Principes dulangagehtml

4 Définition HTML:H HTML:HyperT ypertextm extmarkupl arkuplanguage LangageuniverseldeconceptiondepagesWebcrééen 1998parleW3C(WorldWideWebConsortium) Hypertexte:permetdecréerdeslienshypertextesvers Hypertexte:permetdecréerdeslienshypertextesvers desressourceslocalesoudistantes. C estunlangagedemarquage dedocument,ilpermet C estunlangagedemarquagededocument,ilpermet dedécrirelastructured undocumentélectroniquesous formelisibleparunêtrehumainetinterprétableparune machine. XHTML=réécrituredel'HTMLvisantàassurerune transitionversl'xml

5 Pasdemiseenformedéfinitive HTMLestunlangagequidécritlecontenu,la HTMLestunlangagequidécritlecontenu,la structurelogiqueetla présentationglobaled un d un structurelogiqueetlaprésentationglobale documentmaispassonaspectfinalàl écran,qui documentmaispassonaspectfinalàl écran,qui dépenddel'outilutilisé(écran,synthétiseurvocal, imprimante). Différentd'undocumentPDFparexemple. Ex:l'utilisateurpeutmodifieraumomentde l'affichageplusieurs paramètresdeprésentation. l'affichageplusieursparamètresdeprésentation. DansFirefox: Affichage>Tailledutexte Affichage>Styledelapage

6 HelloWorld page1.html Ouvrirunbloc note,taperetenregistrerlefichier page1.htmlsuivant: page1.htmlsuivant: <html> <head> </head> <body> HelloWorld! </body> </html> OuvrircefichieravecvotrenavigateurFirefox Vérifierlecodesourcedecefichier

7 Structurationavecdesbalises LesfichiersHTMLsontconstituésdetexte. Pourdéfinirlastructuredudocument,onutilisedes balisesdélimitéesparlescaractères <et> balisesdélimitéesparlescaractères< et> Baliseouvrante:<balise> Baliseouvrante:<balise> Balisefermante:</balise> Balisefermante:</balise> Lesbalisesdéfinissentunepropriétéqu'elles appliquentaucontenuqu'ellesencadrent. Unebaliseouvertedoittoujoursêtrefermée. <balise1>contenu</balise1>

8 Exemples Titredeniveau1 Miseenintonation Paragraphe <h1>titre</h1> <strong>important</strong> <p> textetextetexte textetextetexte </p>

9 Lesbalisesauto fermantes Certainsélémentsappelésélémentsvidesne marquentpasdutexte. Iln ontpasdecontenu,lesbalisesdedébutetdeﬁn peuventêtrecombinées: <br></br> = <br/> Ils'agitlaplupartdutempsdebalisesnécessitantdes attributs: <imgsrc="

10 Ajoutd'attributs Desattributspeuventêtreajoutésàunélément Ilsprécisentcelui ci(apparence,comportement...) Ilsprécisentcelui ci(apparence,comportement...) sansfairepartiedesoncontenu Lenomdel attributapparaîtaprèslenomd élément danslabaliseouvranteetestsuividusigne= danslabaliseouvranteetestsuividusigne=puisde lavaleurdel attributentreguillemets. Lesattributsd unélémentformentunensemble(nom unique,pasd ordre). <ahref="

11 Imbrication Lesélémentspeuventêtreimbriquéslesunsdansles autres: <p> <strong> textetextetexte </strong> </p> Ilnepeutpasyavoirdechevauchement.Tout élémentdoitêtreferméavantceuxquilecontiennent. Undocumentainsistructuréformedoncunarbredont lesnœudssontlesélémentsetlesfeuillesdes fragmentsdutexte.

12 TP page2.html Complétervotrepageavec: unebalisedetitre1<h1>autourdehelloworld deuxparagraphesdevotrechoix<p> lamiseenintonation<strong>d'unepartiedutexteà l'intérieurd'unparagraphe Vérifierlerésultatlocalementdanslenavigateur Envoyerlapageenligneàlaracinedevotresiteen FTP l'imagedel'écureuilspipàl'intérieurd'unparagraphe <img/> Laconsulterenligne

13 Structured'undocument <html> <head> <title>mapage</title> <metaname="author"content="patrickvincent"/> </head> <body> <h1>helloworld!</h1> <p> Nousavonstrouvélaphotod'unanimal. Ils'agitd'un<strong>ecureuil</strong> <imgsrc=" </p> <p>pourensavoirpluscliquer <ahref=" </p> </body> </html>

14 Troisélémentsdebase <html>...</html>:ledocumentcomplet <html>...</html>:ledocumentcomplet <head>...</head>:l en tête <head>...</head>:l en tête typededocument typedecaractères motsclés titredelafenêtre <body>...</body>:lecorpsdudocument <body>...</body>:lecorpsdudocument blocs contenu:texte,tableaux,images,sons... inclusiond'applications:flash,javascript,java

15 Structurearborescente UndocumentHTMLpeut êtrelucommeunarbre L ordredesnœudsetleur imbricationprécisentla structuredudocument Cettestructureest exploitable: html head title body meta h1 p strong Quelssontlestitreetauteurdu document? Combieny a t ildeparagraphes? Quelestletitredeniveau1qui précèdele1erparagraphe? Utilisépourle DOM (DocumentObjetModel) p

16 Interprétation LedocumentHTMLpeutêtrevisualisédansun navigateur,lastructurelogiqueestinterprétéepour fourniruneprésentation Undocumentpeutdoncêtreconsidéréàtroisniveaux: physique(syntaxe) logique(structured arbre) présentation:navigateur,téléphone,pda,lecteuraudio... HTML <html> <head></head> <body> <p> Hello <strong> World </strong> </p> </body> </html> Firefox VoiceXML «HelloWorld!»

17 Règlesd'édition Dansunnouveaufichier,commencerparcopier l'ossaturedufichierhtmlpardéfaut Lesespaces,lestabulationsetlesretoursàlaligne nesontpasinterprétésparlenavigateur Pourforcerlesretoursàlaligne:utiliserdes paragraphes<p>oudescésures<br/> Pourforcerl'espacement:utiliserdesespaces insécables Utiliserlescaractèresspéciaux é=é è=è à=à

18 Pourunebonnelisibilitédelasource Ajouterdescommentaires: <! > Aérerledocument:retourà laligne+lignesvides <! commentaire > <body> <p> <h1>texte</h1> </p> </body> Indenterleséléments <body> <p> <h1>texte</h1> </p> </body>

19 Pourunebonnelisibilitédelasource NON <html><head><title>mapage</title></head><body><h1>helloworld! </h1><p>nousavonstrouvélaphotod'unanimal. <imgsrc=" <html> <head> <title>mapage</title> </head> OUI <body> <! Débutducorpsdudocument > <h1>helloworld!</h1> <p> Nousavonstrouvélaphotod'unanimal. <imgsrc=" </p> <! Finducorpsdudocument > </body> </html>

20 EditeursdetexteGPLetgratuits notepad++(windows) notepad++(windows) voiraussi:ultraedit, context gedit(ubuntu) gedit(ubuntu) activerlegreffonbalises voiraussi:anjuta,screem

21 TP SiWindowsinstallernotepad++ plus.sourceforge.net/fr/site.htm>télécharger> TéléchargerlesbinairesdeNotepad++>npp Installer.exe Ouvrirvotrefichierprécédent Rendrelasourcelisible ajouterdescommentaires l'indenteretajouterdesespaces vérifierquecelan'apasdeconséquencesurl'affichage Ajouter dansleparagraphedevotrechoix,unretouràlaligne puislaphrase«cetétéjen'iraipasàlaplage» l'afficherdansfirefoxencaractèrescyriliques:affichage> Encodagedescaractères>UTF 8 page3.html Mettrelapageenligneàjouretvérifierl'affichage

22 LelangageXHTML

23 Définition XHTML:E XHTML:ExtensibleH xtensiblehypert ypertextm extmarkupl arkuplanguage Evolutionactuelledel'HTMLvisantà standardiserethomogénéiserlelangage éviterquelesnavigateursutilisentleurspropresbalises ouinterprètentlibrementlesmarqueurs assurerunetransitionversunlangageenarbre(xml) DepuisleXHTML1.0unepagepourraévaluerson niveaudeconformitéauxstandardsduweb(et indirectementauxservicesd'accessibilité): normesduw3c(worldwidewebconsortium):

24 PlusieursprincipesdebaseduXHTML Toutebaliseouvrantedoitêtrefermée Lesélémentsdoiventêtrecorrectementimbriqués Lesbalisesetlesattributsdoiventêtreécritsenminuscules Lesvaleursdesattributsdoiventapparaîtreentreapostrophes ouguillemets Chaqueattributdoitavoirunevaleur L attributname nedoitplusêtreutilisépourl'identificationdes L attributnamenedoitplusêtreutilisépourl'identificationdes balises.alaplaceonutiliseral attributid balises.alaplaceonutiliseral attributid(quiservaitdéjàpourlescss). <p>texte</p> <p>texte<strong>important</strong></p> <pid="par1">texte</p> <imgsrc="/img/carte.jpg"alt=""/>

25 Butsetpratiques LeXHTMLviseàfairedisparaîtretoutenotionde miseenformedelapagehtmletd'enlaisserla miseenformedelapagehtmletd'enlaisserla gestionauxfeuillesdestyle. Lesbalisesdoiventorienterlesenssémantiquedonné autexte,maispassamiseenforme: <emphatic>plutôtque <italic> <emphatic>plutôtque<italic> Certainesbalisesetattributssontdéconseillés: police:<fontface="arial"></font> grasetitalique:<b></b>et<i></i> centrer:<center></center> <bodybackground="white"bgcolor="black"></body> >Ilestplusjudicieuxd'initierunprojetdedesignWebaujourd'huiqu'ilya3ans!

26 StructurededocumentXHTML1.0 UndocumentXHTML1.0estundocumentHTML 4.01précédéd'unélément:ledoctype 4.01précédéd'unélément:ledoctype(typededocument) DoctypeXHTML1.0Transitional <!DOCTYPEhtmlPUBLIC" //W3C//DTDXHTML1.0Transitional//EN" " transitional.dtd"> respectelescinqprincipesduxhtml autoriselaprésencedesbalises<font>,<center>etdes attributsborder,align,bgcolor,target autorisel'emploides<iframe> >permetsunpassageprogressifdesdocuments(et descompétences)versl'xhtml

27 StructurededocumentXHTML1.0 DoctypeXHTML1.0Frameset <!DOCTYPEhtmlPUBLIC" //W3C//DTDXHTML1.0Frameset//EN" " frameset.dtd"> identiqueaudoctypetransitional remplace<body>par<frameset>+<frame> >permetsl'utilisationdesous sitesdansunsite DoctypeXHTML1.0Strict <!DOCTYPEhtmlPUBLIC" //W3C//DTDXHTML1.0Strict//EN" " strict.dtd"> touteslesbalisesetlesattributsdéconseilléessontexclues >pourlessitesvalidésw3c(rare!)

28 StructuredelapageXHTML1.0type <!DOCTYPEhtmlPUBLIC" //W3C//DTDXHTML1.0Transitional//EN" " transitional.dtd"> <htmlxmlns=" <head> <title>mapage</title> <! typededocumentetdecaractères > <metahttp equiv="content type"content="text/html;charset=utf 8"/> <! metadonneespourlesmoteursderecherche > <metaname="description"content="titre"/> <metaname="author"content="p.vincent"/> <metaname="keywords"lang="fr"content="mot1,mot2"/> <metaname="robots"content="all"/> <! feuillesdestyle > <linkrel="stylesheet"type="text/css"media="screen"href="feuille.css"/> </head> <body>... </body> </html>

29 StructurededocumentXHTML1.1 UndocumentXHTML1.1intègrelesélémentssuivants: LaversiondeXMLetlecodagedescaractères <?xmlversion="1.0"encoding="utf 8"?> LeDoctypeXHTML1.1(strictstrictstrict) <!DOCTYPEhtmlPUBLIC" //W3C//DTDXHTML1.1//EN" " LabalisemetaXHTML <metahttp equiv="content type"content="xhtml+xml;charset=utf 8"/> An'utiliserquedansquelquesannées...

30 StructuredelafuturepageXHTML1.1 <?xmlversion="1.0"encoding="utf 8"?> <!DOCTYPEhtmlPUBLIC" //W3C//DTDXHTML1.1//EN" " <htmlxmlns=" <head> <title>mapage</title> <! typededocumentetdecaractères > <metahttp equiv="content type"content="xhtml+xml;charset=utf 8"/> <! metadonneespourlesmoteursderecherche > <metaname="description"content="titre"/> <metaname="author"content="p.vincent"/> <metaname="keywords"lang="fr"content="mot1,mot2"/> <metaname="robots"content="all"/> <! feuillesdestyle > <linkrel="stylesheet"type="text/css"media="screen"href="feuille.css"/> </head> <body>... </body> </html>

31 L'en tête <head></head>

32 Mentionsobligatoires Letitre<title></title> Letitre<title></title> Ilapparaîtdanslehautdelafenêtredunavigateur. Ilestutilisépourl'indexationparlesmoteursderecherche etlestockaged'informationslocalesparlenavigateur <title>mapage</title> Lesmarqueursdemeta données<meta/> Lesmarqueursdemeta données<meta/> Mentionsnonaffichéesmaisutiles(avecdesréserves) pourlesmoteursderechercheetd'indexation auteur,description,tags,date <metaname="description"content="pourlesmoteursderecherche."/> <metaname="author"content="p.vincent"/> <metaname="keywords"lang="fr"content="mairie,informatique"/> <metaname="date"content=" "> <metaname="robots"content="all"/>

33 Metadonnées Typededocumentetjeudecaractère<meta/> Typededocumentetjeudecaractère<meta/> IndiqueaunavigateurlaversionHTMLouXHTML Donnelejeudecaractèresd'encodage(défaultUTF 8) <metahttp equiv="content type"content="text/html;charset=utf 8"/> Rechargementouredirectiondepage<meta/> Rechargementouredirectiondepage<meta/> Permetsàlapaged'êtreredirigéeauboutd'uncertain temps <metahttp equiv="refresh"content="5;url=

34 InclusiondesstylesCSS Feuillesdestyleexternes<link/> Feuillesdestyleexternes<link/> Indiquel'adressed'inclusiondesfeuillesdestyle.css liéesàlapage <linkrel="stylesheet"type="text/css"media="screen"href="feuille.css"/> Feuillesdestylelocales<style> Feuillesdestylelocales<style> PermetsdedéclarerlesstylesdanslapageHTMLelle même <styletype="text/css"> /*Monstyle*/ </style>

35 InclusiondescriptsJavaScript ScriptJavascriptexterne<script/> ScriptJavascriptexterne<script/> Indiquel'adressed'inclusionduscript.jsliéàlapage <scripttype="text/javascript"src="menu.js"/> ScriptJavascriptlocal<script> ScriptJavascriptlocal<script> PermetsdedéclarerlesstylesdanslapageHTMLelle même <scripttype="text/javascript"> /*Monscript*/ </script>

36 Divers InformationdefluxRSS<link/> InformationdefluxRSS<link/> Indiquelaprésenceetl'adressedulienRSSdelapage vialenavigateurdel'internaute <linkrel="alternate"type="application/rss+xml"href="backend.php3" title="monsite"/> Icônedusite(favicon)<link/> Icônedusite(favicon)<link/> Modifiel'icôneaffichédanslabarred'adresse <linkrel="shortcuticon"type="image/png"href="/dist/favicon.png"/>

37 TP Ouvrirlefichierpage_standard.html Ouvrirlefichierpage_standard.html Modifier: letitre lesmeta données:auteur,mots clefs,descriptif Enregisterlapagesous:ma_page_standard.html Enregisterlapagesous:ma_page_standard.html page_standard.html Lapasserenlectureseule. CettepageestvotrepageHTMLviergepardéfautpourtoutesvos créationsàvenir. Modifierlefavicon Ajouterl'informationdufluxRSSdevotresite Pourallerplusloin,enfaireunecopieet: Faireuneredirectionauboutde5secondesversvotresite

38 Structureducorps <body></body>

39 Balisesdetypebloc Balisesdetypebloc Cesontdes«boîtes»quipeutcontenir d'autresélémentsdetypebloc desélémentsdetypeenligne desbalisesauto fermantes dutexte lesblocssepositionnentlesunsendessousdesautres etoccupenttoutelalargeurduparent titre textetextetextetextetextetexte textetextetextetextetextetexte textetextetextetextetexte texte2 texte2 texte2 texte2 texte2 texte2 <div> <h1>titre</h1> <p>textetextetexte</p> <p>texte2texte2texte2</p> </div>

40 Balisesdetypeen ligne Balisesdetypeen ligne Cesontdes«boîtes»quipeutcontenir desélémentsdetypeen ligne dutexte maispasdebalisesdetypebloc unélémentenlignesetrouvedoncauxderniers maillonsdel'arbrehtml lesélémentsenligneseplacentàcôtélesunsdes autresethabillentl'élémentparent textetextetexte texte2 texte2 texte2texte2texte2texte2texte2 texte2 texte2 <div> <span>textetextetexte</span> <span>texte2<em>texte2</em>texte2 texte2texte2texte2</span> <imgsrc="/img/spip.jpg"/> </div>

41 Conteneursgénériques <div> <div> BLOC élémentneutrepermettantderegrouperdesélémentsdetout type(blocouen ligne):<div>,<span>,<h1>,<img/>... nepasabuserdes<div>etpréférerdesélémentsavecdu «sens»sémantique <div> <h1>questionexistentielle:</h1> <blockquote>tobespipornottobe?</blockquote> </div> <span> <span> EN LIGNE élémentneutrepourregrouperdesélémentsen ligne: <img/>,<strong>,<em>... <span><abbr>spip</abbr>estunoutildepublication <strong>partagé</strong></span>

42 Attributsdenommage idet classsontutiliséspournommerleséléments sontutiliséspournommerleséléments idetclass HTMLafindeleurappliquerdesstylesCSS iddésigneunélémentuniquedanslapage classdésigneunélémentquipeutapparaîtreplusieurs fois <divid="bloc1"> <spanclass="texte">texte2texte2texte2 texte2texte2texte2</span> <ahref="page.html"class="lien">cliquerici</a> </div>

43 Leprojet

44 Lalistedesconteneursprincipaux page entete menu colonne_droite colonne_gauche footer

45 L'arbredestructureprincipale body page BLOC STRUCTURE BLOC entete bas_page colonne_gauche colonne_droite menu......

46 L'arbredeséléments colonne_gauche BLOC edito alaune STRUCTURE articles_brevesarticles_breves h6 BLOC alaune_1 alaune_2 article_breve_1 article_breve_tous article_texte article_texte article_texte BLOC CONTENU EN LIGNE h3imgp h5imgp...

47 TP projet1.html projet1_bordures.html Faireunecopiedevotrepagestandard:projet1.html Faireunecopiedevotrepagestandard:projet1.html Créeràl'intérieurducorpsdelapagelessix conteneursprincipauxàl'aidedebalises<div> conteneursprincipauxàl'aidedebalises<div>.. lesnommeravecl'attributid rajouterunelignedetexteaudébutdechaquebloc Al'aidedel'arbredesélémentsdelacolonnegauche, créerlastructure delapage créerlastructuredelapage <styletype="text/css"> Afindevisualiser div { lesblocsajouterà padding:10px; margin:10px; l'en têtedevotre border:blacksolid1px; } </style> document:

48 TP Depuislefichierprojet1 complet.html Depuislefichierprojet1 complet.htmlajouterles élémentsdecontenu suivants: élémentsdecontenusuivants: BlocEdito L'imageimages/arton1.gif Untitre<h3>:Carted'identitédelacommune projet2.html Unparagraphe<p>avecducontenumiseenforme: Descriptiondelacommune... Blocarticle_breve_1 L'imageimages/rubon3 15c52.gif Untitre<h5>Titreavecunlien<a> Ladateenmiseenformeemphatique<em> Unparagraphe<p>avecducontenumiseenforme:Texte... Unlien:lirelasuite

49 Détaildesbalises ducorps <body></body>

50 Lesbalisesdetypebloc Lesbalisesdetypebloc Balise Signification <body> Baliseblocmèreducorpsdelapage,c'estle conteneurprincipal <div> Conteneurdeblocs <p> Paragraphe <h1>...<h6> Titredeniveau1à6 <blockquote> Marqueunecitation <pre> Afficheexactementcequ'onymets(tabulations,sauts) <ul>,<ol>,<li> Listeénumérativeetlistenumérotée <dl>,<dd>,<dt> Listededéfinition <table>,<th>,<tr>,<td> Tableaux <tbody>,<thead>, <tfoot> Souspartied'untableau <fieldset>,<form> Formulaireinteractif <noscript> Textealternatifauxscripts <map> imageréactive(nécessite<area>) <hr/> Séparationhorizontale Note:Ils'agitessentiellementd'élémentsdestructure

51 Listedesbalisesdetypeen ligne Listedesbalisesdetypeen ligne Balise Signification <span> Conteneuren ligne <a> Liens <img/> Images <br/> Sautdeligne <em>,<strong> Miseenintonationdutexte <abbr>,<acronym>, <cite>,<q>,<dfn> <del>,<ins> <kbd>,<code>,<samp>, <var> Sigle,citationetdéfinition Suppression/ajoutdetexte Instructionetcode <sub>,<sup> Indicesetexposants <object> Animationmultimédiaembarquée Note:Ils'agitessentiellementd'élémentsdecontenu/mise enforme

52 LesbalisesdeTitre <h1>...<h6> <h1>...<h6> BLOC permetsdehiérarchiserlestitresen6niveaux personnalisablesvialescss nepeuventpasincluredebalisesdetypebloc <div> <h1>listedesoutilsinternet</h1> <h2>navigateurs</h2> <h3>ie</h3> <h3>firefox</h3> <h2>cms</h2> <h3>spip</h3> <h3>joomla</h3> </div> page4.html

53 Lesbalisesdeparagraphe page5.html Nepeuventpascontenird'autresbalisesdetypeBloc <p>,<hr/>,<pre>,<blockquote> BLOC <div> <p>tobespipornottobe?</p> <pre> Nulnelesait mais ilconvientd'yréfléchir àl'aidedecettecitation: </pre> <hr/> <blockquotelang="fr"cite="del'âme,aristote"> «C'estaussipourquoiiln'yapas àrecherchersil'âmeetlecorpssontune seulechose,pasplusqu'onnelefaitpour lacireetl'empreinte,nid'unemanièregénérale pourlamatièred'unechosequelconqueet cedontelleestlamatière.» </blockquote> <hr/> </div>

54 Lesliens <a> <a> page6.html EN LIGNE permetsdenaviguerauseindelapageouversuneautre page attributs href:destination(obligatoire) title:infobulle name:pournommeruneancre <ahref=" <br/> <ahref="#en_bas">allerjusqu'àl'ancreenbas</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <ahref="#"name="en_bas">ici</a>

55 Lesimages <img/> <img/> page7.html EN LIGNE intègrel'imagedanslapagehtml attributs src:source(obligatoire) alt:textealternatifpourautresmoteursderenduoupb (obligatoire) title:info bulle widthetheight:taille <imgsrc=" title="est ceunmammifère?"width="400px"height="400px"/>

56 Lestableaux <table>,<tr>,<th>,<td> <table>,<tr>,<th>,<td> page8.html BLOC permetsd'intègreruntableaudedonnéesdanslapage attributs(disparaîtrontàterme) widthetheight:taille border:tailledelabordure <tableborder="1"width="90%"height="300px"> <tr> <th>poisson</th> <td>20euros</td> <td>500grammes</td> </tr> <tr> <th>viande</th> <td>15euros</td> <td>900grammes</td> </tr> </table>

57 Leslistes <ul>,<ol>,<li> <ul>,<ol>,<li> page9.html BLOC <p>voiciunelistenon ordonnée:</p> <ul> <li>lexhtmlestaccessible</li> <li>lexhtmlestbienstructurer</li> <li>lexhtmlestdonneunsensàvospageweb</li> </ul> <p>voiciunelisteordonnée:</p> <ol> <li>lexhtmlestaccessible</li> <li>lexhtmlestbienstructurer</li> <li>lexhtmlestdonneunsensàvospageweb:</li> <ol> <li>c'estbonpourlesinternautes</li> <li>c'estbonpourlesmoteursderecherche</li> </ol> </ol>

58 Lesdéfinitions <dl>,<dt>,<dd> <dl>,<dt>,<dd> page10.html BLOC Commeleslistesnepeutpascontenird'autreséléments detypeblocqueceuxnotésici <p>voiciunelistedetermesetdedéfinitions:</p> <dl> <dt>développeur</dt> <dd>undéveloppeurestuninformaticienqui programmedeslogiciels.</dd> <dt>web</dt> <dd>réseaumaillédeserveurs d'informationsformantunetoiled'araignée.</dd> </dl>

59 Lesbalisesdemiseenforme <em>,<strong>,<br/>,<del>,<ins>,<sub>,<sup> miseenforme <abbr>,<cite>,<q>,<dfn>,<code> page11.html EN LIGNE abbréviations,définitionsetcitationdecode <div> Une<em>information</em><strong>importante</strong>doitêtrepartagée. <br/> <br/> Voicides<del>informations</del><ins>propositions</ins>deréflexions <sub>basses</sub>et<sup>élevées</sup>: <br/> <br/> <abbrtitle="systèmedepublicationpourl'internetpartagé" lang="fr">spip</abbr> <br/> <br/> <q>tobeornottobe.</q> <cite>shakespear</cite> <br/> <br/> <dfn>unkiwi</dfn>estunfruitexotiquemaisaussiunpetitanimal. <br/> <br/> EnPHP,lavariablelangagesera<code>$langage="XHTML";</code> </div>

60 Lesobjetsembarqués <object>,<param/> page12.html EN LIGNE permetsd'incluredesanimationsmultimédiaàl'intérieur delapage Flash,ActiveX,AppletJava... <div> <objecttype="application/x shockwave flash" data=" width="831"height="143"> <paramname="movie" value=" <paramname="quality"value="high"/>" </object> </div>

61 Divers Lesextensionshtm,html,xhtml,php Lesextensionshtm,html,xhtml,php peuventcontenirducodehtml sontinterprétéesparlesnavigateurs Lestailles peuventêtrespécifiéesenpixelsoupourcentage serontpréférentiellementplacéesdanslescss Lescaractèresspéciaux taper«caractèresspéciaux»dansunmoteurderecherche Pourensavoirplus: developpeur web.com/ lille1.fr/technoweb/docs/selfhtml/html/reference/elements.htm

62 TP projet2.html Depuislefichierprojet1.html Depuislefichierprojet1.htmlajouterlesélémentsde contenusuivants: contenusuivants: BlocEdito L'imageimages/arton1.gif Untitre<h3>:Carted'identitédelacommune Unparagraphe<p>avecducontenumiseenforme:Description delacommune... BlocArticle1 L'imageimages/rubon3 15c52.gif Untitre<h5>Titreavecunlien<a> Ladateenmiseenformeemphatique<em> Unparagraphe<p>avecducontenumiseenforme:Texte... Unlien:lirelasuite touteautremodificationvoussemblantintéressante

63 Partie2 Lesfeuillesdestyle CSS2

64 Présentation desfeuillesdestyle

65 Définition CascadingS ascadingstyles tylesheets=feuillesdestyleen Cascade LestandrardestdictéparleWorldWideWeb Consortium( lerespecter Versions:CSS2(>1998)etCSS3(encours) Séparationdufonddelaforme Langageutilisépourdécrirelaprésentationd'un documentstructuréen(x)html LespagesXHTMLdécriventlastructureetlecontenu LesCSSdécriventlaprésentationpourl'affichagesurun médiadonné(screen,palm,imprimante...)

66 Parlapratique CSSZenGarden DésactiverlesstylesviaFireFox 1pageHTML< >nfeuillesdestyles Affichage>Styledelapage>Aucunstyle ChaquebaliseXHTMLaunrendupardéfautdans lenavigateur lestylecssrelatifàlabalisevientsurchargercerendu

67 Firebug LesextensionsFirefox WebDevelopper,FireBug,IETab

68 PourquoilesCSS? LesCSSassurelacohérencegraphiqued unsite. Lamodificationdelachartegraphiqued unsiteweb estfacilitéeparl utilisationdescss:seulelafeuille destyleestmodifiée. LecodeXHTMLdelapageestallégé,ilyadoncune diminutiondupoidsetparconséquentdutempsde chargement. Lacompatibilitéestaméliorée...mêmesilenavigateurleplusutilisén'afficheque60% decompatibilitéauxcss2

69 Implémentationdesstyles Danslesbalises àévitercaronperdsl'aspectglobaldustyle <body> <pstyle="/*messtyles*/">texte</p> </body> Danslapage pourdesmaquettesetdesfeuillessimplesàtester <head> <styletype="text/css"> /*Messtyles*/ </style> </head>

70 Implémentationdesstyles(2) Dansunefeuilledestyleextérieure solutionàretenirpourexternaliseretmutualiserlafeuille <head> <linkrel="stylesheet"type="text/css" href="style.css"/> </head> OU <head> </style> </head>

71 Implémentationdesstyles(3) possibilitédespécifierlemédia dédiéaustyle possibilitédespécifierlemédiadédiéaustyle all,screen,print,projection,braille,embossed,aural,speech... seulspourl'instantlesmediasd'affichagefonctionnentcorrectement possibilitédespécifierdesfeuillesalternativesavectitle possibilitédespécifierdesfeuillesalternativesavectitle Firefoxpermetsd'yaccéderdans>Affichage>Styles <head> <styletype="text/css"media="screen"title="style1"> /*Monstyle1*/ </style> <styletype="text/css"media="screen"title="style2"> /*Monstyle2*/ </style> <styletype="text/css"media="print"> /*Styleimpression*/ </style> </head> page13.html

72 Syntaxe

73 Déclarationdesstyles balise { propriete:valeur; propriete:valeur; propriete:valeur; } sélecteur propriété valeur p{font family:verdana;} déclaration balise:nomdelabalisedontonmodiﬁel apparence propriété:catégoriesd eﬀetdestyle <em>,<b>,<h1> color,font size,font family valeur:valeurassociéeàlapropriété red,10px,verdana

74 Syntaxe Onpeutajouterdescommentaires /*...*/ Onpeutajouterdescommentaires/*...*/ Unedéclarationouvertedoittoujoursêtrefermée{...} Unedéclarationouvertedoittoujoursêtrefermée{...} Unedéfinitiondevaleurdoitseterminerpar; Unedéfinitiondevaleurdoitseterminerpar; Onpeutenchaînerplusieursdéfinitionsdevaleursau seind'unemêmedéclaration. Lesespacesetlestabulationsnesontpas interprétés. balise { /*Premièredéclaration*/ propriete:valeur; }

75 Premiersexemples body { font family:verdana; font size:12px; color:#484747; background color:#eeeeee; } div { padding:10px; margin:10px; border:blacksolid1px; } a,a:link,a:visited { color:#484747; text decoration:none; } h1 { font size:250%; color:gray; font weight:bold; } a:hover { color:red; text decoration:underline; }

76 Feuillesencascade Lesstylessontappliquéessuccessivementdans l'ordresuivant(parordrecroissantd'importance): 1.Stylesextérieurs 2.Stylesdelapage 3.Styledanslabaliseelle même Encasdesurcharge,ledernierl'emporte Lespropriétésdechaquebalisesont héritéesdesélémentsparentsdans transmission l'arbredudocument despropriétés html head title meta body h1 p strong p

77 Couleurs Unecouleurpeutêtredéfiniepar sonnom(siilexiste):green soncodehexadécimallong:# soncodehéxadécimalcourt:#fff soncodergb:rgb(0,0,255)ourgb(10%,10%,30%) transparent Les16couleursdebaseduWeb(compatiblesW3C) hub.com/outils/color.html hub.com/outils/color.html

78 Unitésdevaleur Latailleetlapositiondesélémentsdoivent comporter Latailleetlapositiondesélémentsdoiventcomporter uneunité: font size:12px; width:90%; margin:0; Rapports %(pourcentage):lataille/positiondel élémentest calculéedefaçonrelativeparrapportàsonparent em:1em=100%,1.2em=120%,etc. Mesures px:pixels,pluspetiteunitédel écran pt:points,pluspetiteunitédel imprimerie

79 TP projet4.html Apartirdevotredernièreversiondeprojet2.html ou Apartirdevotredernièreversiondeprojet2.htmlou depuisprojet3.html depuisprojet3.html créerunespacepourvotrestyle<style>danslapageavec lesattributsmediaettitle ajouterlesstylesvusenexemplepourleséléments body aeta:hover h1 div testerlerésultatdanslenavigateuràchaqueétape fairequelquesessaisdecouleurvialesélecteurdecouleur enligne

80 Lessélecteurs balremplacen'importequellebalise.* { } sélecteuruniversel désignetousleséléments.bal {} sélecteurdebalise désignetouteslesbalises<bal>delapage {}..nom_classe sélecteurdeclasse désignelesélémentsayantl'attributclass="nom_classe".bal.nom_classe {} sélecteurdeclasse sélecteurdeclasse désignetouteslesbalisesbalayantl'attribut class="nom_classe"

81 Lessélecteurs(2) balremplacen'importequellebalise.#nom_id { } sélecteurd'identification désignel'élémentayantreçuid="nom_id" {}.bal#nom_id sélecteurd'identification désignelabalise<bal>ayantreçuid="nom_id".bal1 bal2 bal3 { } hiérarchie désigneleséléments<bal3>contenusdansunebalise <bal2>lui mêmecontenudansunebalise<bal1> bal2, bal3 { }.bal1, sélecteurcollectif sélecteurcollectif s'appliquesauxbalises<bal1>,<bal2>et<bal3>

82 Lessélecteurs(3) balremplacen'importequellebalise.bal1 + bal2 { } sélecteuradjacent désigneles<bal2>directementplacésderrièreun<bal1>.bal1 > bal2 { } sélecteurd'enfants désigneles<bal2>directementplacésdansun<bal1>

83 Pseudoclassesetéléments Note:lesbalisessontcitéesàtitred'exemple. p:first-letter first-line after { } pseudo élément désigneunsousensembledel'élément<p> first letter:premièrelettre first line:premièreligne after:ajoutaprèsl'élément. img:active hover focus visited { } pseudo classesdyn. désignel'élément<img>dansunétatentempsréel hover:l'élémentestsurvolé active:sourispresséeetnonrelâchée focus:l'élémentestactivé(unformulaireparexemple) link:liennonvisité(<a>uniquement) visited:lienvisité(<a>uniquement)

84 Commentécrirelessélecteursqui s'appliquentautexteenvert? <strong>c'estimportant</strong> <divid="principal"> Montexte </div> <ahref="#"class="liens"> cliquerici </a> <divclass="home"> <strong>c'estimportant</strong> </div>

85 Commentécrirelessélecteursqui s'appliquentautexteenvert? strong {... } <strong>c'estimportant</strong> <divid="principal"> Montexte </div> #principal {... } a, a:hover {... } <ahref="#"class="liens"> cliquerici </a> ou a.liens {... } a.liens:hover {... } <divclass="home"> <strong>c'estimportant</strong> </div> div.home div.home strong {... }

86 TP projet5.html Apartirdevotredernièreversiondeprojet4.html Apartirdevotredernièreversiondeprojet4.html ajouterlesstylessuivantsaublocedito lacouleurdefonddevotrechoix(ex:#cc3300)etlapropriété: moz border radius:10px; titredeniveau3contenudansl'edito,lespropriétéssuivantes: font size:17px; font weight:bold; imagescontenudansl'edito,lespropriétéssuivantes: float:right;/*alignementàdroite*/ imagescontenudansl'edito,lorsdusurvoll'ajoutd'unebordure augmenterlatailledelapremièrelettredetousles paragraphesdelapage testerlerésultatdanslenavigateur

87 Miseenforme

88 Polices Ellesnesontpastoutes présentessurtousles ordinateurs Ellessedéclarentdans unordredepréférence Ontermineparles policesstandard:sans serif,serif,monospace, cursive. Lesespacements Typographie Peuventêtrefixéspar lesattributsline height etletter spacing

89 Typographie Action Propriété Valeur appliquelespolicesparordre "TrebuchetMS",arial, décroissant;mettrelesnomsavec sans serif; espaceentre"" Choixdelapolice font family: Tailledelapolice font size: 10px;1.2em;90%; Couleur color: silver;#0033ff; transparent; Orientationdela police font style: normal;italic;oblique; Epaisseur font weight: bold;bolder;normal; Soulignement text decoration: none;underline; overline;line through; Miseenmajuscule text transform: none;capitalize; uppercase;lowercase; Alignementdutexte text align: left;right;center; justify; Hauteurdeligne line height: normal;1.2em;90%; 10px; Espacemententreles letter spacing: lettres normal; 2px; Espacemententreles word spacing: mots normal;3px; Raccourci font: Description font style,font variant,font weight,fontsize/line height, font family préféreremet%pourhériterdes valeursdesélémentsparents capitalize:premièrelettre uniquement. p{font:bold12px/24pxverdana}

90 Présentationdesblocs BORDER MARGIN HEIGHT PADDING textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte WIDTH textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte textetextetextetextetextetextetextetextetexte PADDING MARGIN

91 Compléments Plusieursblocs:lesmarginss'ajoutent MARGIN MARGIN MARGIN PADDING PADDING PADDING PADDING PADDING PADDING MARGIN MARGIN MARGIN Quellesestlatailled'unbloctotal(boîte)? Selonlestandard:boîte=margin+border+width PourIE:boîte=width >Privilégierlespaddingauxmargin...

92 Présentationdesblocs Toutélémentenblocpossède4attributs: taillepropre:widthetheight bordure:border margeintérieure:padding margeextérieure:margin Action Propriété Valeur Notes autocalcule automatiquementla tailleactuelle(image parexemple) Largeur width: 30%;250px;auto; Hauteur height: 30%;250px;auto;

93 Margesetespacements Description Propriété Exemple Margesupérieure margin top: 5px; Margededroite margin right: 0.5em; Margeinférieure margin bottom: 2pt; Margedegauche margin left: 0; Raccourcipourlesmarges margin: 5px0.5em2pt0; auto;(alignement centrédubloc) Espaceintérieurentrel'élément etlaborduresupérieure padding top: 3px; Espaceintérieurentrel'élément etlaborduredroite padding right: 0.25em; Espaceintérieurentrel'élément etlabordureinférieure padding bottom: 0; Espaceintérieurentrel'élément etlaborduregauche padding left: 2pt; Raccourciversl'ensembledes propriétésd'espaceintérieur padding: 3px0.25em02pt;

94 Arrièresplan Action Propriété Valeur Couleurd'arrière plan background color: "#RRGGBB"; Imaged'arrière plan background image: url( Répétitionde l'arrière plan background repeat: repeat;repeat x; repeat y;no repeat; Spécifiesil'image restefixeavecles background attachment: déplacementsdel'écran Positiondel'imagepar rapportaucoin background position: supérieurgauche Raccourciglobalvers lespropriétésdesap background: Notes scroll;fixed; possibilité top;middle;bottom; d'indiquerdes left;center;right; valeursenpixels #000000url(test.jpg) no repeatscroll centertop; body { background:transparenturl(images/siteon0.jpg) no repeatscrollcentertop; }

95 Bordures Description Propriété Valeur Epaisseurdelabordure border[ top left bottom right] width: 10px;2em; Epaisseurdelabordure border width: 10px15px15px10px;(HDBG) Couleurdelabordure border[ top left bottom right] color: #RRGGBB; Styledelabordure solid;(pleine)dashed;(en border[ top left bottomtirets)dotted;(enpointillés) right] style: double;(double)ridge;inset; outset;(en3d) Effetarrondi(Mozzilla) moz border radius: Raccourcigloballes propriétésdebordure border: 10px;2em; 10px10px10px10px;(HDBG) border:1px002pxdotted green; body { border:1px002pxdottedgreen; }

96 TP Apartirdevotredernièreversiondeprojet5.htmldéfinirla présentationdesblocssuivantsetletesterdanslenav: page largeur:1000pixels marge:automatique couleurdefond:devotrechoix(ex:#ffffff)oulogodesaint symphorien:images/logo_saint_sym.gif entete projet6.html imagedefond:images/siteon0.jpg edito bordureshauteetgauche:#eee2pxsolid borduresbasseetdroite:0px bordsarrondis:10px harmoniserlescouleurs:polices,backgroundbodyetpage

97 Positionnement

98 Propriétésdeposition Description Propriété Valeur Propriétés display: none;(n'affichepaslebloc) block;(forcelapropriétébloc) inline;(forcelapropriétéen ligne) list item;(forcelapropriétéen ligne) table;(forcelapropriététableau) Affichage visibility: visible;hidden;(cachel'élémentmais réserveunespacepoursonaffichage) Position position: static;(default dansleflux)relative; (décalage dansleflux)absolute;(fixe horsduflux)fixed;(fixe horsduflux noscroll) Distanceauparent top:/right:/ bottom:/left: 10px;30%;2em;(paspourstatic) Profondeurd'affichage (calque) z index: auto;1000; Positionnement flottant float: left;right;none;(default) Effaceleflottement clear: left;right;both;none;(default)

99 Hiérarchiedeséléments <body> ancêtre parent1 parent2 bloca blocc blocb AetBsont frères A,BetCont lemême ancêtre Tousles élémentssont contenus dans<body> DequellenaturesontblocAetblocB?(blocouenligne) Parent1etParent2?

100 Lefluxdedocument position:relative; Pardéfautlesélémentsseplacentenhautàgauchede leurparentetsuiventlefluxdedocument: 1.l'ordredanslequelilssontinscritsdanslecodeHTML 2.leurnature(blocouen ligne) bloc:endessousduprécédent en ligne:àcôtéduprécédent bloca blocb positionpardefaut

101 Lefluxdedocument(2) 3.leursmarges internes(padding)etexternes(margin) 3.leursmargesinternes(padding)etexternes(margin) margin left margintop bloca(marges) blocb note:ils'agitbiendesmargesexternes(margin)dublocet nondesmargesinternes(padding)duparent

102 Lefluxdedocument(3) 4.lesdécalages (top,right,left,bottom)lorsqueles 4.lesdécalages(top,right,left,bottom)lorsqueles blocssontenpositionrelative left top bloca bloca(relatif) blocb lesélémentsfrèresnesontpasinfluencésparledécalage: ilssepositionnentcommesileblocaétaitdansleflux cetexemplen'apasdemargesenplusdesdécalages lez indexestutiledansdetelscas

103 Positionnementenflux(exemple) marges+décalage margintop margin left left top bloca(marges) bloca(marges+relatif) blocb latailleduparentestinfluencéeparcelledesenfantssi: ilsutilisentsdesmarges leparentpossèdeunetaillenonfixe(%,em,pasdetaille) lesdécalagesn'ontpasd'influencesurlatailleduparent

104 Positionnementflottant Propriétéfloat: Propriétéfloat: position:relative; float:left; Unélémentflottantsortdufluxnormalpourprendre placeàgaucheouàdroitedublocquilecontient. L'élémentquilesuits'écouleradansl'espacelaissé libreenépousantsaforme. Notes float:right; positionpardefaut L'avantageestdepouvoirplacerdesblocscôteàcôte PIEGE:lesflottantssortentdufluxnormalcequi impliquentqu'ilsn'influencentpluslahauteurdu conteneur.sil'onprendunparagrapheflottantplusgros quelesautres,ildéborderaduconteneur.

105 Positionnementflottant bloca bloca {width:200px; {width:200px;} float:left;} blocb blocb {width:100%;} {width:100%;} bloca blocc bloca blocc {width:200px; {width:200px; {width:200px; {width:200px; float:left;} float:left;} float:left;} float:right;} blocb blocb {width:100%;} {width:100%;}

106 positionpardefaut Positionnementflottant Propriétéclear: Propriétéclear: position:relative; clear:both; Empêcheunélémentdufluxdesetrouversurlamême lignequ'uneélémentflottant. Typiquementutilisépourlespiedsdepage. bloca bloca bloca blocc {width:200px; {width:60%; {width:40%; float:left;} float:left;} float:right;} {width:200px; float:left;} blocb {width:100%; clear:both;} blocb {width:100%; clear:both;}

107 Positionnementabsolu position:absolute;top:2em;left:0; l'élémentseplaceparrapportaudernierparentayantune positionabsolue.pardéfaut:<body> l'élémentsortdufluxetn'affectepaslesautresblocs onutiliselesattributstop,left,right,bottompourleplacer Pourdesélémentsindépendantsdel'environnent blocb top {width:100%;} bloca left {position:absolute; left:20px; top:20px;} position:absolute; blocc {width:100%;}

108 Positionnementfixe position:fixed;top:2em;left:0; Identiqueàlapositionabsolue Différence:l'élémentnebougepaslorsquelapagedéfile avecl'ascenseur Pourdeseffetsdestyle.Nepasenabuser. blocb top {width:100%;} bloca left {position:absolute; left:20px; top:20px;} position:fixed; blocc {width:100%;}

109 TP Apartirdevotredernièreversiondeprojet6.html définirle Apartirdevotredernièreversiondeprojet6.htmldéfinirle positionementdesblocssuivantsetlestester: colonne_gauche width:650px; float:left; colonne_droite width:250px; float:right; footer projet7.html clear:both;

110 Compléments

111 Curseur Déterminel'apparence ducurseurausurvol Valeurs élément { cursor:apparence; } default:curseurpardéfaut pointer:main crosshair:viseur help:pointd'interrogation wait:attente text:texte move:objetdéplaçable n resize:changerlataille verslehaut s resize:changerlatailleverslebas e resize:changerlatailleversladroite w resize:changerlatailleverslagauche ne resize:changerlataillehaut+droite nw resize:changerlataillehaut+gauche se resize:changerlataillebas+droite nw resize:changerlataillebas+gauche auto:automatique(lenavigateurdécide)

112 Listes Action Propriété Valeur Typedepucesetde numérotation list style type: decimal,upper roman,lower latin,disc,circle,squareou none Permetdepersonnaliserles pucesavecuneimage list style image: url(image.png); Spécifieleretraitdes puces list style position: inside;outside; Raccourciglobalversles propriétésdeslistes list style: typepositionurl(); Desmenusavecdeslistes de menus en CSS

113 TP <divid="menu"> <ul> <li><ahref="#">viemunicipale</a></li> <li><ahref="#">vieculturelle</a></li> <li><ahref="#">economie</a></li> <li><ahref="#">actualités</a></li> </ul> </div> Créervotremenu horizontalàl'aidedes stylessuivants: projet8.html #menuul { padding left:20px; list style type:none; } #menuli { float:left; width:112px; margin left:5px; } #menua,#menua:visited { display:block; font size:11px; font weight:bold; text decoration:none; color:#fff; width:112px; height:30px; background image:url(images/corner.gif); text align:center; line height:29px; } #menua:hover,#menuulula:hover { color:#249526; background image:url(images/cornerb.gif); }

114 Compatibilitéentrelesnavigateurs support summary support summary Gecko(Firefox,Mozilla...)ainsiquelemoteurKhtml (Safari,Konqueror)sontdetrèsbonnesvaleurs. Unseulnavigateurestobsolète:InternetExplorer(IE)... quireprésente80%desnavigateursutiliséssurinternet. Ledilemmedudéveloppeur: Onnepeutpasdévelopperunsiteaccessiblesanstenir comptedeie OnnepeutpasdévelopperunsiteuniquementpourIE Nerespectepaslesstandards Solutionnonpérenne Solutionnonaccessible Solutionpropriétaire

115 Accessibilité Accessiweb,crééparl'associationBrailleNet,aétabli unensemblederèglespourqu'unsiterespecteles recommandationsduw3c(wai) Recommandations: Utiliserlesstandards Concevoiruneinterfacecohérente Concevoiruneprésentationclaireetaérée Lesliensdoiventguiderefficacementl internaute Proposerdesalternatives

116 Outilsdevalidation Lesoutilsdevalidationsontdespartenairesprécieux: OutildevalidationpourXHTML: OutildevalidationpourCSS2: validator/ Outilsdevalidationpourl'accessibilitéd'undocument: WebXact: Wave3: Accès pour tous: pour tous.net/

117 Notiondetemplate Template=canevas=modèledemiseenforme Untemplateestcomposédedeuxéléments UnepagedestructureetdedonnéesenXHTML UnefeuilledestyledeprésentationenCSS Lacréationdetemplateestl'étapepréalableàla créationdessquelettes >ilneresteraqu'àremplacerlesdonnéesstatiques pardesdonnéesdynamiquesgrâcesaulelangagede boucledespip

118 Lecanevasdepageclassique: uneentête,deuxcolonnes entete gauche droite footer

119 D'autrestemplates DestemplatesXHTML+CSSenligne: css templates.com DessquelettesSPIP(XHTML+CSS+SPIP)enligne: contrib.net/ Squelettes

120 PourensavoirplussurlesCSS Merciauxauteursdecescontributions: 2/ et indispensables/comprendre le positionnement des balises en CSS

121 ComplémentsXHTML/CSS DeséditeursCSS/XHTMLavecinterfacesgraphiques CSSEditor: Nvu: QUIZZs

122 Partie3 Javascript notions

123 Ordred'éxécutiondesinstructions requête HTTP page.php Javascript rendu page.php <html> texte <B1>...</B> <?php...?> <script/> texte </html> BouclesSPIP CSS page.php <html> texte texte <?php...?> <script/> texte </html> HTML PHP/Mysql 1.BouclesSPIP 2.PHP/Mysql 3.HTML 4.CSS 5.Javascript page.php page.php <html> texte texte texte <script/> texte </html> réponse HTTP <html> texte texte texte <script/> texte </html>

124 Javascript Langagedescript CodedanslapageHTML directementinterpétéparlenavigateur Orientéobjet méthodes:history.back(); propriétés:navigator.appname; UtilisépourrendrelespagesWebinteractives nenécessitepasdecompilateur permetsdemodifierlespages(contenuetmiseenforme) sanslesrecharger supportactueld'ajaxpourdialogueravecleserveursans rechargerlapage

125 JavaetJavascript Javascript Java Langage interprété Langage pseudo-compilé (chargement d'une machine virtuelle) Code intégré au HTML Code (applet) à part du document HTML, appelé à partir de la page Langage peu typé Langage fortement typé (déclaration du type de variable) Liaisons dynamiques: les références des objets Liaisons statiques: les objets doivent exister sont vérifiées au chargement au chargement (compilation) Accessibilité du code Confidentialité du code Sûr: ne peut pas écrire sur le disque dur Sûr: ne peut pas écrire sur le disque dur

126 Contexte Historique DéveloppéparNetscapeetSunen1995(Livescript) SuiviparMicrosoft(Jscript) Standardiséparl'ECMA262/W3C >Javascript Versionsactuelles 1.7(Firefox2.0),1.5(OperaetSafari)etJscript5.6(IE7) LiéauDOM2.0(documentmodelobject) RecommandationduW3CpourleWebvisantàpermettant àunlangagedescriptdes'interfaceravec lenavigateur:navigation,évènements,historique lesdocumentsinterprétés:contenuxhtml,feuilledestylecss, graphiquessvg...

127 LeJavascriptestliéauDOM DOM=DocumentModelObject RecommandationduW3CpourleWebvisantà permettreàtoutlangagedes'interfacerfacilementavec lecontenuetlastructuredudocument(xhtml) lestyle(css) arborescenced'objetsreprésentantlastructuredudocument interprétéparlenavigateur indirectementle navigateur:navigation, évènements,historique Ex:leDOMHTML

128 Généralités Lesdéclarationsdefonctions <head> <scripttype="text/javascript"> functiontraite() {...} sontdansl'en tête </script> </head> Lesscriptsseplacedansle corpsdelapage(body) lesinstructionsseterminentpar; <body> <scriptlanguage="javascript"> document.write('bla'); </script> </body> Appelàunscriptextérieur Commentaires <scriptlanguage="javascript" src="url/fichier.js"/> Lancementd'unefonction auchargement /*commentaire*/ <bodyonload="traite()">

129 Premierscript alert.html Créerlefichieretlancerlefichiersuivant: (...) <body> <p>texte1</p> <scriptlangage="javascript"> alert('ceciestunealerte'); document.write('<h1>helloworld!</h1>'); </script> <p>texte3</p> </body> (...) >LapageHTMLestparséeetlesblocsexécutés séquentiellement Remarquessurlecodesource

130 Lesvariables Objetrepéréparsonnom,contenantdesdonnées,qui pourrontêtremodifiéeslorsdel'exécutionduprogramme Types Nombreentierouàvirgule:3ou Chaînedecaractère:"machaînedecaractère" Booéen:trueoufalse Pasdevaleur:null Déclaration Globale:texte="bonjour"; (partout) Locale:vartexte="bonjour"; (àl'intérieurdelafonction) Appel Exemple:document.write(texte);

131 Lesopérateurs Opérateur Dénomination Effet opérateur Ajoute deux valeurs d'addition opérateur de Soustrait deux soustraction valeurs opérateur de Multiplie deux * multiplication valeurs plus: opérateur de / Divise deux valeurs division opérateur Affecte une valeur à = d'affectation une variable Retourne le reste de % opérateur modulo la division entière Augmente d'une ++ Incrémentation unité la variable Diminue d'une unité -Décrémentation la variable ajoute l'opérande de gauche par +=, -=, *=, /= l'opérande de droite + Exemple Résultat (avec x valant 7) x+3 10 x-3 4 x*3 21 x/ x=3 Met la valeur 3 dans la variable x x%2 1 x++ 8 x-- 6 x+=3 10

132 Exercice variable1.html Créerlescriptsuivant: <scriptlangage="javascript"> varx= ,u=math.pi,s=" "; vara=x+u; alert(a); varb=x+s; alert(b); </script> Querenvoientlesalertes?

133 Comparaisonsettests Opérateur Dénomination Effet Exemple Résultat (avec x valant 7) == opérateur d'égalité Compare deux valeurs et vérifie leur égalité x==3 Retourne True si X est égal à 3, sinon False === opérateur d'identité Vérifie l'identité de valeur et de type de deux valeurs a===b Retourne True si a est égal à b et est de même type, sinon False!= opérateur de différence x!=3 Retourne 1 si X est différent de 3, sinon 0!== < Vérifie qu'une variable est différente d'une valeur Vérifie la non identité de valeur et de type de deux valeurs, c'est-àopérateur de non dire si les deux valeurs n'ont pas la identité même valeur ou bien sont de types différents. opérateur d'infériorité Vérifie qu'une variable est stricte strictement inférieure à une valeur a!==b x<3 <= opérateur d'infériorité Vérifie qu'une variable est inférieure ou égale à une valeur x<=3 Retourne True si X est inférieur ou égale à 3, sinon False > opérateur de supériorité stricte Vérifie qu'une variable est strictement supérieure à une valeur x>3 Retourne True si X est supérieur à 3, sinon False >= opérateur de supériorité Vérifie qu'une variable est supérieure ou égale à une valeur x>=3 Retourne True si X est supérieur ou égal à 3, sinon False if(x==2)document.write("xvaut2"); Retourne True si a est différent de b ou bien est de type différent, sinon False Retourne True si X est inférieur à 3, sinon False if(x==2) {//listed'instructions } else {//autreséried'instructions }

134 Exercice Créerunscript quistockedansunevariablelenomdunavigateur navigator.appname quistockedansunevariablelaversiondunavigateur navigator.appversion silenavigateurest"netscape"ou"microsoftinternet Exploreur"deversion<4 variables2_test.html inivitel'utilisateuràchangerdenavigateur

135 Tableauxetboucles Créerlescriptsuivant: <scriptlangage="javascript"> vart=array(); for(vari=0;i<=10;i++) { t[i]=i*i; } alert(t); </script> Quelestlerôledecescript? tableau.html

136 Lesfonctions Créerlafonctionsuivante: Dansle<head> <scriptlangage="javascript"> functioncarre(nombre) { varcarre=nombre*nombre; returncarre; } </script> Dansle<body> <scriptlangage="javascript"> for(vari=0;i<=10;i++) { document.write(carre(i)+"<br/>"); } </script> fonctions.html

Montrer encore