Séance 1 : Premiers Pas dans le Monde du Web

1. Comprendre le Web et le HTML

1.1 Qu'est-ce que le Web ?

Le World Wide Web (ou simplement "le Web") est un système d'information global qui permet aux utilisateurs de partager des informations et des ressources via Internet. Il est composé de milliards de documents interconnectés, appelés pages web.

1.2 Le Rôle du HTML et du CSS

1.3 La Structure de Base d'un Document HTML

Chaque page HTML suit une structure fondamentale :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de ma page</title>
    <!-- Lien vers notre feuille de style CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Tout le contenu visible de la page va ici -->
</body>
</html>

1.4 Les Balises HTML Essentielles pour le Contenu

1.5 Introduction aux Styles CSS Simples

Maintenant que nous avons la structure HTML, voyons comment lui donner du style avec CSS.

Une règle CSS se compose d'un sélecteur (qui cible un élément HTML), et d'un bloc de déclarations (qui définissent le style). Chaque déclaration est une paire propriété: valeur;.

/* Ceci est un commentaire CSS */

/* Sélecteur de type : cible toutes les balises <p> */
p {
    color: blue; /* Définit la couleur du texte en bleu */
    font-size: 16px; /* Définit la taille de la police à 16 pixels */
}

/* Sélecteur de type : cible toutes les balises <h1> */
h1 {
    background-color: lightgray; /* Définit la couleur de fond en gris clair */
    text-align: center; /* Centre le texte */
    font-family: Arial, sans-serif; /* Définit la police de caractères */
}

Pour que votre page HTML utilise ce CSS, assurez-vous que la ligne <link rel="stylesheet" href="styles.css"> est bien présente dans la section <head> de votre fichier HTML, et que le fichier styles.css se trouve dans le même dossier que votre fichier HTML.

1.6 Introduction à Tailwind CSS

<!doctype html>
<html lang="fr"><head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full p-6 rounded-lg shadow-md bg-white">
        <h1 class="text-2xl font-bold mb-4">Hello Tailwind (CDN)</h1>
        <p class="text-gray-600">Paragraphe</p>
        <button class="mt-4 px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700">
            Bouton
        </button>
    </div>
</body>
</html>

Vous avez peut-être remarqué des classes étranges dans les exemples HTML de cette séance (comme bg-slate-50, text-slate-800, p-8, etc.). Ces classes proviennent de Tailwind CSS, un "framework CSS utility-first".

Contrairement au CSS traditionnel où vous écrivez des règles dans un fichier .css pour styliser des éléments HTML, Tailwind CSS vous fournit des milliers de petites classes prédéfinies, chacune correspondant à une propriété CSS spécifique. Vous appliquez ces classes directement dans votre HTML pour construire rapidement des designs.

Pourquoi l'utiliser ?

Nous utiliserons Tailwind CSS dans nos exemples pour vous familiariser avec cette approche moderne du stylisme web. Vous apprendrez à écrire votre propre CSS en parallèle, et à comprendre comment les deux peuvent coexister.

1.7 Préparer votre Environnement de Travail

Nous utiliserons VS Code (Visual Studio Code) comme éditeur de code.

  1. Créez un nouveau dossier pour cette séance (ex: seance1).
  2. À l'intérieur de ce dossier, créez deux fichiers : index.html et styles.css.

Outils Recommandés pour Améliorer Votre Quotidien

Pour rendre votre expérience de développement plus fluide, nous vous recommandons d'installer les extensions suivantes dans VS Code :

2. Exercices d'Application

Créez un nouveau fichier HTML pour chaque exercice, ou modifiez le même fichier en ajoutant les éléments. N'oubliez pas de créer un fichier styles.css pour chaque exercice si vous ne travaillez pas sur le même fichier, et de le lier dans le <head>.

Exercice 1 : Mon Premier Document HTML et CSS

Exercice 2 : Ajouter un Lien et le Styliser

Exercice 3 : Insérer une Image et Styliser le Fond

Exercice 4 : Mettre en Forme le Texte et les Polices

3. TP : Ma Page de Présentation Personnelle

Pour ce TP, vous allez créer une page web simple qui vous présente.

Objectif : Utiliser toutes les balises et les propriétés CSS vues aujourd'hui pour créer une page structurée et informative.

Consignes :

  1. Créez un dossier tp-seance1.
  2. À l'intérieur, créez index.html et styles.css.
  3. Remplissez index.html avec la structure de base et les éléments suivants :
  4. Dans styles.css, ajoutez des styles de base pour le <body> (color de fond, font-family de base), pour les titres <h1>, <h2> (color de texte, text-align, font-size), pour les paragraphes, les liens et les images.