Projet : Chasse aux Ren'Arts

Le but de ce projet est de créer la page web de son tableau pour la chasse aux Ren'Arts. Ce projet consiste à remplir la maquette HTML, retirer les bordures de repérage, puis choisir le fond, la couleur du texte et la police.

Ressources :

• Notice sur HTML : titres, paragraphes, listes, images.
• Code fourni : index.html à remplir, et style.css pour tout le style.

Les images du site vont dans un dossier images. Le nom dans src doit être exactement celui du fichier.

1. Remplir la maquette

Voilà la maquette ouverte dans le navigateur. Chaque bloc de couleur est une div : une division de la page. La feuille de style ne se modifie pas pendant cette étape.

À cause d'un souci d'affichage, le nom de l'élève correspond au bloc violet.

Choisir un exercice…Les blocs

Choisir un exercice

Cliquer sur un exercice de la liste pour afficher son sujet.

Voici un exemple de liste, à réécrire à partir de son propre tableau. On ne recopie pas ces noms si ce n'est pas la même œuvre.

<ul>
  <li>Artiste : Marie Nom</li>
  <li>Année : 1889</li>
  <li>Lieu de conservation : musée, ville</li>
  <li>Technique : huile sur toile</li>
  <li>Dimensions : 73 cm × 92 cm</li>
</ul>

2. Retirer les bordures

style.css rassemble le style. Une classe s'écrit ainsi :

.classe_de_l_element {
    propriete_1: valeurs;
    propriete_2: valeurs;
}

Les bordures colorées servaient à voir les zones. Le contenu est placé : on les retire pour un rendu plus propre.

border: solid;
border-color: red;

Variantes à reconnaître aussi : border: 2px solid black;, border-width, border-style, border-color.

Choisir un exercice…border

Choisir un exercice

Cliquer sur un exercice de la liste pour afficher son sujet.

3. Fond, texte, police

La classe container contient toute la page. La modifier change presque tout le site. Si elle apparaît deux fois, compléter celle qui contient déjà display: flex;.

Choisir un exercice…container

Choisir un exercice

Cliquer sur un exercice de la liste pour afficher son sujet.

4. Ce qu'on rend

On rend une archive du dossier entier projet_site_eleve, et pas seulement index.html : sans le dossier, les images et le CSS manquent à l'ouverture.

Le dossier contient :

• index.html ;
• style.css ;
• le dossier images, avec toutes les images utilisées.

Sous Windows 11 :

1. Ouvrir l'explorateur de fichiers.
2. Retrouver le dossier projet_site_eleve.
3. Clic droit sur le dossier.
4. Compresser dans un fichier ZIP.
5. Si l'option n'apparaît pas : Afficher plus d'options, puis Envoyer vers > Dossier compressé.
6. Windows crée projet_site_eleve.zip.
7. Renommer l'archive, par exemple NOM_Prenom_projet_site_eleve.zip.
8. La déposer sur Pronote.