Nouvelles technologies  du Web World Wide Web Saïd Radhouani Université de Genève
Assembler le puzzle 16-10-2007 Saïd Radhouani - CUI Internet Serveur Web HTML HTTP TCP/IP Hypertexte Lien Navigation Navig...
Historique <ul><li>1945 - Vannevar Bush. « As we may think » </li></ul><ul><ul><li>conception de Memex (système de gestion...
Historique <ul><li>Janvier 1992 – premier navigateur disponible </li></ul><ul><ul><li>que du texte </li></ul></ul><ul><ul>...
Définir le Web! <ul><li>Plusieurs niveaux : </li></ul><ul><ul><li>Un système Hypertexte/hypermédia </li></ul></ul><ul><ul>...
Le Web est un système Hypertexte/Hypermédia <ul><li>Document textuel &quot;plat&quot;  ~  ordre de lecture séquentiel: pag...
L'hypertexte est un graphe <ul><li>Nœuds      pages  individuelles </li></ul><ul><li>Arcs      liens  entre les pages </...
Hypertexte/Hypermédia <ul><li>Hypermédia : Hypertexte multimédia </li></ul><ul><ul><li>Texte </li></ul></ul><ul><ul><li>Im...
Liens <ul><li>Un lien : une source et une cible </li></ul><ul><li>La cible : document entier ou une section précise dans u...
Le Web est un service d’Internet <ul><li>D’abord c’est quoi Internet ? </li></ul><ul><li>Qu’est ce qu’on entend par servic...
Internet <ul><li>Câbles ; </li></ul><ul><li>Routeurs ; </li></ul><ul><li>… </li></ul><ul><li>Infrastructure matérielle (ré...
Le protocole TCP/IP <ul><li>TCP/IP  </li></ul><ul><ul><li>La “langue“ du réseau Internet </li></ul></ul><ul><ul><li>Permet...
À quoi ça peut servir ? <ul><li>Satisfaire nos besoins d’information, de communication, etc. </li></ul><ul><li>Exemples de...
Création de service <ul><li>Pour chaque besoin, on peut créer un service </li></ul><ul><li>Exemple </li></ul><ul><ul><li>P...
Napster 16-10-2007 Saïd Radhouani - CUI Références vers  des fichiers mp3 Napster <ul><li>Architecture de type &quot;clien...
Napster <ul><li>Problèmes juridiques </li></ul><ul><li>Fermeture de Napster </li></ul><ul><li>On a toujours un besoin! </l...
Peer-to-Peer (P2P) <ul><li>Architecture de type &quot;client-client&quot; </li></ul>16-10-2007 Saïd Radhouani - CUI
Pourquoi tout ce tour ? <ul><li>Pour chaque besoin, on peut créer un service </li></ul><ul><li>Internet est flexible et &q...
Enfin,… le Web <ul><li>Le besoin ? </li></ul><ul><li>Pouvoir partager des données dans un format “standard“ </li></ul>16-1...
Quel protocole ? <ul><li>Le protocole HTTP (HyperText Transfert Protocol) </li></ul><ul><li>Protocole de communication de ...
Fonctionnement du protocole HTTP 16-10-2007 Saïd Radhouani - CUI Client Serveur Web Requête Réponse Navigateur
Fonctionnement du protocole HTTP <ul><li>Requête : demande d'une ressource (un document) </li></ul><ul><ul><li>comment ide...
Requête HTTP <ul><li>Navigateur (Internet Explorer, Netscape, Mozilla, etc.)  </li></ul><ul><ul><li>logiciel    interface...
Identification des ressources <ul><li>Identification unique </li></ul><ul><li>Une  URL  ( U niform  R esource  L ocator ) ...
URL - Uniform Resource Locator 16-10-2007 Saïd Radhouani - CUI numéro associé à un service facultatif dans le cas du Web (...
URL - Uniform Resource Locator 16-10-2007 Saïd Radhouani - CUI liste des paramètres  envoyés à une application sur le serv...
Réponse d'un serveur Web <ul><li>Serveur Web : </li></ul><ul><ul><li>Logiciel qui tourne en permanence et fournit des docu...
Réponse d'un serveur Web <ul><li>Réponse-2 : </li></ul><ul><ul><li>envoyer le type MIME  (Multipurpose Internet Mail Exten...
Architecture du Web <ul><li>Le protocole HTTP est le fondement du Web </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau ...
Navigateur <ul><li>Le navigateur est un logiciel capable d'afficher un certain nombre de fichier </li></ul><ul><li>Interpr...
Navigateur <ul><li>Si le type du fichier n’est pas reconnu du navigateur ?  </li></ul><ul><ul><li>le sauvegarder sur le di...
Navigateurs et plugins <ul><li>Envoi d'une page html + lien vers un doc (ex. pdf) </li></ul><ul><li>Exécution d'un program...
HTML <ul><li>HTML = HyperText Markup Language </li></ul><ul><li>Langage utilisé pour créer des pages Web </li></ul><ul><li...
HTML <ul><li>Le langage HTML permet de définir des liens vers d’autres documents en utilisant leurs URLs </li></ul><ul><li...
Structure d’une page HTML <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Page html minimale</title> </li...
Exemple d’une page HTML 16-10-2007 Saïd Radhouani - CUI
La page interprétée par un navigateur 16-10-2007 Saïd Radhouani - CUI
Exemple de code HTML <ul><li>Bienvenue au  <u> cours </u>  &quot; <b> Nouvelles technologies du Web </b> &quot;! </li></ul...
Architecture du Web <ul><li>Le protocole HTTP et le langage HTML se complètent pour donner naissance au service Web. </li>...
Le Web : un service qui évolue <ul><li>Le service évolue en fonction des besoins </li></ul><ul><li>Nouveaux Besoins : </li...
Le Web : un service qui évolue <ul><li>Pour satisfaire les exigences des utilisateurs    Trop de codage </li></ul><ul><li...
Les feuilles de style <ul><li>Le contenu est indépendant </li></ul><ul><li>L’information concernant l'apparence est indépe...
Feuilles de style <ul><li>Définir une présentation pour chaque type d’élément  </li></ul><ul><ul><li>exemple : tous les ti...
Feuilles de styles - Exemple <ul><li>... </li></ul><ul><li><h1><font color=red><b>  </li></ul><ul><li>titre 1 </li></ul><u...
Utilité des feuilles de style <ul><li>Présentation homogène sur tout le site </li></ul><ul><li>Entretien facile : la modif...
Architecture du Web <ul><li>Les feuilles de style : un moyen pour faciliter l'entretien des sites Web </li></ul>16-10-2007...
Prochain SlideShare
Chargement dans…5
×

Introduction aux technologies du Web (1)

1 572 vues

Publié le

WWW, Hypertext, Internet, Network, HTTP, Web Server, HTML, XML, JavaScript

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Introduction aux technologies du Web (1)

  1. 1. Nouvelles technologies du Web World Wide Web Saïd Radhouani Université de Genève
  2. 2. Assembler le puzzle 16-10-2007 Saïd Radhouani - CUI Internet Serveur Web HTML HTTP TCP/IP Hypertexte Lien Navigation Navigateur,Browser,… Site Web Page Web Statique / Dynamique Hypermédia Etc.
  3. 3. Historique <ul><li>1945 - Vannevar Bush. « As we may think » </li></ul><ul><ul><li>conception de Memex (système de gestion et d'accès aux connaissances) </li></ul></ul><ul><ul><li>Idée de liens entre les documents </li></ul></ul><ul><li>1965 - Ted Nelson </li></ul><ul><ul><li>Invention du terme « hypertext » </li></ul></ul><ul><ul><li>Projet Xanadu : bibliothèque universelle </li></ul></ul><ul><ul><li>circulation en utilisant des liens </li></ul></ul><ul><li>1989-1990 Conception du World Wide Web et HTML </li></ul><ul><ul><li>CERN (Tim Berners-Lee et Robert Cailliau) </li></ul></ul><ul><ul><li>Rendre accessible des documents scientifiques aux ordinateurs situés à différents endroits sur la planète </li></ul></ul><ul><li>Novembre 1990 – premier prototype développé au CERN </li></ul>16-10-2007 Saïd Radhouani - CUI
  4. 4. Historique <ul><li>Janvier 1992 – premier navigateur disponible </li></ul><ul><ul><li>que du texte </li></ul></ul><ul><ul><li>code HTTP rendu publique </li></ul></ul><ul><li>Mars 1993 - Mosaic </li></ul><ul><ul><li>Marc Andreessen et Eric Bina (NCSA National Center for Supercomputing Application) </li></ul></ul><ul><ul><li>premier navigateur Web graphique (texte et image) gratuit </li></ul></ul><ul><li>1993 - Médiatisation (NY Times) </li></ul><ul><ul><li>augmentations du nombre des intéressés </li></ul></ul><ul><li>1994 – fondation de Netscape </li></ul><ul><ul><li>Marc Andreessen et Jim Clark </li></ul></ul><ul><ul><li>Netscape Navigator </li></ul></ul><ul><li>... </li></ul>16-10-2007 Saïd Radhouani - CUI
  5. 5. Définir le Web! <ul><li>Plusieurs niveaux : </li></ul><ul><ul><li>Un système Hypertexte/hypermédia </li></ul></ul><ul><ul><li>Service d'Internet (se positionner % à Internet) </li></ul></ul><ul><ul><li>Architecture / Fonctionnement </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  6. 6. Le Web est un système Hypertexte/Hypermédia <ul><li>Document textuel &quot;plat&quot; ~ ordre de lecture séquentiel: page 1, puis page 2, puis … </li></ul><ul><li>Un hypertexte ~plusieurs ordres de lecture </li></ul><ul><ul><li>ex. pour aller de A à D </li></ul></ul><ul><ul><ul><li>A B C E D </li></ul></ul></ul><ul><ul><ul><li>A D </li></ul></ul></ul>16-10-2007 Saïd Radhouani - CUI A B C D F
  7. 7. L'hypertexte est un graphe <ul><li>Nœuds  pages individuelles </li></ul><ul><li>Arcs  liens entre les pages </li></ul><ul><li>Accès par navigation (ou &quot;browsing&quot;) </li></ul><ul><li>Un nœud peut pointer plusieurs liens </li></ul><ul><li>Un nœud peut être pointé par plusieurs liens </li></ul>16-10-2007 Saïd Radhouani - CUI A B C D E
  8. 8. Hypertexte/Hypermédia <ul><li>Hypermédia : Hypertexte multimédia </li></ul><ul><ul><li>Texte </li></ul></ul><ul><ul><li>Image </li></ul></ul><ul><ul><li>Audio </li></ul></ul><ul><ul><li>Vidéo </li></ul></ul><ul><li>On emploie en général le terme &quot;hypertexte&quot; dans le sens &quot;hypermédia&quot; </li></ul>16-10-2007 Saïd Radhouani - CUI
  9. 9. Liens <ul><li>Un lien : une source et une cible </li></ul><ul><li>La cible : document entier ou une section précise dans un document </li></ul><ul><li>L’ ancre : objet cliquable pour activer un lien </li></ul><ul><li>Ancre dans les hypermédias </li></ul><ul><ul><li>texte (caractère, mot, phrase, etc.) </li></ul></ul><ul><ul><li>image entière </li></ul></ul><ul><ul><li>zones dans une image </li></ul></ul><ul><li>Web : ancres textuelles ~ généralement écrites en bleu et soulignées </li></ul>16-10-2007 Saïd Radhouani - CUI
  10. 10. Le Web est un service d’Internet <ul><li>D’abord c’est quoi Internet ? </li></ul><ul><li>Qu’est ce qu’on entend par service ? </li></ul><ul><li>Comment créer un service ? </li></ul><ul><li>Un service peut-il disparaître ? </li></ul><ul><li>Un service peut-il évoluer ? </li></ul><ul><li>… </li></ul>16-10-2007 Saïd Radhouani - CUI
  11. 11. Internet <ul><li>Câbles ; </li></ul><ul><li>Routeurs ; </li></ul><ul><li>… </li></ul><ul><li>Infrastructure matérielle (réseau) => permettre aux machines de s’échanger des données (communiquer) </li></ul><ul><li>Quel langage ? </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet
  12. 12. Le protocole TCP/IP <ul><li>TCP/IP </li></ul><ul><ul><li>La “langue“ du réseau Internet </li></ul></ul><ul><ul><li>Permet le dialogue entre les machines </li></ul></ul><ul><li>Faire fonctionner le TCP/IP --> besoin d’une infrastructure matérielle : le réseau Internet </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP
  13. 13. À quoi ça peut servir ? <ul><li>Satisfaire nos besoins d’information, de communication, etc. </li></ul><ul><li>Exemples de besoins </li></ul><ul><ul><li>Échange de messages (e-mail) </li></ul></ul><ul><ul><li>Publication de données </li></ul></ul><ul><ul><li>Échange de fichier </li></ul></ul><ul><ul><li>Partage de ressources musicales </li></ul></ul><ul><ul><li>… </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  14. 14. Création de service <ul><li>Pour chaque besoin, on peut créer un service </li></ul><ul><li>Exemple </li></ul><ul><ul><li>Partage de la musique </li></ul></ul><ul><ul><li>Service créé : Napster </li></ul></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Napster
  15. 15. Napster 16-10-2007 Saïd Radhouani - CUI Références vers des fichiers mp3 Napster <ul><li>Architecture de type &quot;clien-serveur&quot; </li></ul>Serveur
  16. 16. Napster <ul><li>Problèmes juridiques </li></ul><ul><li>Fermeture de Napster </li></ul><ul><li>On a toujours un besoin! </li></ul><ul><li>Créer un nouveau service </li></ul>16-10-2007 Saïd Radhouani - CUI
  17. 17. Peer-to-Peer (P2P) <ul><li>Architecture de type &quot;client-client&quot; </li></ul>16-10-2007 Saïd Radhouani - CUI
  18. 18. Pourquoi tout ce tour ? <ul><li>Pour chaque besoin, on peut créer un service </li></ul><ul><li>Internet est flexible et &quot;modulable&quot; </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Napster P2P e-mail …
  19. 19. Enfin,… le Web <ul><li>Le besoin ? </li></ul><ul><li>Pouvoir partager des données dans un format “standard“ </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web
  20. 20. Quel protocole ? <ul><li>Le protocole HTTP (HyperText Transfert Protocol) </li></ul><ul><li>Protocole de communication de type “client-serveur“: </li></ul><ul><ul><li>Client : navigateur (Netscape, Internet Explorer, Mozilla) </li></ul></ul><ul><ul><li>Serveur Web : logiciel tels que IIS ou Apache </li></ul></ul><ul><li>Permet de transférer n’importe quel type de fichier (HTML, images, etc.) </li></ul>16-10-2007 Saïd Radhouani - CUI
  21. 21. Fonctionnement du protocole HTTP 16-10-2007 Saïd Radhouani - CUI Client Serveur Web Requête Réponse Navigateur
  22. 22. Fonctionnement du protocole HTTP <ul><li>Requête : demande d'une ressource (un document) </li></ul><ul><ul><li>comment identifier cette ressource ? </li></ul></ul><ul><ul><li>comment récupérer cette ressource ? </li></ul></ul><ul><ul><li>à quelle adresse l'envoyer ? </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Réponse : envoyer une ressource </li></ul><ul><ul><li>analyser la requête ? </li></ul></ul><ul><ul><li>comment &quot;fabriquer&quot; la réponse ? </li></ul></ul><ul><ul><li>comment présenter une ressource ? (format des documents) </li></ul></ul><ul><ul><li>... </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  23. 23. Requête HTTP <ul><li>Navigateur (Internet Explorer, Netscape, Mozilla, etc.) </li></ul><ul><ul><li>logiciel  interface entre le client et la complexité technique du protocole HTTP </li></ul></ul><ul><li>Requête HTTP </li></ul><ul><ul><li>Nom du fichier : http://unige.ch/.../exemple.html </li></ul></ul><ul><ul><li>Adresse IP du client </li></ul></ul><ul><ul><li>Modèle du navigateur </li></ul></ul><ul><ul><li>… </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  24. 24. Identification des ressources <ul><li>Identification unique </li></ul><ul><li>Une URL ( U niform R esource L ocator ) est un format universel pour identifier une ressource (sur Internet ou en local) </li></ul><ul><li>L'URL est un moyen pour communiquer sur Internet </li></ul>16-10-2007 Saïd Radhouani - CUI
  25. 25. URL - Uniform Resource Locator 16-10-2007 Saïd Radhouani - CUI numéro associé à un service facultatif dans le cas du Web (80) protocole : quel “langage“ on va utiliser ? ftp transfert de fichiers entre machines http échanger des pages HTML ... nom d u serveur : nom du domaine de la machine contenant la ressource demandée on peut utiliser l'adresse IP (URL moins lisible) protocole : // id:mp@ serveur : port / fichier [ # ancre |? paramètres ] paramètres d'accès à un serveur sécurisé
  26. 26. URL - Uniform Resource Locator 16-10-2007 Saïd Radhouani - CUI liste des paramètres envoyés à une application sur le serveur nom du pointeur d ans le doc ument HTML Chemin d'accès à la ressource (emplacement de la ressource) protocole : // id:mp@ serveur : port / fichier [ # ancre |? paramètres ] Exemples : ftp://radhouan@cui.unige.ch http://cui.unige.ch/isi/reports/rfia2004.pdf
  27. 27. Réponse d'un serveur Web <ul><li>Serveur Web : </li></ul><ul><ul><li>Logiciel qui tourne en permanence et fournit des documents en réponse aux requêtes des clients </li></ul></ul><ul><li>Réponse-1 : </li></ul><ul><ul><li>contrôle des droits d'accès </li></ul></ul><ul><ul><li>récupération des ressources </li></ul></ul><ul><ul><li>&quot;fabriquer&quot; le fichier demandé </li></ul></ul><ul><ul><li>mettre à jour le journal d'activité (log) </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  28. 28. Réponse d'un serveur Web <ul><li>Réponse-2 : </li></ul><ul><ul><li>envoyer le type MIME (Multipurpose Internet Mail Extensions) </li></ul></ul><ul><ul><ul><li>standard pour étendre les possibilités du courriel </li></ul></ul></ul><ul><ul><ul><ul><li>insérer des documents dans un courrier (image, son, etc.) </li></ul></ul></ul></ul><ul><ul><ul><li>typer les documents transférés par le protocole HTTP </li></ul></ul></ul><ul><ul><ul><li>pour décider du type à utiliser, le serveur examine l’extension du fichier </li></ul></ul></ul><ul><ul><ul><li>guide pour le navigateur : savoir de quelle manière afficher le document (ou bien utiliser un plugin). </li></ul></ul></ul><ul><ul><ul><li>syntaxe : Content-type:type_mime_principal/sous_type_mime </li></ul></ul></ul><ul><ul><ul><li>exemple : Content-type:image/gif </li></ul></ul></ul><ul><ul><li>envoyer le fichier à l'utilisateur </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  29. 29. Architecture du Web <ul><li>Le protocole HTTP est le fondement du Web </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP
  30. 30. Navigateur <ul><li>Le navigateur est un logiciel capable d'afficher un certain nombre de fichier </li></ul><ul><li>Interprète les données envoyées par le serveur (document texte au format HTML) </li></ul><ul><li>Crée la page à afficher </li></ul><ul><li>Une même page Web peut être affichée de différentes manières (selon l'ordinateur ou le navigateur) </li></ul><ul><li>Démo </li></ul>16-10-2007 Saïd Radhouani - CUI
  31. 31. Navigateur <ul><li>Si le type du fichier n’est pas reconnu du navigateur ? </li></ul><ul><ul><li>le sauvegarder sur le disque et l’ouvrir avec l’application adéquate </li></ul></ul><ul><ul><li>utiliser un plugin </li></ul></ul><ul><li>Plugin : programme “accessoire“ appelé automatiquement par le navigateur </li></ul><ul><li>Exemples </li></ul><ul><ul><li>Acrobat Reader documents pdf </li></ul></ul><ul><ul><li>RealPlayer son ou vidéo </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  32. 32. Navigateurs et plugins <ul><li>Envoi d'une page html + lien vers un doc (ex. pdf) </li></ul><ul><li>Exécution d'un programme sur le client </li></ul>16-10-2007 Saïd Radhouani - CUI Navigateur web (client) <html> … <href=&quot;http … pdf > </html> http://www.unige.ch/… Serveur Web page html fichier. pdf Plugin
  33. 33. HTML <ul><li>HTML = HyperText Markup Language </li></ul><ul><li>Langage utilisé pour créer des pages Web </li></ul><ul><li>Fichier HTML = fichier texte dans lequel sont insérées des marques (balises) pour formater le texte </li></ul><ul><li>Le code HTML décrit ce qui doit être affiché par le navigateur </li></ul><ul><li>Il contient des indications sur : </li></ul><ul><ul><li>la succession des éléments </li></ul></ul><ul><ul><li>la police du texte (taille et couleur de chaque portion de texte, ce qui doit être mis en italique, en gras ou souligné, etc.) </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  34. 34. HTML <ul><li>Le langage HTML permet de définir des liens vers d’autres documents en utilisant leurs URLs </li></ul><ul><li>Le navigateur analyse tous les éléments du code HTML et crée une représentation globale de la page </li></ul><ul><li>Pour voir un exemple de code HTML: navigateur -> menu Affichage -> code source de la page </li></ul>16-10-2007 Saïd Radhouani - CUI
  35. 35. Structure d’une page HTML <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Page html minimale</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>corps du texte </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>entête (<head>) : information qui n'apparaissent pas à l’écran (sauf le titre, dans la barre de la fenêtre) </li></ul><ul><ul><li>meta-informations </li></ul></ul><ul><li><h1>...<h6> pour structurer le document (titres et sous-titres) </li></ul>16-10-2007 Saïd Radhouani - CUI
  36. 36. Exemple d’une page HTML 16-10-2007 Saïd Radhouani - CUI
  37. 37. La page interprétée par un navigateur 16-10-2007 Saïd Radhouani - CUI
  38. 38. Exemple de code HTML <ul><li>Bienvenue au <u> cours </u> &quot; <b> Nouvelles technologies du Web </b> &quot;! </li></ul><ul><li>Bienvenue au cours  &quot; Nouvelles technologies du Web &quot;! </li></ul>16-10-2007 Saïd Radhouani - CUI
  39. 39. Architecture du Web <ul><li>Le protocole HTTP et le langage HTML se complètent pour donner naissance au service Web. </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML
  40. 40. Le Web : un service qui évolue <ul><li>Le service évolue en fonction des besoins </li></ul><ul><li>Nouveaux Besoins : </li></ul><ul><ul><li>entreprises commerciales </li></ul></ul><ul><ul><li>agents de publicité </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>HTML : prévu surtout pour la structure d'un texte, pas pour sa présentation </li></ul><ul><li> Ajout de nouvelles balises HTML : </li></ul><ul><ul><li>cadres, </li></ul></ul><ul><ul><li>tableaux, </li></ul></ul><ul><ul><li>clignotement de texte, </li></ul></ul><ul><ul><li>etc. </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  41. 41. Le Web : un service qui évolue <ul><li>Pour satisfaire les exigences des utilisateurs  Trop de codage </li></ul><ul><li>Plus de besoins  plus de codage  plus de difficulté </li></ul><ul><li>Solution : séparer le contenu de l'apparence </li></ul>16-10-2007 Saïd Radhouani - CUI
  42. 42. Les feuilles de style <ul><li>Le contenu est indépendant </li></ul><ul><li>L’information concernant l'apparence est indépendante (stockée dans un doc.) </li></ul>16-10-2007 Saïd Radhouani - CUI Contenu textuelle Pages HTML Feuille de style Appliquer Indication sur l'apparence du texte
  43. 43. Feuilles de style <ul><li>Définir une présentation pour chaque type d’élément </li></ul><ul><ul><li>exemple : tous les titres h1 doivent être en Arial, 20, rouge, centré </li></ul></ul><ul><li>Peuvent être intégrées : </li></ul><ul><ul><li>dans une page HTML </li></ul></ul><ul><ul><li>dans un fichier séparé </li></ul></ul>16-10-2007 Saïd Radhouani - CUI
  44. 44. Feuilles de styles - Exemple <ul><li>... </li></ul><ul><li><h1><font color=red><b> </li></ul><ul><li>titre 1 </li></ul><ul><li></b></font></h1> </li></ul><ul><li><h2><font color=blue><i> </li></ul><ul><li>sous-titre </li></ul><ul><li></i></font></h2> </li></ul><ul><li>texte </li></ul><ul><li><h2><font color=blue><i> </li></ul><ul><li>sous-titre </li></ul><ul><li></i></font></h2> </li></ul>16-10-2007 Saïd Radhouani - CUI <html> <head> <title>exemple style</title> <STYLE type=&quot;text/css&quot;> <!-- h1 {color: red; font: bold} h2 {color: blue; font: italic } --> </STYLE> </head> <body> <h1>titre 1</h1> <h2>sous-titre</h2> texte <h2>sous-titre</h2> </body> </html>
  45. 45. Utilité des feuilles de style <ul><li>Présentation homogène sur tout le site </li></ul><ul><li>Entretien facile : la modification d'un style s'applique sur toutes les pages correspondantes </li></ul><ul><li>Code HTML plus lisible (diminuer la taille des fichiers) </li></ul><ul><li>Chargement de page plus rapides </li></ul>16-10-2007 Saïd Radhouani - CUI
  46. 46. Architecture du Web <ul><li>Les feuilles de style : un moyen pour faciliter l'entretien des sites Web </li></ul>16-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style

×