Introduction Aux Systèmes d’Information et Multimédia

Présentation au sujet: "Introduction Aux Systèmes d’Information et Multimédia"— Transcription de la présentation:

1 Introduction Aux Systèmes d’Information et Multimédia
(X)HTML / Pages Web Statiques T. Bourdeaud’huy S. Collart-Dutilleul P. Kubiak IG2I - Saison 2006/2007 Timothy Berners-Lee

2 Pré-requis & Perspectives
Multimédia (L2) Introduction aux Systèmes d’Exploitation et Réseaux (ISER1) J2EE : applications Web (GI/JAW4) Introduction Systèmes d’Information et Multimédia (ISIM1) XML (GI/XML4) ACCESS VB HTML ASP Mini-Projet Php T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 2

3 ISIM1 – Pages Web Statiques 3
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 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 3

4 Programme prévisionnel
5 séances : S1 : Historique, Concepts, Environnement de développement, Structure d’une 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 d’ASP T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 4

5 Historique

6 ISIM1 – Pages Web Statiques 6
Historique 1983 : adoption de TCP/IP 1986 : l’hypertexte est implémenté pour la première fois Hypercard (Apple – « pile de notes ») Décembre 1986 : SGML (Standard generalized Markup Language) norme ISO 8879 1989 : 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 l’université et crée sa propre entreprise : Netscape Octobre 1994 : création du W3C (World Wide Web Consortium) T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 6

7 ISIM1 – Pages Web Statiques 7
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 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 7

8 Recommandations W3C RFC
1994 : URL (RFC 1738) 1996 : HTTP 1.0 (RFC 1945), CSS 1.0 1997 : HTML 3.2 1998 : HTML 4.0, XML 1.0, CSS 2.0 1999 : HTTP 1.1 (RFC 2616), HTML 4.01 (dernière recommandation pour HTML) 2000 : XHTML T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 8

9 ISIM1 – Pages Web Statiques 9
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 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 9

10 Utilisation des navigateurs
Source : septembre 2006 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 10

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

12 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 d’autres ordinateurs. Nature des requêtes : Transfert de données (texte, son, image) Exécution d’un programme sur la machine serveur T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 12

13 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 d’autres types de serveurs (FTP, telnet, …) Ressource : C’est la plus petite unité informatique accessible indépendamment d’autres ressources, fournie par le serveur en réponse à une requête du client T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 13

14 Dialogue HTTP  Demande de connexion Tcp (Port 80)  Connexion acceptée Client  Requête HTTP Serveur  Envoi d’un 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 n’y a pas de session permanente entre le client et le serveur ! T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 14

15 ISIM1 – Pages Web Statiques 15
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. T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 15

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

17 ISIM1 – Pages Web Statiques 17
Navigateurs Logiciel sur le poste du client permettant l’interprétation du code HTML l’affichage des informations reçues Historique 1ère génération : affichage de documents HTML rudimentaires 2de 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 d’objets (DOM) : DHTML T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 17

18 ISIM1 – Pages Web Statiques 18
Serveurs Logiciel sur la machine serveur permettant de traiter les requêtes et d’y répondre Rôle : traduit l’URL 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 2de génération : intégration de l’interface CGI (possibilité d’appeler l’OS pour exécuter du code) 3ème génération : intégration de langages de script dans le serveur même T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 18

19 Web statique & Web dynamique

20 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 l’emplacement, le type, l’environnement, … du client Pages dynamiques : l’affichage est différent selon L’emplacement du client : son adresse Le type de navigateur dont il dispose Les données qu’il souhaite recevoir … 2 façons de faire du web dynamique Côté client Côté serveur T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 20

21 ISIM1 – Pages Web Statiques 21
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é !) T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 21

22 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 l’exécution Serveur HTTP Système d’exploitation T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 22

23 ISIM1 – Pages Web Statiques 23
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 HTML Docbook … XHTML SMIL MathML T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 23

24 Environnement de Développement
Trouver de l’aide Travailler avec P5

25 ISIM1 – Pages Web Statiques 25
Trouver de l’aide Site du W3C W3Schools Devguru Forum alsacreations Moodle Refcard Fichier d’aide html.hlp Valider ses pages : T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 25

26 ISIM1 – Pages Web Statiques 26
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 : T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 26

27 Se connecter à un serveur X
Sous P5: Shell BASH DISPLAY=<IPWIN>:0 export DISPLAY Shell CSH setenv DISPLAY <IPWIN>: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) T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 27

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

29 ISIM1 – Pages Web Statiques 29
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 l’auteur à l’imprimeur : L’auteur dit : « ceci est un titre de chapitre » L’imprimeur dit : « ceci sera centré, en gras, et numéroté » Langage interprété et affiché par un navigateur Fichier texte (.htm, .html) (éditeur de texte) T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 29

30 ISIM1 – Pages Web Statiques 30
Balises (tags) Un tag est un mot encadré par < et > : <tag> : active le tag Un tag actif doit être désactivé par / : </tag> : désactive le tag Un tag peut prendre des attributs : <tag attribut1=val-attribut1 attribut2=val-attribut2 ….> <!-- ceci est un commentaire --> T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 30

31 Squelette de base Attention à l’indentation <html> Titre du doc
<head> <title> Titre du doc </title> </head> <body > Corps du document </body> </html> Titre du doc Corps du document

32 ISIM1 – Pages Web Statiques 32
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 aujourd’hui, vous assurerez la pérennité de vos pages web et commencerez dès lors à profiter des avantages induits par l’application des standards web  Nous vous demandons de respecter ces règles dès le départ T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 32

33 ISIM1 – Pages Web Statiques 33
Règles XHTML : Balises Chaque balise nécessite une balise de fermeture Invalide : <p>Lorem ipsum dolor sit amet. Praesent vel justo. Valide : <p>Lorem ipsum dolor sit amet. Praesent vel justo.</p> Insérer un espace puis une barre oblique à la fin d’une balise ne possédant pas de balise de fermeture Invalide : <br> Valide : <br /> Imbriquer correctement les éléments Invalide : <p>Paragraphe avec texte en <i>italique</p></i> Valide : <p>Paragraphe avec texte en <i>italique</i></p> Utiliser des minuscules dans les balises et leurs attributs Invalide : <TEXTAREA ID="monTexte"></TEXTAREA> Valide : <textarea id="monTexte"></textarea> T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 33

34 Règles XHTML : Attributs
Chaque valeur d’attribut doit être entre guillemets Invalide : <div id=mon Menu></div> Valide : <div id="monMenu"></div> Pas de sauts de lignes dans la valeur Invalide : <div id="mon Menu"></div> Les formes abrégées des attributs sont interdites Invalide : <option value="page.html" selected></option> Valide : <option value="page.html" selected="selected"></option> Encoder les caractères spéciaux dans les valeurs d’attributs Invalide : <a href="index.php" title="Articles & Didacticiels"> Valide : <a href="index.php" title="Articles & Didacticiels"> L’attribut name est remplacé par l’attribut id Pour des raisons de rétro-compatibilité, il est conseillé de les utiliser encore … Invalide : <h2 name="titre">...</h2> Valide : <h2 name="titre" id="titre">...</h2> T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 34

35 NB : Dans la suite, nous utilisons HTML 4.01, et pas XHTML
Règles XHTML DTD Le document doit respecter les normes de validation d’une des trois DTD XHTML : strict, transitional ou frameset Cette déclaration doit apparaître dans le document juste avant l’élément <html> Des exemples de documents avec DTD valides sont sur moodle La DTD stricte n'autorise pas l'utilisation des anciens éléments de présentation (b, i, etc.) mais elle a l'avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de maintenance que cela apporte.  Recommandé dans le cadre d’un codage professionnel La DTD transitionnelle est plus permissive et plus proche des anciennes habitudes liées à HTML 3.2. Les balises dépréciées en XHTML strict y sont autorisées : le recours à cette DTD est donc plus facile dans un premier temps, mais avec le défaut de mêler encore partiellement structure et présentation. Enfin, la DTD frameset permet l'utilisation des cadres. Ceux-ci tombent en désuétude, mais peuvent se réveler encore utiles dans certains cas très exceptionnels. T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 35

36 Spécifier l’apparence du contenu
Formatage Physique Spécifier l’apparence du contenu

37 Style des caractères Gras <B> … </B>
Italique <I> … </I> Souligné <U> … </U> Barré <S> … </S> exposant <SUP> … </SUP> indice <SUB> … </SUB> Chasse fixe <TT> … </TT> Pré-formaté <PRE>… </PRE>

38 Taille des caractères Taille de base des caractères :
<BASEFONT SIZE = val> Taille des caractères : <FONT SIZE = val |+val |-val> </FONT> Réduire le texte <SMALL> ...</SMALL> Grossir les caractères <BIG> </BIG>

39 Mise en forme de texte Retour à la ligne : Ligne de séparation :
<BR /> Ligne de séparation : <HR SIZE = taille WIDTH = épaisseur ALIGN = left |right |center /> <HR SRC = image />

40 Caractères spéciaux Il se peut qu’en écrivant le source un caractère soit interprétable par le navigateur  il ne peut être utilisé directement. Quelques caractères : & : & < : < > : >   : espace non sécable © : copyright Accents Cf. refcard moodle é = é è = &eagrave; ê = ê à = à € = € ç = ç

41 Formatage Sémantique Spécifier la nature du contenu
Cf.

42 Structuration du document
Titres : 6 titres sont pré-définis h1 à h6 <H#>...</H#> <H# ALIGN = left |right |center |justify>...</H#> Division du texte : <DIV ALIGN = left |right |center |justify > … </DIV > Paragraphe : <P> </P> T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 42

43 ISIM1 – Pages Web Statiques 43
Balises logiques <em> </em> avec intonation emphatique <strong></strong> avec forte intonation <code></code> code source <samp></samp> exemple <kbd></kbd> entrée au clavier <var></var> variable <cite></cite> citation <dfn></dfn> définition <acronym></acronym> abréviation <abr></abr> abrégé T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 43

44 Liste numérotée k. tata l. titi m. toto n. tutu
<OL TYPE = a |A |1 |I |i START = valeur> <LI> premier item <LI> deuxième item ... </OL> Exemple : <OL TYPE = a START = k> <LI> tata <LI> titi <LI> toto <LI> tutu k. tata l. titi m. toto n. tutu

45 Liste non numérotée l tata l titi l toto l tutu
<UL TYPE = disc |circle |square> <LI> premier item <LI> deuxième item ... </UL> Exemple : <UL TYPE = disc> <LI> tata <LI> titi <LI> toto <LI> tutu l tata l titi l toto l tutu

46 Liens

47 Lien local au document Lien local : Chemin au sens d’ UNIX. Exemples :
<A HREF = ‘‘chemin/toto.html’’> Texte ou image du lien </A> Chemin au sens d’ UNIX. Exemples : même répertoire : HREF = ‘‘toto.html’’ sous répertoire : HREF = ‘‘sous_repertoire/toto.html’’ remonter l'arborescence : HREF = ‘‘../toto.html’’ répertoire racine du serveur : HREF = ‘‘/toto.html’’

48 Lien non local au document
Lien sur la même machine : <A HREF = ‘‘/~username/chemin/toto.html’’> Texte ou image du lien </A> Lien sur machine distante : <A HREF = ‘‘

49 Ancres : mise en place d'un sommaire
Découpage d’un document HTML en zones : <A name = "titi"> zone portant le nom titi </A> <A name = "rominé"> zone portant le nom rominé </A> Chaque zone est ainsi définie par un ancre (titi, rominé) Lien sur un paragraphe : <A HREF = ’’chemin/toto.html#titi’’> Texte ou image du lien </A> Remarque : Pour rendre efficace le sommaire il faut insérer un lien vers le sommaire à la fin de chaque zone.

50 Couleurs de fond Insérer images Liens avec images Images réactives
Couleurs, Images Couleurs de fond Insérer images Liens avec images Images réactives

51 Mise en forme de la page Motif de fond d’écran :
<BODY BACKGROUND = image.gif> Couleur de fond d’écran : <BODY BGCOLOR = "#rrvvbb" > Couleur du texte : <BODY TEXT = "#rrvvbb" > Couleur des liens : <BODY LINK = "#rrvvbb" ALINK = "#rrvvbb" VLINK = "#rrvvbb" >

52 ISIM1 – Pages Web Statiques 52
Couleurs (d'après Sur moodle T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 52

53 Les images Format du fichier source : .gif .jpeg .jpg ... Syntaxe :
<IMG SRC = "chemin/image.gif’" ALT = ‘‘nom’’ WIDTH = valeur HEIGHT = valeur BORDER = valeur ALIGN = alignement /> Alignement de l'image par rapport au texte ALIGN = top |middle |bottom

54 Les cartes : multizones réactives
<MAP NAME = ‘‘carte’’> <AREA SHAPE = ‘‘rect’’ COORDS = ‘‘a1,b1,a2,b2’’ HREF = ‘‘fichier1.html’’> <AREA SHAPE = ‘‘rect’’ COORDS = ‘‘a2,b2,a3,b3’’ HREF = ‘‘fichier2.html’’> <AREA SHAPE = ‘‘rect’’ COORDS = ‘‘a0,b0,a3,b3’’ NOHREF > </MAP> <IMG SRC = ‘‘image.gif’’ USEMAP = ‘‘#carte’’> Type de découpage : SHAPE = rect | circ | poly

55 Cadres NB : l’usage des cadres est déprécié
Cf.

56 Fenêtres ou Frames La notion de «frames» permet de découper un document en plusieurs fenêtres. Chacune des frames affiche le contenu d’un URL indépendant. Les frames remplacent le " BODY" dans le document maître.

57 Document maître URL1 <HTML> <HEAD> … </HEAD>
<FRAMESET ROWS = ‘‘50%,*’’> (2 lignes) <NOFRAMES > Contenu d’un document sans "frames" </NOFRAMES> <FRAME SRC = ‘‘URL1’’> <FRAMESET COLS = ‘‘30%,30%,*’’> <FRAME SRC = ‘‘URL2.1’’> <FRAME SRC = ‘‘URL2.2’’> <FRAME SRC = ‘‘URL2.3’’> </ FRAMESET> </ FRAMESET > </HTML> URL1 URL2.1 URL2.2 URL2.3 30 % 50%

58 Attributs des fenêtres
Source du document à afficher SRC = ‘‘URL’’ Pas d'ascenseur SCROLLING = no Empêcher l’utilisateur de modifier la taille de la fenêtre NORESIZE Attribuer un nom à la fenêtre NAME = ‘‘nom’’

59 ISIM1 – Pages Web Statiques 59
Liens & Cadres Attribut TARGET dans les liens : permet de spécifier le nom du cadre où afficher Autres formes : _self (par défaut) : au sein de la fenêtre actuelle _top : au sein de la fenêtre actuelle (en totalité) _blank : au sein d’une nouvelle fenêtre T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 59

60 Exercices

61 ISIM1 – Pages Web Statiques 61
Exercice 1 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 61

62 ISIM1 – Pages Web Statiques 62
Exercice 2 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 62

63 ISIM1 – Pages Web Statiques 63
Corrigé T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 63

64 ISIM1 – Pages Web Statiques 64
Exercice 3.1 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 64

65 ISIM1 – Pages Web Statiques 65
Exercice 3.2 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 65

66 ISIM1 – Pages Web Statiques 66
Exercice 4 T. Bourdeaud’huy – IG2I Saison ISIM1 – Pages Web Statiques 66