11:07:591 programmation web : html jérôme cutrona [email protected] programmation web...

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


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


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


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 ?


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


Titre du documentTitre du document

Titre de niveau 1Titre de niveau 1



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


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 :

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


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


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)


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/


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.


161603:24:5403:24:54



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.


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">


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">


191903:24:5503:24:55




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.


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


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


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


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


_ 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


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


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 << "<""<" < < && "&" "&" & &


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


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">">


252503:24:5503:24:55




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.


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


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 ?


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>>


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>>


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>> ……


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>>

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>>


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>>


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


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  <<trtr> <> <tdtd>>33 < <tdtd>>4 4 <<tdtd>>55</</tabletable>>

363603:24:5603:24:56


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  < <tdtd>>4 4 <<tdtd>>55</</tabletable>>

373703:24:5603:24:56


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>>]]


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>>



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


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


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


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


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


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


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


Importance de fixer la taille de l’imageImportance de fixer la taille de l’image

Situation normaleSituation normale



Image absente SANS taille définieImage absente SANS taille définie



Image absente / chargement AVEC taille définieImage absente / chargement AVEC taille définie


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


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


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)


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


555503:24:5803:24:58

Images "vraies couleurs"Images "vraies couleurs"

++ ++ ==

rougerouge vertvert bleubleu


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


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


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


595903:24:5803:24:58


GIF 256 couleursGIF 256 couleurs

9,59 Ko9,59 Ko1:201:20


606003:24:5803:24:58


GIF 64 couleursGIF 64 couleurs

3,96 Ko3,96 Ko1:481:48


616103:24:5803:24:58


JPEG qualité 100%JPEG qualité 100%

11,6 Ko11,6 Ko1:171:17


626203:24:5803:24:58



3,77 Ko3,77 Ko1:511:51


636303:24:5803:24:58



1,69 Ko1,69 Ko1:1441:144


646403:24:5803:24:58


PNG 16 millions de couleursPNG 16 millions de couleurs

8,48 Ko8,48 Ko1:231:23


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


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==


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


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


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>>


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


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


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>>


</</htmlhtml>>

2 colonnes2 colonnes

2 lignes2 lignes


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">>



200px200px

30%

30%


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>>


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>>


767603:24:5903:24:59

Cadres en mode ligne : exempleCadres en mode ligne : exemple
