Initiation au web dynamique 2006-2007 Licence Professionnelle.

Présentation au sujet: "Initiation au web dynamique 2006-2007 Licence Professionnelle."— Transcription de la présentation:

1 Initiation au web dynamique 2006-2007 Licence Professionnelle

2 Initiation au web dynamique2 Sommaire Protocole HTTP Langage HTML Langage PHP Langage JSP Langage ASP

3 Initiation au web dynamique3 Langage HTML HTML (HyperText Markup Language) est une application du SGML (Standard Generalized Markup Language). Il sagit dun standard, dun ensemble de recommandations publié par le W3C, (World Wide Web Consortium, http://www.w3.org/.http://www.w3.org/ HTML est un langage dont la création a débuté en 1989, la version 1.0 ayant vu le jour en 1992. La version 4.01 est la version actuelle (et définitive du langage HTML, notons que la version 4 est lune des sources dun autre langage : XHTML).

4 Initiation au web dynamique4 Langage HTML HTML (HyperText Markup Language) est une application du SGML (Standard Generalized Markup Language). Il sagit dun standard, dun ensemble de recommandations publié par le W3C, (World Wide Web Consortium, http://www.w3.org/.http://www.w3.org/ HTML est un langage dont la création a débuté en 1989, la version 1.0 ayant vu le jour en 1992. La version 4.01 est la version actuelle (et définitive du langage HTML, notons que la version 4 est lune des sources dun autre langage : XHTML). HTML permet de réaliser des documents, en utilisant une syntaxe structurante. Les pages HTML sont des documents statiques

5 Initiation au web dynamique5 Langage HTML Une page HTML peut être vue comme un simple fichier texte (et est à ce titre éditable via pléthore doutils). Une page HTML est interprétée par le navigateur afin de réaliser laffichage présenté à lutilisateur de ce dernier. Lextension de fichier associée aux pages HTML est généralement «.htm », ou encore «.html », mais cela dépend de la configuration du serveur web.

6 Initiation au web dynamique6 Langage HTML Une page HTML est fichier texte contenant des balises HTML représentées de la manière suivante :. Le HTML nest pas sensible à la casse en ce qui concerne le nom des balises. On trouve des balises douverture et des balises de fermeture Ex. : mise en forme de texte : gras : texte en gras italique : texte en italique Certaines balises nont pas de fermeture Ex. : la balise effectue un retour à la ligne, on la notera de la manière suivante : dans le cas du XHTML

7 Initiation au web dynamique7 Langage HTML Limbrication des balises est possible mais doit être effectuée de manière logique Ex. : Lexemple suivant fonctionne : texte en gras texte en gras et italique Lexemple suivant ne fonctionne pas : texte en gras texte en gras et italique La mise en forme du code source ninflue pas sur la mise en forme finale de la page HTML, il est donc possible dindenter le code source. Exception faite de lutilisation de la balise PRE qui permet de conserver la mise en forme du texte présent entre la balise douverture et la balise de fermeture. Utilisation des commentaires en HTML : un commentaire apparaîtra dans le code source de la page HTML mais pas dans la représentation de la page HTML sur le navigateur client. Ex. :

8 Initiation au web dynamique8 Langage HTML Structure minimum dune page HTML Titre de la page Corps de la page

9 Initiation au web dynamique9 Langage HTML Attributs des balises Les balises possèdent des attributs représentés pour la plus part sous forme de couple clé="valeur"

10 Initiation au web dynamique10 Langage HTML Caractères Spéciaux Certains caractères sont nécessaires au fonctionnement des pages HTML ( pour les balises …), il est donc nécessaire dutiliser du code HTML pour pouvoir visualiser certains caractères dans les pages HTML. CaractèreCode HTML "" &&anp; << >> Espace insécable

11 Initiation au web dynamique11 Langage HTML Tableaux : Le code HTML permettant de représenter un tableau de deux lignes et de deux colonnes sera le suivant : A B C D Les balises et délimitent le début et la fin du tableau. Chaque ligne est délimitée par les balises. Les cellules contenant les données sont délimitées par les balises et.

12 Initiation au web dynamique12 Langage HTML Sur la balise TABLE, on peut utiliser les attributs suivants : border : permet de choisir lépaisseur de la bordure width : permet de fixer la largeur du tableau (en pixels ou en pourcentage) height : permet de fixer la hauteur du tableau (en pixels ou en pourcentage) Les balises TR et TD acceptent les attributs suivants : align : pour choisir lalignement horizontal des données valign : pour choisir lalignement vertical des données …

13 Initiation au web dynamique13 Langage HTML La navigation entre les pages est assurée grâce à des liens. La balise permettant de créer un lien est la balise Ex. : création dun lien « accès à la page des contacts », le nom du fichier visé est contact.htm, le code HTML permettant de créer ce lien sera le suivant : accès à la page des contacts

14 Initiation au web dynamique14 Langage HTML Pour afficher une image dans une page HTML, il faut utiliser la balise IMG. Dans les spécifications du W3C, les formats suivants sont acceptés : JPEG GIF PNG (En pratique, Internet Explorer ne gère pas le PNG 24) Ex. : affichage dun fichier image image2.gif Les attributs suivants peuvent être utilisés : align : alignement de limage border : taille de la bordure autour de limage height : forcer une taille en hauteur pour limage (en pixel ou en poucentage) width : forcer une taille en largeur pour limage (en pixel ou en poucentage) …

15 Initiation au web dynamique15 Langage HTML Les formulaires : La balise FORM Ils permettent aux visiteurs dun site de saisir et de transmettre des données aux auteurs du site. Ils sont délimités par les balise... Les attributs suivants doivent être présents dans la balise FORM : METHOD : indique la méthode utilisée par le navigateur client pour transmettre les données au serveur (GET : données codées dans lURL ; POST : données stockées dans le corps de la requête) ACTION : adresse à laquelle les données vont être envoyées (adresse de page, de script CGI ou adresse email Exemples :

16 Initiation au web dynamique16 Langage HTML Transmission des données par les formulaires Les différents champs contenus dans le formulaire seront transmis sous forme de couple « clé=valeur ». Exemple : un formulaire contient les champs nommés champ1, champ2, champ3 ; les données saisies dans ces champs sont donnée1, donnée2, donnée3 ; les données seront transmises de la manière suivante : champ1=donnée1&champ2=donnée2&champ3=donnée3 En méthode GET, ceci nous donne lURL suivante : http://www.monsite.fr/mapage.asp?champ1=donnée1&cha mp2=donnée2&champ3=donnée3

17 Initiation au web dynamique17 Langage HTML La balise INPUT Cette balise est la plus utilisée car elle permet de créer des champs de différents type : champ texte, champ mot de passe, case à cocher, … Syntaxe :

18 Initiation au web dynamique18 Langage HTML Le type de balise peut prendre les valeurs suivantes : text : champ permettant la saisie dune ligne de texte checkbox : case à cocher gérant deux états : coché : checked non coché : unchecked hidden : champ caché : ce champ ne sera pas visible sur le formulaire mais pourra contenir une valeur qui sera transmise au serveur file : champ permettant à lutilisateur de choisir un fichier à envoyer au serveur password : champ permettant la saisie dune ligne de texte mais les caractères saisis sont remplacés par des étoiles (*) lors de laffichage radio : permet dobtenir un choix unique de lutilisateur entre plusieurs propositions, les boutons radio qui doivent fonctionner ensemble doivent porter le même attribut name reset : bouton de remise à zéro pour le formulaire : tous les champs sont remis à leur valeur par défaut submit : bouton de soumission du formulaire, les données sont transmises au serveur lorsque lutilisateur clique sur ce bouton image : permet de faire un bouton de soumission personnalisé, préciser limage à utiliser avec lattribut « src »

19 Initiation au web dynamique19 Langage HTML Balise TEXTAREA Il sagit dune zone de saisie de texte multi-lignes. Les attributs suivants sont utilisables : name : nom du champ cols : nombre de caractères par ligne rows : nombre de lignes readonly : le texte de ce champ ne peut pas être modifié value : valeur par défaut du champ

20 Initiation au web dynamique20 Langage HTML La balise SELECT Cette balise permet de créer une liste déroulante. Les attributs suivants existent : name : nom du champ disabled : champ grisé : non modifiable multiple : permet de sélectionner plusieurs éléments de la liste Les éléments contenus dans cette liste seront délimités par des balises OPTION.

21 Initiation au web dynamique21 Langage HTML La balise OPTION Cette balise permet de créer la liste des valeur dune liste déroulante. Les attributs suivants existent : value : valeur de loption dans le cas ou elle est sélectionnée par lutilisateur selected : valeur pré-sélectionnée dans la liste de valeurs

22 Initiation au web dynamique22 Langage HTML - Exercice N°1 Ecrire le code HTML de la page donnée en exemple