Introduction au HTML pour débutants

bonjour à tous et bienvenue on se retrouve aujourd'hui pour un sujet pour les extrêmes débutants pour ceux qui découvrent le web on va parler d'html et dans ce cours on va absolument retracer tout ce qui est utile en html pas tout ce qui est possible parce qu'il ya bien sûr des milliers de choses possibles mais je vais vous montrer tout ce qui est utile en html et à la fin de ce cours vous aurez un beau document avec absolument toutes les choses qui vont vous servir pour faire des structures de pages web tout simplement Donc sans plus attendre, commençons, puisque je n'ai pas de générique. Donc lançons-nous. Par contre, on va commencer déjà par se créer un dossier. On va se créer un dossier, les amis, et on va l'appeler HTML cours. Tiens, voilà, pour faire un truc original. OK. Et donc dans ce cours HTML, on va se faire un nouveau document texte, sauf que ça ne va pas être un document texte en vrai. On va faire un document qui s'appelle index. point html. Hop, il nous demande de changer la terminaison. Oui, ensuite, on fait clic droit, ouvrir avec et on va s'ouvrir avec le bloc note et là, les amis, qu'est ce qui se passe ? Eh bien, on va essayer de se coder une page html ultra basique. Tiens, essayons, on va dire Hello Internet pour éviter de dire Hello World tout le temps et essayons de voir notre fichier qui est là index.html. Si on le fait glisser dans notre navigateur, qu'est ce qui se passe ? Regardez là, en fait, on ouvre le fichier. On est dans HTML court, index.html, et regarde ce qui vient de se passer. Notre navigateur internet, là qui est en l'occurrence Chrome, il est en train de nous lire quoi ? Il nous lit Hello Internet Donc il arrive à nous lire le fichier. Si on voulait lire de façon différente, on pourrait faire Ctrl O Et en faisant Ctrl O là on irait dans HTML court, index.html, on double-clique dessus, et c'est exactement la même chose que ce qu'on avait précédemment. Donc ok, on a cette page, on a mis Hello Internet. Ok, tiens, et si par exemple, on se mettait I love HTML. Vous voyez que je suis très inspiré. Qu'est-ce qui va se passer là si on actualise la page ? Vous voyez, il nous relie le fichier. En fait, il relie ce qui est écrit là-dedans. Donc notre navigateur est capable de lire ce fichier-là. Donc regardez, si on veut faire du HTML, on a qu'à dire, tiens, toi, entre crochets, tu es H1. Hop, on referme comme ça. Et tiens, là on n'a qu'à se mettre un break. Et regardez ce qui va se passer avec le br là. Et là on y a mis h1 entre balises. Bien sûr je vous remettrai sur cette notion juste après, je vous montre juste l'introduction sur BlockNote, et après on va coder pour de vrai. Donc regardez là, j'actualise, paf, qu'est-ce qui vient de se passer ? Lui on l'a mis entre balises h1, ça nous sort quoi ? Ça nous sort un titre. Et on n'a plus les choses qui sont cote à cote, parce qu'on a mis un br, qui est donc un break, et donc il a créé un espacement. Là où il y a écrit après, I love HTML. Donc vous vous doutez bien qu'on va pas coder sur un bloc note. Pourquoi ? Parce que c'est pas très ergonomique, c'est quand même pas très pratique. Donc ce qu'on va faire, et bien c'est qu'on va coder sur un éditeur de code les amis. Un éditeur de texte on peut appeler ça aussi. Et moi celui que je vais utiliser, celui que vous allez utiliser, ça s'appelle VS Code. Donc on va mettre VS Code download, Visual Studio Code voilà. Moi j'ai l'habitude de mettre VS Code, c'est vrai mais en fait c'est Visual Studio Code. Voilà. Là, vous prenez la version qui correspond à votre système d'exploitation. Et ensuite, on se retrouve, les amis, sur VS Code. Parce que moi, je ne vais pas le télécharger. Je l'ai déjà. Et on se retrouve sur cette interface. OK. Donc là, on a cette interface. Et on est évident. On peut faire File, Open File, si on voulait aller chercher notre fichier. Mais on peut aussi faire glisser. C'est assez pratique. On se met comme ça, on fait glisser. Et voilà. Notre HTML court, on va pouvoir l'éditer ailleurs que dans un bloc-notes, dans un endroit beaucoup plus pratique, là en l'occurrence c'est dans Visual Studio Code. Maintenant on va se le mettre sur le côté, on va se le mettre comme ça, et ça on va faire en sorte de pouvoir l'avoir comme ça, à chaque fois qu'on va coder, on va voir à côté ce qui est fait. Logiquement on est toujours sur cette page-là, et là on a notre petit texte, vous vous en doutez bien, ça ne va pas rester comme ça. donc maintenant on va attaquer on va attaquer dans le dur à supprimer ça et avant toute chose on va faire une structure de pages html je sais pas si vous avez déjà quelques bases en html ou pas mais sachez que là je fais point d'exclamation et en faisant point d'exclamation il propose immédiatement une structure en faisant entrer sinon on peut faire html 5 voyait une propose de html 5 voyez là on peut se déplacer avec la flèche au bas comme ça et là en faisant html 5 pareil il nous propose une structure, et sachez que cette structure, c'est la structure qu'il faut employer lorsque l'on code en HTML. Ça veut dire quoi ? Ça veut dire qu'on dit toujours, point d'exclamation, doc type HTML, d'accord ? Mais dites-vous que si vous commencez une page HTML, commencez par un point d'exclamation, ou commencez par HTML tout court, et voilà, votre page sera faite. Mais je vais revenir rapidement sur les choses. Donc on dit toujours doc type, on dit le type de document, c'est l'HTML, on commence toujours comme ça. Et derrière, là, les balises commencent en quelque sorte, puisque chaque balise ouvrante a une fermante. ou presque. C'est vrai que les balises méta n'ont pas de fermente. Donc j'ai un peu tort là-dessus. Mais vous avez quand même un peu compris le principe. C'est-à-dire que là, on a HTML langage et là, on a la fermente. Là, il y a écrit EN pour English. Nous, on va mettre FR pour français. Ça, c'est pour que le navigateur sache qu'on est sur une page en français. Ensuite, on a dans ED, là, on a toutes les informations qui ont un rapport avec la page, mais qui ne seront pas affichées. On lui dit qu'on va utiliser un char set UTF-8. Je ne vais pas revenir sur absolument tout ce qu'il y a là-dedans. C'est des choses qu'on apprend vraiment au fur et à mesure quand on avance dans le développement web. Ça serait vraiment donner des informations futiles que vous ne retiendriez pas. Donc on va juste, dans ce document, on va par exemple se mettre un titre. Là vous voyez qu'on a écrit title, donc il faut savoir que tout est en anglais. Donc si vous n'avez pas l'habitude de l'anglais, ne vous inquiétez pas, ça va venir tout seul. Puisque vous ne allez faire que ça, annoncer des balises en anglais, des choses comme ça. Et là au lieu de document, on a qu'à s'écrire cours HTML. Je fais Ctrl S, Ctrl S ça veut dire enregistrer, sinon on peut faire File, Save, File, Save, Ctrl S. Ça marche sur Word, ça marche sur le bloc notes, Ctrl S ça marche à peu près sur tout, c'est pour enregistrer. Donc il faut qu'à chaque fois on enregistre notre document. D'accord ? Vous voyez là, là j'ai fait un espace, donc là le document a une petite boule, la petite boule ça signifie qu'il n'a pas été enregistré, d'accord ? Donc Up, Ctrl S, là il n'y a plus la petite boule, il est enregistré. Allons voir ici, vous voyez que là le contenu a disparu, puisqu'on n'a pas de contenu. en revanche on a là écrit court html vous voyez qu'on vient d'agir sur le titre notre page regardez ce qu'on va faire petit à petit je vais commenter je vais commenter je vais commenter mon code alors comment on fait rire de vous et là j'ai écrit juste le truc le truc normal je sélectionne et je fais contrôle slash un contrôle l'oeil écrit le vieil et 2 points en fait pas un contrôle slash c'est le même bouton il est de poids et le slash et vous voyez ça commente sinon manuellement on fait tac tac tac et on met je commente. On peut faire comme ça. Ça, c'est des flèches. C'est des flèches faites comme ça, je veux dire. Donc, voilà. On a un commentaire. Ok, super. Qu'est-ce qu'on pourrait avoir envie de se mettre ? On pourrait, à la place de ce petit truc-là, on pourrait se mettre un petit logo à nous. Allons chercher un logo HTML5. Et comme ça, vous allez voir comment est-ce qu'on ajoute un logo. Hop, on va dans images. on va se prendre celui ci il est il à je fais qu'est ce qu'on fait on fait enregistrer l'image sous on est sur le bureau html court et on va quand même se renommer on va le mettre logo tirer html point png on enregistre voilà et la regarder si elle est ce qui va se passer sur notre document en fait la visual studio code il nous il nous met à disposition tout ce qui est dans ce dossier c'est juste ça on a tout ce qui dans ce dossier on l'a à disposition là, sur la gauche. Donc ça, c'est quand même assez cool. Et donc, hop, on revient là-dessus. Et donc, pour finir notre head, on a un titre à notre document. Le titre, il doit être mis le plus haut possible. Enfin, en théorie, c'est après les UTF-8, parce qu'on ne sait jamais les UTF, en fait, c'est pour s'il y a des caractères spéciaux ou quoi. Mais bon, le titre, vu qu'on est censé le mettre le plus haut possible dans une page, en tout cas, c'est ce qui est recommandé par Google, eh bien, nous, on va mettre la suite ici. ici on va se créer tu vas regarder on n'a qu'à faire un commentaire manuellement on va dire icônes de l'onglet alors comment est-ce qu'on se fait un icône d'onglet en html et bien regarder on va juste lui dire link le rel c'est short cut plus loin icônes et là on va aller se chercher le notre acheter le logo html pas contrôle s donc là on vient de faire un head. Vous voyez que tout ce qui est contenu là, ça ouvre, et là, ça ferme. Je ne vais peut-être pas préciser, mais quand il y a le slash comme ça, avant le terme, c'est pour fermer la balise. D'accord ? De même, la body, ce sera le corps de notre application, enfin de notre application, de notre page, on va dire tout simplement. On ouvre, et là, le slash, on ferme. Et HTML, on le ferme là. Vous voyez, HTML, c'est celui qui est lié là-haut. C'est comme ça que ça marche, les amis. Une fois qu'on a réussi à faire ça, Et bien, actualisons ! Et regardez, on n'a plus le petit globe de base de Chrome. D'ailleurs, je n'en ai pas parlé, mais je vous invite quand même à coder sur Chrome. Si vous avez un ordinateur qui est relativement bien bon, on va dire, parce que c'est vrai que Chrome, ça prend beaucoup de RAM, mais si vous avez un ordinateur correct, codez sur Chrome. C'est beaucoup plus pratique pour coder. Donc là, vous avez notre petit logo, qui est magnifique, et notre titre. Vous voyez, on a réussi à paramétrer un petit peu à quoi allait ressembler notre page. Alors après, on peut mettre plein d'autres choses là-dedans, je reviendrai plus tard là-dessus. Mais voilà, on est déjà bon là-dessus. Maintenant, ce qu'on va chercher à faire, c'est à faire du remplissage, c'est à essayer de voir tout ce qu'on peut faire dans une page web en HTML. Alors, avant de se lancer dans l'écriture de ce qu'il pourrait y avoir écrit dans notre body, c'est vrai que j'ai été un petit peu vite sur VS Code, je me suis remarqué ça en revoyant la vidéo. Et si vous allez là sur la molette, vous avez des settings, et vous avez aussi un... color thème et là vous pouvez choisir des thèmes d'accord vous pouvez choisir la couleur qui vous convient alors sachez que plus ça vous paraît joli et puis ça va faire mal aux yeux parce que plus les contrastes sont forts plus ça fait mal aux yeux vous voyez celui-ci Dracula il est pas moche mais je crois que celui-là vous l'avez pas de base ça ça fait partie ça fait partie des choses qu'on peut télécharger donc là vous voyez tout en bas dans VS Code là on peut aller se chercher des thèmes on peut aller se chercher des aides en tout genre D'accord, dans CZ dans tout genre, il y a un plugin qui s'appelle HTML Snippets. Et ça, c'est des choses qui aident à coder en HTML. Donc là, vous allez ici, vous tapez HTML Snippets, par exemple. Voilà, il est ici. Bon, moi, je l'ai déjà. Mais sinon, là, on doit vous inciter à le télécharger. Donc éventuellement, téléchargez-le. On ne va pas beaucoup utiliser les plugins dans ce projet. Mais bon, ça vous fera déjà une petite intro, et puis ça vous permettra d'avoir des aides pour taper. Donc voilà, ceci étant dit, il y a autre chose aussi qui m'a un petit peu surpris, c'est que là, moi je suis en Space 2. Là, vous voyez, si je clique, un dans Space, et en fait, on peut mettre Space 4. Et en mettant Space 4, regardez ce que ça va faire, eh bien, ça met, vous, vous avez sûrement ça, vous avez un écart de 4 espaces quand vous faites une tabulation. C'est vrai que ça se faisait pas mal. Moi j'ai pris l'habitude de faire du Space 2 à force de travailler avec des frameworks, etc. Mais pour cet exercice, on va se mettre en Space 4, comme ça ça va peut-être moins vous perturber. Donc voilà, c'est les petites choses avant de se mettre à coder le body. Donc nous avons une head, comme un corps en fait, comme la morphologie d'un être humain. On a d'abord la tête. mais ça la tête n'apparaît pas visuellement ici sauf là un petit peu et ensuite on a le body, et là c'est dans le body de notre HTML, donc dans le corps qu'il y a absolument tout ce qui est visuel tout le squelette de notre application qui va apparaître donc là j'ai écrit body, et bien on va séparer notre body en plusieurs sections, et regardez si j'écris section, et que je fais entrer hop, il m'apporte immédiatement les chevrons le chevron ouvrant, le chevron fermant, et il m'apporte la fermante aussi. Donc ça, c'est plutôt cool. Comme ça, on n'a pas toujours tout à se taper. Et donc, les sections, on va dire que c'est pour matérialiser des grosses parties. Et ensuite, pour matérialiser des plus petites parties dans des sections, en général, ce qu'on fait, c'est qu'on met des divs. Alors ça, ça n'a pas une importance vitale. On peut, par exemple, mettre div partout. Ce qui est bien, c'est que si, un jour, vous donnez votre code à quelqu'un, ou si quelqu'un doit reprendre un code, plus vous aurez des balises, qui sont explicites, et plus ce sera du code qui sera facile à comprendre. Donc dites-vous bien qu'il n'y a pas une importance capitale à mettre des sections, et ensuite à mettre des divs, etc. Mais en termes de structure de page, c'est conseillé. Et donc, qu'est-ce qu'on pourrait se mettre dans notre div ? Eh bien, on pourrait se mettre, comme je vous l'ai montré tout à l'heure, un H1. Donc c'est pour un header 1, c'est H1. Donc c'est un titre. On n'a qu'à dire titre, hop, H1. Et tiens, ici par exemple... Je vais vous montrer tous les titres qu'on peut faire. Il y a 6 types de titres différents que l'on peut faire. Regardez, il y a un petit tips. Je clique là, ici, je me place sur le 1, et je reste appuyé sur Alt, et je reste appuyé sur Alt, vous voyez, là, j'ai sélectionné les 3 à la fois. Regardez, là, je mets H2. Comme ça, on va voir ce qu'est un H2. Ensuite, non, ça ne marche pas si je défile avec la flèche du bas. Donc là, je sélectionne Alt. là on va mettre un H3, là je sélectionne avec Alt on va mettre un H4 et ainsi de suite jusqu'au h6 puisqu'il y a six types de titres différents en html donc on les distingue en faisant h1 c'est le plus grand jusqu'à h6 qui est le plus petit titre c'est quasiment un titre c'est comme ça donc là vous voyez un petit peu à quoi ça correspond d'ailleurs je suis en train de me dire que le h2 et le h1 se ressemblent beaucoup Alors ce qu'il faut savoir c'est que le H1 en théorie il n'en faut qu'un par page, en tout cas c'est ce que recommande Google, d'accord ? Et ensuite les H2, vous mettez des titres un petit peu comme bon vous semble, selon la taille que vous voulez, enfin pas comme bon vous semble mais par exemple les gros titres, s'il y en a 4 ou 5 dans une page, vous en mettez un H2, ensuite vous mettez du H3, etc. Après dans tous les cas c'est des choses que vous pouvez retoucher plus tard au niveau du style, même si là on va faire que de l'HTML. voilà faut juste savoir qu'il existe six titres différents et que le h1 théoriquement chaque page doit avoir un seul achat d'accord donc nous notre h1 on va on va s'en servir je vais m'en servir pour vous montrer un petit peu tout ce qui est possible de fait avec du texte en html donc on va dire que ça ce sera la partie texte voilà on va dire on va dire texte titre h1 c'est un peu bizarre avec les comme ça dans la tirer et On va enlever le tiret là, voilà. Alors, qu'est-ce qu'on peut faire avec les textes en HTML ? En général, quand on a du texte, ça se trouve dans des P, P pour paragraphe. Vous voyez, là, je fais juste P, entrer, il sait de quoi je veux parler, il sait que je veux des P. Donc, tiens, texte basique, j'enregistre, regardez, on a un P, ça saute tout seul à la ligne, il vient se mettre là, et il fait un texte basique. D'accord ? Vous voyez un petit peu l'indentation qu'on a à chaque fois. Il faut qu'à chaque fois que, par exemple, dans section, là, on a mis tout ça, donc dès que section, il englobe quelque chose, ce quelque chose-là, il fait un coup de tabulation plus loin. Ensuite, dans div, lui, il a deux enfants, là, et bien, qu'est-ce qu'on fait ? On fait un coup de tabulation plus loin. Donc vous voyez comment on indente un peu en escalier, c'est comme ça que ça marche. Après, je vais vous montrer des techniques pour indenter automatiquement, mais il faut quand même que vous compreniez les principes d'avoir un code propre. Donc, pour revenir au texte, on a un texte basique là comme ça et si jamais on avait voulu le mettre en italique et bien on aurait fait m on voit juste ap m entrée et on va mettre voici un texte en italique tiens on va quand même être un point sur le faire propre j'enregistre up on regarde et là vous voyez on a un texte en italique ensuite si éventuellement on avait voulu mettre un texte en gras on aurait mis strong et un texte en gras vous voyez comment on peut agir déjà sur le texte juste avec l'html sans avoir besoin de passer plus tard par le style d'accord là je le style on n'en tient pas compte là c'est que de l'html voilà et puis qu'est ce qu'on peut avoir d'autres aussi on peut avoir des spans alors ça les spans je reviendrai un petit peu plus tard j'ai déjà vous montrer ce que c'est c'est on va écrire tiens l'élément en span ne revient pas à la ligne et pourquoi j'écris ça comme ça parce que regarder les années on ferme comme ça, j'enregistre, et voilà, le span, il continue comme ça. Alors que regardez, si après le P, tiens, on avait simplement voulu se mettre encore un autre P, on n'a qu'à se mettre du faux texte. Regardez dans VS Code comment on fait pour mettre du faux texte, on tape lorem, et après on met un nombre qu'on veut, ça va correspondre à un nombre de mots de faux texte qu'on veut, donc je vais taper lorem 30. Hop, j'ai fait entrer, et ça me tape 30 mots au hasard en latin, ça s'appelle un lorem ipsum dans le jargon. et ça permet de simuler du texte avant de faire vraiment du contenu d'un site. Regardez, vous voyez que le P, le paragraphe, automatiquement il renvoie à la ligne, alors que le span ne le fait pas, donc ça peut être intéressant dans certains cas. C'est pour ça, je voulais juste vous présenter le span comme ça, et puis après on reviendra un peu dessus. On va réduire un petit peu ce P. Et voilà, là je vous ai déjà montré quasiment tout ce qu'on pouvait faire en HTML avec du texte. C'est aussi simple que ça. C'est assez basique, bien sûr. Après, pour changer les polices, etc., bien sûr, ça c'est du CSS. C'est pas le sujet de la vidéo. Mais, en tout cas, là, vous avez déjà une idée de ce qu'on peut faire avec le texte. Maintenant, nouvelle partie, on va regarder, tiens, qu'est-ce qu'on peut faire en H2 ? On va se faire des photos. Alors, les photos, comment ça marche ? Eh bien, allons-y. On va chercher déjà une photo. Attendez, je vais revenir ici. Est-ce que j'ai des images ? Là, j'ai le fond d'écran. D'ailleurs, ça ne s'est pas sorti. On va mettre ça comme ça. Donc là regardez, si on veut ajouter une photo, vous prenez n'importe quelle photo que vous avez chez vous, ou quoi que ce soit, on fait glisser, et voilà, la photo elle est là, c'est magnifique. Je pense qu'elle est un peu trop volumineuse cette photo, je vais la renommer, on va mettre photo paysage, il faut quand même que le nom de la photo ait un peu de sens, parce qu'après si vous en utilisez beaucoup, il faut que vous sachiez ce qu'est la photo sans avoir besoin de cliquer dessus par exemple. Donc comment est-ce qu'on fait une photo en HTML ? On se met là, on fait img, entrée, Et là, on lui dit qu'on veut photopaysage.jpg. Là, il me la propose en bas. Des fois, il la propose plus tôt. Et qu'est-ce qu'il y a écrit là ? Il y a écrit Alt. Vous voyez, VSCode tout seul, il nous a mis ça, il nous a mis Alt. Pourquoi est-ce qu'il a fait ça ? Eh bien, il a fait ça, notre ami VSCode, parce que si l'image ne s'affiche pas, il faut quand même qu'on ait... quelque chose. Je vais vous montrer. C'est aussi une autre signification, c'est aussi pour les non-voyants. Il faut, si jamais une personne non-voyante surfe, forcément elle ne voit pas la photo, mais il faut qu'elle ait une idée de ce que représente la photo. Donc là on va mettre image paysage par exemple, comme ça il sait que la personne non-voyante saura à quoi ça correspond. Regardez. Donc là j'ai mis image paysage, on enregistre. Ok l'image elle est là, je vous ai dit qu'elle était très très très volumineuse. On va régler ça après. Mais regardez ici par exemple, hop ! on se trompe dans le nom, regardez, vous avez sûrement déjà vu ça sur internet, quand une image n'apparaît pas. Eh bien, on a son alt qui apparaît juste à côté, image paysage, d'accord ? Donc c'est pour ça que ça sert également. Donc je remets le y, et vu qu'elle était un peu trop grosse, regardez, il y a des propriétés dans img, par exemple, on peut mettre la propriété height, comme hauteur en anglais, et on peut lui dire, tiens, tu me fais 200, et ça correspond à 200 pixels. J'enregistre, j'actualise. Et voilà. Qu'est-ce que vous en pensez ? C'est quand même plus petit. Bon, ce ne sera pas magnifique notre site. Je préfère vous le dire de suite, vu que on ne peut pas vraiment agir sur le style. Mais en tout cas, vous voyez qu'on a réussi à ajouter une photo. Voilà. Donc juste avant de terminer cette partie, je vais vous montrer un petit plugin qui va faire qu'on n'aura plus besoin d'actualiser la page. Un petit plugin révolutionnaire qui s'appelle Live Server. Donc là, on va sur les plugins. On va dans Live Server. Moi je l'ai déjà live server, par contre je l'ai mis enable. Je le remets, donc vous vous devez faire télécharger. Vous voyez qu'il a été téléchargé 9 millions de fois. Donc quand vous téléchargez des plugins, peu importe ce que vous téléchargez, regardez combien de fois ça a été téléchargé et combien d'étoiles ça a. C'est très important. Ça aide à déterminer qu'est-ce qui est bien et qu'est-ce qui est moins. Une fois qu'on a notre live server, qu'est-ce qu'on peut faire ? Regardez, si par exemple, là je fais clic droit. et bien là on a open with live server on a également en bas là un petit go live donc soit vous cliquez sur go live soit vous cliquez sur open with live server vous voyez starting et là hop il nous a lancé notre application dans notre petite page et à chaque enregistrement ça va automatiquement mettre notre page à jour donc ça c'est plutôt cool ok testons pour voir si ça marche on n'a qu'à se dire que là au niveau du h3 on va se faire les listes. Alors comment ça marche les listes en HTML ? Eh bien pas très compliqué, je vais vous montrer rapidement. On peut faire soit des ul soit des ol. Alors les ul ça veut dire unorder liste donc tout ce qui est contenu là dedans eh bien ça sera la liste. Donc ul on annonce une liste déjà et ensuite on énumère en disant li. Tiens je vais juste vous mettre ul égal. Unordered list. Unorder, si vous n'êtes pas familier avec l'anglais, order ça veut dire ranger. Donc unorder c'est une liste qui n'est pas classée en tout cas. Et là regardez, je vais vous montrer un petit tips pour multiplier la ligne autant de fois qu'on le veut. On fait majuscule, enfin la flèche de la majuscule, le caps lock, non pas le caps lock justement, la majuscule, alt et flèche du bas, up, up, et vous voyez ça multiplie la ligne. Donc là, on va dire qu'on fait une liste de trois éléments. Regardez, j'enregistre. Et regardez, le Live Server, il a actualisé automatiquement la page. Donc ça, c'est cool. Et vous voyez que là, ça nous fait des petits bullet points, des trucs un peu moches, des gros points noirs. Donc ça, c'est une liste qui n'est pas classée, qui est unorderlist. Pourquoi UL ? D'accord ? U pour unorderlist. Maintenant, si on voulait une liste rangée par numéro, eh bien, ça s'appellerait... order list, donc comment on mettrait ça en HTML ? On dirait OL. comme ceci, ol, et donc dans le li on va dire ol est égal à order de liste. Je fais majuscule, alt, flèche du bas, et voilà, j'enregistre. Et regardez ça, on a là les amis, une liste avec des numéros automatiquement, on aurait pu l'ajouter, vous voyez que les numéros ce n'est pas nous qui les avons mis, et ils se mettent automatiquement. Donc voilà, vous avez compris. Comment marchent les listes en HTML ? On avance bien dans ce cours, vous voyez que ça va assez vite, et vous allez voir que ce qui est vraiment utile en HTML, ça ne prend pas... Il n'y a pas 10 000 choses, ça va très vite, et avec toute cette structure-là que vous avez là, après vous serez capable de faire n'importe quelle structure de page. Dites-vous bien que l'HTML, c'est vraiment le squelette de notre page, c'est vraiment toute cette structure. Quand on annonce des lits, c'est pour des listes, quand on annonce des sections, c'est pour des parties distinctes, etc d'accord voilà donc ensuite qu'est ce qu'on va attaquer on va attaquer les tableaux avant d'attaquer les tableaux en sur moi j'ai vu en revient la vidéo précédente que je n'avais pas mis de heather et de footer tout comme la il ya un aide il faut savoir que dans le body on peut mettre aussi en haut du body ce qui sert de titre ou ce qui sert d'introduction une page ça vient souvent header. Ce qu'on va faire, nous là, c'est qu'on va se le prendre et on va s'enlever ça et on va se le mettre plutôt ici. Hop, attendez, je suis en train de voir que c'était un peu n'importe quoi. Hop, on va mettre header, comme ceci, et la fermante, elle va aller ici, juste avant la section. Donc voilà, ça peut... ça se présente souvent comme ça les pages tout comme il ya un header plus tard il y aura un footer donc tout ça ça se passe dans le body c'est des choses qui se font mais ça se fait pas non plus tout le temps sur toutes les applications etc mais faut quand même que je vous montre voilà on fait et d'ailleurs ensuite des sections up on enregistre et voilà ça se présente un petit peu mieux comme ça ok donc une fois que cela est fait je vous avais dit qu'on allait voir les tableaux alors comment ça marche les tableaux je vous montrerai de façon assez basique comment les faire Après je vous montrerai aussi du contenu pour créer des tableaux automatiquement etc. Alors les tableaux ça se présente par la balise table. Table ça veut dire tableau en anglais. Donc cette balise table on peut lui mettre quoi ? On peut lui mettre éventuellement une légende. Là j'ai un peu trop sélectionné, voilà comme ça. Donc je commente. D'ailleurs je suis en train de voir que mes flèches ne sont plus jaunes. C'est étrange, bon, c'est pas très grave. Donc, on va se mettre éventuellement une légende. Légende, en anglais, c'est caption. Voilà. Et donc, tiens, on va dire, on va faire un tableau sur les populations d'Europe. OK. Et donc, comment se présente le tableau ? Le tableau, il se présente avec une entête. Ça me perturbe de ne plus avoir mes commentaires. Je pense que c'est avec le plugin que j'ai réactivé tout à l'heure. Bon, c'est pas très grave non plus. Je pense que vous, vous avez les commentaires comme ça, vous n'avez pas les flèches jaunes comme j'avais au début, donc tant mieux. Donc, on a là notre entête du tableau. Et donc, comment ça se présente ? Eh bien, notre entête, c'est T pour table et head. Vous voyez qu'on voit souvent le terme head, header. Donc, T, head, c'est pour toute l'entête du tableau. Et donc, ensuite, on va dire TR. Et à l'intérieur, on va énumérer les TH. Donc, on va dire PI. on va lui dire th population et regardez ce que ça fait un peu j'enregistre voilà donc notre tableau il est comme sa population d'europe pays population pour l'instant il n'est pas il est pas fameux il n'est pas très joli parce que là si on veut dans table on peut lui mettre déjà une bordure on peut dire border tu vas mettre un de border 1 voilà ça se représente Il se représente comme ça notre tableau. Bon, il n'est pas extraordinaire. On peut éventuellement mettre une width, c'est-à-dire une largeur. Et on peut lui dire, tu vas prendre 50% de l'espace qu'on te donne. Voilà. Donc là, il prend 50% de la page, quelle que soit sa taille. Vous voyez, là, il s'agrandit, il s'agrandit. Il ne fera toujours que 50% de la taille de la page. Donc ça, c'est des petites choses qu'on peut mettre dans le tableau. Voilà, des petites propriétés qu'on peut dire à table. Donc là, on lui a mis une en tête avec Thead. on fait dtr, ensuite dth pour énoncer et bien ensuite le corps, comment ça va s'appeler ? ça va s'appeler type body tout simplement donc on va l'appeler corps du tableau comme ceci et donc c'est T-Body et donc là les T-Body on va mettre DTR donc on va dire TD on va se mettre France j'ai mis trois pays seulement je vous rassure et donc TD 66 millions j'enregistre et vous voyez ça rajoute la ligne du tableau magnifiquement à la suite donc voilà c'est aussi simple que ça un tableau après il y a moyen d'en faire des plus complexes mais comme je vous l'ai dit tout à l'heure je vous montrerai après Sauf que moi je suis pas ultra fan de faire des tableaux en HTML, mais je sais que ça se fait pas mal. Donc hop, hop, on va dire que j'avais mis quoi ? J'avais mis Allemagne 82, bon j'ai pas vérifié les chiffres, j'ai utilisé ma mémoire, je suis pas sûr qu'il soit 82 millions en Allemagne, mais pas loin à mon avis. Et Espagne j'ai mis 45, bon ça peut être dans ces eaux là, on va regarder. 47 l'Espagne, ils ont fait des bébés depuis, tout simplement c'est pour ça. Donc très bien. Et voilà les amis, nous avons créé un tableau en HTML. Bon, comme je vous l'ai dit, je ne suis pas extrêmement fan, mais en tout cas, vous voyez la structure. On a une légende éventuellement, ce n'est pas obligatoire, vous pouvez faire ce que vous voulez. On a surtout le Thead pour avoir les entêtes, et le Tbody en suivant. Voilà comment ça marche. Ensuite, on va passer à quoi ? On va passer... au H5, et je vais vous montrer comment on fait des liens. Comment est-ce qu'on fait un lien cliquable vers un autre site ? Regardez. Par exemple, pour faire un lien, on fait une encore, encre en français. Encore, ça s'écrit comme ça, vous voyez ? Ça se prononce encore. Eh bien, la encre, on va juste faire A, hop, et le A, c'est pour encre, en ou encore. Et donc, ce A, il demande un href, donc... il demande à ce qu'on mette un lien à l'intérieur. Donc vous pouvez mettre google.com ou peu importe, mettez ce que vous voulez. Moi, je vais vous mettre le lien d'une HTML cheat sheet. On va voir après ce que c'est, mais je vous le mets d'avance. D'accord ? Donc là, je vous mets ce lien-là, ça s'appelle HTML cheat sheet. Voilà. Et là, je vais écrire HTML cheat sheet. Voilà, comme ceci. Donc c'est une feuille, cheat c'est feuille et cheat c'est tricher. Donc c'est une feuille pour tricher, on va dire. C'est une feuille qui regroupe un peu tout ce qui est cheat en langage informatique. C'est des feuilles qui regroupent un peu tous les trucs qu'on peut faire dans des langages, etc. Celle-ci résume un peu tout ce qu'on peut faire en HTML. On l'ouvrira après. Enfin, on va l'ouvrir maintenant. Regardez, j'enregistre. Et là, si je clique, hop, voilà, on part sur l'HTML cheat. Mais moi, je ne voulais pas quitter ma page. Et donc, si on ne veut pas quitter la page, regardez ce qu'il faut faire. Il faut faire target. égale underscore blanc en mettant ça target de ce corps blanc voilà on ouvre sur une page d'à côté notre cours est toujours là et nous on ouvre la cheat sur une page d'à côté alors on va aller voir ce que c'est un peu la cheat voilà alors quoi ça correspond donc au début c'est pas très intéressant là vous voyez comme vous pouvez le voir bon et il ya des pubs aussi donc ça c'est pas très intéressant mais il ya quand même des trucs intéressants il nous montre comment faire un tableau il nous montre tous les hachins les divisions, comment intégrer une image, vous voyez, comment faire un lien. Donc en gros, il y a absolument tout ce qu'on peut faire avec HTML. Mais tout n'est pas utilisé en fait. Vous voyez, la definition list, ça je n'ai jamais vu de ma vie. Jamais j'ai vu un code où j'ai repris un code qui avait utilisé ça. Donc tout n'est pas à utiliser. Ce qui est vraiment principalement et uniquement quasiment à utiliser, c'est ce que je vous montre dans ce cours. Mais toujours est-il que la cheat sheet, elle n'est quand même pas inutile. Puisqu'il y a beaucoup de choses, ça montre aussi les balises méta qu'on met au début de notre page HTML. Dans le head, il y a énormément de méta qu'on peut mettre. Je ne vais pas m'attarder dessus. Ce qui est intéressant, c'est que là, par exemple, il y a un truc pour créer des tableaux. On peut faire trois colonnes. Row, c'est trois lignes. On peut mettre plus. La border, on n'a qu'à dire qu'on veut une border de trois. Et là, on fait Generate Table. Et là, vous voyez, ça nous a généré automatiquement un tableau. Vous n'avez plus qu'à écrire vos données à l'intérieur. et vous récupérez le tableau. Donc, en fait, pour créer des tableaux, si vous voulez vraiment les faire en pure HTML, vous avez des moyens de les générer automatiquement. Voilà, c'est juste pour vous montrer. On peut même créer des listes, je n'avais pas vu ça. Voyez, on fait Order List. Ah oui, on peut demander si on veut des circles, des squares. Hop, et on order. Et voilà, et ça a généré une liste. OK, bon, voilà, ça, c'est des générateurs, je vous le dis, ça, vous n'en servez pas, de créer des listes comme ça, vous le faites à la main sans souci. Enfin bon. Voilà, vous avez vu ce site, et il y a aussi un deuxième site que je voulais vous montrer, donc on va se le mettre à la suite de notre petit cours. On va se le mettre à la suite. Donc là je viens de créer un A. Et regardez là si je refais un A et qu'on va dire href, alors attendez je vais récupérer le... Hop là, ça c'est un lien pour avoir toutes les icônes natives à HTML, vous avez juste à entrer un code et ça sera compris par votre navigateur et pareil on va dire target blanc et ça ça va s'appeler les icônes en HTML. J'ai oublié le T, HTML. Ok j'enregistre. Allons voir à quoi ça ressemble. On pourrait peut-être s'agrandir un peu la page, effectivement. Et donc là, vous voyez, déjà, il y a un petit problème, c'est que les deux liens se mettent côte à côte. Pourquoi ? Parce qu'un petit peu comme les spans, la balise ancre, la balise encore, la A, c'est une balise qui ne revient pas à la ligne. Donc, elle n'est pas ce qu'on appelle un inline block. Donc là, c'est un peu ça, c'est la notion de CSS. Donc, si on veut les séparer, les deux A, eh bien, on fait un break, un BR, si vous vous souvenez au début de la vidéo. c'est ce que je vous avais montré pour séparer les petites choses qu'on avait écrites au tout début de la vidéo et donc là vous voyez qu'en faisant un br j'enregistre et voilà elles sont l'une en dessous de l'autre donc les icônes en html allons voir là mes amis nous avons des icônes toutes ces icônes là elles sont utilisables juste en reprenant le html code qui est ce code là quoi html code html code vous reprenez ça et bien les amis ça va nous afficher donc sélectionnons une icône sympathique tiens ce doit là qui m'a l'air très intéressant je le prends contrôle c on va là dans notre code qui en a qu'à se mettre là au début et donc là ce qu'on va utiliser pour le mettre entre entre structure html entre balises on va lui mettre une balise span ce que je les balises pas ne reviennent pas la ligne est souvent les icônes on s'y prend comme ça on va On peut le mettre comme ça. Sinon, il y a aussi le I qui marche, mais c'est plus utilisé pour d'autres choses. On peut utiliser le I comme ça pour icône, mais on peut utiliser le span, ça se fait tout aussi bien. Donc là, moi, je voulais vous montrer le span. Donc voilà, j'enregistre. Et en allant dans le cours, regardez là, notre doigt, il est ici. Bon, c'est pas très gros. Vous voyez que si je grossis, on le voit. Par exemple, si on l'avait mis pour le... On a qu'à se le mettre tout en haut de notre page. Parce que là, le H5, c'est vrai qu'en fait, le H5, c'est un titre qui est assez petit. Si par exemple, on va se le mettre là, là, on va bien voir notre icône. Vous voyez ? Voilà, ça, c'est des icônes natives. Donc, vous avez juste à reprendre le code. Je vous ai mis le lien là où je vous le montre. Et puis, juste en dessous de la vidéo, vous avez le lien du projet fini. Je vous montrerai à la toute fin de la vidéo comment l'exploiter éventuellement, si vous n'êtes pas habitué à GitHub. Mais voilà, vous pouvez avec ce lien déjà avoir... toute une série d'icônes qui embellissent plus ou moins le site. Donc ça, c'est ce que je voulais vous montrer. Et enfin, pour terminer, là, il y a un titre H6. Vous voyez qu'il est écrit en tout petit, mais je ne suis pas en 100%. Là, si, je suis en 100%. Donc là, il y a un titre H6. Et là, je vais vous montrer comment intégrer une vidéo, pour finir cette partie-là. Donc, on va se mettre comme ça. On va dire une vidéo. Comment est-ce qu'on intègre une vidéo ? en html et bien les amis regardez on écrit dans d'abord on laisse récupérer une vidéo ce serait un bon début alors hop là on va sur pixabay c'est un héberge enfin c'est une banque d'image gratuite et de vidéos gratuites hop vidéo est ce qu'on a des vidéos à propos de code non ça c'est vidéo sponsorisé voilà ça c'est des vidéos gratuites non c'est extrêmement moche on va on va plutôt se chercher je sais pas pourquoi j'ai voulu partir sur du code sachant qu'il n'y en a pas beaucoup on va taper tiens sunrise une vidéo de soleil qui se lève à mon avis ce sera autrement plus sympa j'étais pas en vidéo c'est en photo donc là vous avez image et vous avez up vidéo là comme ça voilà on va y arriver donc on tape sunrise et là c'est des vidéos j'en suis quasiment sûr Qu'est-ce qu'on peut répondre ? Bon, on ne va pas non plus chercher pendant 50 ans. On fait un free download. Hop, et voilà, on a une vidéo. Elle est là. Donc là, qu'est-ce que je fais ? Je la prends, je la fais glisser dans notre dossier. Et voilà, elle est là. On va juste la renommer vidéo. De toute façon, il n'y en a qu'une. On ne risque pas de la confondre. Donc, comment est-ce qu'on intègre une vidéo ? Eh bien, regardez, on fait vidéo. Entrez dans la balise vidéo, on lui dit... Je veux que tu me lises vidéo.mp4. Et ensuite, on peut lui donner des propriétés. On peut lui dire autoplay, c'est-à-dire que je veux que tu joues automatiquement. Je veux que quand tu es fini, tu te relances, donc tu fais un loop, tu joues en permanence, et si jamais tu as du son, ça surtout, pensez à le faire, c'est muted, parce que les gens détestent quand vous arrivez sur une page et qu'il y a du son qui apparaît, c'est vraiment très très chiant. Donc voilà, on a mis ces informations en enregistre, et regardons... Ah oui d'accord, elle est très très grosse la vidéo, voilà, très sympa, c'est le bâtiment qui fume en plus, très bien. Donc, vu qu'elle est un peu grosse... Et bien, un petit peu comme pour les images, j'ai des propriétés 8. Donc on va lui dire 8, je veux que tu fasses 150 pixels de hauteur. Et là, les amis, voilà, nous avons notre vidéo. On voit quand même que les nuages bougent, donc ce n'est pas une photo. Et nous avons intégré une vidéo à notre projet. Et donc voilà, on a déjà commencé à coder un certain nombre de choses en HTML. Il ne nous reste plus grand-chose, je vous rassure. Il nous reste quand même le truc qui, à mes yeux, est le plus important. C'est... les formulaires. Alors, avant de vous montrer les formulaires, je vais vous montrer d'abord un petit truc que je vous avais promis, c'est pour ranger, pour indenter automatiquement un peu toutes ces choses-là de façon propre. Et donc, on va aller prendre Prettier. Prettier, voilà, c'est un code formateur, donc il vous formate le code de façon très jolie. Donc voilà, je vous invite à prendre Prettier. et une fois que vous avez prétire les amis et bien sachez je crois je sais pas s'il faut relancer ou pas vs code je crois pas mais ça marche pas essayer de relancer vs code une fois on va sur la molette on va dans settings et là on a un truc qui s'appelle format on save et ça va formater quand on sauvegarde format on save up on clique dessus et là en toute logique en fait là si on fait clic droit et qu'on fait format document with vous avez format document with là vous pouvez choisir et vous avez prettier code formateur donc vous pouvez éventuellement le choisir donc là je les choisis et il m'a mis en deux mises en attendait on va revenir en arrière du coup on va pas prendre prétire code formateur il m'a pas pris c'est bizarre j'ai l'impression qu'il est mis en deux on est bien sûr 4 à une choc configuré en deux peut-être c'est pour ça qu'il m'est automatique bon moi je suis en deux donc dites vous que vous si vous êtes en quatre ans ça va le faire et donc du coup si on fait format document with je vais prendre prête hier et donc ça veut dire quoi bon là je repasse en deux pour la fin du projet parce que sinon bon ça me savent où que j'aurais faire trop de changements mais ce qui est intéressant c'est que la regarder si ça s'était mal placé comme ça regardez là je fais contrôle s up et vous voyez il a automatiquement replacé comme il fallait donc à chaque fois que vous avez enregistré ça va Vous indentez correctement votre code, c'est quand même une aide qui est plutôt très utile. Bien, ceci étant dit, on va sauter une petite ligne et on va se mettre une section. Alors je vous rassure, en vrai, on ne met pas des BR partout comme ça, en vrai, après on organise avec le CSS, mais là c'est juste que vu qu'on fait 0 CSS, on est obligé de faire des petits breaks, des sauts de ligne automatiques, c'est juste pour ça. Et donc là on va faire 1H2, puisqu'il n'y a qu'un seul H1 par page, et on va l'appeler formulaire. on va se remettre un peu sur le côté voilà comme ceci ok donc là on a notre formulaire en bas de page qui va comporter un certain nombre de choses donc comment ça marche les formulaires en html et bien on dit forme entrée donc il ya une action on va se mettre une action juste comme ça par je rentrerai pas dans les détails on va dire par exemple que là le fort le fort quand on le soumet et bien ça va nous aller chercher un fichier qui s'appelle action point php je rentrerai pas plus dans les détails Et on va dire que c'est une méthode poste, là non plus je ne vais pas expliquer, parce que ça dépasse le cadre du cours. Donc, on a notre formulaire, et tout d'abord, qu'est-ce qu'on veut faire ? On veut mettre un input. Alors c'est quoi un input ? Regardez, tout simplement, j'ai fait entrer, regardez ce que c'est un input. Un input, c'est un petit encadré dans lequel on peut écrire tout ce qu'on veut, et c'est comme ça qu'on passe les informations dans un formulaire. Donc là, notre input, il est de type, de base, naturellement, il est de type... texte d'ailleurs vs code le met comme ça de base donc nous on va on va se laisser comme ça mais on peut écrire à l'intérieur on va faire ce qu'on appelle un placeholder et à l'intérieur on peut mettre entrer votre nom j'enregistre et regardez on a vous avez enfin vous l'avez sûrement déjà vu sur plein de sites voilà ce qu'on appelle un placeholder c'est à dire un texte qui va disparaître quand je vais écrire mon nom quoi d'accord donc voilà on peut aussi faire un label le label, donc on va lier un label à l'input, et on va se l'écrire devant, on va dire label for, donc on va dire que c'est pour name, et donc là il faut que l'input on lui met un idée name et donc en faisant ça on vient de connecter un label et un input regardez là on écrit non deux points j'enregistre et regardez ça fait non bon même pas besoin de mettre deux points ça fait pas joli sinon voilà là on a le nom en tout cas c'est pas très joli j'ai l'impression bon voilà on a le nom et regarder si je clique sur non vu que c'est un label qui est connecté up ça déclenche l'input Et regardez, si là on n'avait pas mis le label for name, là je clique sur non, et bien ça ne fait rien. Vous voyez ? Donc il faut faire un label for name, lui il a une idée qui s'appelle name pour le nom, et voilà, ça veut dire qu'on a connecté le label à son input. Voilà, et là on peut commencer, on peut écrire ce qu'on veut dans notre formulaire. Donc ça c'est les inputs dans lesquels on peut écrire. On peut également dans les inputs, éventuellement, on peut... je vais commenter ça en mettre formulaire, c'est juste pour faire un peu plus propre. Donc, on peut également, au niveau des inputs, faire, pourquoi pas, un nombre. Donc, on va se mettre un label, label for age, donc on va dire age, et il va y avoir un input, d'ailleurs, ça m'embête un peu, de décrire comme ça, c'est mieux de mettre label là, input comme ça, et ensuite là, on break, ici, voilà. Là, ça fera plus propre. de toute façon si j'enregistre, on lui met comme ça donc là, j'avais dit qu'on allait mettre un input avec un id parce que là, vous voyez que là, vu qu'il y a fort age, il faut lui dire l'id c'est age, comme ça c'est comme ça qu'il peut agir sur son camarade, et donc on va lui mettre un type number, au lieu d'un type texte et regardez ce que ça fait un input de type number et bien, ça fait tout simplement qu'on peut écrire, et vous voyez là il y a les flèches en haut, flèches du bas, on peut écrire des nombres et que des nombres. Là, j'essaie de taper du texte, j'essaie de taper des lettres, ça ne marche pas. Parce qu'on attend dans cet input que des nombres. Alors, qu'est-ce qu'on peut également dire à cet input ? On peut lui dire que par exemple, au minimum, ton chiffre minimum que tu vas accueillir, c'est 0, tu ne pourras jamais aller en dessous de 0. Au maximum, tu ne pourras jamais aller au-dessus de 99. On peut lui dire des choses comme ça. On peut lui dire aussi le step, tu vas de combien en combien. Regardez, si je lui dis 2, là, l'âge... il va de 2 en 2. Nous, on va se mettre step de 1 en 1. Vous voyez tout ce qu'on peut faire avec un input de type nombre. Mais ce n'est pas tout. On peut également lui dire une valeur de base. On lui met value égale, par exemple, 18. La majorité, en France en tout cas. Et regardez, on démarre à 18. Ça, c'est une partie des choses qu'on peut éventuellement mettre dans un input de type nombre. Donc voilà, vous avez le type number. Vous avez l'exemple du type texte, l'exemple du type number. Donc voilà, ça c'est des choses qu'on peut demander à notre utilisateur, sans souci. Donc ensuite, il y a d'autres choses. Il y a les inputs de type select. Alors on va faire input select. À quoi ça correspond les inputs de type select ? Eh bien, vous allez voir, on va se mettre un label for gender, donc pour le genre en anglais. Donc genre. Et donc là, on va mettre select. en disant bien l'idée gender. Comme ça, on connecte le label avec le select, et à l'intérieur du select, on va mettre deux choix. Qu'est-ce qu'on peut mettre comme choix ? Au niveau du genre, on peut mettre homme, ou alors on peut être femme. Avec Alt, je sélectionne les deux, et j'écris femme. Et là, regardez. Notre select, c'est un déroulant. Vous voyez, il y a homme, femme. Je suis en train de voir que femme, il est écrit en minuscule. Comme ça. On peut faire homme ou femme. Sauf qu'on peut également lui dire une valeur par défaut. On n'a qu'à dire que par défaut, c'est femme. On va dire selected. En mettant selected, de base, il est sur femme. On peut éventuellement dire que c'est un homme. Ça, c'est le select. Le select, c'est des menus déroulants. Je pense que vous avez déjà vu. Oui, vous l'avez forcément vu déjà sur Internet. Ok, on va se mettre un break. Ensuite, il y a les inputs de type radio. C'est quoi les radios ? C'est des points sur lesquels on peut cliquer. Pareil, c'est des choses que vous avez déjà vues en surfant sur Internet. On va tout se mettre dans une div, ce sera plus pratique. Et on va dire, tu as un input de type radio. Ça, on mettra après. On va juste dire que ton idée c'est human. et voilà on va s'en tenir à ça on va mettre un label donc le label c'est fort human et on va dire humain donc il faut toujours connecter une idée avec le label donc ensuite je récupère sa contrôle c contre levé on va dire la dogue donc chien en français donc on écrit toujours en anglais tout ce qui est du code à l'intérieur là comme ça Par contre, si on s'adresse à un public francophone, là, on peut éventuellement écrire à l'intérieur les choses en français. Enfin, on écrit les choses visuelles qui terminent sur l'écran en français. En revanche, tout ce qui concerne du code et qui n'est vu que par les codeurs, c'est censé être de l'anglais. Et donc là, on va dire cat, cat, hop, et chat. Et donc là, regardez ce que ça fait. Les radios, vous voyez, il y a humain, chien, chat. Et on peut cliquer. Alors là on peut cliquer sur tous, c'est pas vraiment le comportement qu'on veut. Et en plus ils sont pas liés les uns aux autres, parce que normalement dès qu'on clique sur un, ça enlève aux autres. On ne peut avoir qu'un choix quand on fait des radios. Et là c'est pas le cas, pourquoi ? Parce qu'on les a pas reliés tous ensemble les trois. On a dit que c'était des inputs radio, mais on leur a pas dit quel name ils avaient. Donc regardez, avec la touche Alt je sélectionne les trois, on fait Name, et on va dire... le nom c'est type chien, chat, humain, c'est un type on va dire, ou espèce je sais pas comment on pourrait dire, non bon on va laisser type, type, voilà et donc là regardez, si je sélectionne chien hop, je sélectionne chat, vous voyez que ça désélectionne l'autre on ne peut en choisir qu'un seul sur le choix qu'on a, d'accord ? donc ça aussi c'est des choses que vous avez sûrement déjà vu donc voilà, c'est très bien, par contre, de base il y en a il n'y en a pas qui est sélectionné donc si on veut qu'il y en ait un qui soit sélectionné de base, on va dire par exemple chien, si l'utilisateur est un chien, on va lui dire checked. Il y a un petit problème là, hop, avec le... voilà. Il y a un truc qui a disparu, je me disais bien que j'avais fait... voilà, j'ai tout sélectionné. Et donc là, on va dire checked. Hop, et voilà, de base on est sur chien. Hop, je clique sur chat. Hop, je clique sur humain. Donc voilà, c'est checked, on le met où on veut pour qu'il y ait un truc sélectionné de base. Tout comme là, on avait mis selected, là pour mettre directement sur femme, d'accord ? Donc ça c'est plein de petites choses. Vous allez voir c'est bientôt fini, après une fois que vous connaissez tout ça, enfin ça c'est une chose que même moi je ne connais pas par cœur, souvent quand je dois faire un select ou quoi, je regarde rapidement la doc, c'est assez rapide. Par exemple, tiens, si on regarde, on peut se rendre le select, on va dire select html dans Google, Et regardez, premier lien qu'on trouve, moi c'est comme ça que je fais, et là il vous explique comment faire un select, tout simplement. Il n'y a pas plus simple que ça, il n'y a pas besoin de tout connaître par cœur non plus. Enfin moi je sais quoi, pour faire la plupart des choses, des fois dans un formulaire, même une checkbox ou quoi, ça m'arrive de retourner chercher les informations. Donc voilà pour les radios. Donc ensuite il y a quoi qu'on peut se mettre dans des formulaires ? On peut se mettre... éventuellement une zone de texte. Une zone de texte, c'est une textarea. Alors la textarea, elle n'a pas nécessairement un name, ça je vais l'enlever. Ni un ID d'ailleurs. Par contre, elle a une taille, donc on peut dire col, c'est la largeur qu'elle a, et rose, c'est la hauteur qu'elle a. D'accord, regardez, j'enregistre. Vous allez voir ce que c'est immédiatement, voilà, c'est ça une textarea. Et vous voyez que là, même là, il y a un bouton pour éventuellement la trifouiller dans tous les sens. Bon ça, en général, on l'enlève en CSS parce que... sinon l'utilisateur fait n'importe quoi voilà jamais faire confiance à l'utilisateur donc voilà et éventuellement dans la texte arrière on peut y mettre un placeholder donc on peut lui mettre la taille qu'on veut on peut mettre entrer votre votre demande ici voilà et voilà ça ça marche comme ça tout simplement ok donc ensuite on va se mettre un break et pour finir on a des checkbox donc on va faire une poutre checkbox c'est quoi une checkbox c'est juste une case une case qu'on coche tout simplement donc selon les navigateurs selon si c'est un mac ou si c'est un pc aussi elles sont elles ont un design un peu différent ces checkbox donc on va dire input de type checkbox voilà on peut même le fermer comme ça tac regardez et la voyez ça fait une petite checkbox voilà c'est comme ça bon on peut enrouler un label autour de la checkbox. Regardez. Si on mettait un label... Même pas besoin de dire label fort, puisque le label, en fait, il va enrouler... On peut le faire, ça, pour les checkbox. C'est-à-dire que là, on enroule tout autour, comme ceci. Et là, on dit, par exemple, accepter les conditions générales de vente, les CGV ou des choses comme ça. Et là, regardez, en cliquant sur le label, hop, on clique sur la checkbox, vu que le label englobe la checkbox. Donc ça, c'est quelque chose qu'on peut faire. Donc vous voyez, ça, c'est pour cocher. Là, on peut éventuellement cocher plein de trucs, tout simplement. Regardez, si on avait... Si on en avait mis plein, ce n'est pas comme les radios où il n'y a qu'un seul choix possible. Là, on peut, hop, cocher lui, cocher lui, cocher lui, et cocher lui, vous voyez ? Donc voilà, on a fait le tour du formulaire. Qu'est-ce qui manque ? Une fois qu'on a un formulaire comme ça, les amis, il manque tout de même un bouton pour valider. Parce que sinon, c'est un peu bête, on ne peut pas l'envoyer ce formulaire. Et donc, tout en bas du formulaire, en général, c'est là qu'on se met. On met un input de type Summit. Je suis quand même conscient qu'il y a énormément d'informations, que c'est beaucoup, beaucoup de choses. Mais c'est en pratiquant après qu'on arrive à être à l'aise avec tout ça. et donc pour pour valider on a une poutre type ce mythe value est bien ce mythe on va pas mettre ce mythe on va être validé voilà en fait c'est c'est comme ça on écrit la value pour dire ce qu'on veut d'un autre bouton regardez vous allez voir un input de type ce mythe en fait ça fait un bouton voilà il est comme ça on peut se mettre un break tac comme ça voilà il est là et là on a validé et donc en fait quand on veut quand on clique quand on clique sur l'input de type submit, les amis, et bien on valide tout ce qui est contenu dans les balises formes. D'accord ? Tout ce qui est là-dedans, toutes les informations qu'on a rentrées, après on peut se récupérer. Bon, ça dépasse le cadre du cours, je ne vais pas vous expliquer comment, mais en fait on va créer une action vers éventuellement une page PHP, une page Python, peu importe. D'accord ? Et donc là, regardez, je valide, paf ! Et là... on part, bon bien sûr il ne connait pas la page je lui dis action.php qui est là donc ça il ne connait pas mais voilà, vous avez compris le principe ok, et bien les amis on a quasiment fini deux petits bonus et après on a fini ce tour d'horizon de tout ce qu'on peut faire, tout ce qui est en fait utile en HTML, je ne pense pas avoir oublié grand chose, si jamais j'ai oublié vraiment un truc évident, mettez le moi en commentaire, ça m'intéresse mais je ne pense pas donc on va dire mail et envoi de fichiers. On se met comme ça, et on commente. De la même façon qu'on a fait un header dans le body, tout en bas, il faut qu'on ait un header, on a le body, et en bas on a un footer. C'est le bas du document, juste avant la fermante du body. On se met un footer comme ceci. Donc là, Pour envoyer un mail, regardez comment on fait. On fait une encre, un encore avec un href. On dit mailto. Et là, on met l'adresse à laquelle on peut éventuellement vous contacter. Je vais mettre fs-gmail.com. Ce n'est pas une vraie adresse, mais c'est juste pour que vous compreniez le principe. Et on met écrivez-moi. Et regardez, j'enregistre. Donc là, on a écrivez-moi. Et si je clique dessus, ça m'a ouvert de l'autre côté ma page Hotmail. enfin ma boîte aux lettres, et ça met l'adresse du destinataire, et nous on peut directement lui écrire. Voilà, tout simplement c'est comme ça que ça marche. Ce truc-là, Mailto, ça ouvre automatiquement les choses. Donc à savoir aussi, c'est pas ultra utilisé, mais ça peut rendre service sur un site, si vous voulez pas vous embêter à faire un formulaire entier et tout, vous dites juste écrivez-moi, vous donnez votre adresse, et puis après l'utilisateur peut vous contacter. Ok ? Et donc après un A, il faut forcément faire un break. et qu'est ce que je voulais vous montrer drôle je voulais vous montrer comment on télécharge comment on peut envoyer enfin faire télécharger un fichier à votre utilisateur donc regardez là tu vas se créer un notice par exemple une notice point texte voilà on met ceci est une notice ok et là on peut donc proposer à notre utilisateur de la télécharger donc on fait un à on lui on met dans le a notice.txt et on écrit download. On peut même mettre le nom du fichier, on met le nom du fichier, comme ça, et télécharger la notice. Regardez. Donc en faisant ça, en fait, il faut être en HTTPS pour pouvoir la télécharger. Là, on n'y est pas, en fait. On travaille en local, on n'est pas en connexion sécurisée, puisqu'on travaille chez nous, quoi. Donc du coup, regardez, si je fais ça, Ah, mais si, ça a marché. Ah, ben, d'accord. Quand je m'étais entraîné, ça n'avait pas marché. OK, très content. Donc là, vous voyez, ça a téléchargé. Ça a mis nom du fichier, point texte. Hop, je clique dessus. Ceci est une notice. Donc si vous voulez envoyer des fichiers à votre utilisateur, eh bien c'est comme ça qu'on fait en HTML les amis. Et voilà, on a fait le tour. Nous avons dans ce document, il n'y a que 131 lignes, vous voyez. Et là, vous avez l'ensemble des choses à utiliser pour créer le squelette. C'est exactement ça, on vient de créer un squelette de page web. Voilà, on a vu le texte, des photos. les listes, rien qu'avec ces trois premiers, vous avez quasiment tout l'HTML. Les liens aussi, c'est important. Les vidéos, c'est très peu utilisé. Les formulaires, c'est très important. Après, le mail, etc. Donc voilà, les amis. J'ai fait cette vidéo comme support pour mes élèves. D'ailleurs, s'il y en a certains qui ont regardé jusqu'au bout, je les salue. Sinon, pour les autres, j'ai juste à vous dire... que je vais bientôt faire une vidéo sur CSS, mais que sinon, il y a du contenu, j'ai déjà énormément de contenu sur CSS sur ma chaîne, si vous voulez un petit peu apprendre à embellir cette page, parce que là, c'est vrai qu'elle est quand même très très triste. Donc voilà. Ah oui, juste un petit passage sur ce qui est en dessous de la vidéo. Donc le fichier complet de la vidéo, vous allez arriver sur ce lien-là, ça c'est un lien GitHub. Donc si vous voulez tout prendre, vous faites code, et download zip, et là vous avez un zip, d'accord ? Sinon, si vous voulez juste piquer des petites choses dedans, vous allez dans index.html, et regardez, là vous avez tout ce qu'on a codé aujourd'hui. Donc voilà, c'est comme ça que ça se présente. J'espère que ça vous a plu, comme introduction, si en tout cas vous êtes un pur débutant, j'espère que ça vous a plu. Et puis je vous souhaite de coder, de ne faire que coder pour progresser. Donc voilà. Je vous dis à bientôt, et puis bon code ! Allez, ciao !

Tiens, voilà, pour faire un truc original. OK. Et donc dans ce cours HTML, on va se faire un nouveau document texte, sauf que ça ne va pas être un document texte en vrai. On va faire un document qui s'appelle index. point html.

Hop, il nous demande de changer la terminaison. Oui, ensuite, on fait clic droit, ouvrir avec et on va s'ouvrir avec le bloc note et là, les amis, qu'est ce qui se passe ? Eh bien, on va essayer de se coder une page html ultra basique. Tiens, essayons, on va dire Hello Internet pour éviter de dire Hello World tout le temps et essayons de voir notre fichier qui est là index.html.

Si on le fait glisser dans notre navigateur, qu'est ce qui se passe ? Regardez là, en fait, on ouvre le fichier. On est dans HTML court, index.html, et regarde ce qui vient de se passer.

Notre navigateur internet, là qui est en l'occurrence Chrome, il est en train de nous lire quoi ? Il nous lit Hello Internet Donc il arrive à nous lire le fichier. Si on voulait lire de façon différente, on pourrait faire Ctrl O Et en faisant Ctrl O là on irait dans HTML court, index.html, on double-clique dessus, et c'est exactement la même chose que ce qu'on avait précédemment. Donc ok, on a cette page, on a mis Hello Internet. Ok, tiens, et si par exemple, on se mettait I love HTML.

Vous voyez que je suis très inspiré. Qu'est-ce qui va se passer là si on actualise la page ? Vous voyez, il nous relie le fichier.

En fait, il relie ce qui est écrit là-dedans. Donc notre navigateur est capable de lire ce fichier-là. Donc regardez, si on veut faire du HTML, on a qu'à dire, tiens, toi, entre crochets, tu es H1.

Hop, on referme comme ça. Et tiens, là on n'a qu'à se mettre un break. Et regardez ce qui va se passer avec le br là. Et là on y a mis h1 entre balises.

Bien sûr je vous remettrai sur cette notion juste après, je vous montre juste l'introduction sur BlockNote, et après on va coder pour de vrai. Donc regardez là, j'actualise, paf, qu'est-ce qui vient de se passer ? Lui on l'a mis entre balises h1, ça nous sort quoi ?

Ça nous sort un titre. Et on n'a plus les choses qui sont cote à cote, parce qu'on a mis un br, qui est donc un break, et donc il a créé un espacement. Là où il y a écrit après, I love HTML. Donc vous vous doutez bien qu'on va pas coder sur un bloc note.

Pourquoi ? Parce que c'est pas très ergonomique, c'est quand même pas très pratique. Donc ce qu'on va faire, et bien c'est qu'on va coder sur un éditeur de code les amis. Un éditeur de texte on peut appeler ça aussi.

Et moi celui que je vais utiliser, celui que vous allez utiliser, ça s'appelle VS Code. Donc on va mettre VS Code download, Visual Studio Code voilà. Moi j'ai l'habitude de mettre VS Code, c'est vrai mais en fait c'est Visual Studio Code. Voilà. Là, vous prenez la version qui correspond à votre système d'exploitation.

Et ensuite, on se retrouve, les amis, sur VS Code. Parce que moi, je ne vais pas le télécharger. Je l'ai déjà.

Et on se retrouve sur cette interface. OK. Donc là, on a cette interface. Et on est évident.

On peut faire File, Open File, si on voulait aller chercher notre fichier. Mais on peut aussi faire glisser. C'est assez pratique.

On se met comme ça, on fait glisser. Et voilà. Notre HTML court, on va pouvoir l'éditer ailleurs que dans un bloc-notes, dans un endroit beaucoup plus pratique, là en l'occurrence c'est dans Visual Studio Code.

Maintenant on va se le mettre sur le côté, on va se le mettre comme ça, et ça on va faire en sorte de pouvoir l'avoir comme ça, à chaque fois qu'on va coder, on va voir à côté ce qui est fait. Logiquement on est toujours sur cette page-là, et là on a notre petit texte, vous vous en doutez bien, ça ne va pas rester comme ça. donc maintenant on va attaquer on va attaquer dans le dur à supprimer ça et avant toute chose on va faire une structure de pages html je sais pas si vous avez déjà quelques bases en html ou pas mais sachez que là je fais point d'exclamation et en faisant point d'exclamation il propose immédiatement une structure en faisant entrer sinon on peut faire html 5 voyait une propose de html 5 voyez là on peut se déplacer avec la flèche au bas comme ça et là en faisant html 5 pareil il nous propose une structure, et sachez que cette structure, c'est la structure qu'il faut employer lorsque l'on code en HTML.

Ça veut dire quoi ? Ça veut dire qu'on dit toujours, point d'exclamation, doc type HTML, d'accord ? Mais dites-vous que si vous commencez une page HTML, commencez par un point d'exclamation, ou commencez par HTML tout court, et voilà, votre page sera faite. Mais je vais revenir rapidement sur les choses. Donc on dit toujours doc type, on dit le type de document, c'est l'HTML, on commence toujours comme ça.

Et derrière, là, les balises commencent en quelque sorte, puisque chaque balise ouvrante a une fermante. ou presque. C'est vrai que les balises méta n'ont pas de fermente.

Donc j'ai un peu tort là-dessus. Mais vous avez quand même un peu compris le principe. C'est-à-dire que là, on a HTML langage et là, on a la fermente. Là, il y a écrit EN pour English. Nous, on va mettre FR pour français.

Ça, c'est pour que le navigateur sache qu'on est sur une page en français. Ensuite, on a dans ED, là, on a toutes les informations qui ont un rapport avec la page, mais qui ne seront pas affichées. On lui dit qu'on va utiliser un char set UTF-8.

Je ne vais pas revenir sur absolument tout ce qu'il y a là-dedans. C'est des choses qu'on apprend vraiment au fur et à mesure quand on avance dans le développement web. Ça serait vraiment donner des informations futiles que vous ne retiendriez pas. Donc on va juste, dans ce document, on va par exemple se mettre un titre.

Là vous voyez qu'on a écrit title, donc il faut savoir que tout est en anglais. Donc si vous n'avez pas l'habitude de l'anglais, ne vous inquiétez pas, ça va venir tout seul. Puisque vous ne allez faire que ça, annoncer des balises en anglais, des choses comme ça.

Et là au lieu de document, on a qu'à s'écrire cours HTML. Je fais Ctrl S, Ctrl S ça veut dire enregistrer, sinon on peut faire File, Save, File, Save, Ctrl S. Ça marche sur Word, ça marche sur le bloc notes, Ctrl S ça marche à peu près sur tout, c'est pour enregistrer. Donc il faut qu'à chaque fois on enregistre notre document.

D'accord ? Vous voyez là, là j'ai fait un espace, donc là le document a une petite boule, la petite boule ça signifie qu'il n'a pas été enregistré, d'accord ? Donc Up, Ctrl S, là il n'y a plus la petite boule, il est enregistré. Allons voir ici, vous voyez que là le contenu a disparu, puisqu'on n'a pas de contenu. en revanche on a là écrit court html vous voyez qu'on vient d'agir sur le titre notre page regardez ce qu'on va faire petit à petit je vais commenter je vais commenter je vais commenter mon code alors comment on fait rire de vous et là j'ai écrit juste le truc le truc normal je sélectionne et je fais contrôle slash un contrôle l'oeil écrit le vieil et 2 points en fait pas un contrôle slash c'est le même bouton il est de poids et le slash et vous voyez ça commente sinon manuellement on fait tac tac tac et on met je commente.

On peut faire comme ça. Ça, c'est des flèches. C'est des flèches faites comme ça, je veux dire.

Donc, voilà. On a un commentaire. Ok, super. Qu'est-ce qu'on pourrait avoir envie de se mettre ?

On pourrait, à la place de ce petit truc-là, on pourrait se mettre un petit logo à nous. Allons chercher un logo HTML5. Et comme ça, vous allez voir comment est-ce qu'on ajoute un logo. Hop, on va dans images.

on va se prendre celui ci il est il à je fais qu'est ce qu'on fait on fait enregistrer l'image sous on est sur le bureau html court et on va quand même se renommer on va le mettre logo tirer html point png on enregistre voilà et la regarder si elle est ce qui va se passer sur notre document en fait la visual studio code il nous il nous met à disposition tout ce qui est dans ce dossier c'est juste ça on a tout ce qui dans ce dossier on l'a à disposition là, sur la gauche. Donc ça, c'est quand même assez cool. Et donc, hop, on revient là-dessus. Et donc, pour finir notre head, on a un titre à notre document.

Le titre, il doit être mis le plus haut possible. Enfin, en théorie, c'est après les UTF-8, parce qu'on ne sait jamais les UTF, en fait, c'est pour s'il y a des caractères spéciaux ou quoi. Mais bon, le titre, vu qu'on est censé le mettre le plus haut possible dans une page, en tout cas, c'est ce qui est recommandé par Google, eh bien, nous, on va mettre la suite ici. ici on va se créer tu vas regarder on n'a qu'à faire un commentaire manuellement on va dire icônes de l'onglet alors comment est-ce qu'on se fait un icône d'onglet en html et bien regarder on va juste lui dire link le rel c'est short cut plus loin icônes et là on va aller se chercher le notre acheter le logo html pas contrôle s donc là on vient de faire un head. Vous voyez que tout ce qui est contenu là, ça ouvre, et là, ça ferme.

Je ne vais peut-être pas préciser, mais quand il y a le slash comme ça, avant le terme, c'est pour fermer la balise. D'accord ? De même, la body, ce sera le corps de notre application, enfin de notre application, de notre page, on va dire tout simplement. On ouvre, et là, le slash, on ferme. Et HTML, on le ferme là.

Vous voyez, HTML, c'est celui qui est lié là-haut. C'est comme ça que ça marche, les amis. Une fois qu'on a réussi à faire ça, Et bien, actualisons !

Et regardez, on n'a plus le petit globe de base de Chrome. D'ailleurs, je n'en ai pas parlé, mais je vous invite quand même à coder sur Chrome. Si vous avez un ordinateur qui est relativement bien bon, on va dire, parce que c'est vrai que Chrome, ça prend beaucoup de RAM, mais si vous avez un ordinateur correct, codez sur Chrome. C'est beaucoup plus pratique pour coder.

Donc là, vous avez notre petit logo, qui est magnifique, et notre titre. Vous voyez, on a réussi à paramétrer un petit peu à quoi allait ressembler notre page. Alors après, on peut mettre plein d'autres choses là-dedans, je reviendrai plus tard là-dessus. Mais voilà, on est déjà bon là-dessus. Maintenant, ce qu'on va chercher à faire, c'est à faire du remplissage, c'est à essayer de voir tout ce qu'on peut faire dans une page web en HTML.

Alors, avant de se lancer dans l'écriture de ce qu'il pourrait y avoir écrit dans notre body, c'est vrai que j'ai été un petit peu vite sur VS Code, je me suis remarqué ça en revoyant la vidéo. Et si vous allez là sur la molette, vous avez des settings, et vous avez aussi un... color thème et là vous pouvez choisir des thèmes d'accord vous pouvez choisir la couleur qui vous convient alors sachez que plus ça vous paraît joli et puis ça va faire mal aux yeux parce que plus les contrastes sont forts plus ça fait mal aux yeux vous voyez celui-ci Dracula il est pas moche mais je crois que celui-là vous l'avez pas de base ça ça fait partie ça fait partie des choses qu'on peut télécharger donc là vous voyez tout en bas dans VS Code là on peut aller se chercher des thèmes on peut aller se chercher des aides en tout genre D'accord, dans CZ dans tout genre, il y a un plugin qui s'appelle HTML Snippets.

Et ça, c'est des choses qui aident à coder en HTML. Donc là, vous allez ici, vous tapez HTML Snippets, par exemple. Voilà, il est ici.

Bon, moi, je l'ai déjà. Mais sinon, là, on doit vous inciter à le télécharger. Donc éventuellement, téléchargez-le. On ne va pas beaucoup utiliser les plugins dans ce projet.

Mais bon, ça vous fera déjà une petite intro, et puis ça vous permettra d'avoir des aides pour taper. Donc voilà, ceci étant dit, il y a autre chose aussi qui m'a un petit peu surpris, c'est que là, moi je suis en Space 2. Là, vous voyez, si je clique, un dans Space, et en fait, on peut mettre Space 4. Et en mettant Space 4, regardez ce que ça va faire, eh bien, ça met, vous, vous avez sûrement ça, vous avez un écart de 4 espaces quand vous faites une tabulation. C'est vrai que ça se faisait pas mal.

Moi j'ai pris l'habitude de faire du Space 2 à force de travailler avec des frameworks, etc. Mais pour cet exercice, on va se mettre en Space 4, comme ça ça va peut-être moins vous perturber. Donc voilà, c'est les petites choses avant de se mettre à coder le body.

Donc nous avons une head, comme un corps en fait, comme la morphologie d'un être humain. On a d'abord la tête. mais ça la tête n'apparaît pas visuellement ici sauf là un petit peu et ensuite on a le body, et là c'est dans le body de notre HTML, donc dans le corps qu'il y a absolument tout ce qui est visuel tout le squelette de notre application qui va apparaître donc là j'ai écrit body, et bien on va séparer notre body en plusieurs sections, et regardez si j'écris section, et que je fais entrer hop, il m'apporte immédiatement les chevrons le chevron ouvrant, le chevron fermant, et il m'apporte la fermante aussi.

Donc ça, c'est plutôt cool. Comme ça, on n'a pas toujours tout à se taper. Et donc, les sections, on va dire que c'est pour matérialiser des grosses parties.

Et ensuite, pour matérialiser des plus petites parties dans des sections, en général, ce qu'on fait, c'est qu'on met des divs. Alors ça, ça n'a pas une importance vitale. On peut, par exemple, mettre div partout.

Ce qui est bien, c'est que si, un jour, vous donnez votre code à quelqu'un, ou si quelqu'un doit reprendre un code, plus vous aurez des balises, qui sont explicites, et plus ce sera du code qui sera facile à comprendre. Donc dites-vous bien qu'il n'y a pas une importance capitale à mettre des sections, et ensuite à mettre des divs, etc. Mais en termes de structure de page, c'est conseillé. Et donc, qu'est-ce qu'on pourrait se mettre dans notre div ? Eh bien, on pourrait se mettre, comme je vous l'ai montré tout à l'heure, un H1.

Donc c'est pour un header 1, c'est H1. Donc c'est un titre. On n'a qu'à dire titre, hop, H1.

Et tiens, ici par exemple... Je vais vous montrer tous les titres qu'on peut faire. Il y a 6 types de titres différents que l'on peut faire. Regardez, il y a un petit tips. Je clique là, ici, je me place sur le 1, et je reste appuyé sur Alt, et je reste appuyé sur Alt, vous voyez, là, j'ai sélectionné les 3 à la fois.

Regardez, là, je mets H2. Comme ça, on va voir ce qu'est un H2. Ensuite, non, ça ne marche pas si je défile avec la flèche du bas.

Donc là, je sélectionne Alt. là on va mettre un H3, là je sélectionne avec Alt on va mettre un H4 et ainsi de suite jusqu'au h6 puisqu'il y a six types de titres différents en html donc on les distingue en faisant h1 c'est le plus grand jusqu'à h6 qui est le plus petit titre c'est quasiment un titre c'est comme ça donc là vous voyez un petit peu à quoi ça correspond d'ailleurs je suis en train de me dire que le h2 et le h1 se ressemblent beaucoup Alors ce qu'il faut savoir c'est que le H1 en théorie il n'en faut qu'un par page, en tout cas c'est ce que recommande Google, d'accord ? Et ensuite les H2, vous mettez des titres un petit peu comme bon vous semble, selon la taille que vous voulez, enfin pas comme bon vous semble mais par exemple les gros titres, s'il y en a 4 ou 5 dans une page, vous en mettez un H2, ensuite vous mettez du H3, etc.

Après dans tous les cas c'est des choses que vous pouvez retoucher plus tard au niveau du style, même si là on va faire que de l'HTML. voilà faut juste savoir qu'il existe six titres différents et que le h1 théoriquement chaque page doit avoir un seul achat d'accord donc nous notre h1 on va on va s'en servir je vais m'en servir pour vous montrer un petit peu tout ce qui est possible de fait avec du texte en html donc on va dire que ça ce sera la partie texte voilà on va dire on va dire texte titre h1 c'est un peu bizarre avec les comme ça dans la tirer et On va enlever le tiret là, voilà. Alors, qu'est-ce qu'on peut faire avec les textes en HTML ? En général, quand on a du texte, ça se trouve dans des P, P pour paragraphe.

Vous voyez, là, je fais juste P, entrer, il sait de quoi je veux parler, il sait que je veux des P. Donc, tiens, texte basique, j'enregistre, regardez, on a un P, ça saute tout seul à la ligne, il vient se mettre là, et il fait un texte basique. D'accord ? Vous voyez un petit peu l'indentation qu'on a à chaque fois.

Il faut qu'à chaque fois que, par exemple, dans section, là, on a mis tout ça, donc dès que section, il englobe quelque chose, ce quelque chose-là, il fait un coup de tabulation plus loin. Ensuite, dans div, lui, il a deux enfants, là, et bien, qu'est-ce qu'on fait ? On fait un coup de tabulation plus loin. Donc vous voyez comment on indente un peu en escalier, c'est comme ça que ça marche.

Après, je vais vous montrer des techniques pour indenter automatiquement, mais il faut quand même que vous compreniez les principes d'avoir un code propre. Donc, pour revenir au texte, on a un texte basique là comme ça et si jamais on avait voulu le mettre en italique et bien on aurait fait m on voit juste ap m entrée et on va mettre voici un texte en italique tiens on va quand même être un point sur le faire propre j'enregistre up on regarde et là vous voyez on a un texte en italique ensuite si éventuellement on avait voulu mettre un texte en gras on aurait mis strong et un texte en gras vous voyez comment on peut agir déjà sur le texte juste avec l'html sans avoir besoin de passer plus tard par le style d'accord là je le style on n'en tient pas compte là c'est que de l'html voilà et puis qu'est ce qu'on peut avoir d'autres aussi on peut avoir des spans alors ça les spans je reviendrai un petit peu plus tard j'ai déjà vous montrer ce que c'est c'est on va écrire tiens l'élément en span ne revient pas à la ligne et pourquoi j'écris ça comme ça parce que regarder les années on ferme comme ça, j'enregistre, et voilà, le span, il continue comme ça. Alors que regardez, si après le P, tiens, on avait simplement voulu se mettre encore un autre P, on n'a qu'à se mettre du faux texte. Regardez dans VS Code comment on fait pour mettre du faux texte, on tape lorem, et après on met un nombre qu'on veut, ça va correspondre à un nombre de mots de faux texte qu'on veut, donc je vais taper lorem 30. Hop, j'ai fait entrer, et ça me tape 30 mots au hasard en latin, ça s'appelle un lorem ipsum dans le jargon.

et ça permet de simuler du texte avant de faire vraiment du contenu d'un site. Regardez, vous voyez que le P, le paragraphe, automatiquement il renvoie à la ligne, alors que le span ne le fait pas, donc ça peut être intéressant dans certains cas. C'est pour ça, je voulais juste vous présenter le span comme ça, et puis après on reviendra un peu dessus. On va réduire un petit peu ce P.

Et voilà, là je vous ai déjà montré quasiment tout ce qu'on pouvait faire en HTML avec du texte. C'est aussi simple que ça. C'est assez basique, bien sûr. Après, pour changer les polices, etc., bien sûr, ça c'est du CSS.

C'est pas le sujet de la vidéo. Mais, en tout cas, là, vous avez déjà une idée de ce qu'on peut faire avec le texte. Maintenant, nouvelle partie, on va regarder, tiens, qu'est-ce qu'on peut faire en H2 ?

On va se faire des photos. Alors, les photos, comment ça marche ? Eh bien, allons-y.

On va chercher déjà une photo. Attendez, je vais revenir ici. Est-ce que j'ai des images ? Là, j'ai le fond d'écran. D'ailleurs, ça ne s'est pas sorti.

On va mettre ça comme ça. Donc là regardez, si on veut ajouter une photo, vous prenez n'importe quelle photo que vous avez chez vous, ou quoi que ce soit, on fait glisser, et voilà, la photo elle est là, c'est magnifique. Je pense qu'elle est un peu trop volumineuse cette photo, je vais la renommer, on va mettre photo paysage, il faut quand même que le nom de la photo ait un peu de sens, parce qu'après si vous en utilisez beaucoup, il faut que vous sachiez ce qu'est la photo sans avoir besoin de cliquer dessus par exemple.

Donc comment est-ce qu'on fait une photo en HTML ? On se met là, on fait img, entrée, Et là, on lui dit qu'on veut photopaysage.jpg. Là, il me la propose en bas. Des fois, il la propose plus tôt.

Et qu'est-ce qu'il y a écrit là ? Il y a écrit Alt. Vous voyez, VSCode tout seul, il nous a mis ça, il nous a mis Alt. Pourquoi est-ce qu'il a fait ça ? Eh bien, il a fait ça, notre ami VSCode, parce que si l'image ne s'affiche pas, il faut quand même qu'on ait...

quelque chose. Je vais vous montrer. C'est aussi une autre signification, c'est aussi pour les non-voyants. Il faut, si jamais une personne non-voyante surfe, forcément elle ne voit pas la photo, mais il faut qu'elle ait une idée de ce que représente la photo. Donc là on va mettre image paysage par exemple, comme ça il sait que la personne non-voyante saura à quoi ça correspond.

Regardez. Donc là j'ai mis image paysage, on enregistre. Ok l'image elle est là, je vous ai dit qu'elle était très très très volumineuse. On va régler ça après. Mais regardez ici par exemple, hop !

on se trompe dans le nom, regardez, vous avez sûrement déjà vu ça sur internet, quand une image n'apparaît pas. Eh bien, on a son alt qui apparaît juste à côté, image paysage, d'accord ? Donc c'est pour ça que ça sert également.

Donc je remets le y, et vu qu'elle était un peu trop grosse, regardez, il y a des propriétés dans img, par exemple, on peut mettre la propriété height, comme hauteur en anglais, et on peut lui dire, tiens, tu me fais 200, et ça correspond à 200 pixels. J'enregistre, j'actualise. Et voilà.

Qu'est-ce que vous en pensez ? C'est quand même plus petit. Bon, ce ne sera pas magnifique notre site.

Je préfère vous le dire de suite, vu que on ne peut pas vraiment agir sur le style. Mais en tout cas, vous voyez qu'on a réussi à ajouter une photo. Voilà. Donc juste avant de terminer cette partie, je vais vous montrer un petit plugin qui va faire qu'on n'aura plus besoin d'actualiser la page.

Un petit plugin révolutionnaire qui s'appelle Live Server. Donc là, on va sur les plugins. On va dans Live Server.

Moi je l'ai déjà live server, par contre je l'ai mis enable. Je le remets, donc vous vous devez faire télécharger. Vous voyez qu'il a été téléchargé 9 millions de fois.

Donc quand vous téléchargez des plugins, peu importe ce que vous téléchargez, regardez combien de fois ça a été téléchargé et combien d'étoiles ça a. C'est très important. Ça aide à déterminer qu'est-ce qui est bien et qu'est-ce qui est moins.

Une fois qu'on a notre live server, qu'est-ce qu'on peut faire ? Regardez, si par exemple, là je fais clic droit. et bien là on a open with live server on a également en bas là un petit go live donc soit vous cliquez sur go live soit vous cliquez sur open with live server vous voyez starting et là hop il nous a lancé notre application dans notre petite page et à chaque enregistrement ça va automatiquement mettre notre page à jour donc ça c'est plutôt cool ok testons pour voir si ça marche on n'a qu'à se dire que là au niveau du h3 on va se faire les listes.

Alors comment ça marche les listes en HTML ? Eh bien pas très compliqué, je vais vous montrer rapidement. On peut faire soit des ul soit des ol. Alors les ul ça veut dire unorder liste donc tout ce qui est contenu là dedans eh bien ça sera la liste.

Donc ul on annonce une liste déjà et ensuite on énumère en disant li. Tiens je vais juste vous mettre ul égal. Unordered list. Unorder, si vous n'êtes pas familier avec l'anglais, order ça veut dire ranger. Donc unorder c'est une liste qui n'est pas classée en tout cas.

Et là regardez, je vais vous montrer un petit tips pour multiplier la ligne autant de fois qu'on le veut. On fait majuscule, enfin la flèche de la majuscule, le caps lock, non pas le caps lock justement, la majuscule, alt et flèche du bas, up, up, et vous voyez ça multiplie la ligne. Donc là, on va dire qu'on fait une liste de trois éléments. Regardez, j'enregistre.

Et regardez, le Live Server, il a actualisé automatiquement la page. Donc ça, c'est cool. Et vous voyez que là, ça nous fait des petits bullet points, des trucs un peu moches, des gros points noirs.

Donc ça, c'est une liste qui n'est pas classée, qui est unorderlist. Pourquoi UL ? D'accord ?

U pour unorderlist. Maintenant, si on voulait une liste rangée par numéro, eh bien, ça s'appellerait... order list, donc comment on mettrait ça en HTML ?

On dirait OL. comme ceci, ol, et donc dans le li on va dire ol est égal à order de liste. Je fais majuscule, alt, flèche du bas, et voilà, j'enregistre. Et regardez ça, on a là les amis, une liste avec des numéros automatiquement, on aurait pu l'ajouter, vous voyez que les numéros ce n'est pas nous qui les avons mis, et ils se mettent automatiquement. Donc voilà, vous avez compris.

Comment marchent les listes en HTML ? On avance bien dans ce cours, vous voyez que ça va assez vite, et vous allez voir que ce qui est vraiment utile en HTML, ça ne prend pas... Il n'y a pas 10 000 choses, ça va très vite, et avec toute cette structure-là que vous avez là, après vous serez capable de faire n'importe quelle structure de page.

Dites-vous bien que l'HTML, c'est vraiment le squelette de notre page, c'est vraiment toute cette structure. Quand on annonce des lits, c'est pour des listes, quand on annonce des sections, c'est pour des parties distinctes, etc d'accord voilà donc ensuite qu'est ce qu'on va attaquer on va attaquer les tableaux avant d'attaquer les tableaux en sur moi j'ai vu en revient la vidéo précédente que je n'avais pas mis de heather et de footer tout comme la il ya un aide il faut savoir que dans le body on peut mettre aussi en haut du body ce qui sert de titre ou ce qui sert d'introduction une page ça vient souvent header. Ce qu'on va faire, nous là, c'est qu'on va se le prendre et on va s'enlever ça et on va se le mettre plutôt ici. Hop, attendez, je suis en train de voir que c'était un peu n'importe quoi. Hop, on va mettre header, comme ceci, et la fermante, elle va aller ici, juste avant la section.

Donc voilà, ça peut... ça se présente souvent comme ça les pages tout comme il ya un header plus tard il y aura un footer donc tout ça ça se passe dans le body c'est des choses qui se font mais ça se fait pas non plus tout le temps sur toutes les applications etc mais faut quand même que je vous montre voilà on fait et d'ailleurs ensuite des sections up on enregistre et voilà ça se présente un petit peu mieux comme ça ok donc une fois que cela est fait je vous avais dit qu'on allait voir les tableaux alors comment ça marche les tableaux je vous montrerai de façon assez basique comment les faire Après je vous montrerai aussi du contenu pour créer des tableaux automatiquement etc. Alors les tableaux ça se présente par la balise table.

Table ça veut dire tableau en anglais. Donc cette balise table on peut lui mettre quoi ? On peut lui mettre éventuellement une légende. Là j'ai un peu trop sélectionné, voilà comme ça.

Donc je commente. D'ailleurs je suis en train de voir que mes flèches ne sont plus jaunes. C'est étrange, bon, c'est pas très grave.

Donc, on va se mettre éventuellement une légende. Légende, en anglais, c'est caption. Voilà.

Et donc, tiens, on va dire, on va faire un tableau sur les populations d'Europe. OK. Et donc, comment se présente le tableau ?

Le tableau, il se présente avec une entête. Ça me perturbe de ne plus avoir mes commentaires. Je pense que c'est avec le plugin que j'ai réactivé tout à l'heure. Bon, c'est pas très grave non plus.

Je pense que vous, vous avez les commentaires comme ça, vous n'avez pas les flèches jaunes comme j'avais au début, donc tant mieux. Donc, on a là notre entête du tableau. Et donc, comment ça se présente ? Eh bien, notre entête, c'est T pour table et head.

Vous voyez qu'on voit souvent le terme head, header. Donc, T, head, c'est pour toute l'entête du tableau. Et donc, ensuite, on va dire TR. Et à l'intérieur, on va énumérer les TH. Donc, on va dire PI.

on va lui dire th population et regardez ce que ça fait un peu j'enregistre voilà donc notre tableau il est comme sa population d'europe pays population pour l'instant il n'est pas il est pas fameux il n'est pas très joli parce que là si on veut dans table on peut lui mettre déjà une bordure on peut dire border tu vas mettre un de border 1 voilà ça se représente Il se représente comme ça notre tableau. Bon, il n'est pas extraordinaire. On peut éventuellement mettre une width, c'est-à-dire une largeur. Et on peut lui dire, tu vas prendre 50% de l'espace qu'on te donne. Voilà.

Donc là, il prend 50% de la page, quelle que soit sa taille. Vous voyez, là, il s'agrandit, il s'agrandit. Il ne fera toujours que 50% de la taille de la page.

Donc ça, c'est des petites choses qu'on peut mettre dans le tableau. Voilà, des petites propriétés qu'on peut dire à table. Donc là, on lui a mis une en tête avec Thead.

on fait dtr, ensuite dth pour énoncer et bien ensuite le corps, comment ça va s'appeler ? ça va s'appeler type body tout simplement donc on va l'appeler corps du tableau comme ceci et donc c'est T-Body et donc là les T-Body on va mettre DTR donc on va dire TD on va se mettre France j'ai mis trois pays seulement je vous rassure et donc TD 66 millions j'enregistre et vous voyez ça rajoute la ligne du tableau magnifiquement à la suite donc voilà c'est aussi simple que ça un tableau après il y a moyen d'en faire des plus complexes mais comme je vous l'ai dit tout à l'heure je vous montrerai après Sauf que moi je suis pas ultra fan de faire des tableaux en HTML, mais je sais que ça se fait pas mal. Donc hop, hop, on va dire que j'avais mis quoi ? J'avais mis Allemagne 82, bon j'ai pas vérifié les chiffres, j'ai utilisé ma mémoire, je suis pas sûr qu'il soit 82 millions en Allemagne, mais pas loin à mon avis. Et Espagne j'ai mis 45, bon ça peut être dans ces eaux là, on va regarder.

47 l'Espagne, ils ont fait des bébés depuis, tout simplement c'est pour ça. Donc très bien. Et voilà les amis, nous avons créé un tableau en HTML.

Bon, comme je vous l'ai dit, je ne suis pas extrêmement fan, mais en tout cas, vous voyez la structure. On a une légende éventuellement, ce n'est pas obligatoire, vous pouvez faire ce que vous voulez. On a surtout le Thead pour avoir les entêtes, et le Tbody en suivant.

Voilà comment ça marche. Ensuite, on va passer à quoi ? On va passer... au H5, et je vais vous montrer comment on fait des liens. Comment est-ce qu'on fait un lien cliquable vers un autre site ?

Regardez. Par exemple, pour faire un lien, on fait une encore, encre en français. Encore, ça s'écrit comme ça, vous voyez ? Ça se prononce encore. Eh bien, la encre, on va juste faire A, hop, et le A, c'est pour encre, en ou encore.

Et donc, ce A, il demande un href, donc... il demande à ce qu'on mette un lien à l'intérieur. Donc vous pouvez mettre google.com ou peu importe, mettez ce que vous voulez.

Moi, je vais vous mettre le lien d'une HTML cheat sheet. On va voir après ce que c'est, mais je vous le mets d'avance. D'accord ? Donc là, je vous mets ce lien-là, ça s'appelle HTML cheat sheet. Voilà.

Et là, je vais écrire HTML cheat sheet. Voilà, comme ceci. Donc c'est une feuille, cheat c'est feuille et cheat c'est tricher.

Donc c'est une feuille pour tricher, on va dire. C'est une feuille qui regroupe un peu tout ce qui est cheat en langage informatique. C'est des feuilles qui regroupent un peu tous les trucs qu'on peut faire dans des langages, etc. Celle-ci résume un peu tout ce qu'on peut faire en HTML.

On l'ouvrira après. Enfin, on va l'ouvrir maintenant. Regardez, j'enregistre. Et là, si je clique, hop, voilà, on part sur l'HTML cheat. Mais moi, je ne voulais pas quitter ma page.

Et donc, si on ne veut pas quitter la page, regardez ce qu'il faut faire. Il faut faire target. égale underscore blanc en mettant ça target de ce corps blanc voilà on ouvre sur une page d'à côté notre cours est toujours là et nous on ouvre la cheat sur une page d'à côté alors on va aller voir ce que c'est un peu la cheat voilà alors quoi ça correspond donc au début c'est pas très intéressant là vous voyez comme vous pouvez le voir bon et il ya des pubs aussi donc ça c'est pas très intéressant mais il ya quand même des trucs intéressants il nous montre comment faire un tableau il nous montre tous les hachins les divisions, comment intégrer une image, vous voyez, comment faire un lien. Donc en gros, il y a absolument tout ce qu'on peut faire avec HTML. Mais tout n'est pas utilisé en fait.

Vous voyez, la definition list, ça je n'ai jamais vu de ma vie. Jamais j'ai vu un code où j'ai repris un code qui avait utilisé ça. Donc tout n'est pas à utiliser. Ce qui est vraiment principalement et uniquement quasiment à utiliser, c'est ce que je vous montre dans ce cours.

Mais toujours est-il que la cheat sheet, elle n'est quand même pas inutile. Puisqu'il y a beaucoup de choses, ça montre aussi les balises méta qu'on met au début de notre page HTML. Dans le head, il y a énormément de méta qu'on peut mettre.

Je ne vais pas m'attarder dessus. Ce qui est intéressant, c'est que là, par exemple, il y a un truc pour créer des tableaux. On peut faire trois colonnes. Row, c'est trois lignes.

On peut mettre plus. La border, on n'a qu'à dire qu'on veut une border de trois. Et là, on fait Generate Table.

Et là, vous voyez, ça nous a généré automatiquement un tableau. Vous n'avez plus qu'à écrire vos données à l'intérieur. et vous récupérez le tableau.

Donc, en fait, pour créer des tableaux, si vous voulez vraiment les faire en pure HTML, vous avez des moyens de les générer automatiquement. Voilà, c'est juste pour vous montrer. On peut même créer des listes, je n'avais pas vu ça.

Voyez, on fait Order List. Ah oui, on peut demander si on veut des circles, des squares. Hop, et on order.

Et voilà, et ça a généré une liste. OK, bon, voilà, ça, c'est des générateurs, je vous le dis, ça, vous n'en servez pas, de créer des listes comme ça, vous le faites à la main sans souci. Enfin bon.

Voilà, vous avez vu ce site, et il y a aussi un deuxième site que je voulais vous montrer, donc on va se le mettre à la suite de notre petit cours. On va se le mettre à la suite. Donc là je viens de créer un A. Et regardez là si je refais un A et qu'on va dire href, alors attendez je vais récupérer le... Hop là, ça c'est un lien pour avoir toutes les icônes natives à HTML, vous avez juste à entrer un code et ça sera compris par votre navigateur et pareil on va dire target blanc et ça ça va s'appeler les icônes en HTML.

J'ai oublié le T, HTML. Ok j'enregistre. Allons voir à quoi ça ressemble.

On pourrait peut-être s'agrandir un peu la page, effectivement. Et donc là, vous voyez, déjà, il y a un petit problème, c'est que les deux liens se mettent côte à côte. Pourquoi ?

Parce qu'un petit peu comme les spans, la balise ancre, la balise encore, la A, c'est une balise qui ne revient pas à la ligne. Donc, elle n'est pas ce qu'on appelle un inline block. Donc là, c'est un peu ça, c'est la notion de CSS. Donc, si on veut les séparer, les deux A, eh bien, on fait un break, un BR, si vous vous souvenez au début de la vidéo. c'est ce que je vous avais montré pour séparer les petites choses qu'on avait écrites au tout début de la vidéo et donc là vous voyez qu'en faisant un br j'enregistre et voilà elles sont l'une en dessous de l'autre donc les icônes en html allons voir là mes amis nous avons des icônes toutes ces icônes là elles sont utilisables juste en reprenant le html code qui est ce code là quoi html code html code vous reprenez ça et bien les amis ça va nous afficher donc sélectionnons une icône sympathique tiens ce doit là qui m'a l'air très intéressant je le prends contrôle c on va là dans notre code qui en a qu'à se mettre là au début et donc là ce qu'on va utiliser pour le mettre entre entre structure html entre balises on va lui mettre une balise span ce que je les balises pas ne reviennent pas la ligne est souvent les icônes on s'y prend comme ça on va On peut le mettre comme ça.

Sinon, il y a aussi le I qui marche, mais c'est plus utilisé pour d'autres choses. On peut utiliser le I comme ça pour icône, mais on peut utiliser le span, ça se fait tout aussi bien. Donc là, moi, je voulais vous montrer le span.

Donc voilà, j'enregistre. Et en allant dans le cours, regardez là, notre doigt, il est ici. Bon, c'est pas très gros. Vous voyez que si je grossis, on le voit. Par exemple, si on l'avait mis pour le...

On a qu'à se le mettre tout en haut de notre page. Parce que là, le H5, c'est vrai qu'en fait, le H5, c'est un titre qui est assez petit. Si par exemple, on va se le mettre là, là, on va bien voir notre icône. Vous voyez ?

Voilà, ça, c'est des icônes natives. Donc, vous avez juste à reprendre le code. Je vous ai mis le lien là où je vous le montre.

Et puis, juste en dessous de la vidéo, vous avez le lien du projet fini. Je vous montrerai à la toute fin de la vidéo comment l'exploiter éventuellement, si vous n'êtes pas habitué à GitHub. Mais voilà, vous pouvez avec ce lien déjà avoir... toute une série d'icônes qui embellissent plus ou moins le site. Donc ça, c'est ce que je voulais vous montrer.

Et enfin, pour terminer, là, il y a un titre H6. Vous voyez qu'il est écrit en tout petit, mais je ne suis pas en 100%. Là, si, je suis en 100%.

Donc là, il y a un titre H6. Et là, je vais vous montrer comment intégrer une vidéo, pour finir cette partie-là. Donc, on va se mettre comme ça. On va dire une vidéo.

Comment est-ce qu'on intègre une vidéo ? en html et bien les amis regardez on écrit dans d'abord on laisse récupérer une vidéo ce serait un bon début alors hop là on va sur pixabay c'est un héberge enfin c'est une banque d'image gratuite et de vidéos gratuites hop vidéo est ce qu'on a des vidéos à propos de code non ça c'est vidéo sponsorisé voilà ça c'est des vidéos gratuites non c'est extrêmement moche on va on va plutôt se chercher je sais pas pourquoi j'ai voulu partir sur du code sachant qu'il n'y en a pas beaucoup on va taper tiens sunrise une vidéo de soleil qui se lève à mon avis ce sera autrement plus sympa j'étais pas en vidéo c'est en photo donc là vous avez image et vous avez up vidéo là comme ça voilà on va y arriver donc on tape sunrise et là c'est des vidéos j'en suis quasiment sûr Qu'est-ce qu'on peut répondre ? Bon, on ne va pas non plus chercher pendant 50 ans.

On fait un free download. Hop, et voilà, on a une vidéo. Elle est là.

Donc là, qu'est-ce que je fais ? Je la prends, je la fais glisser dans notre dossier. Et voilà, elle est là. On va juste la renommer vidéo.

De toute façon, il n'y en a qu'une. On ne risque pas de la confondre. Donc, comment est-ce qu'on intègre une vidéo ? Eh bien, regardez, on fait vidéo.

Entrez dans la balise vidéo, on lui dit... Je veux que tu me lises vidéo.mp4. Et ensuite, on peut lui donner des propriétés.

On peut lui dire autoplay, c'est-à-dire que je veux que tu joues automatiquement. Je veux que quand tu es fini, tu te relances, donc tu fais un loop, tu joues en permanence, et si jamais tu as du son, ça surtout, pensez à le faire, c'est muted, parce que les gens détestent quand vous arrivez sur une page et qu'il y a du son qui apparaît, c'est vraiment très très chiant. Donc voilà, on a mis ces informations en enregistre, et regardons...

Ah oui d'accord, elle est très très grosse la vidéo, voilà, très sympa, c'est le bâtiment qui fume en plus, très bien. Donc, vu qu'elle est un peu grosse... Et bien, un petit peu comme pour les images, j'ai des propriétés 8. Donc on va lui dire 8, je veux que tu fasses 150 pixels de hauteur.

Et là, les amis, voilà, nous avons notre vidéo. On voit quand même que les nuages bougent, donc ce n'est pas une photo. Et nous avons intégré une vidéo à notre projet.

Et donc voilà, on a déjà commencé à coder un certain nombre de choses en HTML. Il ne nous reste plus grand-chose, je vous rassure. Il nous reste quand même le truc qui, à mes yeux, est le plus important. C'est...

les formulaires. Alors, avant de vous montrer les formulaires, je vais vous montrer d'abord un petit truc que je vous avais promis, c'est pour ranger, pour indenter automatiquement un peu toutes ces choses-là de façon propre. Et donc, on va aller prendre Prettier. Prettier, voilà, c'est un code formateur, donc il vous formate le code de façon très jolie. Donc voilà, je vous invite à prendre Prettier.

et une fois que vous avez prétire les amis et bien sachez je crois je sais pas s'il faut relancer ou pas vs code je crois pas mais ça marche pas essayer de relancer vs code une fois on va sur la molette on va dans settings et là on a un truc qui s'appelle format on save et ça va formater quand on sauvegarde format on save up on clique dessus et là en toute logique en fait là si on fait clic droit et qu'on fait format document with vous avez format document with là vous pouvez choisir et vous avez prettier code formateur donc vous pouvez éventuellement le choisir donc là je les choisis et il m'a mis en deux mises en attendait on va revenir en arrière du coup on va pas prendre prétire code formateur il m'a pas pris c'est bizarre j'ai l'impression qu'il est mis en deux on est bien sûr 4 à une choc configuré en deux peut-être c'est pour ça qu'il m'est automatique bon moi je suis en deux donc dites vous que vous si vous êtes en quatre ans ça va le faire et donc du coup si on fait format document with je vais prendre prête hier et donc ça veut dire quoi bon là je repasse en deux pour la fin du projet parce que sinon bon ça me savent où que j'aurais faire trop de changements mais ce qui est intéressant c'est que la regarder si ça s'était mal placé comme ça regardez là je fais contrôle s up et vous voyez il a automatiquement replacé comme il fallait donc à chaque fois que vous avez enregistré ça va Vous indentez correctement votre code, c'est quand même une aide qui est plutôt très utile. Bien, ceci étant dit, on va sauter une petite ligne et on va se mettre une section. Alors je vous rassure, en vrai, on ne met pas des BR partout comme ça, en vrai, après on organise avec le CSS, mais là c'est juste que vu qu'on fait 0 CSS, on est obligé de faire des petits breaks, des sauts de ligne automatiques, c'est juste pour ça. Et donc là on va faire 1H2, puisqu'il n'y a qu'un seul H1 par page, et on va l'appeler formulaire. on va se remettre un peu sur le côté voilà comme ceci ok donc là on a notre formulaire en bas de page qui va comporter un certain nombre de choses donc comment ça marche les formulaires en html et bien on dit forme entrée donc il ya une action on va se mettre une action juste comme ça par je rentrerai pas dans les détails on va dire par exemple que là le fort le fort quand on le soumet et bien ça va nous aller chercher un fichier qui s'appelle action point php je rentrerai pas plus dans les détails Et on va dire que c'est une méthode poste, là non plus je ne vais pas expliquer, parce que ça dépasse le cadre du cours.

Donc, on a notre formulaire, et tout d'abord, qu'est-ce qu'on veut faire ? On veut mettre un input. Alors c'est quoi un input ?

Regardez, tout simplement, j'ai fait entrer, regardez ce que c'est un input. Un input, c'est un petit encadré dans lequel on peut écrire tout ce qu'on veut, et c'est comme ça qu'on passe les informations dans un formulaire. Donc là, notre input, il est de type, de base, naturellement, il est de type...

texte d'ailleurs vs code le met comme ça de base donc nous on va on va se laisser comme ça mais on peut écrire à l'intérieur on va faire ce qu'on appelle un placeholder et à l'intérieur on peut mettre entrer votre nom j'enregistre et regardez on a vous avez enfin vous l'avez sûrement déjà vu sur plein de sites voilà ce qu'on appelle un placeholder c'est à dire un texte qui va disparaître quand je vais écrire mon nom quoi d'accord donc voilà on peut aussi faire un label le label, donc on va lier un label à l'input, et on va se l'écrire devant, on va dire label for, donc on va dire que c'est pour name, et donc là il faut que l'input on lui met un idée name et donc en faisant ça on vient de connecter un label et un input regardez là on écrit non deux points j'enregistre et regardez ça fait non bon même pas besoin de mettre deux points ça fait pas joli sinon voilà là on a le nom en tout cas c'est pas très joli j'ai l'impression bon voilà on a le nom et regarder si je clique sur non vu que c'est un label qui est connecté up ça déclenche l'input Et regardez, si là on n'avait pas mis le label for name, là je clique sur non, et bien ça ne fait rien. Vous voyez ? Donc il faut faire un label for name, lui il a une idée qui s'appelle name pour le nom, et voilà, ça veut dire qu'on a connecté le label à son input. Voilà, et là on peut commencer, on peut écrire ce qu'on veut dans notre formulaire.

Donc ça c'est les inputs dans lesquels on peut écrire. On peut également dans les inputs, éventuellement, on peut... je vais commenter ça en mettre formulaire, c'est juste pour faire un peu plus propre. Donc, on peut également, au niveau des inputs, faire, pourquoi pas, un nombre.

Donc, on va se mettre un label, label for age, donc on va dire age, et il va y avoir un input, d'ailleurs, ça m'embête un peu, de décrire comme ça, c'est mieux de mettre label là, input comme ça, et ensuite là, on break, ici, voilà. Là, ça fera plus propre. de toute façon si j'enregistre, on lui met comme ça donc là, j'avais dit qu'on allait mettre un input avec un id parce que là, vous voyez que là, vu qu'il y a fort age, il faut lui dire l'id c'est age, comme ça c'est comme ça qu'il peut agir sur son camarade, et donc on va lui mettre un type number, au lieu d'un type texte et regardez ce que ça fait un input de type number et bien, ça fait tout simplement qu'on peut écrire, et vous voyez là il y a les flèches en haut, flèches du bas, on peut écrire des nombres et que des nombres. Là, j'essaie de taper du texte, j'essaie de taper des lettres, ça ne marche pas.

Parce qu'on attend dans cet input que des nombres. Alors, qu'est-ce qu'on peut également dire à cet input ? On peut lui dire que par exemple, au minimum, ton chiffre minimum que tu vas accueillir, c'est 0, tu ne pourras jamais aller en dessous de 0. Au maximum, tu ne pourras jamais aller au-dessus de 99. On peut lui dire des choses comme ça.

On peut lui dire aussi le step, tu vas de combien en combien. Regardez, si je lui dis 2, là, l'âge... il va de 2 en 2. Nous, on va se mettre step de 1 en 1. Vous voyez tout ce qu'on peut faire avec un input de type nombre. Mais ce n'est pas tout. On peut également lui dire une valeur de base.

On lui met value égale, par exemple, 18. La majorité, en France en tout cas. Et regardez, on démarre à 18. Ça, c'est une partie des choses qu'on peut éventuellement mettre dans un input de type nombre. Donc voilà, vous avez le type number. Vous avez l'exemple du type texte, l'exemple du type number. Donc voilà, ça c'est des choses qu'on peut demander à notre utilisateur, sans souci.

Donc ensuite, il y a d'autres choses. Il y a les inputs de type select. Alors on va faire input select. À quoi ça correspond les inputs de type select ? Eh bien, vous allez voir, on va se mettre un label for gender, donc pour le genre en anglais.

Donc genre. Et donc là, on va mettre select. en disant bien l'idée gender. Comme ça, on connecte le label avec le select, et à l'intérieur du select, on va mettre deux choix.

Qu'est-ce qu'on peut mettre comme choix ? Au niveau du genre, on peut mettre homme, ou alors on peut être femme. Avec Alt, je sélectionne les deux, et j'écris femme. Et là, regardez.

Notre select, c'est un déroulant. Vous voyez, il y a homme, femme. Je suis en train de voir que femme, il est écrit en minuscule. Comme ça. On peut faire homme ou femme.

Sauf qu'on peut également lui dire une valeur par défaut. On n'a qu'à dire que par défaut, c'est femme. On va dire selected.

En mettant selected, de base, il est sur femme. On peut éventuellement dire que c'est un homme. Ça, c'est le select.

Le select, c'est des menus déroulants. Je pense que vous avez déjà vu. Oui, vous l'avez forcément vu déjà sur Internet.

Ok, on va se mettre un break. Ensuite, il y a les inputs de type radio. C'est quoi les radios ? C'est des points sur lesquels on peut cliquer.

Pareil, c'est des choses que vous avez déjà vues en surfant sur Internet. On va tout se mettre dans une div, ce sera plus pratique. Et on va dire, tu as un input de type radio.

Ça, on mettra après. On va juste dire que ton idée c'est human. et voilà on va s'en tenir à ça on va mettre un label donc le label c'est fort human et on va dire humain donc il faut toujours connecter une idée avec le label donc ensuite je récupère sa contrôle c contre levé on va dire la dogue donc chien en français donc on écrit toujours en anglais tout ce qui est du code à l'intérieur là comme ça Par contre, si on s'adresse à un public francophone, là, on peut éventuellement écrire à l'intérieur les choses en français.

Enfin, on écrit les choses visuelles qui terminent sur l'écran en français. En revanche, tout ce qui concerne du code et qui n'est vu que par les codeurs, c'est censé être de l'anglais. Et donc là, on va dire cat, cat, hop, et chat.

Et donc là, regardez ce que ça fait. Les radios, vous voyez, il y a humain, chien, chat. Et on peut cliquer. Alors là on peut cliquer sur tous, c'est pas vraiment le comportement qu'on veut.

Et en plus ils sont pas liés les uns aux autres, parce que normalement dès qu'on clique sur un, ça enlève aux autres. On ne peut avoir qu'un choix quand on fait des radios. Et là c'est pas le cas, pourquoi ?

Parce qu'on les a pas reliés tous ensemble les trois. On a dit que c'était des inputs radio, mais on leur a pas dit quel name ils avaient. Donc regardez, avec la touche Alt je sélectionne les trois, on fait Name, et on va dire... le nom c'est type chien, chat, humain, c'est un type on va dire, ou espèce je sais pas comment on pourrait dire, non bon on va laisser type, type, voilà et donc là regardez, si je sélectionne chien hop, je sélectionne chat, vous voyez que ça désélectionne l'autre on ne peut en choisir qu'un seul sur le choix qu'on a, d'accord ? donc ça aussi c'est des choses que vous avez sûrement déjà vu donc voilà, c'est très bien, par contre, de base il y en a il n'y en a pas qui est sélectionné donc si on veut qu'il y en ait un qui soit sélectionné de base, on va dire par exemple chien, si l'utilisateur est un chien, on va lui dire checked.

Il y a un petit problème là, hop, avec le... voilà. Il y a un truc qui a disparu, je me disais bien que j'avais fait... voilà, j'ai tout sélectionné. Et donc là, on va dire checked.

Hop, et voilà, de base on est sur chien. Hop, je clique sur chat. Hop, je clique sur humain. Donc voilà, c'est checked, on le met où on veut pour qu'il y ait un truc sélectionné de base.

Tout comme là, on avait mis selected, là pour mettre directement sur femme, d'accord ? Donc ça c'est plein de petites choses. Vous allez voir c'est bientôt fini, après une fois que vous connaissez tout ça, enfin ça c'est une chose que même moi je ne connais pas par cœur, souvent quand je dois faire un select ou quoi, je regarde rapidement la doc, c'est assez rapide.

Par exemple, tiens, si on regarde, on peut se rendre le select, on va dire select html dans Google, Et regardez, premier lien qu'on trouve, moi c'est comme ça que je fais, et là il vous explique comment faire un select, tout simplement. Il n'y a pas plus simple que ça, il n'y a pas besoin de tout connaître par cœur non plus. Enfin moi je sais quoi, pour faire la plupart des choses, des fois dans un formulaire, même une checkbox ou quoi, ça m'arrive de retourner chercher les informations. Donc voilà pour les radios. Donc ensuite il y a quoi qu'on peut se mettre dans des formulaires ?

On peut se mettre... éventuellement une zone de texte. Une zone de texte, c'est une textarea.

Alors la textarea, elle n'a pas nécessairement un name, ça je vais l'enlever. Ni un ID d'ailleurs. Par contre, elle a une taille, donc on peut dire col, c'est la largeur qu'elle a, et rose, c'est la hauteur qu'elle a.

D'accord, regardez, j'enregistre. Vous allez voir ce que c'est immédiatement, voilà, c'est ça une textarea. Et vous voyez que là, même là, il y a un bouton pour éventuellement la trifouiller dans tous les sens. Bon ça, en général, on l'enlève en CSS parce que... sinon l'utilisateur fait n'importe quoi voilà jamais faire confiance à l'utilisateur donc voilà et éventuellement dans la texte arrière on peut y mettre un placeholder donc on peut lui mettre la taille qu'on veut on peut mettre entrer votre votre demande ici voilà et voilà ça ça marche comme ça tout simplement ok donc ensuite on va se mettre un break et pour finir on a des checkbox donc on va faire une poutre checkbox c'est quoi une checkbox c'est juste une case une case qu'on coche tout simplement donc selon les navigateurs selon si c'est un mac ou si c'est un pc aussi elles sont elles ont un design un peu différent ces checkbox donc on va dire input de type checkbox voilà on peut même le fermer comme ça tac regardez et la voyez ça fait une petite checkbox voilà c'est comme ça bon on peut enrouler un label autour de la checkbox.

Regardez. Si on mettait un label... Même pas besoin de dire label fort, puisque le label, en fait, il va enrouler...

On peut le faire, ça, pour les checkbox. C'est-à-dire que là, on enroule tout autour, comme ceci. Et là, on dit, par exemple, accepter les conditions générales de vente, les CGV ou des choses comme ça. Et là, regardez, en cliquant sur le label, hop, on clique sur la checkbox, vu que le label englobe la checkbox. Donc ça, c'est quelque chose qu'on peut faire.

Donc vous voyez, ça, c'est pour cocher. Là, on peut éventuellement cocher plein de trucs, tout simplement. Regardez, si on avait... Si on en avait mis plein, ce n'est pas comme les radios où il n'y a qu'un seul choix possible. Là, on peut, hop, cocher lui, cocher lui, cocher lui, et cocher lui, vous voyez ?

Donc voilà, on a fait le tour du formulaire. Qu'est-ce qui manque ? Une fois qu'on a un formulaire comme ça, les amis, il manque tout de même un bouton pour valider. Parce que sinon, c'est un peu bête, on ne peut pas l'envoyer ce formulaire.

Et donc, tout en bas du formulaire, en général, c'est là qu'on se met. On met un input de type Summit. Je suis quand même conscient qu'il y a énormément d'informations, que c'est beaucoup, beaucoup de choses.

Mais c'est en pratiquant après qu'on arrive à être à l'aise avec tout ça. et donc pour pour valider on a une poutre type ce mythe value est bien ce mythe on va pas mettre ce mythe on va être validé voilà en fait c'est c'est comme ça on écrit la value pour dire ce qu'on veut d'un autre bouton regardez vous allez voir un input de type ce mythe en fait ça fait un bouton voilà il est comme ça on peut se mettre un break tac comme ça voilà il est là et là on a validé et donc en fait quand on veut quand on clique quand on clique sur l'input de type submit, les amis, et bien on valide tout ce qui est contenu dans les balises formes. D'accord ?

Tout ce qui est là-dedans, toutes les informations qu'on a rentrées, après on peut se récupérer. Bon, ça dépasse le cadre du cours, je ne vais pas vous expliquer comment, mais en fait on va créer une action vers éventuellement une page PHP, une page Python, peu importe. D'accord ?

Et donc là, regardez, je valide, paf ! Et là... on part, bon bien sûr il ne connait pas la page je lui dis action.php qui est là donc ça il ne connait pas mais voilà, vous avez compris le principe ok, et bien les amis on a quasiment fini deux petits bonus et après on a fini ce tour d'horizon de tout ce qu'on peut faire, tout ce qui est en fait utile en HTML, je ne pense pas avoir oublié grand chose, si jamais j'ai oublié vraiment un truc évident, mettez le moi en commentaire, ça m'intéresse mais je ne pense pas donc on va dire mail et envoi de fichiers.

On se met comme ça, et on commente. De la même façon qu'on a fait un header dans le body, tout en bas, il faut qu'on ait un header, on a le body, et en bas on a un footer. C'est le bas du document, juste avant la fermante du body.

On se met un footer comme ceci. Donc là, Pour envoyer un mail, regardez comment on fait. On fait une encre, un encore avec un href.

On dit mailto. Et là, on met l'adresse à laquelle on peut éventuellement vous contacter. Je vais mettre fs-gmail.com.

Ce n'est pas une vraie adresse, mais c'est juste pour que vous compreniez le principe. Et on met écrivez-moi. Et regardez, j'enregistre.

Donc là, on a écrivez-moi. Et si je clique dessus, ça m'a ouvert de l'autre côté ma page Hotmail. enfin ma boîte aux lettres, et ça met l'adresse du destinataire, et nous on peut directement lui écrire. Voilà, tout simplement c'est comme ça que ça marche. Ce truc-là, Mailto, ça ouvre automatiquement les choses.

Donc à savoir aussi, c'est pas ultra utilisé, mais ça peut rendre service sur un site, si vous voulez pas vous embêter à faire un formulaire entier et tout, vous dites juste écrivez-moi, vous donnez votre adresse, et puis après l'utilisateur peut vous contacter. Ok ? Et donc après un A, il faut forcément faire un break. et qu'est ce que je voulais vous montrer drôle je voulais vous montrer comment on télécharge comment on peut envoyer enfin faire télécharger un fichier à votre utilisateur donc regardez là tu vas se créer un notice par exemple une notice point texte voilà on met ceci est une notice ok et là on peut donc proposer à notre utilisateur de la télécharger donc on fait un à on lui on met dans le a notice.txt et on écrit download. On peut même mettre le nom du fichier, on met le nom du fichier, comme ça, et télécharger la notice.

Regardez. Donc en faisant ça, en fait, il faut être en HTTPS pour pouvoir la télécharger. Là, on n'y est pas, en fait. On travaille en local, on n'est pas en connexion sécurisée, puisqu'on travaille chez nous, quoi.

Donc du coup, regardez, si je fais ça, Ah, mais si, ça a marché. Ah, ben, d'accord. Quand je m'étais entraîné, ça n'avait pas marché. OK, très content. Donc là, vous voyez, ça a téléchargé.

Ça a mis nom du fichier, point texte. Hop, je clique dessus. Ceci est une notice.

Donc si vous voulez envoyer des fichiers à votre utilisateur, eh bien c'est comme ça qu'on fait en HTML les amis. Et voilà, on a fait le tour. Nous avons dans ce document, il n'y a que 131 lignes, vous voyez.

Et là, vous avez l'ensemble des choses à utiliser pour créer le squelette. C'est exactement ça, on vient de créer un squelette de page web. Voilà, on a vu le texte, des photos. les listes, rien qu'avec ces trois premiers, vous avez quasiment tout l'HTML.

Les liens aussi, c'est important. Les vidéos, c'est très peu utilisé. Les formulaires, c'est très important. Après, le mail, etc.

Donc voilà, les amis. J'ai fait cette vidéo comme support pour mes élèves. D'ailleurs, s'il y en a certains qui ont regardé jusqu'au bout, je les salue. Sinon, pour les autres, j'ai juste à vous dire... que je vais bientôt faire une vidéo sur CSS, mais que sinon, il y a du contenu, j'ai déjà énormément de contenu sur CSS sur ma chaîne, si vous voulez un petit peu apprendre à embellir cette page, parce que là, c'est vrai qu'elle est quand même très très triste.

Donc voilà. Ah oui, juste un petit passage sur ce qui est en dessous de la vidéo. Donc le fichier complet de la vidéo, vous allez arriver sur ce lien-là, ça c'est un lien GitHub.

Donc si vous voulez tout prendre, vous faites code, et download zip, et là vous avez un zip, d'accord ? Sinon, si vous voulez juste piquer des petites choses dedans, vous allez dans index.html, et regardez, là vous avez tout ce qu'on a codé aujourd'hui. Donc voilà, c'est comme ça que ça se présente.

J'espère que ça vous a plu, comme introduction, si en tout cas vous êtes un pur débutant, j'espère que ça vous a plu. Et puis je vous souhaite de coder, de ne faire que coder pour progresser. Donc voilà. Je vous dis à bientôt, et puis bon code !

Allez, ciao !

Transcript for:Introduction au HTML pour débutants

Transcript for:
Introduction au HTML pour débutants