CPSWD S3

lments dun site web
Cours: Conception et programmation de sites web dynamiques
Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net
www.tele-matica.net
Sommaire
Introduction aux pages web. lments dun site web.
www.tele-matica.net
Introduction aux pages web
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 rle est de formaliser l'criture d'un document avec des balises de formatage. Les balises permettent d'indiquer la faon dont doit tre prsent le Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net document et les liens qu'il tablit www.tele-matica.net avec d'autres documents.

Structure dun document HTML
<HTML> <HEAD> <TITLE>Titre de la page</TITLE> </HEAD> <BODY> Contenu de la page </BODY> </HTML>
www.tele-matica.net

La page web est le format utilis pour prsenter linformation sur un rseau. Cette information peut tre situ sur un ordinateur externe, soit sur Internet ou un ordinateur locale, dans ce cas on dit quon accde a la page par voie intranet.
www.tele-matica.net

Le langage HTML permet notamment la lecture de documents sur Internet partir de machines diffrentes, grce au protocole HTTP, permettant d accder via le rseau des documents reprs par une adresse unique, appele URL.
www.tele-matica.net

Versions du langage HTML 1993 -------------- HTML 1.0 Novembre 1995 --------------- HTML 2.0 14 Janvier 1997 ------------------ HTML 3.2 18 Dcembre 1997 -----------------HTML 4.0 24 Novembre 1999-----------------Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@teleHTML 4.01 matica.net
www.tele-matica.net

On appelle World Wide Web (not WWW) ou tout simplement Web (mot anglais signifiant toile) la "toile virtuelle" forme par les diffrents documents (appels pages web ) lis entre-eux par des hyperliens.
www.tele-matica.net

Les pages web sont gnralement organises autour d'une page d'accueil, jouant un point central dans la navigation l'aide des liens hypertextes. Cet ensemble cohrent de pages web lies par des liens hypertextes et articules autour d'une page d'accueil commune est appele site web.
www.tele-matica.net
Qu'est-ce qu'une URL?

Une URL (Uniform Resource Locator) est un format de nommage universel pour dsigner une ressource sur Internet. Il s'agit d'une chane de caractres ASCII imprimables qui se dcompose en cinq parties :
www.tele-matica.net
URL: Parties constituants

nom du protocole: c'est--dire en quelque sorte le langage utilis pour communiquer sur le rseau. 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 Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net (FTP,News,Mailto,Gopher,...)
1. Le
www.tele-matica.net

et mot de passe: permet de spcifier les paramtres d'accs un serveur scuris. Cette option est dconseille 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 hbergeant la ressource demande. Notez qu'il est possible d'utiliser OSIRUS | (+509) 3700 7443 du rosirus@telePrpar par: Ing. Rodrigue l'adresse IP | Email:serveur, ce matica.net qui rend par contre l'URL moins www.tele-matica.net lisible.
2. Identifiant

numro de port: il s'agit d'un numro associ un service permettant au serveur de savoir quel type de ressource est demande. Le port associ par dfaut au protocole est le port numro 80. Ainsi, lorsque le service Web du serveur est associ au numro de port 80, le numro de Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net port est facultatif.
4. Le
www.tele-matica.net

5. Le
chemin d'accs la ressource: Cette dernire partie permet au serveur de connatre l'emplacement auquel la ressource est situe, c'est--dire de manire gnrale l'emplacement (rpertoire) et le nom du fichier demand.
www.tele-matica.net

Protocol e Mot de passe (facultatif ) user:passwor d@ Nom du serveur Port (facultati f si 80) :80 Chemin
http://
www.ecpap.net
/index.php
Tableau: parties constituants dun URL
www.tele-matica.net
Navigateur Web L'lment 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 rsultats et de mettre en page les informations grce Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@teleaux instructions Prpar par: Ing. matica.net contenues dans la page HTML.
www.tele-matica.net
Les lments dun site web
www.tele-matica.net
Les lments frquemment utiliss dans un site web que nous allons tudier dans ce cours sont:

Les images Le formulaire et ses lments OLE et ActiveX Le son le vido les Scripts Les Applets
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'excs car les images peuvent impliquer un temps de chargement assez long et peuvent
dans certains cas nuire la lisibilit.

www.tele-matica.net
Insertion d images
La balise IMG du langage HTML permet d'insrer des images dans une page HTML. L'image peut tre situe sur le mme serveur que la page dans laquelle elle est insre mais galement sur un autre serveur en spcifiant son | (+509) complte. Prpar par: Ing. Rodrigue OSIRUSURL 3700 7443 | Email: rosirus@telematica.net
www.tele-matica.net
Insertion d images
Exemple:
<IMG SRC="url_de_l_image" ALT="Texte remplaant l'image" TITLE="Texte afficher">
www.tele-matica.net
Insertion d images
SRC: Indique l'emplacement de l'image (il est obligatoire) ALIGN: Spcifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et endessous) 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 spcifier la largeur de l'image. HEIGHT: Permet de spcifier la hauteur de l'image.
www.tele-matica.net
Le formulaire et ses lments

Le pourquoi des formulaires Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'lments interactifs permettant par exemple un dialogue avec les internaute, la manire des coupons-rponse prsents dans certains magazines.
www.tele-matica.net

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 faon gnrale une adresse e-mail ou un script de page web dynamique tel
que PHP, ASP ou un script CGI.

www.tele-matica.net
La balise FORM
Les formulaires sont dlimits par la balise <FORM> ... </FORM>, une balise qui permet de regrouper plusieurs lments de formulaire (boutons, champs de saisie, ...) et qui possde les attributs obligatoires suivants :
www.tele-matica.net

METHOD indique sous quelle forme seront envoyes les rponses POST est la valeur qui correspond un envoi de donnes stockes dans le corps de la requte, tandis que GET correspond un envoi des donnes codes dans l'URL,
www.tele-matica.net

METHOD et spares de l'adresse du script par un point d'interrogation.
www.tele-matica.net

ACTION Indique l'adresse d'envoi (script CGI ou adresse email (mailto:adresse.email@machine)).
www.tele-matica.net
Exemple:
<FORM METHOD=POST ACTION="mailto:webmaster@ecpap.net "> <FORM METHOD=GET ACTION="http://www.ecpap.net/cgibin/script.cgi">

www.tele-matica.net
A l'intrieur de la balise FORM

La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des lments qui vont permettre l'utilisateur de choisir ou de saisir des donnes, ensemble de donnes qui seront envoyes l'URL indiqu dans l'attribut ACTION de la balise FORM par la mthode indique par l'attribut METHOD.
www.tele-matica.net
A l'intrieur de la balise FORM Ces lments 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
www.tele-matica.net
Envoi des donnes
Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les donnes prsentes dans le formulaire sont envoyes au script CGI sous forme de paires nom/valeur, c'est--dire un ensemble de donnes reprsentes par le nom de l'lment de formulaire, 3700 7443 | Email: rosirus@telePrpar par: Ing. Rodrigue OSIRUS | (+509)
matica.net
www.tele-matica.net
Envoi des donnes
le caractre "=", puis la valeur associe. L'ensemble de ces paires nom/valeur tant spares entre elles par des esperluettes (caractre &). Les donnes envoyes ressembleront donc ceci :
champ1=valeur1&champ2=valeur2&champ
Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@tele3=valeur3 matica.net
www.tele-matica.net
Envoi des donnes
Dans le cas de la mthode GET (envoi des donnes travers l'URL), l'URL ressemblera une chane du genre : http://www.ecpap.net/cgibin/script.cgi?champ1=val1&champ 2=val2
www.tele-matica.net
La balise INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet de crer un bon nombre d'lments "interactifs". La syntaxe de cette balise est la suivante :
<INPUT type="Nom du champ" value="Valeur par dfaut" name="Nom de l'lment">
www.tele-matica.net
La balise INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet de crer un bon nombre d'lments "interactifs". La syntaxe de cette balise est la suivante : <INPUT type="Nom du champ" value="Valeur par dfaut"
name="Nom de l'lment">
www.tele-matica.net
La balise INPUT
L'attribut name est essentiel car il permettra au script CGI de connatre le champ associ la paire nom/valeur, c'est--dire que le nom du champ sera suivi du caractre "=" puis de la valeur entre par l'utilisateur, ou dans le cas contraire de la valeur par dfaut repr par Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net
l'attribut value.
www.tele-matica.net
La balise INPUT L'attribut type permet de prciser le type d'lment que reprsente la balise INPUT, voici les valeurs que ce champ peut prendre :
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 envoye au CGI hidden: il s'agit d'un champ cach. Ce champ non visible sur le formulaire permet de prciser un paramtre fixe qui sera envoy au Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@teleCGI sous forme de paire nom/valeur matica.net
www.tele-matica.net
Le formulaire et ses lments La balise INPUT
file: il s'agit d'un champ permettant l'utilisateur de prciser l'emplacement d'un fichier qui sera envoy avec le formulaire. Il faut dans ce cas prciser le type de donnes pouvant tre envoyes grce l'attribut ACCEPT de la balise FORM
www.tele-matica.net
soumission personnalis, dont l'apparence est l'image situ l'emplacement prcis par son attribut SRC password: il s'agit d'un champ de saisie, dans lequel les caractres saisis apparaissent sous forme d'astrisques afin de camoufler la saisie de l'utilisateur Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net
Le formulaire et ses lments s'agit image: La baliseilINPUT d'un bouton de
www.tele-matica.net
radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposs (l'ensemble des boutons radios devant porter le mme attribut name. La paire nom/valeur du bouton radio slectionn sera envoy au CGI. Un attribut checked pour un des boutons permet de prciser le bouton slectionn par dfaut Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net
www.tele-matica.net

reset: il s'agit d'un bouton de remise zro permettant uniquement de rtablir l'ensemble des lments du formulaire leurs valeurs par dfaut
www.tele-matica.net
submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut tre prcis grce 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 dfinie l'aide de l'attribut size et la taille maximale du texte saisi grce Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telel'attribut maxlength matica.net
www.tele-matica.net
La balise TEXTAREA permet de dfinir balise TEXTAREA La une zone de saisie plus vaste par rapport la simple ligne de saisie que propose la balise INPUT. Cette balise possde les attributs suivants : cols: reprsente le nombre de caractres que peut contenir une ligne Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telerows: reprsente le nombre de lignes matica.net
www.tele-matica.net
champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur readonly: permet d'empcher l'utilisateur de modifier le texte entr par dfaut dans le champ value: reprsente la valeur qui sera envoye par dfaut au script si le champ de saisie n'est pas modifi par Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net frappe de l'utilisateur une
www.tele-matica.net
Le formulaire et ses lments name: reprsente le La balise TEXTAREAnom associ au
La balise SELECT La balise SELECT permet de crer une liste droulante d'lments (prciss par des balises OPTION l'intrieur de celle-ci). Les attributs de cette balise sont : name: reprsente le nom associ au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur
www.tele-matica.net
La balise SELECT de crer une liste disabled: permet dsactive, c'est--dire affiche en grise size: reprsente le nombre de lignes dans la liste (cette valeur peut tre plus grande que le nombre d'lments effectifs dans la liste) multiple: marque la possibilit pour l'utilisateur de choisir plusieurs Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telechamps dans la liste
matica.net
www.tele-matica.net
Un exemple de formulaire
<FORM method=post action="cgibin/script.pl"> Enregistrement d'un utilisateur <TABLE BORDER=0> <TR> <TD>Nom </TD> <TD><INPUT type=text name="nom"> </TD> </TR>
www.tele-matica.net
<TR> <TD>Prnom</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>
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">Ingnieur</OPTION> <OPTION VALUE="retraite">Retrait</OPTION> <OPTION VALUE="autre">Autre</OPTION> </SELECT> </TD> </TR>
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>
www.tele-matica.net
Voici le rsultat de ce code HTML
www.tele-matica.net
Le son
www.tele-matica.net
Llment html pour linsertion de multimdia (son, vido, animation flash) dans une page web est : <EMBED> unis a un grand nombre dattributs tels que : TYPE, SRC, AUTOSTART, LOOP, SHOWCONTROLS, SHOWSTATUSBAR, CLICKTOPLAY, VOLUME, WIDTH, HEIGHT,
HIDDEN.
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>
www.tele-matica.net
Les scripts (JavaScrip t)

www.tele-matica.net
<SCRIPT> Llment dinserter du JavaScript document html
permet dans un
Cet lment est contenu dans llment <Head> contrairement aux applets de java (<Body>)
www.tele-matica.net
Exemple: <HTML> <HEAD> <TITLE> Testpage</TITLE> <SCRIPT LANGUAGE="JavaScript"> alert (Salut tout le monde) </SCRIPT> </HEAD> <BODY> Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telematica.net
www.tele-matica.net
Les Applets
www.tele-matica.net
Les Applets (codes compils), crits en Java, son beaucoup plus complexes que les scripts de java (codes interprts). On utilise llment <APPLET> pour insrer les applets dans une page web.
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>
www.tele-matica.net
Conclusion
Il est vident que nous avons parcouru presque tout les lments importants pouvant tre prsents dans un site web. Limportance de les connatre tous y surtout les lments html qui les gnrent est au moment didentifier leur prsence et pouvoir modifier leurs paramtres selon le besoin de Prpar par: Ing. Rodrigue OSIRUS | (+509) 3700 7443 | Email: rosirus@telechacun de nous. matica.net
www.tele-matica.net
Littratures consultes
Gua para escribir documentos HTML, jac. 1996 - 2003. E-mail: jac@uv.es Microsoft Encarta Enciclopedia 2006 http://www.commentcamarche.net
www.tele-matica.net

CPSWD S3

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CPSWD S3

Загружено:

Авторское право:

Доступные форматы

lments dun site web

Cours: Conception et programmation de sites web dynamiques

Introduction aux pages web

Introduction aux pages web

Introduction aux pages web

Introduction aux pages web

Introduction aux pages web

Introduction aux pages web

Introduction aux pages web

Introduction aux pages web

Qu'est-ce qu'une URL?

URL: Parties constituants

URL: Parties constituants

URL: Parties constituants

URL: Parties constituants

URL: Parties constituants

Tableau: parties constituants dun URL

Les lments dun site web

dans certains cas nuire la lisibilit.

<IMG SRC="url_de_l_image" ALT="Texte remplaant l'image" TITLE="Texte afficher">

Le formulaire et ses lments

Le formulaire et ses lments

que PHP, ASP ou un script CGI.

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments

<FORM METHOD=POST ACTION="mailto:webmaster@ecpap.net "> <FORM METHOD=GET ACTION="http://www.ecpap.net/cgibin/script.cgi">

A l'intrieur de la balise FORM

Le formulaire et ses lments

Le formulaire et ses lments

Envoi des donnes

Le formulaire et ses lments

Envoi des donnes

Le formulaire et ses lments

Envoi des donnes

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments

Le formulaire et ses lments La balise INPUT

Le formulaire et ses lments La balise INPUT

Le formulaire et ses lments s'agit image: La baliseilINPUT d'un bouton de

Le formulaire et ses lments La balise INPUT

Le formulaire et ses lments La balise INPUT

Le formulaire et ses lments La balise INPUT

Le formulaire et ses lments

Le formulaire et ses lments name: reprsente le La balise TEXTAREAnom associ au

Le formulaire et ses lments

Le formulaire et ses lments

Les scripts (JavaScrip t)

<SCRIPT> Llment dinserter du JavaScript document html

Вам также может понравиться