web - isima
TRANSCRIPT
![Page 1: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/1.jpg)
http://www.isima.fr/~loic
Mars2016
1
![Page 2: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/2.jpg)
2Machinelocale
Navigateur:http://www.isima.fr
ServeurWeb(Apache,…) Traitement dela
requête…
![Page 3: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/3.jpg)
3
Technologiesweb
• StandardsW3C?• HTML/XHTML/XML• CSS /XSLT• Java(Applet)• ECMAScript (Flash,Javascript)
• SCRIPTSCGI,ASP,PHP,JSP,ruby…• Basededonnées?
![Page 4: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/4.jpg)
Plan
• HTML• CSS• Javascript +jQuery
• XML– Validation:Schémas– Présentation :CSS&XSLT– Programmation
4
![Page 5: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/5.jpg)
HTML<5
![Page 6: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/6.jpg)
6
HyperTextMarkupLanguage
• Langage?• Lienshypertexte• Balises
• Mélange"subtil"– Contenu– Forme
![Page 7: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/7.jpg)
7
HTML
• Comprisparunnavigateur– Touslesnavigateursnecomprennentpaslamêmechose
• Simple• Légerentaille– PDF?–WORD?
![Page 8: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/8.jpg)
8
html
entête corps
paragraphe
imageliste
lienmiseenvaleur
![Page 9: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/9.jpg)
9
<html><head><title> Titre </title>
</head><body>un petit contenu
</body></html>
• Baliseouvrante/balisefermante• Lesnavigateursacceptentsouventducodemalécrit!!!• Maispaslesoutilsdevalidation
Uncodetoutsimple…
![Page 10: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/10.jpg)
10
Simplemaisordonné…
• Balise<html>– Précédééventuellementpardesnouvellesbalises(doctypeparex)
• Entête<head>– Informationssurlapage– Titre,jeudecaractères,style
• Corps<body>– Contenudelapageexclusivement
![Page 11: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/11.jpg)
11
<balise1><balise2></balise2>
</balise1>
Listetrèslimitéedebalises,fermantesounon!Insensibleàlacasse(minusculesconseillées)
Desbalisesenordre!
<balise1><balise2></balise1>
</balise2>
<balise_simple>
![Page 12: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/12.jpg)
12
Attribut
• Modification,ajoutsurunebalise• Listerestreintedépendantedelabalise• Insensibleàlacassemaisminusculesconseillées
attribut="valeur"attribut='valeur'
attribut=valeurattribut
OFFICIEL AEVITER
<p id="titre" style="color:red">ROUGE</p>
![Page 13: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/13.jpg)
Éditeurs
• WYSIWYG– AdobeDreamweaver– FrontPage>MicrosoftExpression– Nvu >KompoZer– BlueGriffon– Intégrationavecd’autreslangages?
• Unsimpleéditeurdefichier?– Colorationsyntaxique– Codesource?
13
![Page 14: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/14.jpg)
14
Lesliens;-)
• Lienclassique
– target =_blank,cadre….
• Ancre
<a href="page.html">mon lien </a>
<a name="ancre"></a><balise id="ancre">…</balise>
<a href="#ancre">vers l'ancre</a><a href="page.html#ancre"> … </a>
![Page 15: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/15.jpg)
15
<p>Paragraphe</p>
<p align="left"><p align="center">
<p align="right">
<p align="justify">
• Balisesdetypebloc• <br> :sautdeligne
![Page 16: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/16.jpg)
16
Caractèresspéciaux(1)
• Pardéfaut,lescaractèresaccentuésnesontpassupportésparlesnavigateurs
• Solutions– Utiliserdes"entités"– Ajouterunebalisedansl'entête:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
![Page 17: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/17.jpg)
17
Caractèresspéciaux(2)
é é & &
È È " "
à à ' '
ê ê < <
ï ï > >
© ©Listenonexhaustive…
![Page 18: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/18.jpg)
18
Police
• <font> </font>
• <font color="blue">
• <font size="+2">• <font size="-2">
• <font face="Courier">
Choisirunepolicepardéfautouunelistedepolices :essayerdeprendredespolicesquiexistentsurlesdifférentssystèmesd'exploitation
![Page 19: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/19.jpg)
19
Gestiondes"blancs"
• 1ouplusieursblancs="1blanc"• Sautdelignepasimportant
• Espaceinsécable: • VRAIretouràlaligne:<br>• Paragraphevide
<p> </p>
![Page 20: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/20.jpg)
20
Organisation
• Titres– de<h1> à<h6>
• Listes– nonnumérotées(àpuces)<ul>– numérotées<ol>– élémentd'uneliste<li>– listesimbriquables
• Listededéfinition<dl>– titre<dt>– description<dd>
![Page 21: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/21.jpg)
21
Titres
• Structurationdudocument• Organisationhiérarchique– Hautniveau<h1> …</h1>– …– Basniveau<h6> … </h6>
• Balisesdetypebloc
Occupetoute lalargeurdisponible
![Page 22: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/22.jpg)
22
Listenonordonnée• Changerlapuce
– Attributtype– square,circle,disc,none
– CSS:touteimage
• Balisebloc
• UtilisationCSS– menus
<ul><li> … </li><li> … </li><li> … </li>
</ul>
• puce 1• puce 2• puce 3
![Page 23: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/23.jpg)
23
Listeordonnée
• Changerlanumérotation– Attributtype :A,a,I(i),i,1
• Débutdenumérotation– Attributstart
<ol><li> … </li><li> … </li><li> … </li>
</ol>
1. puce 12. puce 23. puce 3
![Page 24: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/24.jpg)
24
Listededéfinitions
<dl><dt>Mot 1</dt><dd>Def 1a</dd><dd>Def 1b</dd><dt>Mot 2</dt><dd>Def 2</dd>
</dl>
Mot 1définition 1adéfinition 1b
Mot 2définition 2
![Page 25: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/25.jpg)
25
Visuels
• <u> </u>• <b> </b>• <i> </i>• <blink> </blink><marquee> </marquee>
• <body bgcolor="navajowhite">
Passtandards!
![Page 26: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/26.jpg)
26
Image
• ImagesJPEG,GIF,PNG• Balisesimple<img>• Attributsrc– src="en_construction.gif"
• Attributalt• Attributtitle
![Page 27: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/27.jpg)
Commentaire
27
<!–- texte d'explication -->
<!–-<p>Code non commenté</p><p>Commentaire non imbriquable</p>
-->
![Page 28: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/28.jpg)
28
Tableau(1)<table>
<tr><td> L1C1 </td><td> L1C2 </td><td> L1C3 </td>
</tr><tr>
<td> L2C1 </td><td> L2C2 </td><td> L2C3 </td>
</tr></table>
L1C1 L1C2 L1C3L2C1 L2C2 L2C3
![Page 29: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/29.jpg)
29
Tableau(2)
• height,width :px,em,%• Border,border="0"• align :center,right,left• <thead><tbody>• Fusiondelignesoudecolonnes
![Page 30: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/30.jpg)
30
BaliseTDvalign='top'align='left'
valign='top'align='center'
valign='top'align='right'
valign='middle'align='left'
valign='middle'align='center'
valign='middle'align='right'
valign='bottom'align='left'
valign='bottom'align='center'
valign='bottom'align='right'
![Page 31: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/31.jpg)
31
Cadres/frameset
Aéviter :préféreriframe
![Page 32: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/32.jpg)
iframe
32
• src,id,name• width,height,frameborder
![Page 33: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/33.jpg)
33
Formulaires
• Utilitéavecunlangagedescriptserveur– Récupérationdesinformations– Vérificationettraitementspécifique
• Contrôlenavigateurparjavascript• <form>:name,action,method• <input>:type• <textarea>:name rows cols• <select><option>• <fieldset><legend><label>
![Page 34: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/34.jpg)
<input>• Type
– text,password,hidden– radio,checkbox– submit,reset,button, file
34
<input type="radio" name="a" value="v1"><input type="radio" name="a" value="v2">
checked="checked"
<input name="texte" type="text" size="10" value="essai">
<input type="submit" >
<label for="velo">velo</label> id
![Page 35: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/35.jpg)
Vousêtesvenusen:○ Vélo○ Tram○ Voiture○ ÀpiedQuand?○ Aujourd’hui seulement●Toutelasemaine
<form action="mailto:l@h"><p>Vous êtes venus en :</p><input …>Vélo<br><input …> Tram<br><input …> Voiture<br><input …> À pied<p>Quand</p><input …>Aujourd’hui<br><input …>Toute la semaine<input type="submit"></form>
35
EnvoyerMêmenomname ="locomotion"
Autrenomname ="quand"
![Page 36: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/36.jpg)
<select>
36
<select name="cours"><option>C++</option><option>C#</option><option>Eiffel</option><option selected="selected">Java</option><option>Objective C</option><option>Smalltalk</option>
</select>
multiple size
size="3"
![Page 37: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/37.jpg)
Formulaire
37
Nom
Prénom
Courriel
Loïc
Personne
Courspréféré
C++
Java
HTML
<fieldset>
<legend>
<label>
Lepositionnementseravuplustard
![Page 38: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/38.jpg)
38
HTML/XHTML
• Balisestoujoursferméesetenminuscules<br /> <img /> <hr />
• Attributsstyle="color:black" checked='checked'
• Préambulededocuments• Meilleureséparationcontenu/présentation
– Balisesobsolètes:<font>, visuelles– Attributsobsolètes– CSS
![Page 39: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/39.jpg)
39
Doctype<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
![Page 40: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/40.jpg)
HTML5?
• Recommandationdepuisoctobre2014• Balisessémantiques
– article,details,footer,header,mark,section,summary
• Média– audio,video,embed
• Autres– Canvas (dessinavecECMAScript)– Élémentsdeformulaireetdecontrôle– Stockagededonnées(localousession)
40Nonsupportéparleslecteursdemail:old school power
![Page 41: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/41.jpg)
AVOIRDUSTYLE(CSS)
![Page 42: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/42.jpg)
42
CascadeStyleSheets
• Séparerlecontenudelaforme– 53CSS1,120CSS2,115CSS2.1 ,246CSS3
• Abolitiondestableaux– Saufdonnéestabulaires;-)
• Balisesspécifiques– <div> <span>
– Attention aubazar
• Versionetcompatibilitédesnavigateurs?
![Page 43: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/43.jpg)
43
VisuelsII
• Liéàlasémantique– <em> </em>– <strong> </strong>
• Liéàlaforme– <span style="color:red"> </span>– <p class="justify"> </p>– <div id="entete"> </div>
![Page 44: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/44.jpg)
Présentationdesite
44http://www.alsacreations.com/static/gabarits/index.html
Entête
Pieddepage
MenuContenu
![Page 45: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/45.jpg)
LeSaintGraal
45
TITRE
PIEDDEPAGE
NAVIGATION PUBCONTENUPRINCIPAL
https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
![Page 46: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/46.jpg)
Couleur
• Nom– 17+130
• Rouge VertBleu
• rgb(255,0,0)• rgb(100%,0,0)• #FF0000ou#F00
46Tirédehttp://colorschemedesigner.com/
FF 00 00
![Page 47: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/47.jpg)
47
Différentsmédias
• Écran:screen• Imprimante:print• Mobile:handheld• Présentation:projection• Braille:braille/embossed• Voix:aural /speech
@import url(…) print@media screen { …}
Nonreconnuparlessmartphones
![Page 48: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/48.jpg)
48
Exemple
h1 {font-size : 110%;color : yellow;text-align : center;padding-left : 1em;
}
p {text-align : justify;
}
Extraitd’unfichiertexteoud’unblocd’entête
Nepaslaissertrainerde;
![Page 49: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/49.jpg)
49
Avoirdustyle(1)
1. Fichiertexte(.css)2. Balise<style>dansl'entête3. Attributstyle
<a style="font-weight:bold" href="…"> </a>
Avenir:prioritéimport/typesélecteur
![Page 50: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/50.jpg)
50
Lienavecunfichierexterne
<style type="text/css">@import url(fic1.css);@import url(fic2.css) print;
</style>
<link rel="stylesheet" type="text/css" href="fichier.css" media="screen" />
Média"screen"pardéfaut
<head>
<head>
![Page 51: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/51.jpg)
51
EntêtedefichierHTML<head>
<style type="text/css"> <!--
p {text-align : justify;font-weight : normal;
}--></style>
</head>
Pourlesvieuxnavigateurs
![Page 52: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/52.jpg)
52
Classe
<p> texte par défaut </p><p class="center"> texte centré </p>
.center { text-align : center; }a.petit { font-size : 80%; }
Style
CodeHTML
<a class="petit center"> texte </a>
Plusieursclassespourunélément
![Page 53: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/53.jpg)
Plusieursclasses
53
<p class="p1 p2"> texte </a>
<p class="p2 p1"> texte </a>
<p class="p2"> texte </a>
.p1 { text-color : blue; }
.p2 { text-color : red; }
.p1 .p2 { text-color : gray; }
.p1.p2 { text-color : green; }
Ordred’écriturepasimportant!
![Page 54: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/54.jpg)
54
Identifiant
<div id="entete"> Entête </div><div id="baspage"> copie </div>
#entete { text-align : center; }#baspage { font-size : 80%; }
Style
CodeHTML
IDuniquesurunepage
![Page 55: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/55.jpg)
55
Pseudoclasse/Pseudoélément
• :hover,:focus• :link,:active,:visited
• :first-letter,:first-line• :first-child• :before,:after
![Page 56: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/56.jpg)
56
Exemples
a { color : blue; }
#menu a {color : red;
}
h1, h2, h3 {color : white;background-color : blue;
}/* h4 { font-size:90%; } */
![Page 57: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/57.jpg)
57
Avoirdustyle(2)
• Parhéritageducontenant• Partypedebalise• Parclassed'éléments• Paridentificationunique• Parpseudo-classe• Parpseudoélément
Sélecteurs
![Page 58: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/58.jpg)
58
Taille
• Taillefixe– point(pt)pica(pc)– centimètre(cm)millimètre(mm)– pouce(in)
• Taillerelative– Cadratin(em):largeurdu"m"– hauteurdex(ex)– pourcentage(%)– pixel(px)
Responsivedesign
![Page 59: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/59.jpg)
59
Police• font-family
– 'Arial','Trebuchet MS‘,times,verdana– Policegoogle ?
• font-weight– normalbold lighter bolder– De100à900
• font-size– 14px200%3em0.33em– xx-small x-small small mediumlargex-largexx-large
• font-style– normaloblique italic
![Page 60: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/60.jpg)
60
Texte
• text-decoration– underline overline line-through none
• text-transform– capitalize lowercase uppercase none
• text-align– left rightcenterjustify normal
a { text-decoration : none; }
a:hover { text-decoration : underline overline;
}
![Page 61: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/61.jpg)
61
Espacements
• Interligne– line-height
• Crénage/interlettrage– letter-spacing
• Espaceentrelesmots– word-spacing
![Page 62: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/62.jpg)
62
Eléments
• Enligne– Affichésaufildutexte– Pasdepositionnement précisprévu– Margesinexistantes
• Typebloc– Dimensions(hauteur, largeur,profondeur)– Sortiedufluxnormal?– Margesinternes(padding)etexternes(margin)– Bordures
• Changerdetype– Attributdisplay : block inline none
![Page 63: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/63.jpg)
63
Elément detypebloc
marginborder
padding
contenu
• Occupetoutl'espacedisponiblepardéfaut• Lescomposantspeuventavoirdesmargespardéfaut
![Page 64: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/64.jpg)
Marges
• Internesoupadding• Externesoumargin
• Fusiondesmarges– Désactivésiborderoupadding oupositionnement
64
margin : 10pxmargin : 10px 0;margin : 10px 0 0 10px;margin : auto;
margin-topmargin-rightmargin-bottommargin-left
padding : 1em 0.5em 0.5em 1em; TRBL
![Page 65: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/65.jpg)
65
Bordures• border
– top/right/bottom /left
• border-style– dashed dotteddoublegroovehidden inset outset ridge solid none
– Toutlecadreoubordparbord(TRBL)• border-width
– thin mediumthick– Nombre(1,2,3,4)
• border-color
border : 1px solid #B0CBF4;border-bottom : inset;
![Page 66: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/66.jpg)
66
<div><p>Paragraphe de texte</p></div>
1/Mettreenbleupetenvertlediv…
Paragraphedetexte?
2/Mettreunelargeurde300pxaudivet100pxaup
3/Ajouterunpadding-topd’1em audivetunmargin-left de3emàp
Paragraphedetexte
Paragraphedetexte
Borduresurlediv?
![Page 67: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/67.jpg)
67
<div><p>Premier paragraphe de texte</p><p>Second paragraphe de texte</p> </div>
Premierparagraphe detexte
Secondparagraphe detexte
• Changerlescouleursdefondetidentifierlesparagraphes• Joueraveclesmarges.• Essayerdelescollerenhauteur
![Page 68: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/68.jpg)
68
Positionnement
• Modèledeboite• Sortiedeflux
– Absolu– Relatif– Fixe– Flottant
• Profondeur
![Page 69: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/69.jpg)
69
Modèledeboîte
marginborder
padding
contenu
• Touslescomposantsontdesmargespardéfaut• ResetCSSstyle
![Page 70: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/70.jpg)
70
Différentsmodèlesdeboîte
• ModèlestandardLargeuràl'écran=largeurspécifiée+padding+border
• ModèleMicrosoft(<5et6parfois)Largeuràl'écran=largeurspécifiée=largeurmodulable+padding+border
![Page 71: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/71.jpg)
71
Modèledeboîtestandard
padding
contenu width
width:100%avecpadding ouborder?width :auto;
box-sizing :content-box
![Page 72: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/72.jpg)
72
ModèledeboîteMicrosoft
padding
contenu width
Modèlepardéfaut(modeQuirks)silapageHTMLnecontientpasdeDOCTYPE IE≥6
box-sizing :border-box
![Page 73: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/73.jpg)
73
Fluxnormal
• Ordredanslequelapparaissentleséléments• Blocs
– lesunssouslesautres– utilisenttoutelalargeurdisponible
• Élémentsenligne– sesuiventpourcompléteruneligne
<p>
<p>
<p>
<body>
![Page 74: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/74.jpg)
74
Positionnementrelatif
• Élémentplacédanslefluxnormal• Décaléensuitegrâceà
– top,right,bottom,left
• Pasd'impactsurlerestedudocument• Espacededépartducomposantpréservé
position : relative;
![Page 75: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/75.jpg)
Troisièmeparagraphedetexte
75
#deuze{…position:relative;bottom :1em;left: 1em;
}
Premierparagraphe detexteSecondparagraphe detexte
Premierparagraphe detexteSecondparagraphe detexte
<pid="deuze">
Troisièmeparagraphedetexte
![Page 76: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/76.jpg)
76
Positionnementabsolu
• Sortiedufluxcomplète– top,right,bottom,left
• Positionnementparrapport– Auparents'ilestpositionné– Aupremierconteneurpositionné– Bodyendernierressort– Positionné =relatif,fixeouabsolu
position : absolute
![Page 77: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/77.jpg)
77
Entête
Pieddepage
MenuContenu
Aucunconteneurpositionné=>Positionabsolueparrapportaubody
Entête
Pieddepage
MenuContenu
Conteneur parentpositionné(relative)=>Positionabsolueparrapportàceconteneur
![Page 78: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/78.jpg)
78
<div><p id="prem">Premier paragraphe de texte</p><p id="second">Second paragraphe de texte</p> </div>
p { margin : 0; }
div { width : 300px;height : 200px;background-color : red;
}
#prem {width:100px;background-color : blue;
}#second {width:150px;background-color: green;
}
![Page 79: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/79.jpg)
79
#second {position : absolute;height : 50px;top : 0;left:0;
}
![Page 80: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/80.jpg)
80
#second {right:0;
}
Solution? Positionner ledivenglobant (relative)
![Page 81: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/81.jpg)
81
Positionnementfixe
• L'élémentnedéfileplusaveclapage• FFouIE7+
position : fixed
Menufixe
![Page 82: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/82.jpg)
82
Positionnementflottant
• Blocretirédufluxpourêtreplacéàgaucheouàdroitedublocquilecontient
• Saplaceestalors"libre"• Attentionàlacompatibilité!!!• Empêcherunflottant– clear :left rightboth
float : left float : right
![Page 83: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/83.jpg)
83
Texte"long"sur#second
float:right surpremier
![Page 84: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/84.jpg)
84
float :left surpremieretsecondàlargeurfixée
• Quesepasset'ilsilahauteurdudivestpetite (20px)?• Comportement nonstandardsousIE…
![Page 85: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/85.jpg)
Profondeur
• Élémentdetypebloc• Comportementpardéfaut
– Dernierélément affichéaudessusdesautres
• Propriétéz-index– Seulessontimportanteslesvaleursrelatives
85
![Page 86: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/86.jpg)
Resetsheet
• Marges/Ratiosdifférentssuivantlesnavigateurs
• Mieux: harmonisercertainséléments– YahooUI– Eric Meier– Normalize.css
86
* {margin : 0; padding : 0; font-size : 1em;
}
![Page 87: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/87.jpg)
Sélecteurs(1)
• Balise,identifiant,classe• Plusieurséléments
• Hiérarchiesouple
• Héritierdirect
87
p > a {text-decoration : none ;
}
h1, h2, h3 { … }
p a { … }
![Page 88: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/88.jpg)
Sélectionoupas?
88
<div><a> lien 1 </p></div><a><p> lien 2 </p></a><p><a> lien 3 </a></p><p><a><b> lien 4 </b></a></p><p><b><a> lien 5 </a></b></p><p><a> lien 6 </a></p><a> lien 7 </a>
p a p > a p+p
![Page 89: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/89.jpg)
Sélecteurs(2)
• Élémentfrères
• Attributs
89
p + p { … }
p[class] { … }
img[class="preview"][width="100"] { … }
[title] { … }
![Page 90: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/90.jpg)
PrioritéCSS/sélecteurs
1. *,>,+2. Sélecteurélémentoupseudo-élément3. Sélecteurclasse,attributoupseudo-classe4. SélecteurIdentifiant5. Attributstyle
• !important
90
![Page 91: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/91.jpg)
91
Listes
• list-style-type– none,disc,circle,square– decimal,lower-alpha(a),lower-roman(i),upper-alpha(A),upper-roman(I)
– armenian,decimal-leading-zero,georgian,lower-greek,lower-latin,upper-latin(IEavecDOCTYPE)
• list-style-image:url(fichier)– Comportement différentsuivantnavigateurs
• <ul>type:none• <li>background-image/repeat/position
![Page 92: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/92.jpg)
Positionnementavancé
• CSS2voire2.1• Supportpartiel
– Dégradationgracieuse?– Hacks– Feuillesdestyleconditionnelles– Javascript
• Displayhybride(inline-block)• Calques/Tableaux
92
![Page 93: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/93.jpg)
display:inline-block
• Inline– Éléments lesunsàcôtédesautres
• Block– Dimensions:width etheight
• Restedansleflux
93float Inline-block
+ vertical-align : top
Bugdesespaces
![Page 94: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/94.jpg)
Boguedesespaces
94
![Page 95: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/95.jpg)
Tableau(1)
• Permetd'affichersousformedetableauxtoutélément
• SANSpertedesémantique• Display
– table,table-row,table-column,table-cell– Inline-table, table-caption– table-row/header/footer/column-group
• border-collapse,border-spacing• Appliquerlerendutable-cell transformeleparententableau
95
![Page 96: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/96.jpg)
Tableau(2)
96
<div id="header"></div><div id="main"><div id="lmenu" > </div><div id="content"> </div><div id="rmenu" > </div>
</div><div id="footer"></div>
#lmenu, #rmenu, #content {display : table-cell
}#lmenu, #rmenu {
width : 20%}
![Page 97: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/97.jpg)
Outilsd’aide
• Extensions– Firebug (FF/Chrome)–WebDeveloper (FF/Chrome)–MSIEDeveloperToolbar
• ScriptsdevalidationW3C• IE9+:produitintégré
• http://browsershots.org
97
![Page 98: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/98.jpg)
Formulaire
98
Nom
Prénom
Courriel
Loïc
Personne
Courspréféré
C++
Java
HTML
<fieldset>
<legend>
<label>
Couleurspécifiquelorsdelasaisie
Alignement
![Page 99: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/99.jpg)
Menu
99
• Menu1• Menu2• Menu3• Menu4
Menu1Menu2Menu3Menu4
Menu1 Menu2 Menu3 Menu4
Menu1 Menu2 Menu3 Menu4
Affichagepardéfaut
![Page 100: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/100.jpg)
CV
100
![Page 101: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/101.jpg)
CSS3
• Ensembledemodules– Stadesdifférentsderecommandation
• Compatibilitéentrenavigateurs?
• Sélecteurs• Bordures:ombre,cercle• Transformations2Det3D• Desanimations,dégradés…• Modificationsparl’utilisateur
101
![Page 102: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/102.jpg)
XML
![Page 103: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/103.jpg)
103
eXtensibleMarkupLanguage
• Langagegénériquequipermetd'écriredeslangagesàbalises– XHTML– MathML– SVG
• XML1.0en1998• But:promouvoir/utiliserleSGML• 2012:Supportdecertainestechnologiesencorelimité
![Page 104: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/104.jpg)
104
SGML
• StandardGeneralizedMarkupLanguage• Crééen1986;-)• Séparationforme/contenu• Tropcomplexe?
![Page 105: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/105.jpg)
105
FichierXML• Fichiertexte,plat?
– Règlesd'écritureprécises– Documentbienformé
• Structurearborescente– Systèmedefichierclassique– Uneracine
• Directivessupplémentaires– Entêtededocument– Consignesdeprésentation
• Validation
![Page 106: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/106.jpg)
106
<collection><serie nom="Trolls de Troy"><bd><titre tome="1">histoires trolles</titre><auteur>Arleston</auteur><dessin>Mourier</dessin><comment>Peur de rien !!!</comment></bd><bd><titre tome="2">le scalp du vénérable</titre><auteur>Arleston</auteur><dessin>Mourier</dessin><comment>Peur de rien !!!</comment></bd></serie></collection>
![Page 107: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/107.jpg)
107
![Page 108: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/108.jpg)
108
Typedenœud(1)• Texte
– Nonvide– Feuilledansl'arbre
• Élément– Nom– Groupelogique
• Attribut– Apourparentunélément– Nom+valeur
![Page 109: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/109.jpg)
109
Typedenœud(2)
• Commentaire
• Instructionsdetraitement– processing node– Cible+valeur
• Racine– Représente ledocumententier:commentaires+instructionsdetraitement
– Contient l'élémentracine
<!-- -->
![Page 110: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/110.jpg)
110
ArbreXML
Collection
Série Série Série
bd bd bd bd bd
RacineFeuille Enfantsoucontenu
DescendantsAscendantsFrères
![Page 111: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/111.jpg)
111
Documentbienformé
• Syntaxiquementcorrect• Respectdelastructurearborescente
• Respectdunomdesbalises(casse)
• Respectdesconventionsd'écrituredesattributs
• Utilisationd'entitéspourcertainscaractères
<collection></Collection>
<serie nom = "Lanfeust">
<a><b></a></b>
![Page 112: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/112.jpg)
Clausessupplémentaires
• Entête
– UTF-8,UTF-16,ISO-8859-1– Échapperlescaractères:&©
• Style
• DTD+attributstandalone
112
<?xml version="1.0" standalone="yes"encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="fichier.xsl" >
<!DOCTYPE >
![Page 113: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/113.jpg)
113
<bd><titre tome="1">histoires trolles</titre><auteur>Arleston</auteur><dessin>Mourier</dessin><comment><head><title>Trolls 1</title></head><body><p>Peur de rien !!!</p></body></comment>
</bd>
Espacedenommage(1)
XHTML…
![Page 114: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/114.jpg)
114
Espacedenommage(2)<collection xmlns="http://www.kiux.net">
…
<comment xmlns:xhtml="http://www.w3.org/TR/xhtml11"><xhtml:head>
<xhtml:title>Trolls 1</xhtml:title></xhtml:head><xhtml:body>
<xhtml:p>Peur de rien !!!</xhtml:p></xhtml:body>
</comment>
![Page 115: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/115.jpg)
Validation
• Est-cequelefichierXMLsuitdesrèglesprécises?– Présence/ordredeséléments– Attributs– Valeurspourlesbalises,attributs?
• DTD– DocumentTypeDefinition– DéfinitiondeTypedeDocument
• SchémasXML/XMLSchema Definition (XSD)• Autres:RelaxNG,…
115
![Page 116: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/116.jpg)
116
DTD&élements<!ELEMENT A (B)> <!ELEMENT A (B, C)><!ELEMENT A (C, B)><!ELEMENT A (B | C) > <!ELEMENT A (B, (C | D), E><!ELEMENT A (B | C | (D, E))> <!ELEMENT A (B?, C)> <!ELEMENT A (B, (C | D)+ , E) > <!ELEMENT A (B|C)* > <!ELEMENT A (#PCDATA, B)* >
<!ELEMENT A EMPTY ><!ELEMENT A ANY >
• Composémixte• #PCDATAapparaîtenpremier
Ordreimportant
LIMITE:Niveaudespécification leplusfinParsed Character Data
![Page 117: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/117.jpg)
117
DTD&attributs<!ATTLIST A
a CDATA #IMPLIEDb CDATA #IMPLIED >
<!ATTLIST A a CDATA #IMPLIED ><!ATTLIST A b CDATA #IMPLIED >
<!ATTLIST A a CDATA #IMPLIED ><!ATTLIST A b CDATA "b" ><!ATTLIST A c CDATA #REQUIRED ><!ATTLIST A d CDATA #FIXED "d" >
CDATAchoix (oui| non)ID / IDREF
ENTITY / ENTITIESNMTOKEN / NMTOKENSNOTATION
![Page 118: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/118.jpg)
118
<collection><serie nom="Trolls de Troy"><bd><titre tome="1">histoires trolles</titre><auteur>Arleston</auteur><dessin>Mourier</dessin><comment>Peur de rien !!!</comment></bd><bd><titre tome="2">le scalp du vénérable</titre><auteur>Arleston</auteur><dessin>Mourier</dessin><comment>Peur de rien !!!</comment></bd></serie></collection>
<!ELEMENT collection (serie)*> <!ELEMENT serie (bd)*> <!ELEMENT bd (titre, auteur,
dessin, comment?) > <!ELEMENT auteur (#PCDATA) >
![Page 119: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/119.jpg)
LierdonnéesetDTD
• DTDinterne
• DTDexterne
119
<!DOCTYPE racine [<!ELEMENT nom (#PCDATA) ><!-- ... -->]>
<!DOCTYPE racine SYSTEM "fichier.dtd" >
![Page 120: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/120.jpg)
XMLSchéma• AlternativeXMLdelaDTD
– Outilsclassiques(parseur,XSLT)– Nonfigé– Pluspuissant
• Normeextensiblesibesoin• Contraintessurunebaliseouunattribut
– Typededonnées(DATE)– Héritage– Cardinalitésplusfines– Facettes,patterns,conversion
• Namespaces120
![Page 121: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/121.jpg)
121
<?xml version="1.0"?><xs:schemaxmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note"><xs:complexType><xs:sequence><xs:element name="to" type="xs:string"/><xs:element name="from" type="xs:string"/><xs:element name="head" type="xs:string"/><xs:element name="body" type="xs:string"/>
</xs:sequence></xs:complexType>
</xs:element>
</xs:schema>
![Page 122: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/122.jpg)
LierXMLetschéma
122
<?xml version="1.0"?>
<note xmlns="http://www.w3schools.com"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.w3schools.com note.xsd"><to>Tove</to><from>Jani</from><head>Reminder</head><body>Ne pas m'oublier</body>
</note>
<note xmlns="http://www.w3schools.com"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="file:note.xsd">
![Page 123: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/123.jpg)
Élémentsimple
• Quinecontientpasd'autreélémentoud'attribut• Prédéfini
– string,decimal,integer,long,boolean,date,time,…
• Personnel– Soustypeprédéfini– Limitation(facette)
• default/fixed
123
<xs:element name="couleur" type="xs:string" default="red"/>
<xs:element name="naissance" type="xs:date"/>
![Page 124: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/124.jpg)
ExemplesdeFacettes
124
<xs:restriction base="xs:string"><xs:enumeration value="velo"/><xs:enumeration value="pied"/><xs:enumeration value="tram"/>
</xs:restriction>
<xs:simpleType name="pourcentage"><xs:restriction base="xs:integer"><xs:minInclusive value="0"/><xs:maxInclusive value="100"/>
</xs:restriction></xs:simpleType>
<xs:restriction base="xs:string"><xs:pattern value="[a-zA-Z][a-zA-Z][a-zA-Z]"/>
</xs:restriction>
![Page 125: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/125.jpg)
Élémentcomplexe(1)
• Vide• Texteseulement• Autreséléments• Texteetautres
125
Avecousansattribut(s)
<xs:element name="serie"><xs:complexType>
</xs:complexType></xs:element> <xs:element name="serie"
type="stype" /><xs:complexType name="stype"></xs:complexType>
![Page 126: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/126.jpg)
Élémentcomplexe(2)
• Vide– Ilsuffitdelisterlesattributssibesoin
• Texteseulement(avecextensionourestriction)
• Éléments+texte
126
<xs:complexType name="stype" mixed="true"> … </xs:complexType>
<xs:complexType name="stype"><xs:simpleContent><xs:restriction></xs:restriction>
<xs:simpleContent></xs:complexType>
![Page 127: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/127.jpg)
Élémentscomplexes(3)
• L'ordrenecomptepas• Lesélémentsapparaissent0ou1fois
• Undeséléments
• Élémentsdansl'ordre
• N'importequelélément
127
<xs:all>
<xs:choice>
<xs:sequence>
<xs:element maxOccurs="1" minOccurs="0" >
Possibilitédefairedesgroupesetdesgroupesd'attributs
<xs:any minOccurs="0" />
![Page 128: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/128.jpg)
Attribut
• Commeunélémentsimple• Aplaceraprèslesélémentscomplexes
• Optionnel– use :optional /required (pardéfaut)– default :doitrespecterletype– fixed
• Grouped'attributsetanyAttribute
128
<xs:attribute name="couleur" type="xs:string" default="red" />
![Page 129: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/129.jpg)
129
XPATH
• Langagepournaviguerdansledocument– 1.0et2.0(2007)– Sous-ensemble commundeXSLTetXQuery
• Fonctionsapplicables• Unélémentpeutêtreidentifiédemanièreunique• Formenormale/compacte
axe::nœudtest [exp1] [exp2] …
info0/info1/info2/info3/
![Page 130: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/130.jpg)
130
Étapedelocalisation– axe
• child– saufattributs– pardéfaut
• descendant• parent(unique)• ancestor• following-sibling• preceding-sibling
• following (dansledocument)
• preceding (dansledocument)
• attribute• self• descendant-or-self• ancestor-or-self
![Page 131: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/131.jpg)
Exemples
131
n1/n0/n0/n1//n1n0//n1//@lang
n0/n1 [1]/n0/n1 [last()]/n0/n1[@lang]/n0/n1[@lang="fr"]/bib/livre[prix>7.0]/titre../freres
touslesenfantsden1lenœudracinetouslesn1enfantsden0touslesn1touslesn1enfantsden0touslesattributslang
Premiern1
![Page 132: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/132.jpg)
Présentation
• CSS• XSLT1.0&2.0
132
![Page 133: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/133.jpg)
133
<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="comics.css"?><collection><serie nom="Trolls de Troy"><bd><titre tome="1">histoires trolles</titre><auteur>Arleston</auteur><dessin>Mourier</dessin><comment>Peur de rien !!!</comment>
</bd><bd><titre tome="2">le scalp du vénérable</titre><dessin>Mourier</dessin><auteur>Arleston</auteur><comment>La suite...</comment>
</bd></serie> <serie nom="Largo Winch"><bd><titre tome="1">Largo Winch</titre><auteur>Van Hamme</auteur><comment>Inspiré d'une mémoire dans la peau</comment>
</bd></serie></collection>
![Page 134: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/134.jpg)
134
serie {display :block;background-color:#1111FF;padding : 0.25em;margin:0.5em;
}bd {display : block;background-color:#AAAAFF;padding : 0.5em;margin:1em;
}
auteur, dessin, comment {display:block;margin-left : 3em;
}
![Page 135: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/135.jpg)
135
XSLT
• Langagedetransformation– D'unarbreXMLversunautre– SitransfoenHTML,c'estduXHTML;-)
• 2versions– Version1.0supportéeparlesnavigateurs
• Opérationsbasiques– Tri– Filtre
![Page 136: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/136.jpg)
136
Liendonnées/fichierXSL
<?xml-stylesheet type="text/xsl" href="comics.xsl"?>
<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="2.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns:nsp="espace de nommage"xmlns="http://www.w3.org/1999/xhtml">
![Page 137: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/137.jpg)
137
Patrons/templates
• Appliqueruntraitementàdesnœudsparticuliers(XPath)
<xsl:template match="/">…<xsl:value-of select="." />…
</xsl:template>
<xsl:apply-templates select="xpath"/>
![Page 138: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/138.jpg)
138
Patronsnommés
<xsl:template name="filtering"><xsl:param name="filter" select="'none'"/>…
</xsl:template>
<xsl:call-template name="filtering"><xsl:with-param name="filter" select="…"/> </xsl:call-template>
![Page 139: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/139.jpg)
139
Tris
<xsl:for-each select="//bd" order-by="+parution">
…</xsl:for-each>
//order facultatif,- permetchangerdesens
<xsl:apply-templates select="bd"> <xsl:sort select="parution" data-type="number" order="descending" /><xsl:sort select="titre" />
</xsl:apply-templates>
![Page 140: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/140.jpg)
140
Filtresetconditions(1)
<xsl:for-each select="//bd[@tome=1]">…</xsl:for-each>
Opérateurs:=!=<&>&
<xsl:if test=".[@tome='1']">…
</xsl:if>
<xsl:if test="name()='balise'">…
</xsl:if>
![Page 141: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/141.jpg)
141
Filtresetconditions(2)
<xls:choose><xsl:when match="…">
…</xsl:when><xsl:when match="…">
…</xsl:when><xsl:otherwise>
…</xsl:otherwise>
</xsl:choose>
![Page 142: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/142.jpg)
142
Variables
<xsl:variable name="chemin1" select="document('biblio.xml')/biblio/*"/>
<xsl:value-of select="count($chemin1)"/>
<xsl:apply-templates select="$chemin1"/>
Écrire parfois {$chemin1}
![Page 143: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/143.jpg)
143
Modificationdel'arbreXML
<xsl:element>
<xsl:attribute>
<xsl:comment>
<xsl:processing-instruction>
<xsl:text>
<xsl:copy> <xsl:copy-of>
![Page 144: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/144.jpg)
XMLETPROGRAMMATION
![Page 145: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/145.jpg)
145
XMLetprogrammation
• Simplefichiertexte(unicode)• Formatspécial– Analysedesdocumentsettransformationenarbres
– Navigationd'arbres–Manipulationsd'arbres– Sérialiserdesarbresenfichiertexte
![Page 146: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/146.jpg)
146
Technologies
• ModèleDOM– Chargementcompletenmémoire– DOM,JDOM,DOM4J
• SAX– "Streaming",pasdestockage– ApacheXerces (DOM+SAX)[Java,C++]
• JAXB– Passerd'unschémaàunjeudeclassesdemanièretransparente…(JavaEE)
• Diversesbibliothèques:XStream
![Page 147: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/147.jpg)
147
DocumentObjectModel
• RecommandationduW3C• Indépendantdulangagedeprogrammation• Support
– ArbreXML– XPath,DTD,XMLSchema
• Nœud– Document,Element, Attr,DocumentType, Notation,Entity,EntityReference, Processing Instruction,CharacterData (Text,Comment)
![Page 148: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/148.jpg)
148
JDOM
• MoinsgénériquequeDOM• Pasd'analyseurfourni– utiliserDOMouSAX
• Javaaveccollection• Structures– Parent
• Element,Document– Content
• Comment,ProcessingInstruction,EntityReference,Text,DocType,Element
![Page 149: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/149.jpg)
149
Quelquesclasses/méthodes
• Document– getDescendants()
• Element– getContents(), get/setAttribute(), addContent()
• Namespace• Filter
![Page 150: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/150.jpg)
150
import org.jdom.*;import org.jdom.input.*;
try {SAXBuilder b = new SAXBuilder();b.setValidation(true); // verification schema (DTD)// pour la validation XML schemab.setProperty("http://java.sun.com/xml/jaxp/
properties/schemaLanguage","http://www.w3.org/2001/XMLSchema");
String msg = "Pas d'erreur";try {Document d = b.build(new File(args[0]));
} catch (JDOMParseException e) {msg = e.getMessage();
}System.out.println(msg);
} catch(Exception e) {System.err.println(e);
}
Fichierbienformé?ValidationoptionnelleDTDpardéfaut
Exemple1:lecturedefichierXML
![Page 151: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/151.jpg)
151
org.jdom, org.jdom.input, org.jom.ouput, org.jdom.transform, javax.xml.transform
try {SAXBuilder b = new SAXBuilder();Document d = b.build(new File(args[0]));Transformer t =TransformerFactory.newInstance().newTransformer(
new StreamSource(new File(args[1])));JDOMSource in = new JDOMSource(d);JDOMResult out = new JDOMResult();// t.setParameter(nom, valeur);t.transform(in, out);Document h = out.getDocument();XMLOutputter outputter = new XMLOutputter();outputter.output(h, System.out);
} catch(Exception e) {System.err.println(e);e.printStackTrace();
}
Exemple2:TransformationXSLT
![Page 152: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/152.jpg)
152
SimpleAPIforXML
• Pasdestockageenmémoirecommelesautres– Lectureenlemoinsdepassespossibles
• SAX:reconstruirepartiellementl'arbre• Fluxdecaractères/événements–Méthodescallbacks
import org.xml.sax.*;import org.xml.sax.helpers.*;
![Page 153: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/153.jpg)
153
Evénements
• Débutdudocument• Balisededébut• Balisedefin• Déclarationd'espacedenommage• Espaceslus• Donnéescaractèreslues• Findudocument
![Page 154: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/154.jpg)
154
public class XMLSAXProject extends DefaultHandler {public void startDocument() {}public void endDocument() {}public void startElement( String uri, String localName,
String qName, Attributes atts) {}public void endElement( String uri, String localName,
String qName) {}public void ignorableWhitespace( char[] ch, int start,
int length) {}public void characters( char[] ch, int start,
int length) {} public void processingInstruction( String target,
String data) {}
public static void main(String[] args) {try {XMLSAXProject project = new XMLSAXProject();XMLReader read = XMLReaderFactory.createXMLReader();read.setContentHandler(project);read.parse(args[0]);} catch(Exception e) {
}}}
![Page 155: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/155.jpg)
JAXB
155
![Page 156: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/156.jpg)
156
XStream
• Initialiser
• Utiliserdesalias
• Sérialiser
• Désérialiser
XStream xstream = new XStream();
xstream.alias("classe", Classe.class);
String s = xtream.toXML(objet);
Classe classe = (Classe)xtream.fromXML(string);
![Page 157: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/157.jpg)
157
FileOutputStream fos = null;XStream xstream = null;try {
fos = new FileOutputStream(name);xstream = new XStream();xstream.toXML(objects, fos);
} catch (Exception e) {e.printStackTrace();
} finally {if (fos!=null) fos.close();
}FileInputStream fis = null;XStream xstream = null;try {
fis = new FileInputStream(name);xstream = new XStream(); objects = (Composite)xstream.fromXML(fis));
} catch (Exception e) {e.printStackTrace();
} finally {if (fis!=null) fis.close();
}
Classedel'objet
![Page 158: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/158.jpg)
JAVASCRIPT (ECMASCRIPT)
158
![Page 159: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/159.jpg)
javascript
– Langageobjetàprototype,interprétéettypagedynamique,syntaxeC-like
–Maisaussi:procédural,récursif– InventéparNetscape/BrendanEich(1995)
• VersionServeur/versionClient• JScript,ECMAScript, Java
– Navigateur:interfaceutilisateur• Validationdesdonnéesd'unformulaire• Événements surdescomposantsdelapage• Changement dynamiqueduDOM
159
![Page 160: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/160.jpg)
Inconvénients?
• ModificationduDOM• Compatibilité/priseenchargedesnavigateurs
– Quevoitl'utilisateur?– Lynx/Google
• Accessibilité?• Désactivable !
160
<noscript> JS est désactivé ou n'est pas supporté !
</noscript>
![Page 161: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/161.jpg)
Insertion?
• Où?– Codedansl'entête– CodedanslapageOuaib– Codedansunfichierextérieur
• Élémentutilisabledèsladéclaration• Portéed'unevariable/objet(function scope)• Lesfonctionssemanipulentcommedesobjets• Sensibleàlacasse
161
<script type="text/javascript" src="f.js"> </script>
![Page 162: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/162.jpg)
Afficheruneboitededialogue
162
<script type="text/javascript"><!--
alert("un chtit message!");// -->
</script> <script type="text/javascript"><![CDATA[
/* code javascript */>// ]]>
</script>
![Page 163: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/163.jpg)
Écriresurlapage
163
<script type="text/javascript">var prenom = "loic";document.write("<p>");document.write(prenom);prenom = 0;document.write(prenom);document.write("</p>");
</script>
TYPAGEDYNAMIQUE
Quevoitlenavigateur?
POINTVIRGULE!
Oubliduvar?
Varaprès?
![Page 164: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/164.jpg)
Fonction
164
<script type="text/javascript">function debogage(texte) {
alert("le lien "+texte);// return false;
}</script>
<a href="javascript:debogage('2');">Cliquer sur le lien</a>
<a href='debogage("3");'>clic</a>
OPTIONNEL
![Page 165: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/165.jpg)
Portée/scopedesvariables
165
<script type="text/javascript">v1 = "essai";var v2 = 10;
function portee(texte) {var v3 = "…";v4 = 3;alert(v4);var v4 = 2;v5 = 2;
}</script>
Scopeglobal=Objet
window
"usestrict";
![Page 166: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/166.jpg)
Fonctionanonyme
166
var rigolo = function () {…
};
rigolo();
(function () {})();
Exécution immédiate
Créationd'unespacedenommage!
![Page 167: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/167.jpg)
Objets
• Prédéfinis– Date,String,Number,Boolean,Error,RegExp– Array– DOM
• document• window
• Personnels
167
var o1 = new Object;o1.att = 13;var o2 = {} ;
![Page 168: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/168.jpg)
Objet
168
function Classe() {this.att1 = "0";this.att2 = 12;this.aff = afficher;this.mod = function(a,b) {};
}
var o2 = new Classe();o2.aff();
function afficher(a) {document.write(a+this.att1);
}
Classeestun"Constructeur"
PasdenotiondeclasseenJS
Classe.prototype.display = function() {};
Copied'objet
![Page 169: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/169.jpg)
Héritageparprototype
169
function Mere(nom) {this.nom = nom;
}
function Fille(nom, prenom) {Mere.call(this, nom);this.prenom = prenom;
}
Fille.prototype = Object.create(Mere.prototype);
![Page 170: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/170.jpg)
Closure /fermeture
170
function f(a) {var b = 3;var self = this;var g = function() {
b ?this ?
}return g;
}
https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures
![Page 171: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/171.jpg)
Tableauusuel
171
var tab = new Array();
tab[0] = "zero";tab[1] = "un";tab[2] = 2;
tab.push("trois");
var tab2 = [3.14, 6.28];
for(var i=0; i<tab.length; ++i)document.write(tab[i]);
![Page 172: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/172.jpg)
Tableauassociatif
172
var tab = new Array(); /* Object */
tab["un"] = 1;tab["deux"] = 2;tab.trois = 3;
var tab2 = { "un" : 1, "deux" : 2};
for(var cle in tab)document.write(cle+" "+tab[cle]);
Pasdepropriétélength
![Page 173: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/173.jpg)
DocumentObjectModel
• StandardW3C(Level 3)• Modèleuniverselpourgéreretaccéderàundocument– HTML/XHTML/XML
• Stockagedudocumentsousformed'arbre(s)– Nœud:doctype,élément,commentaire, instructiondetraitement, texte,shadowdom…
• Gestiondesévénements
173https://dom.spec.whatwg.org/#introduction-to-the-dom
![Page 174: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/174.jpg)
174
![Page 175: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/175.jpg)
DOM:getElementById()
175
<script type="text/javascript">function apparait() {
document.getElementById('rep1').style.display="block";
}</script>
<p>Voici une question ?</p><a href="javascript:apparait();">Cliquer pour la réponse</a><p id="rep1" style="display:none">Voici la réponse</p>
Faireapparaîtreoudisparaîtreletexte.
![Page 176: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/176.jpg)
DOM:getElementsByTagName()
176
<script type="text/javascript">function changeP() {var blocs =
document.getElementsByTagName('p');
for (var i=0;i<blocs.length;i++) {blocs[i].innerHTML = "bleu";blocs[i].style.backgroundColor = "blue";
}}
</script>
getElementsByClass()possiblepourunnavigateurrécent
![Page 177: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/177.jpg)
DOM:surlesnœuds
177
var d = document;
var b = d.getElementsByTagName("body")[0];var p = d.createElement("p");var t = d.createTextNode("nouveau P");
p.appendChild(t);b.appendChild(p);
p.setAttribute("class","bleue");
p.innerHTML = "nouveau P";
![Page 178: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/178.jpg)
Validationformulaire
178
<form name="formu" id="form1"action="…" method="post" onsubmit="javascript:return valider();" ><input type="text" name="email" />
</form>
function valider() {var r = true;var e = document.forms["formu"]["email"]; if (e.value.indexOf("@")<0) {alert("email non valide");r = false;
}return r;
};
ousélectionparid
![Page 179: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/179.jpg)
Événements
• DécritsparleDOM• SupportdesListeners• Gestiondelapropagation– Capture/Cible/Bubbling
• Synchronesetasynchrones• Actionspardéfaut/annulables• Déclencheursd'activation
179
![Page 180: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/180.jpg)
Propagationdesévénements
180https://w3c.github.io/uievents/
![Page 181: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/181.jpg)
Quelquesévénements• click• dblclick• mouseover• mouseout• mousedown• mouseup• mousemove• keydown /keyup
• keypressed• focus /blur• change• select• submit• reset• load
181
Événements touch PropagationOrdredesévénements
preventDefault()
![Page 182: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/182.jpg)
Gérerlesévénements
• Attributsurbalise
• Propriétéd'unélément
182
<a href="…" onclick="…;return false;">
<p onmouseover="…">
var e = document.getElementById("EEE");e.onclick = function(ev) {}
e.addEventListener('click', function(ev){}true/false );
![Page 183: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/183.jpg)
Console/Débogueur
• intégrés– IE9+(F12),Chrome,Opera (?)
• avecextension– FF(Firebug)
183
<script type="text/javascript">function log (text) {if (typeof console !== 'undefined')
console.log(text); else alert(text);
} </script>
![Page 184: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/184.jpg)
"Etpisc'esttout!"
• Navigateur– Détection
• Cookies• Informationsdocuments
– Datedemiseàjour,url
• Temps,Animations– Timer
• Erreurs
184
Allerplusloin?Performanceweb
![Page 185: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/185.jpg)
Construireunmenu
185
<h1>Titre
Menu<ol>
Contenu<h2><h3>
Aconstruiredynamiquement
![Page 186: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/186.jpg)
ECMAscript 6ouJS2015
• Encoursd'implémentationparlesnavigateurs• Objet="sucresyntaxique"
• Typescript (MS)• Traceur
186
![Page 187: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/187.jpg)
jQUERY
187
![Page 188: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/188.jpg)
jQuery ?
• FrameworkJavascript– Portable– Apporte lacompatibilité(sélecteursetIE6)
• Plugins• Projet:Core,UI,Qunit,…• Inconvénientsmajeurs:
– lataille– Deuxversions
• Concurrents:mootools,Prototype,GWT,…
188
![Page 189: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/189.jpg)
$(function() {/* code */
});
jQuery !
• Sélecteurs– Utilisationdesfonctionsanonymes
• Événements/Animations• OpérationssurleDOM• AJAX• Documentchargé
189
$(document).ready(function() {/* code a exécuter */
});
![Page 190: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/190.jpg)
Inclusion
• Versiondeproduction"minified"• Nombreuxgreffons• Récupération
– Google/MS/Yahoo• Miseencache• Allègechargeserveur
– Locale
190
<script type="text/javascript"src="jquery.js">
</script>
![Page 191: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/191.jpg)
jQuery ?
• Objet– Utilitaires
• Méthode– Opérationssurdeséléments– Renvoieunobjet– Chainable
• Modenonconflit
191
$ estunnomdevariablelégal enjavascript.Attention auxconflitssid'autresbibliothèques sontutilisées
jQuery ou $
jQuery() ou $()
jQuery.noConflict()
![Page 192: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/192.jpg)
Utilitaires
• Type:$.isArray()isFunction()isEmptyObject()…• Sérialisation:$.param()• $.browser
– .mozilla .msie .opera .webkit
• VersiondejQuery :$.fn.jquery• DOM:contains() unique()…• Événements:queue()…• Chaînesdecaractères:trim()
192
![Page 193: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/193.jpg)
Utilitairestableaux
• Parcours:$.each()• Filtreetsélection:$.grep()$.inArray()• Nouveautableau:$.map()$.makeArray()• Fusion:$.merge()$.extends()
193
$.each(tab ou objet, function(ind, val) {/* iteration *//* index ou cle, val = tab[index] */
});
![Page 194: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/194.jpg)
Sélecteurs(1)
• Sélectiond'élément(s)=>sélecteurCSS• MiseenbouchedeCSS3(p+n)• Sélecteurspropres(p~s)
194
$("body")
$("p > a")[0] /* size() ou length */
$("p").each(function() {/* this est l'élément */
});
![Page 195: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/195.jpg)
Sélecteurs(2)
• [attr],[attr^=],[attr$=]• Pasd'attributoupaslavaleur
• :contains(texte)• :has(selecteur),:not(selecteur)• :first-child(),last-child(),:first,:last,• :nth-child(),:even(),:odd()• :lt(index),:gt(index),eq(index),slice(i1,i2)
195
$("p[class!='justify']")
http://api.jquery.com/category/selectors/
![Page 196: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/196.jpg)
Parcourir
• .add()• .each(),.map(fonction)• .is(),.filter();.get()• .parent()• .next()• .prev()• .children()• .first(),.last()
196http://api.jquery.com/category/traversing/
![Page 197: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/197.jpg)
DOM
• hasClass()• addClass()/removeClass()/toggleClass()• css(clé,valeur)• append(),prepend()
• html()/val()/text()• attr(nom,valeur)/removeAttr()• prop(nom[,valeur])/removeProp():checked
197
![Page 198: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/198.jpg)
Animations
• slideUp()/slideDown()/slideToggle ()• fadeIn()/fadeOut()/fadeTo()/fadeToggle()• show()/hide()/toogle()/• animate()• stop()• queue()
198
![Page 199: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/199.jpg)
Événements:click
• Lierélémentetunévénement
• Lancer(trigger)unévénement
• returntrue/falseoupreventDefault()• TouslesévénementsclassiquesJSsontutilisables
199
$("").bind("click", function(){});$("").live("click", function(){});$("").click(function() {});
$("").click();
Versionrécente:.on()
![Page 200: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/200.jpg)
Exemple:surbrillance
200
$('p:contains('+s+')').each(function(){
var reg = new RegExp(s, "g");$(this).html( $(this).html()
.replace(reg ,"<span class='hilite'>"+s+"</span>")
); });
Ajouteruneboitederecherchesurunepagepourmettreensurbrillance
$t =$(this)
![Page 201: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/201.jpg)
• Testeravecunchainesimple– Ajouter laclassehilite enCSS– Ledocumentdoitêtrechargé
• Mettreunpetitformulaire• Gérerlecasoùlechamptexteestvide
– Désactiver lebouton?
• Permettredesrecherchessuccessives– removeClass (marchepasbien)– Rechargerlapage(pasbô)– .contents().unwrap()
201
![Page 202: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/202.jpg)
Leretourdumenu
202
<h1>Titre
Contenu<h2><h3>
Menu<ol>
Aconstruiredynamiquement
Affichage"sympa"
![Page 203: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/203.jpg)
JSON
• JavaScriptObjectNotation• AlternativeauXML
– Rapideetnatif(eval())– Plusléger/moinsverbeux– Standard,supportépardenombreuxlangages– Contenu
• Pairesclés/valeurs• Listeordonnéedevaleurs
– Sécurité?
203
![Page 204: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/204.jpg)
204
{ "prenom": "ISIMA","nom" : "ZZ","age" : 23, "adresse" : {
"rue": "1 rue de la Chebarde","comp": "TSA 60125 – CS 60026","ville" : "Aubiere CEDEX","codepostal" : "63178"
}, "telephone": [ { "type" : "domicile","numero": "0473405000" }, { "type" : "portable","nummero": "0600000000" }]
}
![Page 205: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/205.jpg)
AJAX
• Asynchronous JavascriptAndXML• Communicationclient-serveursansrechargerunepagecomplète
• XMLHttpRequest()– Scriptdanslemêmedomainequeleserveur– Implémentation suivantnavigateurs
• SupportparjQuery.ajax()– Textesimple,XML,JSON
205
![Page 206: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/206.jpg)
Fichiersourcetexte
206
<?phpheader("Content-Type:text/html");
$rep = "";$rep = utf8_encode($txt)echo $rep;
?>
<% @page contentType="text/html"pageEncoding="UTF-8"
%>
.php
.jsp
![Page 207: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/207.jpg)
FichiersourceXML
207
<?phpheader("Content-Type:text/xml");
$rep = "";$rep = utf8_encode($txt)echo $rep;
?> .php
![Page 208: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/208.jpg)
FichiersourceJSON
208
<?phpheader("Content-Type:application/json");
$rep = "";$rep = utf8_encode($txt)echo $rep;
?>
jQuery >1.5
.php
![Page 209: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/209.jpg)
Codeclient
209
function texte() {$.ajax({url : "html.php",complete : function (xhr, result) {if (result!= "success") return;var response = xhr.responseText;$(response).appendTo("body");}
});}
![Page 210: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/210.jpg)
Validationformulaire
210
http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/
![Page 211: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/211.jpg)
jQuery UI
• Interactions– Drag&drop,tableaux
• Widgets• Effets• Thèmes
211
![Page 212: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/212.jpg)
HTML5/CSS3
212
![Page 213: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/213.jpg)
HTML5/XHTML5
• Simplification• Nouvellesbalisessémantiques• Supportdesnavigateurs!Etavisdivergents• http://www.html5test.com• http://html5demos.com/• http://caniuse.com
213
![Page 214: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/214.jpg)
Syntaxepermissiveetsimplifiée
• Simplification
• <html><head><body><thead><tfoot><tbody>optionnelles
• <p><li><tr><td>[…]ferméesautomatiquement• Attributtypepour<style>et<script>inutile
• AttentionauXHTML5
214
<!doctype html>
<meta charset="utf-8">content htmlimplicite
![Page 215: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/215.jpg)
Nouvellesbalises(sémantiques)
• <header>• <footer>• <nav>• <aside>• <section>• <article>• <figure>
• <figcaption>• <hgroup>• <time>• <mark>
215
D'autresbalises?
![Page 216: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/216.jpg)
216
<header>
<aside>
<footer>
<nav>
<section><article><header><h1><div>
<aside>
<section><article><header><h1><div>
<aside>
Css avancées,Goetter
![Page 217: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/217.jpg)
Utilisation
• Pasreconnuespartous– Voirepasaffichéesdutout(IE8)– Pasdesens(moteursderecherche)– Sécurité:Préciser
• InternetExplorer8- ?=>javascript
217
display : block;
<!– [if lt IE 9]><scriptsrc="http://html5shiv.google.com/svn/trunk/html5.js"
<![endif] -->
document.createElement("header");
![Page 218: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/218.jpg)
Audio
• Options:autoplay etcontrols• Formats:mp3,ogg,wav
– mp3:ie9,Chrome,Safari– wav :FF,Safari,Opera
218
<audio id="lecteur" autoplay controls><source src="musique.mp3"><source src="musique.wav">
</audio>
document.getElementById("lecteur").muted
![Page 219: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/219.jpg)
Video• Options:autoplay, controls,preload,loop,poster• Formats:h264(mp4),ogv,webM
– H264:IE9,Safari,Opera– WebM :IE9,FF,Chrome,Opera– L'ordrepeutêtreimportant()
219
<video controls><source src="pingouin.mp4" type="video/mp4"><source src="pingouin.webm" type="video/webm"><object type=application/x-shockwave-flash"
data="pingouin.swf"<param …. />
</object>Texte alternatif
</video>
![Page 220: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/220.jpg)
220
Canvas (1)
<canvas id="dessin" width="640" height="400">Ici, quelque chose que le navigateur ne peut afficher
</canvas>
<script>var dessin = document.getElementById("dessin");var gc = dessin.getContext("2d");
var grad = gc.createLinearGradient(0,50,0,95); grad.addColorStop(0, "blue");grad.addColorStop(1, "lightblue");gc.fillStyle = grad;gc.fillRect(0,0,600,300);
</script>
3Dpossible
![Page 221: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/221.jpg)
Canvas (2)
221
<script>gc.fillStyle = "red";gc.arc(0,0, 200, 0, Math.PI*2, true);gc.fill();
gc.shadowBlur = 50;gc.shadowColor = "green";gc.lineWidth = 10;gc.strokeStyle = "red";gc.stroke();
gc.fillStyle="yellow";gc.font="48px arial";gc.fillText("un dessin pas tres beau", 10, 50);
</script>
Allerplusloin:https://developer.mozilla.org/en/Canvas_tutorial
![Page 222: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/222.jpg)
222http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
![Page 223: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/223.jpg)
223
![Page 224: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/224.jpg)
Formulaire
• datalist• keygen• meter• progress• output
• color• datetime• monthweek• datetime[-local]• email• number• range(slider)• search• tel• url
224
input
![Page 225: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/225.jpg)
inputtype="email"
225
input:valid {border : 1px solid green;border-right: 8px solid green;
}input:invalid {
border : 1px solid red;border-right: 8px solid red;
}
<input type="email" id="email" placeholder="saisir un courriel" required autofocus >
![Page 226: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/226.jpg)
progress
226
<progress id="p" value="0" max="200"> </progress>
<body onload="timer()">
function timer() {var c = document.getElementById('p').value;if (c>document.getElementById('p').max-1)
c=0;c=c+1;document.getElementById('p').value = c;setTimeout("timer()",20);
}
![Page 227: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/227.jpg)
Drag&drop
• Attribut:draggable true/false• Transfertdedonnées
– setData()getData()effectAllowed dropEffect
• Nouveauxévénements– dragstart :objetsaisi– drag:pdt toutledéplacement– dragend :findel'opération– drop:objet lâché– dragenter,dragover,dragleave :entrée/sortied'unezonededrop
• Élémentendehorsdunavigateur?227
![Page 228: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/228.jpg)
228
<div id="gauche" ondrop="drop(this, event)"ondragover="return false">
<div id="data1" draggable="true" ondragstart="drag(this, event)">1</div>
<div id="data2" draggable="true" ondragstart="drag(this, event)">2</div>
</div>
<div id="droite" ondrop="drop(this, event)"ondragover="return false">
function drag(target, ev) {ev.dataTransfer.setData("Text", target.id);ev.dataTransfer.effectAllowed='move';
}function drop(target, ev) {var id = ev.dataTransfer.getData("Text");target.appendChild(document.getElementById(id));ev.preventDefault();
}
Autoriserledrop
![Page 229: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/229.jpg)
Mémoire
• Cookie?• sessionStorage
– Unsite,mêmefenêtre
• localStorage– Plusieurssessions
• Javascript /JSON
• setItem(nom,valeur)/getItem(nom)• clear()
229
![Page 230: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/230.jpg)
TODOlist
230
Chosesàfaire:• Html5• Css 3• javascript
Nouveau…… Ajouter
HTML :<ul contenteditable="true">
Effacer
JAVASCRIPT :document.querySelectorAll("li").lengthdocument.getElementById("liste").innerHTMLonload / onkeyup / onclicklocation.reload()
![Page 231: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/231.jpg)
Etencore?
• Nouveauxélémentsdeformulaire• Géolocalisation• Webhorsligne• Drag&drop• Websocket&webworkers
– Connexionbidirectionnellepermanente (Chat)– Petitsscriptsentachedefond
231
+FileAPI
![Page 232: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/232.jpg)
CSS2.0ou2.1
• min-widthmax-widthmin-heightmax-height• :before :after
232
li { display : inline; }li + li:before {
content : " > ";}
blockquote:before {content : url(une_image.png);
}
@media print {a:after {content : "( " attr(href) ")";
}}
![Page 233: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/233.jpg)
CSS3
• Rôleplusimportantpourattr etcontent
• Nouvellespropriétés/nouveauxsélecteurs• :pseudo-classe• ::pseudo-élément
– Noté:pseudo-élément pourrétrocompatibilité
233
p {float : attr(class);
} <p class="left"> … </p>
![Page 234: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/234.jpg)
Supportdesnouveautés?Préfixespropriétaires
234
p {-webkit-border-radius : 15px;-moz-border-radius : 15px;-khtml-border-radius : 15px;-o-border-radius : 15px;-ms-border-radius : 15px;border-radius : 15px;
}
Préfixesnonreconnusparlesoutilsdevalidation
![Page 235: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/235.jpg)
Propriétés(contenu)
• word-wrap:normal,break-word• overflow:hidden,scroll,auto• overflow-x(ouy):visible,auto(fixe),scroll,hidden• text-overflow:none,ellipsis (…)• resize :none,vertical,horizontal,both• column-count:2• column-gap:10px• column-rule :1pxsolid black
235
![Page 236: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/236.jpg)
Propriétés(décoratives)
• @font-face• border-radius• opacity ourgba(255,0,0,0.5)• box-shadow• text-shadow• border-image• background-sizeetbackgroundmultiple
236
![Page 237: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/237.jpg)
Nouveauxsélecteurs(1)
• attribut^="commence"• attribut$="finit"• attribut*="contient"• input[type="url"]• a[href^="mailto:"]• a[href$="doc"]
237
![Page 238: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/238.jpg)
Nouveauxsélecteurs(2)
• :lang(fr)– sélectionneruncontenusurlalangue– hérité(hack)
• :empty• :root =htmlmaisavecplusdepriorité• :target :cibled'uneancre• :not
238
:not(a)a:not(visited)li:not(:first-child)
![Page 239: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/239.jpg)
Nouveauxsélecteurs(3)
• :last-child• :nth-child()
• :nth-of-type()
• :only-child• :only-of-type• :first-of-type()/:last-of-type()
239
:nth-child(2) : 2ème enfant:nth-child(even) /* pair */:nthchild(3n+1):nthchild(-n+3) : les 3 1ers
p:nth-of-type (2)2ème paragraphe
![Page 240: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/240.jpg)
Nouveauxsélecteurs(4)
• :enabled• :disabled• :checked
• :required• :optional
240
![Page 241: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/241.jpg)
Nouvellesunités
• rem:root em– Tailleparrapportàlabalisehtml– IE9+
• vh :viewport height /100• vw :viewport width /100• vmin,vmax
241
![Page 242: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/242.jpg)
calc()
242
h1 {width : 100 %;padding : 1em;
}
h1 {width : 90 %;width : calc(100% - 2em );padding : 1em;
}Lesespacessont
importantsLesespacessont
importants
Erreurmodèledeboitestandard
oubox-sizing :border-box
![Page 243: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/243.jpg)
Variables
• Nouveaumodule– DéjàprésentesdansSass /Less /…– Supporttrèslimité(NoMSniAndroid)
• Validitéparélément– Héritageetcascadedesvaleurs
243
:root {--couleur1 : blue;
}
h1 {background-color : var (--couleur1);
}
![Page 244: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/244.jpg)
Mediaqueries• [min-/max-]width /height• Orientation• Only pourcompatibilité
• Adapter lenombredecolonnessuivantl'affichage
244
p { display:table-cell; }
@media screen and (max-width:600 ) {p { display:block; } }
}
Tester lerésultat:http://cybercrab.com/screencheck/
Responsivedesign
![Page 245: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/245.jpg)
ResponsiveWebDesign
• EthanMarcotte1. MobileFirst2. Dégradationharmonieuse
• Grillefluide• Imagesflexibles• Media queries
245
![Page 246: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/246.jpg)
Transformations
• Zoom:scale(0.5)scale(2)scale(-1)• Rotation:rotate(45deg)rotate(1.5rad)• Perspective:skew(10deg,10deg)• Translation:translate(x,y)• Combinaison:matrix
246
transform : scale(2) rotate(45deg);
![Page 247: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/247.jpg)
Transitions
• Passaged'unepropriétéCSSàuneautre– Lorsd'unévénement (Javascript)– Avecunepseudoclasse:hover
247
img {width:50px;transition-property : width;transition-duration : 1000ms;transition-timing-function : ease;
}img:hover {
width:100px;}
![Page 248: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/248.jpg)
HackIE6-IE9/Polyfill
• modernizr• css3pie.com
248
background: -moz-linear-gradient(#D3DAE9, #576E94);
background: linear-gradient(#D3DAE9, #576E94);
-pie-background: linear-gradient(#D3DAE9, #576E94);
behavior:url(./PIE.php);
Etpleind'autreshttp://reference.sitepoint.com/css/hacksPourlesgradients:http://www.colorzilla.com/gradient-editor/
![Page 249: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/249.jpg)
Etencore?
• Animations– Imagesclés
• css3please.com• css3generator.com• caniuse.com
249
![Page 250: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/250.jpg)
Amusez-vousbien….
• Framework– [Twitter]Boostrap– Boilerplate (Initializr)– pureCSS.io (yahoo)
• Javascript– Modernizr (Détection)– HTLM5Shiv(HackIE)
250
![Page 251: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/251.jpg)
Accessibilité
• Norme:WAI-ARIA• Pointsdecontrôle• Rôles
251
![Page 252: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/252.jpg)
Etmaintenant?• ComposantsWeb• Flexbox
• Websémantique(Web3.0)
252Source:http://www.commitstrip.com/fr/2014/02/12/no-one-is-immune/
![Page 253: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/253.jpg)
253
![Page 254: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/254.jpg)
254
Bibliographie(1)
• CSS2Pratiquedudesignweb,2ème éd,RGoetter,Eyrolles,2005
• CSSavancées.VersHTML5etCSS3,2ème éd,R.Goetter,Eyrolles,2012
• AnIntroductiontoXMLandWebTechnologies,A.Moller,M.Schwartzbach,AddisonWesley,2006
• jQuery &jQuery UI,E.Sarion,Eyrolles,2011• ResponsiveWebDesignavecHTML5etCSS3,BFrain,
Pearson,2013• HTML5,J-P Vincent,JVerrechia,DUNOD,2011
![Page 255: Web - ISIMA](https://reader034.vdocuments.site/reader034/viewer/2022042619/588204891a28abf05e8b5579/html5/thumbnails/255.jpg)
255
Bibliographie(2)
• http://openweb.eu.org• http://www.w3school.com• http://css.alsacreations.com• http://www.gchagnon.fr/cours/xml/• http://json.org• http://www.jquery.com• https://developer.mozilla.org/en/JavaScript/A_re-
introduction_to_JavaScript