Apprendre HTML en 1 heure - Cours Complet Débutant (4K)

0:00 Bienvenue dans cette formation d'une heure dans laquelle vous allez apprendre tout ce qu'il vous faut pour faire des pages en HTML. Que vous soyez un débutant complet ou que vous ayez déjà quelques notions, ce cours est conçu pour vous guider pas à pas dans les bases essentielles du HTML. Ce qu'on va voir ensemble, c'est comment structurer une page web, comment utiliser les balises les plus importantes et comment créer une mise en page HTML5 moderne. À la fin de cette formation d'une heure, vous serez capable de construire vos sites web avec du HTML qui correspond aux standards de l'industrie. Alors, préparez-vous à découvrir le langage qui structure Internet et apprend la base du développement web. Avant de rentrer dans le vif du sujet et voir les 10 balises les plus importantes en HTML, il faut comprendre quelques concepts. Donc déjà, ça veut dire quoi ? Comment est-ce que ça fonctionne et est-ce que c'est un langage de ? Alors, HTML ça veut dire Hypertext Markup Language ou langage de

0:47 marquage hypertexte et c'est le langage qui est utilisé pour créer des pages web. C'est un langage car HTML c'est un ensemble de règles pour écrire et structurer des informations. Marquage, ça veut dire qu'on utilise des balises pour organiser et définir des éléments et hypertexte, c'est parce qu'on relie les documents HTML entre eux avec des liens cliquables. Donc HTML c'est un langage de balisage plutôt qu'un langage de programmation car contrairement à un langage de programmation qui permet d'implémenter de la logique, le HTML sert à poser la structure du contenu d'une page avec des balises. Mais plus techniquement, comment ça ? HTML fonctionne avec une représentation en arbre similaire à un arbre généalogique qu'on appelle le DOM. Le DOM, ça veut dire Document Object Model ou modèle d'objet du document et c'est donc cette représentation en arbre qui va être composée de nœuds qui sont connectés

1:33 avec des branches. Voyons un exemple concret de la base de tout fichier HTML qu'on appelle un boilerplate. Vous retrouvez cette structure sur toutes les pages d'Internet et voici de quoi elle est composée. Sur la première ligne, on a quelque chose qui n'est pas vraiment une balise mais plutôt un élément d'information qui va servir à indiquer au navigateur quelle version d'HTML on utilise. Et puis, on a notre première balise qui est HTML. Donc on écrit des balises qui sont des mots clés entre chevrons, on ouvre une balise en l'écrivant avec chevron vers la gauche, chevron vers la droite et on va la fermer en faisant chevron vers la gauche, slash, le nom de la balise et puis chevron vers la droite. Notre première balise, c'est donc HTML et dans la structure en marbre du DOM, HTML c'est la racine de l'arbre et elle contient deux branches principales, ses enfants, qui sont head et body. Head,

2:21 c'est la balise qui va contenir des informations sur la page, ce qu'on appelle métadonnées. Par exemple, c'est dans le head qu'on définit le titre, la description et l'icône qui se retrouve sur Google. Head, c'est donc toutes les informations méta qu'on ne voit pas directement sur la page pour aider les navigateurs et les moteurs de recherche à mieux comprendre le site. Et dans notre boilerplate, head a pour le moment trois enfants. Elle a deux balises méta et une balise title. Et puis on a la balise body qui elle par contre va bien montrer le contenu visible sur la page et c'est souvent là qu'on va passer le plus de temps quand on écrit du HTML. Mais pour le moment, body n'a pas encore d'enfant. Donc à retenir sur cette première partie, HTML c'est un langage de balisage et pas de programmation et le DOM, c'est une représentation en forme d'arbre de la structure du document HTML. Donc voilà, c'est tout

3:06 pour la théorie pour comprendre la suite de la vidéo. Maintenant, on va voir comment faire pour créer notre tout premier fichier HTML. Pour ça, je vais faire un nouveau dossier que je vais appeler tutoriel HTML, vous pouvez l'appeler comme vous voulez et dedans, je vais créer un fichier HTML. Si vous êtes sur Windows, vous pouvez utiliser le bloc-notes, faire nouveau fichier, fichier texte avec le bloc-notes et puis sauver le bien en point HTML. Comme je suis sur Mac, je vais utiliser TextEdit, créer un nouveau document et puis là, j'ai un document et pas un fichier texte et pour transformer le document, je vais aller dans format et puis appuyer sur make plain text. Vous pouvez aussi faire ça directement en faisant majuscule, commande et T. Là, vous voyez que mon fichier a changé et comme sur sur je vais le sauver et je vais lui donner un

3:52 nom qui sera index.html et je confirme que je veux bien utiliser l'extension HTML. Maintenant, à l'intérieur de mon dossier, j'ai bien mon fichier index.html qui est en fait un fichier texte dans lequel on peut écrire des choses. Donc, je vais écrire du texte comment coder, sauver mon fichier et puis je vais prendre le fichier et le glisser-déposer dans mon navigateur, ici c'est Firefox. Là, on voit que j'ai une page internet avec écrit comment coder. Mais ça, c'est du simple texte, c'est pas très intéressant. Ce qui fait la force du HTML, c'est ses balises. Donc, on va découvrir une première balise qui est la balise H1. Pour mettre des éléments entre balises, on les entoure simplement de la balise ouvrante qui est chevron vers la gauche, le nom de la balise, chevron vers la droite et la balise fermante qui est chevron vers la gauche,

4:37 slash, le nom de la balise, chevron vers la droite. Donc là, j'ai une balise H1 qui contient le texte comment coder. Maintenant, si je sauve mon fichier et que je rafraîchis ma page, le texte a changé et c'est devenu un titre. Si par contre quand vous rafraîchissez votre page plutôt que voir le texte en plus gros, vous voyez écrit les balises H1, il est possible qu'en fait vous travaillez avec un fichier texte plutôt qu'un fichier HTML. Vous pouvez voir ça en regardant la barre de liens et vous devriez voir le nom de votre fichier avec les extensions .html.txt, donc en fait votre fichier est un fichier texte. Pour régler ça, vous pouvez aller dans l'explorateur de fichiers et puis appuyer sur affichage et puis cocher extension des noms de fichiers. Vous pouvez aussi retrouver ça dans les paramètres de votre ordinateur cherchant extension et puis dans les paramètres masquer les extensions des

5:23 fichiers dont le type est connu. Pensez ensuite à renommer votre fichier de .html.txt en juste .html. Maintenant, si vous retournez sur votre navigateur et que vous enlevez la partie .txt de l'URL pour avoir juste le nom de votre fichier .html, là le titre devrait s'afficher correctement. Donc voilà comment créer un fichier HTML et écrire une première balise, mais on ne va pas écrire tout notre site dans un bloc-notes, donc on va se faciliter la tâche avec un éditeur de texte ou un IDE. Moi, je vais choisir un éditeur de texte qui est Visual Studio Code. Visual Studio Code, c'est pour le moment et de très loin l'éditeur de texte le plus utilisé par les développeurs web et on peut le télécharger gratuitement en cherchant sur Google "télécharger Visual Studio Code" ou bien en se rendant directement sur code.visualstudio.com.

6:09 Là, dans la partie téléchargement, je vais sélectionner la version pour mon système d'exploitation et je vous invite à télécharger Visual Studio Code pour votre système d'exploitation. Une fois que le téléchargement est terminé, vous pouvez lancer ce que vous venez de télécharger, suivre l'installation et à un moment, vous vous retrouverez sur Visual Studio Code. Quand on ouvre Visual Studio Code pour la première fois, ça ressemble plus ou moins à ça. Et là, pour pouvoir travailler avec tous nos fichiers HTML qu'on va créer, je vais prendre le dossier que je venais de créer dans lesquels j'ai mis mon fichier HTML et le glisser-déposer dans Visual Studio Code. Là, je vois que sur le panneau de gauche, j'ai bien le contenu de mon dossier avec mon fichier index.html que je venais de créer. Je vais pouvoir fermer le bloc-notes et fermer le dossier. Maintenant, je vais réorganiser mon écran pour avoir Visual

6:55 Studio Code et ma page HTML et on va pouvoir commencer à découvrir les différentes balises. Donc, je vais créer un nouveau fichier par nouveau type de balise et après, on retournera dans le fichier index.html pour tout mettre ensemble. Je peux créer un nouveau fichier sur Visual Studio Code en faisant Ctrl N ou Cmd N et je vais le sauver et je vais l'appeler div.html. Donc, la première balise qu'on va voir ensemble, c'est la balise div. Donc, la balise div, c'est un peu la balise par défaut qu'on va utiliser le plus souvent en HTML et elle permet de créer un nouveau nœud, un nouvel enfant, pour ajouter une partie ou une section au site. Donc, on verra plus tard qu'il y a d'autres balises plus précises que la balise div pour certaines parties du site, comme par exemple un article, une section ou une partie navigation et

7:41 donc, dans ces cas-là, il vaut mieux utiliser une balise plus précise, mais dans tout le reste des cas, quand vous voulez faire une partie de votre site, vous pouvez utiliser la balise div. La balise div, on la définit simplement comme ça, avec chevron vers la gauche, div, chevron vers la droite et puis pour la fermer, chevron vers la gauche, slash, div, chevron vers la droite. Et tout ce qu'on écrira dans une balise div s'affichera simplement sur la page HTML. Donc si j'ajoute le texte div 1 dans ma balise et que sur mon navigateur, au lieu d'aller sur index.html, je vais sur div.html, je vois que j'ai bien mon texte qui s'affiche. Une particularité de la balise div, c'est qu'elle fait des retours à la ligne. En fait, elle va définir un bloc et ce bloc va nous permettre de faire des retours à la ligne. Donc la balise div, c'est une balise essentielle pour la mise en page

8:27 de nos pages web et on va l'utiliser très souvent en combinaison avec du CSS. Voyons une deuxième balise qui est la balise P. Je vais donc créer un fichier p.html et P, c'est une balise pour dire qu'on va avoir un paragraphe. On peut déclarer une balise P en faisant chevron vers la gauche, P, chevron vers la droite et puis en la fermant toujours avec la même structure, sauf qu'on a un slash en plus. Et dans cette balise, on va écrire des paragraphes. Donc là, je vais générer un paragraphe avec mon navigateur et maintenant, si je vais sur p.html, je vois que j'ai un paragraphe de texte. Donc typiquement, dans un article de blog par exemple, chaque paragraphe sera mis entre des balises P. On peut avoir plusieurs paragraphes et là, en sauvant, je vois que j'ai une structure avec un retour à la ligne et même un saut de ligne et j'ai mes trois

9:14 paragraphes. Et donc quand vous voulez écrire des paragraphes de texte, pensez à la balise P. On Ensuite, on a une famille de balises qui sont les balises de titre et les balises de titre, ce sont les headings. Donc je vais créer un fichier headings.html et dedans, on va avoir les six types de balises headings qui sont H1, H2, H3, H4, H5 et H6. Donc ces balises vont nous permettre d'afficher des titres. La balise H1, elle sera unique, c'est le titre principal du site. Reprenons un article de blog, quand on va sur un article de blog, il y a qu'un seul titre principal et c'est le titre qu'on met entre H1. Donc je vais mettre mon titre unique entre H1. Par contre, si dans

10:01 l'article de blog il y a différentes sections avec des sous-titres, c'est là qu'on va utiliser des H2. Pour H2, je mets un de mes titres et des H2, on peut en avoir plusieurs. Et si on veut aller encore plus en détail dans un des points de l'article, en dessous du H2, on pourrait avoir un H3 et là aussi, on peut en avoir plusieurs. Pareil pour les H4, si on veut aller encore plus loin dans l'explication, ainsi de suite pour les H5 et les H6. Je vais sauver mon fichier et me rendre sur headings.html et là, je vois que j'ai mis différents titres. De base, on va avoir du texte avec différents styles. On voit que mon H1 est beaucoup plus grand et plus gras. Et plus on descend dans les headings, plus on a quelque chose de petit. Donc

10:47 ce qu'il y a à retenir dans les balises H, c'est que H1 c'est pour le titre principal et puis en fonction de la structure de votre page, vous pouvez avoir des sous-titres qui vont de H2 à H6. Ensuite, voyons la balise pour faire des liens. La balise pour faire des liens, c'est la balise A. Je vais donc créer un nouveau fichier que j'appelle a.html et dans ce fichier, je vais déclarer une balise A. Alors la balise A est un peu différente car elle prend un concept qu'on a pas encore vu qui est les attributs. Donc une balise A, elle est composée de plusieurs choses. D'abord, elle est composée à l'intérieur de l'élément qu'on veut rendre cliquable. Donc je vais écrire mon lien. On ne doit pas forcément avoir du texte comme enfant direct d'une balise A, on peut avoir une autre balise, n'importe

11:33 laquelle, et tout ce qui sera entre deux balises A sera rendu cliquable. Donc, je vais me rendre sur ma balise A en allant sur a.html. Et là, ma balise n'est pas cliquable car il manque quelque chose d'essentiel qui est href. Href, c'est simplement le chemin vers l'URL sur laquelle on veut pointer. Par exemple, si je mets le chemin vers headings.html qu'on vient de voir, alors maintenant, je rafraîchis ma page, mon lien a pris les styles de base. Quand on a un lien cliquable, ça veut dire que de base, il est bleu et souligné. Et quand je clique dessus, je suis bien redirigé vers la page que j'ai définie qui est headings. Et donc, je vais revenir sur ma page a.html et ajouter des liens. Donc, il faut savoir que on n'est pas limité à des liens relatifs. Donc là, j'ai le

12:20 lien relatif, ça serait de dire que je veux passer de la page A à la page headings, mais on peut aussi faire des liens vers des sites externes comme par exemple https://www.commentcoder.com. Et maintenant, si je rafraîchis ma page, mon deuxième lien, quand je clique dessus, je suis redirigé vers mon site commentcoder.com. Donc, si vous vous intéressez au référencement naturel, il y a d'autres attributs qui seront intéressants sur la balise A. Mais dans un premier temps, on va juste voir la balise A simple avec l'attribut href car c'est comme ça que vous allez l'utiliser au début pour vous balader entre vos différentes pages. Ensuite, on va voir la balise pour faire des images. Donc, je vais créer un fichier img.html et dedans, je vais déclarer ma balise image. Donc, contrairement aux autres

13:05 balises qu'on a vues pour le moment, une balise image, on ne la déclare pas comme ça avec une balise ouvrante et une balise fermante, mais on met qu'une seule balise et pour dire qu'elle est unique et qu'elle a pas de balise fermante, on met le slash à la fin à côté du chevron vers la droite. La balise image prend plusieurs attributs. Elle prend une source qui est src et à l'intérieur de la source, on met le chemin vers l'image. Là encore une fois, il peut être absolu donc un lien HTTPS d'une image qu'on a trouvé sur internet ou bien il peut être relatif, ça veut dire local dans le dossier où le serveur sur lequel on se trouve. Donc je vais aller récupérer une de mes images et je vais la glisser déposer ou la coller dans Visual Studio Code. Voilà, j'ai l'image de mon site, je retourne sur mon fichier image.html

13:51 et là, je vais lui passer le chemin vers mon image qui est simplement comment coder.jpg. Je vais ensuite me rendre sur mon fichier img.html et là on voit que mon image est beaucoup trop grande par rapport à la page. On peut modifier ça avec du CSS mais on verra pas de CSS dans ce tutoriel. Par contre, la balise img prend plusieurs autres attributs comme par exemple width qui permet de définir la largeur de l'image. Je vais dire que mon image fait 300 pixels en lui passant 300 et puis en rafraîchissant ma page, je vois que maintenant que mon image est bien plus petite. Et puis il y a une dernière chose qu'on doit ajouter sur la balise image qui est l'attribut alt. L'attribut alt, ça va être un texte qui décrit au mieux l'image et il est important pour trois raisons. D'abord pour une raison

14:37 d'accessibilité. Donc il y a des personnes malvoyantes qui parcourent les sites et elles ont des lecteurs d'écran et donc quand elles vont parcourir le site, au moment de l'image, le lecteur d'écran va pas être capable de lire l'image mais il va être capable de lire le texte alternatif et donc de décrire au mieux à la personne malvoyante de quoi est composée l'image. On peut aller assez loin en accessibilité en HTML et il faut pas négliger toutes ces notions d'accessibilité. On peut aller assez loin dans les notions d'accessibilité en HTML, ne les négligez pas. On va considérer qu'une balise img n'est pas valide si elle a pas au moins SRC et alt. En plus des notions d'accessibilité, deuxième raison, c'est que ce texte alternatif va nous servir d'affichage de secours. Donc imaginons que je me sois trompé et que je pensais que mon image c'était un PNG plutôt

15:22 qu'un JPG. Si maintenant je rafraîchis ma page, j'ai le texte alternatif qui s'affiche plutôt que l'image. Donc si par exemple vous chargez une image depuis un site externe et que le lien vers cette image est cassé, au moment de charger l'image, vous aurez le texte alternatif plutôt que l'image car le navigateur n'arrivera pas à charger votre image. Et puis une troisième raison, c'est pour une question de référencement naturel. Les robots qui vont parcourir votre site et essayer de le comprendre au mieux vont utiliser le texte alternatif pour comprendre le but de l'image. Donc prenez l'habitude directement d'utiliser cette balise alt et de mettre une valeur texte qui décrit au mieux l'image. Ça vous servira sur le long terme pour mieux référencer vos pages et faire des sites plus accessibles pour tout le monde. C'était beaucoup d'informations, voyons un résumé en trois points de la balise

16:09 image. La balise image, on l'utilise avec le mot clé img et puis on la ferme directement avec un slash à côté du chevron vers la droite. Elle est composée de deux attributs obligatoires et src qui est le chemin vers l'image. On peut mettre soit une image qui se trouve dans le même dossier ou le même serveur en lui passant le chemin relatif ou absolu ou bien on peut charger une image externe depuis un autre site et donc là on mettra le lien complet vers l'image qui commence par https. Ensuite deuxième attribut obligatoire pour la balise img et qu'il faut pas oublier de mettre, c'est la balise alt qui va nous permettre de charger du texte alternatif et dans lequel on met un texte qui décrit au mieux l'image. Ça va être pour des raisons d'accessibilité, quand le navigateur n'arrive pas à charger l'image et pour des raisons de

16:54 référencement. C'est tout pour la balise image, passons maintenant à la suite. Voilà maintenant un autre type de balise qui sont les balises pour faire des listes. Donc je vais créer un nouveau fichier que je vais appeler list.html et dedans je vais écrire une nouvelle balise. Donc cette première balise ça sera la balise ul pour unordered list, donc une liste qui n'a pas d'ordre et dans cette liste, je vais mettre des enfants. Les enfants, ça sera toujours les mêmes, ça sera des listes pour list item, donc objet de liste. Et puis je vais dire que j'ai le LI numéro 1 et je vais en mettre plusieurs, le LI 2, 3, 4, 5 et 6. Et maintenant, si je me rends sur list.html, je vois que j'ai bien une liste à puces

17:40 avec tous mes éléments. Si je veux faire pareil, mais les rendre ordonnés, au lieu de mettre UL qui fait une liste non ordonnée, une liste à puces, je peux remplacer UL par OL. Je sauve mon fichier et puis je rafraîchis mon navigateur. Et là, je vois que maintenant HTML a compté pour moi le nombre d'éléments que j'avais entre mes OL et il lui a attribué des numéros de 1 à 6. Donc, généralement, on va plus souvent utiliser les balises UL pour faire des listes à puces et on les retrouve à peu près partout sur le web. Maintenant, voyons une nouvelle balise qui est la balise span. Donc, disons qu'on est un paragraphe dans lequel on a du texte et qu'on veuille mettre plusieurs parties du texte avec un style spécifique. Si on met une balise div, si vous vous rappelez bien, la balise div

18:26 met des retours à la ligne. Donc, si je vais sur span.html, le fichier que je viens de créer, on voit que là, mon paragraphe a été cassé. Donc, plutôt que mettre des div dans un P qui est en fait une mauvaise pratique, on peut définir un sous-ensemble du paragraphe avec une autre balise qui est la balise span. Si je mets cette partie-là du texte entre span, alors mon texte reviendra comme avant et ça va me permettre de contrôler les mots ici. Disons que je veuille appliquer du style juste à cette sous-partie. Sur toutes les balises HTML, on a accès à style dans lequel on peut passer une chaîne de caractères. Je vais dire que la font weight est bold.

19:12 Et maintenant, quand je rafraîchis, j'ai la partie qui est dans mon span qui a un style différent. Donc la balise span en elle-même, elle ne sert à rien, mais si on lui ajoute des attributs comme du style par exemple, là elle va nous permettre de contrôler différents éléments HTML. Voyons maintenant deux nouvelles balises qui sont strong et EM. Je vais créer un nouveau fichier strong-em.html et me rendre dessus. Disons qu'on a du texte de nouveau comme un lorem ipsum et que je veuille mettre du texte en italique. Je veux que les deux derniers mots ici soient en italique, et ben il y a une balise pour ça, c'est la balise EM et tout le texte que je mettrai entre mes balises EM deviendra italique. Si maintenant je rafraîchis ma page, je vois que j'ai bien les deux derniers mots qui sont en italique. Si par contre

19:58 je veux que mes mots deviennent gras, il y a aussi une balise qui vient de base avec HTML qui est la balise strong. Et donc maintenant les trois mots que j'ai mis entre ma balise strong sont gras. Donc vous vous posez peut-être la question pourquoi ne pas utiliser une balise span avec du style comme on a fait juste ? Et ben c'est parce que le CSS reste invisible pour les moteurs de recherche. Donc si vous voulez une bonne structure de page, si ces trois mots-là sont importants et que vous voulez insister dessus, vous pouvez utiliser la balise strong et là les robots qui parcourent votre site pour indexer vos pages vont comprendre que ces mots sont les plus importants dans le paragraphe. Ensuite on va voir une balise qui nous permet de récupérer des informations que l'utilisateur nous fournit et c'est la balise input. Donc

20:43 une balise input de base, on la déclare comme une balise image, ça veut dire qu'il y a pas besoin d'une balise ouvrante et une balise fermante. On met chevron vers la gauche, input et puis slash chevron vers la droite. Si je me rends sur la page input.html, je vois que j'ai une zone de texte, un input texte dans lequel je peux taper des choses. Et la balise input permet de faire bien plus de choses que ça en lui précisant un type. Donc là en fait, implicitement, ce que j'avais, c'était un type texte, mais on a plein d'autres types d'input, dont tous ceux-ci. Je vais rendre ça un peu plus lisible en ajoutant des retours à la ligne. Et puis d'ailleurs, pour faire des retours à la ligne, on peut utiliser une autre balise qui est la balise BR. J'ai rajouté des balises BR à côté de toutes mes balises input. Et donc maintenant, si je rafraîchis ma page, je vois que j'ai

21:29 plein de types d'input différents. Donc d'abord, j'ai un bouton. Ça, c'est un bouton, mais il y a pas de texte. Pour rajouter du texte, on peut lui rajouter une value "Mon bouton", par exemple, ou le texte que vous voulez, "Valider", et cetera. Et là, mon bouton a bien du texte dedans. Ensuite, on a un input de type checkbox. Checkbox, c'est une petite boîte qui peut être cliquée pour valider ou pas. Ensuite, on a un input de type color. Et si j'appuie dessus, mon système d'exploitation va lancer le sélecteur de couleur. Ensuite, on a un input pour la date, qui nous permet de choisir un jour sur le calendrier. On a pareil, mais avec l'heure en plus. Donc là, on doit choisir le jour et puis insérer la date qu'on veut. On On a un champ texte qui semble être similaire à un champ texte de base, mais en fait, c'est un champ de type email. On peut

22:14 aussi parcourir un fichier et l'uploader sur le site, grâce à l'input de type file. Là, on peut avoir un input caché qu'on va parfois utiliser dans les formulaires, mais auquel on va pas s'intéresser pour le moment. On peut aussi avoir des images, ou bien on peut avoir un type texte qui nous permet de saisir un mois. On peut avoir un type texte avec un élément à droite pour choisir un nombre. On peut avoir un type texte spécifique pour les mots de passe. Et donc quand je tape mon mot de passe, j'ai des caractères cachés plutôt que les voir en clair. On peut avoir un radio button, qui est comme une checkbox, sauf que on est obligé de choisir un des radio buttons. Là, je peux décocher ma checkbox, mais maintenant que mon radio button est sélectionné, je peux plus rien faire. On a un slider pour sélectionner une range. On a un bouton reset, qui est un bouton, mais qui de base vient avec du texte

23:00 "Effacer". On a un input texte qui est spécifique pour la recherche. On a un bouton submit qui vient avec le texte directement en fonction de la langue, vu que moi c'est en français, j'ai envoyé directement. Et puis on a d'autres input texte pour le téléphone, pour du texte. On a aussi de quoi saisir l'heure et les minutes pour avoir un temps. On a un autre input texte pour l'URL et on a un input pour la semaine de l'année. Donc voilà, c'est tous les types de balises input et on va utiliser ces balises input dans une autre balise qu'on va voir juste maintenant qui est des balises form. Donc je vais créer un fichier form.html et dedans, je vais déclarer un form. Donc un form, ça sera une balise ouvrante et une balise fermante et on va trouver principalement deux attributs dessus. Il y aura une action. Cette

23:46 action, c'est une URL qui pointe vers là où sera traité le formulaire. Donc pour le moment, on va rien mettre. Et par contre, on aura une méthode qui sera une des méthodes HTTP et le plus souvent, vous verrez une méthode post. Donc là, concrètement, dans un formulaire, on pouvait avoir un input de type submit avec deux input avec un input de type email par exemple et un input de type password. Et si je mets des retours à la ligne entre mes balises et que je rafraîchis ma page form.html, maintenant, j'ai de quoi taper une adresse email. Donc je vais mettre thomas@commentcoder.com et mon mot de passe, je peux rentrer mon mot de passe et ensuite appuyer sur envoyer. Et grâce au form, l'information sera envoyée vers la page d'action qui est vide chez nous, mais en condition

24:32 réelle, elle pointerait vers une page d'un serveur par exemple. Et ben là, on aurait posté ces informations vers le serveur qui lui traiterait la connexion et nous renverrait quelque chose. Et la balise form en HTML, ça permet de dire que toutes les balises input qui sont dedans doivent être envoyées à une certaine URL en utilisant une certaine méthode. Donc voilà, c'était à à près 10 balises en HTML, les plus utiles et celles qu'on va utiliser le plus souvent dès le début. Maintenant, on peut mettre tout ça ensemble et faire un premier fichier HTML complet qui contient toutes les balises de base, plus celles qu'on a vues et d'autres qu'on va voir encore dans ce tutoriel. Donc là, je vais retourner dans mon fichier index.html dans lequel on avait fait notre première balise H1. Je vais effacer cette balise

25:18 et je vais appuyer sur point d'exclamation. Si vous êtes sur Visual Studio Code et que vous appuyez sur point d'exclamation, vous verrez que un menu s'ouvre et il est mis Emmet Abbreviation. Si vous cliquez dessus, là vous verrez que du texte HTML a été généré et ces balises HTML, c'est les mêmes qu'on a vues dans l'introduction de la vidéo, c'est-à-dire le boilerplate, la base des bases de tous les sites en HTML. Donc voyons les balises une par une. On a la première ligne qui est pas vraiment une balise mais qui est juste un élément d'information pour dire que le type de document est HTML ou plus précisément HTML5. Puis on a la balise HTML qui a un attribut lang qu'on peut changer de anglais en français. Puis on a la balise head qui a deux balises meta. La première balise meta, elle a un attribut

26:04 charset qui qui permet de spécifier l'alphabet qu'on va utiliser dans nos pages. Pour notre alphabet, c'est UTF-8, mais si vous utilisez un autre alphabet d'Europe de l'Est, un alphabet cyrillique, un alphabet asiatique ou autre, il faudra mettre quelque chose d'autre dans le charset. La deuxième balise meta qui est dans notre head, on va pas s'y intéresser. Si vous voulez savoir, c'est juste une manière de bien affiner la page pour les différents types d'appareils, donc les smartphones, les tablettes et cetera. Mais la plus intéressant, on a la balise title. Donc la balise title, probablement la valeur qui est mise dedans, c'est document, mais si on change cette valeur en l'appelant par exemple ma première page HTML et que je sauve, maintenant si je retourne sur index.html et que je rafraîchis, là le titre de mon onglet a

26:50 bien pris la valeur ma première page HTML. Dans le body, on va mettre tout ce qui va s'afficher ici sur notre page HTML. Et là, pour mieux organiser nos pages, souvent on va utiliser trois balises. La première de ces trois balises, ça sera la balise header, à ne pas confondre avec head qui est la balise dans laquelle on met les métadonnées. Header, c'est plutôt la partie du haut du site, l'en-tête, la barre d'application. Et c'est là qu'on va retrouver souvent une barre de recherche, le logo avec le nom du site, un menu de navigation rapide et cetera. C'est une partie qui sera commune à la plupart des pages du site et qui n'a pas tendance à changer. Par contre, la partie main, c'est là où on va mettre le gros du site. Donc, si on prend un blog par exemple, header restera le même sur

27:36 toutes les pages. Par contre, main, ça sera là où il y aura l'article et tous les autres composants qui changent quand on change de page. Et puis, troisième élément, on a le footer. Le footer, un peu comme le header, ça va être une partie qui reste commune à toutes les pages et qui se trouve en bas de la page. Donc, on peut commencer à les remplir. Dans le header de notre page d'index, on va utiliser la balise H1 qu'on a déjà vue pour donner un titre principal à notre page. Et donc, je vais mettre comment coder. Ensuite, dans le footer, on peut aussi signer la page en mettant comment coder 2024. Et puis, dans le main, on va pouvoir commencer à construire nos pages. Donc, je vais mettre un premier H2 et on va découvrir un nouveau type de balise qui sont les balises pour les tableaux. Donc, je vais

28:22 rafraîchir ma page et maintenant, je vois que j'ai mon titre principal, mon premier sous-titre et ma signature. Et donc, pour faire un tableau en HTML, on a plusieurs balises. D'abord, on a la balise table qui va être le parent de notre tableau. Et notre table, un peu comme notre body, il va être composé de trois choses. On a la balise thead pour le header du tableau. Ensuite, on a la partie tbody pour le corps du tableau et finalement si vous avez besoin, vous avez aussi Tfoot pour le footer du tableau. Donc un tableau c'est comme dans un fichier Excel, une série de lignes et de colonnes qui forment des cellules et une ligne en anglais ça se dit row et donc la balise HTML pour faire des lignes dans des tableaux, c'est TR pour table row. Donc disons qu'on est un tableau d'étudiants et dans

29:08 chaque colonne, on veut un prénom, un âge et une moyenne sur 20. Pour ça, sur la toute première ligne de mon tableau, je veux que les titres pour chaque colonne, les en-têtes, ça soit prénom, âge et moyenne. Et on peut faire ça en les mettant dans des TH et TH c'est l'élément qui représente le titre ou l'en-tête du tableau. On va sortir de l'en-tête, de la première ligne qu'on va avoir et là on va commencer à remplir le tableau d'informations. Donc pour remplir le tableau d'informations, dans Tbody, on peut mettre autant d'étudiants qu'on veut et on va de nouveau faire une table row pour annoncer qu'on va déclarer une nouvelle ligne. Et là par contre, au lieu d'avoir TH pour mettre des titres, des en-têtes, là on veut mettre de la data donc on va mettre TD et dans TD, on va maintenant pouvoir

29:55 mettre le prénom du premier élève qu'on peut appeler Alice. Ensuite, on peut mettre l'âge d'Alice qui est la deuxième colonne de notre tableau, on va mettre 24 et puis sa moyenne sur 20, on peut lui mettre par exemple 16 sur 20. Maintenant, si je rafraîchis ma page, je vois que j'ai des éléments avec prénom âge moyenne qui sont affichés en gras et puis on a aligné prénom Alice, âge 24 et moyenne 16 sur 20. Pour que ça soit un peu plus visible, je vais ajouter un attribut border à mon tableau que je vais mettre à 1 comme ça on a quelque chose de pas très beau mais de plus visible et puis je vais ajouter des lignes. Donc je vais copier ma première ligne avec Alice et je vais créer Bob. Bob, il va avoir 25 ans et une moyenne à 14 et maintenant si je rafraîchis ma

30:41 page, je vois que j'ai une deuxième ligne d'étudiants avec Bob, un âge et sa moyenne. Et on peut avoir autant de lignes qu'on veut comme ça. Finalement, dans Tfoot, on pourrait par exemple afficher des informations comme le nombre d'étudiants au total et puis la moyenne d'âge et peut-être la moyenne des notes sur 20. Donc pour ça, on peut également dans le footer Tfoot annoncer une nouvelle ligne avec de la data et cette data, ça sera pour la première colonne dans laquelle on a des prénoms, le nombre d'élèves, là il y en a deux, il y a Alice et Bob. Et puis pour l'âge, on peut faire la moyenne des âges, donc là on aurait 24,5. Et puis pour les notes, on pourrait prendre la moitié des notes sur 20, ça veut dire 15 sur 20. Donc voyons notre

31:27 tableau en entier. Je vais rafraîchir ma page et là je vois que j'ai bien un footer qui s'est ajouté en bas et donc si on voulait, on pourrait continuer à remplir notre tableau dans le body. Reprenons notre tableau en entier. Donc on a une balise ouvrante et une balise fermante table pour déclarer le tableau. On lui a donné un attribut border de 1 pour qu'il ajoute une bordure d'un pixel autour des cellules. Et puis on a trois enfants dans le table, on a thead pour la première ligne. On a déclaré la première ligne, puis on a spécifié qu'on voulait des cellules d'en-tête, de titre et c'est pour ça que prénom, âge et moyenne sont en gras. Puis dans le body, donc là on a que deux enfants qui sont deux TR, deux lignes du tableau. La

32:12 première, elle est composée d'Alice, 24 et 16 sur 20 pour le prénom de l'étudiant, l'âge et sa moyenne. On a fait pareil pour Bob en déclarant une nouvelle ligne. Et puis les données pour trois cellules. Et finalement, on a rajouté un footer à notre tableau dans lequel on a fait la somme du nombre d'étudiants, la moyenne de leur âge et la moyenne de leurs notes. Ça c'était pour le tableau. Et maintenant qu'on a ça, on va au-dessus du tableau, créer un autre H2 dans lequel on va écrire un article de blog. Donc là, ce qui serait bien à ce moment-ci, c'est de pouvoir séparer l'article de blog qui va apparaître ici du tableau en section. Alors, on pourrait utiliser des div pour créer des séparations, mais il y a une balise HTML5 qui est encore plus adaptée pour ça et c'est la balise section. Donc

32:58 je vais utiliser la balise section pour séparer mon article de blog de mon tableau et maintenant visuellement rien n'a changé, mais on a une meilleure séparation des sections du body de notre site. Dans l'exemple d'article de blog, je peux là aussi utiliser une nouvelle balise qui est la balise article et la balise article, ça va permettre aux robots qui parcourent le site de comprendre que là, il y a un document, quelque chose qui va être riche en texte et en média et qui va avoir une structure. Donc dans l'article, vu qu'on a déjà un H1 et un H2, je vais commencer à compter à H3, mais si vous aviez un vrai article de blog, il faudrait plutôt qu'utiliser le H1 qui est unique pour l'utiliser pour le nom du site qui est partout pareil. Là, si c'était un vrai article de blog, j'utiliserai la balise

33:43 H1 pour le titre de l'article plutôt que le titre du site. Soit, vu qu'on a ça, vu qu'on a déjà un H1 et un H2, on va commencer à compter à H3 et on va écrire mon super article. Donc dans mon article, je vais avoir une introduction avec un premier paragraphe. Comme j'ai généré la base du fichier HTML, je peux générer un Lorem ipsum grâce à Emmet et puis disons qu'on ait un deuxième paragraphe qui est plus important et qui explique en une phrase l'introduction du site, je peux écrire un paragraphe avec avec l'introduction de mon article de blog résumé en un paragraphe et ça c'est tellement important que je la veux entre une balise strong pour que les robots qui parcourent le site comprennent que c'est cette phrase la plus importante de l'introduction. Et maintenant si je rafraîchis, je vois que je commence à

34:30 compléter mon article de blog avec une bonne structure HTML. D'ailleurs, tant qu'on y est, à tout moment, si vous avez des doutes sur la structure de votre fichier HTML, vous pouvez utiliser un service de la W3C. Le W3C, c'est un groupe qui crée des standards et des bonnes pratiques pour développer en HTML et ils ont un outil qui est le validateur. Vous pouvez chercher W3C Validator sur Google et vous retrouverez cette page. À cette page, on peut passer soit une URL, soit uploader un fichier, soit donner un input directement. Et donc pour vérifier que ma page est correcte, je vais sélectionner tout le texte de mon document, le copier et puis le coller dans la zone de texte et ensuite je vais appuyer sur check. Là, après quelques secondes, je regarde et je vois que j'ai deux informations qui est que il trouve que ce slash est

35:17 inutile, sauf que mon éditeur de texte va le rajouter automatiquement quand je sauve mon fichier. Et puis par contre, il me donne une erreur qui dit que l'attribut border est obsolète sur les tableaux et qu'il faut plutôt utiliser du CSS. Mais comme dans ce tutoriel, on va pas apprendre le CSS, on voit juste l'HTML, je vais le laisser pour qu'on voit mieux mon tableau. Bien sûr, en conditions réelles, vous vous doutez que les tableaux sur les sites, ça ressemble plus à ça de nos jours. On utilisera du CSS pour rendre ça bien plus beau. Revenons à la construction de notre page. Dans le header, on peut ajouter une nouvelle balise qui est la balise nav et la balise nav, ça va nous permettre de naviguer et de déclarer des liens. Donc disons qu'on veuille une liste de liens qui nous emmène vers tous les fichiers HTML qu'on a : div, p, headings, a, image et les autres. On peut faire ça en ajoutant une balise nav

36:03 dans laquelle on va mettre une liste non ordonnée, une liste ul avec des éléments et chaque élément sera un lien href dans lequel on donne le chemin vers le fichier qu'on veut visiter. Donc pour ça, on a tous ces fichiers-là. On va commencer avec a.html et on on va mettre comme texte cliquable la balise d'ancrage a. Et on puis on va faire la même chose pour div, div.html en écrivant la balise div, pareil pour form, la balise de formulaire. Puis on a headings pour les balises de titre. Et puis on a img qui est la balise d'image. On a aussi input avec la balise d'input

36:48 dans laquelle on a vu tous les types différents d'input. Après on a list.html avec les balises ul, ol et li. On a vu la balise p qui était la balise pour les paragraphes. On a vu la balise span qui est la balise pour sélectionner du texte. Et puis on a vu les balises strong et em qui sont les balises pour mettre en gras ou en italique. Maintenant si je rafraîchis ma page, je vois que j'ai dans mon en-tête, dans le header de ma page une liste de liens et quand je clique dessus, je suis redirigé vers le fichier en question. On peut faire pareil dans le footer et ajouter

37:34 déjà mettre comment coder entre span, comme ça on a du texte et on peut lui ajouter le style qu'on veut. Et puis on peut aussi rajouter une div avec une première partie qui contiendra un h5 pour qu'on ait une sorte de titre mais qui pèse moins que tout ce qu'on trouvera sur le site. Alors donc on peut mettre des h5 ou des h6 et on peut mettre par exemple réseaux sociaux. Et là on peut avoir une liste de liens. Et pour changer, on va utiliser une liste ordonnée qui elle contient des liens. Donc on a li. On peut mettre un lien vers la chaîne YouTube de Comment Coder avec https://www.youtube.com/@commentcoder. On peut faire pareil avec GitHub avec

38:22 github.com/commentcoder et on change le lien en GitHub. On a aussi une chaîne TikTok avec tiktok.com/atcommentcoder et donc on change le texte en TikTok et puis sur LinkedIn c'est linkedin.com/company/commentcoder et comme ça on a un lien vers la page LinkedIn de comment coder. Maintenant, si je rafraîchis ma page, je vois que j'ai en bas de ma page dans mon footer les réseaux sociaux YouTube, GitHub, TikTok et LinkedIn. Et quand on clique sur les liens, on est bien redirigé vers les pages. OK, continuons avec une autre balise qui est importante. Je vais créer une nouvelle section en dessous de mon tableau. Donc je vais créer une nouvelle

39:07 section, mettre un nouveau H2 avec input text et si vous vous rappelez de la balise input, on l'écrivait comme ça et on pouvait lui passer un type de type text et cette balise permettait d'avoir une barre de saisie de texte pour que l'utilisateur puisse rentrer des informations textuelles. Donc dans cette barre, on peut taper des choses. Maintenant disons qu'on veut inviter l'utilisateur à taper un paragraphe. Ça va être compliqué de taper beaucoup de texte dans ce petit input, donc on peut soit agrandir la taille de cet input text avec du CSS ou bien on peut voir une autre balise qui est la balise textarea. La balise textarea, contrairement à la balise input qui s'ouvre et qui se ferme directement, dans la balise textarea, on a bien une balise ouvrante et une balise fermante et elle va nous permettre d'avoir une

39:53 plus grande zone de texte. Donc je vais rajouter des retours à la ligne avec br pour que les deux zones de saisie de texte s'affichent mieux. Et textarea, elle prend différents attributs. On peut par exemple lui passer un nombre de lignes. Disons que je veuille plutôt 5 lignes. Si je rafraîchis ma page là maintenant, j'ai plusieurs lignes, 1 2 3 4 5 et si je la veux plus large, on peut aussi lui passer un nombre de colonnes. Disons que je veuille 50 caractères en colonne. Là, je peux taper 50 caractères horizontalement dans mon texte area. On peut aussi lui passer un placeholder. Ça sera une aide textuelle qui s'affiche de base et on peut par exemple dire mon super texte area. Si je rafraîchis ma page et que je retire les retours à la ligne que j'avais mis, je vois que j'ai

40:39 bien en gris mon super texte area. Il est grisé parce que c'est pas la valeur qui est mise dedans par défaut. Si je c'est une aide et dès que j'écris des choses dedans, ça va disparaître. On peut aussi voir d'autres types de balises qui sont des balises qu'on va utiliser moins souvent mais que si vous développez, ça peut être utile. Donc par exemple, on a la balise code qui peut indiquer au navigateur que c'est du code. Donc si on met par exemple la fonction print en Python comme ceci et que je rafraîchis la page, on voit qu'on a une police de caractère différente et là le navigateur a compris que ça c'était du code. Et maintenant, on peut voir une notion importante HTML qui sont les attributs ID et classe. Sur n'importe quelle balise HTML, on peut ajouter soit ID, soit classe qui va nous

41:24 servir de référence vers la balise en question. Et la différence entre ID et classe, c'est que l'ID est unique alors que classe, on va pouvoir les mettre sur plusieurs balises différentes. Je vous explique. Par exemple, faisons une nouvelle section dans laquelle on va afficher des boutons et on aura deux boutons. Sauf que ces boutons, on va les faire à partir de div et donc on aura deux div qui sont deux boutons. Et on va dire bouton 1 et bouton 2. Pour le moment, ces boutons, c'est juste des simples textes et on aimerait bien les transformer en bouton. Pour ça, on peut faire deux choses. Déjà, on pourrait créer une classe bouton et l'appliquer sur les deux boutons. Et on peut faire ça en passant un attribut classe dans lequel on fait classe et puis le texte bouton. Et là, on aurait nos deux

42:11 boutons dans des classes, ce qui nous permettrait après d'ajouter du style pour tous les éléments qui ont la classe bouton, ce qu'on peut faire par exemple en allant dans le head et en ajoutant la balise de style. Et là, pour sélectionner tous les éléments qui ont le nom de classe bouton, là, on va faire un peu de CSS et on peut utiliser le point et puis bouton. Donc, point, c'est pour classe et bouton, c'est pour le nom de classe. Et maintenant, on peut passer des styles à notre bouton. Disons qu'on veuille des boutons verts avec une couleur de texte blanche, un espacement interne de 10 et puis des bords arrondis de 5 pixels. Si je sauve mon fichier et que je rafraîchis ma page, je vois que maintenant mes deux boutons ont des styles différents. Donc là, mes boutons prennent toute la page et je vais

42:56 rajouter du CSS pour que ils soient plus petits. Voilà, donc j'ai mes deux boutons et maintenant, disons qu'on veuille pas simplement deux boutons, mais qu'on veut que ce bouton en spécifique ait un style et que celui-là ait un autre style. On a vu que classe, on pouvait mettre cet attribut sur plusieurs éléments. Par contre, il y a aussi ID qui sert d'identificateur unique. Je peux dire que ce premier bouton, c'est mon ID bouton 1 et que pour le deuxième bouton, on a l'ID unique bouton 2. Maintenant, si je retourne dans mon style, pour sélectionner l'ID, on utilise le symbole dièse et maintenant, si je mets bouton 1, je peux dire que en fait, le bouton 1, je veux que sa couleur de fond, elle soit plutôt rouge. Et si je rafraîchis ma page, uniquement pour le bouton 1,

43:42 j'aurai une couleur de fond qui est rouge. Et maintenant, je veux du CSS uniquement pour mon bouton 2. Je veux par exemple dire que sa police d'écriture doit être épaisse, et ben, j'ai appliqué juste au bouton 2 du texte qui est gras. Donc, à retenir sur les ID et les classes, ID, c'est un identificateur unique. On peut avoir sur tout le document HTML qu'une seule balise qui a un ID unique. Et là, sur nos boutons, on a passé un ID unique bouton 1 sur le 1er bouton et bouton 2 sur le 2e bouton. Par contre, classe, on peut le mettre à plusieurs balises qui sont similaires, qui partagent des propriétés similaires. Par exemple, les boutons vont tous avoir de l'espace autour d'eux, ils vont tous avoir des bords arrondis et une couleur de fond. Et on peut sélectionner ces ID et

44:28 classes. Pour ID, commencer par une dièse et puis le nom de l'ID et pour classe, commencer par un point et puis le nom de la classe. Ces attributs ID et classe vont être essentiels pour organiser et ajouter du style sur nos pages web et vous allez les utiliser très souvent quand vous ferez vos fichiers CSS ou vos scripts JavaScript. D'ailleurs, tant qu'on parle de JavaScript, on peut voir une nouvelle balise qui est la balise script dans laquelle on peut passer du JavaScript. Donc disons que je veuille afficher une fenêtre d'alerte quand la personne arrive sur mon site, je peux là, entre la balise script, ajouter tout le JavaScript que je veux et je peux lui mettre un pop-up "Bienvenue sur mon site". Si maintenant je sauve ça et que je rafraîchis ma page, on a bien un pop-up d'alerte qui est affiché avec le

45:15 texte en alerte qui est "Bienvenue sur mon site". Je vais pas rentrer dans les détails de JavaScript maintenant, sachez juste que vous pouvez ajouter du JavaScript dans vos fichiers HTML grâce à la balise script comme on a ajouté du style avec la balise style. Et si vous voulez importer des scripts et des styles depuis des fichiers externes, disons par exemple qu'on crée un nouveau fichier qu'on appelle styles .css et dans styles.css, on va ajouter des propriétés CSS en disant que dans le body, en fait, je veux que le background color soit plus sombre et que pour commencer, je veux que la couleur du texte soit blanche. Maintenant, comment importer ce fichier CSS dans mon ? Pour ça, je peux dans la balise head ajouter

46:01 une autre balise qui est la balise link qui va permettre d'indiquer au navigateur qui doit charger une ressource externe qui est dans notre cas un fichier CSS et donc dans rel, je vais dire que c'est du style sheet car CSS ça veut dire cascading style sheet ou feuille de style en cascade et je dois lui passer le chemin vers mon fichier CSS avec href dans lequel je mets styles.css et maintenant que j'ai inclus ma feuille de style, si je retourne dans mon navigateur et que je recharge ma page, j'ai bien la couleur de fond qui a changé et qui est une couleur grise et mon texte est par défaut blanc plutôt que noir car c'était les deux attributs qu'on a voulu appliquer au body background 424242 et couleur de white. Et ce style va être appliqué sur body

46:47 qui contient toutes les balises qu'on a affiché sur la page. Et c'est pareil pour JavaScript, si j'avais un fichier lui faire plein de choses comme par exemple reprendre mon alerte et dire voici une alerte. Pour l'inclure dans mon fichier index.html, je pourrais inclure ma balise à différents endroits. Donc par convention, on va plutôt préférer de l'ajouter juste avant la fin du body, à la fin du fichier. Comme ça le navigateur peut charger toutes les balises HTML et puis seulement charger notre script. Pour faire ça, on peut faire une balise script comme avant sauf que cette fois-ci, on va lui passer un src vers le chemin du fichier. C'était main.js. Maintenant si je retourne sur mon site, j'ai bien la première alerte ici qui est bienvenue sur mon site et

47:33 puis j'ai pu charger mon fichier JS qui m'a fait une autre alerte et elle apparaît bien après avoir chargé tout le reste. Et là il nous manque une chose dans l'onglet qui est que sur la plupart des sites, on a un icône à gauche du titre de la page et là sur ma page, j'en ai pas. Pour ça, vous pouvez prendre une image. On va souvent utiliser des images en point ico. Donc je vais importer une image favicon.ico dans le dossier de mon projet et ça va ressembler à ça. Et puis maintenant pour l'inclure dans mon fichier index, je vais utiliser une autre balise link sauf que la rel ça sera icône plutôt que stylesheet et en href, je peux toujours passer favicon.ico et puis fermer ma balise. Maintenant, si je rafraîchis ma page, je vois que j'ai bien l'icône qui est affichée dans l'onglet à côté du titre.

48:19 Maintenant qu'on a vu à quoi servaient toutes ces balises et comment fonctionne le langage HTML, je vous propose de faire votre premier projet. Donc ce premier projet, ça sera un portfolio. Si vous voulez pas faire de portfolio, vous pouvez aussi faire une page sur quelqu'un que vous aimez bien. Mais l'énoncé du projet est le suivant. Donc je vous propose de faire une page d'index et éventuellement d'autres pages si vous voulez et sur ce site d'avoir plusieurs sections ou plusieurs pages qui comprennent vos compétences, vos projets et expériences professionnelles si vous en avez et puis pourquoi pas aussi une page à propos pour expliquer un peu qui vous êtes et puis une page de contact si vous voulez donner un point contact ou les liens vers vos réseaux sociaux. Donc dans l'idée, il faut faire ce site composé d'une ou plusieurs pages avec du HTML bien structuré et clair et aussi si possible d'utiliser un maximum

49:05 des balises HTML que je vous ai présenté aujourd'hui pour être sûr de bien pratiquer toutes ces balises qui sont vraiment essentielles et qu'on va retrouver partout. Pour être sûr que le HTML que vous écrivez est bien valide, vous mettrez le lien vers le validateur W3C que je vous ai montré plus tôt dans la vidéo. Je vais aussi vous montrer un moyen d'héberger votre site gratuitement sur un site que tous les développeurs utilisent et puis là il sera uniquement en HTML. Vous pouvez aussi décider d'apprendre CSS et JavaScript tout seul pour améliorer votre site et aller plus loin. Mais sinon je continuerai cette série de vidéos. La prochaine que je ferai sera une vidéo similaire mais pour apprendre le CSS. Après je ferai une ou plusieurs vidéos sur le JavaScript et si vous commencez votre portfolio maintenant avec la structure HTML, vous pouvez par exemple décider de le continuer après avoir vu ma vidéo sur le CSS et faire pareil après avoir vu ma

49:52 vidéo sur les JavaScript. Et maintenant, je vais vous montrer comment héberger gratuitement une page HTML sur Internet. Pour héberger notre site gratuitement sur Internet, je vais vous proposer de créer un compte sur GitHub. GitHub, c'est un site que la plupart des développeurs utilisent. Ça permet de faire de l'open source, donc de contribuer à des projets. Mais même les développeurs qui ne collaborent pas sur les projets open source ont GitHub parce que ça permet de poster ses propres projets et puis de suivre ce qui se passe dans le monde du développement. Donc, pour créer un compte gratuitement sur GitHub, allez sur github.com et puis appuyez sur le bouton sign up. Là, vous pourrez créer un compte en entrant vos informations et une fois que c'est fait, vous devriez arriver sur une page qui ressemble à ça. Donc, pour créer un site avec GitHub, il faut d'abord créer un projet et puis on va créer ce qu'on appelle une page GitHub. Je vais appuyer sur le bouton new pour faire un nouveau

50:37 projet. Je vais l'appeler portfolio HTML, mais vous vous pouvez l'appeler portfolio. Je vais dire que ce projet va être public et puis je vais appuyer sur le bouton pour créer le projet. Donc, il y a tout un système pour interagir avec GitHub grâce à Git, mais si vous regardez un tutoriel en HTML, je suppose que vous ne connaissez pas ça. Alors, je vous propose d'appuyer sur le lien pour uploader un fichier qui existe déjà. Cliquez dessus et puis là, vous pouvez aller choisir votre fichier index.html et moi, je vais sélectionner tous les fichiers que j'ai utilisés pendant cette vidéo. Donc là, je vais uploader mes 15 fichiers et une fois que c'est fait, je vais appuyer sur le gros bouton vert commit changes. Maintenant, si tout s'est bien passé, vous devriez voir vos fichiers HTML dans un projet, mais nous, ce qu'on veut, c'est un site. Pour ça, vous pouvez aller dans settings et puis sur le panneau de gauche, vous verrez

51:23 l'option page. Une fois sur la page, vous pouvez choisir une branche, qui est la branche qui a été créée. Normalement, son nom par défaut, c'est main. Vous pouvez la choisir et puis appuyer sur save. Donc là, si vous avez bien un fichier qui s'appelle index.html, comme le mien qui ressemble à ça, et ben une fois que vous avez activé les pages GitHub depuis les options de votre dépôt, vous pouvez vous rendre sur votre nom d'utilisateur, moi c'est comment coder {point} github.io {slash} et puis le nom de votre projet. Moi, je l'ai appelé portfolio-html. Quand j'arrive sur cette page, je vois que j'avais l'alerte que j'avais mis plus tôt, bienvenue sur mon site et puis l'autre alerte qui est chargée depuis le fichier JavaScript et j'ai mon site qui est maintenant sur internet et

52:08 consultable par tous. Au moment où vous verrez cette vidéo, j'aurai changé le HTML de cette page qui devient vraiment dégueulasse et j'aurai fait une version de mon portfolio uniquement en HTML pour que vous puissiez comparer avec ce que j'ai fait. Donc félicitations, vous venez de passer une heure à passer la première étape pour apprendre le développement web qui est de comprendre le HTML et d'apprendre les balises les plus utiles. On peut aller bien plus loin en HTML, mais là vous avez les balises essentielles pour pouvoir commencer et vous débrouiller tout seul. D'ailleurs, je vous ai donné un énoncé avec un exercice, un projet concret pour mettre tout ça en pratique directement. Si vous avez besoin de quoi que ce soit, vous trouverez en description un lien vers le dépôt GitHub. Sur ce dépôt GitHub, en bas de la page, vous aurez un récapitulatif de toutes les balises qu'on a vu ensemble dans cette vidéo et

52:54 puis l'énoncé pour faire un portfolio ou une page sur une personnalité de votre choix que je viens d'expliquer, mais sous format texte. Maintenant qu'on a vu l'HTML ensemble, je vais vous proposer d'aller plus loin avec cette vidéo qui vous permettra de passer la prochaine étape de l'apprentissage du développement web.