Exercice 1:
Créez une page HTML qui affiche les informations d’un livre. La page doit inclure :
- Le titre du livre
- Le nom de l’auteur
- La date de publication
- Une image de couverture du livre
- Un bref résumé du livre
Utilisez les balises HTML appropriées pour structurer le contenu de la page et inclure l’image. Assurez-vous que la page est bien formatée et facile à lire. Vous pouvez également ajouter des styles CSS pour améliorer l’apparence de la page.
Bonne chance !
<!DOCTYPE html>
<html>
<head>
<title>Mon livre préféré</title>
</head>
<body>
<h1>Le titre du livre</h1>
<p>Par <strong>Le nom de l'auteur</strong></p>
<p>Publié le <em>date de publication</em></p>
<img src="mon-image-de-couverture.jpg" alt="Image de couverture du livre">
<p>Un bref résumé du livre...</p>
</body>
</html>
Dans cette solution, nous avons utilisé des balises HTML appropriées pour structurer le contenu de la page, y compris les balises h1, p et img. Nous avons également utilisé des balises strong et em pour mettre en évidence certains textes.
Exercice 2:
Créez une page HTML pour un restaurant qui présente son menu et ses heures d’ouverture. La page doit inclure :
- Le nom et le logo du restaurant
- Une liste des éléments du menu avec les prix
- Les heures d’ouverture du restaurant
- Un formulaire de contact permettant aux clients de soumettre des commentaires
Utilisez des balises HTML appropriées pour structurer le contenu de la page et inclure les images. Ajoutez également des styles CSS pour améliorer l’apparence de la page. Veuillez également inclure une page de remerciement pour les commentaires soumis par les clients.
Bonne chance !
<!DOCTYPE html>
<html>
<head>
<title>Menu du restaurant</title>
</head>
<body>
<header>
<h1>Nom du restaurant</h1>
<img src="logo-restaurant.png" alt="Logo du restaurant">
</header>
<section id="menu">
<h2>Menu</h2>
<ul>
<li><strong>Plat 1 :</strong> 10€</li>
<li><strong>Plat 2 :</strong> 15€</li>
<li><strong>Plat 3 :</strong> 12€</li>
<li><strong>Plat 4 :</strong> 18€</li>
<li><strong>Plat 5 :</strong> 20€</li>
</ul>
</section>
<section id="hours">
<h2>Heures d'ouverture</h2>
<ul>
<li>Lundi - Vendredi : 10h - 22h</li>
<li>Samedi : 11h - 23h</li>
<li>Dimanche : Fermé</li>
</ul>
</section>
<section id="contact">
<h2>Contactez-nous</h2>
<form action="merci.html" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="commentaires">Commentaires :</label>
<textarea id="commentaires" name="commentaires" required></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
</body>
</html>
Dans cette solution, nous avons utilisé des balises HTML appropriées pour structurer le contenu de la page, y compris les balises header, section, h1, h2, ul, li, label, input et textarea. Nous avons également utilisé l’attribut required pour les champs du formulaire afin de les rendre obligatoires.
Exercice 3:
Créez une page HTML pour un site de voyage qui présente une liste de destinations populaires avec des images et des descriptions. La page doit inclure :
- Le nom du site de voyage
- Une liste d’au moins 5 destinations populaires avec des images et des descriptions
- Un formulaire de contact permettant aux visiteurs de demander plus d’informations sur les destinations
- Un pied de page avec des liens vers des pages importantes, telles que la page d’accueil, la page à propos et la page de contact
Utilisez des balises HTML appropriées pour structurer le contenu de la page et inclure les images. Ajoutez également des styles CSS pour améliorer l’apparence de la page. Assurez-vous que la page est accessible et conviviale pour les utilisateurs de tous les appareils.
Bonne chance !
<!DOCTYPE html>
<html>
<head>
<title>Liste des destinations populaires</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Nom du site de voyage</h1>
</header>
<main>
<h2>Liste des destinations populaires</h2>
<section class="destination">
<h3>Destination 1</h3>
<img src="destination1.jpg" alt="Image de la destination 1">
<p>La description de la destination 1.</p>
<button class="more-info-button">Plus d'informations</button>
</section>
<section class="destination">
<h3>Destination 2</h3>
<img src="destination2.jpg" alt="Image de la destination 2">
<p>La description de la destination 2.</p>
<button class="more-info-button">Plus d'informations</button>
</section>
<section class="destination">
<h3>Destination 3</h3>
<img src="destination3.jpg" alt="Image de la destination 3">
<p>La description de la destination 3.</p>
<button class="more-info-button">Plus d'informations</button>
</section>
<section class="destination">
<h3>Destination 4</h3>
<img src="destination4.jpg" alt="Image de la destination 4">
<p>La description de la destination 4.</p>
<button class="more-info-button">Plus d'informations</button>
</section>
<section class="destination">
<h3>Destination 5</h3>
<img src="destination5.jpg" alt="Image de la destination 5">
<p>La description de la destination 5.</p>
<button class="more-info-button">Plus d'informations</button>
</section>
<section id="contact">
<h2>Contactez-nous</h2>
<form action="merci.html" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="destinations">Destinations :</label>
<select id="destinations" name="destinations">
<option value="destination1">Destination 1</option>
<option value="destination2">Destination 2</option>
<option value="destination3">Destination 3</option>
<option value="destination4">Destination 4</option>
<option value="destination5">Destination 5</option>
</select>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
<footer>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="a-propos.html">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</footer>
</body>
</html>
