Scribd
Importer
12 vues4 pages

TPs HTML5 : Activités Pratiques Essentielles

Le document présente quatre travaux pratiques (TP) sur HTML5, chacun avec des objectifs spécifiques et des consignes de création de fichiers HTML. Les TPs incluent la création d'un CV structuré, d'une page de blog, d'un formulaire complet, et d'une page multimédia. Chaque TP est accompagné de questions de réflexion pour approfondir la compréhension des balises HTML utilisées.

Transféré par

Makrem Hammadi
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
12 vues4 pages

TPs HTML5 : Activités Pratiques Essentielles

Le document présente quatre travaux pratiques (TP) sur HTML5, chacun avec des objectifs spécifiques et des consignes de création de fichiers HTML. Les TPs incluent la création d'un CV structuré, d'une page de blog, d'un formulaire complet, et d'une page multimédia. Chaque TP est accompagné de questions de réflexion pour approfondir la compréhension des balises HTML utilisées.

Transféré par

Makrem Hammadi
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

TPs HTML5 - Activités Pratiques

TP 1 : Création d'un CV structuré en HTML5

Objectifs :
- Structurer une page avec les balises <header>, <section>, <article>, <footer>.
- Utiliser les balises de texte (<h1> à <h6>, <p>), de liste (<ul>, <li>), et d'image (<img>), lien (<a>).

Consigne :
Crée un fichier nommé [Link] contenant :
- Un <header> avec le nom, une photo (<img>) et le métier de la personne.
- Une <section> "Expériences professionnelles" avec plusieurs <article>.
- Une section "Formations" avec une liste <ul>.
- Un <footer> avec des informations de contact (<a href="[Link]

Code de départ :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon CV</title>
</head>
<body>

</body>
</html>

Questions de réflexion :
1. Quelle est la différence entre <section> et <article> ?
2. Quelle balise utiliser pour une image avec légende ?
TPs HTML5 - Activités Pratiques

TP 2 : Page de blog avec structure sémantique

Objectifs :
- Comprendre les balises <nav>, <aside>, <figure>, <figcaption>, <time>.

Consigne :
Créer [Link] avec :
- <header> contenant le titre du blog.
- <nav> pour les liens de navigation.
- <article> avec un <figure> (image + légende), un paragraphe et une <time>.
- <aside> listant des articles recommandés.
- <footer> avec la mention "© 2025 Mon blog".

Code de départ :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Blog</title>
</head>
<body>

</body>
</html>

Questions de réflexion :
1. Quand faut-il utiliser <aside> ?
2. Quelle est la différence entre <figure> et <img> seul ?
TPs HTML5 - Activités Pratiques

TP 3 : Formulaire HTML5 complet

Objectifs :
- Utiliser les balises <form>, <input>, <label>, <textarea>, <select>, <option>, <fieldset>, <legend>.

Consigne :
Créer [Link] contenant :
- Un formulaire avec nom, email, mot de passe, sexe (radio), pays (select), bio (textarea), photo (file).
- Boutons pour soumettre et réinitialiser.

Code de départ :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire d'inscription</title>
</head>
<body>

</body>
</html>

Questions de réflexion :
1. Quelle est la différence entre <textarea> et <input type="text"> ?
2. Pourquoi utiliser <label> avec <input> ?
TPs HTML5 - Activités Pratiques

TP 4 : Multimédia et balises interactives

Objectifs :
- Apprendre à utiliser <video>, <audio>, <source>, <track>, <details>, <summary>, <progress>, <meter>.

Consigne :
Créer [Link] contenant :
- Une vidéo (avec <video> et <source>), une bande sonore (<audio>).
- Une FAQ utilisant <details> et <summary>.
- Un <progress> pour simuler le téléchargement.
- Un <meter> indiquant un niveau de satisfaction.

Code de départ :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Médias HTML5</title>
</head>
<body>

</body>
</html>

Questions de réflexion :
1. Quelle est la différence entre <progress> et <meter> ?
2. À quoi sert <details>/<summary> ?

Vous aimerez peut-être aussi