Aller au contenu principal

2 - Expérimenter avec une page HTML

Amusez-vous avec la page web plus bas pour explorer et découvrir par vous-même les bases. N'ayez craintes, les modifications que vous faites ici seront réinitialisées si vous rechargez la page!

Quelques questions:

  1. Quels liens faites-vous entre ce qui est à gauche (le HTML) et ce qui est à droite (l'affichage de la page Web)?
  2. Êtes-vous en mesure de dire précisément quel élément HTML (ex.: <h1>) est responsable de l'affichage à droite?
  3. Essayez:
    1. De modifier le titre affiché dans le haut de la page
    2. De modifier le nom affiché dans le pied de page, remplacez-le par votre nom
    3. De modifier la description d'un des chat
    4. D'ajouter un nouveau chat!
  4. Amusez-vous!
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Chats célèbres du web</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header>
    <h1>Chats célèbres du web 🐱</h1>
  </header>

  <main>
    <ul class="cat-list">
      <li>
        <figure>
          <img src="https://imgur.com/ut3lzp8.png" alt="Grumpy Cat">
          <figcaption>
            <strong>Grumpy Cat</strong>
            <p>De son vrai nom Tardar Sauce, ce chat est célèbre pour son air perpétuellement boudeur qui a envahi les réseaux en 2012.</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://imgur.com/XhTjFDA.png" alt="Nyan Cat">
          <figcaption>
            <strong>Nyan Cat</strong>
            <p>Apparu en 2011, ce chat volant laisse derrière lui une traînée arc-en-ciel et un vers d'oreilles – miaou inoubliable.</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://imgur.com/fXyf08l.png" alt="Lil Bub">
          <figcaption>
            <strong>Lil Bub</strong>
            <p>Chaton à l’apparence unique, Lil Bub a charmé le web dès 2011 avec son visage potelé et sa langue toujours sortie.</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://imgur.com/kujgmBa.png" alt="Maru">
          <figcaption>
            <strong>Maru</strong>
            <p>Vedette japonaise des boîtes, Maru collectionne les vidéos de lui se glissant dans n’importe quel carton depuis 2008.</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://imgur.com/RlyEidb.png" alt="Keyboard Cat">
          <figcaption>
            <strong>Keyboard Cat</strong>
            <p>Enregistré en 2007, ce chat « joue » de la musique au clavier, devenant l’un des premiers memes musicaux.</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://imgur.com/Deguglf.png" alt="Colonel Meow">
          <figcaption>
            <strong>Colonel Meow</strong>
            <p>Reconnu pour ses poils ébouriffés et son regard impérieux, Colonel Meow a régné sur Instagram dès 2014.</p>
          </figcaption>
        </figure>
      </li>
    </ul>
  </main>

  <footer>
    <p>© 2025 Benoit Tremblay</p>
  </footer>
</body>
</html>
Open on CodeSandboxOpen Sandbox