Exercice - Les Briques
Cet exercice te permet de mettre en application les div tout en apprenant de nouvelles choses
-
4ttr
5tq
- Exploration
Cet exercice te permet de mettre en application les div tout en apprenant de nouvelles choses
Briques » dans le dossier du cours « informatique / html / travaux ».briques-matis.html).Le fichier HTML contient un contenu avec certains éléments html et css préremplis. C’est cadeau. !
Envoyez vos fichiers sur FileGator dans le dossier "Html/Evaluations"
Essaie de créer une page qui ressemble au modèle suivant:
Les noms (personnes et peuples) cités doit apparaître en rouge.
Les caractéristiques citées doivent apparaître en bleu.
Les sujets doivent apparêtre en mauve.
Les 3 personnages doivent se trouver dans une table.
Pour centrer la table, applique la déclaration CSS suivante :
margin : 0 auto ; /* Appliquer une marge automatique à gauche et à droite */Supprime les marges sur le <body> ( = marges de 0px) afin d'éliminer les bordures blanches.
Voici les couleurs utilisées dans la page et leur code correspondant :
dodgerbluetomatopurplePour le titre principal, vous pouvez utiliser la police "Pixelony".
Pour le texte du contenu, utilise la police 'ProggyCleanTT'.
Pour info, ces polices de caractères ne sont pas disponibles sur ton ordinateur. Elles sont rendues disponibles sur ta page grâce à ces 2 lignes (lignes 6 et 7):
<link href="https://fonts.cdnfonts.com/css/pixelony" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/proggy-clean" rel="stylesheet">Chaque section consiste en 2 <div> imbriqués (l'un à l'intérieur de l'autre):
<div> qui prend toute la largeur de la page et a une image de fond<div> centré qui prend 80% de la largeur de la page et qui contient le texteLa couleur des sections est réalisée à l'aide d'une image de fond (pas simplement une couleur).
Pour appliquer une image de fond à un élément, tu peux utiliser la propriété CSS suivante:
background: url("adresse_relative_de_l_image") repeat;La hauteur du div #header doit être fixe. Elle doit permettre d'afficher exactement 3 rangées de pavés (fichier: pave.png). Tu as déjà l'outil qui te permet de déterminer la taille de l'image.
Pour l'introduction, utilise la bonne image de fond.
Ces <div> sont vides. Pour qu'ils apparaissent, tu dois fixer leur hauteur en CSS. La hauteur doit permettre d'afficher exactement 1 rangée de briques.
Dans une galaxie très très lointaine.... Une école peuplée d'irréductibles élèves résiste encore et toujours à l'envahisseur.
Dans le lointain village des Briques, situé quelque part dans un coin oublié du pays, vivaient ces étonnants barbares. Contrairement à leur réputation, les Briques n'étaient pas vraiment méchants, enfin, pas toujours. Ils avaient la réputation d'être un peu, disons, "carrés" dans leurs manières. Leurs discussions tournaient souvent autour de sujets en apparence inintéressants comme la résistance des matériaux ou la meilleure façon de construire un mur solide.
Leur chef, Barbrix, était un géant trapu qui portait un casque en forme de brique et utilisait un énorme marteau de forgeron pour faire cuire les crêpes.
Les Briques étaient fiers de leur village fortifié, mais ils étaient tout de même bien conscients que leur réputation de féroces guerriers était exagérée. En réalité, leur plus grande menace était de vous ennuyer à mourir avec des discussions interminables sur l'architecture.
En bonus, essaie de réaliser le labyrinthe suivant:
Pour ce faire, utilise une table de 11 lignes et 11 colonnes.
Pour la générer rapidement, tape ce code dans VSCode: table#labyrinthe>tr*11>td.mur*11 et appuie sur tab (un copier/coller ne fonctionne pas vraiment).
Ajoute les règles CSS suivantes à ta page:
#labyrinthe {
margin: 25px auto;
border-collapse: collapse; /* Supprimer les bordures */
}
/* Cellules carrées */
#labyrinthe td {
height: 48px;
width: 48px;
}
.sol {
/* Ajoute l'image de fond ici */
}
Comme image de fond, utilise le fichier sol.png.
