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

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)

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

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

ISIM 1 – Pages Web Statiques 5T. Bourdeaudhuy – IG 2 I Saison TEST QCM en début de séance 15 minutes

Tableaux NB : Lusage de tableaux pour structurer le document est une mauvaise idée

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

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

Exemple 1 Tableaux (3) ROWSPAN : taille de cellule en nombre de lignes Exemple

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

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

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

FORMULAIRES A connaître PAR COEUR

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

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

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)

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

Meta-Tags Exemples :

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

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

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

Sil reste du temps

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

ISIM 1 – Pages Web Statiques 38T. Bourdeaudhuy – IG 2 I Saison Références Consulter les sites daide : – – –Forum – – Tester vos connaissances : – Valider vos pages : –