Poly XHTML SP

Table des matires
Le langage HTML
Introduction Le langage Structure dun document Traitement des caractres Mise en page Les listes Les tableaux Insertion d'images Liens hypertextes Les formulaires Les images sensitives
UNIVERSITE DE VALENCIENNES ET DU HAINAUT-CAMBRESIS
Le langage HTML (XHTML)
M.Hamroun
M.Hamroun XHTML
INTRODUCTION
Qu'est ce qu'une page Web ?

Une page web est un document HTML qu est un ! c" e# te$te% &e nom de ce ! c" e# do t tou'ou#s a(o # &'e$tens on )*"tm)*
7balise attribut1?"valeur ! attribut;?!valeur"! 6 8 6 79balise8 ou 7balise attribut1?"valeur ! attribut;?!valeur"!698 .xemples + 7&r )idt&?"@AB" 98 tra"e une ligne &ori<ontale o""upant la moiti de la largeur de la (en:tre du na*igateur. 7p align?""enter"8texte du paragrap&e 79p8 "r e un paragrap&e "entr .
Le &angage HTML
"HyperText Markup Language" est un langage de pr sentation! il est "onstitu d#un "ertain nombre de "ommandes appel es balises ou mar$ueurs. %&a$ue "ommande d signe une a"tion ou instru"tion ' e((e"tuer lors de la le"ture de la page )eb. Les logi"iels "apables d#interpr ter le langage HTML don" de lire une page )eb sont les na*igateurs (bro)sers)! "itons les plus "onnus + ,-T./-.T .X0L1/./! 2,/.21X! 10./3! ...
2t#uctu#e d3un document HTML 2t#uctu#e
+a& ses
4#une manire g n rale les balises se pr sentent sous deux (ormes! les noms obligatoirement en m nuscu&es + 15 ,ba& se- 6 ,.ba& se- d signe une a"tion continue $ui est d "len"& e par 7balise8 et stopp e par 79balise8 de m:me nom pr " d de "9". ,ls (on"tionnent "omme des parent&ses + 7balise8 est la balise d#ou*erture 79balise8 est la balise de (ermeture .xemple + 5 7b8texte79b8 mise en gras du texte. ;5 ,ba& se .- d signe une a"tion ponctuelle, "omme tra"er une ligne .xemple + 5 7&r 98 tra"e une ligne &ori<ontale sur toute la largeur de la (en:tre du na*igateur.
=n do"ument XHTML doit "ontenir au moins les balises sui*antes! elles sont uni$ues sau( *entuellement la balise meta + %e "ode est ' reproduire dans toutes les pages Ceb. <html> <head> <title>intitul# de la page $eb</title> </head> <body> %ontenu de la page $eb </body> </html>
/tt# buts 0ou opt ons1

Les balises possdent sou*ent des attributs dont les noms sont en m nuscu&es* =n attribut est tou>ours sui*i du signe "?" et d#une *aleur pla" e entre gu &&emets.
M.Hamroun XHTML
+u#eau de t#a(a & 4

<html> <head> <title>intitul# de la page $eb</title> </head> <body> %ontenu de la page $eb </body> </html> Mode auteu# 0c#5at on1 4 5d teu# de te$te Dblo"5notesE (Programmes->Accessoires->Bloc-notes)
.nregistrer
Enregistrer dans un dossier
4ouble "li"
Pour ouvrir dans l'diteur un fichier enregistr la veille, clic-droit sur le fichier et choisir blocnote. Mode &ecteu# 4 navigateur Internet
3"tualiser
-om du (i"&ier a*e" l#extension GH.&tmHI
M.Hamroun XHTML
M se en !o#me (' appro(ondir a*e" les (euilles de style %JJ) T#a tement des ca#act6#es 2t7&es de base + Kras + ,b- ,.b-% ,tali$ue + , - ,. -! Joulign + ,u- ,.u8o& ce de ca#act6#es + ' rempla"er par les les (euilles de style +a& se ,!ont- ***,.!ontTa &&e + 1n dispose de 9 ta &&es d !!5#entes de : ; 9! la taille de base (par d (aut) est F. ,!ont s <e =)valeur)- texte ,.!ont- !valeur! est un nombre de 1' L. Cou&eu# + ,!ont co&o#=)GMnum ro I ou Gnom I) - texte ,.!ontNom de po& ce + !ace ,!ont !ace=)nom de la police)-texte,.!ont.xemple + 7(ont (a"e ?"arial"8le texte79(ont8 Cou&eu# pa# d5!aut de &a po& ce pou# &'ensemb&e de &a page Toutes les propri t s par d (aut "on"ernant la page )eb sont g n ralement des att# buts de la balise N14O. Ca#act6#es + text /## 6#e>p&an + bg"olor .xemple+ ,bod7 bgco&o#=)pink) te$t=)blue)-
M.Hamroun XHTML
M se en page Les pa#ag#ap"es + ,p-le texte du paragrap&e?** ,.pattribut + a& gn?"le(t" ou ""enter" ou "rig&t" %as parti"ulier du paragrap&e *ide + 7p8QnbspR79p8 Ruptu#e de & gne 4 ,b# .0assage ' la ligne sui*ante mais sans "r er de nou*eau paragrap&e. T t#es de pa#ag#ap"es 4 1n a S ni*eaux de titres de ,":-,.":- ' ,"@-,."@- du plus grand au plus petit. ,ls "r ent des titres align s ' gau"&e et en "ara"tres gras dont les tailles sont respe"ti*ement de S ' 1. .xemples + 7&18 Texte 79 &18 donne + Te$te ... 7&P8 Texte 79 &P8 donne + Te$te
...
0ar d (aut elle o""upe toute la largeur de la (en:tre du na*igateur! son paisseur est d#un point et elle est de "ouleur noire a*e" un e((et d#ombrage. /tt# buts 4 Largeur + w dt"=)valeurB) largeur en pour"entage par rapport ' "elle du na*igateur +7&r )idt&?"@AB" 98 o""upe la moiti de la largeur du na*igateur. &lignement 4 a& gn= )le(t)! ou " "enter" ou "rig&t" Les commenta #es ,ls ser*ent ' ins rer des expli"ations ' l#int rieur du "ode! ils sont ignor s par le na*igateur. .xemple + 7V55 %ommentaire 558
7&S8 Texte 79 &S8 donne +
Te$te
Aspaces ns5cab&es 4 BnbspC HTML ignore les espa"es "super(lus" ("omme il ignore la tou"&e .-T/.. ou les tabulations)! entre deux mots il ne re"onnaTt $uUun seul espa"e. 0our en laisser d#a*antage il (aut ins rer le "ara"tre espa"e "QnbspR" autant de (ois $ue *ous *oule< d#espa"es. +a##e "o# <onta&e + ,"# .Tra"e une ligne &ori<ontale.
M.Hamroun XHTML
Les & stes Les balises sui*antes permettent de "r er di(( rents types de listes. L stes de d5! n t ons 0ermet de "r er une liste sous (orme de lexi$ue. %&a$ue l ment est "onstitu d#un titre de d (inition sui*i de la d (inition sur la ligne sui*ante a*e" un retrait ' gau"&e. ,d&,dt- Titre de la d (inition1,.dt- ,dd- 4 (inition1,.dd,dt- Titre de la d (inition;,.dt- ,dd- 4 (inition;,.dd6 ,.d&L stes ; puces =ne liste simple agr ment e de pu"es. ,u&,& - l ment1,.& ,& - l ment;,.& 6 ,.u&/tt# but + t7pe = )dis")! ou ""ir"le" ou "s$uare" 0ermet de "&anger la (orme de la pu"e + un dis$ue! un "er"le ou un "arr plein.
L stes num5#ot5es =ne liste simple num rot e. ,o&,& - l ment1,.& ,& - l ment;,.& 6 ,.o&/tt# but + t7pe=)1)! ou "a"! ou "3"! ou "i" ou "," -um rotation num ri$ue + "1" (par d (aut) -um rotation alp&ab ti$ue + "a" en minus"ules! "3" en ma>us"ules -um rotation en "&i((res romains + "i" en minus"ules! "," en ma>us"ules
M.Hamroun XHTML
Les tab&eau$ =n tableau est un arrangement re"tangulaire de & gnes et de co&onnes. L#interse"tion d#une ligne et d#une "olonne engendre une ce&&u&e. 1n peut lui a>outer une &5gende et une bo#du#e. C#5at on d'un tab&eau ,tab&e- d (inition des l ments du tableau ,.tab&eD5! n t ons de ses 5&5ments L gende + ,capt on a& gn=)*aleur)-texte de la l gende,.capt on0ar d (aut! la l gende est "entr e et s#a((i"&e en &aut du tableau. align peut prendre les *aleurs + le(t! rig&t et bottom. %r ation d#une ligne 4,t#- di*ision de la ligne en "olonnes ,.t#%r ation d#une "olonne (don" d#une "ellule) 4,td- "ontenu de la "ellule ,.td/tt# buts de &a ba& se ,tab&e3lignement + a& gn?"le(t" ! ""enter" ou "rig&t". %ouleur d#arrire5plan du tableau + bgco&o# ? "Mnum ro de "ouleur" Wuadrillage et bordure ext rieure + bo#de# ? "nombre de points" (?1 par exemple)! le $uadrillage garde tou>ours une paisseur de 1 point m:me si on augmente "elle de la bordure ext rieure.
M.Hamroun XHTML
%ouleur du $uadrillage du tableau + bo#de#co&o# ? "Mnum ro de "ouleur" Largeur d#un tableau + w dt" =)*aleur en pixels) ou "*aleurB" Largeur en pixels ou bien par rapport ' "elle de la (en:tre du na*igateur. .spa"e entre les "ellules 4 ce&&spac ng = )nombre de points) (?; par d (aut) .spa"e (retrait) entre le "ontenu de la "ellule et sa bordure+ ce&&padd ng = )nombre de points) (?1 par d (aut) Contenu des ce&&u&es ,ntitul s 4 ,t"-?,.t"- Xoue le m:me rYle $ue ,td-! mais le "ontenu de la "ellule ainsi "r est automati$uement mis en gras et "entr . %as parti"ulier de la "ellule *ide + ,td-BnbspC,.td3ttributs de t#% td et t" + %ouleur dUarrire5plan + bgco&o# = )Dnum ro de "ouleur ) 3lignement &ori<ontal + a& gn =)le(t)! ""enter"! "rig&t" 3lignement *erti"al + (a& gn = )top)! "middle"! "bottom" 2usion de "ellules + attributs de td et t& 2usion &ori<ontale 4 co&span =)nombre de "ellules ' (usionner) 2usion *erti"ale + #owspan =)nombre de "ellules ' (usionner)
E#oupement de & gnes du tab&eau 4 .n5t:te de tableau + optionnel 7t&ead8 "r ation de lignes 79t&ead8 0ied de tableau + optionnel 7t(oot8 "r ation de lignes 79t(oot8 %orps de tableau + peut :tre subdi*is en plusieurs parties ' l#aide de + 7tbody8 "r ation de lignes 79tbody8 6 7tbody8 "r ation de lignes 79tbody8 (3u moins un tbody est obligatoire pour le 41M)
M.Hamroun XHTML
Les !o#mu&a #es

Xus$uU' pr sent (mis ' part le lien e5mail)!on ne sUest int ress aux pages )eb $ue dans un seul sens! le sens auteur5le"teur. 4ans "ette partie! on *a donner au le"teur la possibilit de "ommuni$uer a*e" lUauteur en remplissant un (ormulaire. =n (ormulaire est un ensemble de boites de dialogue analogues ' "elles utilis es par Cindo)s. ,l est "r par lUauteur et se "ompose de + "&amps de saisie boutons listes de "&oix
Les boutons "radio" appartenant ' une m:me liste doi*ent a*oir le m:me nom de liste (name). L stes de c"o $ Nalise + ,se&ect name=) nomdelaliste" s <e=)nombre de lignes *isibles),opt on (a&ue=)nom de l# l ment"8texte ' a((i"&er,.opt on,opt on (a&ue=)nom de l# l ment"8texte ' a((i"&er,.opt on6 ,opt on (a&ue=)nom de l# l ment)-texte ' a((i"&er,.opt on,.se&ect3>outer l#attribut se&ected?"sele"ted" pour la balise option pour une s le"tion automati$ue. 3ttribut de sele"t pour la s le"tion multiple + mu&t p&e?"multiple" La s le"tion s#e((e"tue ' l#aide de la souris et de la tou"&e "%trl". 0our si<e?1 "#est une liste d roulante =ne seule ligne *isible et pas de s le"tion multiple. +outon 2ubm t Nouton de *alidation pour en*oyer au ser*eur les in(ormations saisies dans le (ormulaire. 7input type?"submit" *alue?"texte a((i"& sur le bouton" 98 +outon Reset .((a"e tout "e $ue le "lient a saisi dans le (ormulaire. 7input type?"reset" *alue?)texte a((i"& sur le bouton) .-
Le "lient saisit ou s le"tionne les in(ormations demand es et les en*oie au ser*eur. C#5at on d'un !o#mu&a #e 7!o#m8 "&amps de saisie ! listes de "&oix! boutons! texte! 6 ,.!o#mC"amps de sa s e ; une & gne 7input type?"text" si<e?"nombre de "ara"tres *isibles" *alue?"a((i"&age par d (aut" name?"nomdu"&amp" 98 3>outer l#attribut readonly?"readonly" pour une s le"tion automati$ue. C"amps de sa s e ; p&us eu#s & gnes 7textarea name?"nomdu"&amp" ro)s?"nombre[de[lignes" "ols?"nombre[de["olonnes"8 texte a((i"& par d (aut (optionnel) 79textarea8 79textarea8 est obligatoire! m:me s#il n#y a pas de texte ' a((i"&er. Cases ; coc"e# ,input type?""&e"kbox" name?"nomdelaliste) *alue?"nomdela"ase" .3>outer l#attribut "&e"ked?""&e"ked" pour une s le"tion automati$ue. +outons #ad o ,input type?"radio" name?"nomdelaliste" *alue?"nomdubouton" 98 3>outer l#attribut "&e"ked?""&e"ked" pour une s le"tion automati$ue. M.Hamroun XHTML
Inse#t on d' mages Les deux (ormats grap&i$ues utilis s dans les pages )eb sont + K,2 ((i"&ier d#extension ".gi(") $ui dispose de ;@S "ouleurs et permet l#animation. 0-K ((i"&ier d#extension ".png") rempla"e de plus en plus le (ormat gi(! adapt aux dessins! grap&i$ues 6 X0.K ((i"&ier d#extension ".>peg"! ".>pg" ou ".>pe") $ui dispose de 1S millions de "ouleurs! il est adapt aux images labor es telles les p&otos. +a& se d' nse#t on 4 7 mg s#c ?)nom de (i"&ier de lUimage) a&t=)texte) 98 /tt# buts 4 D5!aut d'a!! c"age des mages + a&t=)texte) L#a((i"&age des images pou*ant :tre d sa"ti* ! le message rempla"era l#image. /& gnement mage.te$te + a& gn= "le(t" ! "rig&t"! "top"! "middle" ou "bottom" .lle permet ainsi de (aire d buter le texte (une l gende par exemple) ' "Yt de l#image $ui s#a((i"&era ' partir du &aut (top)! du milieu (middle) ou en bas (bottom) "omme suit + 0our "entrer une image! il (aut l#en"adrer par la balise di* + 7d ( align?""enter"87img ... 9879d (8 .
M.Hamroun XHTML
Ma#ges autou# de &3 mage + "space=) nombre de pixels)! marge de droite et de gau"&e de l#image. (space= "nombre de pixels)! marge du &aut et du bas de l#image. D mens ons de &' mage + w dt"=)nombre de pixels)! largeur de l#image. "e g"t= )nombre de pixels)! &auteur de l#image. +o#du#e de &' mage + bo#de#=)nombre de pixels). Image d'a## 6#e>p&an 4 ba"kground attribut de 7body8 1n peut utiliser une image "omme (ond de page "omme suit + ,bod7 bacFg#ound=)nom de (i"&ier de lUimage)-
1A
L ens "7pe#te$tes =n lien &ypertexte peut :tre une partie de texte ou une image du do"ument de d part! $ui lors$u#on "li$ue dessus! "&arge le do"ument li (arri* e). ,l "ontient une adresse $ui (ait r ( ren"e au do"ument li ! "ette adresse est appel e URL (=ni(orm /essour"e Lo"ator). Nalise de lien + ,a "#e! = )URL)- lien ,.a-
L ens d stants %ette (ois la page li e est situ e sur un ordinateur distant! un ser*eur )eb. %et ordinateur est reli par l#interm diaire du r seau ,nternet. 7a "#e!=)"ttp4..www.domaine969 nomdelapage.&tm)- lien ,.a1] "domaine" est le nom du ser*eur )eb.
Les liens peu*ent :tre de plusieurs types! la balise est tou>ours la m:me! il n#y a $ue le type d#=/L $ui "&ange. L en ent#e deu$ documents 3((i"&age d#une page )eb situ e dans le m:me dossier $ue la page )eb de d part + ,a "#e!= )nomdelapage.&tm)- lien ,.aL en dans &e mGme document 4 anc#e %#est le d pla"ement d#un endroit ' un autre dans la m:me page )eb. 19 %r ation d#une anc#e + "#est G l#arri* e I du lien %r er l#an"re ' l#endroit ou *ous *oule< *ous d pla"er a*e" + ,a d=)nom[an"re)-,.a;9 %r ation du & en + "#est G le d part I du lien 3tteindre l#an"re + ,a "#e!=)Dnom[an"re)- lien ,.aM.Hamroun XHTML 11
Les mages sens t (es La balise map subdi*ise une image en plusieurs <ones sensibles et on attribue un lien &ypertexte ' "&a$ue <one. .xemple+ une "arte g ograp&i$ue. Dfinition de la division 7map name?"nomdeladi*ision"8 ,a#ea s"ape=)(orme g om tri$ue de la re <one) coo#ds=)ses "oordonn es) "#e!=)(i"&ier1.&tm ' atteindre) .,a#ea s"ape=)(orme g om tri$ue de la "e <one) coo#ds=)ses "oordonn es) "#e!=)(i"&ier;.&tm ' atteindre) .6et". ,.mapLes (ormes g om tri$ues et leurs "oordonn es + Rectang&e + s"ape=)re"t) coo#ds=)x1!y1!x;!y; ) x1!y1 "oordonn es du "oin sup rieur gau"&e et x;!y; "oordonn es du "oin in( rieur droit. %er"le + s"ape=)c #c&e) coo#ds=)x!y!/) x!y "oordonn es du "entre et de rayon /. 0olygone + s"ape=)poly) coo#ds=) x1!y1!x;!y;!xF!yF 6) "oordonn es des sommets su""essi(s. ^one non d (inie pr " demment + s"ape=)de!au&t) "orrespond au (ond de l#image non en"ore subdi*is en <ones. 0as de "oordonn es.
.xemple de "oordonn es d#une <one re"tangulaire + 0H%H1
(1PA!A)
(A!SA) "oords?"A!A!1PA!SA" Application de la division une image , mg s#c=)(i"&ier.gi(" usemap=)Dnomdeladi*ision) .-
0:IH%@H1
M.Hamroun XHTML
1;

Poly XHTML SP

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Poly XHTML SP

Transféré par

Droits d'auteur :

Formats disponibles

Table des matires

UNIVERSITE DE VALENCIENNES ET DU HAINAUT-CAMBRESIS

Le langage HTML (XHTML)

Qu'est ce qu'une page Web ?

2t#uctu#e d3un document HTML 2t#uctu#e

/tt# buts 0ou opt ons1

+u#eau de t#a(a & 4

Enregistrer dans un dossier

-om du (i"&ier a*e" l#extension GH.&tmHI

7&S8 Texte 79 &S8 donne +

Les !o#mu&a #es

.xemple de "oordonn es d#une <one re"tangulaire + 0H%H1

(A!SA) "oords?"A!A!1PA!SA" Application de la division une image , mg s#c=)(i"&ier.gi(" usemap=)Dnomdeladi*ision) .-

Vous aimerez peut-être aussi