Atelier N°5: Image, Audio Et Vidéo en HTML5: Exercice 1

Institut Supérieur des Études Technologiques de Béja
Département Technologies de l’informatique
Matière : Atelier Développement Web 1 Niveau : 1ière année TI
Atelier N°5 : Image, Audio et vidéo en HTML5
Exercice 1 :
- Créer un dossier ex1

- Récupérer le dossier « poussin » et le copier sous ex1
- Créer une page HTML 5 émettant le contenu sonore d’un poussin
- Faire en sorte que :
• L’audio démarre automatiquement,
• L’audio reste en boucle
• Les contrôles d'avancement soient présents,
• En cas de non support de la part du navigateur, présenter un lien
permettant le téléchargement de l’audio
Exercice 2 :
- Créer un dossier « ex2 ». Récupérer le dossier « video » et le copier sous ex2

- Créer une page HTML affichant les vidéos contenus dans le dossier « video ».
- Faire en sorte que :
• Hauteur : 200px et largeur :300px
• Les contrôles d'avancement soient présents,
• En cas de non support de la part du navigateur, présenter un lien
permettant le téléchargement du fichier vidéo .
Exercice 3 :

- Récupérer le dossier « multimédia » puis le copier sous le dossier ex3
Page 1 sur 4
Atelier 3
- Créer sous le dossier ex3 un fichier « multi.html » qui va contenir un tableau (border=2,
width=90% ) de 3 lignes décrites comme suit :
o La 1èreligne contient le texte « Test multimédia », ce texte est en h3, de font rose.
o La 2ème ligne est divisée en 5 cellules comme suit :
nom image son video télécharger
o La 3èmeligne est divisée en 5 cellules contenant les informations concernant une

abeille et la 4ème ligne les informations d’une poule. Un clic sur l’image
« telecharger » permet de télécharger la video de l’animal correspondant
- La figure suivante vous donne une idée du résultat attendu
Voici les caractéristiques du document à créer :
Elément Description
audio width:150px, boutons de contrôle présents
video Poster : image de l’animal correspondant
width:300px, height:200px, boutons de contrôle présents
image "telechargement.jpg" width:150px; height:100px
Exercice 4 : (voir annexe)

- Récupérer le dossier « images » puis le copier sous le dossier ex4
Page 2 sur 4
Atelier 3
- Créer sous le dossier ex4 un document HTML « tableau_images.html » qui va contenir un

tableau de 2 lignes,la première ligne est de hauteur 150px, la deuxième ligne est de
hauteur 400%.
- La première ligne du tableau est composée de 4 cellules. Chaque cellule contient une
images (hauteur 150px, largeur 150px)
- L’image sélectionnée dans la première ligne du tableau sera affichée en grandeur réelle
dans la cellule de la deuxième ligne du tableau.
- La figure suivante vous donne une idée du résultat attendu
Exercice 5 :
- Créer un dossier ex5. Récupérer le dossier « map » et le copier sous ex5.

- Créer un fichier « exemple_map.html » sous ex5 dans lequel vous insérer le code suivant
dans le corps du document. Tester et expliquer le résultat obtenu.
<img src="map/planets.gif" width="145" height="126" alt="Planets"

usemap="#planetmap">
<mapname="planetmap">
<areashape="rect" coords="0,0,82,126" href="map/sun.gif" title="sun">
<area shape="circle" coords="90,58,3" href="map/mercur.gif" title="Mercury">
<area shape="circle" coords="124,58,8" href="map/venus.gif" title="Venus">
</map>
Page 3 sur 4
Atelier 3
Annexe : iframe
Un iframe en HTML est un cadre en ligne qui est marquée comme suit:
<iframe src="….. "></iframe>
Un cadre en ligne est utilisé pour incorporer un autre document dans le document HTML
en cours.
Exemple :
Soient 2 fichiers HTML : page1.html et page2.html. Nous voulons créer un fichier

liens.html contenant des liens HTML vers page1 et page2. Les deux pages vont être
affiché dans la page liens.html. Voici le code correspondant :
<body>
<a href="page1.html" target="fr"> Lien vers page1.html </a><br>
<a href="page2.html" target="fr"> Lien vers page2.html</a><br>
<iframename="fr" style="width:300px; height:300px"/>
</body>
Page 4 sur 4

Atelier N°5: Image, Audio Et Vidéo en HTML5: Exercice 1

Transféré par

Atelier N°5: Image, Audio Et Vidéo en HTML5: Exercice 1

Transféré par

Institut Supérieur des Études Technologiques de Béja

Département Technologies de l’informatique

Matière : Atelier Développement Web 1 Niveau : 1ière année TI

Atelier N°5 : Image, Audio et vidéo en HTML5

- Créer un dossier ex1

- Créer un dossier « ex2 ». Récupérer le dossier « video » et le copier sous ex2

- Créer un dossier ex3

o La 3èmeligne est divisée en 5 cellules contenant les informations concernant une

Voici les caractéristiques du document à créer :

Exercice 4 : (voir annexe)

- Créer un dossier ex4

- Créer sous le dossier ex4 un document HTML « tableau_images.html » qui va contenir un

- Créer un dossier ex5. Récupérer le dossier « map » et le copier sous ex5.

<img src="map/planets.gif" width="145" height="126" alt="Planets"

<areashape="rect" coords="0,0,82,126" href="map/sun.gif" title="sun">

<area shape="circle" coords="90,58,3" href="map/mercur.gif" title="Mercury">

<area shape="circle" coords="124,58,8" href="map/venus.gif" title="Venus">

<iframe src="….. "></iframe>

Soient 2 fichiers HTML : page1.html et page2.html. Nous voulons créer un fichier

<a href="page1.html" target="fr"> Lien vers page1.html </a><br>

<a href="page2.html" target="fr"> Lien vers page2.html</a><br>

<iframename="fr" style="width:300px; height:300px"/>

Vous aimerez peut-être aussi