Vous êtes sur la page 1sur 12

PPRATIQUE DE HTML (HYPERTEXT MARKUP LANGUAGE)

Pour crer une page web, ouvrir un diteur de texte, crer un fichier avec l'extension .htm et combiner les
balises indiques dans ce document pour obtenir une jolie page web.
FORMAT GNRAL D'UN DOCUMENT HTML :
<H!"#
<H$%&#
'
<(H$%&#
<)*&+#
'.
<()*&+#
<(H!"#
FORMAT GNRAL D'UNE BALISE HTML (OU TAG HTML) :
<,om %ttribut-./0aleur1%ttribut-/ %ttribut2./0aleur1%ttribut2/ %ttribut3 %ttribut4'#exte<(,om#
5emarque 6 7ertaines balises n'ont pas d'attributs et peuvent ne pas 8tre fermes
DESCRIPTION DU HEAD
"a partie Head dfinit les caractristiques d'un document
Balise Title
Pour dfinir et afficher un titre de la page dans la barre de titre de la page 6 <itle#itre du
document<(itle#
Balise Meta
9ournit des informations que les moteurs de recherche et les serveurs HP pourront utiliser.
<Met N!e"
/%uthor/ 7ontent ./,om auteur/
/Publisher/ 7ontent ./:ui a publi le site/
/5epl;<to/ 7ontent ./%dresse lectronique de la personne = contacter/
/&escription/ 7ontent ./&escription du site/
/>e;?ords/ 7ontent ./!ot-, !ot2,'/@utiliss par les moteurs de rechercheA
/Bndentifier<C5"/ 7ontent ./%dresse du site/
/7op;rhigt/ 7ontent ./auteur, socit'/
/Denarator/ 7ontent ./"ogicielCtilis-, "ogicielutilis2'/
/&ate/ 7ontent ./date de cration/
#
/5obots/ 7ontent .
/%ll/ @"a page et tous ces liens seront indexs par les
robotsA
/,one/ @Bnterdire l'accEs aux robotsA
/Bndex/ @"a page sera indexeA
/,oindex/ ("a page ne sera pas indexeA
'
/5evisit<after/ 7ontent
.
/n/ @"e site sera rindex automatiquement aprEs n joursA
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" -
<Met HP1$quiv.
/5efresh/ 7ontent./n/ @"e site sera recharg toutes les n FecondesA
/5efresh/ 7ontent./n/ C5"./'/ @l'C5" indiqu sera charg aprEs n FecA
/Pragma/ 7ontent./no<cache/ @"e navigateur ne conserve pas la page en
cacheA
/$xpires/ 7ontent./&ate $xpiration Page/ @&ate = partir de laquelle le
navigateur devra aller chercher
une page = partir de son site
d'origine et non = partir du cacheA
'
#

Balise Link
&crit les liens entre la page et d'autres documents. $lle sera utilise plus tard pour lier une page = une
feuille de st;le
Balise Script
7ette balise permet d'insrer des scripts qui seront excuts cGt client @par le navigateurA. $lle sera
tudie en dtail plus tard
Balise Base
<B$e href./7hemin de base (/#
% chaque appel d'un lment externe dans la page ?eb @image, son, liens'A, le chemin qui apparaHt
dans )%F$ est concatn au chemin spcifi avant de rechercher l'lment.
$xemple 6 <B$e href./http6((www.7oucou.com(!onFite(/#
Balise <Style>
Fert = dclarer un st;le = utiliser dans la page ?eb. $lle sera tudie plus tard.
DESCRIPTION DU BODY
Quelques attributs de la balise Body
<BODY
)acIDround./Bmage de 9ond/
)g7olor./7ouleur de 9ond/
ext./7ouleur du exte/
"inI./7ouleur des "iens h;pertextes de la page/
v"inI./7ouleur des "iens 0isits de la page/
a"inI./7ouleur des "iens actifs de la page/
op!argin./!arge haut de la page/
"eft!argin./!arge Dauche de la page/
)gproperties./9ixed/ @indique que l'image de fond ne doit pas dfiler m8me si le texte dfile)#
Balises de formatage du texte et des paragraphes
!ettre un texte en Btalique 6 <I#exte = mettre en forme<%I#
!ettre un texte en Dras 6 <B#exte = mettre en forme<%B# ou
<St&'()#exte = mettre en forme<%St&'()#
Fouligner un texte 6 <U#exte = mettre en forme<%U#
)arrer un texte 6 <S#exte = mettre en forme<%S# ou
<St&*+e#exte = mettre en forme<%St&*+e#
!ettre un texte en indice 6 <SUB# exte = mettre en forme <%SUB#
!ettre un texte en plus petite taille 6 <S!,,# exte = mettre en forme <%S!,,#
!ettre un texte en plus grande taille 6 <B*)# exte = mettre en forme <%B*)#
!ettre un texte en exposant 6 <SUP# exte = mettre en forme <%SUP#
!odifier la couleur, la taille ou la police d'un texte 6
<F'(t
7olor./7ouleur/
FiJe./aille du texte/
9ace./Police/,/Police1Fubstitution-/, /Police1Fubstitution2/...#
exte = mettre en forme
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" 2
<%F'(t#
!ettre en retrait un texte 6 <-,'.+/0'te#exte<%B,'.+/0'te#
5emarque 6 "a police = attribuer doit exister sur le s;stEme client si ce n'est pas le cas il est possible de spcifier
des polices de substitution qui seront utilises dans l'ordre spcifi. Fi aucune des polices spcifies n'existe
c'est la police par dfaut du s;stEme qui sera utilise.
K modEles de st;les de titres sont prdfinis @de - = K, - a;ant la taille la plus grandeA et permettent
d'appliquer le modEle = un texte donne 6 <H(# exte = mettre en forme <%H(#
"es retours chariot dans un fichier H!" ne sont pas reconnus. Pour retourner = la ligne 6 exte
<B&#
Pour crer un paragraphe 6
<P align
left
right
center
Lustif;
# exte paragraphe <%P#
5emarque 6 "a balise <P# insEre automatiquement des sauts de ligne avant et aprEs le paragraphe
Pour reproduire un texte sur le navigateur tel que vous l'aveJ saisi dans votre fichier .htm 6
<PRE#exte pr format <%PRE#
5emarque 6 les espaces, les tabulations, les retours = la ligne' sont reconnus dans ce cas.
Pour afficher une )arre horiJontale 6
<HR align
left
right
center
siJe./0aleur1$paisseur/ width./"argeur/ 7olor./7ouleur/ ,oshade#
Pour faire dfiler du texte 6
<M&/0ee#exte pr format <%M&/0ee#
5emarque 6 ,oFhade permet d'afficher la barre en couleur unie
Listes ! puces
<UL ;pe.
&isc
circle
squar
e
#
<L1#itre @optionnelA
<LI t;pe....#233
<LI t;pe....#23
...
<%UL#
Listes num"rot"es
<OL ;pe.
%
a
B
i
-
Ftart. 0aleur1&marrage@,ombreA#
<L1# itre @optionnelA
<LI 0alue.0aleur1attribuer@nombreA# Pour sauter = un numro
<LI 0alue.'#
...
<%OL#
Liste de d"finitions
Cne liste de dfinitions est une liste de termes avec la dfinition correspondante
<DL compact#
<DT#erme-
<DD#Fa dfinition
<DT#erme2
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" 3
<DD#Fa dfinition
'.
<%DL#
5emarque 6 "'attribut 7ompact permet de crer le terme et sa dfinition sur la m8me ligne
#mages
Pour insrer une image dans une page
<I!)
Frc./7hemin de l'image/
%lt./exte = afficher = la place de l'image si celle ci n'a pas t tlcharge/
%lign . /%lignement de l'image par rapport au texte/
?idth ./"argeur/
Height ./Hauteur/
)order./$paisseur bordure/
0FP%7$./$spacement entre texte et bord vertical de l'image/
HFP%7$./$spacement entre texte et bord horiJontal de l'image/
Cse!ap./attacher un !%P@une carteA = l'image pour la diviser en diffrentes Jones ractives/#
Listes ! puces images
<UL#
<IMG src./'/# exte <BR#
<IMG src./'/# exte <BR#
<IMG src./'/# exte <BR#
'
<%UL#
Sons
Pour crer un fond sonore pour une page
<BGS'0(4
Frc./7hemin 9ichier son/
"oop./,ombre de rptition de la squence/ ou Bnfinite pour une rptition sans arr8t
0olume.
)alance.
#
5emarque 6 )DF*C,& accepte les fichiers .?%0, .%C et .!B& @fichiers !idiA
Les tableaux
Cn tableau commence par <able'# et se termine par <(able#. Bl doit contenir au moins une ligne.
7haque ligne commence par <5'# et se termine par <(5#. Cne ligne contient une ou plusieurs
cellules. 7haque cellule commence par <&'# et se termine par <(&#.
<T-,e
)order./$paisseur )ordure/
)order7olor./7ouleur )ordure/
)acIground./Bmage de 9ond/
)g7olor./7ouleur de 9ond/
%lign./%lignement du tableau par rapport = la page/
?idth./"argeur du tableau par rapport = la page/
7ellspacing./$spacement entre les cellules/
7ellpadding./$space entre la bordure du tableau et le texte/#
<C5t*'(#itre du ableau<%C5t*'(#
<TR
%lign./%lignement du texte dans les cellules de la ligne @7enter, "eft, 5ightA/
valign./%lignement verticaldu texte dans les cellules de la ligne @)ottom, op, !iddleA/
char./7aractEre par rapport auquel le texte sera align @point dcimal par exemple/
bgcolor./7ouleur de fond des cellules de cette ligne/
#
<TD
7olFpan./,ombre de colonnes sur lesquels la cellule sera fusionne/
5owFpan./,ombre de lignes sur lesquels la cellule sera fusionne/
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" 4
%lign . /%lignement horiJontal du texte dans la cellule @7enter, "eft ou rightA/
0%lign. /%lignement vertical du texte dans la cellule @top, middle ou bottomA/
Height./Hauteur/
?idth./"argeur/
)g7olor./7ouleur de fond de la cellule/
,owrap @emp8che le retour = la ligne dans une celluleA
#
exte ou image = mettre dans la cellule
<%TD#
<%TR#
<TR...#<TD...#....<%TD#<%TR#
<TR...#<TD...#....<%TD#<%TR#
...
<%TABLE#6M
Les ancres et les liens hypertextes
Poser une ancre 6 accder = l'endroit qu'on souhaite marquer et atteindre par la suite 6
< ,ame./,om%ncre/#exte<%#
7rer un lien vers une ancre se trouvant sur la m8me page 6
< href./M,om%ncre/#exte ou image du lien <%#
7rer un lien vers une ancre se trouvant sur une autre page 6
< href./7heminPageM,om%ncre/#exte ou image du lien<%#
7rer un lien vers une autre page du m8me site 6
< href./7heminPage/#exte ou image du lien<%#
7rer un lien vers un fichier son 6
< href./7hemin9ichierFon/#exte ou image du lien<%# @utiliser un format compatibleA
7rer un lien vers une squence 0ido 6
< href./7heminFquence0ido/#exte ou image du lien<%# @utiliser un format compatibleA
7rer un lien vers un autre site 6
< href./http6((C5"/ #exte ou image du lien <%#
7rer un lien vers un serveur 9P @9ile ransfert ProtocolA 6
< href./9tp6((C5"/ #exte ou image du lien <%#
2
7rer un lien vers une adresse lectronique 6
< href./!ailo6%dresse/ #exte ou image du lien <%#
5emarque 6 Fi l'lment = atteindre par un lien doit 8tre affich dans une fen8tre particuliEre @un cadre par
exempleA, le nom de la Jone doit 8tre indiqu = l'aide de l'attribut arget 6
< href./7heminPage/ arget./,om de la fen8tre cible/#exte ou image du lien <%#
$arte
Pour crer une carte 6
Cne carte sert = rpartir une seule image en diffrentes Jones de maniEre = avoir une raction
diffrente selon que l'utilisateur appuie sur telle ou telle Jone. Cne carte commence par <!ap'
# et se termine par <(!ap#. Cne carte se compose dNune ou plusieurs Jones. 7haque Jone tant
dlimite par <%rea'# et <(%rea#.
<M5 ,ame./,om de la carte/#
<A&e
Fhape./;pe de la Jone @5ect, 7ircle ou Pol;gonA/
7oords./7oordonnes/
H5ef./"ien = atteindre en cas de clicI de l'utilisateur sur cette Jone/
%lt./exte = afficher en cas de problEme d'accEs au lien/
arget./,om de la fen8tre cible/
,o5ef @indique qu'il n'; a pas de lien associA#
<A&e'#
<A&e'#
<%M5#
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" O
Pour appliquer une carte = une image 6
<*!) src./Bmage/ Cse!ap./7,om7arte/#
5emarque 6
Fi deux %rea @JonesA entrent en conflit, celle qui a t dclare en premier a la priorit dans la partie de
conflit
Fpcifier les coordonnes d'une Jone dpend du t;pe du Fhape utilis 6
oPour un rectangle 6
7oord./%, ), 7, &/
oPour un cercle 6
7oord./&istance entre bord gauche et le centre, &istance entre bord haut et le centre, 5a;on/
oPour un pol;gone 6
7oord./&istance entre bord gauche et le premier point, &istance entre bord haut et le premier
point, &istance entre bord gauche et le deuxiEme point, &istance entre bord haut et le deuxiEme
point'/#
Le$ .4&e$ (F&!e$)
"e principe des cadres consiste = diviser l'cran du navigateur en plusieurs Jones. 7hacune de ces Jones tant
capable d'accueillir une page H!".
"a page qu'on souhaite diviser en plusieurs cadres aura la structure suivante 6
<H!"#
<H$%&#
'
<(H$%&#
<F&!eSet
7ols
5ows
./x,;,J,.../ F&!e-'&4e&" Pe&!et 4'88*.1e& '0 ('( , -'&40&e
4e$ 8&!e$3 F&!e$5.*()" D98*(*t 0( e$5.e 4e $95&t*'( e(t&e
,e$ 8&!e$ B'&4e&" D98*(*t , ,&)e0& 4e , -'&40&e 4e$ 8&!e$3
B'&4e&.','&" D98*(*t , .'0,e0& 4e , -'&40&e 4e t'0$ ,e$ 8&!e$3#
<F&!e ,ame./,om7adre/ Frc./Page = afficher sur le cadre/#
<F&!e ...#
...
<N'F&!e$#
!essage = afficher pour les navigateurs ne supportant pas les cadres
<%F&!eSet#
<(H!"#
5emarque 6 Bl faut noter l'absence de la balise )od; dans ce cas
Bl existe autant de 9rame qu'on a dfini de colonnes ou de lignes dans <9rameFet#
Cn cadre d'un jeu de cadres peut lui<m8me contenir un jeu de cadres. Pratiquement, on remplace dans ce cas un
9rame par un 9rameFet 6
<F&!eSet
7ols
5ows
./x,;,J,'/#
<F&!e
,ame./,om7adre/
Frc./Page = afficher sur le cadre/
!argin?idth./!arge gauche/
!arginHeight./!argeHaut/
Fcrolling./%ffichage barre dfilement ou non/
,o5esiJe @interdit le redimentionnement du siteA
)order7olor./7ouleur/#
<F&!e ...#
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" K
%
7
) &
...
<F&!eSet
7ols
5ows
./x,;,J,.../
#
<F&!e ,ame./,om7adre/ Frc./Page = afficher sur le cadre/#
<F&!e ...#
...
<N'F&!e$#
!essage = afficher pour les navigateurs ne supportant pas les cadres
<%F&!eSet#
...
<N'F&!e$#
!essage = afficher pour les navigateurs ne supportant pas les cadres
<%F&!eSet#
<(H!"#
5emarque 6
"'attribut arget prcdemment vu avec la balise <a'# permet justement de positionner la cible d'un lien dans
un 9rame donn de la page en spcifiant le nom de celui dans l'attribut arget
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" P
A0t&e$ -,*$e$ :
Pour mettre en italique un texte
<E!#&finition<%E!#
Pour mettre en valeur une adresse 6
<A4&e$$#%dresse<%A4&e$$#
Pour mettre en valeur une dfinition 6
<DFN#&finition<%DFN#
Pour mettre en valeur une citation 6
<C*t#&finition<%C*t#
Pour mettre en valeur une variable 6
<:&#&finition<%:&#
Pour mettre en valeur un code 6
<C'4e#&finition<%C'4e#
Pour crer un menu 6
<Me(0#
<L*#!enu Btem-
<L*#!enuBtem2
<%Me(0#
Le$ $t;,e$ :
"es feuilles de st;le @7FF<7ascading Ft;le FheetA permettent de sparer la prsentation d'un document @H!"
ou Q!"A de son contenu. Bl sera ainsi plus facile de modifier la prsentation d'un document @ou d'un siteA et de
le maintenir.
Cne feuille de st;les dcrit des st;les. Cn st;le est un ensemble de proprits de mise en forme attaches = un
document H!", = une section de document ou = un lment H!". 7' est un ensemble de rEgles. Cne rEgle
de st;le est compose d'un $9,e.te0& @gnralement une balise H!" comme )od;, p,' A auquel sont
rattaches un ensemble de 5&'5&*9t9$.
#mplantation des feuilles de styles
Bl existe trois techniques pour utiliser des feuilles de st;le 6 "es st;les locaux, les st;les incorpors et les st;les
externes.
Ft;les locaux
"e st;le est dfini directement dans la balise concerne. Bl ne s'appliquera qu'= cet lment @le
st;le ne s'appliquera pas aux autres balises m8me si elles ont le m8me nomA
<,om)alise ''' Ft;le./PropritFt;le-6valeur R PropritFt;le26valeur'./#
Ft;les incorpors
"e st;le est dfini dans le head ou entre le head et le bod; = l'aide de la balise Ft;le
<St;,e ;pe./;pe langage utilis/#
<S<<
&scription des st;les
<<#
<%St;,e#
5emarque 6 <S<< permet dans H!" de mettre un texte en commentaire mais dans une balise Ft;le @ou FcriptA
il ne sera pas considr. Bl est destin aux navigateurs ne reconnaissant pas les balises st;le @ou scriptA. "e texte
entre les balises sera alors interprt comme un commentaire
Ft;les externes
"e st;le est dfini dans un autre fichier. Bl faut pour cela crer un fichier avec l'extension .css et
dfinir 4*&e.te!e(t les st;les dedans.
Pour faire appel = ce fichier = partir de n'importe quel document html, on utilise dans le <Head# 6
<"inI 5el./Ft;lesheet/ Href./,om9eilleFt;le$xterne.css/ ;pe./;pe langage
utilis/#
5emarque 6
Pour le t;pe de langage, le t;pe /ext(7FF/ sera utilis dans notre cas
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" T
Bl est possible de faire appel = plusieurs st;les externes @utiliser plusieurs "inIA
Bl est possible d'appeler une feuille de st;le externe = l'intrieur d'une feuille de st;le incorpore en
utilisant l'instruction 6
<St;,e ;pe./;pe langage utilis/#
<S<<
Uimport C5"@C5" de la feuille = importerA
&escription des st;les
<<#
<%St;,e#
Fi diffrents t;pes de feuilles de st;les sont utiliss dans un m8me document @locales, incorpores et
externeA, le st;le le plus proche du contenu est prioritaire @Ft;le local, st;le incorpor, st;le externe
import puis st;le externeA
Fi plusieurs feuilles de st;les externes sont appeles et que plusieurs dfinissions existent pour le m8me
st;le seul le dernier st;le sera conserv @cascade des st;lesA
%escription des styles incorpor"s et externe
"e format gnral d'une rEgle de st;le est 6
Flecteur VPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
Bl existe diffrents formats de slecteurs 6
Pour appliquer un st;le = tous les lments d'un document
XVPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
Pour appliquer un st;le = une balise
,om)aliseVPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
Pour appliquer le m8me st;les = plusieurs balises diffrentes
,om)alise-, ,om)alise2'VPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
Les balises Span et %i&
Fervent = appliquer un st;le qui ne peut pas 8tre appliqu = un lment du langage H!".
Fpan 6 Permet d'associer un st;le = un texte 6
<S5(#exte<%S5(#
&iv 6 Permet de crer une section dans un document. Bl sera possible d'associer = cette section un
st;le
<D*< %lign.
"eft
7enter
5ight
# paragraphes<%D*<#
5emarque 6 Cne section peut regrouper plusieurs paragraphes dlimits par des balises <p# et <(p#
Les classes
Bl est possible d'associer diffrentes balises = un m8me st;le ou d'associer la m8me balise = des st;les diffrents
en utilisant l'attribut C,$$ 6
<,om )alise'7lass./,om7lasse/#
Par la suite il est possible de dfinir le st;le pour une classe de la maniEre suivante 6
Pour appliquer un st;le = toutes les balises /,om)alise/ a;ant pour classe /,om7lasse/ 6
,om)alise.,om7lasseVPropritFt;le-6valeur' R PropritFt;le26valeur'W
Pour appliquer un st;le = toutes les balises a;ant pour classe /,om7lasse/ @classe universelleA6
3,om7lasseVPropritFt;le-6valeur', PropritFt;le26valeur'W
Les id
"a dfinition des rEgles de st;le pour les classes risque de crer un conflit en LavaFcript @= cause de l'appel sous
la forme ,om)alise.,om7lasseA. 7et attribut sera remplac par l'attribut Bd qui fonctionne de la m8me maniEre
avec de lgres diffrences 6
<,om )alise'id./,omBd/#
Par la suite il est possible de dfinir le st;le pour un Bd de la maniEre suivante 6
M,omBdVPropritFt;le-6valeur' R PropritFt;le26valeur'W
5emarque 6 un attribut B& sert = identifier un lment de maniEre unique dans un document
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" Y
Les 'seudo()l"ments et les 'seudo($lasses
"es pseudo<lments permettent d'appliquer un st;le = un lment ou = une classe selon un critEre
portant sur le texte contenu dans cette balise 6
,om)alise-
6
9irst<"etter
9irst<"ine
...
VPropritFt;le- 6 valeur-' R PropritFt;le2 6 valeur-'W
"es pseudo<classes permettent d'appliquer un st;le = un lment selon des conditions portant sur des
vEnement ou sur la position relative d'une balise par rapport aux autres balises. *n distingue 6
"es pseudo<classes de liens 6 Portent sur les ancres
a6
linI
visited
active
VPropritFt;le- 6 valeur-' R PropritFt;le2 6 valeur-'W
5emarque 6 "e a est optionnel, il peut 8tre omis
"es pseudo<classes descendantes 6 Permettent d'appliquer = un st;le selon sa position par rapport
= d'autres lments 6
< Pour appliquer un st;le = tout lment + qui est un descendant de Q
Q +VPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
< Pour appliquer un st;le = tout lment + qui est un enfant de Q
Q#+VPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
< Pour appliquer un st;le au premier lment + rencontr dans un lment Q
Q#+69irst<7hildVPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
< Pour appliquer un st;le = tout lment + qui vient immdiatement aprEs un lment Q
QZ+VPropritFt;le- 6 valeur- R PropritFt;le2 6 valeur-, valeur2'W
'
"es pseudo<classes d;namiques 6 Permettent d'associer des st;les = des vnements sur Q
Q6$vnement VPropritFt;le- 6 valeur-' R PropritFt;le2 6 valeur-'W
'
Le$ 8'&!0,*&e$ : .1'8* 1(
"es formulaires offrent = l'utilisateur les mo;ens d'interagir avec une page web @[ones de textes, boutons
d'options, )outons,'A. Cn document H!" peut contenir plusieurs formulaires si chaque formulaire doit
dclencher une action diffrente.
Balise <*orm>
!arque le dbut d'un formulaire
<F'&!
,ame. /,om9ormulaire/
%ction./%ction = dclencher/
!ethod./!thode de transfert des donnes vers un serveur/ @Det ou PostA
arget./9en8tre o\ s'afficher#
$lments formulaire
<%F'&!#
Balise <input>
<I(50t
,ame. /,om7hamp/
FiJe./aille de la Jone/
0alue./0aleur par dfaut/
!ax"ength./"ongueur maximale/
&isabled @&sactive le champA#
<I(50t
,ame. /,om7hamp/
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" -]
;pe . /ext/ @[one de texteA
/Password/@[one de texte pour !dpA
/Hidden/ @Jone cacheA
0alue./texte qui apparaHtra sur le bouton/
&isabled @&sactive le champA#
<I(50t
,ame. /,om7hamp/
;pe./Bmage/
Frc./Bmage/
%lt./exte en cas de nom affichage de l'image/
&isabled @&sactive le champA#
5emarque 6 7et lement a le m8me rGle que Fubmit
S
<I(50t
,ame. /,omDroupe/
00alue./0aleur du champ/
7hecIed @indique si un bouton d'option @ou une case = cocherA est slectionnA
&isabled @&sactive le champA#
5emarque 6 "es boutons d'options @ou les cases = cocherA faisant partie du m8me groupe doivent porter le m8me
nom
Balise <Button>
<B0tt'(
,ame. /,om7hamp/
0alue./exte qui apparaHtra sur le bouton/
&isabled @&sactive le champA#
exte
<img src./7hemin image/ alt ./exte = afficher en cas de problEme de chargement de l'image/#
exte
<img....#
'.
<%B0tt'(#
Balise <text+rea>,$hamp memo-
<Te=tA&e
,ame./,om7hamp/
5ows./,ombre lignes/
7ols./,ombre colonnes/#
exte = mettre dans cette Jone
&isabled @&sactive le champA
<%Te=tA&e#
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" --
;pe .
/)utton/ @)outon de commandeA
/Fubmit/ @)outon de validationA
/5eset/ @)outon de rinitialisation des autres champsA
;pe .
/5adio/ @)outon radio ( Cn seul choix est possible sur un groupeA
/7hecI)ox/ @7ase = cocher ( Plusieurs choix sont possible sur un m8me groupeA
;pe .
/)utton/ @)outon de commandeA
/Fubmit/ @)outon de validationA
/5eset/ @)outon de rinitialisation des autres champsA
Balise <Select> ,Les menus d"roulants-
<Se,e.t
,ame./,om7hamp/
FiJe./,ombre lments affichs en une seule fois dans la liste/
!ultiple @Flection multiple autoriseA
&isabled @&sactive le champA#
<*ption
0alue./0aleur 7orrespondante/
Felected @si l'lment est slectionn ou nonA#
<*ption '#
...
<(Felect#
5alis par ,aoual %)&%""%H ( !odule 7ration site web ( Partie BB ( Pratique de H!" -2