04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | matica.net Éléments dun site web Cours: Conception.

Présentation au sujet: "04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | matica.net Éléments dun site web Cours: Conception."— Transcription de la présentation:

1 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Éléments dun site web Cours: Conception et programmation de sites web dynamiques

2 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Sommaire Introduction aux pages web. Éléments dun site web.

3 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web

4 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web Tout document HTML est une page web. Le HTML est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.

5 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web Structure dun document HTML Titre de la page Contenu de la page

6 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web La page web est le format utilisé pour présenter linformation sur un réseau. Cette information peut être situé sur un ordinateur externe, soit sur Internet ou un ordinateur locale, dans ce cas on dit quon accède a la page par voie intranet.

7 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d accéder via le réseau à des documents repérés par une adresse unique, appelée URL.

8 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web Versions du langage HTML 1993 -------------- HTML 1.0 Novembre 1995 --------------- HTML 2.0 14 Janvier 1997 ------------------ HTML 3.2 18 Décembre 1997 ------------------ HTML 4.0 24 Novembre 1999------------------ HTML 4.01

9 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web On appelle World Wide Web (noté WWW) ou tout simplement Web (mot anglais signifiant toile) la "toile virtuelle" formée par les différents documents (appelés « pages web ») liés entre-eux par des hyperliens.

10 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Introduction aux pages web Les pages web sont généralement organisées autour d'une page d'accueil, jouant un point central dans la navigation à l'aide des liens hypertextes. Cet ensemble cohérent de pages web liées par des liens hypertextes et articulées autour d'une page d'accueil commune est appelée site web.

11 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Qu'est-ce qu'une URL? Une URL (Uniform Resource Locator) est un format de nommage universel pour désigner une ressource sur Internet. Il s'agit d'une chaîne de caractères ASCII imprimables qui se décompose en cinq parties :

12 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net URL: Parties constituants 1. Le nom du protocole: c'est-à-dire en quelque sorte le langage utilisé pour communiquer sur le réseau. Le protocole le plus largement utilisé est le protocole HTTP (HyperText Transfer Protocol), le protocole permettant d'échanger des pages Web au format HTML. De nombreux autres protocoles sont toutefois utilisables (FTP,News,Mailto,Gopher,...)

13 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net URL: Parties constituants 2. Identifiant et mot de passe: permet de spécifier les paramètres d'accès à un serveur sécurisé. Cette option est déconseillée car le mot de passe est visible dans l'URL 3. Le nom du serveur: Il s'agit d'un nom de domaine de l'ordinateur hébergeant la ressource demandée. Notez qu'il est possible d'utiliser l'adresse IP du serveur, ce qui rend par contre l'URL moins lisible.

14 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net URL: Parties constituants 4. Le numéro de port: il s'agit d'un numéro associé à un service permettant au serveur de savoir quel type de ressource est demandée. Le port associé par défaut au protocole est le port numéro 80. Ainsi, lorsque le service Web du serveur est associé au numéro de port 80, le numéro de port est facultatif.

15 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net URL: Parties constituants 5. Le chemin d'accès à la ressource: Cette dernière partie permet au serveur de connaître l'emplacement auquel la ressource est située, c'est-à-dire de manière générale l'emplacement (répertoire) et le nom du fichier demandé.

16 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net URL: Parties constituants ProtocoleMot de passe (facultatif) Nom du serveurPort (facultatif si 80) Chemin http://user:password @ www.ecpap.net:80/index.php Tableau: parties constituants dun URL

17 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Navigateur Web L'élément clé pour la navigation au sein des pages web est le navigateur, c'est-à-dire le logiciel client capable d'interroger les serveurs web, d'exploiter leurs résultats et de mettre en page les informations grâce aux instructions contenues dans la page HTML.

18 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Les éléments dun site web

19 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Les éléments fréquemment utilisés dans un site web que nous allons étudier dans ce cours sont: Les images Le formulaire et ses éléments OLE et ActiveX Le son le vidéo les Scripts Les Applets

20 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Insertion d images L insertion dimages dans une page web contribue à augmenter son attraction. Cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuire à la lisibilité.

21 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Insertion d images La balise IMG du langage HTML permet d'insérer des images dans une page HTML. L'image peut être située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur en spécifiant son URL complète.

22 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Insertion d images Exemple:

23 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Insertion d images SRC: Indique l'emplacement de l'image (il est obligatoire) ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous) ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas. TITLE: Permet d'afficher une infobulle lors du survol de l'image par le curseur. WIDTH: Permet de spécifier la largeur de l'image. HEIGHT: Permet de spécifier la hauteur de l'image.

24 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments Le pourquoi des formulaires Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains magazines.

25 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments Le pourquoi des formulaires Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script de page web dynamique tel que PHP, ASP ou un script CGI.

26 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise FORM Les formulaires sont délimités par la balise..., une balise qui permet de regrouper plusieurs éléments de formulaire (boutons, champs de saisie,...) et qui possède les attributs obligatoires suivants :

27 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments METHOD indique sous quelle forme seront envoyées les réponses « POST » est la valeur qui correspond à un envoi de données stockées dans le corps de la requête, tandis que « GET » correspond à un envoi des données codées dans l'URL, …

28 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments METHOD … et séparées de l'adresse du script par un point d'interrogation.

29 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments ACTION Indique l'adresse d'envoi (script CGI ou adresse email (mailto:adresse.email@machine)).

30 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments Exemple:

31 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments A l'intérieur de la balise FORM La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des éléments qui vont permettre à l'utilisateur de choisir ou de saisir des données, ensemble de données qui seront envoyées à l'URL indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée par l'attribut METHOD.

32 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments A l'intérieur de la balise FORM Ces éléments interactifs sont : 1. La balise INPUT: un ensemble de boutons et de champs de saisie 2. La balise TEXTAREA: une zone de saisie 3. La balise SELECT: une liste à choix multiples

33 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments Envoi des données Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les données présentes dans le formulaire sont envoyées au script CGI sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, …

34 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments Envoi des données … le caractère "=", puis la valeur associée. L'ensemble de ces paires nom/valeur étant séparées entre elles par des esperluettes (caractère &). Les données envoyées ressembleront donc à ceci : champ1=valeur1&champ2=valeur2&champ3=vale ur3

35 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments Envoi des données Dans le cas de la méthode GET (envoi des données à travers l'URL), l'URL ressemblera à une chaîne du genre : http://www.ecpap.net/cgi- bin/script.cgi?champ1=val1&champ2=val 2

36 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante :

37 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante :

38 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT L'attribut name est essentiel car il permettra au script CGI de connaître le champ associé à la paire nom/valeur, c'est- à-dire que le nom du champ sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur, ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.

39 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT L'attribut type permet de préciser le type d'élément que représente la balise INPUT, voici les valeurs que ce champ peut prendre :

40 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT checkbox: il s'agit de cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est coché la paire nom/valeur est envoyée au CGI hidden: il s'agit d'un champ caché. Ce champ non visible sur le formulaire permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur

41 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT file: il s'agit d'un champ permettant à l'utilisateur de préciser l'emplacement d'un fichier qui sera envoyé avec le formulaire. Il faut dans ce cas préciser le type de données pouvant être envoyées grâce à l'attribut ACCEPT de la balise FORM

42 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT image: il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image situé à l'emplacement précisé par son attribut SRC password: il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent sous forme d'astérisques afin de camoufler la saisie de l'utilisateur

43 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons radios devant porter le même attribut name. La paire nom/valeur du bouton radio sélectionné sera envoyé au CGI. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné par défaut

44 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT reset: il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir l'ensemble des éléments du formulaire à leurs valeurs par défaut

45 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise INPUT submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut être précisé grâce à l'attribut value text: il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte. La taille du champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce à l'attribut maxlength

46 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise TEXTAREA La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise INPUT. Cette balise possède les attributs suivants : cols: représente le nombre de caractères que peut contenir une ligne rows: représente le nombre de lignes

47 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise TEXTAREA name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur

48 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise SELECT La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des balises OPTION à l'intérieur de celle- ci). Les attributs de cette balise sont : name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur

49 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le formulaire et ses éléments La balise SELECT disabled: permet de créer une liste désactivée, c'est-à-dire affichée en grisée size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre d'éléments effectifs dans la liste) multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste

50 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Un exemple de formulaire Enregistrement d'un utilisateur Nom

51 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Un exemple de formulaire Prénom Sexe Homme : Femme :

52 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Un exemple de formulaire Fonction Enseignant Etudiant Ingénieur Retraité Autre

53 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Un exemple de formulaire Commentaires Tapez ici vos commentaires

54 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Un exemple de formulaire Voici le résultat de ce code HTML

55 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Le son

56 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Lélément html pour linsertion de multimédia (son, vidéo, animation flash) dans une page web est : unis a un grand nombre dattributs tels que : TYPE, SRC, AUTOSTART, LOOP, SHOWCONTROLS, SHOWSTATUSBAR, CLICKTOPLAY, VOLUME, WIDTH, HEIGHT, HIDDEN.

57 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Exemple: <EMBED TYPE="application/x-mplayer2" SRC="colon.avi" WIDTH=350 HEIGHT=300 AUTOSTART=0 SHOWCONTROLS=1 SHOWSTATUSBAR=1 CLICKTOPLAY=1 VOLUME=0 ALIGN=TOP>

58 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Les scripts (JavaScript)

59 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Lélément permet dinserter du JavaScript dans un document html Cet élément est contenu dans lélément contrairement aux applets de java ( )

60 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Exemple: Testpage alert (Salut tout le monde)

61 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Les Applets

62 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Les Applets (codes compilés), écrits en Java, son beaucoup plus complexes que les scripts de java (codes interprétés). On utilise lélément pour insérer les applets dans une page web.

63 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Exemple:

64 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Conclusion Il est évident que nous avons parcouru presque tout les éléments importants pouvant être présents dans un site web. Limportance de les connaître tous y surtout les éléments html qui les génèrent est au moment didentifier leur présence et pouvoir modifier leurs paramètres selon le besoin de chacun de nous.

65 04/05/11 Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele- matica.net www.tele-matica.net Littératures consultées Guía para escribir documentos HTML, © jac. 1996 - 2003. E-mail: jac@uv.es Microsoft Encarta Enciclopedia 2006 http://www.commentcamarche.net