HTML CSS – Level 1

Séance 1 : Initiation à HTML et CSS

🔥 HTML+CSS - Leveeeel 1 : Initiation à HTML et CSS 🚀🚀🚀🚀

Introduction :

HTML (HyperText Markup Language) est le langage standard utilisé pour créer et structurer le contenu d'une page web. Il te permet de définir des titres, des paragraphes, des images, des liens, des listes, et bien d'autres éléments.

CSS (Cascading Style Sheets) est le langage qui sert à styliser et mettre en forme ce contenu. Grâce à CSS, tu peux modifier les couleurs, la police, les marges, l'arrière-plan, et bien plus encore pour rendre ta page unique.

Dans cette séance, tu vas apprendre à :

Comprendre la structure de base d'une page HTML.
Utiliser les balises essentielles et comprendre comment elles s'ouvrent et se ferment.
Intégrer du CSS directement dans ta page pour la styliser.
Réaliser quelques exercices progressifs pour maîtriser ces concepts.

Activité 1 : La structure de base d'une page HTML

Exercice : Crée une page web minimale contenant la structure de base suivante :

La déclaration <!DOCTYPE html>
Les balises <html>, <head> et <body>
Un titre dans le <head> avec la balise <title>


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Première Page Web</title>
</head>
<body>
    <!-- Ton contenu ici -->
</body>
</html>

Indice : Chaque balise ouverte doit être fermée correctement (ex. : <p> se ferme avec </p>).

Activité 2 : Ajout de titres et de paragraphes

Exercice : Ajoute un titre principal avec la balise <h1> et quelques paragraphes avec la balise <p>.


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Première Page Web</title>
</head>
<body>
    <h1>Bienvenue sur ma page web !</h1>
    <p>Ceci est mon premier paragraphe en HTML.</p>
    <p>HTML te permet de structurer ton contenu de manière simple et efficace.</p>
</body>
</html>

Indice : Utilise les balises <h1> pour le titre principal et <p> pour les paragraphes. N'oublie pas d'insérer des sauts de ligne pour aérer ton code.

Activité 3 : Introduction aux liens et aux images

Exercice : Ajoute un lien hypertexte et une image à ta page.

Pour un lien, utilise la balise <a> avec l'attribut href.
Pour une image, utilise la balise <img> avec les attributs src et alt.


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Première Page Web</title>
</head>
<body>
    <h1>Bienvenue sur ma page web !</h1>
    <p>Découvre plus d'informations sur 
       <a href="https://www.example.com">ce site</a>.</p>
    <img src="chemin/vers/image.jpg" alt="Description de l'image">
</body>
</html>

Indice : Assure-toi que le lien et l'image s'affichent correctement. Tu peux utiliser une URL d'image en ligne pour tester.

Activité 4 : Styliser ta page avec CSS

Exercice : Ajoute une section de style dans la balise <head> pour changer le fond, la couleur du texte et la police de ta page.


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Page Stylisée</title>
    <style>
        body {
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #ff4500;
        }
        p {
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <h1>Bienvenue sur ma page web stylisée !</h1>
    <p>Grâce au CSS, tu peux changer l'apparence de ta page facilement.</p>
</body>
</html>

Indice : Expérimente avec différentes propriétés CSS pour voir leur effet sur ta page.

BRAVO, tu as terminé la Séance 1 d'Initiation à HTML et CSS ! 🎉

Tu as appris ce qu'est HTML et CSS, comment structurer une page web et la styliser.

Continue à pratiquer et prépare-toi pour la prochaine séance ! 🚀