# Projet Terrarium Partie 1 : Introduction à HTML
```mermaid
journey
title Votre parcours d'apprentissage HTML
section Fondation
Créer un fichier HTML: 3: Student
Ajouter DOCTYPE: 4: Student
Structurer le document: 5: Student
section Contenu
Ajouter des métadonnées: 4: Student
Inclure des images: 5: Student
Organiser la mise en page: 5: Student
section Sémantique
Utiliser les balises appropriées: 4: Student
Améliorer l'accessibilité: 5: Student
Construire un terrarium: 5: Student
```
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ou HyperText Markup Language, est le fondement de tous les sites web que vous avez jamais visités. Pensez à HTML comme au squelette qui donne la structure aux pages web – il définit où va le contenu, comment il est organisé et ce que chaque élément représente. Alors que le CSS "habillera" ultérieurement votre HTML avec des couleurs et des mises en page, et que JavaScript lui donnera vie avec de l’interactivité, HTML fournit la structure essentielle qui rend tout le reste possible.
Dans cette leçon, vous allez créer la structure HTML pour une interface de terrarium virtuelle. Ce projet pratique vous enseignera les concepts fondamentaux de HTML tout en construisant quelque chose de visuellement engageant. Vous apprendrez comment organiser le contenu avec des éléments sémantiques, travailler avec des images, et créer la base pour une application web interactive.
À la fin de cette leçon, vous aurez une page HTML fonctionnelle affichant des images de plantes en colonnes organisées, prête à être stylisée dans la leçon suivante. Ne vous inquiétez pas si elle semble basique au départ – c’est exactement ce que HTML doit faire avant que le CSS ajoute la finition visuelle.
```mermaid
mindmap
root((Fondamentaux HTML))
Structure
Déclaration DOCTYPE
Élément HTML
Section Head
Contenu Body
Elements
Balises & Attributs
Balises Auto-fermantes
Éléments Imbriqués
Bloc vs En-ligne
Content
Éléments de Texte
Images
Conteneurs (div)
Listes
Semantics
Balises Significatives
Accessibilité
Lecteurs d'Écran
Avantages SEO
Best Practices
Imbrication Correcte
Balisage Valide
Texte Alt Descriptif
Structure Organisée
```
## Quiz Pré-Cours
[Quiz pré-cours](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Regardez et Apprenez** : Découvrez cette vidéo pratique
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Mise en Place de Votre Projet
Avant de plonger dans le code HTML, configurons un espace de travail adéquat pour votre projet terrarium. Créer dès le départ une structure de fichiers organisée est une habitude cruciale qui vous servira tout au long de votre parcours en développement web.
### Tâche : Créez Votre Structure de Projet
Vous allez créer un dossier dédié pour votre projet terrarium et y ajouter votre premier fichier HTML. Voici deux approches que vous pouvez utiliser :
**Option 1 : Utiliser Visual Studio Code**
1. Ouvrez Visual Studio Code
2. Cliquez sur "Fichier" → "Ouvrir un dossier" ou utilisez `Ctrl+K, Ctrl+O` (Windows/Linux) ou `Cmd+K, Cmd+O` (Mac)
3. Créez un nouveau dossier nommé `terrarium` et sélectionnez-le
4. Dans le panneau Explorateur, cliquez sur l’icône "Nouveau fichier"
5. Nommez votre fichier `index.html`
**Option 2 : Utiliser des Commandes Terminal**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**Voici ce que ces commandes accomplissent :**
- **Crée** un nouveau répertoire nommé `terrarium` pour votre projet
- **Se déplace** dans le répertoire terrarium
- **Crée** un fichier vide `index.html`
- **Ouvre** le fichier dans Visual Studio Code pour l’édition
> 💡 **Astuce Pro** : Le nom de fichier `index.html` est spécial en développement web. Lorsqu’une personne visite un site, les navigateurs recherchent automatiquement `index.html` comme page par défaut à afficher. Cela signifie qu’une URL comme `https://mysite.com/projects/` servira automatiquement le fichier `index.html` du dossier `projects` sans avoir besoin de spécifier le nom du fichier dans l’URL.
## Comprendre la Structure d’un Document HTML
Chaque document HTML suit une structure spécifique que les navigateurs doivent comprendre pour afficher correctement. Pensez à cette structure comme une lettre formelle – elle contient des éléments requis dans un ordre particulier qui aident le destinataire (ici, le navigateur) à traiter correctement le contenu.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> Titre"]
G --> I["<div> Conteneurs"]
G --> J["<img> Images"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
Commençons par ajouter la base essentielle dont chaque document HTML a besoin.
### La Déclaration DOCTYPE et l’élément Racine
Les deux premières lignes de chaque fichier HTML servent d’"introduction" du document au navigateur :
```html
<!DOCTYPE html>
<html></html>
```
**Comprendre ce que fait ce code :**
- **Déclare** le type de document comme HTML5 avec `<!DOCTYPE html>`
- **Crée** l’élément racine `<html>` qui contiendra tout le contenu de la page
- **Établit** les standards web modernes pour un rendu correct par le navigateur
- **Assure** un affichage cohérent sur différents navigateurs et appareils
> 💡 **Conseil VS Code** : Survolez n’importe quelle balise HTML dans VS Code pour voir des informations utiles issues de MDN Web Docs, incluant des exemples d’utilisation et la compatibilité avec les navigateurs.
> 📚 **En savoir plus** : La déclaration DOCTYPE empêche les navigateurs d’entrer en "mode fantaisie" (quirks mode), auparavant utilisé pour supporter des sites très anciens. Le développement web moderne utilise la simple déclaration `<!DOCTYPE html>` pour assurer un [rendu conforme aux standards](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
### 🔄 **Contrôle Pédagogique**
**Pause et réflexion** : Avant de continuer, assurez-vous de comprendre :
- ✅ Pourquoi chaque document HTML a besoin d’une déclaration DOCTYPE
- ✅ Ce que contient l’élément racine `<html>`
- ✅ Comment cette structure aide les navigateurs à rendre les pages correctement
**Auto-évaluation rapide** : Pouvez-vous expliquer avec vos mots ce que signifie un "rendu conforme aux standards" ?
## Ajout des Métadonnées Essentielles du Document
La section `<head>` d’un document HTML contient des informations cruciales que les navigateurs et moteurs de recherche utilisent, mais que les visiteurs ne voient pas directement sur la page. Pensez-y comme aux informations "en coulisses" qui aident votre page web à fonctionner correctement et à s’afficher de manière adéquate sur différents appareils et plateformes.
Ces métadonnées indiquent aux navigateurs comment afficher votre page, quelle encodage de caractères utiliser, et comment gérer différentes tailles d’écran – indispensables pour créer des pages web professionnelles et accessibles.
### Tâche : Ajouter l’En-tête du Document
Insérez cette section `<head>` entre vos balises `<html>` d’ouverture et de fermeture :
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**Décomposer ce que chaque élément accomplit :**
- **Définit** le titre de la page qui apparaît dans les onglets du navigateur et résultats de recherche
- **Spécifie** l’encodage de caractères UTF-8 pour un affichage correct du texte dans le monde entier
- **Assure** la compatibilité avec les versions modernes d’Internet Explorer
- **Configure** le design responsive en réglant la fenêtre graphique selon la largeur de l’appareil
- **Contrôle** le niveau de zoom initial pour afficher le contenu à sa taille naturelle
> 🤔 **Réfléchissez à ceci** : Que se passerait-il si vous mettiez une meta viewport comme ceci : `` ? Cela forcerait la page à être toujours de 600 pixels de large, brisant le design responsive ! Découvrez-en plus sur la [configuration correcte du viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Construire le Corps du Document
L’élément `` contient tout le contenu visible de votre page web – tout ce que les utilisateurs verront et avec quoi ils interagiront. Alors que la section `` donne des instructions au navigateur, la section `` contient le contenu réel : texte, images, boutons et autres éléments créant l’interface utilisateur.
Ajoutons la structure du corps et comprenons comment les balises HTML fonctionnent ensemble pour créer un contenu significatif.
### Comprendre la Structure des Balises HTML
HTML utilise des balises appariées pour définir les éléments. La plupart des balises ont une balise d’ouverture comme `
` et une balise de fermeture comme `
`, avec du contenu entre les deux : `
Bonjour, monde !
`. Cela crée un élément paragraphe contenant le texte "Bonjour, monde !".
### Tâche : Ajouter l’Élément Corps
Mettez à jour votre fichier HTML pour inclure l’élément `` :
```html
Welcome to my Virtual Terrarium
```
**Voici ce que cette structure complète fournit :**
- **Établit** le cadre de base du document HTML5
- **Inclut** les métadonnées essentielles pour un rendu correct par le navigateur
- **Crée** un corps vide prêt à accueillir votre contenu visible
- **Suit** les meilleures pratiques modernes en développement web
Vous êtes maintenant prêt à ajouter les éléments visibles de votre terrarium. Nous utiliserons des éléments `
` comme conteneurs pour organiser différentes sections de contenu, et des éléments `` pour afficher les images des plantes.
### Travailler avec les Images et les Conteneurs de Mise en Page
Les images sont spéciales en HTML car elles utilisent des balises "auto-fermantes". Contrairement aux éléments comme `` qui entourent du contenu, la balise `` contient toutes les informations dont elle a besoin dans la balise elle-même via des attributs comme `src` pour le chemin de l’image et `alt` pour l’accessibilité.
Avant d’ajouter les images à votre HTML, vous devrez organiser correctement vos fichiers de projet en créant un dossier images et en ajoutant les graphiques de plantes.
**Commencez par préparer vos images :**
1. Créez un dossier nommé `images` à l’intérieur de votre dossier projet terrarium
2. Téléchargez les images de plantes depuis le [dossier solution](../../../../3-terrarium/solution/images) (14 images de plantes au total)
3. Copiez toutes les images de plantes dans votre nouveau dossier `images`
### Tâche : Créer la Mise en Page d’Affichage des Plantes
Ajoutez maintenant les images des plantes organisées en deux colonnes entre vos balises `` :
```html
```
**Étape par étape, voici ce qui se passe dans ce code :**
- **Crée** un conteneur principal de page avec `id="page"` pour contenir tout le contenu
- **Établit** deux conteneurs de colonnes : `left-container` et `right-container`
- **Organise** 7 plantes dans la colonne gauche et 7 plantes dans la colonne droite
- **Enveloppe** chaque image de plante dans un div `plant-holder` pour un positionnement individuel
- **Applique** des noms de classes cohérents pour le stylage CSS dans la prochaine leçon
- **Attribue** des ID uniques à chaque image de plante pour l’interaction JavaScript plus tard
- **Inclut** des chemins de fichiers corrects pointant vers le dossier images
> 🤔 **Réfléchissez-y** : Remarquez que toutes les images ont actuellement le même texte alternatif "plant". Ce n’est pas idéal pour l’accessibilité. Les utilisateurs de lecteurs d’écran entendraient "plant" répété 14 fois sans savoir quelle plante spécifique chaque image montre. Pouvez-vous penser à des textes alternatifs meilleurs et plus descriptifs pour chaque image ?
> 📝 **Types d’Éléments HTML** : Les éléments `
` sont de type "block-level" et prennent toute la largeur, tandis que les éléments `` sont "inline" et ne prennent que la largeur nécessaire. Que pensez-vous qu’il se passerait si vous remplaciez tous ces `
` par des `` ?
### 🔄 **Contrôle Pédagogique**
**Compréhension de la structure** : Prenez un moment pour revoir votre structure HTML :
- ✅ Pouvez-vous identifier les conteneurs principaux dans votre mise en page ?
- ✅ Comprenez-vous pourquoi chaque image a un ID unique ?
- ✅ Comment décririez-vous la fonction des divs `plant-holder` ?
**Inspection Visuelle** : Ouvrez votre fichier HTML dans un navigateur. Vous devriez voir :
- Une liste basique d’images de plantes
- Des images organisées en deux colonnes
- Une mise en page simple et non stylisée
**Rappelez-vous** : Cet aspect dépouillé est exactement ce à quoi HTML doit ressembler avant la stylisation CSS !
Avec ce balisage ajouté, les plantes apparaîtront à l’écran, même si elles n’auront pas encore l’air fini – c’est là que le CSS intervient dans la prochaine leçon ! Pour l’instant, vous avez une base HTML solide qui organise correctement votre contenu et suit les bonnes pratiques d’accessibilité.
## Utiliser du HTML Sémantique pour l’Accessibilité
Le HTML sémantique signifie choisir des éléments HTML basés sur leur signification et leur fonction, pas seulement leur apparence. Lorsque vous utilisez un balisage sémantique, vous communiquez la structure et la signification de votre contenu aux navigateurs, moteurs de recherche et technologies d’assistance comme les lecteurs d’écran.
```mermaid
flowchart TD
A[Besoin d'ajouter du contenu ?] --> B{Quel type ?}
B -->|Titre principal| C["
