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 ISIM 1 – Pages Web Statiques 5T. Bourdeaudhuy – IG 2 I Saison 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

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 Exemple 1 Tableaux (3) ROWSPAN : taille de cellule en nombre de lignes Exemple

10 Exemple 2 Tableaux (4) COLSPAN : taille de cellule en nombre de colonnes Exemple

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

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

13 FORMULAIRES A connaître PAR COEUR

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

15 ISIM 1 – Pages Web Statiques 15T. Bourdeaudhuy – IG 2 I Saison 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 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 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 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 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 : 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 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

22 ISIM 1 – Pages Web Statiques 22T. Bourdeaudhuy – IG 2 I Saison 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 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 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

26 ISIM 1 – Pages Web Statiques 26T. Bourdeaudhuy – IG 2 I Saison 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 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 Textarea : Les entrées multi-lignes