1
HTML: CHAPITRE 2
Mr CHAOULID
Insérer des images
2
Syntaxe :
<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve
à l'adresse... (Il n'y a pas de balise de fin !)
Les 2 formats les plus répandus du net : GIF et
JPEG.
La balise image possède de nombreux attributs.
Mr CHAOULID
Insérer des images
3
Attribut Description
Src Source de l’image
Alt Texte alternatif
width Hauteur en pixel
height Largeur en pixel
Style=« propriété:valeur » Style à appliquer sur l’image
usemap Image mappée
Mr CHAOULID
Insérer des images
4
Exemple:
<img src="[Link]" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
Mr CHAOULID
Insérer des images
5
Démonstration
Mr CHAOULID
L’attribut usemap
6
Ce sont des images qui contiennent plusieurs hyperliens
activés en fonction de la zone sur laquelle l’internaute clique.
Pour définir une zone cliquable, il faut fixer :
• sa forme : rect, circle, polygon,
• ses coordonnées :
- rectangle (coins supérieur gauche et inférieur droit),
- cercle (centre et rayon),
- polygone (coordonnées des points ; 3 minimum),
• le lien associé à la zone.
Mr CHAOULID
L’attribut usemap
7
Exemple:
<img src="[Link]" alt="Planets" usemap="#planetmap"
style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="[Link]">
<area shape="circle" coords="90,58,3" alt="Mercury" href="[Link]">
<area shape="circle" coords="124,58,8" alt="Venus" href="[Link]">
</map>
Mr CHAOULID
Insérer des vidéos
8
En HTML5, pour insérer une vidéo, utiliser la balise
« video »
Seuls les formats mp4,webM,ogg sont supportés en HTML5
Syntaxe:
<video attr1=« valeur » attr2=« valeur2 »..>..</video>
La balise video posséde plusieurs attributs et sous balise.
Mr CHAOULID
Insérer des vidéos
9
Attribut Description
width Hauteur en pixel
height Largeur en pixel
autoplay Démarrage automatique de la vidéo
controls Afficher les contrôles (pause, arrêter,..)
Sous balise Description
Source Source de la vidéo
Mr CHAOULID
Insérer des vidéos
10
Exemple
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
Mr CHAOULID
Insérer des vidéos
11
Démonstration
Mr CHAOULID
Insérer une audio
12
En HTML5, pour insérer une audio, utiliser la balise
« audio »
Seuls les formats mp3,wav,ogg sont supportés en HTML5.
Syntaxe:
<audio attr1=« valeur » attr2=« valeur2 »>..</audio>
La balise audio posséde plusieurs attributs et sous balise.
Mr CHAOULID
Insérer une audio
13
Attribut Description
autoplay Démarrage automatique de la vidéo
controls Afficher les contrôles (pause, arrêter,..)
Sous balise Description
Source Source de la vidéo
Mr CHAOULID
Insérer une audio
14
Exemple
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Mr CHAOULID
Insérer une audio
15
Démonstration
Mr CHAOULID
Intégrer une vidéo Youtube
16
Exemple:
<iframe width="854" height="480"
src="[Link]
N8"
frameborder="0"
allowfullscreen>
</iframe>
Mr CHAOULID
17
FIN
Mr CHAOULID