Exercices HTML & CSS

Exercices

Exercice 1 : Créer une page HTML

Objectif : Créer une page HTML structurée avec un header, un footer, et un body contenant 4 articles.

Instructions :

  • La page doit contenir un <header>, un <footer>, et un <body>.
  • Dans le <body>, ajoutez 4 articles (<article>).
  • Chaque article doit contenir :
    • Une image (<img>).
    • Un titre (<h2>).
    • Un paragraphe de texte (<p>).
    • Un bouton (<button>) avec un lien (<a>) menant à https://www.google.com.

Exemple de structure :

          
<header>...</header>
<body>
  <article>
    <img src="image1.jpg" alt="Description">
    <h2>Titre de l'article</h2>
    <p>Texte de l'article...</p>
    <button><a href="https://www.google.com">Visiter Google</a></button>
  </article>
  <!-- Répéter pour 3 autres articles -->
</body>
<footer>...</footer>

Exercice 2 : Appliquer du CSS

Objectif : Mettre en place un fichier CSS pour styliser la page.

Instructions :

  • Créez un fichier styles.css et liez-le à votre page HTML.
  • Centrez les articles verticalement et horizontalement sur la page.
  • Ajoutez une couleur de fond au <header> et au <footer>.
  • Modifiez l'arrière-plan des articles avec background-color.
  • Arrondissez les bordures des articles avec border-radius.
  • Stylisez le bouton :
    • Changez la couleur de fond (background-color).
    • Ajoutez une bordure arrondie (border-radius).
    • Changez la couleur du texte (color).

Exemple de CSS :

          
/* Centrer les articles */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Styliser le header et le footer */
header, footer {
  background-color: #4CAF50; /* Vert */
  color: white;
  padding: 1rem;
  text-align: center;
}

/* Styliser les articles */
article {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem;
  width: 300px;
  text-align: center;
}

/* Styliser le bouton */
button {
  background-color: #008CBA; /* Bleu */
  border: none;
  border-radius: 5px;
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #005f73; /* Bleu foncé */
}

Exercice 3 : Créer un formulaire HTML

Objectif : Créer un formulaire HTML à partir d'une image modèle.

Instructions :

  • Créez un nouveau fichier HTML dans le même dossier que la page actuelle.
  • Nommez-le formulaire.html.
  • Le formulaire doit contenir :
    • Un champ pour le nom d'utilisateur (<input type="text">).
    • Un champ pour le mot de passe (<input type="password">).
    • Un bouton "S'inscrire" ou "Se connecter" (<button>).
  • Le bouton doit rediriger vers la page des exercices précédents (cette page).
  • Utilisez l'image suivante comme modèle :
Modèle de formulaire