Added French File

2-js-basics/2-functions-methods/translations/README.fr.md

@@ -0,0 +1,200 @@
+# Principes de base de JavaScript : méthodes et fonctions
+
+![Bases JavaScript - Fonctions](/sketchnotes/webdev101-js-functions.png)
+> Sketchnote par [Tomomi Imura] (https://twitter.com/girlie_mac)
+
+## Quiz pré-conférence
+[Quiz pré-conférence](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9)
+
+Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que notre code est lisible. Bien que cela semble contre-intuitif, le code est lu beaucoup plus de fois qu'il n'est écrit. Un outil de base dans la boîte à outils d'un développeur pour garantir un code maintenable est la **fonction**.
+
+[![Méthodes et fonctions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Méthodes et fonctions")
+
+> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les méthodes et les fonctions.
+
+> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa) !
+
+## Les fonctions
+
+À la base, une fonction est un bloc de code que nous pouvons exécuter à la demande. C'est parfait pour les scénarios où nous devons effectuer la même tâche plusieurs fois ; plutôt que de dupliquer la logique à plusieurs endroits (ce qui rendrait difficile la mise à jour le moment venu), nous pouvons la centraliser à un seul endroit et l'appeler chaque fois que nous avons besoin de l'opération effectuée - vous pouvez même appeler des fonctions à partir d'autres fonctions !.
+
+La capacité de nommer une fonction est tout aussi importante. Bien que cela puisse sembler trivial, le nom fournit un moyen rapide de documenter une section de code. Vous pourriez penser à cela comme une étiquette sur un bouton. Si je clique sur un bouton indiquant « Annuler la minuterie », je sais que l'horloge va s'arrêter.
+
+## Créer et appeler une fonction
+
+La syntaxe d'une fonction ressemble à la suivante :
+
+```javascript
+function nameOfFunction() { // définition de la fonction
+ // définition/corps de la fonction
+}
+```
+
+Si je voulais créer une fonction pour afficher un message d'accueil, cela pourrait ressembler à ceci :
+
+```javascript
+fonction affichageSalutation() {
+  console.log('Bonjour tout le monde !');
+}
+```
+
+Chaque fois que nous voulons appeler (ou invoquer) notre fonction, nous utilisons le nom de la fonction suivi de `()`. Il convient de noter que notre fonction peut être définie avant ou après que nous décidions de l'appeler ; le compilateur JavaScript le trouvera pour vous.
+
+```javascript
+// appeler notre fonction
+afficherSalutation();
+```
+
+> **REMARQUE :** Il existe un type spécial de fonction connu sous le nom de **méthode**, que vous avez déjà utilisé ! En fait, nous l'avons vu dans notre démo ci-dessus lorsque nous avons utilisé `console.log`. Ce qui différencie une méthode d'une fonction, c'est qu'une méthode est attachée à un objet (`console` dans notre exemple), tandis qu'une fonction est flottante. Vous entendrez de nombreux développeurs utiliser ces termes de manière interchangeable.
+
+### Bonnes pratiques de la fonction
+
+Il y a une poignée de bonnes pratiques à garder à l'esprit lors de la création de fonctions
+
+- Comme toujours, utilisez des noms descriptifs pour savoir ce que la fonction fera
+- Utilisez **camelCasing** pour combiner des mots
+- Gardez vos fonctions concentrées sur une tâche spécifique
+
+## Passer des informations à une fonction
+
+Pour rendre une fonction plus réutilisable, vous souhaiterez souvent lui transmettre des informations. Si nous considérons notre exemple `displayGreeting` ci-dessus, il affichera uniquement **Hello, world!**. Pas la fonction la plus utile que l'on puisse créer. Si nous voulons le rendre un peu plus flexible, comme permettre à quelqu'un de spécifier le nom de la personne à saluer, nous pouvons ajouter un **paramètre**. Un paramètre (également parfois appelé **argument**) est une information supplémentaire envoyée à une fonction.
+
+Les paramètres sont répertoriés dans la partie définition entre parenthèses et sont séparés par des virgules comme suit :
+
+```javascript
+nom de la fonction (param, param2, param3) {
+
+}
+```
+
+Nous pouvons mettre à jour notre `displayGreeting` pour accepter un nom et l'afficher.
+
+```javascript
+fonction displaySalutation(nom) {
+  const message = `Bonjour, ${nom}!`;
+  console.log(message);
+}
+```
+
+Lorsque nous voulons appeler notre fonction et passer le paramètre, nous le spécifions entre parenthèses.
+
+```javascript
+displayGreeting('Christopher');
+// affiche "Bonjour, Christophe !" quand courir
+```
+
+## Les valeurs par défaut
+
+Nous pouvons rendre notre fonction encore plus flexible en ajoutant plus de paramètres. Mais que se passe-t-il si nous ne voulons pas exiger que chaque valeur soit spécifiée ? Conformément à notre exemple de salutation, nous pourrions laisser le nom tel que requis (nous devons savoir qui nous saluons), mais nous voulons permettre à la salutation elle-même d'être personnalisée à votre guise. Si quelqu'un ne veut pas le personnaliser, nous fournissons une valeur par défaut à la place. Pour fournir une valeur par défaut à un paramètre, nous le définissons de la même manière que nous définissons une valeur pour une variable - `parameterName = 'defaultValue'`. Pour voir un exemple complet :
+
+```javascript
+function displayGreeting(nom, salutation='Bonjour') {
+  console.log(`${salutation}, ${nom}`);
+}
+```
+
+Lorsque nous appelons la fonction, nous pouvons alors décider si nous voulons définir une valeur pour « salutation ».
+
+```javascript
+displayGreeting('Christopher');
+// affiche "Bonjour, Christophe"
+
+displayGreeting('Christopher', 'Bonjour');
+// affiche "Bonjour, Christophe"
+```
+
+## Valeurs de retour
+
+Jusqu'à présent, la fonction que nous avons créée sortira toujours sur la [console](https://developer.mozilla.org/docs/Web/API/console). Parfois, cela peut être exactement ce que nous recherchons, en particulier lorsque nous créons des fonctions qui appelleront d'autres services. Mais que se passe-t-il si je veux créer une fonction d'assistance pour effectuer un calcul et fournir la valeur afin que je puisse l'utiliser ailleurs ?
+
+Nous pouvons le faire en utilisant une **valeur de retour**. Une valeur de retour est renvoyée par la fonction et peut être stockée dans une variable de la même manière que nous pourrions stocker une valeur littérale telle qu'une chaîne ou un nombre.
+
+Si une fonction renvoie quelque chose, le mot-clé « return » est utilisé. Le mot-clé `return` attend une valeur ou une référence de ce qui est renvoyé comme suit :
+
+```javascript
+retourner maVariable ;
+```
+
+Nous pourrions créer une fonction pour créer un message d'accueil et renvoyer la valeur à l'appelant
+
+```javascript
+fonction createGreetingMessage(nom) {
+  const message = `Bonjour, ${nom}`;
+  renvoyer le message ;
+}
+```
+
+Lors de l'appel de cette fonction, nous allons stocker la valeur dans une variable. C'est à peu près de la même manière que nous définirions une variable sur une valeur statique (comme `const name = 'Christopher'`).
+
+```javascript
+const GreetingMessage = createGreetingMessage('Christopher');
+```
+
+## Fonctions comme paramètres de fonctions
+
+Au fur et à mesure que vous progressez dans votre carrière de programmeur, vous rencontrerez des fonctions qui acceptent des fonctions comme paramètres. Cette astuce est couramment utilisée lorsque nous ne savons pas quand quelque chose va se produire ou se terminer, mais nous savons que nous devons effectuer une opération en réponse.
+
+À titre d'exemple, considérons [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), qui démarre une minuterie et exécutera le code une fois terminé. Nous devons lui dire quel code nous voulons exécuter. Cela ressemble à un travail parfait pour une fonction !
+
+Si vous exécutez le code ci-dessous, après 3 secondes, vous verrez le message **3 secondes se sont écoulées**.
+
+```javascript
+fonction displayTerminé() {
+  console.log('3 secondes se sont écoulées');
+}
+// la valeur de la minuterie est en millisecondes
+setTimeout(displayDone, 3000);
+```
+
+### Fonctions anonymes
+
+Jetons un autre regard sur ce que nous avons construit. Nous créons une fonction avec un nom qui sera utilisé une fois. Au fur et à mesure que notre application se complexifie, on se voit créer beaucoup de fonctions qui ne seront appelées qu'une seule fois. Ce n'est pas idéal. Il s'avère que nous n'avons pas toujours besoin de fournir un nom !
+
+Lorsque nous passons une fonction en tant que paramètre, nous pouvons éviter d'en créer une à l'avance et en créer une à la place dans le cadre du paramètre. Nous utilisons le même mot-clé `function`, mais à la place, nous le construisons en tant que paramètre.
+
+Réécrivons le code ci-dessus pour utiliser une fonction anonyme :
+
+```javascript
+setTimeout(fonction() {
+  console.log('3 secondes se sont écoulées');
+}, 3000);
+```
+
+Si vous exécutez notre nouveau code, vous remarquerez que nous obtenons les mêmes résultats. Nous avons créé une fonction, mais nous n'avons pas eu besoin de lui donner de nom !
+
+### Fonctions de la grosse flèche
+
+Un raccourci courant dans de nombreux langages de programmation (y compris JavaScript) est la possibilité d'utiliser ce qu'on appelle une fonction **flèche** ou **flèche grasse**. Il utilise un indicateur spécial de `=>`, qui ressemble à une flèche - d'où le nom ! En utilisant `=>`, nous pouvons ignorer le mot-clé `function`.
+
+Réécrivons notre code une fois de plus pour utiliser une fonction grosse flèche :
+
+```javascript
+setTimeout(() => {
+  console.log('3 secondes se sont écoulées');
+}, 3000);
+```
+
+### Quand utiliser chaque stratégie
+
+Vous avez maintenant vu que nous avons trois façons de passer une fonction en tant que paramètre et vous vous demandez peut-être quand utiliser chacune. Si vous savez que vous utiliserez la fonction plus d'une fois, créez-la normalement. Si vous ne l'utilisez que pour un seul emplacement, il est généralement préférable d'utiliser une fonction anonyme. Que vous utilisiez ou non une grosse fonction de flèche ou la syntaxe plus traditionnelle de « fonction » dépend de vous, mais vous remarquerez que la plupart des développeurs modernes préfèrent « => ».
+
+---
+
+## 🚀 Défi
+
+Pouvez-vous articuler en une phrase la différence entre les fonctions et les méthodes ? Essaie!
+
+## Quiz post-conférence
+[Quizz post-conférence](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10)
+
+## Révision et auto-apprentissage
+
+Cela vaut la peine de [lire un peu plus sur les fonctions fléchées] (https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), car elles sont de plus en plus utilisées dans les bases de code. Entraînez-vous à écrire une fonction, puis à la réécrire avec cette syntaxe.
+
+## Mission
+
+[Amusez-vous avec les fonctions](assignment.md)
+
+
+
+

2-js-basics/4-arrays-loops/translations/README.fr.md

@@ -0,0 +1,127 @@
+# Principes de base de JavaScript : tableaux et boucles
+
+![Les bases de JavaScript - Tableaux](/sketchnotes/webdev101-js-arrays.png)
+> Sketchnote par [Tomomi Imura] (https://twitter.com/girlie_mac)
+
+## Quiz pré-conférence
+[Quiz pré-conférence](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13)
+
+Cette leçon couvre les bases de JavaScript, le langage qui offre de l'interactivité sur le Web. Dans cette leçon, vous découvrirez les tableaux et les boucles, qui sont utilisés pour manipuler des données.
+
+[![Tableaux](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Tableaux")
+[![Boucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Boucles")
+> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles.
+
+> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa) !
+## tableaux
+
+Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau.
+
+Les tableaux sont partout autour de nous ! Pouvez-vous penser à un exemple réel d'un réseau, tel qu'un réseau de panneaux solaires ?
+
+La syntaxe d'un tableau est une paire de crochets.
+
+`let myArray = [];`
+
+Il s'agit d'un tableau vide, mais les tableaux peuvent être déclarés déjà remplis de données. Plusieurs valeurs d'un tableau sont séparées par une virgule.
+
+`let iceCreamFlavors = ["Chocolate", "Fraise", "Vanille", "Pistache", "Rocky Road"];`
+
+✅ Les valeurs du tableau se voient attribuer une valeur unique appelée **index**, un nombre entier attribué en fonction de sa distance depuis le début du tableau. Dans l'exemple ci-dessus, la valeur de chaîne "Chocolate" a un index de 0 et l'index de "Rocky Road" est de 4. Utilisez l'index avec des crochets pour récupérer, modifier ou insérer des valeurs de tableau.
+
+✅ Cela vous surprend-il que les tableaux commencent à l'index zéro ? Dans certains langages de programmation, les index commencent à 1. Il existe une histoire intéressante à ce sujet, que vous pouvez [lire sur Wikipedia] (https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Fraise", "Vanille", "Pistache", "Rocky Road"];
+IceCreamFlavors[2]; //"Vanille"
+```
+
+Vous pouvez utiliser l'index pour modifier une valeur, comme ceci :
+
+```javascript
+IceCreamFlavors[4] = "Beurre de noix de pécan" ; //Changement de "Rocky Road" en "Butter Pecan"
+```
+
+Et vous pouvez insérer une nouvelle valeur à un index donné comme ceci :
+
+```javascript
+IceCreamFlavors[5] = « Pâte à biscuits » ; //Ajout de "Pâte à biscuits"
+```
+
+✅ Un moyen plus courant de pousser des valeurs vers un tableau consiste à utiliser des opérateurs de tableau tels que array.push()
+
+Pour savoir combien d'éléments se trouvent dans un tableau, utilisez la propriété `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Fraise", "Vanille", "Pistache", "Rocky Road"];
+IceCreamFlavors.length; //5
+```
+
+Essayez vous-même ! Utilisez la console de votre navigateur pour créer et manipuler un tableau de votre propre création.
+
+## Boucles
+
+Les boucles permettent des tâches répétitives ou **itératives** et peuvent économiser beaucoup de temps et de code. Chaque itération peut varier dans ses variables, valeurs et conditions. Il existe différents types de boucles en JavaScript, et elles ont de petites différences, mais font essentiellement la même chose : boucler sur des données.
+
+### Boucle For
+
+La boucle `for` nécessite 3 parties pour itérer :
+    - `compteur` Une variable qui est généralement initialisée avec un nombre qui compte le nombre d'itérations.
+    - `condition` Expression qui utilise des opérateurs de comparaison pour provoquer l'arrêt de la boucle lorsque `true`
+    - `iteration-expression` S'exécute à la fin de chaque itération, généralement utilisé pour modifier la valeur du compteur
+  
+```javascript
+    //Compter jusqu'à 10
+    pour (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+Exécutez ce code dans une console de navigateur. Que se passe-t-il lorsque vous apportez de petites modifications au compteur, à la condition ou à l'expression d'itération ? Pouvez-vous le faire fonctionner à l'envers, en créant un compte à rebours ?
+
+### Boucle while
+
+Contrairement à la syntaxe de la boucle "for", les boucles "while" ne nécessitent qu'une condition qui arrête la boucle lorsqu'elle est "true". Les conditions dans les boucles reposent généralement sur d'autres valeurs telles que les compteurs et doivent être gérées pendant la boucle. Les valeurs de départ des compteurs doivent être créées en dehors de la boucle, et toutes les expressions répondant à une condition, y compris la modification du compteur, doivent être conservées à l'intérieur de la boucle.
+
+```javascript
+//Compter jusqu'à 10
+soit i = 0 ;
+tandis que (i < 10) {
+ console.log(i);
+ je++ ;
+}
+```
+
+✅ Pourquoi choisiriez-vous une boucle for par rapport à une boucle while ? 17 000 téléspectateurs ont posé la même question sur StackOverflow, et certaines des opinions [pourraient vous intéresser] (https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Boucles et tableaux
+
+Les tableaux sont souvent utilisés avec des boucles car la plupart des conditions nécessitent la longueur du tableau pour arrêter la boucle, et l'index peut également être la valeur du compteur.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Fraise", "Vanille", "Pistache", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} // Se termine lorsque toutes les saveurs sont imprimées
+```
+
+✅ Expérimentez en bouclant un tableau de votre propre fabrication dans la console de votre navigateur.
+
+---
+
+## 🚀 Défi
+
+Il existe d'autres façons de boucler sur des tableaux autres que les boucles for et while. Il y a [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web /JavaScript/Reference/Statements/for...of), et [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Réécrivez votre boucle de tableau en utilisant l'une de ces techniques.
+
+## Quiz post-conférence
+[Quizz post-conférence](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14)
+
+
+## Révision et auto-apprentissage
+
+Les tableaux en JavaScript ont de nombreuses méthodes qui leur sont attachées, extrêmement utiles pour la manipulation de données. [Lisez plus sur ces méthodes] (https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) et essayez certaines d'entre elles (comme push, pop, slice et splice) sur un tableau de votre création.
+
+## Mission
+
+[Loop an Array](assignment.md)

3-terrarium/1-intro-to-html/translations/README.fr.md

@@ -0,0 +1,231 @@
+# Projet Terrarium Partie 1 : Introduction au HTML
+
+![Introduction au HTML](/sketchnotes/webdev101-html.png)
+> Sketchnote par [Tomomi Imura] (https://twitter.com/girlie_mac)
+
+## Quiz pré-conférence
+
+[Quizz pré-conférence](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15)
+
+### Introduction
+
+HTML, ou HyperText Markup Language, est le « squelette » du Web. Si CSS 'habille' votre HTML et que JavaScript lui donne vie, HTML est le corps de votre application Web. La syntaxe HTML reflète même cette idée, car elle inclut les balises "diriger", "corps" et "footer".
+
+Dans cette leçon, nous allons utiliser HTML pour mettre en page le « squelette » de l'interface de notre terrarium virtuel. Il aura un titre et trois colonnes : une colonne de droite et une colonne de gauche où vivent les plantees déplaçables, et une zone centrale qui sera le véritable terrarium en verre. À la fin de cette leçon, vous pourrez voir les plantees dans les colonnes, mais l'interface semblera un peu étrange ; ne vous inquiétez pas, dans la section suivante, vous ajouterez des styles CSS à l'interface pour la rendre plus belle.
+
+### Tâche
+
+Sur votre ordinateur, créez un dossier appelé « terrarium » et à l'intérieur, un fichier appelé « index.html ». Vous pouvez le faire dans Visual Studio Code après avoir créé votre dossier terrarium en ouvrant une nouvelle fenêtre VS Code, en cliquant sur « Ouvrir le dossier » et en accédant à votre nouveau dossier. Cliquez sur le petit bouton « fichier » dans le volet Explorateur et créez le nouveau fichier :
+
+![explorateur dans VS Code](images/vs-code-index.png)
+
+Ou
+
+Utilisez ces commandes sur votre git bash :
+* `terrarium mkdir`
+* "cd terrarium"
+* `touche index.html`
+* `code index.html` ou `nano index.html`
+
+> les fichiers index.html indiquent à un navigateur qu'il s'agit du fichier par défaut dans un dossier ; Les URL telles que « https://anysite.com/test » peuvent être créées en utilisant une structure de dossiers comprenant un dossier appelé « test » avec « index.html » à l’intérieur ; `index.html` n'a pas à apparaître dans une URL.
+
+---
+
+## Les balises DocType et html
+
+La première ligne d'un fichier HTML est son doctype. Il est un peu surprenant que vous ayez besoin d'avoir cette ligne tout en haut du fichier, mais elle indique aux navigateurs plus anciens que le navigateur doit afficher la page en mode standard, conformément à la spécification HTML actuelle.
+
+> Astuce : dans VS Code, vous pouvez survoler une balise et obtenir des informations sur son utilisation dans les guides de référence MDN.
+
+La deuxième ligne devrait être la balise d'ouverture de la balise `<html>`, suivie maintenant de sa balise de fermeture `</html>`. Ces balises sont les éléments racines de votre interface.
+
+### Tâche
+
+Ajoutez ces lignes en haut de votre fichier `index.html` :
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Il existe quelques modes différents qui peuvent être déterminés en définissant le DocType avec une chaîne de requête : [Quirks Mode et Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ces modes supportaient de très vieux navigateurs qui ne sont normalement plus utilisés de nos jours (Netscape Navigator 4 et Internet Explorer 5). Vous pouvez vous en tenir à la déclaration doctype standard.
+
+---
+
+## La « tête » du document
+
+La zone « tête » du document HTML comprend des informations cruciales sur votre page Web, également appelées [métadonnées] (https://developer.mozilla.org/docs/Web/HTML/Element/méta). Dans notre cas, nous indiquons au serveur Web auquel cette page sera envoyée pour être rendue, ces quatre choses :
+
+- le titre de la page
+- les métadonnées de la page comprenant :
+    - le "jeu de caractères", indiquant quel encodage de caractères est utilisé dans la page
+    - informations sur le navigateur, y compris « x-ua-compatible » qui indique que le navigateur IE=edge est pris en charge
+    - des informations sur la façon dont la fenêtre doit se comporter lorsqu'elle est chargée. La définition de la fenêtre pour avoir une échelle initiale de 1 contrôle le niveau de zoom lorsque la page est chargée pour la première fois.
+
+### Tâche
+
+Ajoutez un bloc "diriger" à votre document entre les balises d'ouverture et de fermeture "<html>".
+
+```html
+<diriger>
+    <title>Bienvenue dans mon terrarium virtuel</title>
+    <méta charset="utf-8" />
+    <méta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <méta name="viewport" content="width=device-width, initial-scale=1" />
+</diriger>
+```
+
+✅ Que se passerait-il si vous définissiez une balise méta viewport comme celle-ci : `<méta name="viewport" content="width=600">` ? En savoir plus sur la [fenêtre](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_méta_étiqueter).
+
+---
+
+## Le `corps` du document
+
+### Balises HTML
+
+En HTML, vous ajoutez des balises à votre fichier .html pour créer des éléments d'une page Web. Chaque balise a généralement une balise d'ouverture et de fermeture, comme celle-ci : `<p>bonjour</p>` pour indiquer un paragraphe. Créez le corps de votre interface en ajoutant un ensemble de balises `<corps>` à l'intérieur de la paire de balises `<html>` ; votre balisage ressemble maintenant à ceci :
+
+### Tâche
+
+```html
+<!DOCTYPE html>
+<html>
+    <tête>
+        <title>Bienvenue dans mon terrarium virtuel</title>
+        <méta charset="utf-8" />
+        <méta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <méta name="viewport" content="width=device-width, initial-scale=1" />
+    </diriger>
+    <corps></corps>
+</html>
+```
+
+Maintenant, vous pouvez commencer à créer votre page. Normalement, vous utilisez les balises `<div>` pour créer les éléments séparés dans une page. Nous allons créer une série d'éléments `<div>` qui contiendront des images.
+
+### Images
+
+Une balise html qui n'a pas besoin de balise de fermeture est la balise `<img>`, car elle a un élément `src` qui contient toutes les informations dont la page a besoin pour rendre l'élément.
+
+Créez un dossier dans votre application appelé « images » et ajoutez-y toutes les images dans le [dossier du code source](../solution/images); (il y a 14 images de plantees).
+
+### Tâche
+
+Ajoutez ces images de plantees dans deux colonnes entre les balises `<corps></corps>` Mots clés :
+
+```html
+<div id="page">
+	<div id="left-container" classer="container">
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante1" src="./images/plante1.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante2" src="./images/plante2.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante3" src="./images/plante3.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante4" src="./images/plante4.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante5" src="./images/plante5.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante6" src="./images/plante6.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante7" src="./images/plante7.png" />
+		</div>
+	</div>
+	<div id="right-container" classer="container">
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante8" src="./images/plante8.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante9" src="./images/plante9.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante10" src="./images/plante10.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante11" src="./images/plante11.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante12" src="./images/plante12.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante13" src="./images/plante13.png" />
+		</div>
+		<div classer="plante-holder">
+			<img classer="plante" alt="plante" id="plante14" src="./images/plante14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Remarque : Spans vs. Divs. Les divs sont considérés comme des éléments « bloquants » et les étendues sont « en ligne ». Que se passerait-il si vous transformiez ces divs en spans ?
+
+Avec ce balisage, les plantees apparaissent maintenant à l'écran. Cela semble assez mauvais, car ils ne sont pas encore stylisés à l'aide de CSS, et nous le ferons dans la prochaine leçon.
+
+Chaque image a un texte alternatif qui apparaîtra même si vous ne pouvez pas voir ou rendre une image. Il s'agit d'un attribut important à inclure pour l'accessibilité. En savoir plus sur l'accessibilité dans les prochaines leçons ; pour l'instant, rappelez-vous que l'attribut alt fournit des informations alternatives pour une image si un utilisateur pour une raison quelconque ne peut pas la visualiser (en raison d'une connexion lente, d'une erreur dans l'attribut src ou si l'utilisateur utilise un lecteur d'écran).
+
+Avez-vous remarqué que chaque image a la même balise alt ? Est-ce une bonne pratique ? Pourquoi ou pourquoi pas? Pouvez-vous améliorer ce code ?
+
+---
+
+## Balisage sémantique
+
+En général, il est préférable d'utiliser une 'sémantique' significative lors de l'écriture HTML. Qu'est-ce que ça veut dire? Cela signifie que vous utilisez des balises HTML pour représenter le type de données ou d'interaction pour lesquelles elles ont été conçues. Par exemple, le texte du titre principal d'une page doit utiliser une balise `<h1>` étiqueter.
+
+Ajoutez la ligne suivante juste en dessous de votre balise d'ouverture `<corps>` étiqueter:
+
+```html
+<h1>Mon Terrarium</h1>
+```
+
+L'utilisation d'un balisage sémantique tel que le fait que les en-têtes soient `<h1>` et que les listes non ordonnées soient rendues comme `<ul>` aide les lecteurs d'écran à naviguer dans une page. En général, les boutons devraient être écrits comme `<bouton>` et les listes devraient être `<li>`. Bien qu'il soit _possible_ d'utiliser des éléments `<span>` spécialement stylisés avec des gestionnaires de clics pour simuler des boutons, il est préférable pour les utilisateurs handicapés d'utiliser des technologies pour déterminer où sur une page se trouve un bouton, et pour interagir avec lui, si l'élément apparaît comme un bouton. Pour cette raison, essayez d'utiliser autant que possible le balisage sémantique.
+
+✅ Jetez un œil à un lecteur d'écran et [comment il interagit avec une page Web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Pouvez-vous voir pourquoi un balisage non sémantique peut frustrer l'utilisateur ?
+
+## Le terrarium
+
+La dernière partie de cette interface consiste à créer un balisage qui sera stylisé pour créer un terrarium.
+
+### Tâche:
+
+Ajoutez ce balisage au-dessus de la dernière balise `</div>` étiqueter:
+
+```html
+<div id="terrarium">
+	<div classer="jar-top"></div>
+	<div classer="jar-walls">
+		<div classer="jar-glossy-long"></div>
+		<div classer="jar-glossy-short"></div>
+	</div>
+	<div classer="dirt"></div>
+	<div classer="jar-bottom"></div>
+</div>
+```
+
+✅ Même si vous avez ajouté ce balisage à l'écran, vous ne voyez absolument rien s'afficher. Pourquoi?
+
+---
+
+## 🚀Défi
+
+Il existe des balises "anciennes" sauvages en HTML avec lesquelles il est toujours amusant de jouer, bien que vous ne devriez pas utiliser de balises obsolètes telles que [ces balises] (https://developer.mozilla.org/docs/Web/HTML/Element #Obsolete_and_deprecated_elements) dans votre balisage. Néanmoins, pouvez-vous utiliser l'ancienne balise `<marquee>` pour faire défiler le titre h1 horizontalement ? (si vous le faites, n'oubliez pas de l'enlever après)
+
+## Quiz post-conférence
+
+[Quizz post-conférence](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16)
+
+## Révision et auto-apprentissage
+
+HTML est le système de blocs de construction « éprouvé et vrai » qui a contribué à faire du Web ce qu'il est aujourd'hui. Apprenez-en un peu sur son histoire en étudiant quelques anciennes et nouvelles balises. Pouvez-vous comprendre pourquoi certaines balises ont été dépréciées et d'autres ajoutées ? Quelles balises pourraient être introduites à l'avenir ?
+
+En savoir plus sur la création de sites pour le Web et les appareils mobiles sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
+
+
+## Mission
+
+[Pratiquez votre HTML : créez une maquette de blog](assignment.md)