Вы находитесь на странице: 1из 26

Programmation Web :

HTML
Prpar par :

Dr. Hanne GHORBEL AGREBI


hanenghorbel.fseg@gmail.com

22 fvrier 2017 Programmation Web 2016


2016--2017 1

HTML = HyperText Markup Language ?

Hyper : Non linaire, liens entre nuds


Text : Compos de texte
Markup : Marqu, balis
Language : Langage

Langage balises de description de documents


hypertextes

22 fvrier 2017 Programmation Web 2016


2016--2017 2

1
Quest--ce que HTML ?
Quest

Langage de prsentation de documents


Nest PAS un langage de programmation
Langage : syntaxe STRICTE
Utilis pour construire les pages Web
Navigation hypertexte : ancres, liens
Utilise des balises
Documents exploits par des agents utilisateurs
Navigateur pour visualiser le rsultat
Robots des moteurs de recherche pour indexer
Automates divers pour traiter les donnes

22 fvrier 2017 Programmation Web 2016


2016--2017 3

Bref historique des normes

WWW Project Proposal (mars 1989)


W3 Consortium (1994) http://www.w3.org
HTML 1.0 (aot 1994)
HTML 2.0 (novembre 1995)
HTML 3.2 (janvier 1997)
HTML 4.0 (avril 1998)
HTML 4.01 (dcembre 1999)
XHTML 1.0 (janvier 2000)
HTML 5 depuis 2003, depuis 2007 au W3C,
standard depuis 2014
22 fvrier 2017 Programmation Web 2016
2016--2017 4

2
Pourquoi apprendre le langage HTML ?

Il existe des diteurs WYSIWYG What You See


Adobe GoLive Is What You
Macromedia Adobe Dreamweaver Get
Microsoft FrontPage
NetObjects Fusion
Netscape Composer
OpenOffice

Pages Web produites dynamiquement
Programme produisant du code HTML
VOUS crivez le programme WYSIWYG hors jeu
22 fvrier 2017 Programmation Web 2016
2016--2017 5

Principe de HTML
Structuration dun document texte
Apporter de la structure au document
Apporter de la logique au document
laide de balises
Document simple
Structure et mise en forme sont lies
Titre plus gros, numrotation automatique
Paragraphe = nouvelle ligne
Livre = long texte
Contenu du livre = ensemble de chapitres et de paragraphes
Informations sur le livre ne faisant pas partie intgrante de
lhistoire = titre, auteur, rsum, anne de parution,

22 fvrier 2017 Programmation Web 2016


2016--2017 6

3
Structurer un document ?
Mettre en forme ?

1- Structurer (HTML)

22 fvrier 2017 Programmation Web 2016


2016--2017 7

Structurer le document
Titre du document
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Paragraphe

Reprer les structures :


Marquer leur dbut/fin
Utilisation de balises
22 fvrier 2017 Programmation Web 2016
2016--2017 8

4
Appliquer une feuille de style

Style :
Titre
Policededeniveau
base :18pt
TitreRouge
de niveau 1
Paragraphes
Bleu, majuscules
Justifier
Bords haut et bas
re
1Paragraphes
lettre paragraphe
Gros,
Justifier
gris, italique
22 fvrier 2017 Programmation Web 2016
2016--2017 9

Les grandes lignes

Texte ASCII 7 bits (alphabet non accentu + quelques


symboles)
Retour la ligne non structurant :
non mis en forme
Espaces (sens
(sens large)
large) conscutifs = UN espace
Caractres accentus : reprsentation spcifique
Symboles : reprsentation spcifique
Balises = structure, pas (plus
(plus)) mise en forme
Mise en forme : feuille de style CSS
Commentaires : <!--
<!-- commentaire -- -->>

22 fvrier 2017 Programmation Web 2016


2016--2017 10

5
Bref historique des fonctionnalits
Sparation du fond et de la forme
HTML HTML HTML HTML
2.0 3.2 4.0 4.01

Structuration du document OUI OUI OUI OUI

Mise en forme dans les balises OUI OUI NON NON

Feuilles de style CSS NON NON OUI OUI

Feuilles de style CSS2 NON NON NON OUI

Interactivit JavaScript NON NON OUI OUI

22 fvrier 2017 Programmation Web 2016


2016--2017 11

Balises (tags, marqueurs) HTML

Texte entour par < et > (chevrons)


Balises insensibles la casse :
<BALISE
BALISE>>
<balise
balise>> quivalent
<Balise
Balise>> mais XHTML minuscules
<bAlIsE
bAlIsE>>
Ouvrante : <balise
balise> > Encadrement d'un bloc
Fermante : </balise
</balise> > (ventuellement optionnelle)
Non visibles dans le rendu du navigateur
attributs/options : <bali attrattr= ="val val" " opt
opt>>

22 fvrier 2017 Programmation Web 2016


2016--2017 12

6
Utilisation des balises

Utilisation CORRECTE
<i>Texte
Texte<<b>Texte Texte
Texte</
</b
b></
></i
i>

Utilisation INCORRECTE
<i>Texte
Texte<<b>Texte Texte
Texte</
</i
i></
></b
b>

Jamais de chevauchement (pile dtats)


22 fvrier 2017 Programmation Web 2016
2016--2017 13

Outils de validation

Les spcifications
http://www.w3.org/
HTML 4.01 : http://www.w3.org/TR/html401/
CSS 2.1 : http://www.w3.org/TR/CSS21/
Validation HTML
Validateur en ligne : http://validator.w3.org/
Validateur sur intranet : http://wwwdoc/w3c
http://wwwdoc/w3c--validator/
Validation CSS :
Validateur en ligne : http://jigsaw.w3.org/css
http://jigsaw.w3.org/css--validator/
Validateur sur intranet : http://wwwdoc/css
http://wwwdoc/css--validator/

22 fvrier 2017 Programmation Web 2016


2016--2017 14

7
Document HTML

Document texte ASCII .htm ou .html


Structure de base :
1. Information sur la version de HTML utilise
2. En-
En-tte dclaratif
3. Corps, contenu du document
1. <!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>
>
2. <title
title>>Ma premire page Web</
Web</title
title>
>
</head>
</head >
<body
body>
>
3. Salut !
</body
</body>>
</html>
</html >
22 fvrier 2017 Programmation Web 2016
2016--2017 15

Document HTML

Document texte ASCII .htm ou .html


Structure de base :
1. Information sur la version de HTML utilise
2. En-
En-tte dclaratif
3. Corps, contenu du document
1. <!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>
2. <title>Ma premire page Web</title>
</head>
<body>
3. Salut !
</body>
</html
</html>>
22 fvrier 2017 Programmation Web 2016
2016--2017 16

8
Document HTML

Document texte ASCII .htm ou .html


Structure de base :
1. Information sur la version de HTML utilise
2. En-
En-tte dclaratif
3. Corps, contenu du document
1. <!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>
<head
head>
>
2. <title
title>
>Ma premire page Web</
Web</title
title>
>
</head>
</head>
<body>
3. Salut !
</body>
</html>
22 fvrier 2017 Programmation Web 2016
2016--2017 17

Structure et contenu de len-


len-tte

Informations sur le document


Titre du document (obligatoire)
<title
title>> </
</title
title>
>
Mta donnes
<meta name
name=="nom
nom"" content
content=="valeur
valeur"">
<meta name
name=="Author
Author"
" content
content=="J. Cutrona
Cutrona"">
<meta name
name=="keywords" lang
lang=="fr
fr"" content
content=="cours, HTML">
HTML">
<meta name
name=="keywords" lang
lang=="en" content
content=="course, HTML">
HTML">
<meta name
name=="copyright" content
content= ="2005 IUT Reims">
Reims">

Autres informations
Styles
Scripts

22 fvrier 2017 Programmation Web 2016


2016--2017 18

9
Table ASCII
Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code
(nul) 0 (dc3) 19 & 38 9 57 L 76 _ 95 r 114
(soh)
soh) 1 (dc4) 20 ' 39 : 58 M 77 ` 96 s 115
(stx)
stx) 2 (nak) 21 ( 40 ; 59 N 78 a 97 t 116
(etx)
etx) 3 (syn) 22 ) 41 < 60 O 79 b 98 u 117
(eot)
eot) 4 (etb) 23 * 42 = 61 P 80 c 99 v 118
(enq)
enq) 5 (can) 24 + 43 > 62 Q 81 d 100 w 119
(ack)
ack) 6 (em) 25 , 44 ? 63 R 82 e 101 x 120
(bel) 7 (sub) 26 - 45 @ 64 S 83 f 102 y 121
(bs) 8 (esc) 27 . 46 A 65 T 84 g 103 z 122
(ht) 9 (fs) 28 / 47 B 66 U 85 h 104 { 123
(nl)
nl) 10 (gs) 29 0 48 C 67 V 86 i 105 | 124
(vt)
vt) 11 (rs) 30 1 49 D 68 W 87 j 106 } 125
(np)
np) 12 (us) 31 2 50 E 69 X 88 k 107 ~ 126
(cr)
cr) 13 (sp) 32 3 51 F 70 Y 89 l 108 (del)
del) 127
(so)
so) 14 ! 33 4 52 G 71 Z 90 m 109
(si) 15 " 34 5 53 H 72 [ 91 n 110
(dle)
dle) 16 # 35 6 54 I 73 \ 92 o 111
(dc1) 17 $ 36 7 55 J 74 ] 93 p 112
(dc2) 18 % 37 8 56 K 75 ^ 94 q 113

22 fvrier 2017 Programmation Web 2016


2016--2017 19

Entits HTML (dans <body


body>>)

Reprsentation spcifique des


Symboles
Caractres accentus
Absents de la table ASCII donc composition
Forme gnrale des entits HTML
&code
code;;
Quelques exemples
&eacute
eacute;; "&#233;"
&nbsp
nbsp;; "&#160;" espace inscable
&lt;
lt; "&#60;" <
&amp;
amp; "&#38;" &

22 fvrier 2017 Programmation Web 2016


2016--2017 20

10
Tables de caractres

Dfinir la table des caractres de la page HTML


Si non ASCII
Sera utilise par lagent utilisateur (si disponible)
Permet de limiter les entits HTML (source : lisibilit)
Balise META placer dans <head
head>>
Table de caractres "Europe de l'Ouest (latin1)
<meta http
http- -equiv
equiv="content
="content- -type"
content="text
content=" text/html;
/html; charset
charset= =ISO-
ISO-8859
8859-
-1">
Table de caractres UNICODE
<meta http
http- -equiv
equiv="content
="content- -type"
content="text
content=" text/html;
/html; charset
charset= =UTF-
UTF-8">

22 fvrier 2017 Programmation Web 2016


2016--2017 21

Document HTML

Document texte ASCII .htm ou .html


Structure de base :
1. Information sur la version de HTML utilise
2. En-
En-tte dclaratif
3. Corps, contenu du document
1. <!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>
<head>
2. <title>Ma premire page Web</title>
</head>
<body
body>
>
3. Salut !
</body
</body>
>
</html>
22 fvrier 2017 Programmation Web 2016
2016--2017 22

11
Utilisation et utilit des balises dans <body
body>>

Initialement : mise en page du document


Police, couleur, taille, alignement du texte,
Maintenant : structuration logique du document
Titres de diffrents niveaux
Paragraphes, citation, exemple, code,
Listes
Tableaux,
Si le document est correctement structur,
structur,
chaque lment structurel pourra est mis en
forme via une feuille de style CSS
22 fvrier 2017 Programmation Web 2016
2016--2017 23

Mise en page Structuration

Titres (6 niveaux de hirarchie) :


<h1>
h1> </h1
</h1>>
<h2>
h2> </h2
</h2>>
<h3>
h3> </h3
</h3>>
<h4>
h4> </h4
</h4>>
<h5>
h5> </h5
</h5>>
<h6>
h6> </h6
</h6>>
Paragraphes
<p> [</p
</p>]
Saut de ligne :
<br />

22 fvrier 2017 Programmation Web 2016


2016--2017 24

12
Mise en page Structuration

Ligne de sparation horizontale :


<hr />
Texte prformat (brut) :
<pre
pre>> </ </pre
pre>>
Retours la ligne et espaces multiples apparaissent
Groupe mode en ligne structuration pure
<span
span>> </
</span
span>
>
Groupe mode bloc structuration pure
<div
div>> </
</div
div>
>

22 fvrier 2017 Programmation Web 2016


2016--2017 25

Mise en forme Structuration

Styles physiques logiques


Gras : <b> </
</bb>
Italique : <i> </
</ii>
Soulign : <u> </
</uu>
Styles logiques
Citation : <cite
cite>> </
</cite
cite>>
Code : <code
code>> </
</code
code>>
Mise en valeur : <em
em>> </
</em
em>
>
Mise en valeur : <strong
strong>> </
</strong
strong>>
Exemple : <samp
samp>> </
</samp
samp>>

22 fvrier 2017 Programmation Web 2016


2016--2017 26

13
Liste de dfinitions

Liste : <dl
dl>> </
</dl
dl>>
lment : <dtdt>
> [</
</dt
dt>
>]
Dfinition : <dd
dd>> [</
</dd
dd>>]
<dl>
dl>
<dt>
dt>Ours
Ours</
</dt
dt>
>
<dd>
dd>Les ours sont de grands mammifres
plantigrades de l'ordre des Carnivores, famille
des Ursids, sous-
sous-famille des Ursins.
</dd
</dd>
>
<dt>
dt>Chvre
<dd>
dd>La chvre est un mammifre herbivore et
ruminant, appartenant la famille des bovids,
sous-
sous-famille des caprins ou caprins.
</dl
</dl>
> <!--
<!-- source : http://fr.wikipedia.org -->
-->
22 fvrier 2017 Programmation Web 2016
2016--2017 27

Liste non numrote

Liste : <ul
ul>> </
</ul
ul>>
lment : <lili>
> [</
</li
li>
>]
Liste des courses :
<ul>
ul>
<li>
li>Beurre
Beurre</
</li
li>
>
<li>
li>Sucre
Sucre</
</li
li>
>
<li>
li>Farine
Farine</
</li
li>
>
<li>
li>Oeufs
<li>
li>Confiture
</ul
</ul>
>

22 fvrier 2017 Programmation Web 2016


2016--2017 28

14
Liste numrote

Liste : <ol
ol>> </
</ol
ol>>
lment : <lili>
> [</
</li
li>
>]
Liste des courses :
<ol>
ol>
<li>
li>Beurre
Beurre</
</li
li>
>
<li>
li>Sucre
Sucre</
</li
li>
>
<li>
li>Farine
Farine</
</li
li>
>
<li>
li>Oeufs
<li>
li>Confiture
</ol
</ol>
>

22 fvrier 2017 Programmation Web 2016


2016--2017 29

Tableaux

Tableau : <table
table> > </ </table
table> >
Ligne : <tr
tr>> [</ </tr
tr>>]
Cellule : <td
td>> [</ </td
td>>]
Cellule den-
den-tte : <th
th>> [</</th
th>>]
<table
table>
>
Colonnes
<tr>
tr> <
<td
td> =td>
>1</td
</ nombre
> <
<td
td> maxi
>2</td
</ > de <td
td> td>> par</tr
<tr
</tr>
>>
tr>
<tr>
tr> <
<td
td>
>3</td
</td>
> <
<td
td>
>4</td> <td
</td> td>>5</
</td
td>
> </tr
</tr>
>
</table
</table>
>
<table
table>
>
<tr>
tr> <
<td
td>
>1 <td>
td>2 quivalent au prcdent
<tr>
tr> <
<td
td> td>4 <td
>3 <td> td>>5
</table
</table>
>
22 fvrier 2017 Programmation Web 2016
2016--2017 30

15
Tableaux avancs

Extension de cellule sur C colonnes :


<td colspan
colspan=
="C">
<table
table>
>
<tr>
tr> <
<td
td>
>1 <td colspan="2">2 <!--
<!-- suite -->
-->
<tr>
tr> <
<td
td>
>3 <td>
td>4 <td>
td>5
</table
</table>
>

22 fvrier 2017 Programmation Web 2016


2016--2017 31

Tableaux avancs

Extension de cellule sur L lignes :


<td rowspan
rowspan=
="L">
<table
table>
>
<tr>
tr> <
<td
td>
>1 <td rowspan
rowspan=
="2">2
<tr>
tr> <
<td
td>
>3 <!--
<!-- suite -->
--> <td>
td>4 <td>
td>5
</table
</table>
>

22 fvrier 2017 Programmation Web 2016


2016--2017 32

16
Elments de regroupement
Mcanisme gnrique de structuration du
document

Utilisation conjointe avec les feuilles de style

Groupe en ligne
<span
span>> </
</span
span>
>

Groupe en bloc
<div
div>> </
</div
div>
>

22 fvrier 2017 Programmation Web 2016


2016--2017 33

Classe, identification et description

Affecter une balise une classe


Attribut class
<p class
class=="ma_classe
ma_classe"">
Donner un identifiant une balise
Sous--groupe de
Sous
Attribut id l'ensemble des
balises
Identifiant doit tre unique (charge du concepteur)
<p>
<p idid=="mon_id_unique
mon_id_unique" ">
Dcrire un lment Une balise <p>
Attribut title pour la plupart des lments
repre de faonHTML
Texte affich sous forme dinfo-
dinfo-bulle (tooltip)
unique

22 fvrier 2017 Programmation Web 2016


2016--2017 34

17
Liens et ancres

Base de la navigation hypertexte


Lien (ancre
(ancre source dun)
dun) : zone active cliquable
<a href
href= ="URL
URL" ">support du lien</
lien</a a>
Support : texte, image, contenus entre <a> et </
</aa>
URL : ksako ?
Ancre (nomme) : point cible
<a name
name=="nom
nom" ">point dancrage</
dancrage</a a>
name
name== nom unique ( la charge du concepteur)
Comment cibler lancre dans un lien ? URL

22 fvrier 2017 Programmation Web 2016


2016--2017 35

URL : Universal Resource Locator

Dcrire ladresse dune ressource Web


1. Mcanisme daccs
2. Equipement hbergeant la ressource
3. La ressource et son chemin
http://www.google.fr/index.htm
l 1. 2. 3.

http:// www.google.fr /index.html


ftp:// 66.249.85.99 /im/image.png
mailto: 1123636579 /linux

22 fvrier 2017 Programmation Web 2016
2016--2017 36

18
Marque de fragment

Faire rfrence un emplacement repr dans


une ressource
Atteindre une ancre
<h1><
h1><a
a name
name=
="x1"
x1">txt
txt</
</a
a></
></h1
h1>
>
ou atteindre un lment identifi
<h1 id=
id="x1"
x1">txt
txt</
</h1
h1>
>

URL se terminant par #nom_de_l_ancre


http://www.w3.org/TR/html4/
intro/intro.html#fragment-
intro/intro.html#fragment -uri
22 fvrier 2017 Programmation Web 2016
2016--2017 37

Image

Ajouter une image au sein du document


<img [width
width= ="w"] [height
height= ="h"]
src=
src ="URL
URL"" alt
alt= ="texte alternatif"
alternatif">
src
URI permettant datteindre limage
width et height
permettent lagent de prvoir un emplacement avant
davoir analys limage
permettent au concepteur de redimensionner limage
alt
Texte alternatif si limage est indisponible/corrompue

22 fvrier 2017 Programmation Web 2016


2016--2017 38

19
Importance de fixer la taille de limage
Situation normale

22 fvrier 2017 Programmation Web 2016


2016--2017 39

Importance de fixer la taille de limage


Image absente SANS taille dfinie

22 fvrier 2017 Programmation Web 2016


2016--2017 40

20
Importance de fixer la taille de limage
Image absente / chargement AVEC taille
dfinie

22 fvrier 2017 Programmation Web 2016


2016--2017 41

Qu'est--ce qu'une image


Qu'est

Description nave : grille de carrs de couleur

Pixel

22 fvrier 2017 Programmation Web 2016


2016--2017 42

21
Images en niveaux de gris
Images en 256 nuances de gris
1 pixel = 1 octet
Valeur de l'octet = intensit lumineuse
0 = noir
255 = blanc

22 fvrier 2017 Programmation Web 2016


2016--2017 43

Reprsentation de la couleur

Principe de la synthse additive des couleurs


En utilisant 3 couleurs, on peut les former toutes
Rouge, Vert, Bleu en quantit variable

Reprsentation informatique : quantit = entier


Habituellement, 1 octet, soit 256 niveaux
Donc, 1 couleur = 3 octets (1 R, 1V, 1B)

22 fvrier 2017 Programmation Web 2016


2016--2017 44

22
Reprsentation de la couleur

Images vraies couleurs :


dites 24 bits (3
(31octet = 3
38bits)
16,7 millions de couleurs (256
(256256
256
256=16.777.216)
Chaque pixel = triplet (R,V,B)
Images vraies couleurs + canal alpha :
dites 32 bits, pixel = quadruplet (R,V,B,A)
Images couleurs indexes :
dites 8 bits (1 octet)
2 256 couleurs
Table de 2 256 triplets (R,V,B)
Chaque pixel = 1 index (octet) de la table de couleurs

22 fvrier 2017 Programmation Web 2016


2016--2017 45

Images "vraies couleurs"

+ + =
rouge vert bleu

22 fvrier 2017 Programmation Web 2016


2016--2017 46

23
Images couleurs indexes
0 0 0 0 0 1 1 1 1 1 0 0 0 0 0
index rouge vert bleu
0 0 0 1 1 2 2 2 2 2 1 1 0 0 0
0 255 255 255
0 0 1 2 2 2 2 2 2 2 2 2 1 0 0
0 1 2 2 2 2 2 2 2 2 2 2 2 1 0 1 0 0 0
0 1 2 2 2 2 2 2 2 2 2 2 2 1 0 2 255 255 0
1 2 2 2 1 1 2 2 2 1 1 2 2 2 1
1 2 2 2 1 1 2 2 2 1 1 2 2 2 1
1 2 2 2 2 2 2 2 2 2 2 2 2 2 1
1 2 2 2 2 2 2 2 2 2 2 2 2 2 1
1 2 2 2 1 2 2 2 2 2 1 2 2 2 1
0 1 2 2 2 1 1 1 1 1 2 2 2 1 0
0 1 2 2 2 2 2 2 2 2 2 2 2 1 0
0 0 1 2 2 2 2 2 2 2 2 2 1 0 0
0 0 0 1 1 2 2 2 2 2 1 1 0 0 0
0 0 0 0 0 1 1 1 1 1 0 0 0 0 0

22 fvrier 2017 Programmation Web 2016


2016--2017 47

Format dimages pour le Web

GIF (Compression sans perte)


2 256 couleurs Textes, tracs, figures,
Animation possible images contours prcis
Transparence
JPG (Compression avec perte paramtrable)
16 millions de couleurs
Images naturelles :
Taux de compression lev
photographies
PNG (Compression sans perte)
2 256 couleurs ou 16 millions de couleurs
Canal alpha
Format libre
Tout, condition de bien
choisir le nombre de couleurs
22 fvrier 2017 Programmation Web 2016
2016--2017 48

24
Formats dimages pour le Web : Bilan
Format Compression Effets visibles lis au format

GIF 256 c. 1:20 Lgre perte de couleurs

GIF 64 c. 1:48 Perte de couleurs

JPEG 100% 1:17 Lger flou

JPEG 50% 1:51 Distorsions importantes

JPEG 5% 1:144 Distorsions trs importantes

PNG 16M c. 1:23 Aucun

22 fvrier 2017 Programmation Web 2016


2016--2017 49

Images cliquables

Carte de zones cliquables sur une image


<img src
src=="URL1
URL1" " usemap
usemap= ="#nom
"#nom"" alt
alt==>
<map name
name= ="nom
nom" ">
<area href
href=="URL2
URL2" " shape
shape= ="forme
forme""
coords=
coords ="coordonnes_en_pixels
coordonnes_en_pixels" "
alt=
alt ="texte_alternatif
texte_alternatif" ">
[<area > >]
</map
</map> >
name
name= = nom de la carte, repris dans usemap
usemap= =

22 fvrier 2017 Programmation Web 2016


2016--2017 50

25
Images cliquables : formes de zones

shape
shape=
="forme
forme""
rect : rectangle
coords=
coords="coin_sup_gauche, coin_inf_droit"
coin_inf_droit"
circle : cercle
coords=
coords="centre, rayon"
rayon"
poly : polygone
coords=
coords="point_1, point_2, point_3, "
"
default : toute la zone x
Coordonnes
Coordonnes dun point
dans lespace image (pixels)
y
22 fvrier 2017 Programmation Web 2016
2016--2017 51

26