Exercices HTML5 Avancés

Section 1 : Commerce Électronique et Catalogues

1. Catalogue de produits interactif : Créez une page de catalogue. Chaque produit doit être
dans une ligne de tableau (<tr>). Chaque cellule doit contenir : une image du produit
(lien cliquable), le nom du produit (<h3>), une description formatée (<p> avec <strong>),
une liste de caractéristiques (<ul> imbriqué), et un formulaire d'achat avec un champ de
quantité (<input type="number">) et un bouton "Ajouter au panier".
2. Fiche produit détaillée : Créez une page pour un produit spécifique. Affichez une grande
image du produit. Utilisez un tableau pour ses spécifications techniques (avec <th> pour
les en-têtes). Incluez une liste ordonnée (<ol>) d'avis clients. En bas, ajoutez un
formulaire de contact pour des questions, avec des champs de texte, un textarea pour le
message, et un lien vers la politique de confidentialité.
3. Tableau des promotions : Concevez un tableau de promotions. La première ligne doit
utiliser <th> pour les en-têtes de colonnes (Catégorie, Produit, Prix, Promotion). Le
tableau doit inclure une cellule fusionnée (rowspan) pour une catégorie de produit
spéciale. Chaque produit doit être un lien vers sa fiche détaillée. La description de chaque
promotion doit être en italique (<em>).
4. Page de panier d'achat : Créez une page de panier d'achat. Utilisez un tableau pour lister
les articles (<th>, <tr>, <td>). Chaque ligne doit inclure un lien pour "Supprimer
l'article", une image miniature, le nom de l'article, un formulaire de mise à jour de la
quantité, et le prix. Le bas du tableau doit utiliser un <tfoot> pour afficher le total.
5. Comparateur de produits : Créez une page de comparateur. Utilisez un tableau avec des
en-têtes de colonne pour les produits (avec colspan) et des en-têtes de ligne pour les
caractéristiques (<th>). Affichez une petite image pour chaque produit et une liste non
ordonnée (<ul>) pour les avantages. Les liens des produits doivent s'ouvrir dans un
nouvel onglet.
6. Page de validation de commande : Créez un formulaire complexe de validation de
commande. Il doit inclure un tableau récapitulatif des articles (<th>, <tr>, <td>), des
champs pour les informations de livraison et de paiement, des listes déroulantes pour les
options de livraison (<select>), et des champs masqués (<input type="hidden">). Un
lien "Retour au panier" doit être présent.
7. Catalogue par catégories : Créez une page d'index de catégories. Utilisez une liste non
ordonnée (<ul>) où chaque élément de liste est une catégorie de produits. À l'intérieur de
chaque <li>, utilisez un tableau pour afficher trois produits populaires de cette catégorie.
Les produits doivent avoir une image et un lien.
8. Liste de souhaits : Créez une page de liste de souhaits. Affichez les articles dans un
tableau avec un en-tête de colonne pour "Article", "Prix" et "Actions". Chaque ligne
d'article doit contenir une image, un lien vers le produit, une liste non ordonnée (<ul>) de
ses points forts et un lien "Ajouter au panier".
9. Page de recherche : Créez une page de résultats de recherche. Affichez les résultats sous
forme de tableau, avec une colonne pour les images et une autre pour le titre et la
description. Le titre doit être un lien, et la description doit contenir un mot mis en
évidence (<strong>) correspondant au terme de recherche.
 10. Avis produits avancés : Créez une page d'avis pour un produit. Utilisez un tableau pour
la notation globale (avec <th> pour les critères). En dessous, listez les avis individuels
dans une liste ordonnée (<ol>). Chaque <li> doit contenir le nom de l'auteur (<strong>),
la date (<time>) et le contenu de l'avis (<p>). Un formulaire d'envoi d'avis doit être
présent.

Section 2 : Portfolios et Galeries

11. Portfolio de projets : Créez une page de portfolio. Utilisez un tableau pour afficher vos
projets. Chaque cellule doit contenir une image miniature du projet, un titre (<h3>) qui est
un lien, et une courte description. La première ligne du tableau doit utiliser <th> pour
indiquer le type de projet (e.g., "Web Design", "Mobile App").
12. Galerie d'images avec légende : Créez une galerie d'images. Utilisez une liste non
ordonnée (<ul>). Chaque élément de liste (<li>) doit contenir une image avec une balise
<figcaption> (titre) et un lien vers la version haute résolution de l'image.
13. Page de profil d'artiste : Créez une page de profil. Utilisez un en-tête <h1>. Affichez une
photo de profil et une courte biographie formatée en paragraphes. Créez un tableau pour
lister les expositions passées (rowspan pour les villes). Incluez des liens vers ses réseaux
sociaux dans une liste.
14. Blog de voyage : Créez une page de blog. Utilisez des titres (<h2>, <h3>). Chaque article
doit contenir une image du lieu, une date (<time>), et un lien "Lire la suite". En bas de la
page, un formulaire de commentaire avec des champs pour le nom, l'email et un
textarea pour le message.
15. CV en ligne : Créez un CV en ligne. Utilisez une liste non ordonnée pour les sections
principales (Contact, Expérience, Éducation). Pour l'expérience, utilisez une liste
imbriquée (<ul> dans <li>) pour détailler les missions. Le contenu doit utiliser des
balises de formatage comme <strong> et <em>. Un lien pour "Télécharger le CV en PDF"
doit être présent.
16. Galerie de photos thématiques : Créez une galerie de photos. Utilisez un tableau pour
organiser les images par thème. Chaque cellule <td> contient une image et une courte
description. Les en-têtes de ligne (<th>) doivent être les thèmes. Fusionnez des cellules
(colspan) pour un titre global de la galerie.
17. Liste de ressources : Créez une page de ressources. Utilisez une liste de description
(<dl>) pour des termes et leurs définitions. Un lien vers chaque ressource doit être
présent. Le formatage doit inclure <blockquote> pour les citations et <code> pour des
exemples de code.
18. Page de contact complète : Créez une page de contact. Un formulaire doit inclure des
champs pour le nom, l'email, le sujet et le message. En dessous du formulaire, utilisez un
tableau pour lister les contacts par service (avec des en-têtes <th> et des adresses email
cliquables).
19. Page d'événements : Créez une page pour un événement. Utilisez un tableau pour le
programme (heure, activité, lieu). Fusionnez des cellules (rowspan) pour les activités
s'étendant sur plusieurs heures. Incluez des images des lieux et des liens vers des sites
d'inscription.
20. Tutoriel de recette : Créez une page de recette. Utilisez un titre <h1>. Listez les
ingrédients dans un <ul>. Pour les instructions, utilisez une <ol>. Chaque étape doit avoir
 un lien vers un petit formulaire où l'utilisateur peut noter l'étape (<input
type="radio">).

Section 3 : Sites d'Information et Formulaires de Données

21. Tableau de données scientifiques : Créez un tableau de données. Utilisez un en-tête de

tableau (<thead>) pour les titres de colonnes et un corps de tableau (<tbody>) pour les
données. Fusionnez des cellules pour des catégories (colspan). Un lien vers la source des
données doit être présent en bas.
22. Formulaire d'inscription complexe : Créez un formulaire d'inscription. Il doit inclure
des champs de texte, de date, de mot de passe, de cases à cocher (<input
type="checkbox>), et des boutons radio. En dessous, listez les conditions d'utilisation
dans un <ul> avec des liens vers les sections correspondantes.
23. Page de rapport annuel : Créez une page pour un rapport. Utilisez des titres et des
paragraphes. Incluez un tableau pour les données financières (<th>, <td>). Ajoutez une
image et une légende pour un graphique. Un lien de téléchargement du rapport complet
(<a href="..." download>) doit être présent.
24. Quiz interactif : Créez une page de quiz. Utilisez un formulaire pour les questions. Les
questions à choix multiples doivent être des boutons radio, et celles à choix multiples des
cases à cocher. Affichez une image par question. Un lien vers les explications de chaque
réponse doit être présent.
25. Page de FAQ : Créez une page de FAQ. Utilisez une liste de description (<dl>). La
question (<dt>) doit être un lien menant à la réponse (<dd>) sur la même page, et la
réponse doit contenir des paragraphes et des liens.
26. Tableau de gestion de projet : Créez un tableau de bord de projet. Le tableau doit lister
les tâches (<th>, <td>). Utilisez colspan pour des tâches qui couvrent plusieurs membres
de l'équipe. Incluez des liens vers des documents pertinents.
27. Formulaire de sondage : Créez un formulaire de sondage. Il doit contenir des champs
d'entrée, des listes déroulantes, des boutons radio et des cases à cocher. Le formulaire doit
également contenir un tableau pour lister les choix de réponses possibles.
28. Page de glossaire : Créez une page de glossaire. Utilisez un tableau avec deux colonnes :
"Terme" (<th>) et "Définition" (<th>). Chaque terme doit être un lien d'ancrage (<a
href="#terme">) pour une navigation rapide. Les définitions peuvent contenir du texte
formaté (<em>) et des liens externes.
29. Article de blog avec tableaux de données : Créez un article. Il doit comporter un titre,
des paragraphes (<p>), une image, et un ou plusieurs tableaux de données. Ces tableaux
doivent utiliser <th> pour les en-têtes de colonnes et <tfoot> pour des totaux.
30. Formulaire de prise de rendez-vous : Créez un formulaire de rendez-vous. Il doit
contenir des champs pour le nom, le prénom, l'email, le téléphone et un calendrier
(<input type="date">). Listez les services disponibles dans une liste non ordonnée
(<ul>) et donnez un lien pour chaque service afin de voir les détails.

Section 4 : Applications Web et Interfaces Utilisateur

31. Tableau des prix : Créez une page de tarification. Utilisez un tableau pour présenter les
différents plans. Les en-têtes de colonnes (<th>) doivent être les noms des plans. Chaque
 plan doit avoir une liste de fonctionnalités (<ul>) et un bouton "S'inscrire" (lien). Un plan
doit être mis en évidence avec un attribut class.
32. Formulaire de recherche avancée : Créez un formulaire de recherche. Il doit contenir
des champs pour mots-clés, des cases à cocher pour les catégories, des boutons radio pour
le type de contenu et une liste déroulante pour la date. Incluez un lien vers la page d'aide.
33. Interface de tableau de bord : Créez une maquette d'interface de tableau de bord.
Utilisez un tableau principal avec colspan et rowspan pour simuler des widgets. Chaque
cellule doit contenir un titre (<h3>) et une liste de tâches (<ul>). Un widget peut contenir
un formulaire de mise à jour.
34. Page de documentation technique : Créez une page de documentation. Utilisez un
tableau de matières en tant que liste imbriquée (<ul>). Chaque élément de la liste est un
lien vers une section (<a href="#section">). Chaque section doit contenir des titres,
des paragraphes et des exemples de code dans la balise <code>.
35. Formulaire de commande de pizza : Créez un formulaire de commande de pizza.
Utilisez un formulaire avec des champs pour la taille de la pizza (<input
type="radio>), la croûte (<select>) et les ingrédients. Pour les ingrédients, utilisez des
cases à cocher (<input type="checkbox>) groupées dans une liste imbriquée (<ul>). Un
tableau de prix doit être affiché à côté.
36. Page de galerie vidéo : Créez une page pour une galerie vidéo. Utilisez un tableau.
Chaque cellule <td> doit contenir une miniature de la vidéo (image cliquable), une courte
description et un lien "Regarder maintenant".
37. Tableau de planification d'événements : Créez un tableau de planification. Utilisez
colspan pour des événements qui durent plusieurs jours et rowspan pour ceux qui durent
plusieurs heures. Le tableau doit inclure des en-têtes (<th>) pour les jours et les heures.
38. Formulaire de feedback : Créez un formulaire de feedback pour un site web. Il doit
avoir des champs de texte, un textarea pour le commentaire et des boutons radio pour la
note de satisfaction. Une liste non ordonnée (<ul>) doit être utilisée pour lister les points
sur lesquels l'utilisateur peut donner son avis, avec des liens vers les sections pertinentes
du site.
39. Page d'historique de commandes : Créez une page pour l'historique des commandes
d'un utilisateur. Utilisez un tableau avec <thead>, <tbody> et <tfoot>. Le <tbody> doit
lister les commandes, et le <tfoot> le total des dépenses. Chaque commande doit être un
lien vers sa page de détails.
40. Tableau de classement sportif : Créez un tableau de classement pour une ligue sportive.
Le tableau doit lister les équipes avec leurs statistiques (victoires, défaites). Utilisez <th>
pour les en-têtes et <em> pour les statistiques clés. Un lien vers le profil de chaque équipe
doit être présent.

Solutions des Exercices

Section 1 : Commerce Électronique et Catalogues

1. Catalogue de produits interactif

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Catalogue de Produits</title>
</head>
<body>
<h1>Catalogue de Produits</h1>
<table>
<thead>
<tr>
<th colspan="2">Produit</th>
<th>Caractéristiques</th>
<th>Prix</th>
<th>Achat</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="[Link]"><img src="images/[Link]"
alt="Téléviseur 4K" width="150" height="150"></a></td>
<td>
<h3><a href="[Link]">Téléviseur 4K Ultra
HD</a></h3>
<p>Ce téléviseur offre une qualité d'image **incroyable**
et un son <em>immersif</em>. Idéal pour le cinéma à domicile.</p>
</td>
<td>
<ul>
<li>Écran : 55"</li>
<li>Résolution : 3840x2160</li>
<li>
Connectivité :
<ul>
<li>HDMI x 4</li>
<li>USB x 2</li>
</ul>
</li>
</ul>
</td>
<td><p>799,99 €</p></td>
<td>
<form action="#" method="post">
<label for="qty1">Quantité :</label>
<input type="number" id="qty1" name="quantity"
value="1" min="1">
<button type="submit">Ajouter au panier</button>
</form>
</td>
</tr>
<tr>
<td><a href="[Link]"><img src="images/[Link]"
alt="Casque audio sans fil" width="150" height="150"></a></td>
<td>
 <h3><a href="[Link]">Casque Audio
Bluetooth</a></h3>
<p>Un casque au son <em>cristallin</em> avec une autonomie
de batterie **longue durée**.</p>
</td>
<td>
<ul>
<li>Autonomie : 30h</li>
<li>Réduction de bruit : Active</li>
<li>
Couleurs :
<ul>
<li>Noir</li>
<li>Blanc</li>
</ul>
</li>
</ul>
</td>
<td><p>149,99 €</p></td>
<td>
<form action="#" method="post">
<label for="qty2">Quantité :</label>
<input type="number" id="qty2" name="quantity"
value="1" min="1">
<button type="submit">Ajouter au panier</button>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>

2. Fiche produit détaillée

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Téléviseur 4K - Fiche Produit</title>
</head>
<body>
<h1>Téléviseur 4K Ultra HD</h1>
<p><img src="images/produit1_large.jpg" alt="Téléviseur 4K Ultra HD"
width="500"></p>
<h2>Spécifications techniques</h2>
<table>
<thead>
<tr>
<th>Caractéristique</th>
<th>Détails</th>
</tr>
</thead>
<tbody>
 <tr>
<th>Écran</th>
<td>55 pouces LED</td>
</tr>
<tr>
<th>Résolution</th>
<td>3840 x 2160 pixels (4K)</td>
</tr>
<tr>
<th>Connectivité</th>
<td>HDMI, USB, Wi-Fi</td>
</tr>
</tbody>
</table>
<h2>Avis des clients</h2>
<ol>
<li>
<p><strong>Marie D.</strong> - "Image incroyable, son de haute
qualité. Je le recommande vivement !"</p>
</li>
<li>
<p><strong>Jean L.</strong> - "Facile à installer et à utiliser.
La navigation est fluide."</p>
</li>
<li>
<p><strong>Pierre G.</strong> - "Bon rapport qualité-prix. Parfait
pour regarder des films."</p>
</li>
</ol>
<hr>
<h2>Contactez-nous pour toute question</h2>
<form action="#" method="post">
<label for="name">Nom :</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email :</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message :</label><br>
<textarea id="message" name="message" rows="5" cols="40"
required></textarea><br><br>
<button type="submit">Envoyer</button>
</form>
<p><small><a href="[Link]">Politique de
confidentialité</a></small></p>
</body>
</html>

3. Tableau des promotions

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Promotions en Cours</title>
</head>
<body>
<h1>Promotions de la semaine</h1>
<table>
<thead>
<tr>
<th>Catégorie</th>
<th>Produit</th>
<th>Prix Original</th>
<th colspan="2">Promotion</th>
</tr>
</thead>
<tbody>
<tr>
<td>Électroménager</td>
<td><a href="produit_lave-[Link]">Lave-linge
intelligent</a></td>
<td>650 €</td>
<td>30% de réduction</td>
<td><p><em>Valable jusqu'à vendredi</em></p></td>
</tr>
<tr>
<td>Audio</td>
<td><a href="produit_enceinte.html">Enceinte
connectée</a></td>
<td>120 €</td>
<td colspan="2"><p><em>Une housse offerte !</em></p></td>
</tr>
<tr>
<td rowspan="2">Informatique</td>
<td><a href="produit_pc.html">PC portable</a></td>
<td>900 €</td>
<td colspan="2"><p>20% de réduction</p></td>
</tr>
<tr>
<td><a href="produit_clavier.html">Clavier mécanique</a></td>
<td>80 €</td>
<td colspan="2"><p>10% de réduction + livraison
gratuite</p></td>
</tr>
</tbody>
</table>
</body>
</html>

4. Page de panier d'achat

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Votre Panier</title>
</head>
<body>
<h1>Mon Panier</h1>
 <table>
<thead>
<tr>
<th>Produit</th>
<th>Prix Unitaire</th>
<th>Quantité</th>
<th>Total</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/produit1_mini.jpg" alt="Téléviseur"
width="50"> <a href="[Link]">Téléviseur 4K</a></td>
<td>799.99 €</td>
<td>
<form action="#" method="post">
<input type="number" name="qty1" value="1" min="1">
<button type="submit">Mettre à jour</button>
</form>
</td>
<td>799.99 €</td>
<td><a href="#">Supprimer</a></td>
</tr>
<tr>
<td><img src="images/produit2_mini.jpg" alt="Casque"
width="50"> <a href="[Link]">Casque Audio</a></td>
<td>149.99 €</td>
<td>
<form action="#" method="post">
<input type="number" name="qty2" value="2" min="1">
<button type="submit">Mettre à jour</button>
</form>
</td>
<td>299.98 €</td>
<td><a href="#">Supprimer</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total du panier :</td>
<td colspan="2">1099.97 €</td>
</tr>
</tfoot>
</table>
<p><a href="[Link]">Passer la commande</a></p>
</body>
</html>

5. Comparateur de produits

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
<title>Comparateur de Smartphones</title>
</head>
<body>
<h1>Comparaison de Smartphones</h1>
<table>
<thead>
<tr>
<th colspan="2">Caractéristiques</th>
<th><a href="[Link]" target="_blank">Téléphone
A</a><br><img src="images/[Link]" alt="Téléphone A" width="100"></th>
<th><a href="[Link]" target="_blank">Téléphone
B</a><br><img src="images/[Link]" alt="Téléphone B" width="100"></th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Performance</th>
<th>Processeur</th>
<td>Chip A15 Bionic</td>
<td>Snapdragon 8 Gen 2</td>
</tr>
<tr>
<th>Mémoire vive</th>
<td>8 Go</td>
<td>12 Go</td>
</tr>
<tr>
<th rowspan="2">Écran</th>
<th>Type</th>
<td>OLED</td>
<td>AMOLED</td>
</tr>
<tr>
<th>Taille</th>
<td>6.1"</td>
<td>6.7"</td>
</tr>
<tr>
<th colspan="2">Avantages</th>
<td>
<ul>
<li><p>Excellente qualité photo</p></li>
<li><p>Écosystème intégré</p></li>
</ul>
</td>
<td>
<ul>
<li><p>Batterie longue durée</p></li>
<li><p>Recharge rapide</p></li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
6. Page de validation de commande

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Validation de Commande</title>
</head>
<body>
<h1>Finaliser votre commande</h1>
<h2>Récapitulatif des articles</h2>
<table>
<thead>
<tr>
<th>Article</th>
<th>Prix</th>
<th>Quantité</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="produit_chaussures.html">Chaussures de
randonnée</a></td>
<td>120 €</td>
<td>1</td>
<td>120 €</td>
</tr>
<tr>
<td><a href="produit_sac.html">Sac à dos</a></td>
<td>60 €</td>
<td>1</td>
<td>60 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Sous-total :</td>
<td>180 €</td>
</tr>
<tr>
<td colspan="3">Livraison :</td>
<td>5 €</td>
</tr>
<tr>
<td colspan="3"><strong>Total :</strong></td>
<td><strong>185 €</strong></td>
</tr>
</tfoot>
</table>
<hr>
<form action="#" method="post">
<h2>Informations de livraison</h2>
 <input type="text" name="nom" placeholder="Nom Complet"
required><br><br>
<input type="email" name="email" placeholder="Email" required><br><br>
<select name="livraison">
<option value="standard">Livraison standard (5€)</option>
<option value="express">Livraison express (10€)</option>
</select><br><br>
<input type="hidden" name="order_id" value="12345">
<button type="submit">Confirmer la commande</button>
</form>
<p><a href="[Link]">Retour au panier</a></p>
</body>
</html>

7. Catalogue par catégories

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Catalogue par Catégories</title>
</head>
<body>
<h1>Notre Catalogue</h1>
<ul>
<li>
<h2>Électronique</h2>
<table>
<tr>
<td><a href="produit_smartphone.html"><img
src="images/[Link]" alt="Smartphone"></a></td>
<td><a href="produit_tablette.html"><img
src="images/[Link]" alt="Tablette"></a></td>
<td><a href="produit_montre.html"><img
src="images/[Link]" alt="Montre connectée"></a></td>
</tr>
</table>
</li>
<li>
<h2>Mode</h2>
<table>
<tr>
<td><a href="produit_robe.html"><img src="images/[Link]"
alt="Robe"></a></td>
<td><a href="produit_chemise.html"><img
src="images/[Link]" alt="Chemise"></a></td>
<td><a href="produit_jean.html"><img src="images/[Link]"
alt="Jean"></a></td>
</tr>
</table>
</li>
</ul>
</body>
</html>
8. Liste de souhaits

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Liste de Souhaits</title>
</head>
<body>
<h1>Ma Liste de Souhaits</h1>
<table>
<thead>
<tr>
<th>Article</th>
<th>Prix</th>
<th>Points Forts</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/[Link]" alt="Aspirateur"
width="80"><br><a href="produit_aspirateur.html">Aspirateur Robot</a></td>
<td>350 €</td>
<td>
<ul>
<li>Autonome</li>
<li>Détecteurs de vide</li>
<li>Retourne seul à la base</li>
</ul>
</td>
<td><a href="#">Ajouter au panier</a></td>
</tr>
<tr>
<td><img src="images/machine_cafe.jpg" alt="Machine à café"
width="80"><br><a href="produit_machine.html">Machine à Café
Automatique</a></td>
<td>200 €</td>
<td>
<ul>
<li><p>Broyeur intégré</p></li>
<li><p>5 types de boissons</p></li>
</ul>
</td>
<td><a href="#">Ajouter au panier</a></td>
</tr>
</tbody>
</table>
</body>
</html>

9. Page de recherche
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Résultats de Recherche pour "ordinateur"</title>
</head>
<body>
<h1>Résultats de recherche pour "ordinateur"</h1>
<table>
<tr>
<td><img src="images/ordinateur_portable.jpg" alt="Ordinateur
portable" width="100"></td>
<td>
<h3><a href="produit_portable.html">Ordinateur portable ultra
fin</a></h3>
<p>Un **ordinateur** puissant pour le travail et les loisirs.
Écran 15 pouces.</p>
</td>
</tr>
<tr>
<td><img src="images/ordinateur_bureau.jpg" alt="Ordinateur de
bureau" width="100"></td>
<td>
<h3><a href="produit_bureau.html">Ordinateur de bureau de
gaming</a></h3>
<p>Ce puissant **ordinateur** est conçu pour les jeux vidéo et
le montage vidéo.</p>
</td>
</tr>
</table>
</body>
</html>

10. Avis produits avancés

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Avis sur le produit</title>
</head>
<body>
<h1>Avis sur le produit : Appareil photo numérique</h1>
<h2>Notation globale</h2>
<table>
<tr>
<th>Critère</th>
<th>Note (sur 5)</th>
</tr>
<tr>
<td>Qualité de l'image</td>
<td>4.5</td>
 </tr>
<tr>
<td>Facilité d'utilisation</td>
<td>4.0</td>
</tr>
<tr>
<td>Rapport qualité-prix</td>
<td>5.0</td>
</tr>
</table>
<h2>Avis individuels</h2>
<ol>
<li>
<p><strong>Clémentine R.</strong> <time datetime="2023-11-20">20
nov. 2023</time></p>
<p>Cet appareil photo est **fantastique** ! Les photos sont d'une
clarté exceptionnelle, même en basse lumière.</p>
</li>
<li>
<p><strong>Marc L.</strong> <time datetime="2023-11-18">18 nov.
2023</time></p>
<p>Un excellent produit, *très intuitif*. J'ai pu le prendre en
main rapidement.</p>
</li>
</ol>
<hr>
<h3>Soumettre votre avis</h3>
<form action="#" method="post">
<label for="name">Votre nom :</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="review">Votre avis :</label><br>
<textarea id="review" name="review" rows="5" cols="40"
required></textarea><br><br>
<button type="submit">Envoyer</button>
</form>
</body>
</html>

Section 2 : Portfolios et Galeries

11. Portfolio de projets

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Portfolio</title>
</head>
<body>
<h1>Mon Portfolio de Projets</h1>
<table>
<thead>
<tr>
 <th>Projet</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="[Link]"><img src="images/projet1_mini.jpg"
alt="Projet site web"></a></td>
<td><p>Site Web</p></td>
<td>
<h3><a href="[Link]">Site E-commerce</a></h3>
<p>Conception et développement d'un site web de vente en
ligne.</p>
</td>
</tr>
<tr>
<td><a href="[Link]"><img src="images/projet2_mini.jpg"
alt="Projet application mobile"></a></td>
<td><p>Application Mobile</p></td>
<td>
<h3><a href="[Link]">Application de Fitness</a></h3>
<p>Création d'une application mobile pour le suivi des
entraînements.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

12. Galerie d'images avec légende

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Galerie Photos</title>
</head>
<body>
<h1>Galerie de Photographies</h1>
<ul style="list-style-type: none; padding: 0;">
<li style="display: inline-block; margin: 10px;">
<figure>
<a href="images/paysage_grand.jpg"><img
src="images/paysage_petit.jpg" alt="Paysage de montagne" width="300"></a>
<figcaption>Paysage de montagne au lever du
soleil.</figcaption>
</figure>
</li>
<li style="display: inline-block; margin: 10px;">
<figure>
<a href="images/ville_grande.jpg"><img
src="images/ville_petite.jpg" alt="Vue sur la ville" width="300"></a>
 <figcaption>Vue nocturne d'une grande ville.</figcaption>
</figure>
</li>
<li style="display: inline-block; margin: 10px;">
<figure>
<a href="images/animal_grand.jpg"><img
src="images/animal_petit.jpg" alt="Ours polaire" width="300"></a>
<figcaption>Portrait d'un ours polaire dans la
neige.</figcaption>
</figure>
</li>
</ul>
</body>
</html>

13. Page de profil d'artiste

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Profil d'artiste : Jane Doe</title>
</head>
<body>
<h1>Jane Doe</h1>
<p><img src="images/profile_pic.jpg" alt="Photo de Jane Doe"
width="200"></p>
<p>Jane Doe est une artiste plasticienne spécialisée dans la sculpture sur
bois. Ses œuvres explorent la relation entre la nature et l'humain. Elle a été
présentée dans plusieurs galeries.</p>
<h2>Expositions Passées</h2>
<table>
<tr>
<th>Nom de l'exposition</th>
<th>Année</th>
<th rowspan="2">Lieu</th>
</tr>
<tr>
<td>"Racines et Ailes"</td>
<td>2021</td>
</tr>
<tr>
<td>"Le Silence des Forêts"</td>
<td>2022</td>
<td>Galerie "Art Libre", Paris</td>
</tr>
</table>
<h2>Me suivre</h2>
<ul>
<li><a href="[Link]
<li><a href="[Link]
</ul>
</body>
</html>
14. Blog de voyage

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Blog de Voyage</title>
</head>
<body>
<h1>Le Blog de l'Aventurier</h1>
<article>
<h2>Aventure en Patagonie</h2>
<p><time datetime="2023-10-25">25 octobre 2023</time></p>
<p><img src="images/[Link]" alt="Patagonie" width="600"></p>
<p>Après une longue randonnée, nous avons découvert un paysage **à
couper le souffle**...</p>
<p><a href="[Link]">Lire la suite...</a></p>
</article>
<article>
<h2>Découverte du Japon</h2>
<p><time datetime="2023-09-10">10 septembre 2023</time></p>
<p><img src="images/[Link]" alt="Japon" width="600"></p>
<p>Les temples et les jardins japonais offrent une <em>sérénité</em>
rare...</p>
<p><a href="[Link]">Lire la suite...</a></p>
</article>
<hr>
<h3>Laissez un commentaire</h3>
<form action="#" method="post">
<label for="name">Nom :</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email :</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="comment">Commentaire :</label><br>
<textarea id="comment" name="comment" rows="5" cols="40"
required></textarea><br><br>
<button type="submit">Envoyer le commentaire</button>
</form>
</body>
</html>

15. CV en ligne

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CV de John Doe</title>
</head>
<body>
<h1>John Doe</h1>
<p><img src="images/cv_photo.jpg" alt="Photo de John Doe" width="150"></p>
 <ul>
<li>
<h2>Contact</h2>
<p><strong>Email :</strong> <a
href="[Link]
<p><strong>Téléphone :</strong> +12 345 6789</p>
</li>
<li>
<h2>Expérience Professionnelle</h2>
<ul>
<li>
<p><strong>Développeur Web</strong> - TechCorp (2021-
Présent)</p>
<ul>
<li><p>Développement de sites web
**responsive**.</p></li>
<li><p>Collaboration sur des projets
*complexes*.</p></li>
</ul>
</li>
</ul>
</li>
<li>
<h2>Formation</h2>
<p><strong>Licence en Informatique</strong> - Université XYZ
(2018-2021)</p>
</li>
</ul>
<p><a href="cv_john_doe.pdf" download>Télécharger le CV en PDF</a></p>
</body>
</html>

16. Galerie de photos thématiques

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Galerie de Photos</title>
</head>
<body>
<h1>Galerie de Photos Thématiques</h1>
<table>
<thead>
<tr>
<th colspan="3">Voyages</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/[Link]" alt="Photo d'une ville"
width="200">
<p><em>Rues de Paris</em></p>
 </td>
<td>
<img src="images/[Link]" alt="Photo d'un temple"
width="200">
<p><em>Temple en Asie</em></p>
</td>
<td>
<img src="images/[Link]" alt="Photo de montagne"
width="200">
<p><em>Randonnée en montagne</em></p>
</td>
</tr>
<tr>
<th colspan="3">Nature</th>
</tr>
<tr>
<td>
<img src="images/[Link]" alt="Fleur" width="200">
<p>Fleur rare</p>
</td>
<td>
<img src="images/[Link]" alt="Forêt" width="200">
<p>Promenade en forêt</p>
</td>
<td>
<img src="images/[Link]" alt="Lac" width="200">
<p>Lac paisible</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

17. Liste de ressources

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ressources Utiles</title>
</head>
<body>
<h1>Ressources de Développement Web</h1>
<dl>
<dt>HTML5</dt>
<dd>
<p>Le langage de balisage utilisé pour structurer les pages
web.</p>
<blockquote>"HTML est la colonne vertébrale du web."</blockquote>
<p><a href="[Link]
savoir plus sur MDN</a></p>
</dd>
<dt>CSS3</dt>
 <dd>
<p>Le langage de feuille de style qui permet de mettre en forme le
contenu HTML.</p>
<p>Voici un exemple de code : <code>p { color: blue; }</code></p>
<p><a href="[Link] CSS sur
W3Schools</a></p>
</dd>
</dl>
</body>
</html>

18. Page de contact complète

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Contactez-nous</title>
</head>
<body>
<h1>Contactez-nous</h1>
<form action="#" method="post">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required><br><br>
<label for="subject">Sujet :</label>
<input type="text" id="subject" name="subject" required><br><br>
<label for="message">Message :</label><br>
<textarea id="message" name="message" rows="5" cols="40"
required></textarea><br><br>
<button type="submit">Envoyer</button>
</form>
<hr>
<h2>Nos contacts par service</h2>
<table>
<thead>
<tr>
<th>Service</th>
<th>Nom du contact</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Support Technique</td>
<td>Alex Dupont</td>
<td><a
href="[Link]
</tr>
<tr>
<td>Ventes</td>
<td>Léa Martin</td>
 <td><a
href="[Link]
</tr>
</tbody>
</table>
</body>
</html>

19. Page d'événements

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Événement : Conférence Tech</title>
</head>
<body>
<h1>Conférence Tech 2024</h1>
<h2>Programme de la journée</h2>
<table>
<tr>
<th>Heure</th>
<th>Activité</th>
<th>Lieu</th>
<th>Description</th>
</tr>
<tr>
<td>09:00 - 10:00</td>
<td rowspan="2">Conférence d'ouverture : L'IA dans le futur du
web</td>
<td>Salle principale</td>
<td>Discours de bienvenue et présentation des tendances.</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Salle principale</td>
<td>Questions et réponses avec le conférencier.</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td>Atelier de codage</td>
<td><a href="images/salle_atelier.jpg"><img
src="images/salle_atelier_mini.jpg" alt="Salle d'atelier"
width="80"></a><br>Salle 2</td>
<td>Atelier pratique pour les développeurs. <a
href="#">S'inscrire</a></td>
</tr>
</table>
</body>
</html>

20. Tutoriel de recette

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Recette de Tarte aux Pommes</title>
</head>
<body>
<h1>Recette de la Tarte aux Pommes Classique</h1>
<p><img src="images/tarte_pommes.jpg" alt="Tarte aux pommes"
width="400"></p>
<h2>Ingrédients</h2>
<ul>
<li>Pâte brisée</li>
<li>6 pommes</li>
<li>100g de sucre</li>
<li>50g de beurre</li>
</ul>
<h2>Instructions</h2>
<ol>
<li><a href="form_etape1.html">Étape 1 :</a> Préparer la pâte. Étalez
la pâte dans un moule.
<form action="#" method="post">
<label>Notez cette étape :</label>
<input type="radio" name="note1" value="1">1
<input type="radio" name="note1" value="2">2
<input type="radio" name="note1" value="3">3
</form>
</li>
<li><a href="form_etape2.html">Étape 2 :</a> Peler et couper les
pommes en tranches.
<form action="#" method="post">
<label>Notez cette étape :</label>
<input type="radio" name="note2" value="1">1
<input type="radio" name="note2" value="2">2
<input type="radio" name="note2" value="3">3
</form>
</li>
<li><a href="form_etape3.html">Étape 3 :</a> Disposer les tranches de
pommes sur la pâte. Saupoudrer de sucre et ajouter des morceaux de beurre.
<form action="#" method="post">
<label>Notez cette étape :</label>
<input type="radio" name="note3" value="1">1
<input type="radio" name="note3" value="2">2
<input type="radio" name="note3" value="3">3
</form>
</li>
<li><a href="form_etape4.html">Étape 4 :</a> Enfourner à 180°C pendant
35 minutes.</li>
</ol>
</body>
</html>

Section 3 : Sites d'Information et Formulaires de Données

21. Tableau de données scientifiques

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Données Statistiques</title>
</head>
<body>
<h1>Population Mondiale (en milliards)</h1>
<table>
<thead>
<tr>
<th colspan="2">Région</th>
<th>2000</th>
<th>2010</th>
<th>2020</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Asie</td>
<td>Asie de l'Est</td>
<td>1.6</td>
<td>1.8</td>
<td>1.9</td>
</tr>
<tr>
<td>Asie du Sud</td>
<td>1.3</td>
<td>1.5</td>
<td>1.7</td>
</tr>
<tr>
<td colspan="2">Afrique</td>
<td>0.8</td>
<td>1.0</td>
<td>1.3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>6.1</th>
<th>6.9</th>
<th>7.8</th>
</tr>
</tfoot>
</table>
<p><small>Source des données : <a href="[Link]
World in Data</a></small></p>
</body>
</html>
22. Formulaire d'inscription complexe

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire d'inscription</title>
</head>
<body>
<h1>Inscrivez-vous</h1>
<form action="#" method="post">
<label for="username">Nom d'utilisateur :</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Mot de passe :</label><br>
<input type="password" id="password" name="password" required><br><br>
<label for="birthdate">Date de naissance :</label><br>
<input type="date" id="birthdate" name="birthdate"><br><br>
<p>Recevoir des newsletters ?</p>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Oui, je souhaite recevoir des
newsletters.</label><br><br>
<p>Type de compte :</p>
<input type="radio" id="perso" name="account_type" value="personal">
<label for="perso">Personnel</label><br>
<input type="radio" id="pro" name="account_type" value="professional">
<label for="pro">Professionnel</label><br><br>
<button type="submit">Créer un compte</button>
</form>
<hr>
<h3>Conditions d'utilisation</h3>
<ul>
<li><a href="#section_A">Article 1 : Utilisation des données</a></li>
<li><a href="#section_B">Article 2 : Responsabilités</a></li>
</ul>
<p id="section_A"><strong>Article 1 :</strong> Nous nous engageons à
protéger vos données personnelles...</p>
<p id="section_B"><strong>Article 2 :</strong> L'utilisateur est
responsable de son compte et de son contenu...</p>
</body>
</html>

23. Page de rapport annuel

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Rapport Annuel 2023</title>
</head>
<body>
<h1>Rapport Annuel 2023</h1>
 <p>Ce rapport présente les résultats financiers de notre entreprise pour
l'année 2023.</p>
<p>Nous avons connu une croissance significative grâce à nos nouvelles
stratégies de marché.</p>
<figure>
<img src="images/graphique_ventes.png" alt="Graphique des ventes 2023"
width="600">
<figcaption>Fig. 1 : Croissance des ventes au cours de
l'année.</figcaption>
</figure>
<h2>Données Financières Clés</h2>
<table>
<tr>
<th>Indicateur</th>
<th>2022</th>
<th>2023</th>
</tr>
<tr>
<td>Chiffre d'affaires</td>
<td>50 M€</td>
<td>65 M€</td>
</tr>
<tr>
<td>Bénéfice net</td>
<td>5 M€</td>
<td>8 M€</td>
</tr>
</table>
<p><a href="rapport_2023.pdf" download>Télécharger le rapport complet
(PDF)</a></p>
</body>
</html>

24. Quiz interactif

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Quiz HTML</title>
</head>
<body>
<h1>Quiz sur le HTML</h1>
<form action="#" method="post">
<h2>Question 1 :</h2>
<p>Quelle balise utilise-t-on pour insérer une image ?</p>
<p><img src="images/balise_img.jpg" alt="balise img" width="100"></p>
<input type="radio" id="q1a" name="q1" value="a">
<label for="q1a">`<a>`</label><br>
<input type="radio" id="q1b" name="q1" value="b">
<label for="q1b">`<img>`</label><br>
<input type="radio" id="q1c" name="q1" value="c">
<label for="q1c">`<div>`</label><br>
<br>
 <h2>Question 2 :</h2>
<p>Quels attributs peut-on utiliser dans une balise `<img>` ?
(plusieurs réponses possibles)</p>
<input type="checkbox" id="q2a" name="q2" value="a">
<label for="q2a">`src`</label><br>
<input type="checkbox" id="q2b" name="q2" value="b">
<label for="q2b">`href`</label><br>
<input type="checkbox" id="q2c" name="q2" value="c">
<label for="q2c">`alt`</label><br>
<br>
<button type="submit">Soumettre les réponses</button>
</form>
<p><a href="reponses_quiz.html">Voir les explications des réponses</a></p>
</body>
</html>

25. Page de FAQ

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<h1>Foire aux Questions</h1>
<dl>
<dt><a href="#question1">Comment puis-je créer un compte ?</a></dt>
<dd id="question1">
<p>Pour créer un compte, cliquez sur le bouton "S'inscrire" en
haut à droite de la page. Remplissez le formulaire d'inscription avec vos
informations.</p>
</dd>
<dt><a href="#question2">Quels sont les frais de livraison ?</a></dt>
<dd id="question2">
<p>Les frais de livraison dépendent de votre localisation et du
poids de votre commande. Vous pouvez consulter notre <a
href="[Link]">tableau de frais de livraison</a> pour plus de détails.</p>
</dd>
</dl>
</body>
</html>

26. Tableau de gestion de projet

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau de Bord de Projet</title>
</head>
<body>
<h1>Tableau de Bord du Projet "Alpha"</h1>
<table>
<thead>
<tr>
<th>Tâche</th>
<th>Statut</th>
<th>Assigné à</th>
<th>Échéance</th>
<th>Documents</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conception de l'interface</td>
<td>En cours</td>
<td colspan="2">Équipe Design</td>
<td><a href="doc_design.pdf">Spécifications</a></td>
</tr>
<tr>
<td>Développement du back-end</td>
<td>À faire</td>
<td>Marc</td>
<td>2024-01-30</td>
<td><a href="doc_api.docx">API</a></td>
</tr>
</tbody>
</table>
</body>
</html>

27. Formulaire de sondage

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sondage de Satisfaction</title>
</head>
<body>
<h1>Sondage de Satisfaction Client</h1>
<form action="#" method="post">
<p>Votre nom : <input type="text" name="name"></p>
<p>Quel est votre niveau de satisfaction global ?</p>
<input type="radio" id="satisfait" name="satisfaction"
value="satisfait">
<label for="satisfait">Satisfait</label>
<input type="radio" id="neutre" name="satisfaction" value="neutre">
<label for="neutre">Neutre</label>
<input type="radio" id="insatisfait" name="satisfaction"
value="insatisfait">
<label for="insatisfait">Insatisfait</label>
<br><br>
<p>Quels services avez-vous utilisés ?</p>
 <table>
<tr>
<th>Service</th>
<th>Utilisé</th>
</tr>
<tr>
<td>Support Client</td>
<td><input type="checkbox" name="services"
value="support"></td>
</tr>
<tr>
<td>Conseil Technique</td>
<td><input type="checkbox" name="services" value="tech"></td>
</tr>
</table>
<br>
<button type="submit">Envoyer le sondage</button>
</form>
</body>
</html>

28. Page de glossaire

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Glossaire technique</title>
</head>
<body>
<h1>Glossaire Technique</h1>
<table>
<thead>
<tr>
<th><a href="#html">Terme</a></th>
<th>Définition</th>
</tr>
</thead>
<tbody>
<tr>
<td><a id="html">HTML</a></td>
<td>
<p>
<dfn title="HyperText Markup Language">HTML</dfn> est
le langage de balisage standard pour les documents conçus pour être affichés
dans un navigateur web. Il utilise un système de balises pour structurer le
contenu.
</p>
<p>
Pour en savoir plus, visitez <a
href="[Link] site du W3C</a>.
</p>
</td>
</tr>
 <tr>
<td><a id="css">CSS</a></td>
<td>
<p>
<dfn title="Cascading Style Sheets">CSS</dfn> est un
langage de feuilles de style utilisé pour la présentation des documents écrits
en HTML. Il est responsable de la couleur, des polices et de la mise en page.
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

29. Article de blog avec tableaux de données

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Article de Blog</title>
</head>
<body>
<article>
<h1>Analyse du marché de la téléphonie mobile</h1>
<p>Le marché des smartphones a connu une croissance soutenue...</p>
<figure>
<img src="images/phone_market.jpg" alt="Marché des smartphones"
width="600">
<figcaption>Un marché en constante évolution.</figcaption>
</figure>
<h2>Parts de marché par fabricant (2023)</h2>
<table>
<thead>
<tr>
<th>Fabricant</th>
<th>Part de marché (%)</th>
<th>Croissance annuelle (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samsung</td>
<td>21.5%</td>
<td>+3%</td>
</tr>
<tr>
<td>Apple</td>
<td>20.8%</td>
<td>+5%</td>
</tr>
<tr>
<td>Xiaomi</td>
 <td>12.5%</td>
<td>-2%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td colspan="2">...</td>
</tr>
</tfoot>
</table>
<p>Ces données montrent la concurrence **intense** dans
l'industrie...</p>
</article>
</body>
</html>

30. Formulaire de prise de rendez-vous

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Prise de Rendez-vous</title>
</head>
<body>
<h1>Prendre un rendez-vous</h1>
<form action="#" method="post">
<label for="fullname">Nom complet :</label><br>
<input type="text" id="fullname" name="fullname" required><br><br>
<label for="email">Email :</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Téléphone :</label><br>
<input type="tel" id="phone" name="phone"><br><br>
<label for="date">Date de rendez-vous :</label><br>
<input type="date" id="date" name="date" required><br><br>
<button type="submit">Confirmer le rendez-vous</button>
</form>
<h2>Nos services disponibles :</h2>
<ul>
<li><a href="[Link]">Consultation juridique</a></li>
<li><a href="[Link]">Conseil financier</a></li>
<li><a href="[Link]">Formation professionnelle</a></li>
</ul>
</body>
</html>

Section 4 : Applications Web et Interfaces Utilisateur

31. Tableau des prix

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Plans et Tarifs</title>
</head>
<body>
<h1>Plans et Tarifs</h1>
<table>
<thead>
<tr>
<th>Fonctionnalités</th>
<th>Plan Basique</th>
<th>Plan Pro</th>
<th class="alternative">Plan Entreprise</th>
</tr>
</thead>
<tbody>
<tr>
<th>Espace de stockage</th>
<td>1 Go</td>
<td>10 Go</td>
<td class="alternative">Illimité</td>
</tr>
<tr>
<th>Support</th>
<td>Email</td>
<td>Email + Chat</td>
<td class="alternative">Support 24/7 dédié</td>
</tr>
<tr>
<th></th>
<td>
<ul>
<li><p>5 utilisateurs</p></li>
<li><p>Basic reports</p></li>
</ul>
</td>
<td>
<ul>
<li><p>50 utilisateurs</p></li>
<li><p>Analytics avancés</p></li>
</ul>
</td>
<td class="alternative">
<ul>
<li><p>Utilisateurs illimités</p></li>
<li><p>Fonctionnalités sur mesure</p></li>
</ul>
</td>
</tr>
<tr>
<th>Prix</th>
<td>10 €/mois</td>
<td>50 €/mois</td>
<td class="alternative">Sur devis</td>
</tr>
 <tr>
<th></th>
<td><a href="#">Choisir ce plan</a></td>
<td><a href="#">Choisir ce plan</a></td>
<td class="alternative"><a href="#">Contacter les
ventes</a></td>
</tr>
</tbody>
</table>
</body>
</html>

32. Formulaire de recherche avancée

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Recherche Avancée</title>
</head>
<body>
<h1>Recherche Avancée</h1>
<form action="#" method="get">
<label for="keywords">Mots-clés :</label>
<input type="text" id="keywords" name="keywords"><br><br>
<h3>Catégories :</h3>
<input type="checkbox" id="news" name="category" value="news">
<label for="news">Actualités</label><br>
<input type="checkbox" id="articles" name="category" value="articles">
<label for="articles">Articles de blog</label><br><br>
<h3>Type de contenu :</h3>
<input type="radio" id="text" name="content_type" value="text">
<label for="text">Texte</label>
<input type="radio" id="video" name="content_type" value="video">
<label for="video">Vidéo</label>
<input type="radio" id="image" name="content_type" value="image">
<label for="image">Image</label><br><br>
<label for="date">Période :</label>
<select id="date" name="date">
<option value="all">Toutes les périodes</option>
<option value="last_month">Dernier mois</option>
<option value="last_year">Dernière année</option>
</select><br><br>
<button type="submit">Rechercher</button>
</form>
<p><a href="[Link]">Besoin d'aide ?</a></p>
</body>
</html>

33. Interface de tableau de bord

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau de Bord</title>
</head>
<body>
<h1>Tableau de Bord de l'Application</h1>
<table>
<tr>
<td colspan="2">
<h3>Statistiques de Ventes</h3>
<ul>
<li><p>Ventes du jour : <strong>1200 €</strong></p></li>
<li><p>Commandes : <em>50</em></p></li>
</ul>
</td>
<td>
<h3>Tâches en Cours</h3>
<ul>
<li><p>Mettre à jour la base de données</p></li>
<li><p>Répondre aux tickets clients</p></li>
</ul>
</td>
</tr>
<tr>
<td rowspan="2">
<h3>Formulaire de Mise à Jour</h3>
<form action="#" method="post">
<label for="status">Statut du projet :</label>
<select id="status" name="status">
<option value="en_cours">En cours</option>
<option value="terminé">Terminé</option>
</select><br><br>
<button type="submit">Mettre à jour</button>
</form>
</td>
<td>
<h3>Utilisateurs en Ligne</h3>
<p>25 utilisateurs connectés.</p>
</td>
<td>
<h3>Notifications</h3>
<ul>
<li><a href="#">Nouvel avis sur le produit X</a></li>
<li><a href="#">Paiement en attente</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>

34. Page de documentation technique

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Documentation</title>
</head>
<body>
<h1>Documentation de l'API</h1>
<p>Ce guide vous aidera à utiliser notre API.</p>
<ul>
<li><a href="#intro">Introduction</a></li>
<li>
<a href="#endpoints">Endpoints</a>
<ul>
<li><a href="#users">Utilisateurs</a></li>
<li><a href="#products">Produits</a></li>
</ul>
</li>
</ul>
<hr>
<h2 id="intro">Introduction</h2>
<p>Notre API est basée sur REST et utilise le format JSON.</p>
<h2 id="endpoints">Endpoints</h2>
<h3 id="users">Utilisateurs</h3>
<p>Pour récupérer la liste des utilisateurs :</p>
<code>GET /api/users</code>
<p>Exemple de réponse :</p>
<code>
{<br>
&nbsp;&nbsp;&nbsp;&nbsp;"users": [...]<br>
}
</code>
</body>
</html>

35. Formulaire de commande de pizza

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Commande de Pizza</title>
</head>
<body>
<h1>Commandez votre Pizza</h1>
<table>
<thead>
<tr>
<th>Taille</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
 <td>Petite</td>
<td>10 €</td>
</tr>
<tr>
<td>Moyenne</td>
<td>15 €</td>
</tr>
<tr>
<td>Grande</td>
<td>20 €</td>
</tr>
</tbody>
</table>
<hr>
<form action="#" method="post">
<h2>Taille</h2>
<input type="radio" id="small" name="size" value="small">
<label for="small">Petite</label><br>
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Moyenne</label><br>
<input type="radio" id="large" name="size" value="large">
<label for="large">Grande</label><br><br>
<h2>Croûte</h2>
<select name="crust">
<option value="classic">Classique</option>
<option value="thin">Fine</option>
<option value="stuffed">Farcie</option>
</select><br><br>
<h2>Ingrédients</h2>
<ul>
<li>
<input type="checkbox" id="cheese" name="topping"
value="cheese">
<label for="cheese">Fromage</label>
</li>
<li>
<input type="checkbox" id="pepperoni" name="topping"
value="pepperoni">
<label for="pepperoni">Pepperoni</label>
</li>
<li>
<input type="checkbox" id="mushrooms" name="topping"
value="mushrooms">
<label for="mushrooms">Champignons</label>
</li>
</ul><br>
<button type="submit">Passer la commande</button>
</form>
</body>
</html>