Vous êtes sur la page 1sur 108

Universit de Gabes Facult des sciences de Gabes Anne Universitaire 2011-2012

Cours

Programmation Web Niveau 1- LARI2

Mme Imen SFAIHI ZOUARI


1

Chapitre1:

Dveloppement dApplications Web

Le premier outil du web: LE LANGAGE HTML (HyperText Markup Language)

10

Objectifs

Apprendre les balises HTML Apprendre insrer diffrents objets dans une page HTML Paramtrer les diffrents objets et personnaliser les balises HTML

11

INTRODUCTION

1. 2. 3. 4.

Quest ce que HTML ? Quest-ce quune page HTML ? Exemple de page HTML Architecture dune application Web

12

Quest ce que HTML ?


HTML HyperText Markup Language HyperText = texte+liens vers dautres pages ou dautres objets Il sagit dun langage de balises issu de SGML (Structured Generalized Markup Language) qui est lui mme un langage standard (norme ISO 8779 :1986) utilis aujourdhui par de nombreuses grandes socits et institutions pour lchange international de documents et de donnes. SGML est trs complet mais il est trs lourd grer. HTML est une version allge de ce langage. HTML permet la mise en forme de textes et d'objets multimdia (images, son, vido) et donc la cration d'une page Web. Ce n'est pas un langage de programmation proprement parl (puisquil ne permet pas de crer des programmes), mais un langage qui se veut multi-systmes (PC, Unix, Linux, Mac...) et multi-plateformes (tout type de taille et de rsolution d'cran, tout type de navigateur : Microsoft Internet Explorer, Netscape Navigator, Opera...). Un document HTML est interprt par le navigateur. D'o des diffrences si on visualise une page sur un mme systme avec diffrents navigateurs, voire diffrentes versions d'un mme navigateur. D'o la ncessit de tester les pages sur diffrents navigateurs pour avoir le mme rendu. 13

QUEST-CE QUUNE PAGE HTML ?


Une page Web est constitue de plusieurs lments ou fichiers : Un fichier HTML, galement appel "fichier source". Son extension est typiquement ".htm" (pour tenir compte des anciens systmes dexploitation qui ne permettent pas plus de 3 caractres pour lextension du fichier, DOS par exemple) ou ".html". Par exemple, "index.html" pour la page d'accueil de votre site. Il s'agit d'un fichier en texte brut que ce chapitre est destin crer. De photos ou d'images, au format JPEG ".jpg" ou ".jpeg" (optimis pour les photos), au format GIF ".gif" (optimis pour les images, logos, utilisation de la transparence, etc..). Du son (WAVE ".wav"), des vidos (MPEG ".mpeg" ou ".mpg", AVI ".avi"), des animations Flash ou QuickTime, des codes JavaScript ou XML, ASP, PHP, JSP, Perl, etc...
Page HTML Page.html ou Page.htm Votre Texte <img > Images/LogoISIG.gif

14

EXEMPLE DE PAGE HTML


<head> <title>Ma premire page HTML</title> </head> <body> <p> Ecrire une page HTML, c'est facile !! </p> <div align="center"> <img src= "../Images/logoISIG.jpg"> </div> </body> </html> <html>

15

ARCHITECTURE DUNE APPLICATION WEB


Client Scripts Client Communication Page HTML Texte Images, Sons Scripts clients Objets encapsuls (applets) Serveur
Site Complet

Cookies

Scripts Serveurs

Base de donnes

Scripts serveur : Perl, PHP, ASP, ColdFusion. Images : JPEG, GIF, PNG ou BMP Sons : WAV, MIDI, MP3, Scripts clients : JavaScript ou VBScript Objets encapsuls: Animations Flash, Animations Shockwave, Applets Java

16

SYNTAXE HTML

1. 2. 3. 4. 5.

Balises HTML Commentaires Adresses de fichiers Couleurs La balise !DOCTYPE (document type declaration)

17

Balises HTML

Les instructions HTML sont exprimes dans des balises (ou "tags"), dlimites par les signes < et >. La plupart des balises doivent tre ouvertes et fermes. La balise de fermeture est toujours identique la balise d'ouverture la diffrence qu'elle comporte une barre oblique (caractre slash /) aprs le signe <. <balise> texte affect par la balise </balise> Les balises peuvent tre crites aussi bien en majuscules quen minuscules : <HTML> <html> <HtMl> sont quivalentes. Les espaces et les sauts de lignes ne sont pas interprts comme tels. Les balises comportent ventuellement des attributs (entre guillemets) : 18 <font face=georgia,verdana size=3 color =red>

COMMENTAIRES <!--

-->

Les balises <!-- et --> indiquent un commentaire Un commentaire nest visible que dans le code source <!-- ceci est un commentaire -->

19

ADRESSES DE FICHIERS
Les fichiers sont adresss en indiquant le chemin relatif par rapport la page courante : Le chemin est indiqu entre barres obliques (/) Un point indique le rpertoire courant Deux points reprsentent le rpertoire parent Exemple: on est dans contents.html
fiche.html

- "fiche.html" ou "./fiche.html"
tips.html

- "ressources/tips.html" ou "./ressources/tips.html"
index.html

- "../index.html"
catalog.html

- "../produits/catalog.html"
20

COULEURS
Les couleurs sont dfinies par leur code hexadcimal ou par leurs noms en toutes lettres Les couleurs qui sont dfinies par 6 chiffres hexadcimaux reprsentent 2 2 les tons du Rouge, du Vert et du Bleu, selon le codage RGB (Red Green Blue), ou en franais RVB (Rouge Vert Bleu). couleur="#RRVVBB" o R, V et B reprsentent respectivement un chiffre hexadcimal entre 0 et F pour le Rouge, le Vert et le Bleu. Exemple:

<font color="#FF0000">Rouge</font> <font color="blue">Bleu</font>


Plus de 16 millions de couleurs sont disponibles pour colorer les pages Web. Toutefois, tant donn que tous les navigateurs ne reconnaissent pas les couleurs de la mme faon, le W3C conseille l'utilisation des couleurs cidessous, pour lesquelles un nom intelligible a t donn. Il est donc possible (et conseill) d'appeler une couleur de la faon suivante :
21

COULEURS : PALETTE WEB-SAFE


Lorsque le systme d'exploitation est configur en 256 couleurs, il n'y a que 216 couleurs communes la fois aux navigateurs (Netscape, Internet Explorer) et aux systmes d'exploitation (Windows, Macintosh) : c'est la palette "web-safe" Les couleurs web-safe ont pour valeur hexadcimale une combinaison des paires 00, 33, 66, 99, CC ou FF Mais, en ralit il n'y a que 212 couleurs web-safe :

Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).
Que se passe-t-il si l'on utilise une couleur "non web-safe" : En 256 couleurs, la couleur est cre par dithering

La qualit de l'image est dgrade


Avec 65 536 couleurs, le problme est moins sensible Lorsque le client utilise 16 millions de couleurs, il n'est pas utile de se servir de la palette "web-safe"
22

La balise !DOCTYPE (document type declaration)


La balise !DOCTYPE dfinit : La version HTML utilise (4.01, ou la norme XHTML 1.0) La DTD (pour Document Type Definition) utilis par le document Cette balise n'est pas obligatoire dans les pages HTML, mais il est recommand de l'utiliser, spcialement pour son importance dans la norme XHTML mergeante. Elle se positionne en en-tte du document (avant la balise <html>). Trois DTD sont utilisables pour le HTML :

Strict DTD : DTD Stricte (respect du HTML 4.01)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Transitional DTD : DTD transitionnelle (autorisant l'usage des balises obsoltes) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Frameset DTD : DTD supportant les frames. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Pour vrifier la validit de vos pages, le W3C propose des services de validation des documents 23 l'adresse : W3C Validation HTML - http://validator.w3.org/.

DOCUMENT HTML

1. 2. 3.

Structure dun document HTML En-tte du document <head> Corps du document <body>

24

STRUCTURE DUN DOCUMENT HTML

<html> <head> </head> <body> </body> </html>

Document HyperText Markup Language Entte Fin de Entte Page (corps) Fin de page (fin de corps) Fin du document HyperText Markup Language

25

EN-TETE DU DOCUMENT <HEAD>


Les balises prsentes sont : <TITLE> permet de donner un titre une page, qui sera affich dans la barre de titre, les favoris, lhistorique et ventuellement dans les rsultats des moteurs de recherche. Il ne peut contenir des mises en forme. <BASE> permet de :
1. Redfinir une URL (Uniform Resource Locator) de base au sein d'un document HTML en cas d'erreur d'exploration (<base href="Adresse d'une page">). Indiquer la base des liens des frames par l'attribut target, pour diriger vers une frame;

2.

<SCRIPT> permet d'insrer des Scripts ; <STYLE> permet d'insrer des styles CSS ; <META> permet de donner des renseignements sur les pages pour pouvoir bien les rfrencer et bien les classer par les moteurs de recherche.
26

EN-TETE DU DOCUMENT <HEAD>


La plupart des outils de recherche sur Internet sont des moteurs de recherche d'indexation automatique comme AltaVista ( distinguer des annnuaires comme Yahoo), il faut prparer l'avance ses pages l'arrive des robots de ces moteurs de recherche. Lorsqu'on soumet l'adresse de son site un moteur, celui-ci l'enregistre puis envoie des "robots" aller se balader sur vos pages et enregistrer les informations contenues dans les meta balises que vous aurez pralablement plac entre les balises <HEAD> et </HEAD> de votre code HTML.

Indiquer la ou les langues du site


<META http-equiv="Content-Language" content="fr">

Indiquer la description du site (maximum 200 caractres).


<META name="Description" content="HTML, Web, conception de sites web">

Informer les moteurs du contenu du site avec des mots-cls (maximum 1000 caractres).
<META name="Keywords" content="web, conception sites, html, css, internet, webdesigner ">
27

EN-TETE DU DOCUMENT <HEAD>


Indiquer le nom de l'auteur
<META name="author" content="Prnom et Nom">

Indiquer l'email de l'auteur du site


<META name="reply-to" content="adresse-email">

Indiquer l'diteur html avec lequel la page a t construite.


<META name="Generator" content="Macromedia Dreamweaver">

Indique aux robots d'indexer ou non cette page: "all" ou "none".


<META NAME="Robots" CONTENT= "all">

Indique la date dexpiration: Expires"never" ou "date d'expiration".


<META NAME="Expires" CONTENT= "never">

Rafrachissement de la page.
<META HTTP-EQUIV ="refresh" content="x; URL=file">

Exemple: <META HTTP-EQUIV="refresh" CONTENT="10"> Rafrachit votre page toutes les "10" secondes.

Etc.
28

CORPS DU DOCUMENT <BODY>


La balise <BODY> dcrit le contenu de la page. Elle possde les attributs : BGCOLOR : Couleur du fond de l'cran (par dfaut : Blanc) TEXT : Couleur du texte (par dfaut : noir) LINK : Couleur des liens (par dfaut : bleu) VLINK : Couleur des liens dj visits (par dfaut : Mauve) ALINK : Couleur des liens activs, c'est dire quand le pointeur de la souris passe au-dessus (uniquement IE) (par dfaut : Rouge) BACKGROUND : Image (gif ou jpeg) en fond de page LEFTMARGIN : Largeur de la marge de gauche en pixels TOPMARGIN : Largeur de la marge du haut en pixels Exemple:
<html> <head><title> Ma premire page</title></head>

<body bgcolor="white" text="black" link="blue" vlink=" purple" alink="red">


<p>Texte de la page</p> </body>
</html>
29

FORMATAGE DU TEXTE

1. 2. 3. 4. 5. 6. 7. 8.

Paragraphe Saut de ligne Titre Ligne horizontale Section Formatage avec <SPAN> Indentation Texte prformat

30

PARAGRAPHE <P>
Un paragraphe commence par <P> et se termine par </P>. Le navigateur cre une ligne blanche au-dessus et en dessous de chaque paragraphe. La balise <P> possde l'attribut ALIGN : JUSTIFY : Justifier le texte (texte assez long) LEFT : Aligne le texte sur la marge de gauche (par dfaut) RIGHT : Aligne le texte sur la marge de droite CENTER : Centre le texte entre les marges
Exemple : <P align= justify > texte du paragraphe assez long</p> <P align= center > texte du paragraphe </p> Remarque: Un texte prsent entre <body> et </body> sans balises sera prsent avec les proprits de mise en forme par dfaut. 31

PARAGRAPHE <P> (EXEMPLE)

32

LE RETOUR A LA LIGNE <BR>

Mon pome ne saffiche comme je lai crit : les retours la ligne ne sont pas respects.

33

LE RETOUR A LA LIGNE <BR>


Avec <br> je contrle laffichage de mon pome ligne par ligne

La balise <br> (Break) permet le retour la ligne

34

TITRES <Hi> i=1 .. 6


HTML propose 6 niveaux de titres gras : <H1> (grande taille) <H6> (petite taille) Les balises <Hi> possdent galement l'attribut ALIGN Valeurs : RIGHT, LEFT et CENTER Exemple:
<H1>Titre de niveau 1</H1> <H2>Titre de niveau 2</H2> <H3>Titre de niveau 3</H3> <H4>Titre de niveau 4</H4> <H5>Titre de niveau 5</H5> <H6>Titre de niveau 6</H6>
35

LIGNES HORIZONTALES <HR>


La balise <HR> permet de tracer une ligne horizontale Attributs : ALIGN : Permet d'aligner la ligne horizontale sur la page. Valeurs : RIGHT, LEFT ou CENTER WIDTH : Spcifie la largeur de la ligne (en pixels ou % de largeur de la fentre) SIZE : Epaisseur de la ligne (de 1 10) NOSHADE : S'il est prsent (1), l'effet d'ombre (3d) est annul COLOR : Spcifie la couleur de la ligne (IE) Exemple :
<HR WIDTH="50%"> <HR WIDTH="100" ALIGN="LEFT"> <HR WIDTH="150" COLOR="blue" ALIGN="LEFT"> <HR WIDTH="200" COLOR="#008000" NOSHADE ALIGN="LEFT">

36

SECTION <DIV>
La balise <DIV> permet de dfinir l'alignement de plusieurs lments dune page : titres, textes, images, lignes horizontales, etc. Attribut : ALIGN Valeurs : RIGHT, LEFT et CENTER <DIV ALIGN= CENTER > remplace la balise <CENTER> (HTML1.0) Exemple:

<hr> <p>Aprs cette ligne il y a un saut de paragraphe.</p> <hr> <div>Aprs cette ligne il y a un saut de division.</div> <hr>

37

Formatage avec <SPAN>


Avec <span style=...> ... </span>, vous pouvez formater comme vous le dsirez des passages de texte l'intrieur d'autres balises HTML (span = tendre). Derrire la mention style= les proprits de formatage dsires. La mention doit figurer entre guillemets. l'intrieur de la dfinition de format sont autorises les mentions de feuilles de style. Chaque attribution de proprit comporte un nom par exemple fontstyle et une valeur, par exemple italic, spars par deux points. Fermez chaque dfinition de format par un point virgule. Exemple : C'est mon premier paragraphe C'est mon <span style="font-style:italic; color:red;"> premier </span> paragraphe
38

INDENTATION <BLOCKQUOTE>
La balise <BLOCKQUOTE> sert mettre du texte en retrait : Dcalage vers la droite

<BLOCKQUOTE>Ce texte est en retrait. <BLOCKQUOTE> Ce texte est en double retrait. </BLOCKQUOTE> 39 </BLOCKQUOTE>

TEXTE PREFORMATE <PRE>


Le texte compris entre les balises <PRE> et </PRE> est transcrit tel quil est crit dans le code Les espaces et tabulations sont respects Cest uniquement du texte : ni titres, ni paragraphes, Exemple :

40

* MISE EN FORME DES CARACTERES

1. 2. 3. 4. 5. 6.

MISE EN FORME LOGIQUE MISE EN FORME PHYSIQUE POLICE DE CARACTERES CARACTERES ACCENTUES CARACTERES SPECIAUX CHOIX DE LA POLICE DE CARACTERES

41

MISE EN FORME LOGIQUE


Les balises de mise en forme logique indiquent la nature du texte Elles laissent le navigateur appliquer le formatage selon les prfrences de lutilisateur ou les valeurs par dfaut
Les balises de mise en forme logique : CITE : Citation. CODE : Code informatique. EM : Emphase (italique) KBD : Keyboard (clavier) STRONG : Faire ressortir du texte (gras) VAR : Variable DFN : Dfinition. Il est possible dimbriquer plusieurs balises

Exemple : <CITE><STRONG>Citation importante</STRONG></CITE>


42

MISE EN FORME PHYSIQUE


Les balises de mise en forme physique prcisent la typographie qui sera utilise par le navigateur B : Affiche le texte en gras I : Met le texte en italique TT : Affiche le texte en police style machine crire U : Souligne le texte STRIKE : Barre le texte S : Barre le texte BIG : Police de caractres plus grande SMALL : Police de caractres plus petite SUB : Affiche le texte en indice SUP : Affiche le texte en exposant BLINK : Texte clignotant (uniquement sur Netscape) Exemple : 43 <I><B>Texte en italique et en gras</B></I>

POLICE DE CARACTERES <FONT>


La balise <FONT> sert spcifier directement la police de caractres qui sera utilise par le navigateur Attributs : FACE : Prcise par ordre de priorit les noms des polices. Valeurs les plus frquentes : face="Arial, Helvetica, sans-serif" : Police droite face="Times New Roman, Times, serif" : Police srifie face="Courier New, Courier, mono" : Police non proportionnelle

face= "Georgia, Times New Roman, Times, serif" face= "Verdana, Arial, Helvetica, sans-serif" SIZE : Taille absolue (1 7) ou relative (-3 +4) de la police Valeur par dfaut : 3 COLOR : Couleur du texte Il existe une balise appele <BASEFONT> sense dfinir la police pour lensemble de
la page. Elle ne fonctionne correctement que sur IE. Exemple :

<basefont color="#00CCFF" face="Times New Roman, Times, serif" size="5">


44

POLICE DE CARACTERES <FONT> (EXEMPLE)

45

CARACTERES ACCENTUES
Les caractres accentus s'affichent de la mme manire quel que soit le poste client, lorsque le code ci-dessous est utilis dans le fichier source :
Caractre Code HTML &Aacute; &Agrave; &Atilde; &Eacute; &Egrave; &Icirc; &Ouml; &Acirc; &Aring; &Auml; &Ecirc; &Euml; &Ocirc; &AElig; &Ccedil;

Caractre

Code HTML &agrave; &auml; &eacute; &ecirc; &uacute; &uuml; &iuml; &ccedil; &acirc; &aelig; &egrave; &euml; &ucirc; &ouml; &icirc; &ugrave;

Attention: Les codes HTML sont case sensitive(distinction entre majuscules et minuscules) &Eacute; n'a pas la mme signification que &eacute;

46

CARACTERES SPECIAUX
Les caractres spciaux sont galement rendus par un code HTML
Caractre > < Espace inscable
(non-breaking space)

Code HTML &gt; &lt; &nbsp; &reg; &#153; &#187; &#171; &#176; &#178; &sect; &frac12;

Caractre & "

Code HTML &amp ; &para; &#156; &quot; &copy; &plusmn; &#185; &#179; &frac14; &frac34; &#183; &#137;

Si dans votre texte des caractres qui ont une signification particulire en HTML sont employs vous devez masquer ces caractres. Les caractres suivants doivent tre masqus de la faon suivante:

Remplacez le caractre < par la suite de caractres &lt; Remplacez le caractre > par la suite de caractres&gt; Remplacez le caractre & par la suite de caractres &amp; Remplacez le caractre " par la suite de caractres &quot; Remplacez les caractres et par les suites de caractres &laquo; et &raquo;

47

CHOIX DE LA POLICE DE CARACTERES La police par dfaut est gnralement juge "trop grande", les concepteurs de sites choisissent une police plus petite que le dfaut :<font face=verdana size=-2> ou <font face=arial size=-1> pour le texte voire <font face=verdana size=1> ou <font face=arial size=2> Verdana et Georgia sont des polices conues pour tre lues sur cran. Mais elles ne sont pas disponibles sur les anciens systmes d'exploitation (exemple: Windows 95) Verdana apparat trs grosse sous Windows et s'imprime de la mme manire Verdana est plus grosse qu'Arial,
face="verdana, arial, helvetica, sans serif" est une erreur
48

LES LISTES

1. Liste numrote ou liste ordonne 2. Liste puces ou liste non ordonne 3. Liste de dfinitions 4. Imbrication de listes

49

LISTE NUMEROTEE <OL>


La balise <OL> sert dfinir une liste numrote (ordonne) Elle accepte lattribut TYPE qui permet de choisir le type dindice : 1.TYPE=1 : Nombres (par dfaut) : 1,2,3

2.TYPE=A : Majuscules :A,B,C 3.TYPE=a : Minuscules : a,b,c 4.TYPE=I : Chiffres romains majuscules : I,II,III 5.TYPE=i : Chiffres romains minuscules : i,ii,iii
Chaque item de la liste est indiqu par <LI> Pour dfinir la valeur de dpart de la liste :

START=n

Liste avec titre

50

LISTE A PUCES <UL>


La balise <UL> sert dfinir une liste puces (non ordonne). Elle prend lattribut TYPE qui permet de spcifier la forme de la puce :
1. 2. 3. TYPE=DISC : Disque plein (par dfaut) TYPE=CIRCLE : Disque vide TYPE=SQUARE : Carr

Chaque item de la liste est indiqu par <LI>

51

LISTE A PUCES <UL>


Liste avec titre: avec <LH> Liste avec image

Liste avec des puces colores de manire unique

Liste avec des puces colores avec diffrentes couleurs

52

LISTE DE DEFINITIONS <DL>


La balise <DL> (Definition List) permet de construire une liste de termes avec les dfinitions correspondantes. <DT> : le terme (Definition Term) <DD> : la dfinition du terme (Definition Description)

Exemple:
<DL> <DT> toile </DT> <DD>Objet cleste tudi par les astrophysiciens.</DD> <DD>Danseur confirm d'un ballet.</DD> <DT>Liste </DT> <DD>Ensemble dlments.</DD> </DL>

53

IMBRICATION DE LISTES
Il est possible dimbriquer plusieurs listes.

Exemple: <OL TYPE= A> <LI>Premier item </LI> <UL> <LI>Dbut du premier item</LI> <LI>Suite du premier item </LI> </UL> <LI>Second item</LI> </OL>

54

LIENS HYPERTEXTES

1.L'ancre 2.Lien interne la page 3.Lien interne au site 4.Lien externe 5.Lien de messagerie

55

LANCRE <A>

La balise <A> permet d'tablir un lien hypertexte.

Attributs : HREF : Source du document (relative ou absolue) NAME : Nom de lancre (pour une cible seulement) TARGET : Cible (cadre ou fentre) pour l'affichage du document TITLE : Description du lien (identique l'attribut ALT pour une image) (IE) Pour afficher le document dans une nouvelle fentre du navigateur :

<A HREF="page.htm" TARGET=_blank > Cliquez ici pour ouvrir une fentre </A>

56

LIENS INTERNES A LA PAGE

Un lien interne permet de se dplacer l'intrieur d'une mme page Dfinir la cible d'un lien (l'ancre).
<A NAME="top"></A>

Le nom ne doit pas contenir d'espaces, ni d'accents, ni de caractres spciaux. Associer un lien l'ancre.
<A HREF="#top">top</A>

57

LIENS INTERNES AU SITE


De la mme manire, il est possible de construire des liens vers dautres pages :
Lien vers une page situe dans le mme rpertoire

<A HREF="nom.htm">Cliquez ici</A>


Lien dans un rpertoire diffrent

<A HREF="sujet/nom.htm">Cliquez ici</A>


Lien dans un mme rpertoire et vers une ancre d'une autre page

<A HREF="nom.htm#top">Cliquez ici</A>


Lien dans un rpertoire diffrent et vers une ancre d'une autre page

<A HREF="sujet/nom.htm#top">Cliquez ici</A>


Lien vers un fichier en tlchargement <A HREF="archive.zip">Cliquez ici pour tlcharger le fichier</A>

58

LIENS EXTERNES

Un lien externe pointe vers un autre site Lattribut HREF indique ladresse complte de la page ou du fichier ainsi que le protocole de communication.
Exemple: Lien externe vers un site http.
<A HREF="http://www.mysite.com">Dcouvrez MySite</A>

Lien externe vers un serveur FTP.


<A HREF="ftp://ftp.mysite.com">FTP MySite</A>
59

LIENS DE MESSAGERIE

Un lien de messagerie (e-mail) permet douvrir le logiciel de messagerie associ au navigateur


<A HREF="mailto:moi@yahoo.fr">Ecrivez-moi</A>

Attributs : subject : sujet du mail


cc : destinataires en copie body : texte du mail

Les attributs sont prcds de ? et spars par &


60

LIENS DE MESSAGERIE

Lien e-mail simple <A HREF="mailto:nom@site.com">nom@site.com</A> Lien e-mail avec sujet <A HREF="mailto:nom@site.com?subject=renseignement"> nom@site.com</A> Lien e-mail avec sujet et texte dans le corps du message.

<A HREF="mailto:nom@site.com?subject=renseignement&body= Votre message">nom@site.com</A>

Lien e-mail envoy 2 destinataires. <A HREF=mailto:nom@site.com?cc=nom2@site2.com> nom@site.com et nom2@site2.com </A>

61

IMAGES

1. La balise <IMG> 2. Aligner une image 3. Format des images

62

IMAGES <IMG>
La balise <IMG> permet dinsrer une image sur la page. Attributs: SRC indique ladresse du fichier : Soit en relatif par rapport au fichier courant <IMG SRC="images/logo.gif"> Soit en absolu par un lien htt <IMG SRC="http://www.machine.com/images/logo.gif"> WIDTH et HEIGHT : largueur et hauteur de limage en pixels ALT : Texte associ limage.
Ce texte saffiche avant que limage ne se charge ou lorsque le visiteur dsactive le chargement

des images. Il est utilis par les lecteurs dcrans pour malvoyants. Avec Windows, il apparat sous la forme dune bulle daide (info-bulle) lorsque le pointeur de la souris passe au-dessus de limage. L'attribut ALT n'est pas compris sur Macintosh pour lequel il est prfrable d'employer TITLE

BORDER : Taille de la bordure entourant de limage HSPACE et VSPACE : Espace vertical ou horizontal entre le texte et limage (en pixels)

Pour mettre un lien sur une image, il suffit de placer l'image dans une ancre : <A HREF="www.machine.com/index.htm"> <IMG SRC="images/logo_machincom.gif"> </A>

63

ALIGNER UNE IMAGE : lattribut ALIGN


Alignement du texte et de l'image : Attribut ALIGN Soit plusieurs lignes de texte peuvent safficher cot de limage: LEFT: Image gauche (texte droite) RIGHT: Image droite (texte gauche) Soit limage et le texte sont sur la mme ligne (petite image)

TOP (ou TEXTTOP): le haut de limage est align sur le plus haut caractre de la ligne ABSMIDDLE : Le milieu de limage est align sur le milieu du texte ABSBOTTOM : le bas de limage est align sur le bas du caractre le plus bas du texte MIDDLE : Le milieu de limage est align sur la ligne de base du texte BASELINE (ou BOTTOM): Le bas de limage est align sur la ligne de base du texte (dfaut)
64

ALIGNER UNE IMAGE ALIGN (EXEMPLE)


<p> <img src="chrysanthem.jpg" width="155" height="126" border="1" hspace="20" align="right alt="Les chrysanth&egrave;mes"> Les chrysanthmes sont de la famille des Composes Radies, groupant environ 200 espces distribues dans lhmisphre Nord et en Afrique du Sud, dont les marguerites, les tanaisies, et les pyrthres. Les chrysanthmes des jardins sont, pour la plupart, drivs du <i>Chrysanthemum indicum</i> et despces voisines provenant dExtrme-Orient. </p>

65

FORMAT DES IMAGES


GIF (Graphics Interchange Format) Adapt aux images contenant des zones de couleurs clairement distinctes Moins volumineux et plus rapide charger que le JPEG Donne l'impression d'une image non rectangulaire grce la transparence: Meilleure intgration dans la page Le GIF contient moins de couleur que le JPEG : il cre les couleurs manquantes par dithering (combinaison de couleurs proches dans la palette). La qualit de l'image en est parfois diminue Les bonnes performances du format GIF proviennent de : La limitation du nombre de couleurs de l'image 256 au maximum. L'utilisation d'une technique de compression (LZW-Lempel-Ziv-Welch ). JPEG (Joint Photo Expert Group) Adapt aux nombreuses modifications de couleurs (exemple: photographies) La diffrence de rendu avec du GIF n'est sensible que lorsque le JPEG est affich sur 16 millions de couleurs. 66

LES TABLEAUX

1.CONSTRUIRE UN TABLEAU 2.LA BALISE <TABLE> 3.LA LIGNE ET LA CELLULE 4.FUSIONNER LIGNES OU COLONNES (COLSPAN ET ROWSPAN) 5.TITRE DUN TABLEAU ET EN-TETE DES COLONNES

67

CONSTRUIRE UN TABLEAU

La balise <TABLE> (table = tableau) est l'une des plus utilise : elle est la base de lorganisation de presque toutes les pages Web La balise <TABLE> dfinit le tableau, elle contient deux autres balises :
<TR> : dcrit une ligne du tableau (tr = table row). <TD> : dfinit le contenu dune cellule du tableau (td = table data)

Ces trois balises sont toujours imbriques les unes dans les autres
<TD> est contenue dans <TR> qui est imbrique dans <TABLE>.

Attention la fermeture des balises

68

CONSTRUIRE UN TABLEAU (SUITE)


Construire un tableau revient dcrire chacune des lignes de haut en bas, puis chaque cellule de la ligne de gauche droite Exemple: <table border= 1 > <tr> <td>Cellule 1.1</td> <td>Cellule 1.2</td> </tr> <tr> <td>Cellule 2.1</td> <td>Cellule 2.2</td> </tr> </table>

69

LA BALISE <TABLE>
La balise <TABLE> comporte diffrents attributs : WIDTH : Largeur du tableau en pixels ou pourcentage de la fentre du navigateur. HEIGHT : Hauteur du tableau en pixels ou pourcentage de la fentre du navigateur BORDER : Taille en pixels de la bordure du tableau. ALIGN (CENTER, RIGHT ou LEFT) : Position du tableau dans la page. Le texte se place cot du tableau, sauf sil est centr CELLPADDING : Espace en pixels entre la bordure des cellules et leur contenu (enrobage du texte) CELLSPACING : Espace en pixels entre les cellules BGCOLOR : Couleur de fond du tableau VSPACE et HSPACE : Espace vertical ou horizontal entre le texte et le tableau (en pixels) Un attribut (BACKGROUND) permet de dfinir une image en fond pour le tableau.
70

LA BALISE <TABLE> (EXEMPLE) Avec IE, lespace entre les cellules (cellspacing) prend la couleur de fond du tableau, tandis quil reste transparent avec NC. Exemple:
<table width="200" align="right" bgcolor="#00FF00" cellspacing="10" border="0"> <tr> <td bgcolor="#FF0000" align="center">Rouge</td> <td align="center">Transparent</td> </tr> <tr> <td align="center">Transparent</td> <td bgcolor="#FFFF00" align="center">Jaune</td> </tr> </table>

71

LA LIGNE <TR> ET LA CELLULE <TD>

Principaux attributs des balises <TR> et <TD> WIDTH : Largeur de la cellule en pixels (uniquement <TD>) HEIGHT : Hauteur de la cellule ou de la ligne en pixels BGCOLOR : Couleur de la cellule ou de la ligne ALIGN = LEFT (par dfaut), RIGHT ou CENTER : Justification des donnes dans la cellule ou la ligne VALIGN = MIDDLE (dfaut), TOP ou BOTTOM : Alignement vertical des donnes dans la cellule ou la ligne En labsence de spcifications (WIDTH et HEIGHT), la hauteur et la largeur d'une cellule s'adaptent aux dimensions de son contenu (texte ou image).

72

LA LIGNE ET LA CELLULE (EXEMPLE)

73

LA LIGNE ET LA CELLULE (EXEMPLE)


<table border="1"> <tr> <td align="right" width="200">Cellule 1.1 <br> justifie droite</td> <td align="center" width="300">Cellule 1.2 centre</td> </tr> <tr> <td height="100" valign="top">Cellule 2.1 justifie<br> gauche par d&eacute;faut<br> et en haut</td> <td align="center" valign="bottom">Cellule 2.2 <br> centre<br> et en bas</td> </tr> <tr valign="middle"> <td height="150">Cellule 3.1 centre verticalement</td> <td>Cellule 3.2 centre <br> verticalement </td> </tr> <tr height="100"> <td>Texte Normal</td> <td>Texte Normal</td> </tr> <tr > <td height="100">Texte Normal</td> <td>Texte Normal</td> </tr> </table>

74

FUSIONNER LIGNES OU COLONNES (COLSPAN ET ROWSPAN)


L'attribut COLSPAN=n indique que la cellule stend sur n colonnes : <table border="1"> <tr> <td colspan="2">Cellule 1</td> </tr> <tr> <td>Cellule 2 </td> <td>Cellule 3</td> </tr> L'attribut ROWSPAN=n indique que la cellule stend sur n lignes : <table border="1"> <tr> <td rowspan="2">Cellule 1</td> <td>Cellule 2</td> </tr> <tr> <td>Cellule 3</td> </tr> </table>

75

TITRE DUN TABLEAU ET EN-TETE DES COLONNES


Titre dun tableau <caption> Permet dajouter un titre un tableau Son attribut align = top (par dfaut)| bottom ajoute le titre au dessus ou en dessous du tableau En-tte de colonnes <th> (th = table header) Identique <td> mais est considr comme en-tte, donc automatiquement Centr Mis en gras Ses attributs sont identiques ceux de <td>

76

TITRE DUN TABLEAU ET EN-TETE DES COLONNES (EXEMPLE)


<table border="2" width="50%" align="center"> <caption align="bottom">Titre du Tableau</caption> <tr> <th>Colonne 1</th> <th>Colonne 2</th> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2</td> </tr> <tr> <td>Cellule 3</td> <td>Cellule 4</td> </tr> </table>

77

Exercice

Donnez le code HTML du tableau suivant, sachant que le code de la couleur darrire plan est DDE6FF:
Modle Marque Peugeot 106 Citron AX Type B2 AT67B8 Numro de srie 234.34 6789 Vitesse en km/heure 132 126 Consommation en litre/100 km 5,7 5,5

Tableau Comparatif de Voitures

78

Exercice (Correction):
<table border="1" bgcolor="#DDE6FF" align="center" > <caption align="bottom" ><font color="#FF0000">Tableau Comparatif de Voitures</font> </caption> <tr> <th colspan=3>Mod&egrave;le <th rowspan=2>Vitesse<br>en km/heure <th rowspan=2>Consommation<br>en litre/100 km </tr> <tr> <th>Marque</th> <th>Type</th> <th>Numero de s&eacute;rie</th> </tr> <tr> <td>Peugeot 106</td> <td>B2</td> <td align="center" >234.34</td> <td>132</td> <td>5,7</td> </tr> <tr> <td>Citro&euml;n AX</td> <td>AT67B8</td> <td align="center" >6789</td> <td>126</td> <td>5,5</td> </tr> 79 </table>

LES FORMULAIRES

1. 2. 3. 4. 5. 6.

INTERET DES FORMULAIRES EXEMPLE DE FORMULAIRE LA BALISE DE BASE <FORM> LA BALISE <INPUT> LA BALISE <SELECT> LA BALISE <TEXTAREA>

80

INTERET DES FORMULAIRES


Les formulaires permettent aux auteurs des pages Web dinstaurer une communication avec les utilisateurs. Un formulaire peut servir recueillir les avis des visiteurs, leurs e-mails en vue d'une newsletter. Mais a peut tre aussi un bon de commande, un sondage, un jeu, etc... Un formulaire dfinit en HTML peut contenir : 1. Des zones de saisie de texte 2. Des botes cocher, 3. Des boutons radio 4. Des menus droulants 5. Des boutons Lutilisateur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit ou envoyer) pour l'envoyer soit une adresse e-mail ou un script CGI (Common Gateway Interface) stock sur un serveur et crit dans un langage de programmation comme PERL, PHP, ASP, ColdFusion, etc.
81

EXEMPLE DE FORMULAIRE

82

EXEMPLE DE FORMULAIRE : CODE HTML


<html> <head> <title>Exemple de formulaire de contact</title> <basefont face="georgia"> </head> <body leftmargin= "100"> <H1 align="center" > Exemple de formulaire de contact</h1> <hr size="2" width="70%" > <FORM NAME= "Contact" ACTION= "mailto:webmaster@ordi.com" METHOD = "POST" ENCTYPE= "text/plain"> <p><h3>Quel type de message voulez-vous envoyer ?</h3> <!-- boutons radio --> <input type="radio" value="infos" name="TypeMessage">Informations <input type="radio" value="online" name="TypeMessage">Aide <input type="radio" value="Suggestion" name="TypeMessage" checked>Suggestion <input type="radio" value="merci" name="TypeMessage" > Remerciements </p><p><h3>Quel est l'objet de votre envoi ?</h3> <!-- Bote d'options --> <select size="1" name="Options"> <option selected>Choisissez une option s.v.p.</option> <option>Entreprise</option> <option>Produits</option> <option>Fournitures</option> <option>Employ</option> <option>(Autre)</option> </select> Autre : <input maxLength="256" size="26" name="AutreObjet"> </p>
83

EXEMPLE DE FORMULAIRE : CODE HTML


<p> <h3>Tapez vos commentaires dans l'espace ci-dessous :</h3> <!-- Champ multi-ligne --> <textarea name="Commentaires" rows="5" cols="50"></textarea></p> <p> <h3>Indiquez vos coordonnes :</h3> <! champ de saisie mono-ligne --> Nom :<input maxLength="256" size="35" name="NomUtilisateur"><br> Adresse de messagerie :<input maxLength="256" size="35" name="EmailUtilisateur"> <br> Tlphone :<input maxLength="256" size="35" name="TelephoneUtilisateur"><br> Tlcopie :<input maxLength="256" size="35" name="TelecopieUtilisateur"><br> </p> <p><!-- case cocher--> <input type="checkbox" value="ContactRequested" name="DemandeDeContact" checked> <b>Veuillez me contacter ds que possible...</b></p> <p><!-- Boutons Envoyer et Annuler --> <input type="submit" value="Envoyer les informations"> <input type="reset" value="Effacer le contenu du formulaire"> </p> </FORM> </body> </html> 84

LA BALISE <FORM>
Les formulaires sont dlimits par la balise <FORM> ... </FORM>, une balise qui permet de regrouper plusieurs lments du formulaire (boutons, champs de saisie,...). Syntaxe : <FORM NAME=.. ACTION=.. METHOD=.. ENCTYPE=.. > NAME : Nom du formulaire. Cet attribut permet de spcifier le nom du formulaire. Il est ncessaire en cas d'utilisation de JavaScript pour le contrle de saisie. ACTION : Adresse (URL ou e-mail) vers laquelle les donnes saisies vont tre envoyes. Exemples :
1. 2. ACTION = "http://monserveur.com/php/monCode.php" ACTION = "mailto :webmaster@nomserveur.com

METHOD : Il existe deux types de mthodes denvoi du contenu du formulaire :

GET : Elle correspond un envoi des donnes codes dans l'URL, et spares de l'adresse du script par un point d'interrogation. POST : Le contenu du formulaire est envoy au serveur en tant que bloc de donnes pour y tre trait par le CGI qui le recevra. Elle 85 correspond un envoi de donnes stockes dans le corps de la requte.

LA BALISE <FORM>
GET est la mthode par dfaut. Toutefois, la mthode POST est plus efficace et permet le traitement d'une quantit plus importante de donnes. C'est donc cette dernire qui est presque toujours utilise. La mthode GET devrait n'tre employe que dans le cas de formulaires trs simples et ne contenant pas un mot de passe. ENCTYPE : Spcifie l'encodage utilis pour la forme que prendra le contenu du formulaire. Ce paramtre ne peut tre utilis qu'accompagn par la mthode POST. ENCTYPE peut prendre plusieurs valeurs, tel que dcrit dans les lignes ci-dessous: ENCTYPE="application/x-www-form-urlencoded"
Valeur par dfaut; encode le contenu du formulaire selon une forme URL qui est difficilement lisible par le destinataire.

ENCTYPE="text/plain"
Le contenu du formulaire sera retourn en format texte lisible par le destinataire. Cette option accompagne ACTION="mailto:votre-email"

ENCTYPE="multipart/form-data"
Permet d'expdier un fichier attach au message.
86

LA BALISE FORM (SUITE)


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. Il est possible d'insrer n'importe quel lment HTML de base dans une balise FORM (textes, boutons, tableaux, liens,...) mais il est surtout intressant d'insrer des lments interactifs. Ces lments interactifs sont:
La balise INPUT: un ensemble de boutons et de champs de saisie La balise TEXTAREA: une zone de saisie La balise SELECT: une liste choix multiples

87

LA BALISE <INPUT>
La balise INPUT est la balise essentielle des formulaires, car elle permet de crer un bon nombre d'lments "interactifs". Syntaxe :
<INPUT TYPE="Type du champ" VALUE="Valeur par dfaut" NAME="Nom de l'lment">

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 l'attribut VALUE. L'attribut TYPE permet de prciser le type d'lment que reprsente la balise INPUT, les valeurs que ce champ peut prendre sont : TEXT, CHECKBOX, HIDDEN, RADIO, PASSWORD, FILE, RESET, SUBMIT, BUTTON,

88

LA BALISE <INPUT> (SUITE)


TEXT: il s'agit d'un champ de saisie de texte. La taille du champ peut tre dfinie l'aide de l'attribut SIZE et la taille maximale du texte saisi grce l'attribut MAXLENGTH. Syntaxe : <INPUT TYPE="text" NAME="nom_du_champ" SIZE="taille" MAXLENGTH="taille_maximum" VALUE="texte_par_dfaut"> Exemple : Votre nom : Mohamed Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="40" MAXLENGTH="50" Value= "Mohamed">

CHECKBOX: il s'agit de cases cocher pouvant admettre un tat: CHECKED (coch). Par dfaut, la case est non coche. Lorsque la case est coche la paire nom/valeur est envoye au CGI.
<INPUT TYPE="checkbox" NAME=" CHECKED >

Vos sports prfrs :

<BR>

Natation <BR> <INPUT TYPE="checkbox" NAME="Cyclisme" VALUE="cyclisme">Cyclisme<BR> <INPUT TYPE="checkbox" NAME=" ski " VALUE="ski">Ski<BR> <INPUT TYPE="checkbox" NAME=" petanque" VALUE="petanque" CHECKED>Ptanque<BR> <INPUT TYPE="checkbox" NAME=" Basket" VALUE="basket">Basket

Natation" VALUE="natation"

89

LA BALISE <INPUT> (SUITE)


RADIO: il s'agit d'un bouton permettant un choix parmi plusieurs. L'ensembl des boutons radios doivent porter la mme valeur pour lattribut NAME. Un attribut CHECKED pour un des boutons permet de prciser le bouton slectionn par dfaut.

Syntaxe :
<INPUT TYPE="radio" NAME="nom_du_groupe" VALUE="valeur" [CHECKED]>

Exemple :
Votre qualit :
<INPUT <BR>

TYPE="radio" NAME="qualite" VALUE="M" CHECKED > Monsieur<BR> <INPUT TYPE="radio" NAME="qualite" VALUE ="Mme"> Madame<BR> <INPUT TYPE="radio" NAME="qualite" VALUE="Mlle">Mademoiselle

PASSWORD: il s'agit d'un champ de saisie, dans lequel les caractres saisis

apparaissent sous forme d'astrisques ou de points afin de cacher la saisie. Syntaxe :


<INPUT TYPE="password" NAME="nom_du_champ" SIZE="taille" MAXLENGTH= "taille_maximum">
Exemple

:
90

Votre mot de passe : <INPUT TYPE="password" NAME="secret" SIZE="8"

MAXLENGTH="8">

LA BALISE <INPUT> (SUITE)


HIDDEN: Il permet d'inclure des donnes caches permettant de savoir de

quel formulaire viennent les donnes ou d'insrer des donnes issues de calculs ou encore des donnes provenant de JavaScript indiquant le navigateur, l'adresse IP, le nombre de visites ou tout autre renseignement sur le visiteur... Pour cela on utilise la balise <INPUT TYPE="hidden"> dont les attributs sont NAME : nom du champ cach et VALUE le contenu du champ c'est-dire sa valeur. Ce champ ne sera pas vu par l'internaute mais il sera inclus parmi les donnes. Syntaxe :
<INPUT TYPE="hidden" NAME="nom_du_champ " VALUE="valeur">

Exemple :
[ invisible ] <INPUT TYPE="hidden" NAME="Origine" VALUE="CyberZode">
91

LA BALISE <INPUT> (SUITE)


FILE : Utilis pour slectionner un fichier afin de lenvoyer.
Syntaxe : <FORM NAME="nom_du_formulaire" ACTION="mailto:votre@email" METHOD="post" ENCTYPE="multipart/form-data"> <INPUT TYPE="file" NAME="nom_du_champ" SIZE="taille"> </FORM> L'attribut SIZE a pour valeur la taille (en caractres) du champ correspondant. Ce champ sera suivi d'un bouton qui permet d'ouvrir une boite de dialogue Open pour choisir le fichier. Il faut changer la valeur de l'attribut ENCTYPE du conteneur FORM en MULTIPART/FORM-DATA. Exemple : <FORM NAME="cyberform ACTION="mailto:cyberzoide@multimania.com" METHOD="post" ENCTYPE="multipart/form-data"> <INPUT TYPE="file" NAME="fichier" SIZE=40> </FORM>
92

LA BALISE <INPUT> (SUITE)


RESET: il s'agit d'un bouton de remise zro permettant uniquement de rtablir

l'ensemble des lments du formulaire leurs valeurs par dfaut.


Syntaxe : <INPUT TYPE="reset" VALUE="texte__afficher"> Exemple : <INPUT TYPE="reset" VALUE="Effacer"> Rsultat :

SUBMIT: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le

texte du bouton peut tre prcis grce l'attribut value Syntaxe : <INPUT TYPE="submit" VALUE="texte__afficher"> Exemple : <INPUT TYPE="submit" VALUE="Envoyer"> Rsultat :

93

LA BALISE <INPUT> (SUITE)


BUTTON : Pour des besoins de contrle du formulaire avec JavaScript, vous pouvez tre amen crer un bouton qui ne soit ddi ni l'envoi du formulaire ni sa rinitialisation. L'utilisation de la balise <INPUT TYPE="button"> fera apparatre un bouton simple qui peut appeler une fonction JavaScript. Syntaxe : <INPUT TYPE="button" VALUE="texte__afficher"
onClick="fonction_JavaScript()">

Exemple :
<INPUT TYPE="button" VALUE="Cliquez ici !" onClick="functiontjs(this.form)"> <INPUT TYPE="text" NAME="texte">

Rsultat :

94

LA BALISE <SELECT>
Quand on a un choix faire entre plusieurs valeurs diffrentes, il vaut mieux utiliser les listes droulantes avec le conteneur <SELECT> dont les attributs sont NAME : le nom de la liste, SIZE (facultatif) dont la valeur (unit par dfaut) signifie qu'on a affaire une liste droulante sinon c'est une liste normale mais avec barre de dfilement, MULTIPLE (facultatif) qui signifie qu'il est possible de slectionner plusieurs valeurs. Si MULTIPLE n'est pas spcifi, il ne sera possible de faire qu'un seul et unique choix. Le conteneur <SELECT> en lui-mme ne suffit pas, il faut lui rajouter autant de balises <OPTION> qu'il y a de choix possibles. Les attributs de cette dernire sont VALUE : valeur du choix slectionnable c'est--dire le texte qui sera inscrit dans le champ portant le nom de la liste et SELECTED (facultatif) qui signifie que le choix correspondant sera slectionn par dfaut.

Syntaxe :
<SELECT NAME="nom_de_la_liste" [SIZE] [MULTIPLE]> <OPTION VALUE="valeur_1">Choix_1 </OPTION> <OPTION VALUE="valeur_2">Choix_2 </OPTION> <OPTION VALUE="valeur_X" [SELECTED]>Choix_X</OPTION> </SELECT>

95

LA BALISE <SELECT>
CODE
<select name="menu"> <option value = "pomme" selected> Pomme</option> <option value="banane"> Banane</option> <option value="orange"> Orange</option> <option value="citron" > Citron</option> </select > <select name="menu" size=3> <option value = "pomme"> Pomme</option> <option value="banane"> Banane</option> <option value="orange"> Orange</option> <option value="citron" selected> Citron</option> </select > <select name="menu" size=3 multiple> <option value = "pomme"> Pomme</option> <option value="banane"> Banane</option> <option value="orange"> Orange</option> <option value="citron" selected> Citron</option> </select >

Rsultat
Pomme

Orange Citron

Pomme Banane

96

BALISE <TEXTAREA>
On utilise le conteneur <TEXTAREA> pour avoir un espace multi-lignes et crire un commentaire assez long.

Attributs : NAME : le nom du champ,


ROWS : le nombres de lignes, COLS : le nombres de colonnes, READONLY : le champs se trouve alors en mode lecture seule c'est--dire que le texte par dfaut qui s'y trouve ne peut en tre effac. Si dans votre code vous insrez du texte entre les balises <TEXTAREA> et </TEXTAREA>, alors il se trouvera par dfaut dans le champ. Si le texte est plus grand que la zone de texte, des barres de dfilement apparaissent. <TEXTAREA> se comporte comme la balise <PRE> l'gard du texte par dfaut, c'est--dire que si dans le code vous sautez des lignes, alors ces sauts de lignes se rpercuteront lors de l'affichage dans le champ multi-ligne.

Syntaxe :
<TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes" COLS="nombre_de_colonnes" > texte par dfaut </TEXTAREA>

97

BALISE <TEXTAREA> (EXEMPLE)

Code

Rsultat

Voici ce que je pense des formulaires : Voici ce que je pense des formulaires : <TEXTAREA C'est un outil gnial pour les ventes de produits sur Internet NAME="pense" ROWS="5" COLS="50" READONLY> C'est un outil gnial pour les ventes de produits sur Internet </TEXTAREA>

98

LES FRAMES (CADRES)

1. 2. 3. 4. 5.

UTILITE JEU DE CADRES <FRAMESET> LA BALISE <FRAME > LIENS VERS DAUTRES CADRES UTILISATION DES CADRES

99

UTILITE

Les cadres permettent une mise en page homogne pour lensemble du site.
1. 2. Chaque cadre contient un fichier HTML spcifique. Les diffrentes zones de la page peuvent donc tre dfinies de manire indpendante.

Cette technique est trs utile lors du prototypage du site.


1. Elle permet de construire rapidement les diffrentes pages et de tester la navigation dans le site.

Mais elle est viter pour la version finale du site, car elle pose de nombreux problmes dutilisation

100

LE JEU DE CADRES <FRAMESET>


Lorsque le site utilise un jeu de cadres, lentre sur le site se fait par la page dfinissant le positionnement des diffrents cadres.
1. Sur la page d'entre, la balise <FRAMESET> prend la place du tag <BODY>.

<FRAMESET> prend les arguments suivants : ROWS et COLS dfinissent le type de cadre, vertical (ROWS) ou horizontal (COLS). Ces attributs sont suivis les largeurs ou hauteurs des cadres en valeur absolue (pixels), relative (% de la page) ou automatique (*) : <FRAMESET COLS="20%,80%"> : 2 colonnes de largeur 20% et 80% de la page <FRAMESET ROWS="50,*"> : deux lignes, l'une d'une largeur de 50 pixels et l'autre s'ajustant automatiquement la hauteur de la fentre. FRAMEBORDER : Bordure des cadres (valeur :YES ou NO) BORDER= n : Taille de la bordure des cadres en pixels BORDERCOLOR : Couleur de la bordure FRAMESPACING : Espace entre les cadres en pixels Les balises <NOFRAME> et </NOFRAME> dlimitent le code HTML interprt par les 101 navigateurs ne comprenant pas les cadres.

LE JEU DE CADRES (EXEMPLE)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><title>Frames</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> <frameset rows="100,*" cols="*" frameborder="yes" border="1" framespacing="0"> <frame src="Titre.htm" name="topFrame" scrolling="NO" noresize > <frameset cols="80,*" frameborder="Yes" border="1" framespacing="0"> <frame src="menu.htm" name="leftFrame" scrolling="NO" noresize> <frame src="base.htm" name="mainFrame"> </frameset> </frameset> <noframes> <BODY> <p>Votre navigateur ne reconnat pas la technique utilise pour la mise en page de ce site.</p> <p>Merci dutiliser cette <a href=sansframe.htm>autreversion.</a></p> </BODY> </noframes> 102 </html>

LA BALISE <FRAME>
La balise FRAME dfinit un cadre l'intrieur dun jeu (<FRAMESET>) Attributs :
SRC : indique l'URL (chemin) du document HTML qui sera affich dans le cadre NAME : Dfinit le nom logique du cadre MARGINWIDTH et MARGINHEIGHT : Marge du cadre en pixels. FRAMEBORDER : Bordure du cadre (YES ou NO). NORESIZE : Permet dempcher le redimensionnement dun cadre. SCROLLING : Associe une barre de dfilement un cadre. Il possde trois valeurs :

YES : toujours visible. NO : jamais visible AUTO : apparat si le contenu de la page dpasse la taille du cadre

103

LIENS VERS D'AUTRES CADRES (TARGET)

L'attribut TARGET de la balise A HREF permet de prciser le cadre dans lequel va safficher le document : TARGET= nom_du_cadre : le document saffiche dans le cadre appel nom_de_cadre TARGET= _self : Affichage dans le mme cadre que le lien TARGET= _parent : Affichage dans le cadre contenant le jeu de cadres parent (cas des jeux de cadres imbriqus) TARGET= _blank : Le document s'affiche dans une nouvelle fentre du navigateur En labsence de cet attribut, les pages s'affichent dans le mme cadre que le lien. Exemple: (jeu de cadres dfini prcdemment)
<a href="AP.html">lien 1</a> <a href="AP.html" target="mainFrame">lien 2</a>

104

UTILISABILITE DES CADRES


En rgle gnrale, viter les cadres (frames) 1. Problmes de navigation (back), d'impression et de signets A utiliser lorsque : 1. les visiteurs sont familiers du Web 2. le contenu est susceptible d'tre souvent modifi Exemple:

105

LES IMAGES CLIQUABLES


<IMG SRC= "images/mczimgm1.gif " USEMAP= "#plan " > <MAP NAME= "plan"> <AREA SHAPE="RECT" NOHREF COORDS=20,20,60,60> <AREA SHAPE="CIRCLE" HREF="../../bookmark/b-themes.html" COORDS=120,70,70> <AREA SHAPE="RECT" HREF="../../bookmark/b-www.html" COORDS=130,100,270,250> <AREA SHAPE="POLY" HREF="../../bookmark/b-electr.html" COORDS=60,120,90,265,260,180,260,30,145,30> <AREA SHAPE="DEFAULT" HREF="../../bookmark/b-recher.html"> </MAP>

106

LES IMAGES CLIQUABLES (SUITE)


Image cliquable sous forme de plan
dfinition dun plan (<MAP> . </MAP>) chaque zone du plan (<AREA> </AREA>)

a une forme : rectangle, cercle ou polygone est associe une URL

plaquage du plan sur limage (<IMG USEMAP = " ">) rectangle : coordonnes des coins suprieurs gauche et infrieur droit cercle : coordonnes du centre et du rayon polygone : coordonnes de tous les coins

Les coordonnes prciser


Dfinition dun lien (<A HREF= " ") autour dune image (<IMG SRC= " "> )
Limage acquiert un cadre bleu (<IMG BORDER=0 > enlve le cadre). Un clic sur limage provoque le chargement du lien

107

Les Applets Java

Java est un langage de programmation qui permet de dvelopper des applications lgres (applets) pouvant tre incorpores dans des pages Web. Aprs avoir cr une applet Java, vous pouvez l'insrer dans un document HTML. La balise applet est utilise pour indiquer la rfrence au fichier de l'applet.

<HTML> <BODY> <APPLET code="MonApplet.class" width="100" height="30" align="left">Message s'affichant si l'applet n'est pas supporte par le navigateur </APPLET> </BODY> </HTML>

108