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