Mon Premier Site Web 😎

Bienvenue dans ton tout premier cours de création de pages web fun et acidulé ! Prépare-toi à explorer HTML et CSS tout en créant une histoire pleine de couleurs et d'aventures. 🎉

Partie 1 : Découverte du HTML 📚

1. Créer la structure de base

  1. Ouvre ton éditeur de texte (ex. Sublime Text).
  2. Crée un nouveau fichier et sauvegarde-le sous le nom index.html.
  3. Copie-colle le code suivant dans ton fichier : 
    <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon Histoire Amusante</title>
  </head>
  <body>
    <!-- Ton histoire sera ici -->
  </body>
</html>
  4. Enregistre et ouvre ce fichier dans ton navigateur pour voir la page (même si elle est vide pour l’instant).

👍 C'est parti !

2. Créer une histoire amusante avec l’aide d’une intelligence artificielle 🤖

Dans cette partie, tu vas créer une histoire autour d’un animal que tu aimes. Pour t’aider à générer rapidement un contenu riche (texte bien structuré et images), tu utiliseras une intelligence artificielle (comme ChatGPT).

Attentes pour la structure de ton histoire :

  • Titre principal : Un titre accrocheur pour ton histoire.
  • Divisions de l'histoire : Divise ton récit en plusieurs parties avec des sous-titres, par exemple : "Le début de l’aventure", "Un défi inattendu", "La grande victoire".
  • Paragraphes : Chaque partie doit comporter un ou plusieurs paragraphes expliquant l’histoire.
  • Illustrations : Pour chaque partie, une image qui illustre l’ambiance ou l’action.

Exercice :

  1. Création du prompt pour l'IA :

    Réfléchis à ce que tu veux raconter et rédige un prompt détaillé pour demander à l’IA de générer un texte bien organisé et des suggestions d’images.

    Exemple de prompt (à personnaliser) :

    "Raconte une histoire amusante sur un [nom de l'animal] qui vit une aventure extraordinaire. L'histoire doit commencer par un titre principal, puis être divisée en trois parties avec des sous-titres pour chacune (par exemple : 'Le début de l’aventure', 'Un défi inattendu', 'La grande victoire'). Pour chaque partie, génère un paragraphe descriptif et propose une image illustrative correspondante."
  2. Générer le contenu :

    Utilise l'outil d'intelligence artificielle pour obtenir ton texte et tes images. Vérifie que le contenu est bien structuré et cohérent.

  3. Intégrer le contenu dans ton fichier HTML :

    Copie le texte généré dans ton fichier HTML à l'intérieur de la balise <body> et place les images dans le même dossier que ton fichier. Ouvre le fichier dans ton navigateur pour voir le rendu.

✨ Amuse-toi bien avec l'IA !

3. Découvrir les balises de titres secondaires

Les titres secondaires permettent de structurer les différentes parties de ton histoire.

  1. Utiliser <h2> pour un sous-titre :

    Entoure le titre de ton premier paragraphe avec la balise <h2> :

    <h2>Le début de l’aventure</h2>

    Question : Que se passe-t-il quand tu utilises <h2> au lieu de <h1> ? (Le texte est un peu moins grand et moins imposant.)

  2. Comparer <h1> et <h2> :

    Réfléchis à la différence entre ces deux balises. Le <h1> est réservé au titre principal, tandis que le <h2> sert pour les titres de sections.

  3. Appliquer <h2> aux autres parties :

    Mets en valeur tous les titres de tes autres paragraphes avec la balise <h2>.

📢 Allez, on continue !

4. Ajouter un tableau pour présenter des informations

Les tableaux permettent d’organiser des informations de manière structurée.

  1. Créer un tableau simple :

    Liste quelques personnages et donne une description pour chacun en utilisant les balises <table>, <tr> et <td> :

    <table border="1">
  <tr>
    <th>Personnage</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Tigrou</td>
    <td>Le héros courageux</td>
  </tr>
  <tr>
    <td>Luna</td>
    <td>La sage conseillère</td>
  </tr>
</table>
  2. Expérimente :

    Essaie de modifier la largeur, la couleur ou l’alignement en ajoutant des attributs ou en utilisant du CSS (nous verrons cela plus tard).

📊 Tableau prêt, c'est parti !

5. Créer des listes pour organiser des liens et des remarques

  1. Liste de liens :

    Crée une liste de sites web intéressants sur ton animal :

    <ul>
  <li><a href="https://exemple.com">Infos sur Tigrou</a></li>
  <li><a href="https://exemple2.com">Photos de Tigrou</a></li>
</ul>
  2. Liste de remarques :

    Crée une liste à deux niveaux pour noter ce que tu aimes et ce que tu n’aimes pas dans ton histoire :

    <ul>
  <li>Ce que j'aime
    <ul>
      <li>Les aventures</li>
      <li>Les illustrations</li>
    </ul>
  </li>
  <li>Ce que je n'aime pas
    <ul>
      <li>Les moments tristes</li>
    </ul>
  </li>
</ul>

📝 Listes en ordre, let's go !

Partie 2 : Découverte du CSS 🎨

1. Ajouter des styles directement dans les balises

  1. Changer la taille d’une image :

    Ajoute l’attribut style à ta balise <img> pour fixer une largeur :

    <img src="tigrou.jpg" alt="Image de Tigrou" style="width:200px;">

    Question : Quelle différence remarques-tu dans la taille de l’image ?

  2. Modifier la couleur d’un texte :

    Ajoute un style directement dans une balise <p> :

    <p style="color: red;">Tigrou part à l’aventure !</p>

    Question : Comment change la couleur du texte dans le navigateur ?

💅 Styles en ligne, c'est stylé !

2. Intégrer une zone de style dans la page

  1. Ajouter une balise <style> :

    Dans la section <head>, ajoute la zone de style suivante :

    <style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  h1 {
    text-align: center;
    color: darkblue;
  }
  p {
    line-height: 1.5;
  }
</style>
  2. Question :

    Quel effet remarques-tu sur l’apparence générale de ta page ?

🎨 Zone de style intégrée !

3. Jouer avec les marges et l’espacement

  1. Modifier l’espacement des paragraphes :

    Dans ta zone de style, ajoute :

    p {
  margin: 10px;
  padding: 5px;
}

    Question : Comment ces changements affectent-ils l’espacement autour du texte ?

📏 Espacement en action !

4. Ajouter des effets interactifs

  1. Effet au survol :

    Ajoute cette règle dans ta zone de style :

    img:hover {
  transform: scale(1.2);
  transition: transform 0.5s;
}

    Question : Que se passe-t-il quand tu passes la souris sur l’image ?

🚀 Effet interactif activé !

5. Personnaliser d’autres éléments

  1. Modifier le style du tableau :

    Essaie d’ajouter des bordures, changer les couleurs ou l’alignement en utilisant du CSS pour le tableau et ses cellules :

    table {
  border-collapse: collapse;
  width: 80%;
  margin: auto;
}
td, th {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}
  2. Utiliser des classes ou des identifiants :

    Pour personnaliser certains éléments, donne-leur une classe ou un identifiant et écris des règles spécifiques.

    <p class="important">Ceci est un texte important !</p>
    .important {
  color: green;
  font-weight: bold;
}

✨ Personnalisation, c'est fun !

Partie 3 : Évaluation – Crée ta propre page web ! 🚀

Maintenant que tu as découvert plein de balises HTML et de règles CSS, il est temps de mettre en pratique tout ce que tu as appris.

Consigne du Projet :

Critères d’évaluation :

Conclusion 🌟

Félicitations ! Tu viens de découvrir les bases du HTML et du CSS. Tu sais maintenant comment construire une page web à partir de rien. N’hésite pas à revoir chaque exercice et à expérimenter pour améliorer ton site. Amuse-toi bien et laisse libre cours à ta créativité ! 😊