3ième S.I.
Sciences et Technologies de l’Informatique
MEDIAS
1. <figure>
La balise <figure> spécifie un contenu autonome comme des illustrations, des diagrammes,
des photos, des listes de codes, etc …
L’élément <figcaption> ajoute une légende à l’élément <figure>.
<figcaption> peut être placé comme le premier ou le dernier élément de <figure>.
Exp. :
<figure>
<img src="logo1.jpg" alt="Logo1" width="300" height="250" />
<img src="logo2.jpg" alt="Logo2" width="300" height="250" />
<img src="logo3.jpg" alt="Logo3" width="300" height="250" />
<figcaption>Photos : 3 différents logos.</figcaption>
</figure>
2. <video>
L'élément HTML <video> intègre un contenu vidéo dans un document.
Exp. :
<video controls="true" width="250" src="video.mp4"
poster="photo.jpg" >
</video>
Rque : Si l'attribut « controls » n'est pas indiqué, la vidéo n'inclura pas les contrôles par
défaut du navigateur.
src L'URL du conteneur de la vidéo.
width, height Les dimensions de l'image.
L'URL d'une image à afficher en remplacement de la vidéo, en attendant qu'elle
poster
soit disponible. On utilise un frame de la vidéo.
Vaut true ou false, la valeur vrai déclenche le chargement en mémoire de la
autobuffer vidéo en même temps que la page, une option choisie quand on suppose qu'elle
sera obligatoirement vue.
autoplay Vaut true ou false, la valeur vrai démarre la vidéo quand la page est chargée.
loop Vaut true ou false, la valeur vrai fait tourner la vidéo en boucle.
Vaut true ou false, la valeur vrai indique que la barre de contrôle par défaut
controls
s'affiche, sinon le site définit sa propre barre.
Les CODECs :
Le codec est l'algorithme de COmpression et DECompression de la vidéo (ou COdage et
DECodage).
Mettre à jour vos navigateurs pour avoir les codecs à jour.
Exemples de codecs : Theora, H.264, VP8 et VP9, MPEG 4, …
Extensions utilisées : .webm, .mp4, .ogg, .avi, .mkv, …
3. Image Mappée, <map> et <area> :
1
3ième S.I. Sciences et Technologies de l’Informatique
L'élément HTML <map> est utilisé avec des éléments <area> afin de définir une image
cliquable divisée en régions.
Dans la balise <map>, on met les balises <area> qui définissent les zones cliquables dans
une image.
Rque : L’attribut « usemap » de la balise <img> est associé et identique à l’attribut
« name » de la balise <map>. Il crée une relation entre l’élément <map> et l’élément <img>.
Attribut de la balise <area>
Attribut Valeur Description
alt texte Texte alternatif à la zone <area>. Obligatoire si href est présent
coords coordonnées Indiquez les coordonnées de la géographique
href url Indiquez le lien hypertexte
default
rect
shape Indiquez la forme de votre zone <area>
circle
poly
_blank
_parent
target _self Indiquez le mode d’ouverture (nouvelle onglet …) du lien
_top
nom du iframe
Exp. 1 :
<img src="image.jpg" usemap="#map1" >
<map name="map1">
<area href="page1.html" shape="rect" coords="0,0,120,120">
</map>
Exp. 2 :
<img src="base.jpg" Width="500" Height="540" usemap="#map1" >
<map name="map1">
<area href="page1.htm" shape="circle" coords="240,180,140" >
<area href="page2.htm" shape="rect" coords="50,320,450,520">
</map>
Exp. 3 :
<img usemap="#infographic" src="mdn-info2.png" alt="MDN infographic" />
<map name="infographic">
<area shape="rect" coords="130,147,200,107 "
href="https://developer.mozilla.org"target="_blank" />
<area shape="poly" coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org"target="_blank" />
<area shape="circle" coords="145,25,60" href="page.htm" target="cible" />
</map>
Rque : On peut utiliser GIMP pour créer une image mappée : filtre/web/image cliquable web
4. <iframe>
2
3ième S.I. Sciences et Technologies de l’Informatique
iframe signifie « inline frame », en français cadre en ligne, il s'insère dans le flot du contenu
de la page.
Le tag <iframe> crée une zone intégrée (frame) sur la page Web, dans laquelle on peut
afficher le contenu d’un autre document ou page web.
Attribut Valeur Description
pixels
height Spécifie la hauteur d'un iframe.
%
pixels
width Spécifie la largeur d'un iframe.
%
0
frameborder Spécifie s'il y a une bordure autour d'un cadre ou non.
1
name name Spécifie le nom d'un cadre.
src URL Spécifie l'URL du document pour montrer dans un cadre.
Exp. 1 :
<iframe src="page_par_defaut.html" name="cadre1" width="320" height="200"
frameborder=0 >
Message à afficher si iframe n’est pas supporté par le navigateur
</iframe>
Exp. 2 :
<iframe src="cours.pdf" name="cadre2" width="500" height="800" frameborder=1 >
Message à afficher si iframe n’est pas supporté par le navigateur.
</iframe>
Rque : on peut insérer dans iframe une page web, un pdf, une video, …
Exp. :
