Tendances WEB 2023

Nous sommes partout, à tout moment et tout le monde à la fois.

W3.CSS

LE framework responsive, mobile first sans JavaScript, juste en CSS :-)

Simple comme CTRL+V

Liez votre page HTML à une feuille de styles externe (et ajoutez les classes aux éléments) <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Exercices

  1. créez une page index.html
  2. placez les balises html, head, body
  3. dans la balise head, ajoutez les métas charset & viewport
  4. dans la balise body, ajoutez section, titre de premier niveau h1, paragraphe
  5. pour mettre en style, ajoutez la ligne de code liant la page html à la feuille de style du framework W3.CSS
  6. exemlpe : pour créer une marge et "décoller" le contenu du bord de la fenêtre du navigateur, ajoutez la class w3-containeraux balises section (find and replace)
Code 
<!DOCTYPE html>
<html>
    <head>
        <title>Tendances WEB 2023</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <section class="w3-container">
            <h1>Tendances WEB 2023</h1>
            <p>Nous sommes partout, à tout moment et tout le monde à la fois.</p>
        </section>
    </body>
</html>
Rendu Téléchargement

Liens utiles