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

04/0

5/1

1

Préparé par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: [email protected]

www.tele-matica.net

Éléments d’un site web

Cours: Conception et programmation de sites web

dynamiques

04/0

5/1

1


www.tele-matica.net

Sommaire● Introduction aux pages web.● Éléments d’un site web.

04/0

5/1

1


www.tele-matica.net

Introduction aux pages web

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


Structure d’un document HTML<HTML>

<HEAD>

<TITLE>Titre de la page</TITLE>

</HEAD>

<BODY> Contenu de la page

</BODY>

</HTML>

04/0

5/1

1


www.tele-matica.net


La page web est le format utilisé pour présenter l’information 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 qu’on accède a la page par voie intranet.

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


Versions du langage HTML

1993 -------------- HTML 1.0Novembre 1995 --------------- HTML 2.0

14 Janvier 1997 ------------------ HTML 3.2

18 Décembre 1997 ------------------ HTML 4.0

24 Novembre 1999------------------ HTML 4.01

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


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 :

04/0

5/1

1


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,...)

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net


Protocole

Mot de passe (facultatif)

Nom du serveur Port(facultatif si 80)

Chemin

http:// user:password@

www.ecpap.net :80 /index.php

Tableau: parties constituants d’un URL

04/0

5/1

1


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.

04/0

5/1

1


www.tele-matica.net

Les éléments d’un site web

04/0

5/1

1


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

04/0

5/1

1


www.tele-matica.net

Insertion d’ images

L’ insertion d’images 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é.

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


Exemple:

<IMG SRC="url_de_l_image" ALT="Texte remplaçant l'image"

TITLE="Texte à afficher">

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLe 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.

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLe 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.

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLa balise FORM Les formulaires sont délimités par la balise <FORM> ... </FORM>, une balise qui permet de regrouper plusieurs éléments de formulaire (boutons, champs de saisie, ...) et qui possède les attributs obligatoires suivants :

04/0

5/1

1


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

04/0

5/1

1


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.

04/0

5/1

1


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

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsExemple:

<FORM METHOD=POST ACTION="mailto:[email protected]">

<FORM METHOD=GET ACTION="http://www.ecpap.net/cgi-bin/script.cgi">

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsA 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.

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsA 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

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsEnvoi 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, …

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsEnvoi 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&champ

3=valeur3

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsEnvoi 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=val2

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLa 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 : <INPUT type="Nom du champ"

value="Valeur par défaut" name="Nom de

l'élément">

04/0

5/1

1


www.tele-matica.net


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 :

<INPUT type="Nom du champ" value="Valeur par défaut"

name="Nom de l'élément">

04/0

5/1

1


www.tele-matica.net


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.

04/0

5/1

1


www.tele-matica.net


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 :

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net


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

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLa 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

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLa 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

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLa 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

04/0

5/1

1


www.tele-matica.net

Le formulaire et ses élémentsLa 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

04/0

5/1

1


www.tele-matica.net

Un exemple de formulaire

<FORM method=post action="cgi-bin/script.pl"> Enregistrement d'un utilisateur <TABLE BORDER=0> <TR>

<TD>Nom</TD> <TD><INPUT type=text

name="nom"> </TD> </TR>

04/0

5/1

1


www.tele-matica.net


<TR> <TD>Prénom</TD> <TD> <INPUT type=text name="prenom"> </TD> </TR> <TR>

<TD>Sexe</TD> <TD> Homme : <INPUT type=radio

name="sexe" value="M"> <br>Femme : <INPUT type=radio name="sexe" value="F">

</TD> </TR>

04/0

5/1

1


www.tele-matica.net


<TR> <TD>Fonction</TD> <TD> <SELECT name="fonction"> <OPTION VALUE="enseignant">Enseignant</OPTION> <OPTION VALUE="etudiant">Etudiant</OPTION> <OPTION VALUE="ingenieur">Ingénieur</OPTION> <OPTION VALUE="retraite">Retraité</OPTION> <OPTION VALUE="autre">Autre</OPTION> </SELECT>

</TD> </TR>

04/0

5/1

1


www.tele-matica.net


<TR> <TD>Commentaires</TD> <TD> <TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires</TEXTAREA> </TD>

</TR> <TR>

<TD COLSPAN=2> <INPUT type="submit" value="Envoyer">

</TD> </TR> </TABLE> </FORM>

04/0

5/1

1


www.tele-matica.net


Voici le résultat de ce code HTML

04/0

5/1

1


www.tele-matica.net

Le son

04/0

5/1

1


www.tele-matica.net

L’élément html pour l’insertion de multimédia (son, vidéo, animation flash) dans une page web est : <EMBED> unis a un grand nombre d’attributs tels que : TYPE, SRC, AUTOSTART, LOOP, SHOWCONTROLS, SHOWSTATUSBAR, CLICKTOPLAY, VOLUME, WIDTH, HEIGHT,

HIDDEN.

04/0

5/1

1


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

04/0

5/1

1


www.tele-matica.net

Les scripts (JavaScript)

04/0

5/1

1


www.tele-matica.net

L’élément <SCRIPT> permet d’inserter du JavaScript dans un document html

Cet élément est contenu dans l’élément <Head> contrairement aux applets de java (<Body>)

04/0

5/1

1


www.tele-matica.net

Exemple:

<HTML> <HEAD> <TITLE>

Testpage</TITLE> <SCRIPT

LANGUAGE="JavaScript"> alert (‘Salut tout le monde’) </SCRIPT>

</HEAD> <BODY>

04/0

5/1

1


www.tele-matica.net

Les Applets

04/0

5/1

1


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 <APPLET> pour insérer les applets dans une page web.

04/0

5/1

1


www.tele-matica.net

Exemple:<BODY>

<APPLET CODE="AnimText.class" WIDTH=600 HEIGHT=40> <PARAM NAME=text VALUE="Esto es una prueba de Applet Java">

<PARAM NAME=font VALUE="TimesRoman"> <PARAM NAME=type VALUE=1> <PARAM NAME=fgcolor VALUE="yellow"> <PARAM

NAME=min VALUE=12> <PARAM NAME=max VALUE=36> <PARAM NAME=naptime VALUE=100> <PARAM

NAME=align VALUE=left> </APPLET>

04/0

5/1

1


www.tele-matica.net

ConclusionIl est évident que nous avons parcouru presque tout les éléments importants pouvant être présents dans un site web.

L’importance de les connaître tous y surtout les éléments html qui les génèrent est au moment d’identifier leur présence et pouvoir modifier leurs paramètres selon le besoin de chacun de nous.

04/0

5/1

1


www.tele-matica.net

Littératures consultées

● Guía para escribir documentos HTML,© jac. 1996 - 2003. E-mail: [email protected]

● Microsoft Encarta Enciclopedia 2006

● http://www.commentcamarche.net

Documents

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