La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques.

Présentations similaires


Présentation au sujet: "Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques."— Transcription de la présentation:

1 Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee

2 ISIM 1 – Pages Web Statiques 2T. Bourdeaudhuy – IG 2 I Saison Pré-requis & Perspectives Introduction aux Systèmes dExploitation et Réseaux (ISER1) Introduction Systèmes dInformation et Multimédia (ISIM1) ACCESSVBHTMLASPMini-Projet Php Multimédia (L2) J2EE : applications Web (GI/JAW4) XML (GI/XML4)

3 ISIM 1 – Pages Web Statiques 3T. Bourdeaudhuy – IG 2 I Saison Ambition de ce module Pages Statiques Les mêmes pour tous (ou pas…) –Principes fondamentaux du langage (X)HTML –Feuilles de style CSS1 & CSS2 –Eléments de Javascript

4 ISIM 1 – Pages Web Statiques 4T. Bourdeaudhuy – IG 2 I Saison Programme prévisionnel 5 séances : –S1 : Historique, Concepts, Environnement de développement, Structure dune page, Formatage du texte, Listes, Liens, Images, Cadres –S2 : Tableaux, Formulaires, Meta Tags –S3 : Feuilles de style –S4 : Javascript –S5 : Javascript avancé Evaluation : –QCMs en début de séance –CTP prévu à la fin du module dASP

5 Historique

6 ISIM 1 – Pages Web Statiques 6T. Bourdeaudhuy – IG 2 I Saison Historique 1983 : adoption de TCP/IP 1986 : lhypertexte est implémenté pour la première fois –Hypercard (Apple – « pile de notes ») Décembre 1986 : SGML (Standard generalized Markup Language) norme ISO : Berners Lee propose une nouvelle méthode indépendante des matériels et des logiciels –Le HTTP et le HTML sont nés ! –« WorldWideWeb » est un navigateur ( Nexus) 1992 : Création de Mosaic (premier navigateur graphique) par Mark Andreesen (Université Illinois Urbana-Champaign) 1993 : Lynx (navigateur en mode texte) 1994 : Mark Andreesen quitte luniversité et crée sa propre entreprise : Netscape Octobre 1994 : création du W3C (World Wide Web Consortium)

7 ISIM 1 – Pages Web Statiques 7T. Bourdeaudhuy – IG 2 I Saison W3C Objectif : définir un modèle pour faciliter l'échange de données sur le Web –400 partenaires industriels, parmi lesquels Oracle, IBM, Compaq, Xerox, Microsoft, etc … –Laboratoires de recherche : MIT pour les États Unis, INRIA pour l'Europe, Université Keio (Japon) pour l'Asie –Des groupes au sein du W3C se chargent de la normalisation et création de différents standards pour l'Internet –http://www.w3.org/http://www.w3.org/

8 ISIM 1 – Pages Web Statiques 8T. Bourdeaudhuy – IG 2 I Saison Recommandations W3C RFC 1994 : URL (RFC 1738) 1996 : HTTP 1.0 (RFC 1945), CSS : HTML : HTML 4.0, XML 1.0, CSS : HTTP 1.1 (RFC 2616), HTML 4.01 (dernière recommandation pour HTML) 2000 : XHTML

9 ISIM 1 – Pages Web Statiques 9T. Bourdeaudhuy – IG 2 I Saison Le Web en chiffres Début 1993 : 50 serveurs connus et répertoriés dans le monde Fin 1993 : 500 serveurs web dans le monde 1995 : sites Croissance Exponentielle

10 ISIM 1 – Pages Web Statiques 10T. Bourdeaudhuy – IG 2 I Saison Utilisation des navigateurs Source : septembre 2006http://www.w3schools.com

11 Principes du WEB Mécanisme Client-Serveur Dialogue HTTP URL Navigateurs Serveurs

12 ISIM 1 – Pages Web Statiques 12T. Bourdeaudhuy – IG 2 I Saison Mécanisme Client-Serveur Mécanisme de base : Client/Serveur Serveur W3 : –Programme tournant sur un ordinateur dans le but de répondre à des requêtes de clients W3 pouvant tourner sur dautres ordinateurs. Nature des requêtes : –Transfert de données (texte, son, image) –Exécution dun programme sur la machine serveur

13 ISIM 1 – Pages Web Statiques 13T. Bourdeaudhuy – IG 2 I Saison Mécanisme Client-Serveur Client W3 : –Programme permettant à un utilisateur de soumettre une requête à un serveur et de visualiser le résultat de celle-ci. –un client W3 est capable de dialoguer avec dautres types de serveurs (FTP, telnet, …) Ressource : –Cest la plus petite unité informatique accessible indépendamment dautres ressources, fournie par le serveur en réponse à une requête du client

14 ISIM 1 – Pages Web Statiques 14T. Bourdeaudhuy – IG 2 I Saison Dialogue HTTP Client Serveur Demande de connexion Tcp (Port 80) Connexion acceptée Requête HTTP Envoi dun page html Fermeture de la connexion Traitement de la requête : *.html aucune modification *.asp interprétation préalable du contenu des balises *.cgi, *.php … NB : Il ny a pas de session permanente entre le client et le serveur !

15 ISIM 1 – Pages Web Statiques 15T. Bourdeaudhuy – IG 2 I Saison URL URL : –Uniform Resource Locator –Localisation uniformisée des ressources Permet au client d'identifier : –le type de protocole à utiliser –l'adresse précise de la ressource Format : RFC 1738 (1994) Cf. [: ]/ [ ][? ]

16 ISIM 1 – Pages Web Statiques 16T. Bourdeaudhuy – IG 2 I Saison URL Attention : –Différence entre une url (http://) et un chemin local sur le serveur (c:\...) –Différence entre url absolue (http://...) et relative (rep/fichier) Insensible à la casse Jeu de caractères US-Ascii (7 bits), encodage hexadécimal possible, recommandé pour # & ? : / { } ( ) | \ ^ ~ [ ] ` et espace

17 ISIM 1 – Pages Web Statiques 17T. Bourdeaudhuy – IG 2 I Saison Navigateurs Logiciel sur le poste du client permettant –linterprétation du code HTML –laffichage des informations reçues Historique –1 ère génération : affichage de documents HTML rudimentaires –2 de génération : intégration des langages de script (Javascript, VB), téléchargement de code exécutable à partir du serveur (Applets, ActiveX) –3 ème génération : considèrent un document comme une arborescence dobjets (DOM) : DHTML

18 ISIM 1 – Pages Web Statiques 18T. Bourdeaudhuy – IG 2 I Saison Serveurs Logiciel sur la machine serveur permettant de traiter les requêtes et dy répondre Rôle : traduit lURL soit en –un nom de fichier le renvoie au client –un nom de programme renvoie le résultat Historique –1 ère génération : envoi de documents statiques + fichiers de log –2 de génération : intégration de linterface CGI (possibilité dappeler lOS pour exécuter du code) –3 ème génération : intégration de langages de script dans le serveur même

19 Web statique & Web dynamique

20 ISIM 1 – Pages Web Statiques 20T. Bourdeaudhuy – IG 2 I Saison Web Statique & Web Dynamique 2 façons de faire des pages WEB –Pages statiques (HTML) : la page affiche toujours la même chose quelque soit lemplacement, le type, lenvironnement, … du client –Pages dynamiques : laffichage est différent selon –Lemplacement du client : son adresse –Le type de navigateur dont il dispose –Les données quil souhaite recevoir –…–… 2 façons de faire du web dynamique –Côté client –Côté serveur

21 ISIM 1 – Pages Web Statiques 21T. Bourdeaudhuy – IG 2 I Saison Exécution côté client Les fichiers contiennent –du code HTML –Un code destiné au navigateur (exécuté par le navigateur) : visible dans le code source de la page Le contenu du fichier est transmis intégralement par le serveur sans la moindre modification Exemples –Javascript: Sun Microsystems –Jscript: Microsoft –VBScript: Microsoft –Applets Java: Sun Microsystems (code pré-compilé !)

22 ISIM 1 – Pages Web Statiques 22T. Bourdeaudhuy – IG 2 I Saison Exécution côté serveur Les fichiers contiennent –du code HTML –Un code destiné au serveur (exécuté par le serveur) : non visible dans le code source de la page Le serveur interprète le code qui lui est destiné puis envoie une page contenant uniquement du HTML au navigateur Deux possibilités sont offertes pour lexécution –Serveur HTTP –Système dexploitation

23 ISIM 1 – Pages Web Statiques 23T. Bourdeaudhuy – IG 2 I Saison Acronymes HTTP = HyperText Transfer Protocol SGML = Standard Generalized Markup Language HTML = SGML + DTD (Data Type Definition) XML = Extensible Markup Language XHTML = HTML à la sauce XML (DTD) DTD = Data Type Definition CSS = Cascading Style Sheets DOM = Document Object Model DHTML = Dynamic HTML = XHTML + CSS + JS + DOM SGML XML HTMLDocbook… XHTMLSMIL MathML…

24 Environnement de Développement Trouver de laide Travailler avec P5

25 ISIM 1 – Pages Web Statiques 25T. Bourdeaudhuy – IG 2 I Saison Trouver de laide Site du W3C –http://www.w3.org/http://www.w3.org/ W3Schools –http://www.w3schools.com/http://www.w3schools.com/ Devguru –http://www.devguru.com/http://www.devguru.com/ Forum alsacreations –http://forum.alsacreations.com/forum.phphttp://forum.alsacreations.com/forum.php Moodle –Refcard –Fichier daide html.hlp Valider ses pages :

26 ISIM 1 – Pages Web Statiques 26T. Bourdeaudhuy – IG 2 I Saison Travailler avec P5 Notre serveur : ig2ip5.ig2i.fr Nos clients : Mozilla Firefox / Microsoft Internet Explorer Configurer votre répertoire public_html –Directement à la racine de votre répertoire personnel –Droits de traversée pour les « autres » –Les fichiers contenus doivent être « lisibles » par les « autres » Accéder aux pages : –http://ig2ip5.ig2i.fr/~

27 ISIM 1 – Pages Web Statiques 27T. Bourdeaudhuy – IG 2 I Saison Se connecter à un serveur X Sous P5: –Shell BASH DISPLAY= :0 export DISPLAY –Shell CSH setenv DISPLAY :0 Sous Windows : Démarrer serveur X local –Cygwin (Cygwin/ startxwin.bat / xhost +) –Xming (Xlaunch / No access control) –Si pb : réinstaller XMing + polices sur U: (sources sur ftp://ftp.ig2i.fr/cours/xming) Sous P5 : Lancer application X (emacs, xterm, kate)

28 HTML Principe XHTML : Quelques règles pour le HTML du XI ème siècle

29 ISIM 1 – Pages Web Statiques 29T. Bourdeaudhuy – IG 2 I Saison HTML : Principe Langage de description de documents hypertextuels Utilisation détiquettes (tags) ou balises –Définies dans le DTD : Data Type Definition Référence aux annotations manuscrites laissées par lauteur à limprimeur : –Lauteur dit : « ceci est un titre de chapitre » –Limprimeur dit : « ceci sera centré, en gras, et numéroté » Langage interprété et affiché par un navigateur Fichier texte (.htm,.html) (éditeur de texte)

30 ISIM 1 – Pages Web Statiques 30T. Bourdeaudhuy – IG 2 I Saison Balises (tags) Un tag est un mot encadré par : : active le tag Un tag actif doit être désactivé par / : : désactive le tag Un tag peut prendre des attributs :

31 Squelette de base Attention à lindentation Titre du doc Corps du document Titre du doc Corps du document

32 ISIM 1 – Pages Web Statiques 32T. Bourdeaudhuy – IG 2 I Saison Règles XHTML XHTML = HTML reformulé pour respecter les règles XML XHTML = HTML sans les balises obsolètes Ces règles permettent une séparation logique entre les aspects de structure et de présentation Ces règles permettent de garantir le conformité du code avec tous les navigateurs En les utilisant dès aujourdhui, vous assurerez la pérennité de vos pages web et commencerez dès lors à profiter des avantages induits par lapplication des standards web Nous vous demandons de respecter ces règles dès le départ

33 ISIM 1 – Pages Web Statiques 33T. Bourdeaudhuy – IG 2 I Saison Règles XHTML : Balises Chaque balise nécessite une balise de fermeture –Invalide : Lorem ipsum dolor sit amet. Praesent vel justo. –Valide : Lorem ipsum dolor sit amet. Praesent vel justo. Insérer un espace puis une barre oblique à la fin dune balise ne possédant pas de balise de fermeture –Invalide : –Valide : Imbriquer correctement les éléments –Invalide : Paragraphe avec texte en italique –Valide : Paragraphe avec texte en italique Utiliser des minuscules dans les balises et leurs attributs –Invalide : –Valide :

34 ISIM 1 – Pages Web Statiques 34T. Bourdeaudhuy – IG 2 I Saison Règles XHTML : Attributs Chaque valeur dattribut doit être entre guillemets –Invalide : –Valide : Pas de sauts de lignes dans la valeur –Invalide :


Télécharger ppt "Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques."

Présentations similaires


Annonces Google