Institut Supérieur des Etudes Cours : Développement Web et Multimédia
Technologiques - Mahdia Enseignante : Mme Amel Tilouche
Département Technologies de Classe : LI1
l’Informatique
Travaux Dirigés n°1
HTML 5
Exercice 1 : Structuration d’une page HTML 5 qui affiche :
Un bloc d'entête contenant un groupe de titres h1 et h2 contenant successivement les
titres suivants :
o Structuration d’une page HTML5
o Présentation HTML5
Un bloc de navigation permettant d'accéder aux sections définies au niveau de la figure
ci-dessous.
Les 3 sections génériques pouvant correspondre aux chapitres d’un cours.
Un bloc de pied contenant un lien vers le site de validation W3C :
[Link]
Page 1 sur 9
Exercice 2 : Structuration d’une page HTML 5 qui
Écrire une page HTML 5 qui affiche :
Un titre de premier niveau h1,
Un bloc de contenu de type aside,
Un bloc de navigation nav contenant 4 liens internes.
Exercice 3 : Mise en forme du texte
Écrire une page HTML qui affiche :
un texte important (strong),
un texte sur lequel on met l'accent (em),
un texte en mode échantillon de code (samp),
un texte en mode citation (cite),
un texte en mode apostrophe (q),
un texte en mode insertion (ins),
un texte en mode suppression (del),
un texte en mode définition (dfn),
un texte en mode acronyme (acronym),
un texte en mode abréviation (abbr),
un texte en mode variable (var),
un texte en mode saisie clavier (kbd),
un texte en mode apostrophe en bloc (blockquote),
un texte en mode adresse (address),
un texte en mode code source (code).
Page 2 sur 9
Exercice 4 : Affichage de grandeurs dans une page HTML 5
Écrire une page HTML 5 qui affiche :
un titre (h1)),
une grandeur de valeur 30 par rapport au min de 0 et au max de 100% (meter),
une grandeur de valeur 3/4 sans préciser de limites (meter),
une grandeur de valeur médiane 50 par rapport au min de 0 et au max de 100 (meter)
la valeur basse sera positionnée à 55 et la valeur haute sera positionnée à 90,
une barre de progression de valeur 80% (progress),
la date de ce jour (time),
une zone de texte en surlignage (mark),
Page 3 sur 9
Exercice 5 : Ancres internes
Écrire une page HTML qui présente des liens sur des ancres internes à la page.
Faire en sorte que cette page soit suffisamment longue afin d'éviter que liens et ancres soient
simultanément visibles.
Exercice 6 : Ancres internes et externes
Écrire une page HTML qui présente :
un lien sur la page de l'exercice précédent.
des liens sur les ancres de la page de l'exercice précédent.
un lien interne à la page.
Page 4 sur 9
Exercice 7 : Audio
Écrire une page HTML 5.0 émettant le contenu sonore d’un fichier audio de votre choix.
Faire en sorte que :
Les contrôles d'avancement soient présents,
La musique démarre automatiquement,
La musique tourne en boucle,
En cas de non-support de la part du navigateur, présenter un lien permettant le
chargement du fichier.
Page 5 sur 9
Exercice 8 : Vidéo
Écrire une page affichant la vidéo du fichier se trouvant sur cette adresse
"[Link]
rencontre/presentation/exercices/exos_01_html5/120_multimedia/Big_buck_bunn
y_mcu.ogv"
Faire en sorte que :
Les contrôles d'avancement soient présents,
La vidéo soit automatiquement chargée dès l'ouverture de la page,
La vidéo tourne en boucle.
Une image poster s’affiche au chargement de la page.
Exercice 9 : Images réactives
Créer un document HTML contenant une image réactive « [Link] » dans lequel un clic
sur un planète ouvre une nouvelle fenêtre avec la page web de Wikipédia correspondante.
Pour vous faciliter la tâche, les coordonnées des zones (cercles) pour chaque planète sont
indiquées ci-dessous.
Mercure : coords="50,140,36"
Venus : coords="199,140,89"
Terre : coords="405,142,95"
Mars : coords="571,140,50"
Page 6 sur 9
Exercice 10 : Tableaux
Ecrire le code HTML permettant de créer le tableau structuré suivant :
Exercice 11
Ecrire le code HTML permettant de créer la page web suivante :
Page 7 sur 9
Exercice 12
Ecrire le code HTML permettant de créer la page web suivante :
Page 8 sur 9
Exercice 13
Ecrire le code HTML permettant de créer la page web suivante :
Header
nav
aside
section
article
footer
Page 9 sur 9