Séquence 1 – Activité 1 – Découverte

Introduction au Web et aux Technologies Associées

Dans cette séquence, nous explorerons les fondamentaux du web, en mettant l'accent sur la compréhension de son histoire et de ses principes de fonctionnement. Nous aborderons la structure de base d'une communication entre serveur et client, ainsi que les concepts de liens hypertextes et de pages web. Vous découvrirez comment HTML5 et CSS3 permettent de créer et de styliser des pages web.

Nous examinerons aussi comment les requêtes HTTP sont échangées entre les navigateurs et les serveurs, et l'importance de la sécurité en ligne. Le cours comprendra une approche pratique pour vous familiariser avec la création de sites web en utilisant les outils modernes disponibles sur vos iPads.

Analyse d'un Code HTML et CSS

Objectif :
Cette activité vous permettra de découvrir les bases du HTML et du CSS en analysant un code web simple. Vous apprendrez à identifier les éléments HTML et à comprendre comment le CSS les stylise.

Matériel :
- iPad avec l'application Koder installée
- Connexion Internet

> Instructions


Introduction au HTML et CSS

  • Le HTML (HyperText Markup Language) est utilisé pour structurer le contenu d'une page web.
  • Le CSS (Cascading Style Sheets) est utilisé pour styliser et mettre en forme ce contenu.

Copie du Code

Copiez le code HTML et CSS ci-dessous et collez-le dans deux fichiers séparés dans l'application Koder sur votre iPad : un fichier .html et un fichier .css.

Code HTML ---> à copier dans un file "index.html" :


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page d'Exemple</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur la page de M. SALAH</h1>
    </header>
    <main>
        <p>Cliquez sur le lien ci-dessous.</p>
        <a href="https://www.salah.cc/bravo/">Un lien</a>
    </main>
    <footer>
        <p>&copy; 2024 Mon Site</p>
    </footer>
</body>
</html>

Code CSS ---> à copier dans un autre file "styles.css" :


body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
main {
    padding: 20px;
}
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
> Analyse du Code
  • Code HTML : Identifiez et expliquez les différentes balises utilisées, telles que <header>, <main>, <footer>, ainsi que les éléments de texte comme <h1>, <p>, et <a>.
  • Code CSS : Repérez les règles CSS et comprenez comment elles affectent l'apparence de la page (propriétés de couleur, marge, padding, et fond).
> Questions Guidées
  • Quel est le rôle de la balise <header> ?
    _______________________________________ (répondre sur feuille)
  • Comment le CSS affecte-t-il la couleur du texte dans le <header> ?
    _______________________________________ (répondre sur feuille)
  • Quelle est la différence entre les balises <h1> et <h2> ?
    _______________________________________ (répondre sur feuille)
  • À quoi sert la balise <p> ?
    _______________________________________ (répondre sur feuille)
  • Quel est le but de la balise <a> ?
    _______________________________________ (répondre sur feuille)
  • Comment insérer une image dans une page HTML ?
    _______________________________________ (répondre sur feuille)
> Mise en Pratique

Modifiez le code pour changer des éléments comme les couleurs de fond ou le texte. Observez comment ces changements affectent l'apparence de la page.