Objectif : Créer une page HTML structurée avec un header, un footer, et un body contenant 4 articles.
Instructions :
<header>
, un <footer>
, et un
<body>
.
<body>
, ajoutez 4 articles (<article>
).<img>
).<h2>
).<p>
).<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>
Objectif : Mettre en place un fichier CSS pour styliser la page.
Instructions :
styles.css
et liez-le à votre page HTML.<header>
et au <footer>
.background-color
.border-radius
.background-color
).border-radius
).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é */
}
Objectif : Créer un formulaire HTML à partir d'une image modèle.
Instructions :
formulaire.html
.<input type="text">
).<input type="password">
).<button>
).