introduction dans la programmation web et web … · programmation web et web ... web: http...
TRANSCRIPT
![Page 1: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/1.jpg)
Introduction dans la Programmation Web et WEB
semantique 2017
Maria-Iuliana Dascalu, [email protected]
Faculty of Engineering in Foreign Languages, UPB
![Page 2: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/2.jpg)
Objectifs du cours
•Comprendre le functionnement d-une application Web: HTTP•Technologies utilisées sur le côté client (e.g. HTML&CSS, HTML5&CSS3, JavaScript&JS API, DHTML, Bootstrap)•Technologies utilisées le côté serveur (Java EE)•Services Web (Microsoft)•Principales caractéristiques du Web sémantique•XML - Extensible Markup Language & related•RDF - Resource Description Framework•OWL - Web Ontology Language•SPARQL
![Page 3: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/3.jpg)
Objectifs du TP & Projet
•TP - exercices avec: •HTML&HTML5, CSS&CSS3, JavaScript, Bootstrap (2 TPs)•JQuery, XML, XQuery (2 TPs)•Angular ou React (3 TPs) •Java EE (servlets, JSP) (3 TPs)
•Project (seul ou en équipe): •plus de détails dans quelques semaines
•Melania Nitu ([email protected] )
![Page 4: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/4.jpg)
Évaluation•La note finale E= E1+E2+E3+E4+E5
–E1 - 1 épreuve écrite au cours : 1p–E2 - 1 présentation de 20-30 minutes sur un sujet donné pendant lecours : 1p–E3 - activité pendant les travaux pratiques: 3p–E4- projet (code et documentation): 5p–E5 - Primes peuvent être accordées pour un maximum de 2 points(meilleur projet - 1 point, meilleure présentation - 0,5 point,participation en hackaton - 2 points)
•Pour passer:–E >= 4, 5–E1 >= 2 (sur 10)–E2 >= 4.5 (sur 10)–E3 >= 4.5 (sur 10)–E4 >=4.5 (sur 10)–présence au 6 TP et 6 cours
![Page 5: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/5.jpg)
Si vous avez des questions…
•[email protected]–le sujet de e-mail doit être: [WEB] [numéro de groupe] [nom de student]; example: WEB 1410F Popescu Ion
![Page 6: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/6.jpg)
References
•Dascalu, M.I. – Les notes de cours, http://mariaiulianadascalu.com/teaching/(mot de passe pour mes documents: ondina)•http://www.w3schools.com/•http://www.oracle.com/technetwork/java/javaee/overview/index.html•http://protege.stanford.edu/
•Grigoris Antoniou, Frank Van Harmelen -Semantic Web Primer, MIT Press, 2004•Dean Allemang, James Hendler - Semantic Web for the Working Ontologist: Effective Modeling
![Page 7: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/7.jpg)
Objectifs pour aujourd'hui
•WWW•courte histoire du Web •comprendre le fonctionnement d’une application Web•récapitulation HTML/HTML5 et CSS/CSS3
![Page 8: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/8.jpg)
World-Wide Web (WWW)•Toiles d'araignée mondiale•Système de distribution pour informationshypermédia•Basé sur le modèle client-serveur etl'hypertexte•Inventé CERN –1989, Sir Tim Berners-Lee et al.
“Information Management: A Proposal”
http://www.w3.org/History/1989/proposal.html•Il fonctionne selon les règlements de WebConsortium (> 500 membres): www.w3.org•L'idée: l'intégration des systèmes d'informationdisparates d'une manière unifiée, sans
![Page 9: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/9.jpg)
World-Wide Web (WWW)
•Les ressources sont identifiées par leur adresse(URI = Uniform Ressource Identifier)•L'existence d'un protocole d'accès (parexemple, HTTP)•Ressources (considérés comme des documents= sites Web) comprennent annotations•www.w3.org/TR/webarch/
![Page 10: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/10.jpg)
Architecture Web
![Page 11: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/11.jpg)
Les relations entre une ressource Web, son adresse (adresse URI) et la représentation
structurelle de la ressource
![Page 12: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/12.jpg)
URI = URL + URN
•URL (Uniform Resource Locator): identifier lesressources à travers l'adresse réseau•service :// hostname:port / directory-path
–http://www.ing.pub.ro–ftp://ftp.funet.fi/pub/README.txt–telnet://delta.ac.tuiasi.ro:7777
•services: protocoles–HTTP est synonyme de Hypertext TransferProtocol: la méthode par laquelle des documentsWeb à travers l'Internet est transféré. Écoute HTTPsur le port 80 en général.–Protocole de transfert de fichiers FTP, le chemin a
![Page 13: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/13.jpg)
URI = URL + URN
•URN (Uniform Resource Name): identifier les ressources par nom, même si la ressource est inaccessible ou manquant
–urn:infoiasi.ro:BookInfo–urn:mozilla:package:communicator–urn:schemas-microsoft-com:datatypes
•RFC 2141
![Page 14: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/14.jpg)
Application Web: paradigme serveur+client
Client - Un programme qui établit les connexions envoi des requêtes et accepte des réponsesServer - Un programme d'application qui accepte les connexions pour les demandes de service et envoi des réponses.
![Page 15: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/15.jpg)
Client - Serveur architecture
�Les clients communiquent avec un serveurunique�Le serveur attend les connexions�Le client initie la communication�Serveur reçoit une requête et envoie uneréponse�Client reçoit la réponse et décides s’il veutpoursuivre la communication�Exemples: e-mail, dns, http
![Page 16: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/16.jpg)
Le protocole HTTP
�HTTP - Hypertext Transfer Protocol. �Protocole client-serveur�Http serveur – serveur web (Apache, IIS)�Http client – navigateur (IE, Firefox, Chrome, Opera, Safari)�Http = protocole utilisé pour transmettre des ressources sur Internet
![Page 17: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/17.jpg)
Protocole HTTP - Glossaire de base (RFC 2616)
�Connexion - Une couche de transport circuitvirtuel établi entre deux programmes aux fins dela communication.�Message - L'unité de base de communicationHTTP, transmis par la connexion.�Requête - Un message de requête HTTP�Réponse - Un message de réponse HTTP�Ressource - Un objet ou service qui peut êtreidentifié par une URI (adresse d'une ressource) )
![Page 18: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/18.jpg)
Structure d'un message HTTP
�Ligne du requête / Ligne d’état�Exemple: GET /index.html HTTP/1.1�GET= Méthode de Requeté
�Headers �Ligne vide�Corps de message - facultatif
![Page 19: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/19.jpg)
Lignes du requête
�GET – demande une ressource spécifique (peut envoyer des paramètres qui modifient les ressources, mais il est préférable de ne pas faire)�POST – présente les données (généralement un formulaire) qui doivent être traitées�PUT – mets une ressource sur le serveur �HEAD – identique à un GET, mais ne reçoit que les headers�DELETE – supprime une ressource
![Page 20: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/20.jpg)
Lignes d’état
•La première ligne d'une réponse HTTP•Types de codes d'état sont les suivants: •1xx – information - habituellement des réponses provisoires •2xx – succès
•200 Success – réponse standard en l'absence des erreurs•201 Created – la ressource a été créé sur le serveur
•3xx redirections•301 Moved Permanently – la ressource a été déplacée à l'URI spécifiée et la prochaine demande doit être faite à la nouvelle URI
•3xx redirects•302 Found – même comportement que 303 - code de redirection•303 See Other – de base rediriger vers une nouvelle ressource (un nouvel GET est requis)
•4xx Erreurs
![Page 21: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/21.jpg)
HTTP Headers
�Utilisé pour définir les caractéristiques des données demandées ou prévues�Host – le nom du serveur (peut être beaucoup de machines sur une seule adresse IP) �Accept – type de ressource acceptés �Content-type – le type de contenu média�Authorization – données requises pour l'authentification �Referer – le lien de l'endroit où nous avons atteint la page en cours (important dans l'analyse du trafic)
![Page 22: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/22.jpg)
Qu'est-ce qui se passe quand une requête HTTP est envoyée?
•Vous pouvez installer un plugin pour navigateur qui vous permet de jeter un regard dans le processus.
![Page 23: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/23.jpg)
Une page web est entretenu comme un groupe
de GET et POST appels http!
![Page 24: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/24.jpg)
Le plugin permet de se pencher sur les détails de chaque requête
HTTP (header ou content)!
![Page 25: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/25.jpg)
Et voilà une charge utile d'une requête HTTP de type text / html
![Page 26: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/26.jpg)
HTML (HyperText Markup Language)
•Langage de marquages – utilise des balises pour decrire des pages web
![Page 27: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/27.jpg)
XML (eXtensible Markup Language)
•Langage de marquages – usé pour transporter les données , de ne pas afficher les données (comme HTML)•les étiquettes sont définies par l'utilisateur•plus à l'avenir<lecture>
<title> COMS4995 </title> <lecturer><title> Dr.</title>
![Page 28: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/28.jpg)
Le langage HTML - Historique
![Page 29: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/29.jpg)
Écrire du texte en HTML
![Page 30: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/30.jpg)
Listes
![Page 31: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/31.jpg)
Images
![Page 32: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/32.jpg)
Liens (anchors)
![Page 33: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/33.jpg)
Audio & vidéo
![Page 34: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/34.jpg)
Style
![Page 35: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/35.jpg)
Style: modification avancée
![Page 36: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/36.jpg)
Validation
![Page 37: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/37.jpg)
CSS (Cascading Style Sheets)ou comment séparer le fond de la forme
![Page 38: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/38.jpg)
style.css
![Page 39: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/39.jpg)
Utilisation
![Page 40: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/40.jpg)
Règles
![Page 41: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/41.jpg)
Redéfinition
![Page 42: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/42.jpg)
Attention!
![Page 43: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/43.jpg)
Regrouper les éléments
![Page 44: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/44.jpg)
Héritage et CSS
![Page 45: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/45.jpg)
Héritage et CSS
![Page 46: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/46.jpg)
Héritage et CSS
![Page 47: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/47.jpg)
Héritage et CSS
![Page 48: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/48.jpg)
Sélecteur contextuel, héritage & conflit
![Page 49: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/49.jpg)
id ou class?
![Page 50: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/50.jpg)
Mise en page
![Page 51: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/51.jpg)
DIV
![Page 52: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/52.jpg)
Style d’un DIV
![Page 53: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/53.jpg)
Exemple d’espacement
![Page 54: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/54.jpg)
HTML5: une touche de sémantique
![Page 55: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/55.jpg)
Réalisation
![Page 56: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/56.jpg)
![Page 57: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/57.jpg)
![Page 58: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/58.jpg)
![Page 59: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/59.jpg)
![Page 60: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/60.jpg)
Sans style
![Page 61: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/61.jpg)
Mise en place des blocs
![Page 62: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/62.jpg)
Travail sur chaque bloc
![Page 63: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/63.jpg)
Le menu
![Page 64: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/64.jpg)
L’agenda
![Page 65: Introduction dans la Programmation Web et WEB … · Programmation Web et WEB ... Web: HTTP •Technologies utilisées sur le côté ... Les relations entre une ressource Web, son](https://reader033.vdocuments.us/reader033/viewer/2022051307/5ad502c97f8b9aff228c9318/html5/thumbnails/65.jpg)
•https://www.dropbox.com/sh/1ji3e13uahkejqr/AACXIjj8gQLbciciRhmR4Cjea?dl=0