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 :
- Créer un dossier ex3
- 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 « [Link] » 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 "[Link]" width:150px; height:100px
Exercice 4 : (voir annexe)
- Créer un dossier ex4
- 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/[Link]" width="145" height="126" alt="Planets"
usemap="#planetmap">
<mapname="planetmap">
<areashape="rect" coords="0,0,82,126" href="map/[Link]" title="sun">
<area shape="circle" coords="90,58,3" href="map/[Link]" title="Mercury">
<area shape="circle" coords="124,58,8" href="map/[Link]" 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 : [Link] et [Link]. Nous voulons créer un fichier
[Link] contenant des liens HTML vers page1 et page2. Les deux pages vont être
affiché dans la page [Link]. Voici le code correspondant :
<body>
<a href="[Link]" target="fr"> Lien vers [Link] </a><br>
<a href="[Link]" target="fr"> Lien vers [Link]</a><br>
<iframename="fr" style="width:300px; height:300px"/>
</body>
Page 4 sur 4