HTML
M. BOUMEDIENE
Institut National des Télécommunications et des Technologies
de l’Information et de la Communication
e-mail: mboumediene[at][Link]
04 avril 2021
1/34 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/34 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/34 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/34 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/34 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/34 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/34 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/34 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/34 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/34 Mohammed Boumediene - INTTIC Technologies web 1
Structure d’un document HTML
Métadonnées
Balises <meta. . . > procurent divers informations sur la page
7/34 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/34 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/34 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/34 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/34 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/34 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/34 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (1)
HTML nous offre la possibilité de formatter le texte selon notre souhait
12/34 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/34 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/34 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/34 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/34 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/34 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/34 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/34 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/34 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 (barré) <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/34 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 (barré) <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/34 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/34 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 i n s t r u c t i o n , c est l Etat
,→ 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/34 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/34 Mohammed Boumediene - INTTIC Technologies web 1
Contenu textuel
Contenu textuel (7)
Indiquer un code informatique <code> . . .</code>
<p r e><code>i n t TestValue ( i n t v a l ) {
int result = 1;...
i f ( v a l == 0 ) result = 0;...
return result ;...
</ code></p r e>
Indiquer un temps <time> . . .</time>
<t i m e>2017−11−18</ t i m e>
<t i m e>1 0 : 4 0</ t i m e>
<t i m e>2017 −11−18T10 : 4 0</ t i m e>
18/34 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>
19/34 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
20/34 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 filiale
,→ 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>
21/34 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>
22/34 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, s’il 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
23/34 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
24/34 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 ">
25/34 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 ">
26/34 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.
27/34 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
28/34 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>
29/34 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>
30/34 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>
<t d>05</ t d>
</ t r>
</ t b o d y>
<t f o o t>
<t r>
31/34 <t h c o l s p a n = " 2 ">T o t a l d e s Mohammed
a r t i c l e s Boumediene
= 15</ t h>
- 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
32/34 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]
33/34 Mohammed Boumediene - INTTIC Technologies web 1
Valider son document HTML
Merci pour votre attention! Des Questions?
34/34 Mohammed Boumediene - INTTIC Technologies web 1
