HTML, CSS et Javascript

Download HTML, CSS et Javascript

Post on 21-Jan-2018

1.428 views

Category:

Technology

1 download

TRANSCRIPT

1. IN20 Informatique Sance 7 HTML, CSS et Javascript Sbastien Combs, Quentin Lurkin lundi 26 octobre 2015 2. Ce(tte) uvre est mise disposition selon les termes de la Licence Creative Commons Attribution Pas dUtilisation Commerciale Pas de Modication 4.0 International. 3. Rappels Manipulation de chiers texte et binaire Ouverture et fermeture du chier Lecture et criture dun chier Gestion des erreurs dentre/sortie Encodage de linformation Encodage des caractres, standard Unicode Srialisation avec le module pickle Stockage bas niveau avec le module struct 3 4. Objectifs Comprendre le World Wide Web (WWW) Identication des ressources avec des URLs Principe du client-serveur Couches principales de lInternet Langages du web Cration de documents avec HTML (HyperText Markup Language) Dnition de styles avec CSS (Cascading Style Sheet) Aspect dynamique ct client avec Javascript 4 5. World Wide Web 6. World Wide Web (WWW) Espace dinformations contenant des ressources Documents texte et autres ressources Ressources lies entre elles par des liens hypertextes Identication des ressources par des URLs Bref historique Invent par Paul Otlet (visionnaire) en 1934 Invent par Tim Berners-Lee en 1989 Premier navigateur web en 1990 avec laide de Robert Cailliau 6 7. Personnages cls Paul Otlet 18681944 (BE) Sir Tim Berners-Lee 1955 (UK) Robert Cailliau 1947 (BE) 7 8. Internet (1) Systme compos dun ensemble de rseaux interconnects Relie des milliards de machines entre elles Lanc en Californie en 1969 (ARPANET) Premier change dun message lectronique entre deux machines Premires connexions intercontinentales en 1988 (NORDUnet) Rseau dchange de donnes pour cinq pays nordiques dEurope Supporte de nombreuses ressources et services WWW, app, e-mail, tlphonie, partage de chiers, jeu en ligne... 8 9. Internet (2) 9 10. Client/Serveur Communication entre un client et un serveur 1 Le client se connecte au serveur 2 Le serveur accepte la connexion 3 Le client et le serveur communiquent 1 Le client envoie une requte au serveur 2 Le serveur analyse la requte et rpond au client La connexion peut tre ferme par le client ou le serveur Internet 10 11. Serveur web Serveur utilis pour publier des sites web Communication avec ce serveur laide du protocole HTTP Support dautres protocoles pour orir dautres services Envoi de-mails, streaming, transfert de chiers... Serveur web publics relis Internet Certains serveurs web sont privs et limits un rseau local 11 12. Uniform Resource Locator (URL) Une URL rfrence une ressource web sur un rseau Localisation sur le rseau et mcanisme pour la rcuprer Plusieurs mcanismes daccs possibles http indique une page web ftp utilis pour le transfert de chier mailto permet lenvoi dun e-mail jdbc permet daccder une base de donnes ... 12 13. HyperText Transfer Protocol (HTTP) Protocole de communication de donnes pour le WWW Coordonn par lInternet Engineering Task Force (ETF) et le Word Wide Web Consortium (W3C) Utilisation dhyperliens entre des nuds Permet de naviguer travers le web Protocole de type requte-rponse Construit suivant une architecture client/serveur 13 14. HTML 15. HyperText Markup Language (HTML) Langage de balisage pour reprsenter des pages web Fichier texte permettant dcrire de lhypertexte Plusieurs autres roles Information smantique par rapport au contenu Information de mise en forme du contenu Inclusion de ressources multimdia (image, formulaire...) 15 16. Historique HTML 2.0 (24 novembre 1995) Le W3C publie HTML 3.2 (14 janvier 1997) Le W3C reprend le travail sur HTML, arrte par lIETF Trois variantes de HTML 4.0 (18 dcembre 1997) HTML 4.0 strict, transitional et frameset HTML 5 publi comme recommandation W3C (28 octobre 2014) Modernisation de la version 4 avec support multimdia, des images SVG, du MathML... 16 17. lement et balise lment du document dlimit par des balises Typiquement une balise ouvrante et une balise fermante Balise forme par le nom de llment entour de chevrons Avec un / en plus pour distinguer la balise fermante Imbrication de balises, en les fermant dans le bon ordre Dernire balise ouverte = premire balise ferme 1 Titre de premier niveau 2 3 Voici un paragraphe avec un mot en gras dedans . 17 18. lement et balise lment du document dlimit par des balises Typiquement une balise ouvrante et une balise fermante Balise forme par le nom de llment entour de chevrons Avec un / en plus pour distinguer la balise fermante Imbrication de balises, en les fermant dans le bon ordre Dernire balise ouverte = premire balise ferme 1 Titre de premier niveau 2 3 Voici un paragraphe avec un mot en gras dedans . 17 19. Attribut Ajout dattribut pour congurer llment Se placent dans la balise ouvrante Un attribut est compos dune cl et dune valeur Valeur entre guillemets doubles, et parfois optionnelle 1 Passez la souris sur ce paragraphe pour avoir des informations complmentaires . 2 3 Faire une recherche 18 20. Attribut Ajout dattribut pour congurer llment Se placent dans la balise ouvrante Un attribut est compos dune cl et dune valeur Valeur entre guillemets doubles, et parfois optionnelle 1 Passez la souris sur ce paragraphe pour avoir des informations complmentaires . 2 3 Faire une recherche 18 21. Entte et corps Dclaration du type de document au dbut du chier pour lHTML 5 Le document est dclar avec llment html Entte du document (mta information) avec head Corps du document (contenu visible) avec body 1 2 3 4 5 Tuyaux examen IN20 6 7 8 Un seul tuyau : comprendre la matire ! 9 10 19 22. Entte et corps Dclaration du type de document au dbut du chier pour lHTML 5 Le document est dclar avec llment html Entte du document (mta information) avec head Corps du document (contenu visible) avec body 1 2 3 4 5 Tuyaux examen IN20 6 7 8 Un seul tuyau : comprendre la matire ! 9 10 19 23. Titre Plusieurs niveaux de titre (de 1 6) Au maximum un seul titre de niveau 1 par page Utilisation des lments h1 h6 1 CU20 Cuisinologie 2 3 Chapitre 1 : Dpieauter la bte 4 5 Identifiez dabord o est la peau ... 6 7 Chapitre 2 : Temprature optimale du four 8 9 Le gradient de temprature doit tre Lipschitz continu ... 20 24. Titre Plusieurs niveaux de titre (de 1 6) Au maximum un seul titre de niveau 1 par page Utilisation des lments h1 h6 1 CU20 Cuisinologie 2 3 Chapitre 1 : Dpieauter la bte 4 5 Identifiez dabord o est la peau ... 6 7 Chapitre 2 : Temprature optimale du four 8 9 Le gradient de temprature doit tre Lipschitz continu ... 20 25. Section et paragraphe Insertion dune section avec llment section Possde un titre, plusieurs paragraphes et des sous-sections Paragraphe insr grce llment p 1 2 Srie du mois 3 4 La srie du mois est American Horror Story. Il y a dj 5 saisons cette srie , pour un total de 54 pisodes . 5 6 Il sagit dune srie tlvise dramatique et dhorreur . 7 21 26. Section et paragraphe Insertion dune section avec llment section Possde un titre, plusieurs paragraphes et des sous-sections Paragraphe insr grce llment p 1 2 Srie du mois 3 4 La srie du mois est American Horror Story. Il y a dj 5 saisons cette srie , pour un total de 54 pisodes . 5 6 Il sagit dune srie tlvise dramatique et dhorreur . 7 21 27. Lien hypertexte Lien hypertexte vers une ressource avec llment a Lien typiquement identi par une URL Attribut href pour spcier la cible du lien Le texte du lien doit dcrire la page lie viter des ici , ou cliquez ici , ou encore ce lien ... 1 Allez sur le site du W3C ! 22 28. Lien hypertexte Lien hypertexte vers une ressource avec llment a Lien typiquement identi par une URL Attribut href pour spcier la cible du lien Le texte du lien doit dcrire la page lie viter des ici , ou cliquez ici , ou encore ce lien ... 1 Allez sur le site du W3C ! 22 29. Formatage (1) Formatage de base de texte dans un paragraphe Texte en gras avec llment b Texte important avec llment strong Texte en italique avec llment i Texte emphas avec llment em Positionnement du texte dans le texte Texte en indice avec llment sub Texte en exposant avec llment sup 23 30. Formatage (2) 1 Le sel , cest un ion Na + et un Cl -. 2 Mais le seul nest pas lectrique , encore heureux ! 3 Dabord dessus , et puis dessous . 24 31. Image Insertion dune image avec llment img Chemin vers limage identi par une URL, ou en relatif Trois attributs pour congurer limage Attribut src pour spcier le chemin de limage Attributs width et height pour les dimensions (pixels) Attribut alt pour un texte alternatif Balise orpheline, pas de balise fermante 1 25 32. Image Insertion dune image avec llment img Chemin vers limage identi par une URL, ou en relatif Trois attributs pour congurer limage Attribut src pour spcier le chemin de limage Attributs width et height pour les dimensions (pixels) Attribut alt pour un texte alternatif Balise orpheline, pas de balise fermante 1 25 33. Tableau Insertion dun tableau avec llment table Un tableau est dcrit par des lignes composes de cellules Lignes reprsentes par llment tr et cellule par td ou th 1 2 3 Nom 4 Prnom 5 6 7 Louis 8 Breyne 9 10 26 34. Tableau Insertion dun tableau avec llment table Un tableau est dcrit par des lignes composes de cellules Lignes reprsentes par llment tr et cellule par td ou th 1 2 3 Nom 4 Prnom 5 6 7 Louis 8 Breyne 9 10 26 35. Liste Insertion dune liste numrote ou non avec llment ul ou ol Chaque lment de la liste est insr avec llment li Insertion dune liste de dnitions avec llment dl Mot insr avec llment dt et dnition avec dd 1 Quand mon rveil sonne le matin ... 2 3 Je le prolonge de 10 minutes 4 Quand il resonne , jouvre les yeux et jattends un peu 5 Je me dis ensuite que je vais me lever 6 En fait non , je me rendors 7 27 36. Liste Insertion dune liste numrote ou non avec llment ul ou ol Chaque lment de la liste est insr avec llment li Insertion dune liste de dnitions avec llment dl Mot insr avec llment dt et dnition avec dd 1 Quand mon rveil sonne le matin ... 2 3 Je le prolonge de 10 minutes 4 Quand il resonne , jouvre les yeux et jattends un peu 5 Je me dis ensuite que je vais me lever 6 En fait non , je me rendors 7 27 37. Formulaire Insertion dun formulaire avec llment form Le fomulaire se construit ensuite laide de widgets Deux attributs pour congurer le formulaire Attribut method pour spcier la mthode denvoi Attribut action identie la page de traitement 1 2 Pseudo : 3 Mot de passe : 4 5 28 38. Formulaire Insertion dun formulaire avec llment form Le fomulaire se construit ensuite laide de widgets Deux attributs pour congurer le formulaire Attribut method pour spcier la mthode denvoi Attribut action identie la page de traitement 1 2 Pseudo : 3 Mot de passe : 4 5 28 39. lement structurel Dlimiter un bloc dans le document HTML Dans le texte avec llment span Et comme un bloc spar du texte avec div Utilis pour du style (CSS) ou du contenu dynamique (JS) 1 2 3 Information 4 () 5 6 7 Casting 8 9 10 29 40. lement structurel Dlimiter un bloc dans le document HTML Dans le texte avec llment span Et comme un bloc spar du texte avec div Utilis pour du style (CSS) ou du contenu dynamique (JS) 1 2 3 Information 4 () 5 6 7 Casting 8 9 10 29 41. CSS 42. Cascading Style Sheets (CSS) Langage de description de la prsentation de documents Fichier texte dcrivant des rgles de mise en page Historique des direntes versions publies CSS1 avec une cinquantaine de proprit (17 dcembre 1996) Environ 70 nouvelles proprits dans CSS2 (mai 1998) Dcoupe en 50 modules dans CSS 3 (premier draft en juin 1999) 31 43. Lien avec HTML Trois manires dattacher des rgles de style Directement avec lattribut style sur un lment Avec llment style dans la partie head Dans un chier spar, avec lextension .css Style depuis des chiers externes avec llment link 32 44. Syntaxe Rgle CSS compose de deux parties Le slecteur dnit le(s) lment(s) aect(s) Le(s) dclaration(s) contiennent les rgles Les rgles sappliquent en cascade aux lments imbriqus Une dclaration se compose dune proprit et dune valeur 1 h1 { 2 color: red; 3 border: 1px solid blue; 4 } 5 6 p { 7 text - decoration : underline; 8 } 33 45. Syntaxe Rgle CSS compose de deux parties Le slecteur dnit le(s) lment(s) aect(s) Le(s) dclaration(s) contiennent les rgles Les rgles sappliquent en cascade aux lments imbriqus Une dclaration se compose dune proprit et dune valeur 1 h1 { 2 color: red; 3 border: 1px solid blue; 4 } 5 6 p { 7 text - decoration : underline; 8 } 33 46. Slecteur Slection directe dun lment en mentionnant son nom h1 {...} Slectionner un lment unique par son identiant form#login {...} ou #login {...} Slectionner tous les lments dune classe p.rstpara {...} ou .rstpara {...} Slection multiple de plusieurs lments h1, div.content, #submit {...} 34 47. Dimension Largeur et hauteur dun lment avec width et height Ces proprits forcent la taille de llment Tailles minimales et maximales avec min-width, max-width... Utiles lorsque lutilisateur redimensionne la fentre Dimensions typiquement renseignes en pixels Dautres units possibles comme lem par exemple 35 48. Marges et padding On peut rgler les marges sur les quatre cts On a accs aux marges top, bottom, right et left On peut rgler le padding galement sur les quatre cts Le padding correspond la marge intrieure 1 div { 2 border: 1px solid; 3 margin -left: 50px; 4 padding -top: 20px; 5 padding -left: 50px; 6 width: 100 px; 7 } 36 49. Marges et padding On peut rgler les marges sur les quatre cts On a accs aux marges top, bottom, right et left On peut rgler le padding galement sur les quatre cts Le padding correspond la marge intrieure 1 div { 2 border: 1px solid; 3 margin -left: 50px; 4 padding -top: 20px; 5 padding -left: 50px; 6 width: 100 px; 7 } 36 50. Pseudo-classe Une pseudo-classe fait rfrence un tat dun lment Par exemple un lien dj visit, le premier ls... Quelques exemples :hover pour la souris par dessus un lien :first-child pour le premier lment du type uniquement 1 tr:first -child { 2 background -color: #999; 3 } 4 tr:nth -of -type (2n) { 5 background -color: green; 6 } 37 51. Pseudo-classe Une pseudo-classe fait rfrence un tat dun lment Par exemple un lien dj visit, le premier ls... Quelques exemples :hover pour la souris par dessus un lien :first-child pour le premier lment du type uniquement 1 tr:first -child { 2 background -color: #999; 3 } 4 tr:nth -of -type (2n) { 5 background -color: green; 6 } 37 52. Pseudo-lment Un pseudo-lment fait rfrence une partie dun lment Par exemple la premire lettre, ligne... Quelques exemples ::first-letter pour la premire lettre ::selection pour la partie slectionne 1 p:: first -letter { 2 margin -top: -3px; 3 font -size: 30pt; 4 font -weight: bold; 5 float: left; 6 } 7 p:: selection { 8 background -color: magenta; 9 } 38 53. Pseudo-lment Un pseudo-lment fait rfrence une partie dun lment Par exemple la premire lettre, ligne... Quelques exemples ::first-letter pour la premire lettre ::selection pour la partie slectionne 1 p:: first -letter { 2 margin -top: -3px; 3 font -size: 30pt; 4 font -weight: bold; 5 float: left; 6 } 7 p:: selection { 8 background -color: magenta; 9 } 38 54. JavaScript 55. JavaScript (JS) Langage de script de haut niveau, non typ et interprt Le JavaScript est excut ct client, par le browser Langage oriente objet prototype Bref historique des direntes versions Cr en 1995 par Brendan Eich (pour le compte de Netscape) Adoption dun standard ECMAScript en juin 1997 Troisime version dECMAScript en 1999 (JavaScript 1.5) 40 56. Lien avec HTML Deux manires dattacher du code JavaScript Avec llment script Dans un chier spar, avec lextension .js Code depuis des chiers externes avec llment script 41 57. Achage Programme qui ache un message de bienvenue Code excut au moment o celui-ci est charg par le navigateur Inclusion du script lendroit o on souhaite lexcuter 1 window.alert(Hello Marcin!); 1 Bienvenue sur ce site ! 2 3 42 58. Achage Programme qui ache un message de bienvenue Code excut au moment o celui-ci est charg par le navigateur Inclusion du script lendroit o on souhaite lexcuter 1 window.alert(Hello Marcin!); 1 Bienvenue sur ce site ! 2 3 42 59. Variable et oprations Dclaration dune variable avec le mot rserv var Les variables possdent un type dynamique Donnes de type nombre entier, ottant, boolen... Une variable peut changer de type en cours dexcution 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 window.alert(succeeded); // Affiche false 7 window.alert(Moyenne de + mean); // Affiche Moyenne de 37.5 43 60. Instruction if-else if-else Excution conditionnelle de blocs avec if-else if-else Un bloc de code est dlimit avec des accolades Blocs else if et bloc else optionnels 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 if (succeeded) { 7 window.alert(Russi avec une moyenne de + mean + %); 8 } else { 9 window.alert(Dommage , rat :-(); 10 } 44 61. Modication de la page On peut accder aux lments de la page pour les modier Avec la fonction document.getElementById On modie ensuite le contenu avec la proprit innerHTML 1 Bienvenue sur ce site ! 2 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 var p = document . getElementById (result ); 7 if (succeeded) { 8 p.innerHTML = Russi avec une moyenne de + mean + %; 9 } else { 10 p.innerHTML = Dommage , rat :-(; 11 } 45 62. Modication de la page On peut accder aux lments de la page pour les modier Avec la fonction document.getElementById On modie ensuite le contenu avec la proprit innerHTML 1 Bienvenue sur ce site ! 2 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 var p = document . getElementById (result ); 7 if (succeeded) { 8 p.innerHTML = Russi avec une moyenne de + mean + %; 9 } else { 10 p.innerHTML = Dommage , rat :-(; 11 } 45 63. Instruction while Rpter un bloc tant quune condition est vraie avec while Attention aux boucles innies si la condition est toujours vraie Construction du rsultat avec une chaine de caractres Gnration de contenu HTML depuis le JavaScript 1 var result = ; 2 var i = 1; 3 4 while (i