Apprendre le HTML : des bases à la pro

1. Introduction: Avez-vous déjà pensé à créer un site Web ? Si c'est le cas, le premier langage que vous devez apprendre est le HTML. Aujourd'hui, nous allons passer en revue tout ce que vous devez savoir pour apprendre le HTML. Bonjour, je m'appelle Zoé. Je suis ingénieur logiciel et ancien professeur qui aime aider les autres à se lancer dans le codage. J'ai créé des tonnes de sites Web et d'applications Web en utilisant React, CSS, HTML, etc. Aujourd'hui, nous allons passer en revue les bases du HTML et la façon dont vous pouvez les utiliser pour créer votre premier ou votre prochain site Web en créant ce site Web. Nous expliquerons comment utiliser les éléments, la structure payante, les attributs, etc. Dans ce cours, nous allons commencer par un aperçu général de ce que le HTML est utilisé, pourquoi il est utilisé et à quoi il sert Ensuite, nous allons nous plonger directement dans notre tutoriel. Le tutoriel sera divisé en trois parties. Nous allons d'abord initialiser notre nouveau projet HTML. Ensuite, nous le ferons fonctionner sur notre navigateur, et enfin, nous élaborerons la structure de notre site Web. Ce cours s'adresse à tous ceux qui souhaitent créer leurs propres sites Web et apprendre à travailler avec le HTML. À la fin de ce cours, vous serez capable de tout faire vous-même. Commençons. 2. Projet du cours: Projet de classe. Le projet de cette classe sera de créer un site Web simple en utilisant uniquement du HTML. Tout au long de la leçon, nous verrons quel éditeur utiliser, comment structurer votre code et comment consulter et mettre à jour votre site pendant que vous travaillez. Pour ce cours, il est essentiel avoir accès à un ordinateur sur lequel vous pouvez exécuter le code Visual Studio ou un autre éditeur de code de votre choix. Vous devez également disposer d'un navigateur tel que Google Chrome , car nous l'utiliserons pour afficher notre page Web. Je vais laisser des liens vers tous les actifs et ressources vous aurez besoin dans l'onglet projet et ressources ci-dessous. 3. Qu'est-ce que le HTML ?: Qu'est-ce que le HTML ? langage de balisage HTML ou hypertexte est la pierre angulaire tout ce que vous voyez sur le Web Des boutons aux liens en passant par de plus grandes sections, tout implique du HTML. Si vous n'avez jamais vu à quoi cela ressemble auparavant, vous pouvez réellement voir le code HTML, mais il est utilisé pour créer cette page Web. Si vous cliquez avec le bouton droit sur la page et sélectionnez l' option Afficher la source de la page, tout le code HTML de la page s'affichera. Et cela fonctionne sur n'importe quelle page d'Internet. Essayez-le, qui, en tant que langage de balisage, nous permet d'afficher tout ce que nous voyons sur le Web Le HTML est composé d'éléments, et ces éléments sont les éléments de base du Web. Chaque élément se compose de deux parties, ses balises et son contenu. Examinons la structure générale des attaques pour mieux les comprendre. 4. Tags: Balises. Il existe trois types de balises : étiquettes d'ouverture, de fermeture et d'étiquette à fermeture automatique. Une balise d'ouverture commence par un crochet à angle gauche, suivi du nom de l'élément puis d'un support à angle droit. Si le contenu de l'élément se situe entre les balises, il contiendra une balise de fermeture, qui est une balise ayant la même structure que notre balise d'ouverture, mais avec une barre oblique après le premier crochet Si l'élément ne nécessite pas balise de fermeture car aucun contenu ne se trouve entre les balises, nous l'appellerons balise à fermeture automatique et ajouterons une barre oblique juste avant le crochet à angle droit Pour la plupart des types de balises, contenu se trouve entre les balises d'ouverture et de fermeture, mais le contenu que vous choisissez d'y placer dépend du type d' élément avec lequel vous travaillez. 5. Éléments: Éléments. Il existe des dizaines d'éléments différents utilisés en HTML et chacun peut avoir un objectif différent. Si nous souhaitons créer un élément pour afficher du texte, selon le type de texte, nous pouvons opter pour un en-tête ou une balise de paragraphe. Il existe six niveaux différents de balises d'en-tête, que vous utiliserez sur votre page dans un ordre hiérarchique. Nous aborderons un peu plus les en-têtes dans notre tutoriel. Supposons que nous n'ayons pas besoin d'afficher spécifiquement du texte, mais que nous cherchons plutôt à structurer le format de notre code HTML. Dans ce cas, nous voulons examiner des éléments tels que des séparateurs ou des sections Ces éléments nous aident à séparer un morceau de code HTML d'un autre à garder notre code organisé et travailler plus facilement avec Sling plus tard 6. Tutoriel: Tout d'abord, jetons un coup d'œil au projet que nous espérons construire. Il s'agit d'une conception pour le projet que nous cherchons à construire. En gros, c'est un formulaire simple avec, vous savez, style en arrière-plan, des tailles différentes pour les en-têtes, etc. Bien, tout d'abord, vous allez cliquer sur le lien dans la description ci-dessous et connecter votre compte afin de pouvoir télécharger tous ces fichiers de démarrage gratuitement Vraiment, vous n' avez besoin que des images, mais nous pouvons utiliser l'ensemble du kit de démarrage pour démarrer. Donc, ce qui nous a été fourni ici, c'est beaucoup d'informations. Ils sont essentiellement allés de l'avant et ont créé un tas de fichiers pour nous. Je vais aller de l'avant et masquer ce fichier afin que nous puissions travailler ensemble pour le reconstituer. Nous voulons donc créer un nouveau fichier et appeler ce un nouveau fichier et appeler point d'index HML, comme ils l'avaient fait C'est juste la convention que les gens utilisent pour écrire de nouveaux fichiers HTML. Génial. Alors maintenant, nous voulons prendre notre fichier HTML et le montrer, nous voulons voir les fruits de notre lave, n'est-ce pas ? Nous avons créé le fichier. Nous voulons le voir sur le Web. Nous allons donc cliquer ici où il est écrit « Go Live ». N'oubliez pas que nous installons le serveur Live dans la dernière unité. Eh bien, nous allons commencer à l'utiliser maintenant. Donc, en bas à droite, là où il est écrit «  Go Live », il vous suffit de cliquer dessus pour exécuter le serveur Live. Et ça a commencé. Tout a donc commencé au port 5 500 Si je passe la souris sur l'un d'eux et que je passe au poste local 5 500. Je reçois ma page Web, mais il n'y a littéralement rien. Maintenant, pourquoi est-ce le cas ? C'est parce que nous n'avons encore rien mis dans le dossier. Voyons donc si je dis bonjour à tout le monde et si je clique sur Enregistrer. Toujours rien. C'est bizarre. Pourquoi cela se produit-il ? Eh bien, c'est parce que le HTML, comme vous l'avez peut-être remarqué dans l'autre fichier, possède une structure de dossiers très spécifique qui indique à l' ordinateur qu' il a correctement formaté le il a correctement formaté Nous ne pouvons pas simplement continuer et taper du texte dans notre éditeur. Nous devons en fait le formater correctement. Et vous verrez même que VS Code nous donne un petit serveur en direct qui nous donne un petit indice à ce sujet. Par exemple, le rechargement en direct n' est pas possible sans tête ou étiquette corporelle, tu sais ? En gros, ça nous dit : « Hé, te manque des pièces ici. Le code VS possède donc une fonctionnalité vraiment très intéressante où, fonctionnalité vraiment très intéressante où si vous tapez un point d'exclamation, il utilisera Emmet, qui est une fonctionnalité de saisie automatique intégrée, vous fournira le type de document complet saisie automatique intégrée, vous fournira d'un fichier HTML Je vous encourage à l'utiliser car il est très rare que vous ayez à taper du HTML de type Doc dans votre travail actuel. Donc, si vous appuyez sur le point d'exclamation et que vous appuyez sur Entrée, tout cela sera mis sur la Si nous cliquons sur Enregistrer, nous avons maintenant un tas d'éléments appropriés. Et voyons ce que c'est. Donc, le premier dit doctype HTML Cela nous indique donc simplement que le document est de type HTML. Si vous le remarquez juste en dessous du code HTML de type document, il y a cette balise HTML qui a en fait une paire correspondante en bas Vous vous souvenez que nous avons parlé du HTML disponible par paires ? Eh bien, il s'agit de la balise HTML d'ouverture et de fermeture. Maintenant, une chose dont vous devez vous souvenir avec le HTML, c'est que tout se situe dans les éléments, n'est-ce pas ? Et si vous n'écrivez rien dans l'élément HTML, cela signifie qu'il n'existe pas sur la page. Alors que nous allons commencer à écrire, assurons-nous de tout écrire dans cet élément HTML. Passons au niveau suivant. Ici, nous avons une tête, et en dessous de la tête, ils semblent être au même niveau. Nous avons un corps. Donc tête et corps. Vous pouvez considérer le HTML comme s'il s'agissait d'un corps humain. est donc la tête qui contient une grande partie de l'information, vous savez, le genre de connaissances qui se trouvent dans les coulisses. Le corps est ce qui contient l'élément littéral. Donc, si nous regardons l'en-tête, nous verrons qu'il y a quelques balises méta, qui sont essentiellement des balises méta, qui sont essentiellement informations de métadonnées destinées à fournir à l'ordinateur un peu plus d'informations sur notre fichier HTML. Il vous indique donc le jeu de caractères à utiliser, contenu, la fenêtre d'affichage, ce genre de choses. Ce ne sont pas des éléments dont nous devons nous inquiéter pour le moment. Ensuite, cela nous donne également un titre. Nous pouvons donc réellement donner un titre à notre page Web. Appelons cela un formulaire d'inscription. Maintenant, si nous allons dans notre navigateur et que nous actualisons peut-être la page, il n'y a toujours rien. Mais si vous remarquez en haut à gauche, le message « Local host 5 500 » indique maintenant « formulaire d'inscription » Ainsi, en modifiant le titre de notre code HTML dans notre tête, nous changeons en fait le titre de notre page. Plutôt cool, non ? D'accord, nous en avons donc fini avec une idée pour le moment Nous y reviendrons dans des leçons ultérieures, mais pour l'instant, c'est ce qu'il nous faut. Ensuite, nous allons parler du corps. Maintenant, comme je l'ai mentionné, le corps est l'endroit où vivent tous les éléments. Nous voulons donc nous assurer de mettre tout ce que nous voulons voir dans le corps, plutôt que de commencer par des textes de base, car même si nous pourrions mettre Hello World ici, sauvegarder, puis revenir ici, il apparaîtrait. Ce n'est pas vraiment correct d'un point de vue sémantique. Le HTML contient une tonne d' éléments différents que vous pouvez réellement utiliser pour le texte, les images, les boutons, comme nous en avons déjà parlé. Vous devez vous assurer que vous utilisez l' élément adapté au type de données que vous allez présenter. Donc, comme je présente du texte, je vais probablement utiliser une balise d'en-tête. La balise H one est donc la plus haute des balises d'en-tête. ne devrait y avoir qu'une seule balise H one sur votre page, car cela nous indique essentiellement que c'est le sujet de la page. Comme il n'y a rien d'autre sur la page, je vais l'appeler la page Hello World pour le moment. Je tape donc Hello World entre ces balises H one, et jetons un coup d'œil, vous verrez que le format est déjà différent. C'est parce que les en-têtes, par défaut, ont des styles intégrés Ils sont en gras, ils sont plus grands. Ils sont plus visibles sur la page. Si je devais le créer avec, disons, une balise H six, par exemple, et l'enregistrer. Vous verrez à quel point le texte est petit, vous pouvez à peine le lire. Il est donc bon de comprendre l'importance et la proéminence de H un par rapport à H deux par rapport à H trois jusqu'à H six, et de savoir quand vous devez les utiliser. Personnellement, je n'utilise pas très souvent les balises H six parce que cela nécessite juste un certain nombre d'en-têtes pour être utilisées Jetons un coup d'œil à notre design. Comme nous pouvons le voir ici, il s' agit d'une grande image en arrière-plan, puis nous avons appris à coder en observant les autres, en observant comment des développeurs expérimentés résolvent des problèmes en temps réel. Et puis il y a ce formulaire sur le côté droit. OK, commençons à le construire. D'accord, alors apprenez à coder en regardant les autres. J'imagine que c'est probablement le H, alors tapons-le. Et si nous allons ici, regardez ça. Il est déjà actualisé. Incroyable. D'accord. Et voyons voir comment les développeurs expérimentés résolvent les problèmes. Donc, cette partie, qui montre comment les développeurs expérimentés résolvent les problèmes, vous vous dites peut-être : «   Eh bien, devriez-vous utiliser H deux à trois ans et à quatre ans ? Vous ne voulez pas vraiment utiliser de titre pour ce bit. C'est quelque chose pour lequel vous utiliseriez un Ptag ou une balise de paragraphe Les balises de paragraphe sont destinées aux textes plus grands et plus généraux que vous verrez sur une page Web, vous savez, essentiellement des paragraphes de texte. Nous allons donc utiliser la balise de paragraphe pour cela. Une autre fonctionnalité vraiment intéressante de VS Code est que vous pouvez faire glisser vos onglets d'un côté, puis les placer côte à côte, afin de pouvoir simplement faire référence ce qui se passe dans l'autre onglet. Donc, en utilisant un Ptag, nous dirons : « Ici, les didacticiels scriptés pour Bing sont excellents, mais comprendre ce que pensent les développeurs est inestimable Je suis d'accord. Et vous devriez certainement contacter votre mentor pour en obtenir une partie en une seule fois. D'accord. Génial. Nous avons donc notre H one et notre PTAC Voyons à quoi ça ressemble. Parfait. Très bien, cool. Mais il y a aussi cette autre section ici. Il y a comme ça, essayez gratuitement pendant sept jours, et puis il y a cette situation de formulaire. Et puis cela ressemble à un bouton sur lequel vous cliquez. Et puis il y a plus de texte ci-dessous. Alors, comment voulons-nous le structurer ? Nous pouvons en quelque sorte comprendre qu'il y a deux sections ici, en gros, n'est-ce pas ? Il y a une section sur la gauche qui n'est en fait que le texte. C'est comme si vous nous parliez de la page. Et puis il y a une section sur la droite qui traite plutôt de ce qui se passe réellement. Nous pouvons donc utiliser l'un ou l'autre des éléments de section. Ou nous pouvons utiliser l'élément div, qui est plutôt un simple diviseur générique Donc, ce que je vais faire, c'est créer deux divs ici, DIV un et DIV deux Ce que j'ai fait ici, c'est que j'ai mis tout ce texte dans une seule division, puis j'ai créé la deuxième division et je vais y mettre toutes les informations du formulaire. C'est juste pour leur donner une bonne séparation, et cela facilitera les choses lorsque nous reviendrons sur le limon plus tard. Donc, dans cette première section, je vais créer une balise P et encapsuler ce texte Nous allons donc dire P. Maintenant, nous avons un formulaire. C'est la première fois que nous avons affaire à des formulaires. Parlons de ce qu'est un formulaire. Un formulaire, vous savez, c'est que vous avez probablement soumis un tas de formulaires en ligne, même lorsque vous vous êtes inscrit à Github, vous soumettez probablement un formulaire Ce que fait un formulaire, c'est qu'il prend les différentes données soumises ou saisies par l'utilisateur, puis il les envoie à un autre endroit pour qu' elles soient traitées et traitées. Peut-être que vous êtes devenu utilisateur, peut-être, vous savez, que vous envoyez votre commande Instacart pour la journée Quoi qu'il en soit, les formulaires sont utilisés sur le Web Il est donc très important de savoir comment les créer. Donc, pour créer un formulaire, nous allons utiliser l'élément appelé formulaire. Et cela ne fera que nous donner quelques outils spéciaux supplémentaires fournis avec les formulaires. Ainsi, dans un formulaire, vous pouvez avoir plusieurs éléments différents. Vous pouvez avoir une contribution. Et l'avantage d'un grand nombre de ces extensions de code VS que nous avons installées, c'est qu'elles vous fournissent des informations ici. Donc, si vous avez une question sur ce qu'est un élément pendant que vous le tapez, vous pouvez littéralement cliquer ici où il est écrit « référence MDN », et vous pourrez dire « ouvrez-le Ensuite, il l'ouvrira dans un nouvel onglet et vous pourrez tout lire sur la saisie du formulaire et l'élément de formulaire. Je vais l'apporter ici pour que vous puissiez voir de quoi je parle. Donc c'est juste ici. Entrez un élément de formulaire, et cela vous donnera toutes ces informations sur la saisie dans l' élément de formulaire, n'est-ce pas ? Je vais vous dire qu'il a un type, qu' il a un identifiant, qu'il a un nom, qu'il est obligatoire , etc. Les entrées sont donc un très bon point de départ pour nous. Ainsi, dans le HTML, vous n' avez pas simplement tous ces différents éléments. Donc, si vous remontez en haut de la page où il est écrit HTML, nous voyons que Lang est égal à l'anglais. Lang est un attribut spécifique au HTML, l'attribut language, n'est-ce pas ? Nous pouvons spécifier la langue en HTML parce que c'est un peu comme l'élément global. Tous les éléments n' auront pas cette fonctionnalité, mais vous n'en aurez pas vraiment besoin si vous définissez que votre langue générale est l'anglais. De cette façon, tous ces différents éléments ont leurs propres caractéristiques. La saisie est donc l'une d'entre elles. L'entrée possède différents types d'attributs. Donc, il y en a un, non ? Vous pouvez spécifier le type d'entrée dont vous disposez, car il existe plusieurs types d'entrées différents . Donc un petit hack que je veux vous montrer ici. D'accord, donc lorsque vous tapez du texte et que vous appuyez sur Entrée, vous aurez toutes les différentes options dont vous disposez quant au type de saisie dont il peut s'agir Il peut donc s'agir d'un bouton, d'une case à cocher, d'une couleur. URL, il peut y avoir tellement de types d'entrées différents que vous pourriez utiliser. Vous pouvez donc commencer à voir à quel point le HML offre une grande flexibilité, même s'il s'agit d'un langage assez limité dans lequel écrire Nous voulons que cela prenne le prénom de ce que nos utilisateurs saisissent. Nous allons donc vouloir que ce soit un texte, donc un type de texte. Et puis un autre attribut en entrée. Et vous pouvez le rechercher ici dans la documentation MDN Un autre attribut est le suivant : est-ce le nom ? C'est le nom ? Vous voulez donc le nom de l'entrée. Alors, s'agit-il du prénom de la personne ? Est-ce leur nom de famille ? Est-ce leur âge ? Quelle est cette information qu' ils soumettent ? Donc, si nous revenons ici, nous tapons le nom, nous le mettrons en premier et nous pourrions mettre le prénom. Et c'est ainsi que nous savons de quelle information il s'agit. Puis on le ferme. Les entrées sont en fait des balises à fermeture automatique. Donc, plutôt que d'avoir nouveau cette barre oblique, nous ne le ferions pas Ce n'est pas une bonne syntaxe. Prettier nous donnera une petite erreur en disant : « Hé, moi, s'il n'y a rien entre vos tags, ils devraient se fermer d'eux-mêmes Donc, ce qu' est une balise à fermeture automatique , si nous prenons une entrée et que nous l'isolons ici, c'est une balise qui se termine par une barre oblique et un crochet Il n'y a donc rien entre les deux. La balise elle-même est la valeur. Une autre fonctionnalité vraiment intéressante que vous pouvez utiliser avec la saisie. Un autre attribut intéressant est l'attribut placeholder. Vous pouvez donc réellement donner une invite à votre utilisateur. Vous savez que chaque fois que vous entrez dans un formulaire et que vous savez pas exactement ce que vous êtes censé y inscrire, vous pouvez en fait lui donner une invite, comme une adresse e-mail, un nom, etc. Allons-y et attribuons un prénom à notre premier attribut d'entrée (l' espace réservé Cool. Alors maintenant, quand nous revenons sur notre page, génial. Quand vous regardez ici, il s'agit de notre petite zone de saisie, et voici notre boîte de prénom. Vous remarquerez peut-être quelque chose d' intéressant, cependant. Tout notre code va directement vers le bas. Par exemple, ce n'est pas juste comme entrer sur le côté. C'est parce que nous n' avons encore ajouté aucun style. Nous travaillerons sur le style de cette page dans l'unité suivante lorsque nous parlerons de CSS. Mais pour l'instant, essayons simplement de tout mettre sur la page d'une manière sémantique. Très bien, passons aux deux prochaines entrées ici. Nous allons donc copier-coller, coller et coller un petit hack. Et nous allons taper Ce sera leur nom de famille. Nous allons donc changer le nom en nom de famille. N'oubliez donc pas que les valeurs qu'ils soumettent seront envoyées, vous savez, à une base de données ou à un backend ou, vous savez, que nous allons nous connecter à la console. Mais nous devons comprendre ce qu'ils nous envoient, non ? Parce que si nous rencontrons quelqu'un dont le nom est George Steven, nous ne saurons pas si George ou Steven est le prénom, moins de lui attribuer une clé particulière. Nous avons donc décidé que le premier serait le prénom et le suivant le nom de famille. Placeholder pour celui-ci, nom de famille. Et puis le suivant semble être Très bien, nous avons nos quatre entrées ici Encore une fois, ils sont assis côte à côte au lieu d'être empilés les uns sur les autres, mais c'est quelque chose que nous allons corriger dans une autre leçon Et puis en dessous, nous avons besoin d'un autre type d'entrée. Vous vous souvenez plus tôt que nous avons vu que l'entrée pouvait être un bouton ? Eh bien, c'est spécifiquement lié aux formulaires. Ainsi, avec les formulaires, vous devez vous assurer que lorsque vous soumettez le formulaire, toutes les informations que vous soumettez avec le formulaire sont envoyées avec celui-ci. Pour ce faire, nous créons un type de bouton de saisie, y compris dans le formulaire. Nous allons donc créer une autre entrée, l'appeler entrée, créer du type. Nom du bouton. Changons le nom en valeur réelle et nous réclamerons votre essai gratuit à l'intérieur de celui-ci. Et c'est toujours une étiquette à fermeture automatique. D'accord. OK, cool. Profitez donc de votre essai gratuit. Si nous allons ici, boum, gros bouton qui dit « réclamez votre essai gratuit ». Génial. Nous survolons ça. Bien, je pense que la dernière chose que nous devons ajouter est cette pièce ici En cliquant sur le bouton, vous acceptez nos conditions générales d'utilisation. Très bien, alors allons-y. Cela semble hors du cadre de la forme. Allons-y et ajoutons-le ici. Faisons un PTag et nous le mettrons. Maintenant, ce qui est intéressant, c'est que les termes et services et l'essai gratuit pendant sept jours sont en gras, mais nous ne les avons pas encore mis en gras. Donc, ce que nous pourrions faire, c'est utiliser le tag fort. Maintenant, nous pouvons également le faire en CSS, mais il existe des moyens très simples de le faire en HTML. La balise strong rend simplement le texte plus fort ou en gras. Nous allons donc simplement envelopper les parties de notre texte que nous voulons voir apparaître gras avec la balise strong Mettons-en un ici et essayons-le gratuitement pendant sept jours. Mettons-en un ici. Sauvegardez ça. Et boum, on y est. Essayer gratuitement pendant sept jours, c'est Bold, ainsi que les conditions générales. Génial. Je pense que nous avons obtenu tous les éléments de la page. La dernière chose que vous voudrez faire avant de passer au CSS est de transférer notre code sur Github et d'obtenir un enregistrement initial de ce que nous faisons ici Alors, allons-y et ouvrons une nouvelle instance du terminal. D'accord, c'est donc dans un dossier appelé fichiers de projet. Faisons-en un dépôt Git. Nous allons donc y taper Git. Et nous allons changer la branche en branche principale et géniale. Très bien, nous avons donc nos marques Git et Kit. Et comme vous pouvez le voir ici, ils n'ont pas encore tous été ajoutés à notre dépôt Git. Ils apparaissent donc verts et ne sont pas suivis. Donc, ce que nous pouvons faire, sont que les dessins et les images, ainsi que l'index et les instructions pour le construire. Mais nous n'avons vraiment pas besoin de suivre toutes ces choses. Tout ce que nous avons vraiment besoin de faire est de suivre notre fichier HTML à points d'index pour le moment. Lorsque nous ajoutons plus de CSS et d' images pour travailler avec différents éléments, nous pouvons commencer à les suivre. Mais pour l'instant, tout ce dont nous avons besoin, c'est de notre code HTML à points d'index. Nous pouvons donc le faire et nous pouvons simplement appeler ce Commit initial. Et nous pouvons le commettre, et c'est parti. Terminé. Bien, nous voulons maintenant le lier à un dépôt Github, car n'oubliez pas que nous suivons tout notre code sur GitHub du premier jour à la fin Passons donc à Github. Nous allons accéder à votre compte, quel que soit le nom de votre compte, et nous allons créer un nouveau dépôt. Je vais donc passer aux référentiels, au nouveau référentiel. Nous allons appeler ce formulaire d'inscription. J'espère qu'il est disponible. Oui, ça l'est. Génial. D'accord, vous n' avez pas besoin de votre description Nous allons le garder public, et nous allons simplement créer un dépôt, comme nous l'avons fait la dernière fois. Génial. Comme nous en avons déjà créé un, nous l'avons déjà initialisé en tant que dépôt Git, il suffit d'appuyer sur ce bouton de copie ici, et il copiera toutes ces belles lignes de code que nous n'avons pas besoin d' aller mémoriser Je vais revenir au code VS, le coller dans notre terminal, appuyer sur Entrée, et c'est parti. Il est configuré pour effectuer le suivi. Donc, si nous revenons sur GitHub, actualisez la page, juste pour vérifier notre travail Bien, nous verrons que nous avons un fichier HTML à points d'index validé il y a 1 minute Nous avons un commit, et il est écrit « Commission initiale ». Et l'avantage de Github c'est que vous pouvez cliquer dessus et voir toutes les informations C'est donc tout ce que nous venons de taper. Consultez nos zones de texte, nos boutons, notre formulaire, nos balises P, nos dibs, notre H one Nous avons beaucoup de choses en cours dans ce fichier HTML en ce moment. Passons donc à l'apprentissage CSS et ajoutons du style à cette page.