Projet : Création du Bestiaire

Le but de ce projet est de créer la page d'un monstre dans le bestiaire de la classe. Ce projet consiste à remplir la maquette HTML, retirer les bordures de repérage, puis poser le fond d'écran et la couleur du texte.

Ressources :

Maquette vide : un fichier index.html, un dossier image pour l'image du monstre, un dossier style pour la feuille CSS.

Avant de commencer, relire la notice sur HTML : titres, paragraphes, listes, images.

1. Remplir la maquette

Voici ce que la première séance doit reproduire :

a_reproduire

Chaque bloc de couleur est une div : une division de la page. La feuille de style ne se modifie pas pendant cette étape. Elle sert seulement à voir les zones.

base

À cause d'un souci d'affichage, le nom du monstre correspond au bloc violet.

Choisir un exercice

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

2. Retirer les bordures

Le fichier style.css rassemble le style de la page. Une classe s'écrit ainsi :

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

Les bordures colorées servaient à voir les div. Le contenu est en place : on les retire.

En CSS, une bordure s'écrit souvent :

border: solid;
border-color: red;

On rencontre aussi border: 2px solid black;, border-width, border-style.

Choisir un exercice

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

3. Fond et texte

La classe container englobe la page. C'est là qu'on pose le fond et la couleur du texte.

Choisir un exercice

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

Ce qu'on rend. Le dossier de la maquette, complet :

index.html, avec le h1, les textes, et les deux images ;
style/style.css, sans les bordures de repérage, avec le fond et le texte blanc dans .container ;
le dossier image, avec l'image du monstre, celle du rival, et le fond.

On ouvre index.html depuis ce dossier : les images suivent, sans qu'on les remette à la main.