Aller au contenu

Exercices semaine 3

Exercice 1

  1. Crée une page HTML qui contient :

    • Un titre <h1>
    • Trois paragraphes <p>
    • Trois mots entourés par des balises <span>, chacun sur une ligne différente

  2. Ajoute ensuite un fichier CSS qui contient :

    • Une bordure bleue autours du paragraphe
    • Une bordure jaune autours des mots dans les balises span

Questions :

  1. Pourquoi la bordure du paragraphe occupe-t-elle toute la largeur ?
  2. Pourquoi les balises span restent-elles sur la même ligne ?
Solution

HTML

<h1>Exercice 1</h1>

<p>Pourquoi le paragraphe n'a pas la même apparence que les span ?</p>

<span>HTML</span>
<span>CSS</span>
<span>Javascript</span>

CSS

p {
    border: 0.2rem solid blue;
}

span {
    border: 0.2rem solid yellow;
}

Réponses aux questions

  1. Le paragraphe est une balise de type bloc et prend 100% de la largeur disponible.
  2. La balise span est une balise de type en ligne et ne prend que la largeur de son contenu. Les balises en ligne s'affichent les unes à côté des autres lorsque l'espace le permet.

Exercice 2

  1. Crée une page HTML qui utilise les balises structurantes pour créer la structure de page suivante :

    -------------------------
EN-TÊTE
-------------------------
NAVIGATION
-------------------------
CONTENU PRINCIPAL
    SECTION 1
    SECTION 2
-------------------------
PIED DE PAGE
-------------------------

  2. Ajoute ensuite un fichier CSS qui contient :

    • Une couleur de fond différente par bloc, y compris chaque section
    • Une hauteur height par bloc avec les unités rem ou %

Questions

  1. Pourquoi la couleur de fond de chaque bloc occupe-t-elle toute la largeur ?
  2. Quelle est la différence entre l'unité rem et l'unité % en CSS ?
  3. Pourquoi ne voit-on pas la couleur de fond du main ?
  4. Quel attribut CSS permet d'ajouter une marge intérieure dans le main pour que les sections ne prennent pas 100% de la largeur ?
Solution

HTML

<header></header>
<nav></nav>
<main>
    <section id="section1"></section>
    <section id="section2"></section>
</main>
<footer></footer>

CSS

header{
    background-color: blue;
    height: 10%;
}
nav{
    background-color: black;
    height: 5rem;
}
main{
    background-color: lightgrey;
    height: 50%;
    padding: 5rem;  /*Ajouté après avoir répondu à la question 4*/
}
#section1{
    background-color: lightcyan;
    height: 10rem;
}
#section2{
    background-color: skyblue;
    height: 10rem;
}
footer{
    background-color: cyan;
    height: 10%;
}

Réponses aux questions

  1. Parce que les balises structurantes sont de type bloc et ont une largeur de 100%.
  2. L'unité rem se calcule en taille de caractère alors que le % représente une portion d'espace d'affichage.
  3. Parce que la largeur du parent est définie par la taille des enfants et les sections enfant occupent 100% de la largeur puisque ce sont des balises bloc.
  4. padding

Exercice 3

  1. Crée une page HTML qui crée un bloc générique qui contient :

    • Une photo de personnage
    • Le nom du personnage en titre
    • Un paragraphe de description du personnage avec une balise générique de texte span sur au moins un mot

  2. Ajoute ensuite un fichier CSS qui contient :

    • Sur le bloc générique :

      • largeur de 30%
      • couleur de fond
      • bordure

      • marge intérieure de 2 rem

        ⚠️ Sauvegarder et tester la page. L'image dépasse du bloc parent !

    • Sur l'image :

      • largeur de 100%

        ⚠️ Sauvegarder et tester la page. L'image s'ajuste !

    • Sur le titre :

      • Alignement du texte centré
      • Texte souligné
      • Changer la couleur du texte

    • Sur la balise span dans le paragraphe :

      • Changer la couleur du texte
      • Texte en gras

    • Défi: en utilisant les marges extérieures sur le bloc générique, centrer le bloc dans la page.

Questions

  1. Pourquoi une largeur de 100% sur l'image ajuste cette dernière à la taille du bloc ?
  2. Quelle est la différence entre les attributs padding et margin en CSS ?
Solution

HTML

<div>
    <img src="images/lapin.jpg" alt="Lapin fâché">

    <h1>Mad bunny</h1>

    <p><span>Mad bunny</span> est un lapin très fâché qui gère mal sa colère et utilise une carrotte comme épée.</p>
</div>

CSS

div{
    background-color: beige;
    border: 0.2rem solid red;
    width: 30%;
    padding: 2rem;

    /*Marges ajoutées pour le défi*/
    margin-right: auto;
    margin-left: auto;
}

img {
    width: 100%;
}

h1 {
    text-align: center;
    text-decoration: underline;
    color: rgb(123, 178, 40);
}

span {
    color: rgb(123, 178, 40);
    font-weight: bold;
}

Réponses aux questions

  1. Le pourcentage représente le pourcentage d'espace disponible dans le parent. Puisque la div est le bloc parent de l'image, l'image prend donc 100% de la largeur de la div.
  2. padding représente les marges intérieures, l'espace entre la bordure et le contenu enfant. margin représente les marges extérieures, l'espace entre la bordure et le reste de la page.