HTML
M. BOUMEDIENE
Institut National des Télécommunications et des Technologies
de l’Information et de la Communication
e-mail: mboumediene[at][Link]
12 mars 2020
1/33 Mohammed Boumediene - INTTIC Technologies web 1
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
2/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
3/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
HTML : langage à balises
Un langage à balises décrit la structure d’un document a l’aide de balises
4/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
HTML : langage à balises
Un langage à balises décrit la structure d’un document a l’aide de balises
Les balises marquent des zones particulières du document en définissant leur
contenu et leur mise en forme
⇒ Mieux structurer le document
⇒ Exemple de langage à balises : HTML et XML
4/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
HTML : langage à balises
Un langage à balises décrit la structure d’un document a l’aide de balises
Les balises marquent des zones particulières du document en définissant leur
contenu et leur mise en forme
⇒ Mieux structurer le document
⇒ Exemple de langage à balises : HTML et XML
HTML (HyperText Markup Langage) est un langage de description de contenu web
⇒ Interprété par les navigateurs
⇒ HTML5
HTML n’est pas un langage de programmation ⇒ ne génère pas d’exécutable
HTML se base sur un ensemble de balises indiquant au navigateur de quelle
manière afficher un contenu
Ces balises ne sont pas affichées aux clients mais interprétées par le navigateur
4/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
HTML : langage à balises
Une balise est délimitée par les symboles < et > et peut contenir plusieurs
attributs sous la forme attribut = ”valeur ”
< b alise attribut= " valeur " >
5/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
HTML : langage à balises
Une balise est délimitée par les symboles < et > et peut contenir plusieurs
attributs sous la forme attribut = ”valeur ”
< b alise attribut= " valeur " >
Il existe en HTML deux types de balises :
Simples : ne peuvent pas contenir d’autres balises
< b alise attribut= " valeur " >
Doubles : peuvent contenir d’autres balises et sont composées d’une
balise ouvrantes < balise > et une balise fermantes < /balise >
< b alise attribut= " valeur " > texte ici ou autres
,→ balises < / b alise >
5/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
HTML : langage à balises
Une balise est délimitée par les symboles < et > et peut contenir plusieurs
attributs sous la forme attribut = ”valeur ”
< b alise attribut= " valeur " >
Il existe en HTML deux types de balises :
Simples : ne peuvent pas contenir d’autres balises
< b alise attribut= " valeur " >
Doubles : peuvent contenir d’autres balises et sont composées d’une
balise ouvrantes < balise > et une balise fermantes < /balise >
< b alise attribut= " valeur " > texte ici ou autres
,→ balises < / b alise >
Exemples :
< h1 > web development < / h1 >
< i mg src= "./ img / photo1 . jpg " alt= " algerian coast " >
5/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Structure d’un document HTML
Un document HTML est délimité par par la balise double <html> et </html>
Un document HTML est composé d’un en-tête et d’un corps
< ! DOCTYPE html >
< html lang= " fr " dir= " ltr " >
< head >
< title > Ma premi è re page web < / title >
< / head >
< b ody >
Ceci est le contenu de la page !
< ! --ceci est commentaire-- >
< / b ody >
< / html >
6/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Métadonnées
Balises <meta. . . > procurent divers informations sur la page
7/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Métadonnées
Balises <meta. . . > procurent divers informations sur la page
Parmi ces informations : le nom de l’auteur, la date de création, une description
du document, des mots clés, etc
Valeur d’une information est représentée par l’attribut content
7/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Métadonnées
Balises <meta. . . > procurent divers informations sur la page
Parmi ces informations : le nom de l’auteur, la date de création, une description
du document, des mots clés, etc
Valeur d’une information est représentée par l’attribut content
Il existe trois catégories de balises meta :
meta name : renseigne sur l’auteur, le contenu, etc.
meta http-equiv : transmet des informations au navigateur.
meta charset : spécifie le jeu de caractères utilisé pour l’encodage de
la page.
< meta name= " mot-cl é " content= " valeur " >
< meta http-equiv= " mot-cl é " content= " valeur " >
< meta charset= " UTF-8 " >
7/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Exemple de métadonnées
<head>
<meta name=" a p p l i c a t i o n − n a m e " con ten t= " page web s t a t i q u e ">
<meta name=" a u t h o r " co nte nt= "Ahmed Ben Mohammed">
<meta name=" g e n e r a t o r " c ont ent = " s u b l i m e ">
<meta name=" k e y w o r d s " co nte nt= " web , html , b a l i s e ,
,→ a t t r i b u t ">
<meta name=" d e s c r i p t i o n " co nte nt= " p r é s e n t a t i o n d e s
,→ b a l i s e s ">
<!−− <meta http−equiv= " c o n t e n t − t y p e " con ten t= " t e x t / h tm l ;
,→ c h a r s e t = u t f − 8 "> −−>
<meta http−equiv= " r e f r e s h " con ten t= " 1 0 ">
<meta http−equiv= " r e f r e s h " con ten t= " 1 0 ;
,→ u r l = h t t p : / /www . g o o g l e . f r ">
<meta c h a r s e t = " utf−8 ">
<t i t l e>Ma p r e m i è r e page web</ t i t l e>
</head>
8/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Balises meta name
Liste non exhaustive des balises meta name :
application-name : définit le nom de l’application web représentée par
la page web.
author : donne le nom d’un des auteurs de la page
generator : identifie un des outils utilisés pour la génération de la page
keywords : énumère une liste de mots clés
description : décrit le contenu de la page
<meta name=" a p p l i c a t i o n − n a m e " c o n t e n t = " page web s t a t i q u e ">
<meta name=" a u t h o r " c o n t e n t = "Ahmed Ben Mohammed">
<meta name=" g e n e r a t o r " c o n t e n t = " s u b l i m e ">
<meta name=" k e y w o r d s " c o n t e n t = " web , html , b a l i s e , a t t r i b u t ">
<meta name=" d e s c r i p t i o n " c o n t e n t = " p r é s e n t a t i o n d e s b a l i s e s ">
9/33 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Balises meta http-equiv
Liste non exhaustive des balises meta http-equiv :
content-language : définit la langue du contenu de la page. Cet attribut
n’est plus utilisé, il est remplacé par l’attribut lang de la balise body.
content-type : spécifie le type MIME de la page. Cet attribut peut-être
aussi utilisé pour identifier le jeu de caractères.
refresh : indique le nombre de secondes, à l’aide de l’attribut content, à
attendre avant de recharger la page. Après l’attente, il est possible de
rediriger le client vers une autre page. Pour cela, il faut suivre le
nombre de secondes par une URL valide (’;url=’).
<!−− <meta http−equiv= " c o n t e n t − t y p e " c o n t e n t = " t e x t / h t m l ;
,→ c h a r s e t = u t f − 8 "> −−>
<meta http−equiv= " r e f r e s h " c o n t e n t = " 1 0 ">
<meta http−equiv= " r e f r e s h " c o n t e n t = " 1 0 ;
,→ u r l = h t t p : / /www . g o o g l e . f r ">
10/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
11/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (1)
HTML nous offre la possibilité de formatter le texte selon notre souhait
12/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (1)
HTML nous offre la possibilité de formatter le texte selon notre souhait
Segmenter le texte en paragraphe <p> . . .</p>
<p> p a r a g r a p h e 1 </p>
<p d i r = " l t r "> p a r a g r a p h e 2 </p>
<p hidden= " h i d d e n "> p a r a g r a p h e 3 </p>
12/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (1)
HTML nous offre la possibilité de formatter le texte selon notre souhait
Segmenter le texte en paragraphe <p> . . .</p>
<p> p a r a g r a p h e 1 </p>
<p d i r = " l t r "> p a r a g r a p h e 2 </p>
<p hidden= " h i d d e n "> p a r a g r a p h e 3 </p>
Saut de ligne <br>
<p>S a l u t t o u t l e monde !<b r>Quoi de n e u f !</p>
12/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (1)
HTML nous offre la possibilité de formatter le texte selon notre souhait
Segmenter le texte en paragraphe <p> . . .</p>
<p> p a r a g r a p h e 1 </p>
<p d i r = " l t r "> p a r a g r a p h e 2 </p>
<p hidden= " h i d d e n "> p a r a g r a p h e 3 </p>
Saut de ligne <br>
<p>S a l u t t o u t l e monde !<b r>Quoi de n e u f !</p>
Texte préformaté qui sera affiché tel quel en retranscrivant les espaces
<pre> . . .</pre>
<p r e> La v i e
e s t s e m b l a b l e à un j e u d e c h e c Chacun
a ses pions
en m a i n s
Le m o i n s h a b i l e est
vendu c o r p s e t b i e n s</p r e>
12/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (2)
Titre des sections et sous-sections <hx> . . .</hx>
<h1>T i t r e de niveau 1</h1>
<h2>T i t r e de niveau 2</h2>
<h3>T i t r e de niveau 3</h3>
<h4>T i t r e de niveau 4</h4>
<h5>T i t r e de niveau 5</h5>
<h6>T i t r e de niveau 6</h6>
13/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (2)
Titre des sections et sous-sections <hx> . . .</hx>
<h1>T i t r e de niveau 1</h1>
<h2>T i t r e de niveau 2</h2>
<h3>T i t r e de niveau 3</h3>
<h4>T i t r e de niveau 4</h4>
<h5>T i t r e de niveau 5</h5>
<h6>T i t r e de niveau 6</h6>
Texte en italique <i> . . .</i>
<i>c e t e x t e e s t en i t a l i q u e</ i>
13/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (2)
Titre des sections et sous-sections <hx> . . .</hx>
<h1>T i t r e de niveau 1</h1>
<h2>T i t r e de niveau 2</h2>
<h3>T i t r e de niveau 3</h3>
<h4>T i t r e de niveau 4</h4>
<h5>T i t r e de niveau 5</h5>
<h6>T i t r e de niveau 6</h6>
Texte en italique <i> . . .</i>
<i>c e t e x t e e s t en i t a l i q u e</ i>
Texte affecté par une emphase <em> . . .</em>
<em>c e t e x t e e s t a u s s i en i t a l i q u e</em>
Le rendu visuel de <em> est similaire à celui de <i>. Néanmoins, il faut préciser
que <em> apporte un sens sémantique au contenu et donc procure un état
logique au texte. Quand à <i>, cette balise ne procure qu’un état physique au
texte résumé dans le rendu visuel.
13/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (3)
Texte en gras <b> . . .</b>
<b>c e t e x t e e s t en g r a s</b>
14/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (3)
Texte en gras <b> . . .</b>
<b>c e t e x t e e s t en g r a s</b>
Texte important <strong> . . .</strong>
<p>P r o f i t e z de n o s o f f r e s ! <s t r o n g>S e u l e m e n t 8500
,→ DA</ s t r o n g> p o u r l e week−end</p>
La différence entre <b> et <strong> est l’aspect sémantique. En effet,
<strong> procure, en plus d’un rendu visuel, un état logique au texte en le
marquant comme important.
14/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (3)
Texte en gras <b> . . .</b>
<b>c e t e x t e e s t en g r a s</b>
Texte important <strong> . . .</strong>
<p>P r o f i t e z de n o s o f f r e s ! <s t r o n g>S e u l e m e n t 8500
,→ DA</ s t r o n g> p o u r l e week−end</p>
La différence entre <b> et <strong> est l’aspect sémantique. En effet,
<strong> procure, en plus d’un rendu visuel, un état logique au texte en le
marquant comme important.
Texte moins important <s> . . .</s>
<p>V i s i t e z Oran d u r a n t un week−end ( 3 j o u r s ) !</p>
<p><s>P r i x recommend é : 14500 DA p a r p e r s o n n e</ s></p>
<p>P r o f i t e z de n o s o f f r e s ! <s t r o n g>S e u l e m e n t 8500
,→ DA</ s t r o n g> p o u r l e week−end</p>
14/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (3)
Texte en gras <b> . . .</b>
<b>c e t e x t e e s t en g r a s</b>
Texte important <strong> . . .</strong>
<p>P r o f i t e z de n o s o f f r e s ! <s t r o n g>S e u l e m e n t 8500
,→ DA</ s t r o n g> p o u r l e week−end</p>
La différence entre <b> et <strong> est l’aspect sémantique. En effet,
<strong> procure, en plus d’un rendu visuel, un état logique au texte en le
marquant comme important.
Texte moins important <s> . . .</s>
<p>V i s i t e z Oran d u r a n t un week−end ( 3 j o u r s ) !</p>
<p><s>P r i x recommend é : 14500 DA p a r p e r s o n n e</ s></p>
<p>P r o f i t e z de n o s o f f r e s ! <s t r o n g>S e u l e m e n t 8500
,→ DA</ s t r o n g> p o u r l e week−end</p>
Texte très petit <small> . . .</small>
<p>V i s i t e z Oran d u r a n t un week−end ( 3 j o u r s ) !</p>
<p><s t r o n g>S e u l e m e n t 14500 DA<s up>∗</ s up> p a r
,→ p e r s o n n e</ s t r o n g></p>
<p><s m a l l>∗ d e m i − p e n s e i o n</ s m a l l></p>
14/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (4)
Texte souligné <u> . . .</u>
<u>c e t e x t e e s t s o u l i g n é</u>
Texte marqué <mark> . . .</mark>
<mark>c e t e x t e e s t marqu é</mark>
Texte supprimé <del> . . .</del>
<d e l>c e t e x t e e s t b a r r é / s u p p r i m é</ d e l>
Texte inséré <ins> . . .</ins>
<p>Ce t e x t e e s t <i ns>a j o u t é</ i ns></p>
Les balises <del> et <ins> apportent un sens sémantique en identifiant les
modifications du contenu (supprimé ou inséré).
15/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (5)
exposant
Texte en <sup> . . .</sup>
<s up>c e t e x t e e s t en e x p o s a n t</ s up>
Texte en indice <sub> . . .</sub>
<s ub>c e t e x t e e s t en i n d i c e</ s ub>
Paroles rapportées ou citation courte <q> . . .</q>
<p>N e l s o n Mandela a d i t : <q>Un homme un v o t e</q></p>
Référencer un contenu <cite> . . .</cite>
<p>L é d u c a t i o n , c e s t l a f a m i l l e q u i l a donne ; l instruction ,
,→ c e s t l E t a t q u i l a d o i t .
<c i t e> − V i c t o r Hugo −</ c i t e></p>
16/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (6)
Texte abrégé ou acronyme <abbr> . . .</abbr>
<p>L <a b b r t i t l e = " O r g a n i s a t i o n M o n d i a l e de l a
,→ S a n t é ">OMS</ a b b r> a f a i t s e s p r e m i e r s p a s l o r s q u e s a
,→ C o n s t i t u t i o n e s t e n t r é e en v i g u e u r l e 7 a v r i l 1 9 4 8 . L
,→ O r g a n i s a t i o n compte p l u s de 7000 p r o f e s s i o n e l s
,→ t r a v a i l l a n t d a n s 150 b u r e a u x de pays , 6 b u r e a u x
,→ r é g i o n a u x e t au S i è ge à Gen è v e .</p>
La définition de l’acronyme OMS (Organisation Mondiale de la Santé) n’est visible
que lorsque l’utilisateur pointe le curseur sur OMS.
Indiquer la définition d’un terme <dfn> . . .</dfn>
<p>L <d f n>INTERNET</ d f n> e s t l i n t e r c o n n e x i o n d un e n s e m b l e
,→ de r é s e a u x de t o u t e s t a i l l e s compos é s d o r d i n a t e u r s
,→ ( e n t i t é s c o m m u n i c a n t e s ) h é t é r o g è n e s ( Windows , Mac , PC ,
,→ Unix , e t c . )</p>
<b r>
<p>Le <d f n><a b b r t i t l e = " World Wide Web">WWW</ a b b r></ d f n> e s t
,→ l e s e r v i c e l e p l u s u t i l i s é d I n t e r n e t . Ce s e r v i c e
,→ p e r m e t l a c c è s au s y s t ème <em>h y p e r t e x t e p u b l i c</em>
,→ c o n t e n a n t d e s documents l i é s e n t r e e u x p a r d e s l i e n s
,→ h y p e r t e x t e .</p>
17/33 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Listes ordonnées/non ordonnées
Liste non ordonnée <ul> . . .</ul>
<p><s t r o n g>L i s t e 1 :</ s t r o n g></p>
<u l>
< l i >A l g o r i t h m i q u e e t C</ l i >
< l i >I n i t i a t i o n au Web</ l i >
< l i >Dé v e l o p p e m e n t Web</ l i >
</u l>
Liste ordonnée <ol> . . .</ol>
<p><s t r o n g>L i s t e 2 :</ s t r o n g></p>
<o l>
< l i >A l g o r i t h m i q u e e t C</ l i >
< l i >I n i t i a t i o n au Web</ l i >
< l i >Dé v e l o p p e m e n t Web</ l i >
</ o l>
18/33 Mohammed Boumediene - INTTIC Technologies web 1
Liens Hypertextes
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
19/33 Mohammed Boumediene - INTTIC Technologies web 1
Liens Hypertextes
Liens hypertextes
Un lien est défini à l’aide de la balise <a> tout en spécifiant l’URL de destination
par l’attribut href.
<a h r e f = " u r l ">T e x t e du l i e n</ a>
L’URL de destination doit être absolue dans le cas d’un lien pointant vers une
ressource localisée sur un autre site.
<a h r e f = " h t t p : / /www . E n t r e p r i s e A . dz / i n d e x . h t m l ">V i s i t e r le
,→ s i t e de n o t r e f i l i a l e en A l g é r i e</ a>
Dans le cas d’un lien local, c.-a.-d. lorsque le client est envoyé vers une autre page
du même site, l’URL de destination peut-être relative.
<a h r e f = " c a t a l o g u e . h t m l ">Dé c o u v r e z n o t r e c a t a l o g u e</ a>
20/33 Mohammed Boumediene - INTTIC Technologies web 1
Liens Hypertextes
Liens externes & internes
Les liens sont souvent classés en fonction de l’emplacement de la ressource pointée
Lien externe à la page s’il envoie le visiteur vers une autre page
Sinon il est interne et dans ce cas il envoie vers un autre emplacement mais dans
la même page (ancre)
<h1 id= " i d _ t i t r e 1 ">T i t r e de n i v e a u 1</h1>
...
...
...
<a h r e f ="# i d _ t i t r e 1 ">V o i r T i t r e de n i v e a u 1</ a>
Si on souhaite envoyer le visiteur vers une ancre d’une page externe, il faut
spécifier la page et l’ancre :
<a h r e f = " h t t p : / /www . s i t e B . dz / c a t a l o g u e . h t m l#t i t r e 1 ">V o i r
,→ T i t r e de n i v e a u 1</ a>
21/33 Mohammed Boumediene - INTTIC Technologies web 1
Liens Hypertextes
Attributs pour les liens
En plus de href, plusieurs attributs peuvent être définis pour <a>:
target : indique le contexte d’ouverture de la ressource vers laquelle pointe le lien
(ressource cible)
_blank : ouvrir la ressource dans une nouvelle fenêtre
_self : ouvrir la ressource dans la même fenêtre
_parent : ouvrir la ressource dans la fenêtre (frame) parent s’il existe
_top : ouvrir la ressource dans la totalité de la même fenêtre
framename : ouvrir la ressource dans la frame nommée "framename"
download : demande au navigateur du client de télécharger la ressource et lui
propose un nom de fichier pour la sauvegarder. La valeur de l’attribut download
est le nom de fichier proposé.
rel : précise la relation, si elle existe une, entre le document courant et la ressource
cible
hreflang : spécifie la langue de la ressource cible
type : renseigne sur le type MIME du document cible
22/33 Mohammed Boumediene - INTTIC Technologies web 1
Images
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
23/33 Mohammed Boumediene - INTTIC Technologies web 1
Images
Images (1)
Pour insérer les images dans une page HTML, on utilise la balise <img> avec ses
deux attributs obligatoires src et alt :
src : indique le chemin de l’image à charger (GIF, JPG, PNG, etc.). Ce
chemin peut être absolu ou relatif.
Chemin absolu, dans le cas où l’image se trouve sur autre site.
Chemin relatif, lorsque l’image est disponible sur le même site, par
exemple dans un sous-répertoire images.
alt : indique un contenu alternatif, du texte, qui sera : affiché à la
place de l’image lors d’un problème de chargement, ou exploité par les
robots d’indexation, ou bien utilisé par les navigateurs de personnes
malvoyantes.
<i mg src= " i m a g e s / s o l e i l . j p g " a l t = " l e v é e du s o l e i l ">
<i mg src= " h t t p : / /www . h t m l s c h o o l . com/ i m a g e s / s o l e i l . j p g " a l t = " l e v é e
,→ du s o l e i l ">
24/33 Mohammed Boumediene - INTTIC Technologies web 1
Images
Images (2)
D’autres attributs optionnels peuvent être renseignés :
width et height : déterminent respectivement la largeur et la hauteur
de l’image, valeur en pixels.
title : permet d’afficher une description de l’image.
usemap : indique l’utilisation d’une map.
<i mg src= " i m a g e s / s o l e i l . j p g " a l t = " l e v é e du s o l e i l " width= " 1 2 8 "
,→ h e i g h t = " 1 2 8 ">
25/33 Mohammed Boumediene - INTTIC Technologies web 1
Images
Images (3)
Un lien hypertexte peut être une image
Il est aussi possible de définir plusieurs liens hypertextes sur une même image
⇒ image map
<i mg src= " i m a g e s / p a n n e a u _ o r i e n t a t i o n . j p g " a l t = " panneau
,→ o r i e n t a t i o n " usemap="#panneau ">
<map name=" panneau ">
<a r e a shape= " p o l y " coords= " 9 0 , 1 3 3 , 2 7 2 , 1 8 1 , 2 7 2 , 2 5 1 , 8 3 , 2 0 5 ,
5 5 , 157" a l t = "TP 3" h r e f = " page3 . h t m l " >
</map>
L’attribut shape de la balise <area> définit la forme de la zone. Trois types de
zone sont possibles :
rect : un rectangle,
circle : un cercle,
poly : un polygone irrégulier.
26/33 Mohammed Boumediene - INTTIC Technologies web 1
Tableaux
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
27/33 Mohammed Boumediene - INTTIC Technologies web 1
Tableaux
Tableaux (1)
En HTML, un tableau est délimité par les balises <table> et </table>
il est généré horizontalement c.-à-d. crée ligne par ligne
Chaque ligne est délimitée par les balises <tr> et </tr>
Les balises <td> et </td> délimitent les cellules qui sont insérées dans chaque
ligne.
<!−− T a b l e a u 1 −−>
<t a b l e>
<t r>
<t d>C e l l u l e 1</ t d>
<t d>C e l l u l e 2</ t d>
<t d>C e l l u l e 3</ t d>
</ t r>
</ t a b l e>
28/33 Mohammed Boumediene - INTTIC Technologies web 1
Tableaux
Tableaux (2)
Pour définir les en-têtes des colonnes et/ou des lignes, on utilise les balises <th>
au lieu des <td>
Le titre du tableau est défini par la balise <caption>
<t a b l e>
<c a p t i o n>L i s t e d e s m a j o r s de p r o m o t i o n</ c a p t i o n>
<t r>
<t h>Nom</ t h>
<t h>Pr énom</ t h>
<t h>P r o m o t i o n</ t h>
</ t r>
<t r>
<t d>Ben Ahmed</ t d>
<t d>Nawel</ t d>
<t d>IGE 39</ t d>
</ t r>
29/33 Mohammed Boumediene - INTTIC Technologies web 1
Tableaux
Tableaux (4)
La version 5 de HTML (HTML5) offre la possibilité de structurer un tableau en section:
En-tête à l’aide des balises <thead> . . .</thead>
Corps du tableau via les balises <tbody> . . .<tbody>
Pied de tableau par les balises <tfoot> . . .<tfoot>
<t a b l e>
<t h ead>
<t r>
<t h c o l s p a n = " 2 ">P r o d u i t s du m a g a s i n Numé r o 1</ t h>
</ t r>
<t r>
<t h>D e s i g n a t i o n</ t h>
<t h>Q u a n t i t é</ t h>
</ t r>
</ t h ead>
<t b o d y>
<t r>
<t d>p r o d u i t 1</ t d>
<t d>10</ t d>
</ t r>
<t r>
<t d>p r o d u i t 2</ t d>
30/33 <t d>05</ tMohammed
d> Boumediene - INTTIC Technologies web 1
Valider son document HTML
Plan
1 Structure d’un document HTML
2 Contenu textuel
3 Liens Hypertextes
4 Images
5 Tableaux
6 Valider son document HTML
31/33 Mohammed Boumediene - INTTIC Technologies web 1
Valider son document HTML
Validateur HTML
Pour vérifier si votre code est valide ou pas, il suffit d’utiliser un validateur
de code HTML :
[Link]
[Link]
32/33 Mohammed Boumediene - INTTIC Technologies web 1
Valider son document HTML
Merci pour votre attention! Des Questions?
33/33 Mohammed Boumediene - INTTIC Technologies web 1