Download - 11:07:591 Programmation Web : HTML Jérôme CUTRONA [email protected] Programmation Web 2012-2013
03:24:5303:24:53 11
Programmation Web :Programmation Web :HTMLHTML
Jérôme CUTRONAJérôme CUTRONA
[email protected]@univ-reims.fr
Programmation Web 2012-2013Programmation Web 2012-2013
2203:24:5303:24:53
HTML = HyperText Markup Language ?HTML = HyperText Markup Language ?
Hyper : Non linéaire, liens entre nœudsHyper : Non linéaire, liens entre nœuds Text : Composé de texteText : Composé de texte Markup : Marqué, baliséMarkup : Marqué, balisé Language : LangageLanguage : Langage
Langage à balises de description de Langage à balises de description de documents hypertextesdocuments hypertextes
Programmation Web 2012-2013Programmation Web 2012-2013
3303:24:5303:24:53
Qu’est-ce que HTML ?Qu’est-ce que HTML ?
Langage de présentation de documentsLangage de présentation de documents N’est N’est PASPAS un langage de programmation un langage de programmation Langage : syntaxe STRICTELangage : syntaxe STRICTE Utilisé pour construire les pages WebUtilisé pour construire les pages Web Navigation hypertexte : ancres, liensNavigation hypertexte : ancres, liens Utilise des balisesUtilise des balises Documents exploités par des agents utilisateursDocuments exploités par des agents utilisateurs
Navigateur pour « visualiser » le résultatNavigateur pour « visualiser » le résultat Robots des moteurs de recherche pour indexerRobots des moteurs de recherche pour indexer Automates divers pour traiter les donnéesAutomates divers pour traiter les données
Programmation Web 2012-2013Programmation Web 2012-2013
4403:24:5303:24:53
Bref historique des normesBref historique des normes
WWW Project Proposal (mars 1989)WWW Project Proposal (mars 1989) W3 Consortium (1994) http://www.w3.orgW3 Consortium (1994) http://www.w3.org HTML 1.0 (août 1994)HTML 1.0 (août 1994) HTML 2.0HTML 2.0 (novembre 1995) (novembre 1995) HTML 3.2HTML 3.2 (janvier 1997) (janvier 1997) HTML 4.0HTML 4.0 (avril 1998) (avril 1998) HTML 4.01HTML 4.01 (décembre 1999) (décembre 1999) XHTML 1.0XHTML 1.0 (janvier 2000) (janvier 2000) HTML 5 depuis 2003, depuis 2007 au W3C, HTML 5 depuis 2003, depuis 2007 au W3C,
standard prévu en 2014standard prévu en 2014Programmation Web 2012-2013Programmation Web 2012-2013
5503:24:5303:24:53
Pourquoi apprendre le langage HTML ?Pourquoi apprendre le langage HTML ?
Il existe des éditeurs WYSIWYGIl existe des éditeurs WYSIWYG Adobe GoLiveAdobe GoLive Macromedia Adobe DreamweaverMacromedia Adobe Dreamweaver Microsoft FrontPageMicrosoft FrontPage NetObjects FusionNetObjects Fusion Netscape ComposerNetscape Composer OpenOfficeOpenOffice ……
Pages Web produites dynamiquementPages Web produites dynamiquement Programme produisant du code HTMLProgramme produisant du code HTML VOUS écrivez le programme VOUS écrivez le programme WYSIWYG hors jeu WYSIWYG hors jeu
WWhat hat YYou ou SSee ee IIs s WWhat hat YYou ou
GGetet
Programmation Web 2012-2013Programmation Web 2012-2013
Principe de HTMLPrincipe de HTML
Structuration d’un document texteStructuration d’un document texte Apporter de la structure au documentApporter de la structure au document Apporter de la logique au documentApporter de la logique au document À l’aide de balisesÀ l’aide de balises
Document « simple »Document « simple » Structure et mise en forme sont liéesStructure et mise en forme sont liées
Titre plus gros, numérotation automatiqueTitre plus gros, numérotation automatique Paragraphe = nouvelle ligneParagraphe = nouvelle ligne
Livre = long texteLivre = long texte Contenu du livre = ensemble de chapitres et de paragraphesContenu du livre = ensemble de chapitres et de paragraphes Informations sur le livre ne faisant pas partie intégrante de Informations sur le livre ne faisant pas partie intégrante de
l’histoire = titre, auteur, résumé, année de parution, …l’histoire = titre, auteur, résumé, année de parution, …
6603:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Structurer un document ?Structurer un document ?
7703:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Mettre en forme ?Mettre en forme ?
1- Structurer (HTML)1- Structurer (HTML)
2- A
ppliq
uer u
n st
yle
(CS
S)
2- A
ppliq
uer u
n st
yle
(CS
S)
Structurer le documentStructurer le document
8803:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Titre du documentTitre du document
Titre de niveau 1Titre de niveau 1
Titre de niveau 2Titre de niveau 2
Titre de niveau 3Titre de niveau 3
ParagrapheParagraphe
……
Repérer les structures :Repérer les structures :Marquer leur début/finMarquer leur début/finUtilisation de balisesUtilisation de balises
Appliquer une feuille de styleAppliquer une feuille de style
9903:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Style :Style :Police de base : 8ptPolice de base : 8ptTitre de niveau 1Titre de niveau 1
•Bleu, majusculesBleu, majuscules•Bords haut et basBords haut et bas
ParagraphesParagraphes•JustifierJustifier
Style :Style :Titre de niveau 1Titre de niveau 1
•RougeRougeParagraphesParagraphes
•JustifierJustifier11èreère lettre paragraphe lettre paragraphe
•Gros, gris, italiqueGros, gris, italique
101003:24:5403:24:54
Les grandes lignesLes grandes lignes
Texte ASCII 7 bits Texte ASCII 7 bits (alphabet non accentué + quelques symboles)(alphabet non accentué + quelques symboles)
Retour à la ligne non structurant :Retour à la ligne non structurant :non mis en formenon mis en forme
Espaces (Espaces (sens largesens large) consécutifs = UN espace) consécutifs = UN espace Caractères accentués : représentation Caractères accentués : représentation
spécifiquespécifique Symboles : représentation spécifiqueSymboles : représentation spécifique Balises = structure, pas (Balises = structure, pas (plusplus) mise en forme) mise en forme Mise en forme : feuille de style CSSMise en forme : feuille de style CSS Commentaires : Commentaires : <!-- commentaire --><!-- commentaire -->
Programmation Web 2012-2013Programmation Web 2012-2013
111103:24:5403:24:54
Bref historique des fonctionnalitésBref historique des fonctionnalités
HTMLHTML
2.02.0HTMLHTML
3.23.2HTMLHTML
4.04.0HTMLHTML
4.014.01
Structuration du documentStructuration du document OUIOUI OUIOUI OUIOUI OUIOUI
Mise en forme dans les balisesMise en forme dans les balises OUIOUI OUIOUI NONNON NONNON
Feuilles de style CSSFeuilles de style CSS NONNON NONNON OUIOUI OUIOUI
Feuilles de style CSS2Feuilles de style CSS2 NONNON NONNON NONNON OUIOUI
Interactivité JavaScriptInteractivité JavaScript NONNON NONNON OUIOUI OUIOUI
Séparation du fond et de la formeSéparation du fond et de la forme
Programmation Web 2012-2013Programmation Web 2012-2013
121203:24:5403:24:54
Balises (tags, marqueurs) HTMLBalises (tags, marqueurs) HTML
Texte entouré par Texte entouré par << et et >> (chevrons) (chevrons) Balises insensibles à la casse :Balises insensibles à la casse :
<<BALISEBALISE>> <<balisebalise>> <<BaliseBalise>> <<bAlIsEbAlIsE>>
Ouvrante : Ouvrante : <<balisebalise>> Fermante : Fermante : </</balisebalise>> (éventuellement optionnelle)(éventuellement optionnelle)
Non visibles dans le rendu du navigateurNon visibles dans le rendu du navigateur attributs/options : attributs/options : <<balibali attrattr==""valval"" optopt>>
ÉquivalentÉquivalentmais XHTML mais XHTML minuscules minuscules
Encadrement d'un blocEncadrement d'un bloc
Programmation Web 2012-2013Programmation Web 2012-2013
131303:24:5403:24:54
Utilisation des balisesUtilisation des balises
Utilisation Utilisation CORRECTECORRECTE <<ii>>TexteTexte<<bb>>Texte TexteTexte Texte</</bb></></ii>>
Utilisation Utilisation INCORRECTEINCORRECTE <<ii>>TexteTexte<<bb>>Texte TexteTexte Texte</</ii></></bb>>
Jamais de chevauchement (pile d’états)Jamais de chevauchement (pile d’états)
Programmation Web 2012-2013Programmation Web 2012-2013
141403:24:5403:24:54
Outils de validationOutils de validation
Les spécificationsLes spécifications http://www.w3.org/http://www.w3.org/ HTML 4.01 : http://www.w3.org/TR/html401/HTML 4.01 : http://www.w3.org/TR/html401/ CSS 2.1 : http://www.w3.org/TR/CSS21/CSS 2.1 : http://www.w3.org/TR/CSS21/
Validation HTMLValidation HTML Validateur en ligne : http://validator.w3.org/Validateur en ligne : http://validator.w3.org/ Validateur sur intranet : http://wwwdoc/w3c-validator/Validateur sur intranet : http://wwwdoc/w3c-validator/
Validation CSS :Validation CSS : Validateur en ligne : http://jigsaw.w3.org/css-validator/Validateur en ligne : http://jigsaw.w3.org/css-validator/ Validateur sur intranet : http://wwwdoc/css-validator/Validateur sur intranet : http://wwwdoc/css-validator/
Programmation Web 2012-2013Programmation Web 2012-2013
151503:24:5403:24:54
Document HTMLDocument HTML
Document texte ASCII Document texte ASCII .htm.htm ou ou .html.html Structure de base :Structure de base :
1.1. Information sur la version de HTML utiliséeInformation sur la version de HTML utilisée
2.2. En-tête déclaratifEn-tête déclaratif
3.3. Corps, contenu du documentCorps, contenu du document<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd"><<htmlhtml>> <<headhead>> <<titletitle>>Ma première page WebMa première page Web</</titletitle>> </</headhead>> <<bodybody>> Salut !Salut ! </</bodybody>></</htmlhtml>>
1.1.
2.2.
3.3.
Programmation Web 2012-2013Programmation Web 2012-2013
161603:24:5403:24:54
Document HTMLDocument HTML
Document texte ASCII Document texte ASCII .htm.htm ou ou .html.html Structure de base :Structure de base :
1.1. Information sur la version de HTML utiliséeInformation sur la version de HTML utilisée2.2. En-tête déclaratifEn-tête déclaratif
3.3. Corps, contenu du documentCorps, contenu du document<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd"><<htmlhtml>> <head><head> <title>Ma première page Web</title><title>Ma première page Web</title> </head></head> <body><body> Salut !Salut ! </body></body></</htmlhtml>>
1.1.
2.2.
3.3.
Programmation Web 2012-2013Programmation Web 2012-2013
171703:24:5503:24:55
Structure d’un document HTMLStructure d’un document HTML
SGMLSGML Standard Generalized Markup LanguageStandard Generalized Markup Language Permet de décrire les langages à balisesPermet de décrire les langages à balises
DTDDTD DDocument ocument TType ype DDefinitionefinition Description d’un langage particulierDescription d’un langage particulier Permet à l’agent utilisateur d’interpréter correctement Permet à l’agent utilisateur d’interpréter correctement
le documentle document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd">
Programmation Web 2012-2013Programmation Web 2012-2013
181803:24:5503:24:55
DTD HTML 4.01DTD HTML 4.01
HTML 4.01 StrictHTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 TransitionalHTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 FramesetHTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">"http://www.w3.org/TR/html4/frameset.dtd">
Programmation Web 2012-2013Programmation Web 2012-2013
191903:24:5503:24:55
Document HTMLDocument HTML
Document texte ASCII Document texte ASCII .htm.htm ou ou .html.html Structure de base :Structure de base :
1.1. Information sur la version de HTML utiliséeInformation sur la version de HTML utilisée
2.2.En-tête déclaratifEn-tête déclaratif3.3. Corps, contenu du documentCorps, contenu du document<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""http://www.w3.org/TR/html4/strict.dtd"http://www.w3.org/TR/html4/strict.dtd">><html><html> <<headhead>> <<titletitle>>Ma première page WebMa première page Web</</titletitle>> </</headhead>> <body><body> Salut !Salut ! </body></body></html></html>
1.1.
2.2.
3.3.
Programmation Web 2012-2013Programmation Web 2012-2013
202003:24:5503:24:55
Structure et contenu de l’en-têteStructure et contenu de l’en-tête
Informations sur le documentInformations sur le document Titre du document (obligatoire)Titre du document (obligatoire)
<<titletitle>> … … </</titletitle>>
Méta donnéesMéta données<<meta meta namename==""nomnom" " contentcontent==""valeurvaleur"">>
<<metameta name name=="Author" "Author" contentcontent=="J. Cutrona""J. Cutrona">>
<<metameta name name=="keywords" "keywords" langlang=="fr" "fr" contentcontent=="cours, HTML""cours, HTML">>
<<metameta name name=="keywords" "keywords" langlang=="en" "en" contentcontent=="course, HTML""course, HTML">>
<<metameta name name=="copyright" "copyright" contentcontent=="2005 IUT Reims""2005 IUT Reims">>
Autres informationsAutres informations StylesStyles ScriptsScripts
Programmation Web 2012-2013Programmation Web 2012-2013
212103:24:5503:24:55
Table ASCIITable ASCIICarCar<-><->CodeCode
(nul) 0(nul) 0
(soh) 1(soh) 1
(stx) 2(stx) 2
(etx) 3(etx) 3
(eot) 4(eot) 4
(enq) 5(enq) 5
(ack) 6(ack) 6
(bel) 7(bel) 7
(bs) 8(bs) 8
(ht) 9(ht) 9
(nl) 10(nl) 10
(vt) 11(vt) 11
(np) 12(np) 12
(cr) 13(cr) 13
(so) 14(so) 14
(si) 15(si) 15
(dle) 16(dle) 16
(dc1) 17(dc1) 17
(dc2) 18(dc2) 18
CarCar<-><->CodeCode(dc3) 19(dc3) 19
(dc4) 20(dc4) 20
(nak) 21(nak) 21
(syn) 22(syn) 22
(etb) 23(etb) 23
(can) 24(can) 24
(em) 25(em) 25
(sub) 26(sub) 26
(esc) 27(esc) 27
(fs) 28(fs) 28
(gs) 29(gs) 29
(rs) 30(rs) 30
(us) 31(us) 31
(sp) 32(sp) 32
! 33! 33
" 34" 34
# 35# 35
$ 36$ 36
% 37% 37
CarCar<-><->CodeCode
& 38& 38
' 39' 39
( 40( 40
) 41) 41
* 42* 42
+ 43+ 43
, 44, 44
- 45- 45
. 46. 46
/ 47/ 47
0 480 48
1 491 49
2 502 50
3 513 51
4 524 52
5 535 53
6 546 54
7 557 55
8 568 56
CarCar<-><->CodeCode
9 579 57
: 58: 58
; 59; 59
< 60< 60
= 61= 61
> 62> 62
? 63? 63
@ 64@ 64
A 65A 65
B 66B 66
C 67C 67
D 68D 68
E 69E 69
F 70F 70
G 71G 71
H 72H 72
I 73I 73
J 74J 74
K 75K 75
CarCar<-><->CodeCode
L 76L 76
M 77M 77
N 78N 78
O 79O 79
P 80P 80
Q 81Q 81
R 82R 82
S 83S 83
T 84T 84
U 85U 85
V 86V 86
W 87W 87
X 88X 88
Y 89Y 89
Z 90Z 90
[ 91[ 91
\ 92\ 92
] 93] 93
^ 94^ 94
CarCar<-><->CodeCode
_ 95_ 95
` 96` 96
a 97a 97
b 98b 98
c 99c 99
d 100d 100
e 101e 101
f 102f 102
g 103g 103
h 104h 104
i 105i 105
j 106j 106
k 107k 107
l 108l 108
m 109m 109
n 110n 110
o 111o 111
p 112p 112
q 113q 113
CarCar<-><->CodeCode
r 114r 114
s 115s 115
t 116t 116
u 117u 117
v 118v 118
w 119w 119
x 120x 120
y 121y 121
z 122z 122
{ 123{ 123
| 124| 124
} 125} 125
~ 126~ 126
(del) 127(del) 127
Programmation Web 2012-2013Programmation Web 2012-2013
222203:24:5503:24:55
Entités HTML (dans Entités HTML (dans <<bodybody>>))
Représentation spécifique desReprésentation spécifique des SymbolesSymboles Caractères accentuésCaractères accentués
Absents de la table ASCIIAbsents de la table ASCII donc composition donc composition Forme générale des entités HTMLForme générale des entités HTML
&&codecode;;
Quelques exemplesQuelques exemples éé "é" "é" é é " "" " espace insécable espace insécable << "<""<" < < && "&" "&" & &
Programmation Web 2012-2013Programmation Web 2012-2013
Entités HTML : lisibilité des sourcesEntités HTML : lisibilité des sources
Exemple de texte français :Exemple de texte français :
Cet été était décevant à cause de la météo Cet été était décevant à cause de la météo exécrable de cette contrée éloignée.exécrable de cette contrée éloignée.
Le même texte utilisant les entités HTML :Le même texte utilisant les entités HTML :
Cet été était Cet été était décevant à cause de la décevant à cause de la météo exécrable de cette météo exécrable de cette contrée éloignéecontrée éloignée
232303:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
242403:24:5503:24:55
Tables de caractèresTables de caractères
Définir la table des caractères de la page HTMLDéfinir la table des caractères de la page HTML Si non ASCIISi non ASCII Sera utilisée par l’agent utilisateur (si disponible…)Sera utilisée par l’agent utilisateur (si disponible…) Permet de limiter les entités HTML (source : lisibilité)Permet de limiter les entités HTML (source : lisibilité)
Balise META à placer dans Balise META à placer dans <<headhead>> Table de caractères "Europe de l'Ouest« (latin1)Table de caractères "Europe de l'Ouest« (latin1)
<meta http-equiv="content-type" <meta http-equiv="content-type" content="text/html; charset=content="text/html; charset=ISO-8859-ISO-8859-11">">
Table de caractères UNICODETable de caractères UNICODE
<meta http-equiv="content-type" <meta http-equiv="content-type" content="text/html; charset=content="text/html; charset=UTF-8UTF-8">">
Programmation Web 2012-2013Programmation Web 2012-2013
252503:24:5503:24:55
Document HTMLDocument HTML
Document texte ASCII Document texte ASCII .htm.htm ou ou .html.html Structure de base :Structure de base :
1.1. Information sur la version de HTML utiliséeInformation sur la version de HTML utilisée
2.2. En-tête déclaratifEn-tête déclaratif
3.3.Corps, contenu du documentCorps, contenu du document<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd"><html><html> <head><head> <title>Ma première page Web</title><title>Ma première page Web</title> </head></head> <<bodybody>> Salut !Salut ! </</bodybody>></html></html>
1.1.
2.2.
3.3.
Programmation Web 2012-2013Programmation Web 2012-2013
262603:24:5503:24:55
Utilisation et utilité des balises dans Utilisation et utilité des balises dans <<bodybody>>
Initialement : Initialement : mise en pagemise en page du document du document Police, couleur, taille, alignement du texte, …Police, couleur, taille, alignement du texte, …
Maintenant : Maintenant : structuration logiquestructuration logique du document du document Titres de différents niveauxTitres de différents niveaux Paragraphes, citation, exemple, code, …Paragraphes, citation, exemple, code, … ListesListes Tableaux, …Tableaux, …
Si le Si le documentdocument est est correctement structurécorrectement structuré, , chaque élément structurel pourra est chaque élément structurel pourra est mis en mis en forme viaforme via une feuille de style une feuille de style CSSCSS
Programmation Web 2012-2013Programmation Web 2012-2013
272703:24:5503:24:55
Présentation de la source HTMLPrésentation de la source HTML
<<divdiv>> textetexte <<ii>> textetexte <<bb>>textetextetextetextetextetextetextetextetextetexte</</bb>> </</ii>> <<uu>> textetextetextetextetextetexte </</uu>> textetexte</</divdiv>>
<<divdiv>>textetexte<<ii>>textetexte<<bb>>textetextetextetextetexttextetextetextetextetextee</</bb></></ii><><uu>>textetextetextetextetextetexte</</uu>>textetexte</</divdiv>>
Équivalentes ?Équivalentes ? Correctes ?Correctes ? Lisibles ?Lisibles ?Identiques ?Identiques ?
Programmation Web 2012-2013Programmation Web 2012-2013
282803:24:5503:24:55
Mise en page StructurationMise en page Structuration
Titres (6 niveaux de hiérarchie) :Titres (6 niveaux de hiérarchie) : <<h1h1> > …… </ </h1h1>> <<h2h2> > …… </ </h2h2>> <<h3h3> > …… </ </h3h3>> <<h4h4> > …… </ </h4h4>> <<h5h5> > …… </ </h5h5>> <<h6h6> > …… </ </h6h6>>
ParagraphesParagraphes <<pp> > …… [[</</pp>>]]
Saut de ligne :Saut de ligne : <<brbr>>
Programmation Web 2012-2013Programmation Web 2012-2013
292903:24:5503:24:55
Mise en page StructurationMise en page Structuration
Ligne de séparation horizontale :Ligne de séparation horizontale : <<hrhr>>
Texte préformaté (brut) :Texte préformaté (brut) : <<prepre> > …… </ </prepre>> Retours à la ligne et espaces multiples apparaissentRetours à la ligne et espaces multiples apparaissent
Groupe « mode en ligne » Groupe « mode en ligne » structuration pure structuration pure <<spanspan> > …… </ </spanspan>>
Groupe « mode bloc » Groupe « mode bloc » structuration pure structuration pure <<divdiv> > …… </ </divdiv>>
Programmation Web 2012-2013Programmation Web 2012-2013
303003:24:5603:24:56
Mise en forme StructurationMise en forme Structuration
Styles physiques logiquesStyles physiques logiques Gras :Gras : <<bb> > …… </ </bb>> Italique :Italique : <<ii> > …… </ </ii>> Souligné :Souligné : <<uu> > …… </ </uu>>
Styles logiquesStyles logiques Citation :Citation : <<citecite> > …… </ </citecite>> Code :Code : <<codecode> > …… </ </codecode>> Mise en valeur :Mise en valeur : <<emem> > …… </ </emem>> Mise en valeur :Mise en valeur : <<strongstrong> > …… </ </strongstrong>> Exemple :Exemple : <<sampsamp> > …… </ </sampsamp>> ……
Programmation Web 2012-2013Programmation Web 2012-2013
313103:24:5603:24:56
Liste de définitionsListe de définitions
Liste : Liste : <<dldl> > …… </ </dldl>> Élément : Élément : <<dtdt> > …… [[</</dtdt>>]] Définition : Définition : <<dddd> > …… [[</</dddd>>]]
<<dldl>> <<dtdt>>OursOurs</</dtdt>> <<dddd>>Les ours sont de grands mammifères Les ours sont de grands mammifères plantigrades de l'ordre des Carnivores, famille plantigrades de l'ordre des Carnivores, famille des Ursidés, sous-famille des Ursinés.des Ursidés, sous-famille des Ursinés. </</dddd>> <<dtdt>>ChèvreChèvre <<dddd>>La chèvre est un mammifère herbivore et La chèvre est un mammifère herbivore et ruminant, appartenant à la famille des bovidés, ruminant, appartenant à la famille des bovidés, sous-famille des caprinés ou caprins.sous-famille des caprinés ou caprins.</</dldl>> <!-- source : http://fr.wikipedia.org --><!-- source : http://fr.wikipedia.org -->
Programmation Web 2012-2013Programmation Web 2012-2013
323203:24:5603:24:56
Liste non numérotéeListe non numérotée
Liste : Liste : <<ulul> > …… </ </ulul>> Élément : Élément : <<lili> > …… [[</</lili>>]]
Liste des courses :Liste des courses :<<ulul>> <<lili>>BeurreBeurre</</lili>> <<lili>>SucreSucre</</lili>> <<lili>>FarineFarine</</lili>> <<lili>>OeufsOeufs <<lili>>ConfitureConfiture</</ulul>>
Programmation Web 2012-2013Programmation Web 2012-2013
333303:24:5603:24:56
Liste numérotéeListe numérotée
Liste : Liste : <<olol> > …… </ </olol>> Élément : Élément : <<lili> > …… [[</</lili>>]]
Liste des courses :Liste des courses :<<olol>> <<lili>>BeurreBeurre</</lili>> <<lili>>SucreSucre</</lili>> <<lili>>FarineFarine</</lili>> <<lili>>OeufsOeufs <<lili>>ConfitureConfiture</</olol>>
Programmation Web 2012-2013Programmation Web 2012-2013
343403:24:5603:24:56
TableauxTableaux
Tableau : Tableau : <<tabletable> > …… </ </tabletable>> Ligne : Ligne : <<trtr> > …… [[</</trtr>>]] Cellule : Cellule : <<tdtd> > …… [[</</tdtd>>]] Cellule d’en-tête : Cellule d’en-tête : <<thth> > …… [[</</thth>>]] Colonnes = nombre maxi de Colonnes = nombre maxi de <<tdtd>> par par <<trtr>> <<tabletable>> <<trtr> <> <tdtd>>11</</tdtd> <> <tdtd>>22</</tdtd> </> </trtr>> <<trtr> <> <tdtd>>33</</tdtd> <> <tdtd>>44</</tdtd> > <<tdtd>>55</</tdtd>> </</trtr>></</tabletable>>
<<tabletable>> <<trtr> <> <tdtd>>11 < <tdtd>>22 <<trtr> <> <tdtd>>33 < <tdtd>>4 4 <<tdtd>>55</</tabletable>>
Équivalent au précédentÉquivalent au précédent
Programmation Web 2012-2013Programmation Web 2012-2013
353503:24:5603:24:56
Tableaux « avancés »Tableaux « avancés »
Extension de cellule sur Extension de cellule sur CC colonnes : colonnes : <<td td colspancolspan==""CC"">>
<<tabletable>> <<trtr> <> <tdtd>>11 < <td td colspancolspan==22>>2 2 <!-- suite --><!-- suite --> <<trtr> <> <tdtd>>33 < <tdtd>>4 4 <<tdtd>>55</</tabletable>>
Programmation Web 2012-2013Programmation Web 2012-2013
363603:24:5603:24:56
Tableaux « avancés »Tableaux « avancés »
Extension de cellule sur Extension de cellule sur LL lignes : lignes : <<td td rowspanrowspan==""LL"">>
<<tabletable>> <<trtr> <> <tdtd>>11 < <td td rowspanrowspan==22>>22 <<trtr> <> <tdtd>>33 <!-- suite --><!-- suite --> < <tdtd>>4 4 <<tdtd>>55</</tabletable>>
Programmation Web 2012-2013Programmation Web 2012-2013
373703:24:5603:24:56
Tableaux « avancés »Tableaux « avancés »
Groupe de lignes d’en-têteGroupe de lignes d’en-tête <<theadthead> > …… [[</</theadthead>>]]
Groupe de lignes de corps (plusieurs groupes)Groupe de lignes de corps (plusieurs groupes) <<tbodytbody> > …… [[</</tbodytbody>>]]
Groupe de lignes de bas de tableauGroupe de lignes de bas de tableau <<tfoottfoot> > …… [[</</tfoottfoot>>]]
Programmation Web 2012-2013Programmation Web 2012-2013
Eléments de regroupementEléments de regroupement
Mécanisme générique de structuration du Mécanisme générique de structuration du documentdocument
Utilisation conjointe avec les feuilles de styleUtilisation conjointe avec les feuilles de style
Groupe en ligneGroupe en ligne <<spanspan> > …… </ </spanspan>>
Groupe en blocGroupe en bloc <<divdiv> > …… </ </divdiv>>
383803:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
393903:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
Classe, identification et descriptionClasse, identification et description
Affecter une balise à une classeAffecter une balise à une classe Attribut Attribut classclass <<p p classclass==""ma_classema_classe"">>
Donner un identifiant à une baliseDonner un identifiant à une balise Attribut Attribut idid Identifiant doit être unique (charge du concepteur)Identifiant doit être unique (charge du concepteur) <<p p idid==""mon_id_uniquemon_id_unique"">>
Décrire un élémentDécrire un élément Attribut Attribut titletitle pour la plupart des éléments HTML pour la plupart des éléments HTML Texte affiché sous forme d’info-bulle (tooltip)Texte affiché sous forme d’info-bulle (tooltip)
Sous-groupe de Sous-groupe de l'ensemble des l'ensemble des balises balises <<pp>>
Une balise Une balise <<pp>> repérée de façon repérée de façon
uniqueunique
404003:24:5603:24:56
Liens et ancresLiens et ancres
Base de la navigation hypertexteBase de la navigation hypertexte
Lien (Lien (ancre source d’unancre source d’un) : zone active cliquable) : zone active cliquable <<aa hrefhref==""URLURL"">>support du liensupport du lien</</aa>> Support : texte, image, contenus entre Support : texte, image, contenus entre <<aa>> et et </</aa>> URL : késako ?URL : késako ?
Ancre (nommée) : point cibleAncre (nommée) : point cible <<aa namename==""nomnom"">>point d’ancragepoint d’ancrage</</aa>> namename= = nom unique (à la charge du concepteur)nom unique (à la charge du concepteur) Comment cibler l’ancre dans un lien ? Comment cibler l’ancre dans un lien ? URL URL
Programmation Web 2012-2013Programmation Web 2012-2013
414103:24:5603:24:56
URL : Universal Resource LocatorURL : Universal Resource Locator
Décrire l’adresse d’une ressource WebDécrire l’adresse d’une ressource Web1.1. Mécanisme d’accèsMécanisme d’accès
2.2. Equipement hébergeant la ressourceEquipement hébergeant la ressource
3.3. La ressource et son cheminLa ressource et son chemin
http://www.google.fr/index.htmlhttp://www.google.fr/index.html
1.1. 2.2. 3.3.
http://http://ftp://ftp://mailto:mailto:……
www.google.frwww.google.fr66.249.85.9966.249.85.9911236365791123636579……
/index.html/index.html/im/image.png/im/image.png/linux/linux……
CasseCasse
EncodageEncodage
Programmation Web 2012-2013Programmation Web 2012-2013
424203:24:5603:24:56
Marque de fragmentMarque de fragment
Faire référence à un emplacement repéré dans Faire référence à un emplacement repéré dans une ressourceune ressource
Atteindre une ancre…Atteindre une ancre…<<h1h1><><aa namename==""x1x1"">>txttxt</</aa></></h1h1>>
……ou atteindre un élément identifiéou atteindre un élément identifié<<h1h1 idid==""x1x1"">>txttxt</</h1h1>>
URL se terminant par URL se terminant par ##nom_de_l_ancrenom_de_l_ancre
http://www.w3.org/TR/html4/…http://www.w3.org/TR/html4/…
intro/intro.html#fragment-uriintro/intro.html#fragment-uri
Programmation Web 2012-2013Programmation Web 2012-2013
434303:24:5603:24:56
URL relativeURL relative
Ne contient pas de mécanisme d’accèsNe contient pas de mécanisme d’accès Ne contient pas de nom de machineNe contient pas de nom de machine Fait référence au document courant, à la machine Fait référence au document courant, à la machine
courantecourante Peut contenir un chemin relatif (Peut contenir un chemin relatif (....)) Peut contenir une marque de fragmentPeut contenir une marque de fragment ExemplesExemples
"/accueil.html""/accueil.html"
"../../image.jpg""../../image.jpg"
"#ancre1""#ancre1"
"../../accueil/accueil.html#ancre2""../../accueil/accueil.html#ancre2"Programmation Web 2012-2013Programmation Web 2012-2013
Fenêtre cible d’un lienFenêtre cible d’un lien
Lien (Lien (ancre source d’unancre source d’un) : zone active cliquable) : zone active cliquable
<<aa hrefhref==""URLURL"" targettarget=="la_cible""la_cible">>supportsupport</</aa>>
Les valeurs possibles de Les valeurs possibles de targettarget sont : sont : _blank_blank une nouvelle fenêtre une nouvelle fenêtre _parent_parent la fenêtre parente la fenêtre parente _self_self la fenêtre elle-même la fenêtre elle-même _top_top la fenêtre racine des fenêtre parentes la fenêtre racine des fenêtre parentes un_identificateurun_identificateur une fenêtre nommée une fenêtre nommée
444403:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Mise en ligne des pages persoMise en ligne des pages perso
Serveurs virtuels du Département InfoServeurs virtuels du Département Infohttp://login_de_l_utilisateurhttp://login_de_l_utilisateurExemple : Exemple : http://cutron01http://cutron01Enseignants ont des alias : Enseignants ont des alias : http://cutronahttp://cutrona
Correspondance avec vos fichiersCorrespondance avec vos fichiers
454503:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
http://cutrona/http://cutrona/
$HOME/public_html/$HOME/public_html/
progwebS1/html/index.phpprogwebS1/html/index.php
Mise en place de vos pages persoMise en place de vos pages perso
Mécanisme d’accès aux fichiersMécanisme d’accès aux fichiers Serveur Web lit le fichier et le transmet au navigateurServeur Web lit le fichier et le transmet au navigateur Les droits sont à donner à Les droits sont à donner à apache/apacheapache/apache
Et quand l’URL désigne un répertoire ?Et quand l’URL désigne un répertoire ? Exemple : Exemple : http://cutrona/http://cutrona/ Exemple : Exemple : http://cutrona/progwebS1/http://cutrona/progwebS1/
Quel est le fichier demandé au serveur ?Quel est le fichier demandé au serveur ? A priori par défaut habituel sur apacheA priori par défaut habituel sur apache HTML : index.htmlHTML : index.html PHP : index.phpPHP : index.php
464603:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
474703:24:5703:24:57
ImageImage
Ajouter une image au sein du documentAjouter une image au sein du document
<<imgimg [[widthwidth==""ww""]] [[heightheight==""hh""]] srcsrc==""URLURL" " altalt==""texte alternatiftexte alternatif"">>
srcsrc URI permettant d’atteindre l’imageURI permettant d’atteindre l’image
widthwidth et et heightheight permettent à l’agent de prévoir un emplacement avant permettent à l’agent de prévoir un emplacement avant
d’avoir analysé l’imaged’avoir analysé l’image permettent au concepteur de redimensionner l’imagepermettent au concepteur de redimensionner l’image
altalt Texte alternatif si l’image est indisponible/corrompueTexte alternatif si l’image est indisponible/corrompue
Programmation Web 2012-2013Programmation Web 2012-2013
Importance de fixer la taille de l’imageImportance de fixer la taille de l’image
Situation normaleSituation normale
484803:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Importance de fixer la taille de l’imageImportance de fixer la taille de l’image
Image absente SANS taille définieImage absente SANS taille définie
494903:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Importance de fixer la taille de l’imageImportance de fixer la taille de l’image
Image absente / chargement AVEC taille définieImage absente / chargement AVEC taille définie
505003:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
515103:24:5703:24:57
Qu'est-ce qu'une imageQu'est-ce qu'une image
Description naïve : grille de carrés de couleurDescription naïve : grille de carrés de couleur
PixelPixel
Programmation Web 2012-2013Programmation Web 2012-2013
525203:24:5703:24:57
Images en niveaux de grisImages en niveaux de gris
Images en 256 nuances de grisImages en 256 nuances de gris 1 pixel = 1 octet1 pixel = 1 octet Valeur de l'octet = intensité lumineuseValeur de l'octet = intensité lumineuse 0 = noir0 = noir 255 = blanc255 = blanc
Programmation Web 2012-2013Programmation Web 2012-2013
535303:24:5703:24:57
Représentation de la couleurReprésentation de la couleur
Principe de la synthèse additive des couleursPrincipe de la synthèse additive des couleurs En utilisant 3 couleurs, on peut les former toutesEn utilisant 3 couleurs, on peut les former toutes Rouge, Vert, Bleu en quantité variableRouge, Vert, Bleu en quantité variable
Représentation informatique : quantité = entierReprésentation informatique : quantité = entier Habituellement, 1 octet, soit 256 niveauxHabituellement, 1 octet, soit 256 niveaux Donc, 1 couleur = 3 octets (1 R, 1V, 1B)Donc, 1 couleur = 3 octets (1 R, 1V, 1B)
Programmation Web 2012-2013Programmation Web 2012-2013
545403:24:5803:24:58
Représentation de la couleurReprésentation de la couleur
Images Images vraies couleursvraies couleurs : : ditesdites 24 bits (3 24 bits (3×1octet = 3×8bits)×1octet = 3×8bits) 16,7 millions de couleurs (25616,7 millions de couleurs (256××256256××256=16.777.216)256=16.777.216) Chaque pixel = triplet (R,V,B)Chaque pixel = triplet (R,V,B)
Images Images vraies couleurs + canal alphavraies couleurs + canal alpha : : ditesdites 32 bits, pixel = quadruplet (R,V,B,A) 32 bits, pixel = quadruplet (R,V,B,A)
Images Images couleurs indexéescouleurs indexées : : ditesdites 8 bits (1 octet) 8 bits (1 octet) 2 à 256 couleurs2 à 256 couleurs Table de 2 à 256 triplets (R,V,B)Table de 2 à 256 triplets (R,V,B) Chaque pixel = 1 index (octet) de la table de couleursChaque pixel = 1 index (octet) de la table de couleurs
Programmation Web 2012-2013Programmation Web 2012-2013
555503:24:5803:24:58
Images "vraies couleurs"Images "vraies couleurs"
++ ++ ==
rougerouge vertvert bleubleu
Programmation Web 2012-2013Programmation Web 2012-2013
565603:24:5803:24:58
Images couleurs indexéesImages couleurs indexées00 00 00 00 00 11 11 11 11 11 00 00 00 00 00
00 00 00 11 11 2 2 22 22 22 22 11 11 00 00 00
00 00 11 22 22 22 22 22 22 22 22 22 11 00 00
00 11 22 22 22 22 22 22 22 22 22 22 22 11 00
00 11 22 22 22 22 22 22 22 22 22 22 22 11 00
11 22 22 22 11 11 22 22 22 11 11 22 22 22 11
11 22 22 22 11 11 22 22 22 11 11 22 22 22 11
11 22 22 22 22 22 22 22 22 22 22 22 22 22 11
11 22 22 22 22 22 22 22 22 22 22 22 22 22 11
11 22 22 22 11 22 22 22 22 22 11 22 22 22 11
00 11 22 22 22 11 11 11 11 11 22 22 22 11 00
00 11 22 22 22 22 22 22 22 22 22 22 22 11 00
00 00 11 22 22 22 22 22 22 22 22 22 11 00 00
00 00 00 11 11 22 22 22 22 22 11 11 00 00 00
00 00 00 00 00 11 11 11 11 11 00 00 00 00 00
indexindex rougerouge vertvert bleubleu
00 255255 255255 255255
11 00 00 00
22 255255 255255 00
00 00 00 00 00 11 11 11 11 11 00 00 00 00 00
00 00 00 11 11 2 2 22 22 22 22 11 11 00 00 00
00 00 11 22 22 22 22 22 22 22 22 22 11 00 00
00 11 22 22 22 22 22 22 22 22 22 22 22 11 00
00 11 22 22 22 22 22 22 22 22 22 22 22 11 00
11 22 22 22 11 11 22 22 22 11 11 22 22 22 11
11 22 22 22 11 11 22 22 22 11 11 22 22 22 11
11 22 22 22 22 22 22 22 22 22 22 22 22 22 11
11 22 22 22 22 22 22 22 22 22 22 22 22 22 11
11 22 22 22 11 22 22 22 22 22 11 22 22 22 11
00 11 22 22 22 11 11 11 11 11 22 22 22 11 00
00 11 22 22 22 22 22 22 22 22 22 22 22 11 00
00 00 11 22 22 22 22 22 22 22 22 22 11 00 00
00 00 00 11 11 22 22 22 22 22 11 11 00 00 00
00 00 00 00 00 11 11 11 11 11 00 00 00 00 00
indexindex rougerouge vertvert bleubleu
00 255255 255255 255255
11 00 00 00
22 255255 255255 00
Programmation Web 2012-2013Programmation Web 2012-2013
575703:24:5803:24:58
Format d’images pour le WebFormat d’images pour le Web
GIF (Compression sans perte)GIF (Compression sans perte) 2 à 256 couleurs2 à 256 couleurs Animation possibleAnimation possible TransparenceTransparence
JPG (Compression avec perte paramétrable)JPG (Compression avec perte paramétrable) 16 millions de couleurs16 millions de couleurs Taux de compression élevéTaux de compression élevé
PNG (Compression sans perte)PNG (Compression sans perte) 2 à 256 couleurs ou 16 millions de couleurs2 à 256 couleurs ou 16 millions de couleurs Canal alphaCanal alpha Format libreFormat libre
Textes, tracés, figures,Textes, tracés, figures,images à contours précisimages à contours précis
Images naturelles :Images naturelles :photographiesphotographies
Tout, à condition de bienTout, à condition de bienchoisir le nombre de couleurschoisir le nombre de couleurs
IEIE
Programmation Web 2012-2013Programmation Web 2012-2013
585803:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
TIFF (image NON Web de référence)TIFF (image NON Web de référence)
192 Ko192 Ko256 px 256 px × 256 px × 3 octets× 256 px × 3 octets= = 196608 octets196608 octets= 192 Koctets= 192 Koctets
Programmation Web 2012-2013Programmation Web 2012-2013
595903:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
GIF 256 couleursGIF 256 couleurs
9,59 Ko9,59 Ko1:201:20
Programmation Web 2012-2013Programmation Web 2012-2013
606003:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
GIF 64 couleursGIF 64 couleurs
3,96 Ko3,96 Ko1:481:48
Programmation Web 2012-2013Programmation Web 2012-2013
616103:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
JPEG qualité 100%JPEG qualité 100%
11,6 Ko11,6 Ko1:171:17
Programmation Web 2012-2013Programmation Web 2012-2013
626203:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
JPEG qualité 50%JPEG qualité 50%
3,77 Ko3,77 Ko1:511:51
Programmation Web 2012-2013Programmation Web 2012-2013
636303:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
JPEG qualité 5%JPEG qualité 5%
1,69 Ko1,69 Ko1:1441:144
Programmation Web 2012-2013Programmation Web 2012-2013
646403:24:5803:24:58
Formats d’images pour le WebFormats d’images pour le Web
PNG 16 millions de couleursPNG 16 millions de couleurs
8,48 Ko8,48 Ko1:231:23
Programmation Web 2012-2013Programmation Web 2012-2013
656503:24:5903:24:59
Formats d’images pour le Web : BilanFormats d’images pour le Web : Bilan
FormatFormat CompressionCompression Effets visibles liés au formatEffets visibles liés au format
GIF 256 c.GIF 256 c. 1:201:20 Légère perte de couleursLégère perte de couleurs
GIF 64 c.GIF 64 c. 1:481:48 Perte de couleursPerte de couleurs
JPEG 100%JPEG 100% 1:171:17 Léger flouLéger flou
JPEG 50%JPEG 50% 1:511:51 Distorsions importantesDistorsions importantes
JPEG 5%JPEG 5% 1:1441:144 Distorsions très importantesDistorsions très importantes
PNG 16M c.PNG 16M c. 1:231:23 AucunAucun
Programmation Web 2012-2013Programmation Web 2012-2013
666603:24:5903:24:59
Images cliquablesImages cliquables
Carte de zones cliquables sur une imageCarte de zones cliquables sur une image
<<imgimg srcsrc==""URL1URL1" " usemapusemap=="#"#nomnom" " altalt==……>>
<<mapmap namename==""nomnom"">>
<<areaarea hrefhref==""URL2URL2" " shapeshape==""formeforme"" coordscoords==""coordonnées_en_pixelscoordonnées_en_pixels"" altalt==""texte_alternatiftexte_alternatif"">>
[[<<area …area …>>]]
</</mapmap>> namename== nom de la carte, repris dans nom de la carte, repris dans usemapusemap==
Programmation Web 2012-2013Programmation Web 2012-2013
676703:24:5903:24:59
Images cliquables : formes de zonesImages cliquables : formes de zones
shapeshape==""formeforme"" rectrect : rectangle : rectangle
coordscoords==""coin_sup_gauche, coin_inf_droitcoin_sup_gauche, coin_inf_droit" "
circlecircle : cercle : cerclecoordscoords==""centre, rayoncentre, rayon""
polypoly : polygone : polygonecoordscoords==""point_1, point_2, point_3, …point_1, point_2, point_3, …" "
defaultdefault : toute la zone : toute la zone CoordonnéesCoordonnées
Coordonnées d’un pointCoordonnées d’un pointdans l’espace image (pixels)dans l’espace image (pixels)
xx
yy
IEIE
Programmation Web 2012-2013Programmation Web 2012-2013
686803:24:5903:24:59
Images cliquables : exempleImages cliquables : exemple
<<imgimg srcsrc=="images/imagemap.png""images/imagemap.png" usemapusemap=="#carte""#carte">>
<<mapmap namename=="carte""carte">>
<<areaarea hrefhref=="…""…" shapeshape=="poly" "poly"
coordscoords=="200,65,240,150,190,150,200,170,65,240""200,65,240,150,190,150,200,170,65,240">>
<<areaarea hrefhref=="…""…" shapeshape=="rect""rect" coordscoords=="25,25,75,150""25,25,75,150">>
<<areaarea hrefhref=="…""…" shapeshape=="circle""circle" coordscoords=="125,75,40""125,75,40">>
</</mapmap>> xx
yy
ExempleExemple
Programmation Web 2012-2013Programmation Web 2012-2013
696903:24:5903:24:59
Cadres (frames)Cadres (frames)
Déprécié mais intéressant !Déprécié mais intéressant ! Diviser la fenêtre du navigateur en cadresDiviser la fenêtre du navigateur en cadres Utiliser la DTD HTML 4.01 FramesetUtiliser la DTD HTML 4.01 Frameset
<<framesetframeset rowsrows==""listeliste"">> … … </</framesetframeset>>
<<framesetframeset colscols==""listeliste"">> … … </</framesetframeset>> Liste : espacements des colonnes ou des lignesListe : espacements des colonnes ou des lignes
en pixels : en pixels : 30, 30, en % : en % : 20%, 20%, ce qu’il reste : ce qu’il reste : **
<<framesetframeset>> peut contenir peut contenir <<framesetframeset>> <<frameframe>> <<noframesnoframes>>
Programmation Web 2012-2013Programmation Web 2012-2013
707003:24:5903:24:59
Cadres (frames)Cadres (frames)
Comment définir ce qui doit être affichéComment définir ce qui doit être affichédans les cadres ?dans les cadres ?
<<frameframe namename==""nomnom"" srcsrc==""URLURL"">> namename==
Nom du cadre / de la fenêtreNom du cadre / de la fenêtre Utilisé pour qu’il soit la cible de liens :Utilisé pour qu’il soit la cible de liens : <<aa hrefhref==""URIURI"" targettarget==""nomnom""> > … … </</aa>>
srcsrc== URL de la page à afficher dans le cadreURL de la page à afficher dans le cadre
Programmation Web 2012-2013Programmation Web 2012-2013
717103:24:5903:24:59
Cadres : support ?Cadres : support ?
Si l’agent ne supporte pas les cadres ?Si l’agent ne supporte pas les cadres ? Les robots ne supportent pas les cadresLes robots ne supportent pas les cadres
<<noframesnoframes>> … … </</noframesnoframes>> Ce qui sera affiché dans les résultats des moteurs Ce qui sera affiché dans les résultats des moteurs
de recherchede recherche
Programmation Web 2012-2013Programmation Web 2012-2013
727203:24:5903:24:59
Cadres : exempleCadres : exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">"http://www.w3.org/TR/html4/frameset.dtd">
<<htmlhtml>>
<<headhead>>
<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">>
<<titletitle>>Cadre principalCadre principal</</titletitle>>
</</headhead>>
<<framesetframeset colscols=="200,*""200,*">>
<<frameframe namename=="menu""menu" srcsrc=="menu.html""menu.html">>
<<framesetframeset rowsrows=="30%,*""30%,*">>
<<frameframe namename=="titre""titre" srcsrc=="titre.html""titre.html">>
<<frameframe namename=="principal""principal" srcsrc=="principal.html""principal.html">>
</</framesetframeset>>
<<noframesnoframes>>
Texte pour les moteurs de rechercheTexte pour les moteurs de recherche
</</noframesnoframes>>
</</framesetframeset>>
</</htmlhtml>>
2 colonnes2 colonnes
2 lignes2 lignes
Programmation Web 2012-2013Programmation Web 2012-2013
737303:24:5903:24:59
Cadres : exempleCadres : exemple
<<framesetframeset colscols=="200,*""200,*">>
<<frameframe namename=="menu""menu" srcsrc=="menu.html""menu.html">>
<<framesetframeset rowsrows=="30%,*""30%,*">>
<<frameframe namename=="titre""titre" srcsrc=="titre.html""titre.html">>
<<frameframe namename=="principal""principal" srcsrc=="principal.html""principal.html">>
</</framesetframeset>>
</</framesetframeset>>
200px200px
30%
30%
Programmation Web 2012-2013Programmation Web 2012-2013
747403:24:5903:24:59
Cadre en mode ligne (iframe)Cadre en mode ligne (iframe)
Permet de définir un cadre en mode ligne et d’y Permet de définir un cadre en mode ligne et d’y charger un documentcharger un document
Balise :Balise :
<<iframeiframe widthwidth==""largeurlargeur""
heightheight==""hauteurhauteur" "
srcsrc==""url_pageurl_page" "
frameborderframeborder==""0|10|1""
scrollingscrolling==""yes|no|autoyes|no|auto" " >>
Texte de substitutionTexte de substitution
</</iframeiframe>>
Programmation Web 2012-2013Programmation Web 2012-2013
757503:24:5903:24:59
Cadres en mode ligne : exempleCadres en mode ligne : exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"Transitional//EN"""http://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtd">">
<<htmlhtml>> <<headhead>> <<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/"text/
html; charset=utf-8"html; charset=utf-8">> <<titletitle>>IFRAMEIFRAME</</titletitle>> </</headhead>> <<bodybody>> <<pp>>Voici le site de googleVoici le site de google <<iframeiframe srcsrc==''http://www.google.frhttp://www.google.fr’’ widthwidth=='800''800' heightheight=='500''500' namename=='cadre''cadre'>> Site de GoogleSite de Google </</iframeiframe>> tel qu'il se présente aujourd'hui. tel qu'il se présente aujourd'hui. </</bodybody>></</htmlhtml>>
Programmation Web 2012-2013Programmation Web 2012-2013
767603:24:5903:24:59
Cadres en mode ligne : exempleCadres en mode ligne : exemple
Programmation Web 2012-2013Programmation Web 2012-2013