Le Web SNT/HTML et CSS

HTML et CSS

HTML et CSS sont les deux langages fondamentaux du Web ! HTML structure le contenu (texte, images, liens) tandis que CSS le met en forme (couleurs, tailles, positions). Ensemble, ils permettent de creer n'importe quelle page web !

40 min Niveau 2/5 +30 XP

Objectifs

  • Comprendre la structure d'une page HTML
  • Connaitre les balises principales (head, body, div, p, h1...)
  • Appliquer du style CSS a une page web
  • Creer une page web simple

Pieges a eviter

  • !Oublier de fermer les balises HTML
  • !Confondre id et class en CSS
  • !Utiliser des balises non semantiques
  • !Oublier le DOCTYPE en debut de fichier

Cours complet

Chaque page HTML suit une structure standard avec DOCTYPE, html, head et body. Le head contient les metadonnees, le body le contenu visible.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma premiere page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur mon site</h1>
        <nav>
            <a href="index.html">Accueil</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>Mon article</h2>
            <p>Ceci est un paragraphe.</p>
            <img src="image.jpg" alt="Description">
        </article>
    </main>

    <footer>
        <p>&copy; 2024 Mon site</p>
    </footer>
</body>
</html>

Quiz HTML/CSS

5 questions pour valider

HTML

HyperText Markup Language

Structure le contenu de la page

<balise>contenu</balise>

CSS

Cascading Style Sheets

Met en forme l'apparence

selecteur { propriete: valeur; }

Editeur Web
Teste ton code HTML/CSS
EdTech AI