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 420 vues

Publié le

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

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 420
Sur SlideShare
0
Issues des intégrations
0
Intégrations
135
Actions
Partages
0
Téléchargements
54
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • le client demande au serveur : donne moi le fichier suivant. voici mon adresse. le modele du navigateur sert à faire des statistiques
  • l&apos;identification des ressources sur interent doit être unique. pour celà, on utilise une URL qui représente un format de nommage universel pour identifier une ressource sur internet. l&apos;url sert aussi comme un moyen d&apos;envoyer des informationa à travers internet (voir diapo suivant).
  • Si vous digérez mal l&apos;informatique, considérez les ports comme des Portes donnant accès à votre système d&apos;exploitation ( Windows, Mac OS, Linux, Solaris...). Pour fonctionner, un programme doit avoir accès à votre système d&apos;exploitation (par exemple pour les jeux à accélération 3D/2D, des logiciels de retouche photo, etc.), et doit donc ouvrir des portes pour pouvoir entrer dans votre système d&apos;exploitation. Quand vous quittez le programme, la porte n&apos;a plus besoin d&apos;être ouverte. Les problèmes de sécurité surviennent lorsque certains programmes oublient de refermer ces dites portes (les &amp;quot; Ports &amp;quot;), ou même tout simplement lorsque la configuration mal maîtrisée de l&apos;ordinateur ouvre des ports sans aucune utilité. Cela donne lieu à des failles de sécurité informatiques, car si une porte n&apos;est pas refermée, n&apos;importe qui peut l&apos;emprunter...
  • Le type MIME (Multipurpose Internet Mail Extensions) est un standard qui a été proposé afin d&apos;étendre les possibilités du courrier électronique (mail), c&apos;est-à-dire de permettre d&apos;insérer des documents (images, sons, texte, ...) dans un courrier. Le type MIME est aussi utilisé pour typer les documents transférés par le protocole HTTP . Lors d&apos;une transaction entre un serveur web et un navigateur internet, le serveur web envoie en premier lieu le type MIME du fichier envoyé au navigateur, afin que ce dernier puisse savoir de quelle manière afficher le document. Un type MIME est constitué de la manière suivante: Content-type: type_mime_principal/sous_type_mime Une image GIF a par exemple le type MIME suivant: Content-type: image/gif
  • sur putty : cuisuna.unige.ch ensuite, se connecter, enfin, utiliser des commandes HTTP. exemple de requête HTTP, GET www.google.ch http/1.1 (GET : Requête de la ressource située à l&apos;URL spécifié )
  • 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

    ×