Scribd
Importer
217 vues9 pages

TD1 HTML5

Ce document contient 13 exercices portant sur la structuration de pages HTML5 à l'aide d'éléments comme le header, le nav, l'aside, la section, l'article et le footer. Les exercices couvrent également la mise en forme de texte, l'affichage de médias comme l'audio, la vidéo et les images, ainsi que les tables et liens internes et externes.

Transféré par

Amel Tilouche
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
217 vues9 pages

TD1 HTML5

Ce document contient 13 exercices portant sur la structuration de pages HTML5 à l'aide d'éléments comme le header, le nav, l'aside, la section, l'article et le footer. Les exercices couvrent également la mise en forme de texte, l'affichage de médias comme l'audio, la vidéo et les images, ainsi que les tables et liens internes et externes.

Transféré par

Amel Tilouche
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 9

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 :
http://validator.w3.org/

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
"https://toulibre.org/pub/2012-02-29-
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 « planetes.jpg » 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

Vous aimerez peut-être aussi