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é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 2006-2007 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 2006-2007 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 2006-2007 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 ISIM 1 – Pages Web Statiques 5T. Bourdeaudhuy – IG 2 I Saison 2006-2007 TEST QCM en début de séance 15 minutes

6 Tableaux NB : Lusage de tableaux pour structurer le document est une mauvaise idée http://www.informit.com/articles/printerfriendly.asp?p=369225&rl=1 http://www.openweb.eu.org/articles/problemes_tableaux/

7 Titre 1Titre 2 cell 1.1 cell 2.1cell 2.2 cell 1.2 val 2 val1val1 Tableaux (facultatif ) titre 1 titre 2 (ligne 1) cell 1.1 cell 1.2 (ligne 2) cell 2.1 cell 2.2

8 Tableaux (2) Attributs d'un tableau Position horizontale du texte ALIGN = left |right |center | justify Position verticale du texte VALIGN = top |bottom |middle | baseline Titre de la table : légende

9 1.1 1.21.3 2.12.2 Exemple 1 Tableaux (3) ROWSPAN : taille de cellule en nombre de lignes Exemple 1 1.1 1.2 1.3 2.1 2.2

10 1.11.2 2.1 2.22.3 Exemple 2 Tableaux (4) COLSPAN : taille de cellule en nombre de colonnes Exemple 2 1.1 1.2 2.1 2.2 2.3

11 ISIM 1 – Pages Web Statiques 11T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Exercice

12 ISIM 1 – Pages Web Statiques 12T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Pour aller plus loin Espacement Légendes et regroupements –caption –col –colgroup –tbody –tfoot –th –thead http://webdesign.about.com/od/ htmltags/a/bl_index.htm http://webdesign.about.com/od/ htmltags/a/bl_index.htm

13 FORMULAIRES A connaître PAR COEUR

14 ISIM 1 – Pages Web Statiques 14T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Formulaires... Texte par défaut de la zone

15 ISIM 1 – Pages Web Statiques 15T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Champs d'un formulaire Les boutons : SUBMIT, RESET, IMAGE Les entrées ligne :INPUT –Text Field –Password Field –Check Box –Radio Button –Image Pixel –Hidden Field –File Les zones de sélection : SELECT Les entrées multi-lignes : TEXTAREA

16 ISIM 1 – Pages Web Statiques 16T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Action / Méthode / Enctype Action : adresse de la page où envoyer les données Méthode : deux valeurs possibles : –GET : (par défaut) les données sont envoyées dans lurl –POST : les données sont envoyées dans les entêtes –NB : Le même format est utilisé dans les deux cas Enctype : –Utilisé si la méthode est POST –application/x-www-form-encoded (par défaut) –"multipart/form-data" (si utilisé avec inpu type=file)

17 ISIM 1 – Pages Web Statiques 17T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Comparaison GET|POST Chaîne de requête : « Querystring » en anglais Informations passées dans lurl, précédées dun « ? » Format : Possibilité dutiliser plusieurs fois la même clé ( ) Attention : –la longueur dune chaîne de requête est limitée par les capacités du navigateur –Les données saffichent en CLAIR dans la barre dadresse Le même format est utilisé dans le passage par requête POST, mais sans les limitations ! ? =[ ][& =[ ]]*e.g. : url?cle1=valeur1&cle2=valeur2

18 ISIM 1 – Pages Web Statiques 18T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Tester avec php Récupérer le fichier form.php sur moodle Le placer dans votre répertoire public_html Vous en servir comme cible du formulaire –NB : pour faire fonctionner les champs select multiple, il faut terminer le nom par [] –Exemple : …

19 ISIM 1 – Pages Web Statiques 19T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Tester avec asp ATTENTION : les comptes ne sont peut-être pas créés pour les L1… Utilisation du serveur WEBASP Récupérer le fichier form.asp sur moodle Adresse à utiliser : http://webasp.ig2i.fr/loginWin NB: Si votre répertoire personnel nest pas monté au démarrage : net use v: \\webasp\login$ (Sous DOS)

20 ISIM 1 – Pages Web Statiques 20T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Input type = Text <INPUT TYPE = "text" NAME= "nom" MAXLENGTH = "val1" SIZE = "val2" VALUE = "val" disabled = "disabled" readonly = "readonly" /> Attributs : NAME : nom de la variable MAXLENGTH : longueur maximale de la valeur (en nombre de caractères) SIZE : taille de la fenêtre (en nombre de caractères) VALUE : valeur par défaut Valable pour tous les types de champs

21 ISIM 1 – Pages Web Statiques 21T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Input type= Password <INPUT TYPE= "password" NAME= "nom" MAXLENGTH= "val1" SIZE= "val2" /> Attributs : NAME : nom de la variable MAXLENGTH : longueur maximale de la valeur (en nombre de caractères) SIZE : taille de la fenêtre (en nombre de caractères) Remarque : le client ne crypte pas la valeur saisie lors de l'envoi de la requête

22 ISIM 1 – Pages Web Statiques 22T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Input type = Check box | Radio Button <INPUT TYPE= "checkbox | radio" NAME= "nom" VALUE = "valeur" checked = "checked" /> libellé Attributs : NAME : nom de la variable VALUE : valeur par défaut CHECKED : valeur sélectionnée par défaut (une seule fois) Les boutons radio sont synchronisés sils portent le même nom

23 ISIM 1 – Pages Web Statiques 23T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Input type=Hidden <INPUT TYPE= "hidden" NAME= "nom" VALUE = "valeur" /> Attributs : NAME : nom de la variable VALUE : valeur par défaut Définition d'une valeur non matérialisée dans la fenêtre du client

24 ISIM 1 – Pages Web Statiques 24T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Input type = SUBMIT | RESET <INPUT TYPE= "SUBMIT |RESET" NAME = "nom" VALUE = "valeur" /> Bouton SUBMIT : –Déclencheur de requête W3 Bouton RESET : –Déclencheur de ré-initialisation des variables Attributs : NAME = nom de la variable VALUE = libellé du bouton

25 ISIM 1 – Pages Web Statiques 25T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Input type = IMAGE Déclenche la soumission du formulaire Si on utilise un dispositif de pointage pour cliquer sur limage, les coordonnées du pixel cliqué sont également fournies –Question : quels noms sont utilisés pour envoyer ces données ? NB : Il nest pas recommandé de se servir de ces coordonnées pour influencer le traitement –Question : quelles autres solutions existent ?

26 ISIM 1 – Pages Web Statiques 26T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Select : Les zones de sélection label Attributs : MULTIPLE : variable multivaluée NAME : nom de la variable SIZE : taille de la fenêtre OPTION : définition de d'une variable VALUE : valeur de la variable SELECTED : valeur par défaut

27 ISIM 1 – Pages Web Statiques 27T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Regrouper des options moins de 15 ans entre 15 et 30 ans plus de 30 ans

28 ISIM 1 – Pages Web Statiques 28T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Textarea : Les entrées multi-lignes <TEXTAREA NAME = "nom" ROWS = "nb _ lignes" COLS = "nb_colonnes"> ligne1 ligne2.... Attributs : NAME : nom de la variable ROWS : nombre des lignes COLS : nombre des colonne

29 ISIM 1 – Pages Web Statiques 29T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Upload <form enctype="multipart/form-data" action="upload.php" method="post"> Pour tester : utiliser le fichier upload.php sur moodle

30 ISIM 1 – Pages Web Statiques 30T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Regrouper des champs XHTML : balise OBLIGATOIRE –On ne peut placer directement un champ de formulaire après la balise –Permet de donner une sémantique aux champs de formulaire Etat civil Nom : Prénom :

31 ISIM 1 – Pages Web Statiques 31T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Label Permet détiqueter les contrôles de formulaires pour leur donner un sens –Cliquer sur le texte revient à cliquer sur le champ associé –Labels explicites : l'attribut for= de l'élément label et l'attribut id du contrôle doivent avoir la même valeur –Labels implicites (pas de for, encadrement du champ par les balises label) dépréciés Chercher :

32 Meta-Tags Exemples : http://webby.free.fr/html/meta-tags.html

33 ISIM 1 – Pages Web Statiques 33T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Définition = « métadonnées », « méta-balises » Informations situées au sein d'un document (partie HEAD) afin de le décrire –auteur(s) du document, limite de validité, langue utilisée, mots- clés Informations utilisées par les robots dindexation Deux types : –NAME, permettant de décrire la page HTML –HTTP-EQUIV, permettant d'envoyer des informations supplémentaires au navigateur via le protocole HTTP

34 ISIM 1 – Pages Web Statiques 34T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Meta NAME Author : Informations sur l'auteur de la page Copyright : Informations de droits d'auteur Description : Information à afficher lors du résultat d'une recherche Expires : Indique au robot la date d'expiration de la page –never –"date à laquelle la page expire" Generator : Nom de l'éditeur HTML ayant généré la page Keywords : Mots clés décrivant la page Web Ratinggeneral : Type de contenu (public visé) Rev : Mél du Webmestre Revisit-after "x days" : Délai de visite par le robot Robots : –all : Permet à tous les robots d'indexer –None : Ne permet à aucun robot d'indexerSubject"Sujet de la page"Permet de préciser le sujet de la page

35 ISIM 1 – Pages Web Statiques 35T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Meta HTTP-EQUIV Pragma no-cache : –Empêche le navigateur de garder la page dans son cache Refresh x; URL="adresse" –Appelle une autre page (située à lURL spécifiée) après un délai d'attente de x secondes Robots –All : Permet au robot de référencer toute la page (par défaut) follow : Permet au robot de suivre les liens de la page index : Permet au robot d'indexer la page nofollow : Interdit au robot de suivre les liens noindex : Interdit au robot d'indexer la page none : Empêche le robot de poursuivre l'indexation du site Window-target –_blank : Force le browser à afficher la page dans une nouvelle fenêtre –_top: Affiche la page dans la fenêtre entière (pas dans une frame).

36 Sil reste du temps

37 ISIM 1 – Pages Web Statiques 37T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Tabindex (Propriété DOM) Permet de définir lordre dans lequel sont parcourus les éléments de formulaire (et les liens) lors de lappui sur la touche TABULATION Exemple :

38 ISIM 1 – Pages Web Statiques 38T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Références Consulter les sites daide : –http://www.w3.org/http://www.w3.org/ –http://www.w3schools.com/http://www.w3schools.com/ –Forum http://forum.alsacreations.com/http://forum.alsacreations.com/ –http://webdesign.about.com/od/htmltags/a/bl_index.htmhttp://webdesign.about.com/od/htmltags/a/bl_index.htm –http://pierre.senellart.com/enseignement/2006-2007/ifips1web/http://pierre.senellart.com/enseignement/2006-2007/ifips1web/ Tester vos connaissances : –http://www.w3schools.com/html/html_quiz.asphttp://www.w3schools.com/html/html_quiz.asp Valider vos pages : –http://validator.w3.org/http://validator.w3.org/