HTML

1
HTML

2
HTML

• Balises
• ouverture ltbalisegt
• fermeture lt/balisegt
• Attributs
• attribut valeur

3
Structure d'un programme HTML

• ltHTMLgt
• ltHEADgt
• ltTITLEgt lt/TITLEgt
• ltMETA gt
• lt/HEADgt
• ltBODYgt
• lt!-- Commentaires --gt
• ltBRgt Saut de ligne
• lt/BODYgt
• lt/HTMLgt

4
Partie HEAD

• ltTITLEgt lt/TITLEgt
• Titre en haut de la page
• ltMETA
• NAME .. CONTENT ..
• HTTP-EQUIV .. CONTENT ..
• gt

5
META NAME

• Author
• Description
• Keywords
• Made
• Owns
• Lang
• Generator

6
META HTTP-EQUIV

• Refresh
• Content-Language
• Content-type

7
REFRESH ? exemple

• Dans le document refresh.htm
• ltMETA HTTP-EQUIV"refresh" CONTENT"2
  URLtableaux.htm"gt
• ltMETA HTTP-EQUIV"Page-Enter" content"revealTrans
  (Duration1.0,Transition11)"gt
• Dans le document tableaux.htm
• ltMETA HTTP-EQUIV"refresh" CONTENT"3
  URLcinema.htm"gt
• ltMETA HTTP-EQUIV"Page-Enter" content"revealTrans
  (Duration1.0,Transition10)"gt
• Dans le document cinema.htm
• ltMETA HTTP-EQUIV"refresh" CONTENT"3
  URLsommaire.htm"gt
• ltMETA HTTP-EQUIV"Page-Enter" content"revealTrans
  (Duration1.0,Transition21)"gt
• Dans le document sommaire.htm
• ltMETA HTTP-EQUIV"refresh" CONTENT"3
  URLcommandespizza4.html"gt
• ltMETA HTTP-EQUIV"Page-Enter" content"revealTrans
  (Duration1.0,Transition15)"gt
• Dans votre document commandespizza4.html
• ltMETA HTTP-EQUIV"refresh" CONTENT"3
  URLrefresh.html"gt
• ltMETA HTTP-EQUIV"Page-Enter" content"revealTrans
  (Duration1.0,Transition8)"gt

8
Balise BODY attributs

• BACKGROUND "fichier"
• BGCOLOR "red" ou "RRVVBB"
• TEXT couleur
• TOPMARGIN n
• LEFTMARGIN n
• LINK couleur
• VLINK couleur
• ALINK couleur
• TITLE "texte" (info bulle)

9
BODY ? exemple
10

Notion de chemin

Chemin absolu ltbody background
"F/Images/Oiseau.gif" gt ou ltbody background
"F/Images/Cocci.jpg" gt Chemin relatif Pour
cocci ltbody background"../../Images/Cocci.jp
g" gt Pour Oiseau ltbody background"
../Images/Oiseau.gij " gt ltbody
background" Oiseau.gif" gt
11
TEXTE titres

• ltH1, H2, H3, H4, H5, H6
• ALIGN"left/center/right"
• gt

12
TEXTE styles

• ltBgtcaractères graslt/Bgt
• ltUgtcaractères soulignéslt/Ugt
• ltIgtcaractères italiqueslt/Igt
• ltSgtcaractères rayéslt/Sgt
• ltBIGgtcaractères plus grandslt/BIGgt
• ltSMALLgtcaractères plus petitslt/SMALLgt
• ltSUPgtexposantlt/SUPgt
• ltSUBgtindicelt/SUBgt
• ltTTgtcaractères non proportionnelslt/TTgt
• ltUgtltBgtltIgt plusieurs attributs lt/Igtlt/Bgtlt/Ugt

13
TEXTE styles ? exemple
14
TEXTES balise FONT

• ltFONT
• SIZE n (de 1 à 7)
• FACE "police"
• COLOR couleur
• gt
• Texte
• lt/FONTgt

15
Balise FONT ? exemple
16
Paragraphes balise P

• ltP
• ALIGN "left/right/center/justify"
• gt
• Texte
• lt/Pgt

17
Balise P ? exemple
18
Caractères spéciaux
19
Couleurs
20
Ligne horizontale HR

• ltHR
• SIZE épaisseur ligne
• WIDTH largeur ligne
• ALIGN "left/right/center" position ligne
• COLOR couleur couleur ligne
• NOSHADE pas d'ombrage
• gt

21
Balise HR ? exemple
22
Listes simples

• ltDLgt lt/DLgt
• ltDTgt lt/DTgt
• ltDDgt lt/DDgt

23
Listes simples ? exemple
24
Listes numérotées

• ltOL
• TYPE "A/a/I/i/n"
• START valeur de départ
• ltLIgt lt/LIgt
• ltLIgt lt/LIgt
• gt
• lt/OLgt

25
Listes numérotées ? exemple
26
Listes à puces

• ltUL
• TYPE "disc/circle/square"
• gt
• ltLIgt lt/LIgt
• ltLIgt lt/LIgt
• lt/ULgt

27
Listes à puces ? exemple
28
LISTES ? exemple
29
TABLE

• ltTABLE
• WIDTH largeur
• HEIGHT hauteur
• BORDER épaisseur bordure
• BACKGROUND image fond
• BGCOLOR couleur fond
• BORDERCOLOR couleur bordure
• BORDERCOLORDARK couleur bordure foncée
• BORDERCOLORLIGHT couleur bordure claire
• CELLSPACING espace entre cellules
• CELLPADDING espace entre données et bordure
• ALIGN "left/center/right"
• gt Lignes lt/TABLEgt

30
Ligne de TABLE TR

• ltTRgt
• Cellules/Colonnes de la ligne
• lt/TRgt
• ltCAPTION
• ALIGN
• VALIGN
• BGCOLOR
• gt Légende tableau lt/CAPTIONgt

31
Cellule/Colonne ligne en-tête

• Caractères gras
• ltTH
• ALIGN left/center/right
• VALIGN bottom/top/middle
• BGCOLOR couleur de fond
• WIDTH largeur
• HEIGHT hauteur
• COLSPAN nb de colonnes reroupées
• ROWSPAN nb de lignes regroupées
• gt Contenu cellule lt/THgt

32
Cellule/Colonne ligne quelconque

• ltTD
• ALIGN
• VALIGN
• BGCOLOR
• WIDTH
• HEIGHT
• COLSPAN
• ROWSPAN
• gt Contenu cellule lt/TDgt

33
Table simple ? exemple
34
Table couleurs ? exemple
35
TABLE rowspan et colspan
36
TABLE rowspan et colspan
37
Formulaires FORM

• ltFORM
• NAME nom du formulaire
• ACTION adresse destinatrice
• METHOD get/post type de transmission
• ONCLICK action en JS
• TARGET cadre destinataire des résultats
• gt
• ltINPUT
• ltTEXTAREA
• ltSELECT
• ltFIELDSET

38
INPUT

• ltINPUT
• NAME nom de la zone
• SIZE taille de la zone
• MAXLENGTH nb max de caractères à saisir
• VALUE valeur par défaut
• TYPE type de l'entrée
• gt

39
INPUT type (1)

• password
• file
• hidden
• text
• button

40
INPUT(1) ? exemple
41
INPUT type (2)

• Radio
• CHECKED
• Checkbox
• CHECKED
• Image
• SRC
• Reset
• VALUE
• Submit
• VALUE

42
INPUT(2) ? exemple 1
43
INPUT(2) ? exemple 2
44
TEXTAREA

• ltTEXTAREA
• NAME nom du textarea
• ROWS nb de lignes
• COLS nb de colonnes
• gt

45
TEXTAREA ? exemple
46
SELECT

• ltSELECT
• NAME
• SIZE
• MULTIPLE
• ltOPTION
• SELECTED
• gt

47
SELECT ? exemple
48
FIELDSET

• Permet de regrouper plusieurs champs de
  formulaire
• Cadre pour entourer ces champs
• Titre pour l'ensemble de ces champs

49
FIELDSET ? exemple
50
FORM actions ? exemple
51
FORM actions ? exemple
52
Liens hypertextes internes

• Définition d'une ancre
• ltA NAMEnomgt
• Lien vers une ancre
• ltA HREF nomancre
• ltA HREFnom
• ltA HREFpageancre
• TARGETfenêtre
• gt
• lt/Agt

53
Liens internes(1 fichier) ? exemple
54
Liens internes (pl fichiers) ? exemple
55
Liens internes (pl fich.) ? exemple
56
Liens hypertextes externes

• ltA HREF"http//...
• ltA HREF"ftp//...
• ltA HREFnews
• ltA HREFfichier image
• ltA HREFfichier audio/vidéo
• ltA HREFmailto

57
Liens externes exemple
58
Images balise IMG

• ltIMG
• SRC adresse de l'image
• ALIGNleft/center/right texte/image
• hspace et vspace espace entre image et texte
• WIDTH largeur
• HEIGHT hauteur
• BORDER taille bordure
• ALT légende
• USEMAP image cliquable (mapée)

59
Balise IMG ? exemple (1)Affichage images
60
Balise IMG ? exemple (2)Cadrage images dans
tableau
61
Balise IMG ? exemple (2)Cadrage images dans
tableau
62
Balise IMG ? exemple (3)Même image tailles
différentes
h50w70
h100w200
h200w100
Image diminuée par Photoshop
h120w200
h120w200
63
Balise IMG ? exemple (4)Texte entre 2 images
64
Images balise MAP

• ltMAP NAMEnomgt
• ltAREA
• SHAPE"rect/circle/poly"
• HREFurl
• COORDS
• lt/MAPgt

65
Balise MAP ? exemple
66
Balise MAP ? exemple
67
Balise MAP ? exemple
68
Balise MARQUEE (1)
69
Balise MARQUEE (2)
70
Balise MARQUEE (3)
71
Balise MARQUEE (4)
72
Cadres Balise FRAMESET

• ltFRAMESET
• COLS largeur des cadres
• ROWS hauteurs des cadres
• FRAMEBORDER bordure?
• FRAMESPACING espacement
• BORDER taille
• BORDERCOLOR couleur
• gt . . . lt/FRAMESETgt

73
Cadres Balise FRAME

• ltFRAME
• SRC adresse contenu
• NAME nom cadre
• MARGINWIDTH largeur marge
• SCROLLINGyes/no
• NORESIZE
• gt

74
Balises FRAMESET et FRAME ? exemple