Vous êtes sur la page 1sur 22

Plan du chapitre 2:

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

Plan du chapitre 2:

1, Pr-.entati/n 0 &i.t/ri1ue 21345


HTML: HyperText Markup Language Langage informatique utilis pour la cration des pages Web (dfinition de la structure logique dun document WEB). HyperText indique que les pages peuvent tre en liaison les unes des autres, Markup Language signifie qu'il s'agit d'un langage utilisant des balises. Cest un langage de balisage permettant dcrire des hyperDocuments. Les spcifications de ce langage sont dites et supervises par le W3C.
mourad.benromdhan@gmail.com

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L. OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

1, Pr-.entati/n 0 &i.t/ri1ue 22345


Le World Wide Web Consortium, abrg par W3C,

1, Pr-.entati/n 0 &i.t/ri1ue 23345


1989 - Dbut de la mise au point d'HTML par Tim Berners-Lee. 1993 - HTML 1Premire version non standardise de HTML (titres, hyperliens, listes, images, formulaires) 1995 - HTML 2.0 ajout de nombreux lments de prsentation avec lapparition de W3C. 1997 - HTML 3.2 (standardisation des tableaux, nombreux lments de prsentation) fin 1997 - HTML 4.0 les variantes stricte, transitoire, frameset (styles, scripts, cadres, objets) dcembre 1999 - HTML 4.01 est la dernire version de HTML (abandonne au profit de XHTML)

Organisme de normalisation but non lucratif, fond en 1994 charg de promouvoir la compatibilit des technologies du World Wide Web telles que: HTML, XHTML, XML, RDF, SPARQL, CSS, PNG, SVG et SOAP,SMIL, SML, Xquery, XPATH, Fonctionnant comme un consortium international, il regroupe au 26 fvrier 2013, 383 entreprises partenaires.
mourad.benromdhan@gmail.com

1, Pr-.entati/n 0 &i.t/ri1ue 2'345


2000 - XHTML 1.0 modifie la syntaxe de HTML 4.01 (document bas sur le langage XML) 2001 - XHTML 1.1. 2004, des fabricants de navigateurs web crent le Web

1, Pr-.entati/n 0 &i.t/ri1ue 2(345


2008, W3C a publi sous forme de Working Draft un premier document contenant les spcifications HTML 5. 2009 - Abandon de XHTML 2.0, la version XHTML 1.1 reste donc la version normalise. A partir de 2011 W3C encourage les dveloppeurs Web utiliser HTML 5.

Hypertext Application Technology Working Group


(WHATWG) dans le but de relancer le dveloppement du format HTML et de rpondre aux nouveaux besoins sur une base technologique juge plus aisment implmentable que celle du XHTML 2.0 en cours de conception. 2007, W3C relance le dveloppement de HTML et cre un nouveau groupe qui a adopt les travaux de WHATWG comme point de dpart dune nouvelle spcification HTML5.

Les deux organisations (W3C et WHATWG) travaillent en parallle sur le mme document afin de maintenir une version unique de la technologie et vise une finalisation de la spcification en 2014.

1, Pr-.entati/n 0 &i.t/ri1ue 2)345


http://fr.wikipedia.org/wiki/ http://www.w3.org/html/wg/drafts/html/master/ http://xhtml.developpez.com/

1, Pr-.entati/n 0 &i.t/ri1ue 2*345


XHTML 1 VERSUS HTML 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document Vide </title> <!doctype html> </head> <html> <head> <body> <meta charset="utf-8"> </body> <title>Document Vide</title> </html> </head> XHTML HTML 5 <body> </body> </html>

HTML 5

HTML 4 XHTML 1

1, Pr-.entati/n 0 &i.t/ri1ue 26345


XHTML : eXtensible HyperText Markup Language Version XML de HTML. XML: un langage de balises pour reprsenter les donnes changes sur le Web. XML :est un mtalangage dit en 1998 pour crer des nouveaux langages. XHTML: impose des rgles plus stricts en terme dutilisation des balises. XHTML: permet un affichage uniforme et compatibilit avec diffrents navigateurs.
mourad.benromdhan@gmail.com

1, Pr-.entati/n 0 &i.t/ri1ue 24345


Page web: Les pages Web sont des documents XHTML. Ces derniers se composent de texte et d'instructions spciales, appeles balises. Les documents XHTML portent l'extension .html ou .htm pour IE ( partir de la version6) et .xhtml pour toutes les versions de Firefox. Un navigateur Web interprte les balises figurant dans un document XHTML et affiche ce dernier sous la forme d'une page Web.
mourad.benromdhan@gmail.com

Plan du chapitre 2:

2, Bali.e 213'5
Instruction spciale, encadre par < et >. Les balises dictent aux navigateurs la manire daffichage de la page Web. Il y a deux types de balises: balise d'ouverture et de fermeture, syntaxe gnrale:

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

<balise attributs> contenu </balise> une seule balise: <balise attributs />
balise: mot cl dsignant un lment particulier. contenu: peut contenir du texte ou dautres balises. attributs: reprsente les diffrents paramtres associs llment, sous la forme dune liste de nom="valeur" spars par des espaces.

2, Bali.e 223'5
Exemple: il est <strong> important </strong> dapprendre le langage <br/> <i>XHTML</i> Lexcution: il est important dapprendre le langage

2, Bali.e 233'5

XHTML
Toutes les balises scrivent en minuscules. Toute balise ouverte doit tre ferme. Les balises doivent tre correctement imbriques <a> <b> <c> lment </a> </b> </c> INCORRECT <a> <b> <c> lment </c> </b> </a> CORRECT
mourad.benromdhan@gmail.com

2, Bali.e 2'3'5
Exemple: <h1>Ceci est un titre</h1> <p> Un paragraphe de texte avec un <a href="page2 ht!"">"ien </a> vers une autre page. Les mots suivants <str#ng>sont importants </str#ng> </p>
mourad.benromdhan@gmail.com

Plan du chapitre 2:

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

3, Structure 7l/8ale d#un d/c %&T$L 21345


Structure globale:
1 <$%!" &ersi#n="1 '" enc#(ing=")T*+,"$> <-./CT0P1 ht!" 2 P)2L3C "+//45C//.T. XHTML 1 ' 6trict//17" "http://www w5 #rg/T8/%ht!"1/.T./%ht!"1+strict (t("> <ht!" %!"ns="http://www w5 #rg/1999/%ht!"" %!":"ang="en" "ang="en"> 5 < <hea(>

3, Structure 7l/8ale d#un d/c %&T$L 22345


1

Prologue XML:
Entte XML . Lattribut version fait rfrence la version d' XML. Lattribut encoding fait rfrence au jeu de caractres que lon souhaite utiliser dans la page (Exemples: ASCII, ISO-8859, UTF-8, etc.) Ce prologue est facultatif . L'utilisation du prologue est conseille, mais en cas de problme (parfois avec PHP), on le supprime et on indique le jeu de caractres dans la balise <meta />

<meta http-equiv="Content-Type" content="text/htm ! charset=ut"-#" /$ = <tit"e>(#cu!ent XHTML</tit"e> > </hea(> <b#(:> ? ; </b#(:> </ht!"> mourad.benromdhan@gmail.com

3, Structure 7l/8ale d#un d/c %&T$L 23345


2

3, Structure 7l/8ale d#un d/c %&T$L 2'345


Types de document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/x html1-strict.dtd">

Dclaration de DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> Il est obligatoire et doit tre plac pres le prologue XML Le DOCTYPE informe le navigateur quil doit utiliser tel vocabulaire, telles rgles de grammaire et telles rgles de mise en forme pour ce document.

DOCTYPE Mode strict. La rigueur du code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">

DOCTYPE Mode transitionnel. Cest le mode hybride qui accepte les anciennes balises de HTML.

3, Structure 7l/8ale d#un d/c %&T$L 2(345


5

3, Structure 7l/8ale d#un d/c %&T$L 2)345


<

La racine html:

Les enttes head:


<head> </head> Elle se positionne juste aprs la balise <html> Elle comporte lentte du document: Le titre du document <title> </title> Dclaration et appel des fichiers CSS. Dclaration et liens vers des fichiers JavaScript. Des informations lintention des moteurs de recherche. Les balises mta qui rfrent la description de la page, etc.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <html> </html> est llment racine du document. La prsence est obligatoire. La balise parent <html> doit obligatoirement contenir les balises enfants <head> et <body> Lattribut xml:lang dont la valeur est un code de langue normalise qui indique la langue utilise par dfaut dans la page. Cette valeur sera reconnue par les moteurs de recherche pour leur permettre dindexer les pages du site en effectuant un tri par langue.

3, Structure 7l/8ale d#un d/c %&T$L 2*345


=

3, Structure 7l/8ale d#un d/c %&T$L 26345


>

La balise meta:
Elle n'est pas obligatoire. Elle fournit des informations au serveur Web, navigateur et moteurs de recherche: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> si le prologue XML est omis ou mal interprt par le navigateur. <meta http-equiv="refresh" content="10; http://www.xhtml.com/index"/> rediriger vers une autre page au bout de dix secondes.

Le titre:
<title> Document XHTML </title>

Elle donne un titre la page (affich sur la barre de titre de la fentre). Elle est la seule balise obligatoire de lentte du document. Son contenu est un simple texte qui doit rsumer le contenu de la page en une seule ligne.

3, Structure 7l/8ale d#un d/c %&T$L 24345


?

Plan du chapitre 2:

Le corps:
<body> </body>
Elle contient le corps du document , c'est le conteneur de lensemble des lments textuels et graphiques dune page web. La balise doit imprativement tre suivie par une des balises suivantes : <address>, <blockquote>, <del>, <div>, <dl>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>,<ins>, <ol>, <noscript>, <p>, <pre>, <script>, <table>, et <ul>,

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

', Or7ani.ati/n du te9te 21345


Titre:
Un titre permet d'identifier les grandes sections de texte. La balise <hn> </hn> (avec n varie de 1 6) afficher un titre de grandeur n (1 pour le plus grand et 6 pour le plus petit) Par dfaut la balise ajoute une ligne vide.
<body> <h1> <h2> <h3> <h4> <h5> <h6> </body> Titre Titre Titre Titre Titre Titre 1 2 3 4 5 6 </h1> </h2> </h3> </h4> </h5> </h6>

', Or7ani.ati/n du te9te 22345


Paragraphe:
<p></p> permet de diviser une page en paragraphes. chaque paragraphe est prcd et suivi dun saut de ligne.
<body> <p> Paragraphe 1 </p> <p> Paragraphe 2 </p> <p> Paragraphe 3 </p> </body>

Exemple2.xhtml

Exemple 1.xhtml

mourad.benromdhan@gmail.com

mourad.benromdhan@gmail.com

', Or7ani.ati/n du te9te 23345


<br/> et <b(#>:
<br/>: aller la ligne suivante sans crer un paragraphe.
<body> premire phrase <br/> deuxime phrase <br/> troisime phrase <br/> </body>

', Or7ani.ati/n du te9te 2'345


<hr/> et <b"#c@Au#te>:
<hr/>: insrer une ligne horizontale.
<body> premire phrase <hr/> deuxime phrase <hr/> troisime phrase <hr/> </body> Exemple5.xhtml

Exemple3.xhtml

<bdo> </bdo>: Texte crit de droite gauche et de gauche droite


Exemple4.xhtml <body> <p> <bdo dir="ltr"> abcde 0123456789 </bdo> </p> <p> <bdo dir="rtl"> abcde 0123456789 </bdo> </p> </body>
mourad.benromdhan@gmail.com

<blockquote> </blockquote>: introduit un lger retrait de texte (une citation).


Exemple6.xhtml

', Or7ani.ati/n du te9te 2(345


2a"ise (e prBsentati#n:
Malgr que la mise en forme d'un document est assure par les feuilles de style CSS, XHTML autorise quelques balises de prsentation: <b></b> ou bien <strong> </strong>: gras <i></i> ou bien <em></em>: italique <sub></sub>: mettre en indice <sup></sup>: mettre en exposant <center></center>: mettre un contenu au milieu de la page <u></u> ou bien <ins></ins> : souligner un texte <del> </del>: affiche un texte barr

', Or7ani.ati/n du te9te 2)345


2a"ise (e prBsentati#n CsuiteD:
<big> </big> et <small> </small>: affiche le contenu dans une taille plus grande (plus petite) que la police normale (la taille relative par rapport la normale est gre par le navigateur ) exemple7.xhtml

Exercice 1:
Ecrire un script XHTML qui affiche (a + b)2 = a2 + 2ab + b2 Un=Un-1 +Un+1 solution

', Or7ani.ati/n du te9te 2*345


Les "istes: <ol> </ol> : liste numrote. <ul> </ul> : liste non-numrote. A lintrieur de ces balises, les lments de la liste sont reprsent par <li></li>
<h2> Liste numrote </h2> <ol> <li> premier lment </li> <li> deuxime lment </li> </ol> <h2> Liste non-numrote </h2> <ul> <li> premier lment </li> <li> deuxime lment </li> </ul>

', Or7ani.ati/n du te9te 26345:


Caractres spciaux: <!-- -->: commentaires dans le script <: &lt; >: &gt; ": &quot; &: &amp; espace: &nbsp; : &agrave; : &copy; : &ccedil;

Exemple8.xhtml

Dans le jeu de caractre (charset=iso- 8859-15) les caractres du franais ; ; ; etc. sont compris

', Or7ani.ati/n du te9te 24345:


Exercice 2:

Plan du chapitre 2:

Solution

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

(, Le. lien. et le. i:a7e. 21365


Les liens: <a href="destination du lien"> texte de lien </a> Lien vers:
Une page dun autre site situ sur le Web; Un endroit de la page en cours; Une autre page du site; Une adresse email lectronique; Un fichier tlchargeable.

(, Le. lien. et le. i:a7e. 22365


Lien vers un autre site:
<a href="http://www.lehtml.com/index.htm"> Lien </a>

http:// est facultative

Lien vers une autre page du mme site:


Lien vers une page situ dans le mme dossier:

<a href= "page2.htm"> Lien vers page 2 </a>

(, Le. lien. et le. i:a7e. 23365


Lien vers une page situe dans un autre dossier:

(, Le. lien. et le. i:a7e. 2'365


Lien lintrieur dune page (vers une ancre):
Une ancre, c'est une sorte de point de repre utile pour se dplacer dans les grosses pages XHTML. Cration d'une ancre: il suffit de rajouter l'attribut id une balise qui va servir de repre (n'importe quelle balise). Exemple: <h2 id="mon_ancre">Titre</h2>

Lien partir de index.htm vers page1.html


<a href="dossier1/page1.htm"> Texte du lien </a>

Pour se dplacer vers l'ancre de la mme page: <a href="#mon_ancre">Aller vers l'ancre</a> Pour se dplacer vers l'ancre d'une autre page: <a href="dossier1/page1.htm#mon_ancre"> Aller vers l'ancre</a> Exemple9.xhtml

Lien partir de page1.htm vers page2.htm


<a href="../dossier2/page2.htm">Texte du lien </a>

Lien partir de page2.htm vers index.htm


<a href="../index.htm"> Texte du lien </a>

(, Le. lien. et le. i:a7e. 2(365


Lien vers une adresse email:
<a href="mailto:editions@esprit.tn"> Formation </a>

(, Le. lien. et le. i:a7e. 2)365


Les images:
Les formats d'images que l'on utilise sur le web : JPEG : le format JPEG est trs rpandu (adapt pour les photos et les images de grande taille). PNG : le format PNG est le plus rcent (il peut tre rendu transparent). GIF: image anime de petite taille. Insertion: <img src="adresse du fichier image" alt="texte associ "/> src : emplacement de l'image que l'on veut insrer. alt : texte alternatif qui dcrit ce que contient l'image.

Lien pour tlcharger un fichier:


<a href="formation.pdf"> version PDF </a>

Info-bulle sur un lien:


<a href="suite.htm" title="lien vers le chapitre2"> Suite </a>

Exemple10.xhtml

(, Le. lien. et le. i:a7e. 2*365


Une image situe dans le mme rpertoire que la page:
<img src="image.jpg" />

(, Le. lien. et le. i:a7e. 26365


Exercice 3:
Crer la page suivante: exercice3.xhtml

Une image situe sur un site web:


<img src="http://www.monsite.com/images/img.png"/>

Les attributs height et width : permettent de dfinir respectivement la hauteur (height) et la largeur (width) quaura limage sur la page. Ces dimensions peuvent tre dfinies en nombre de pixels ou bien laide dun pourcentage.
<img src="linux.jpg" alt="Linux" height="50%" width="50%" /> <img src="linux.jpg" alt="Linux" height="130" width="200" />

exemple11.xhtml

Plan du chapitre 2:

), Le. Ta8leau9 : 213125


Ils sont conus pour afficher de faon structure des lments ( images, des formulaires, formulaires, etc.). Utiliss pour laborer des mises en page de documents. Un tableau est cr par la balise <table></table> <tr></tr>: indique le dbut et la fin d'une ligne <td> </td>: indique le dbut et la fin d'une cellule.
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> Ligne 2 <td>4</td> </tr> </table> Ligne 1

1. 2. 3. '. (. ). *.

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

exemple12.xhtml

), Le. Ta8leau9 : 223125


Attributs de la balise <table>:
border="N" : il dfinit la largeur des bordures externes qui dlimitent le tableau. Sa valeur sexprime en nombre de pixels et la valeur 0 est admise pour cacher ses bordures. width="N px|N%" : il dfinit la largeur totale du tableau dans la page (exprim en pixels ou bien en %). cellpadding="N px|N%" : il dfinit la largeur de lespacement entre le contenu dune cellule et sa bordure. cellspacing="N px|N%" : il dfinit lespacement entre les bordures de chaque cellule. exemple13.xhtml

), Le. Ta8leau9 : 233125


Attributs de la balise <tr> et <td>:
Hauteur d'une ligne: <tr height="N"> Largeur d'une colonne: <td width="Npx|N%"> Alignement horizontal: <tr align="left"/"center"/"right"> <td align="left"/"center"/"right"> Alignement vertical: <tr valign="top"/"middle"/"bottom"> <td valign ="top"/"middle"/"bottom"> exemple14.xhtml

), Le. Ta8leau9 : 2'3125


Fusion de cellules:
Fusion horizontale et verticale. Fusion de colonnes horizontalement: Attribut de cellule colspan="nombre de colonnes" <td colspan="3" > Titre </td> Fusion des lignes verticalement: Attribut de cellule rowspan="nombre de lignes" <td rowspan="3"> Titre </td> exemple15.xhtml

), Le. Ta8leau9 : 2(3125


Exercice 4:
Raliser les tableaux suivants:

Solution

), Le. Ta8leau9 : 2)3125


Bordures extrieurs du tableau: frame
<table border="x" width="x%" frame="type1"> Type1 peut prendre les valeurs suivantes: void: supprime toutes les bordures extrieures above: une bordure unique sur le bord suprieur below: une bordure unique sur le bord infrieur hsides: des bordures sur les bords sup. et inf. vsides: des bordures sur les cts gauche et droit rhs: des bordures sur le ct droit lhs: des bordures sur le ct gauche box ou border: des bordures sur tous les cts

), Le. Ta8leau9 : 2*3125


Bordures intrieures du tableau: rules
<table border="x" width="x%" rules="type2"> Type2 peut prendre les valeurs suivantes: none: aucun trait intrieur rows: un trait horizontal entre chaque ligne cols: un trait vertical entre chaque colonne all: un trait entre chaque ligne et chaque colonne (cest le comportement par dfaut ) groups: un trait entre les groupes ou sections

), Le. Ta8leau9 : 263125


Exercice 5:

), Le. Ta8leau9 : 243125


Titre du tableau:
<table> <caption> Titre du tableau </caption>

La ligne d'en-tte:
C'est la premire ligne du tableau, les cellules sont des <th> au lieu des <td> habituels.
<table> <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr> <tr>

exemple16.xhtml

Solution

), Le. Ta8leau9 : 21;3125


Grouper les colonnes dun tableau:
<colgroup>:Grouper des colonnes pour leur assigner simultanment les mmes proprits (texte gras, etc.) <col span="N"/> se positionne aprs <table> et avant les autres balise <tr> et <td>,permet de fixer le groupement des colonnes. span="N" : il dfinit le nombre de colonnes du groupe, sa valeur par dfaut est 1. <colgroup> <col span="2" align="center" /> <col span="1" width="50%" /> </colgroup> <tr> exemple17.xhtml

), Le. Ta8leau9 : 2113125


Grouper les lignes dun tableau:
Grouper des lignes pour leur assigner simultanment les mme proprits (texte gras, etc.) Structuration du tableau en sections: <thead>: entte du tableau <tbody>: corps du tableau <tfoot>: pied du tableau Les balises de groupement des lignes se positionnent aprs celles de groupement de colonnes (colgroup et col) exemple18.xhtml

), Le. Ta8leau9 : 2123125


Exercice 6:

Plan du chapitre 2:

1. 2. 3. '. (. ). *.
Solution

PRSENTATION. NOTION DE BALISE. STR !T RE "LOBALE D# N DO! $ENT %&T$L OR"ANISATION D TE%TE. LES LIENS ET LES I$A"ES. LES TABLEA %. LES +OR$ LAIRES.
mourad.benromdhan@gmail.com

*, Le. </r:ulaire.: 2132*5


Les formulaires sont des ensembles de composants , appels aussi champs, qui permettent l'utilisateur d'entrer des informations, d'exprimer ses choix, de saisir du texte En gnral, on parle de sites dynamique. En effet, les champs de formulaires permettent linternaute de communiquer avec le site. La balise <form></form> dclare un formulaire sur la page web. Tous les champs (zone de texte, boutons, listes de choix, cases cocher) doivent tre placs entre <form> et </form>. Une page peut contenir plusieurs formulaires la fois.

*, Le. </r:ulaire.: 2232*5


Exemple:

*, Le. </r:ulaire.: 2332*5


Ligne de texte: <input type="text" />
Attributs: Name="nom " Size="x" la longueur de la ligne de texte (par dfaut=20) Maxlength="x" dfinit le nombre maximal de caractres
que lutilisateur peut entrer Value="texte" une valeur par dfaut
<form> <p> <input type="text" name = "Nom" size="25" maxlength="6" value="suissi"/> </p> exemple19.xhtml </form>

*, Le. </r:ulaire.: 2'32*5


Zone de texte: <textarea> </textarea>
Attributs:
Name="nom " Rows="x" et Cols="y" fixent la longueur et le nombre de lignes <form> <p> <textarea row="4" cols="25"> un texte </textarea> </p> </form>
exemple20.xhtml

*, Le. </r:ulaire.: 2(32*5


Liste de slection: <select> </select>
Les diffrents choix proposs : <option></option> Lutilisateur a la possibilit de faire quun seul choix
<form> Donner votre pays: <select> <option> Algrie</option> <option> Tunisie</option> <option> France</option> <option> Autres</option> </select> </form> Exemple21.xhtml

*, Le. </r:ulaire.: 2)32*5


Liste de slection (attributs):
Attributs de <select>:
Name="nom" Size="x": dfinit x lments de la liste visibles Multiple="multiple": lutilisateur a la possibilit de slectionner plusieurs choix (lutilisateur doit maintenir [ctrl] du clavier enfonce et cliquer sur les diffrents lments avec la souris) Disabled= "disabled" dsactive la liste de slection

Attributs de la balise <option>:


Selected="selected": slectionner un lment de la liste Value="valeur": cette valeur est invisible lutilisateur

*, Le. </r:ulaire.: 2*32*5


Liste de slection (attributs): <optgroup label = "nom groupe"> <option> ..</option> </optgroup> permet de regrouper plusieurs options de mme type sous un titre (label) La balise <optgroup> cre un dcalage des options ainsi regroupes; le titre du groupe nest pas slectionnable

*, Le. </r:ulaire.: 2632*5


<form> <p> <select> <optgroup label="Europe"> <option> France </option> <option> Belgique </option> <option> Suisse </option> </optgroup> <optgroup label="Autres pays"> <option> USA </option> <option> Canada </option> <option> Inde </option> </optgroup> Exemple22.xhtml </select> </p> </form>

*, Le. </r:ulaire.: 2432*5


Boutons de choix multiple:
Cases ou carr cocher (check box):

*, Le. </r:ulaire.: 21;32*5


Boutons de choix multiple (suite):
<form> <p> Competences techniques: <br/> <input type="checkbox" name="j" checked="checked"/> Java <br/> <input type="checkbox" name="c"/> C/C++ <br/> <input type="checkbox" name="r"/> PHP et MySQL <br/> </p> </form>

<input type="checkbox" />


Attributs:
Name="nom" est obligatoire et prendra des noms diffrents pour chacune des cases Checked= "checked" pour activer un bouton par dfaut Value= "valeur" pour attribuer une valeur chaque case

Exemple23.xhtml

*, Le. </r:ulaire.: 21132*5


Bouton radio:
Slectionner un choix parmi plusieurs:

*, Le. </r:ulaire.: 21232*5


Bouton d'envoi:
Par un clic sur le bouton denvoi, les donnes du formulaire seront transmises selon les spcifications de lattribut

<input type="radio" />


Attributs:
Name="nom" est obligatoire, il faut attribuer le mme nom diffrents pour chacune des cases Checked= "checked" pour activer un bouton par dfaut Value= "valeur" pour attribuer une valeur chaque case Exemlpe24.xhtml

action de la balise <form>

<input type="submit" />


Attributs: Name="nom" Value= "valeur" ce qui va tre indiqu sur le bouton Par dfaut: Envoyer Disabled="disabled" permet de dsactiver un bouton
denvoi.

*, Le. </r:ulaire.: 21332*5


Bouton d'envoi (suite):
<form> <p> <input type="submit"/> <br/> <input type="submit" value="cliquer moi!"/> </p> </form> Exemple25.xhtml

*, Le. </r:ulaire.: 21'32*5


Bouton d'envoi (suite):
Pour personnaliser le bouton denvoi:

<boutton type ="submit"> </button>


Tout ce qui se trouve entre les balises sert de bouton (texte, image, etc.) <form> <p> <button type="submit"> Enoyer <img src="go.gif"/> </button> </p> </form>

*, Le. </r:ulaire.: 21(32*5


Bouton de rinitialisation:
Annuler lentre des donnes dans le formulaire: <input type="reset"/> <button type="reset"> </button> <form> <p> <input type="reset" /> </p> </form> Exemple26.xhtml

*, Le. </r:ulaire.: 21)32*5


Bouton de commande: <input type="button"/> (voir cours JavaScript)

*, Le. </r:ulaire.: 21*32*5


Transfert de fichiers:
Le formulaire de transfert de fichiers permet lutilisateur de transmettre avec le formulaire un fichier situ sur son ordinateur

*, Le. </r:ulaire.: 21632*5


Transfert de fichiers (suite):
<form> <p> <input type="file" size="20"accept="image/gif, image/jpeg, image/png, text/*" /> </p> </form> Exemple27.xhtml

<input type="file"/>
Attributs: Name="nom" : nom de llment du formulaire et non pas du ficher Size="x" : la largeur de la zone de texte de cet lment Maxlength="x" : dfinit la taille maximale permise en octets pour le fichier transfrer Accept="formats" : permet de limiter le transfert un certains types de fichiers.

*, Le. </r:ulaire.: 21432*5


Mot de passe:
Laffichage des puces ou des astrisques pour les mots de passe:

*, Le. </r:ulaire.: 22;32*5


Mot de passe (exemple):
<form> <p> <input type="password" maxlength="8" /> </p> </form>

<input type="password"/>
Il protge uniquement contre la regard indiscret dautres personnes. Attributs: Name="nom" Size="x" : dtermine la taille de la ligne de texte Maxlength="x" : limite le nombre de caractres du mot de passe

Exemple28.xhtml

*, Le. </r:ulaire.: 22132*5


Organisation du formulaire:
Dans le cas de formulaires longs et complexes, il sera parfois utile de regrouper graphiquement certains lments: Pour mieux organiser la page et amliorer la lisibilit. <fieldset> </fieldset> regroupe les lments. <legend> </legend> fournit une lgende au regroupement effectu et elle se place directement aprs la balise <fieldset> ouvrante.

*, Le. </r:ulaire.: 22232*5


Organisation du formulaire (suite):
<fieldset> <legend> Mentions obligatoires : </legend> Nom: <input type="text" size="20" /> <br/> Prenom: <input type="text" size="40" /> <br/> </fieldset> <fieldset> <legend> Mentions facultatives : </legend> Adresse email: <input type="text" size="20" /> <br/> </fieldset> </form> Exemple29.xhtml

*, Le. </r:ulaire.: 22332*5


Attribut tabindex:
Passer dun lment lautre grce la touche de tabulation du clavier. Par dfaut les lments sont parcourus dans lordre dans lequel ils sont dfinis dans le fichier.
<form> <p> Nom : <input type="text" tabindex="3" /> <br/> Prenom: <input type="text" tabindex="2" /> <br/> Bouton d'envoi : <input type="button" value="Envoyer" tabindex="1" /> </p> Exemple30.xhtml </form>

*, Le. </r:ulaire.: 22'32*5


Exercice 7:

Exercice7.xhtml

*, Le. </r:ulaire.: 22(32*5


Exercice 8:

*, Le. </r:ulaire.: 22)32*5


Exercice 9:

Exercice8.xhtml Exercice9.xhtml

*, Le. </r:ulaire.: 22*32*5


Exercice 10:

II,Le lan7a7e %&T$L

Questions ?