<h1> à <h?>) ?<h1> ?<mark> sert à :<a> indique l'adresse de destination d'un lien ?<th> correspond à :<img> fournit un texte alternatif affiché si l'image ne se charge pas ?<audio> ou <video> affiche les contrôles de lecture (play, pause…) ?autoplay dans la balise <video> ?<audio> ou <video> précise le fichier source à lire ?<nav> est utilisée pour :<div> et <section> ?style.css à une page HTML ?important ?text-align: center; ?display active la mise en page Flexbox ?nav a cible :L'association « CodeMaroc Jeunes » souhaite créer un site web simple pour présenter ses activités, ses ateliers de formation et ses informations de contact. Le responsable de l'association vous a confié la mission de développer la première version du site en HTML et CSS.
Vous devez créer un fichier nommé index.html dans un dossier projet_codemaroc/, accompagné d'un fichier style.css. Le site doit présenter l'association de manière claire et structurée, en utilisant correctement les balises HTML et les propriétés CSS vues en cours.
Écrivez la structure minimale complète d'un document HTML5 pour la page index.html du site de l'association. Le titre de l'onglet doit afficher : « CodeMaroc Jeunes – Accueil ». La langue de la page doit être le français (lang="fr").
| Élément évalué | Points |
|---|---|
<!DOCTYPE html>, balise <html lang="fr"> | 1 pt |
Balises <head> avec <meta charset> et <meta viewport> | 1 pt |
Balise <title> avec le bon texte | 1 pt |
Balise <body> fermée correctement | 1 pt |
Dans le <body> de la page, écrivez le code HTML pour :
<header>) contenant un titre principal : « CodeMaroc Jeunes » et un sous-titre : « Apprendre le numérique ensemble ».<nav>) avec 3 liens : Accueil, Ateliers et Contact (les liens peuvent pointer vers #).| Élément évalué | Points |
|---|---|
Balise <header> avec <h1> et un sous-titre (<p> ou <h2>) | 2 pts |
Balise <nav> avec 3 balises <a> correctes | 3 pts |
Créez la section principale (<main>) contenant deux sections :
<h2>, un paragraphe de présentation comportant du texte en gras (<strong>) et en italique (<em>).<h2>, une liste non ordonnée de 3 ateliers, puis une liste ordonnée de 3 étapes pour s'inscrire.| Élément évalué | Points |
|---|---|
Balise <main> avec 2 balises <section> | 1 pt |
Section présentation : <h2> + <p> avec <strong> et <em> | 2 pts |
Liste non ordonnée (<ul>/<li>) correcte | 1.5 pt |
Liste ordonnée (<ol>/<li>) correcte | 1.5 pt |
Créez un tableau HTML avec 4 colonnes : Atelier, Niveau, Durée, Tarif. Ajoutez-y au moins 3 lignes de données fictives sur les ateliers proposés par l'association.
| Élément évalué | Points |
|---|---|
Structure correcte : <table>, <tr>, <th> pour la ligne d'en-tête | 2 pts |
3 lignes de données avec <td> | 2 pts |
| Contenu cohérent avec le contexte | 1 pt |
Ajoutez les éléments suivants à votre page :
logo.png (stockée dans un dossier images/), avec un texte alternatif approprié, une largeur de 200px.<footer>) contenant le copyright : « © 2026 CodeMaroc Jeunes. Tous droits réservés. » et un lien vers un site externe.| Élément évalué | Points |
|---|---|
Balise <img> avec src, alt et width corrects | 2 pts |
Balise <footer> avec texte copyright et lien <a> | 2 pts |
Écrivez le contenu du fichier style.css pour appliquer les styles suivants au site de l'association :
body) : police Arial, sans-serif, fond de couleur #f5f5f5, marge à 0.header : fond de couleur #1a6b3c, texte blanc, alignement centré, padding de 20px.nav : fond #e0e0e0, padding 10px, texte centré. Les liens nav a : couleur #1a6b3c, sans soulignement, gras, marge horizontale de 10px.footer : même style que le header, padding de 10px.| Élément évalué | Points |
|---|---|
Style body correct (police, fond, marge) | 1 pt |
Style header correct (fond, couleur texte, centrage, padding) | 1.5 pt |
Style nav correct (fond, padding, centrage) | 1 pt |
Style nav a (couleur, text-decoration, font-weight, marge) | 1.5 pt |
Style footer correct | 1 pt |