Cours complet HTML pour débutants à confirmés : guide complet avec des projets concrets

1. Introduction: Êtes-vous prêt à commencer votre voyage dans le monde passionnant du développement Web ? Que vous soyez un débutant ou cherchiez à définir vos compétences, ce cours, un cours complet de CML destiné aux débutants comme aux débutants, guide complet avec des projets du monde réel est votre point de départ idéal. Dans ce cours, vous passerez d'une ignorance absolue du développement Web à la création de projets concrets qui peuvent impressionner n'importe qui. Vous apprendrez les bases du HTML, comment structurer et styliser des pages Web comme un P, concepts essentiels tels que la cimentation du HTML, formatage du texte, les fuites, hyperliens, les images et les attributs, et bien sûr, les techniques avancées pour faire passer vos compétences en développement Web au niveau supérieur Mais nous ne nous limitons pas à la théorie. Dans ce cours, vous travaillerez sur défis passionnants et des projets concrets pour appliquer ce que vous avez appris. À la fin, vous aurez un portefeuille solide et la confiance nécessaire pour créer un site Web époustouflant. Voici ce que vous y gagnerez. Des leçons étape par étape faciles à suivre, projets pratiques pour affiner vos compétences, conseils et des outils pour améliorer la productivité, notamment les extensions de code VS et accès à vie à tous les supports de cours Mon objectif est simple : vous donner les moyens de devenir un développeur Web compétent. Imaginez créer vos propres sites Web ou même démarrer une nouvelle carrière. Tout commence ici. Alors, qu'est-ce que tu attends ? Inscrivez-vous au cours complet de HTML pour que Bigner progresse dès aujourd'hui et fasse le premier pas vers la maîtrise du développement Web. Rendez-vous en classe. 2. Aperçu de haut niveau du développement Web: Très bien, et bienvenue à la première conférence de ce cours. Il y a maintenant de fortes chances que ce cours soit votre tout premier contact avec un développeur Web. Avant de commencer à écrire du code STML et CSS, je pense que ce serait une bonne idée de commencer ce cours par un aperçu de très haut niveau de ce domaine du développement Web Nous allons parler sujets tels que les clients et les serveurs, développement frontal et dorsal, Tati et les sites Web dynamiques, et bien sûr, des principaux langages et technologies de code du développement Web Je vais expliquer tout cela autour du processus qui se produit lorsque nous ouvrons une page Web dans un navigateur. Gardez simplement à l'esprit qu'il ne s'agit que d'un aperçu de haut niveau et que je vais omettre de nombreux détails ici. C'est juste pour que vous puissiez vous familiariser avec certains de ces concepts et termes que tous les développeurs Web connaissent avant de commencer votre propre voyage. Maintenant, lorsque nous essayons d' accéder à ce site Web de W three schools notre navigateur envoie une demande au serveur sur lequel cette page est hébergée sur Internet. Chaque site Web est remorqué sur ce qu' on appelle un serveur, qui est essentiellement un ordinateur connecté à Internet et capable de recevoir des demandes comme celle-ci Encore une fois, lorsque nous naviguons sur un site Web, notre navigateur envoie une demande au serveur sur lequel le site Web est redirigé, où il est hébergé Ensuite, lorsque le serveur reçoit la demande, il prend tous les fichiers qui composent le site Web et les renvoie au navigateur. Nous disons que le serveur envoie la réponse au navigateur, qui contient essentiellement tous ces fichiers le site Web est composé. Maintenant comme vous pouvez le voir sur ces extensions de fichiers, nous avons du code HTML, CSS et également du code JavaScript ici. Ce sont précisément les trois langages que les navigateurs peuvent comprendre. Cela signifie que tout le code qui compose un site Web doit toujours être écrit en HTML, CSS et JavaScript, car encore une fois, sont essentiellement les trois langages de code que tout navigateur peut comprendre. C'est bon. Maintenant, une fois que le navigateur aura reçu ces fichiers HTML, CSS et JavaScript à partir de la réponse du serveur, il prendra le code et affichera le site Web auquel nous essayons d'accéder en fonction du code. Grâce à cela, vous avez déjà une bonne compréhension de ce qui se passe réellement lorsque nous naviguons sur un site Web et des technologies que nous avons utilisées pour créer un site Web processus d'écriture de code HTML, CSS et JavaScript que le navigateur peut comprendre est un processus que nous appelons développement Web frontal. Ainsi, chaque fois que vous entendez quelqu'un parler de développement frontal, cela signifie que les développeurs écrivent le code affiché dans le navigateur, qui est essentiellement le front-end d'un site Web. En fait, c'est essentiellement ce que nous allons apprendre dans ce cours, ou du moins les fondamentaux du développement frontal, fondamentaux du développement frontal l'apprentissage du HTML et du CSS. À titre de remarque, chaque fois que les fichiers qui composent le site Web sont simplement stockés sur le serveur Web et sont ensuite envoyés au navigateur tels nous disons que nous avons un site Web statique, ce qui prendra un peu plus de sens dans une minute lorsque nous parlerons de ce qu'est un site Web dynamique. Mais pour l'instant, gardez à l'esprit qu' un site Web statique est essentiellement un site Web où les fichiers sont simplement envoyés du serveur au navigateur tels quels sans aucune transformation. C'est bon. J'espère donc que cela vous permettra d'apprendre ce qu' est le développement frontal et également les trois technologies de code qui constituent tout site Web. Allons maintenant un peu plus loin et parlons ce que l'on appelle le développement du back-end. Essayons un autre exemple, et cette fois, essayons de comprendre ce qui se passerait lorsque nous essayions d'accéder à un site Web tel que netflix.com Encore une fois, la première étape consiste à envoyer une demande au serveur Web sur lequel netflix.com est hébergé Maintenant, pourquoi un site Web comme Netflix est-il si différent du Web Static W Three Schools que je vous ai montré plus tôt ? Eh bien, un site complexe comme netflix.com est vraiment complètement différent d'un site statique car il y a beaucoup de contenu qui change constamment Comme sur Netflix, de nouveaux films et de nouvelles critiques sont toujours ajoutés au site. nouvelles évaluations et la durée des nouveaux films sont calculées, par exemple, et en fait, un tas d'autres choses de ce genre se produisent toujours. Pour qu'un tel système fonctionne, netflix.com a besoin d'une application complète exécutée sur le serveur, et il a également besoin d' une base de données Pig, qui contient essentiellement tous les cours et toutes les critiques Tous les utilisateurs et vraiment tout le contenu affiché sur leur site Web. Maintenant, pour faire tout cela, les technologies frontales telles que le HTML et le CSS ne suffisent tout simplement pas. En gros, avec ce que vous allez apprendre dans ce cours, vous ne serez pas en mesure de créer quelque chose comme netflix.com. C'est bon. Ainsi, pour écrire des applications qui sont réellement exécutées sur des serveurs Web, les développeurs utilisent des langages principaux tels que NodeJS, PHP ou Python Ces langages extraient les données de la base de données et les assemblaient essentiellement dans les fichiers finaux. sera ensuite envoyé au navigateur en tant que réponse, et l' ensemble de ce processus est appelé développement principal, car il s' agit essentiellement de la partie invisible d'un site Web. C'est agit essentiellement de la partie invisible d'un site Web donc le Ben d'un site Web. Dans cette situation, nous disons que nous avons un site Web dynamique parce que le site Web est assemblé dynamiquement partir de différentes parties du serveur, et cela se produit à chaque fois que quelqu'un visite le site Web. Revenons à l' exemple de netflix.com. En fait, chaque fois que vous visitez Netflix, une nouvelle version du site Web sera générée à partir de la base de données et envoyée au navigateur. D'autre part, si Netflix était un site Web statique, les fichiers du site Web se trouveraient déjà sur le serveur en attendant que quelqu'un y accède. C'est la grande différence entre statique et dynamique. En statique, les fichiers sont déjà prêts et en dynamique, ils doivent d'abord être générés par une application en cours d'exécution sur le serveur. C'est bon. Mais maintenant, le reste du processus est en fait le même qu'avant. Ces fichiers sont maintenant prêts à être envoyés au navigateur sous forme de réponse, qui sera ensuite converti sur le site Web final. Comme celui-ci, nous le voyons ici sur netflix.com. Génial. Maintenant, bien sûr, vous n'avez pas besoin de mémoriser tous ces noms que j'ai mentionnés ici et vous n'avez pas non plus besoin de comprendre en profondeur ce processus. Tout ce que je veux ici, c'est vous donner un aperçu de ce que sont réellement le front-end et le back-end, de ce que sont le navigateur et le serveur , ainsi que de ce que sont les sites Web statiques et dynamiques car je pense vraiment que cela vous sera extrêmement utile au début de votre parcours de développeur. Mais maintenant, pour terminer, examinons de plus près les trois langues du front-end. HTML, CSS et JavaScript. Et à partir du HTML, le HTML est responsable du contenu de la page. Le texte, les images, les boutons et tout le contenu que vous voyez sur une page Web sont toujours écrits dans un fichier HTML. Ensuite, le CSS est responsable de la présentation de ce contenu. Essentiellement pour le style et pour la mise en page des éléments de la page Web. Enfin, JavaScript est le véritable langage de programmation du front. Cela nous permet donc d'ajouter des effets dynamiques et interactifs aux pages Web. Nous pouvons également l'utiliser pour manipuler le contenu ou le CSS afin charger des données à partir de serveurs Web et même pour créer des applications frontales complètes, que nous appelons ensuite applications Web. Maintenant, nous pouvons également utiliser l'analogie de la voiture pour rendre la séparation entre HTML, CSS et JavaScript ici un peu plus facile à comprendre. Dans cette analogie, le HTML représente la structure d'un site Web, comme le châssis et la structure d'une voiture. Par exemple, il fournit les formes de base telles que la carrosserie, les sièges et le moteur. Sans elle, la voiture n' existerait pas, mais à elle seule, elle n'a pas l' air spéciale ou ne fait pas grand-chose. Le CSS est alors le travail de peinture et de décoration intérieure, car il rend la voiture visuellement attrayante en définissant la couleur et le style général. Le CSS améliore l'apparence. Rendre la voiture plus attrayante et plus confortable à utiliser. Enfin, JavaScript est, bien entendu, le moteur et l'électronique. Cela rend la voiture plus fonctionnelle, lui permettant de se déplacer, de régler la radio, les scripts JavaScript, l'interactivité et les fonctionnalités dynamiques, rendant la voiture ou le site Web réactif aux actions de l'utilisateur Est-ce que cela a du sens, d'accord ? Nous terminons ainsi notre introduction au développement Web Nous sommes donc prêts à commencer à travailler avec code HTML et CSS dans ce cours. 3. Préparer notre éditeur de code: Salut, tout le monde. Bon retour. Avant de commencer à écrire une seule ligne de code, nous devons configurer deux outils importants. Ces outils nous aideront à écrire du code de programmation tel que le HTML de manière très simple. Maintenant, quels sont ces outils ? Le premier est un éditeur de code, le second est un navigateur Web. Maintenant, ce que l' éditeur de code signifie ici, est qu'il s'agit d'un outil spécial qui aide les développeurs à écrire, modifier et déboguer du code avec des fonctionnalités telles que la mise en évidence de la syntaxe et la saisie automatique, et c'est exactement pourquoi nous utilisons le code VS ici Cela rend le codage plus rapide, plus efficace et plus facile. Et maintenant, ce que fait un navigateur Web ici, il prend le code. Nous écrivons dans un éditeur de code tel que le HTML et lui donnons vie en le rendant à l'écran. Transformer le code brut en sites Web époustouflants avec lesquels nous interagissons tous les jours. Téléchargeons et installons rapidement les deux. Maintenant, les gars, vous pouvez ouvrir n'importe quel type de navigateur Web. Maintenant, j'ai ouvert Google Chrome. Vous pouvez ouvrir n'importe quel type de navigateur Web et rechercher ici le téléchargement du code VS. Et voilà, vous pourrez voir ce premier résultat, et c' est le site officiel de visualstudo.com C'est donc co dotvisualstudio.com. Il suffit de cliquer dessus. Les gars, vous pouvez maintenant voir que c'est l'interface de visualtudo.com pour télécharger le code VS. D'accord. Vous voyez donc ici que nous avons plusieurs options pour le télécharger. Maintenant, les gars, en fonction de votre système d'exploitation, vous devez télécharger le logiciel. Ainsi, par exemple, maintenant j' utilise actuellement le système d'exploitation Windows, je vais donc sélectionner Windows. Mais si vous utilisez système d'exploitation Linux ou le système d'exploitation Mac, sous cette icône, vous pourrez voir ce bouton de téléchargement, vous pouvez donc simplement cliquer dessus. Mais si vous utilisez Linux, vous pouvez utiliser ces deux options afin de pouvoir l' installer sur votre PC. Maintenant, j'utilise le système d'exploitation Windows. Donc, pour télécharger le code VS, il suffit de cliquer sur ce bouton de téléchargement, et vous voyez ici qu'il me demande de le télécharger. Je sélectionne donc les téléchargements et je clique sur le capuchon. Maintenant, vous voyez que mon installation de code VS est en cours. Les gars, à l'avenir, l'interface de ce site Web pourrait être modifiée. Mais pour télécharger ce logiciel, vous pouvez visiter ce code.visualstudio.com, et vous pouvez consulter ce site Web et vous pouvez et vous pouvez D'accord ? Maintenant, les gars, nous avons téléchargé avec succès le logiciel pour Visual Studio. Maintenant, je clique simplement sur cette option de téléchargement et je clique simplement sur Visual Studio. Vous voyez donc ici qu'un Popo sera affiché devant vous. Maintenant, les gars, installons ce logiciel. J'installe donc le logiciel dans Windows. Maintenant, il vous suffit de cliquer sur « J'accepte l'accord », puis de cliquer sur le bouton suivant. Ici, le code VS demande où installer ce code VS. Je le garde donc par défaut et je clique sur le bouton suivant. Et il vous suffit de cliquer sur Suivant. Les gars, vous voyez ici que nous avons plusieurs cases à cocher. Donc pour l'instant, il vous suffit de cocher toutes ces cases. Les gars, ensuite, je vais vous montrer pourquoi je coche toutes ces cases, puis il vous suffit de cliquer sur le bouton suivant et de cliquer sur ce bouton Installer Maintenant, notre code VS est en train de s' installer sur notre PC. Les gars, voici comment installer le code VS sur votre PC. Vous pouvez maintenant lancer ce code Visual Studio. Pour l'instant, il suffit de décocher cette case et de cliquer sur le bouton Terminer. Félicitations, les gars, pour avoir réussi à télécharger le code Visual Studio sur votre PC. Maintenant, il y a encore une chose que nous devons configurer. Il ne nous reste plus qu'à créer un nouvel onglet ici et à installer le navigateur Chrome. Maintenant, je montre ce processus. Donc, si le navigateur Chrome n'était pas installé sur votre PC, vous pouvez suivre ce processus. Il ne vous reste plus qu'à rechercher ici le navigateur Chrome. Ou vous pouvez rechercher le téléchargement de Chrome. Et après cela, il vous suffit de cliquer sur ce premier lien. Les gars, ici vous voyez sur ce site Web que vous pouvez télécharger le Chrome pour votre propre système d'exploitation. Les gars, ce site Web détectera automatiquement le système d'exploitation que vous utilisez. Maintenant que j'ai le navigateur Chrome sur mon PC, pour le moment, je n'ai pas besoin du navigateur Chrome pour l'installer. Mais si vous n'avez pas le navigateur Chrome, vous pouvez simplement cliquer sur ce bouton de téléchargement. Vous pouvez donc installer le logiciel sur votre PC. D'accord ? L'installation est donc assez simple. Comme je vous l'ai montré dans le code VS, il vous suffit de cliquer sur le suivant suivant et votre navigateur Chrome sera également configuré. D'accord ? Donc je te laisse ça. Maintenant, ouvrons simplement le code VS pour le moment. Maintenant, je vais simplement minimiser toutes ces choses, donc je vais aller sur mon bureau. Les gars, ici, nous avons l'icône du code VS. Après avoir installé avec succès le code VS sur votre PC, vous pourrez voir cette icône de code VS. Vous pouvez simplement double-cliquer ici pour ouvrir ce Visual Studio. Les gars, après avoir ouvert le code VS pour la première fois, vous pourrez voir cette interface. Vous voyez donc que nous avons ce code Visual Studio, et ici vous voyez que nous pouvons créer un nouveau fichier à partir d'ici, afin que nous puissions ouvrir un dossier à partir d'ici. Nous pouvons donc faire un tas de choses à partir d'ici, mais je ne préfère pas faire toutes ces choses à partir d'ici. Je vais donc simplement clore cet accueil ici. Maintenant, les gars, la première chose que nous allons faire ici est d' installer une extension. Donc, ici, nous avons un onglet d'extension, vous suffit donc de cliquer dessus. Donc, vous voyez ici que nous avons de nombreuses extensions ici. Maintenant, l'extension Water est qu'une extension pour VS code est essentiellement une petite fonctionnalité qui améliorera un peu notre éditeur de code. Ainsi, par exemple, comment nous utilisons les extensions dans Google Chrome, nous allons donc ajouter des extensions dans notre Google Chrome pour faciliter l'utilisation de Google Chrome. C'est donc le même concept ici. Maintenant, la première extension que nous allons installer ici est plus jolie recherche ici comme ceci et assurez-vous que votre connexion Internet est activée. D'accord. Et vous voyez, je pense que c'est peut-être le premier résultat. Cliquez dessus. Maintenant, les gars, installons cette plus jolie extension. Il vous suffit donc de cliquer sur ce bouton d'installation et votre preter sera installé avec succès Les gars, peu importe ce que vous écrivez dans l'éditeur de code, le plus beau ce qu'il fera, donc il formatera bien notre code. D'accord ? Maintenant, les gars, nous avons cette mise à jour automatique ici, vous pouvez donc cocher cette case. Donc, ce qu'il fera signifie qu'il mettra automatiquement à jour le logiciel si des mises à jour sont disponibles. D'accord. Donc, une fois que nous aurons commencé à écrire notre code, je vous montrerai comment fonctionne ce préteur Alors maintenant, vous pouvez simplement fermer. Maintenant, faisons entrer en collision cette barre latérale pour obtenir cette extension, les gars, il suffit de faire quelques réglages Maintenant, ici, dans le coin inférieur, vous pourrez voir cette icône en forme d'engrenage Cliquez simplement dessus et vous voyez ici que nous avons l'option de configuration, cliquez dessus, et ici nous pouvons rechercher n'importe quel paramètre. La recherche du paramètre est le moyen le plus simple de le trouver. Maintenant, le premier paramètre que nous allons rechercher ici est le formateur par défaut Maintenant, vous voyez ici le formateur par défaut, dans votre cas, il peut être différent Alors maintenant, je l'ai déjà défini comme plus joli. Il vous suffit donc de cliquer sur ces options et de rechercher plus jolie Maintenant, vous voyez ici que nous avons cette option plus jolie C'est donc un formateur de code plus joli, ES B et P. Il suffit de cliquer dessus Maintenant, pourquoi nous conservons ce formateur par défaut. Alors maintenant, nous voyons du code VS selon lequel chaque fois que nous enregistrons nos fichiers, nous avons besoin de ce formateur de code plus joli pour formater notre D'accord ? Maintenant, quand formater notre code, il ne nous reste plus qu'à définir un autre paramètre qui est la sauvegarde automatique Il vous suffit de rechercher Autosave. Donc dans votre cas, c'est peut-être ça désactivé. Il vous suffit de cliquer dessus pour changer de focus. En cas de changement de focus, ce que cela fera signifie que chaque fois que vous fermerez cet onglet ou chaque fois que vous passez de cet onglet à un autre, seront automatiquement enregistrés vos fichiers seront automatiquement enregistrés sans que nous ayons à faire les choses à notre place. D'accord ? C'est également très utile car nous n'avons pas à perdre de modifications si nous désauvegardons les fichiers D'accord ? Maintenant, les gars, nous en avons terminé avec les réglages ici. Maintenant, vous pouvez simplement fermer les paramètres ici à partir d'ici. Il vous suffit donc de cliquer sur cet onglet d'extension. Les gars, encore une dernière extension que nous allons installer ici, elle s'appelle Monophy Donc, les gars, il vous suffit de rechercher Monocy ici, et vous voyez ici que nous avons ce thème monoci vous suffit de cliquer dessus, et vous voyez ici que nous avons un thème pour notre code VS. Pour l'instant, les gars, j'ai installé ce thème, mais dans votre cas, vous pouvez installer ce thème monoci D'accord. Maintenant, vous pouvez voir ici l'aperçu de ce thème. Donc, ce que fera ce thème signifie qu'il changera les couleurs de votre code. Par exemple, nous voyons ici que différentes parties du code sont surlignées de différentes couleurs. D'accord, cela rendra notre code plus lisible. Les gars, par défaut, le code VS suggère un thème de base, mais je vous suggère d'installer un thème spécial comme un thème Monochi, afin que vous puissiez installer le thème comme celui-ci. D'accord ? Maintenant, un dernier réglage que nous devons faire ici. Il vous suffit de cliquer sur ces paramètres. Ici, nous avons des thèmes, et dans le thème, nous avons ce thème d'icône de fichier. suffit de cliquer dessus, et je garde mon fichier sur le thème Sety, mais cela n'a pas d'importance pour vous Vous pouvez également simplement le définir comme Sety. D'accord. Avec cela, nous avons maintenant terminé de configurer le code VS pour le moment. Vous êtes maintenant prêt à écrire votre toute première ligne de code, et c'est exactement ce que nous allons faire lors de notre prochaine conférence. On s'y voit bientôt. 4. Votre toute première page Web !: Bon retour. Écrivons maintenant notre toute première ligne de code et créons notre toute première et toute petite page Web. Nous voilà de retour dans le code VS. Maintenant, fermons celui-ci ici, et je vais simplement fermer cet onglet d'extension Je vais donc le réduire et nous allons passer au premier onglet. Ici, vous voyez l'onglet Explorer, cliquez dessus, et ici vous voyez à l'intérieur de cet onglet Explorer, les gars dans le code VS, nous devons toujours être dans un dossier, et ce dossier s'appelle le dossier du projet. heure actuelle, aucun dossier n'a encore été lancé, alors commençons par le faire. Et maintenant, je vais juste sur mon bureau et je vais créer un dossier ici sur mon bureau. Je vais cliquer sur mon bureau et je vais cliquer sur Nouveau pour créer un dossier. Maintenant, je donne à ce dossier le nom 01 pour tester comme celui-ci. Vous pouvez conserver n'importe quel nom de dossier de projet. Donc je le garde ici. Donc, dans mon cas, je le fais en ce moment sur mon bureau. Donc, si je crée un dossier dans un autre emplacement, cela pourrait me prêter à confusion. C'est pourquoi je le fais sur mon bureau. Revenons maintenant au code VS. Maintenant, cliquons sur ce dossier ouvert et je vais sélectionner ce bureau Et vous voyez ici que notre dossier est là 01 testing, que nous avons créé ici en ce moment. Il suffit de le sélectionner et de cliquer sur ce dossier de sélection. Vous voyez donc que nous avons une nouvelle page d'accueil ici. Maintenant, vous voyez ci-dessous le début, nous pouvons créer un nouveau fichier à partir d'ici. Mais l'autre solution est de créer un nouveau fichier à partir d'ici. Donc, en survolant cette icône de fichier, voici les deux manières différentes de créer de nouveaux fichiers dans le dossier du projet, et je préfère en fait celle-ci ici Alors, cliquons dessus. Nous sommes donc sur le point de créer notre toute première page Web, et une page Web n'est en fait qu'un fichier DML, que nous appelons index Pointez le code HTML et appuyez sur Entrée. Il s'agit essentiellement du fichier avec l'extension de fichier HTML, et nous l'appelons index parce que c'est le nom par défaut de la première page Web de tout site Web. L'index est fondamentalement toujours le point d'entrée de tout site Web, et toutes les pages Web doivent donc toujours avoir un fichier HTML à points d'index. Bien, gardez toujours cela à l'esprit. Appelez le point d'index HTML de votre toute première page. Maintenant, mon objectif dans cette conférence n' est pas de vraiment vous apprendre le HTML. le moment, tout ce que je veux faire est de créer un nouveau fichier HTML ici et d'ajouter un peu de code ici à l'intérieur de ce fichier HTML, puis de voir le résultat dans le navigateur. Ainsi, vous pouvez écrire votre toute première ligne de code et voir le résultat de l' écriture de ce code dans un vrai navigateur Web. Encore une fois, je ne commence pas encore vraiment à enseigner le HTML, et donc au lieu d'écrire une structure Web complète, comme nous en avons généralement besoin, nous allons utiliser une petite feuille principale que nous pouvons utiliser dans le code VS. Je vais donc écrire un point d' exclamation, et je clique simplement sur ce met Ambribson Ici, vous voyez, nous avons créé notre structure de document TML. En gros, vous voyez, nous avons une tête ici et nous avons un corps. Toutes ces choses un peu plus tard. Maintenant je m'intéresse à ce titre, ma première page web. Je zoome donc un petit peu pour que vous puissiez mieux voir. Maintenant, je vais écrire ici moins de H un, il suffit d'écrire en minuscules et fermer ce symbole supérieur à. Ici, vous voyez que VS code place cette autre partie pour nous. En gros, cette autre partie du H, ça n'a plus vraiment d' importance pour le moment. Maintenant, écris simplement « Bonjour tout le monde ». Il s'agit donc essentiellement d'une longue tradition que nous suivons. Ainsi, chaque fois que vous écrivez notre toute première ligne de code, nous écrivons généralement hello world dans n'importe quelle programmation. OK ? C'est donc la meilleure façon d'écrire notre toute première ligne de code. OK. Maintenant, la ligne suivante, je vais écrire ici. Vous n'avez donc qu'à nouveau à écrire moins que le symbole, puis vous devez écrire P. Donc ici P représente le paragraphe. Et ici, Hach un représente le titre principal. Il s'agit essentiellement d'un titre. Il suffit de fermer ce symbole supérieur à celui-ci et à l'intérieur de celui-ci, je vais écrire ici. J'écris ici mon nom. Bien sûr, vous pouvez écrire votre nom dans ce cas, et je suis en train de vous écrire et ceci est ma toute première page Web. OK. Maintenant, dans ce fichier HTML, nous venons d'écrire nos deux premières lignes de code. OK ? Il ne nous reste plus qu'à enregistrer ce fichier pour voir le résultat de ce code. OK ? Maintenant, pour enregistrer cela, il vous suffit d'appuyer sur votre clavier en tant que Contrôles ou commandes. Ou l'autre façon d' enregistrer le fichier est accéder à ce fichier, et vous voyez ici que nous avons une option de sauvegarde. Vous pouvez simplement cliquer dessus ou utiliser un raccourci clavier comme commandes. Mais actuellement, nous utilisons AutoSave, nous n'avons donc pas à enregistrer nos fichiers manuellement Donc un code fait le travail pour nous, d'accord ? Ou vous pouvez simplement cliquer ici pour enregistrer les fichiers . Maintenant, le fichier a été enregistré, et vous remarquerez peut-être aussi que le formatage a un peu changé, et cela est dû à l' extension plus jolie que nous avons installée dans la dernière vidéo N'oubliez donc pas que PreaExtension consiste à formater notre code automatiquement chaque fois que nous l'enregistrons Et c'est exactement ce que nous venons de se passer. Ajoutons donc quelques espaces ici. Et si je sauvegarde nos fichiers, Preter formatera automatiquement ce code pour nous Je clique donc à l'extérieur d'ici, et le voici. Preter met en forme notre code, donc sans que nous ayons à le faire Maintenant, nous voyons ici que nous avons beaucoup d'indentations. L'indentation signifie donc qu'elle ajoutera des espaces. Les gars, pourquoi nous devons formater notre code pour le rendre plus lisible. OK ? C'est donc le pouvoir de Prettier, et cela garantira que votre code doit toujours avoir le même aspect que le code de la vidéo Grade et donc maintenant nous avons ce fichier HTML à points d'index et nous pouvons l'ouvrir dans le navigateur. Alors maintenant, je vais retourner sur mon bureau. Où se trouve donc ce fichier. Donc, dans ce dossier de test, voici notre fichier. Maintenant, pour l'ouvrir, vous pouvez simplement double-cliquer dessus ou vous pouvez simplement écrire, cliquer dessus et cliquer sur Openw et le sélectionner comme Google Chrome Voici notre toute première page Web que nous venons de créer manuellement dans le code VS. Génial. Et c'est vraiment incroyable, si vous me demandez. Alors félicitations et bravo pour votre toute première page Web ici. Mettons donc ce Google Chrome sur le côté droit et le code VS sur le côté gauche. Maintenant, je vais simplement fermer cet onglet Exploertab pour que vous voyiez ici que nous avons cette rubrique H. Donc, ce bonjour tout le monde, vous le voyez ici dans le navigateur Web, ce bonjour tout le monde en gros texte en gras. Ensuite, nous avons écrit un paragraphe. C'est donc dans le texte normal, comme vous pouvez le voir. Et encore une chose qui figure sur notre page Web, c'est le titre de cette page Web. Vous voyez donc ici exactement la même ligne que celle que nous avons écrite dans le titre de notre code VS. C'est donc exactement imprimé sur le navigateur Web. Donc, une fois de plus, le code que nous avons écrit ici dans notre document HTML est désormais reflété dans le véritable navigateur Web. En parlant de navigateur Web, j'utilise Google Chrome pour tester tous les cours que nous allons écrire tout au long de ce cours. Je vous conseille donc vivement d'utiliser également Google Chrome pour toujours tester le code que vous écrivez afin que nous puissions à nouveau nous assurer que vous obtenez exactement les mêmes résultats que ceux que vous voyez dans la vidéo du cours. OK. Et c'est en fait suffisant pour cette toute première vidéo de codage, et j'espère que vous trouverez vraiment les idées que je voulais vous montrer dans cette conférence. Donc, en gros, en commençant par créer un dossier de projet, puis en ouvrant ce dossier de projet dans le code VS. Donc, dans ce dossier, voici le dossier de test. Ensuite, créer un fichier ML, ajouter du code au fichier et enfin ouvrir le document HTML dans un véritable navigateur Web, tel que Google Chrome, où nous voyons ensuite le résultat. Donc, en gros, la traduction de notre code en un résultat visuel. J'espère que vous avez pris du plaisir à le faire et je vous retrouve dans la prochaine vidéo. 5. Télécharger le matériel de cours: Maintenant, l'une des choses dont vous avez besoin pour suivre ce cours est d' avoir accès à certains fichiers de démarrage. Dans cette vidéo, je vais vous montrer très rapidement comment accéder à ces fichiers. L'intégralité des fichiers de démarrage, ainsi que les fichiers finaux du cours, sont hébergés dans ce que l'on appelle le référentiel sur Github Github est essentiellement une plateforme de code laquelle la plupart des développeurs téléchargent leur code afin de le partager collaborer avec d'autres développeurs ou simplement pour Notre dépôt est donc essentiellement un dossier contenant un tas de code ou d'autres fichiers. Et chaque dépôt est accessible par une URL, et ce dépôt est disponible sur cette URL, mais ne vous inquiétez pas, vous n' avez pas à le saisir. Les gars, dans la section ci-dessus de ce cours, je vous ai fourni le lien vers cette page Gu afin qu'à partir de là, vous puissiez simplement cliquer sur le lien et accéder directement à la page des ressources. C'est vrai. Je suis sûr que vous pouvez trouver ce lien. Mais malheureusement, vous ne trouvez pas le lien, alors vous pouvez simplement taper cette URL Github Donc, dans ce dépôt, comme je le disais, nous avons quelques fichiers de démarrage et nous avons également les fichiers finaux. Passons donc d'abord aux fichiers de démarrage. Et ici, vous pouvez voir un dossier. Donc, dans les fichiers de démarrage, j'ai ces principes fondamentaux du DML et dans ce dossier, je suis confronté à ces défis Dans ce document, je vous ai fourni une image, et nous avons un fichier de contenu. Si je le réduis et que vous voyez ici, nous avons un dossier de mots qui est IMG. Nous avons donc ici toutes les images. Donc, quand nous utiliserons ces images cela signifie lorsque nous construirons notre projet, n'est-ce pas ? OK. J'ai également inclus le code final afin que vous puissiez toujours comparer votre propre code au code que j' écris dans les vidéos, ce qui sera très important pour que vous puissiez comparer votre code au mien au cas où vous auriez des erreurs dans votre code. Donc, comparer votre code au mien de cette manière sera toujours le moyen le plus simple de trouver des erreurs, trouver des erreurs, vous êtes peut-être en train de taper votre code, et cela se produira à coup sûr. Cela arrive à tous les débutants. Dans ce cas, vous pouvez simplement accéder au code final. Enfin, ci-dessous, il y a aussi ce document de retour qui contient les questions les plus fréquemment posées. Avant de commencer le cours, il peut être judicieux de lire rapidement ces questions qui ne vous prendront que deux à trois minutes, mais je suis sûr que cela vous aidera à dissiper certains doutes que vous pourriez avoir au cours du cours. Quoi qu'il en soit, ce que nous sommes vraiment venus ici c'est pour avoir accès au code correctement. Donc, pour télécharger ce code, vous pouvez simplement cliquer sur ce bouton vert qui est le code, puis vous devez simplement choisir ce zip de téléchargement. Je sauvegarde simplement ces fichiers dans mes téléchargements et je cliquerai sur ce bouton. Maintenant que mon téléchargement est terminé, je viens de le couper. Je retourne juste sur mon bureau et je le colle ici. Et voici nos dossiers. Maintenant, pour l'extraire sur Mac, vous suffit de double-cliquer dessus, et sous Windows, il vous suffit de cliquer avec le bouton droit puis de cliquer sur tout extraire et de cliquer sur ce supplément. Nous avons maintenant tous ces fichiers, que nous avons extraits maintenant. Nous n'avons donc plus besoin de cette archive zip. Supprimons donc ceci. Donc maintenant, nous avons essentiellement nos fichiers. Maintenant, nous pouvons simplement ouvrir ce dossier. Et voilà, les gars, nous avons ici un dossier de démarrage et un dossier final. Passons donc aux fichiers de démarrage, et j'ai ici un dossier sur les fondamentaux du HTML. Nous avons donc ici toutes ces images, et bien sûr, nous avons un autre dossier contenant des défis. Nous avons donc les fichiers de démarrage et avons également fourni un fichier de contenu. Donc, en gros, le texte du projet, nous avons les fichiers de démarrage et voici les fichiers pour les prochaines conférences. Maintenant que les fichiers de démarrage sont en place, nous sommes prêts à commencer à apprendre le HTML. 6. Introduction au HTML: Bon retour. Voyons maintenant très rapidement ce qu'est réellement le HTML et ce que nous pouvons en faire. Donc, en gros, HTML est l'abréviation de langage de balisage hypertexte. Et souvenez-vous que nous avons appris plus tôt que le HTML est l'une des principales technologies Web, même titre que le CSS et le JavaScript. heure actuelle, le HTML est un langage de balisage que les développeurs Web peuvent utiliser pour structurer et décrire l'intégralité du contenu de n'importe quelle page Web Remarquez donc comment j'ai dit langage de balisage parce que le HTML n'est pas vraiment un langage de programmation C'est un langage de balisage parce que nous l'utilisons pour décrire quelque chose Et dans le cas du HTML, nous décrivons le contenu à l'aide d'éléments. Nous avons donc différents éléments que nous pouvons utiliser pour décrire différents types de contenus. Ainsi, par exemple, nous avons l'élément P que nous avons déjà utilisé dans le cours où nous avons créé notre toute première page Web. Nous utilisons donc l'élément P pour créer un paragraphe. Mais nous avons vraiment toutes sortes d'éléments différents, notamment des éléments pour créer des liens, des en-têtes de page, des images, des vidéos et bien plus encore, au fur et à mesure que nous apprenons tout au long du cours Ensuite, comme nous l'avons également appris lors de cette conférence, où nous avons créé notre toute première page Web, les navigateurs Web tels que Google Chroms comprennent essentiellement le code HTML et peuvent le rendre sous forme de site Web final Donc, site Web que nous pouvons voir dans le navigateur Web. D'accord ? C'est donc essentiellement ce qu' est le HTML et ce que nous pouvons en faire. Mais maintenant, zoomons un peu et examinons l'anatomie de l'élément HTML. Donc, en gros, jetez un œil aux éléments de base de l'élément HTML. Et nous allons prendre un exemple de l'élément d'en-tête ici, comme vous pouvez le voir. Tout cela est donc en fait l'élément lui-même. Maintenant, un élément TMR est généralement composé de trois parties. première est la balise d'ouverture, qui est le nom de l'élément. Dans ce cas, il s'agit donc du H enveloppé dans les symboles inférieur et supérieur à. Les gars, ils ont d'autres noms, mais c'est ainsi que j'aime appeler ces symboles. Il est donc inférieur à H un, puis supérieur à. Ensuite, nous avons essentiellement le contenu de l'élément. Dans cet exemple, il ne s'agit que de texte, mais il peut y avoir d'autres types de contenu. Par exemple, un élément peut contenir un autre élément, que nous appelons alors élément enfant. De plus, certains éléments tels que les images n'ont en fait aucun contenu et n' ont qu'une balise d'ouverture, et tous ces éléments deviendront, bien entendu, très intuitifs lorsque nous commencerons à écrire du HTML. C'est juste pour que tu saches de quoi je parle. Lorsque je parle de balise d'ouverture, de balise de fermeture ou de contenu, et que je parle de balise de fermeture, c'est essentiellement la même chose que la balise d'ouverture, mais avec une barre oblique Nous ouvrons donc cet élément de titre simplement avec cette balise H one, puis nous le fermons avec une barre oblique D'accord ? Maintenant, pour les éléments n'ont pas contenu tel que l'élément image que j'ai mentionné précédemment, nous omettons en fait la balise de fermeture Dans ce cas, nous n' avons que le tag d'ouverture, et c'est tout. Et nous verrons cela en action, bien sûr, une fois que nous aurons commencé à intégrer des images dans nos pages Web. D'accord, et c'est vraiment tout ce dont vous avez besoin pour commencer à apprendre le HTML dans la pratique, c'est exactement ce que nous ferons dans la prochaine conférence. 7. Structure de document HTML: Bon retour. La première chose que nous devons apprendre sur le HTML est donc la structure commune des documents HTML. Donc, une structure que chaque document HTML doit avoir. Mais commençons par jeter un coup d'œil très rapide au projet que nous allons construire tout au long de cette section. Nous sommes donc en train de créer ce site Web de Coding Ninja. Donc, sur ce site de codage Ninja , nous avons des liens, des en-têtes et des images. Vous voyez ici que nous avons du texte en gras, et ici nous avons une liste Il y a donc un tas de choses que nous allons apprendre dans cette section pour qu'à la fin, vous ayez appris les bases du HTML et nous finirons par vous ayez appris les bases du ce projet. OK. Quoi qu'il en soit, mettons-nous enfin au travail. Et la première chose que nous devons refaire ici est de créer notre dossier de projet. Revenons donc à notre bureau. Et vous voyez ici que nous avons un dossier, que nous avons téléchargé depuis Github dans la dernière section Ouvrons donc ceci, et je passe au fichier de démarrage. Et vous voyez ici que nous avons un dossier , les fondamentaux du DML Je prends juste une copie de ce dossier et je le colle sur mon bureau. Voici notre dossier. Maintenant, au lieu de le faire, vous pouvez également simplement utiliser ce dossier ici comme dossier de projet. Mais cela peut entraîner des confusions. Je préfère donc toujours simplement copier ce dossier ici vers un autre endroit. OK ? Revenons maintenant à notre code VS. Maintenant, pour créer simplement une nouvelle fenêtre dans le code VS, il suffit de cliquer sur ces barres et de cliquer sur ce fichier. Et ici, vous pouvez créer une nouvelle fenêtre en cliquant ici ou vous pouvez utiliser un raccourci clavier comme Control Shift E. Je vais donc simplement cliquer dessus, et voici notre nouvelle fenêtre de code VS. Alors je ferme juste ça. Je ferme donc cette fenêtre. Mettons-le donc sur le côté gauche. Et le navigateur sur le côté droit. Clôturons maintenant cet accueil. Ici, vous devez cliquer sur cet onglet Explorateur pour le développer. Et ici, nous devons cliquer sur ce dossier ouvert. Donc, dans le code VS, vous devez toujours l'avoir dans ce qu' on appelle un dossier de projet, comme je vous l'ai dit plus tôt. Cliquons donc sur ce dossier ouvert. Et là, je clique simplement sur mon bureau. Je sélectionne simplement ces principes fondamentaux du ML, que je n'ai qu'à copier-coller. Je vais le sélectionner et je vais cliquer sur ce dossier de sélection. Maintenant, les gars, nous sommes dans le dossier du projet que nous avons créé avec succès . Donc, vous voyez ici que nous avons quelques images. Donc, en gros, un fichier texte. Nous avons donc ici beaucoup de contenu. Ensuite, nous pouvons le copier. Nous le verrons donc un peu plus tard. Je vais donc fermer ceci. Donc, vous voyez, les gars, tout d'abord, nous devons créer un fichier. Je veux donc simplement créer un nouveau fichier ici. Je lui donne donc simplement un nom sous forme de point d'index HTML. Vous voyez donc que nous avons un fichier HTML avec l'extension point HTML, et nous devons toujours donner le nom de notre fichier sous forme index lorsque nous créons notre tout premier document HTML. Donc, les gars, comme vous vous en souvenez dans la conférence précédente, nous avons utilisé achieve Set pour créer notre structure de document HTML. Nous avons utilisé ce point d'exclamation. Ensuite, nous avons cliqué dessus, et vous voyez ici que notre structure de document HTML est créée en utilisant simplement un aide-mémoire Mais la première chose que nous devons apprendre en HTML est la structure courante des documents TML Tout d'abord, je veux zoomer. Donc, les gars, pour zoomer, afin de voir notre texte plus clairement, vous devez appuyer sur votre clavier comme commande et vous devez faire défiler votre souris dans le sens supérieur. Comme vous pouvez le voir ici. Alors les gars, supprimons tout cela, et écrivons maintenant la première chose en DM Écrivons Moins qu'un symbole et un point d'exclamation, puis nous devons écrire en majuscules les mots qui suivent le temps imparti. Et ici, vous voyez que le code VS essaie de le compléter automatiquement pour nous Écrivons-le donc à la main pour que ce code reste gravé dans votre esprit de façon permanente. Écrivons donc après ce code HTML, et nous devons fermer ceci. Écrivez donc ceci «   plus grand qu'un symbole ». Donc, ce que ce type de document dit à notre navigateur, nous utilisons la version HTML 5 pour créer notre page Web. Après cela, les gars, comme vous savez, pour créer un élément, nous devons toujours écrire moins que symbole, et nous devons fournir le nom de l'élément, et nous devons fermer l'élément. Alors maintenant, quel élément nous utilisons signifie nous créons un élément HTML directement dans le code HTML en minuscules, puis que nous fermons l'élément par une valeur supérieure Le code VS ferme donc automatiquement cette balise de fermeture. Les gars, si vous ne voulez pas que ce code VS ferme automatiquement cette balise, alors les gars, vous pouvez accéder aux paramètres et cliquer sur les paramètres. Et ici, vous devez rechercher une balise de fermeture automatique. Ici, vous voyez que notre balise de fermeture automatique est activée, il suffit de la décocher et nous l'activerons un peu plus tard Alors pour l'instant, écrivons-le à la main. Nous allons donc nous entraîner en écrivant du code HTML. Alors les gars, fermons cette barre latérale pour en faire un onglet explorateur pour nous donner un peu plus d'espace Ici, vous voyez des gars dans la balise HTML, nous devons créer deux éléments. Le premier est le headtag, créez-le moins qu' un symbole et une tête. Ensuite, immédiatement, nous devons également fermer cette tête. Et ici, nous devons créer l'élément corporel. Les gars, quel que soit l'élément que vous ouvrez, vous devez également le fermer comme ça. Lors de la fermeture, vous devez indiquer une barre oblique ici. Maintenant, les gars, comme vous pouvez le voir ici, nous avons un type de document. Ensuite, nous avons un élément HTML, et dans cet élément TML, nous avons un élément de tête et nous avons également un élément de corps Cet élément HTML est le parent de cette tête et de ce corps. Ainsi, chaque document HTML doit toujours commencer par un élément HTML comme celui-ci. Maintenant, l'élément principal est essentiellement destiné aux éléments qui ne sont pas visibles dans la fenêtre du navigateur. Maintenant, cet en-tête contiendra le titre de la page, des informations supplémentaires sur la page, un lien vers des fichiers CSS ou d'autres choses. Au cours du cours, nous allons remplir cette rubrique de toutes sortes d'éléments différents. Mais pour l'instant, tout ce que je veux faire, c'est juste préciser le titre. Utilisons l' élément title ici. Et ce titre, il faut aussi le fermer. Donc, dans ce titre, je veux simplement appeler ce titre le langage de base du Web. D'accord, alors le corps correspond en fait à tous les éléments qui seront visibles sur la page. Ainsi, tous les éléments que nous voyons ici dans le navigateur seront toujours à l'intérieur de l'élément body. Et juste pour vous le montrer, au lieu de le laisser vide, laissez-moi mettre du code ici. Je vais à nouveau utiliser l' élément d'en-tête, alors fermons ceci. Je prends donc simplement ce titre et je le colle ici. Fermons maintenant celui-ci en H. le moment, nous n'avons pas encore enregistré ce fichier, mais au fur et à mesure, Preter le formatera à nouveau pour nous Faisons une sauvegarde, et vous verrez que nous avons maintenant l'indentation correcte Et par indentation, je veux dire que cet élément de tête se trouve à l'intérieur de cet élément HTML Nous avons donc un onglet ici, donc quelques espaces ici. Après cela, vous voyez qu'à l'intérieur cet élément de tête, nous avons un titre ici. Ici, nous avons un peu plus d'indentation, nous avons donc plus d'espaces ici Donc, en gros, il ne s'agit que d'un onglet ici. Donc, si je clique sur Tab K, cela ajoutera un autre niveau d'indentation Donc, en gros, il s'agit simplement d'une taille d'onglet. Donc, si j'appuie sur un onglet de mon clavier, vous voyez ici. Maintenant, c'est au même niveau que le titre, ce qui n'a aucun sens car le titre se trouve également à l'intérieur de la tête, n'est-ce pas ? Nous avons donc la tête à l'intérieur du DML, puis à l'intérieur de la tête, nous avons cet élément de titre Il possède donc un autre niveau d'indentation. OK ? Maintenant, c'est juste pour des raisons esthétiques afin de rendre notre code plus lisible. Le navigateur ne se soucie donc pas vraiment de cette indentation, mais il est tout de même important pour nous de pouvoir lire le code, et je pense que nous sommes prêts maintenant à ouvrir dans le navigateur Revenons donc à notre bureau. Ouvrons notre dossier de projet, donc les principes fondamentaux du HTML, et double-cliquons simplement sur ce fichier HTML à points d'index. Et voilà, c'est du beau travail. Mettons-le sur le côté droit, et sous forme de code sur le côté gauche. Fermons donc celui-ci. Alors je le mets juste au premier plan. Je vais garder cette question ouverte afin que nous puissions voir ce que nous voulons réaliser au final. OK. Avec cela, nous apprenons la structure de base du HTML. Passons donc rapidement en revue. Ainsi, chaque document HTML doit toujours commencer par ce que l'on appelle le type doc. Cela permettra donc au navigateur de savoir ce que nous utilisons réellement en HTML dans ce fichier. Et tous les navigateurs sauront qu'ils doivent utiliser la spécification du fichier HTML pour afficher ce code HTML. Ensuite, nous avons l'élément HTML, qui est toujours le parent de l'élément head et de l'élément body. Cette structure est donc toujours la même dans toutes les pages Web. Nous avons toujours besoin d'un élément HTML avec une tête et un corps. Maintenant, ce que nous mettons dans la tête et dans le corps est facultatif, mais avoir ces deux éléments n' est pas facultatif, nous avons donc toujours besoin d'une tête et d'un corps. Maintenant, dans cette situation, tout ce que nous mettons dans la tête n' est qu'un élément de titre. Mais ici, nous pouvons mettre toutes sortes d'autres choses qui ne sont pas visibles et qui ne sont pas affichées dans cette partie principale du navigateur. autre côté, le contenu que nous voulons réellement afficher ici doit aller dans l'élément body. C'est pourquoi cet élément H one apparaît sur notre page Web. OK ? Il s'agit de la structure d' estimation de base pour chaque document d'estimation que vous devez vraiment connaître. Passons maintenant à la prochaine conférence où nous apprendrons quelques nouveaux éléments pour travailler avec du texte. J'espère donc vous y voir bientôt. Merci. 8. Éléments de texte en-têtes, paragraphes, caractères gras et italiques: Salut, les gars, bon retour. Dans cette conférence, nous allons continuer à apprendre à annoter du texte. Nous allons donc continuer à utiliser certains titres, certains paragraphes, et nous apprendrons également à mettre le texte en gras et en italique Et commençons par les titres. Donc, généralement, le but des titres est de diviser de gros blocs de texte en sections plus logiques et d' ajouter un titre pour chacune de ces sections Vous avez déjà découvert un titre appelé titre H un, mais il existe en fait six titres différents Il existe donc une hiérarchie de titres qui nous permet d'établir une hiérarchie dans notre texte, sorte que nous puissions aller de H un à H six Reprenons donc ce texte et créons ces six en-têtes, juste pour que vous puissiez voir en quoi ils sont différents visuellement dans le navigateur Donc, ce H un est le titre principal, et maintenant nous allons utiliser ce H deux, nous allons donc écrire moins que symbole. H deux. Les gars, H deux représente le titre secondaire. Fermons ça. Je vais simplement coller le texte que j'ai copié. Je vais simplement fermer cette rubrique secondaire. Maintenant, pour le titre du territoire, nous devons écrire H trois et nous devons coller le texte. Maintenant, bien sûr, nous devons également fermer ce tag. Maintenant, les gars comme ça, nous avons seulement six titres différents. Donc, écrivons simplement tout cela et je vais simplement coller tout cela. Nous avons donc pi. La dernière rubrique est « Les six gars ». C'est le dernier titre. Sauvegardons ce fichier HTML, d'accord. Au fur et à mesure que vous tapez ces caractères, ce code, tout cela commencera à entrer dans votre cerveau et vous commencerez à vous entraîner à écrire du HTML. H six et arrêtons-le. Comme vous pouvez le voir ici, cela a vraiment créé une hiérarchie visuelle essentiellement entre ces six rubriques. Le premier est le plus grand et le plus grand titre et le dernier titre est ce six. Il s'agit de la plus petite rubrique. Maintenant, les gars, je pense que vous avez une question en tête pourquoi il n' y a que six titres en HTML Pourquoi ne pas en avoir sept ? Alors essayons-le. Nous écrivons donc ce sept texte, et ce que nous avons copié, nous le collons une fois de Fermons donc ce tag. Donc, comme vous pouvez le voir ici, les gars, nous avons écrit ces sept rubriques. Donc, en gros, ce n'est pas un titre valide à vous montrer, je viens de l'écrire. Vous voyez donc ici, sous la forme d'un simple paragraphe, ce titre est entré dans notre page Web. Je le supprime donc simplement pour que nous n' ayons que six rubriques. Le dernier titre est donc ce six, c'est donc le plus petit titre. Et entre ce H et Hessix, nous avons toutes sortes de rubriques Nous savons maintenant comment fonctionnent ces différentes rubriques. Mais jetons un coup d'œil à notre site Web Coding Ninja pour voir de quel type de titres nous avons réellement besoin Donc, vous voyez des gars sur ce site de codage Ninja, nous avons cette rubrique. C'est donc le titre le plus important de notre page Web. Je pense donc que c'est peut-être le titre Huan. C'est donc le titre principal. Et ici, vous voyez les gars en dessous de cette rubrique, nous en avons une autre. Alors regardez attentivement. Ce n'est donc plus le titre principal. C'est donc le titre secondaire, et après cela, nous avons quelques images. Vous voyez, ce titre est donc plus petit que cela. Cette rubrique est donc essentiellement la rubrique de notre territoire. Voici donc les trois rubriques. Vous vous souvenez quand j'ai dit qu'un titre consiste essentiellement à diviser le texte en sections logiques, n'est-ce pas ? Ici, entre les deux, nous avons une autre section. Nous allons donc maintenant créer le balisage pour ce type de structure Nous avons donc ici tout le texte dont nous avons réellement besoin. Donc, les gars, ici vous devez cliquer sur cet onglet Explorer. Donc, les gars, vous voyez, nous avons un fichier de contenu, ce fichier texte. Si vous souhaitez l' ouvrir, vous pouvez simplement double-cliquer dessus et ici notre fichier texte ou si vous souhaitez l'ouvrir dans la barre latérale et le déposer ici Donc, les gars, ici, vous voyez, nous avons ce contenu. C'est à partir de ce contenu que nous avons créé ce site Web. Faisons donc entrer en collision avec cette barre latérale. Il suffit de copier-coller ce code ici ou ce texte dans notre fichier HTML à points d'index. Alors faisons-le. Je laisse donc ceci ici pour référence. N'oubliez donc pas que nous allons commencer par le titre principal. Ajoutons donc quelques espaces ici. Passons à ce fichier de contenu. Donc, les gars, j'ai ajouté ces hachages pour que vous compreniez quel est le titre et quel est le paragraphe Vous voyez donc que j'ai ajouté celui-ci parce que c' est le titre principal. Comme vous pouvez le voir ici, il s'agit d'un double hachage, il s'agit donc d'un titre secondaire C'est ainsi que j'ai créé ce fichier de contenu. Créons maintenant ce titre principal. Je vais donc simplement copier cette première chose, et je vais accéder à mon fichier HTML à points d' index ajouter quelques espaces ici et créer un titre de hachage Il s'agit essentiellement d'une rubrique principale. Collons-le ici. Et fermons également celui-ci en H. Vous voyez donc ici que nous avons une deuxième rubrique. Alors prenons-en une copie. Créons donc un titre secondaire. Et au fur et à mesure que vous tapez ces caractères, vous pourrez commencer à vous entraîner à écrire du HTM. Il restera donc définitivement dans votre cerveau. Ajoutons donc un titre fur et à mesure que vous faites défiler notre page Web. Vous voyez, nous avons ici notre titre tartaire, donc H trois, et écrivons-le à la main Et ne le fermons pas immédiatement. Maintenant, sauvegardez-le et ouvrez notre page Web. Et maintenant, rechargeons notre page Web. Et c'est parti. Sympa. C' est donc en quelque sorte la structure de notre texte en ce moment. Il ne nous reste plus qu'à le remplir avec les paragraphes intermédiaires. Donc, en gros, comment se situent ces paragraphes entre les deux, nous avons donc quelques paragraphes ici. Donc, comme vous pouvez le voir, ajoutons-le ici. Je vais donc simplement dans mon fichier de contenu et je vais le récupérer. Donc, les gars, en copiant et collant ce texte, j'ai appris une astuce de raccourci très intéressante dans cette astuce. Donc, si je copie ce texte, je veux juste le faire glisser depuis le haut, et je dois juste le déposer ici. Ce que j'ai appris signifie si je veux simplement sélectionner directement ce paragraphe, je peux simplement cliquer trois fois dessus comme ceci et je sélectionnerai n'importe quel paragraphe pour le copier. Voici ce que vous voyez. Donc, si je veux juste copier ce paragraphe, il suffit de cliquer trois fois ici. Le paragraphe est donc sélectionné. C'est donc un court-métrage très intéressant. Donc, si vous souhaitez sélectionner cette ligne complète, vous pouvez simplement cliquer trois fois dessus et la copier. Je vais donc simplement dans mon fichier HTML à points d' index. Ce paragraphe se trouve donc en dessous du titre secondaire. Donc, ce langage de base du Web. Donc je le colle juste ici. Fermons celui-ci. Les gars, après cette image, nous avons encore du texte. Copions ceci. Créons donc quelques paragraphes supplémentaires. Créons un paragraphe de plus, et je veux juste le fermer immédiatement. Entre cet élément de paragraphe, je veux juste coller ce texte. Donc je prends juste ceci et je vais le coller ici. Faisons une sauvegarde, et c'est parti. C'est ce que vous voyez dans le fichier HTML. Nous avons donc ici un peu plus de texte. Donc, ces deux paragraphes. Ajoutons cela également. Je vais le sélectionner, laisser un peu d'espace et nous devons coller ce balas Et encore un paragraphe que nous devons créer et nous devons également fermer ce paragraphe. Maintenant, collons-le. Ici. Donnons-lui un coffre-fort et le voici. Les gars, au début, nous sommes les seuls avoir installé la plus jolie extension, et cela donne à notre code une très belle apparence Il a ajouté une indentation correcte pour nous. Jetons maintenant un coup d' œil à la page Web. Rechargeons maintenant cette page Web, et c'est parti. Sympa, super. Débarrassons-nous maintenant de toutes ces six rubriques. Alors maintenant, vous savez déjà comment ils fonctionnent et comment ils existent. Et en fait, au lieu de nous en débarrasser, nous pouvons utiliser ce que l' on appelle des commandes en HTML. Un commentaire en HTML est donc une façon d'écrire du code qui ne sera pas visible dans le navigateur. Et c'est très utile car cela nous permet d' écrire des commentaires sur notre code ou simplement de masquer notre code ou simplement de masquer du code que nous ne voulons pas afficher sur le navigateur. Maintenant, pour écrire une commande, c'est une syntaxe un peu étrange. J'ajoute donc quelques espaces ici. Encore une fois, nous écrivons un symbole inférieur à, et ici nous devons écrire point d'exclamation, puis un tiret Et comme vous pouvez le constater, VS code ferme automatiquement cette autre partie pour nous. En gros, cette flèche. Je l'enlève juste. Maintenant, comme vous pouvez le voir, la couleur de notre code complet est devenue grise. Comme tout cela n'est plus qu'un commentaire, ce code ne sera pas affiché dans le navigateur Web. Je veux donc juste vous le montrer en évitant la page Web. Alors maintenant, cette page Web est complètement vide. Donc, parce que tout ce code est désormais une commande. Les gars, je veux juste commenter les six rubriques uniquement. Je veux donc juste terminer ceci en fermant la commande. Pour fermer la commande, nous devons ajouter un double tiret, et nous devons ajouter un symbole supérieur à. Et ici, vous voyez que ce texte est devenu tout en couleur. Quelle que soit la partie que nous avons commentée dans DML, ce code est devenu gris. Rechargeons maintenant la page Web. Les gars, juste une chose que je n'ai pas mentionnée plus tôt à propos des titres, c'est que chaque page Web ne doit avoir qu' un seul titre H. Donc, un seul titre principal qu'il est très important de garder à l'esprit. Ce n'est pas vraiment obligatoire. Cela ne viole aucune règle HTML si nous avons plusieurs H, mais c'est une très bonne pratique de toujours n'en avoir qu'un. Maintenant, pour ce qui est de tous les autres, nous pouvons bien sûr en utiliser plusieurs. Ainsi, par exemple, je pense que sur notre page Web, nous avons en fait un autre de ces titres. Ici, nous voyons au milieu. Nous avons donc ici ce qu'est un titre HTML. Il s'agit d'un titre similaire à celui ci-dessus. C'est donc aussi un ajout, et c'est aussi un ajout. Pour terminer, permettez-moi également de vous montrer rapidement comment créer du texte en gras et en italique Donc, ici, dans notre section démo , vous voyez nous avons le nom de l' auteur qui est Maria, qui est en gras. Alors, comment pouvons-nous le faire en HTML ? Eh bien, il y a un élément spécial pour cela ou en fait deux éléments. Et permettez-moi de commencer par une phrase plus simple appelée B. Donc, vous voyez des gars dans le paragraphe. Dans ce paragraphe, nous avons cette Maria. Mettons donc cette Maria dans le tag B. B est donc synonyme d'audace. Écrivons donc B et fermons cette balise comme n'importe quelle autre balise. Fermons donc cette balise B. Passons maintenant à notre page Web. Ici, tu vois des gars à ce sujet, Maria. Donc, si je recharge cette page Web, maintenant, voyons ce qui se passe Ensuite, vous voyez que c'est devenu gras. Génial. Maintenant, cependant, l'utilisation de B n'est en fait pas une bonne pratique. B est donc en fait un élément plus ancien. Et à partir de DML Pi, nous devrions toujours utiliser l'élément fort au lieu de B. La raison en est que le B n'a aucune signification dite sémantique un peu plus loin Mais cela signifie essentiellement que B est simplement un élément sans signification spécifique. autre côté, l'élément fort signifie qu'il s'agit d'un élément vraiment important que nous voulons distinguer du paragraphe. Modifions-le donc trop fort. Nous allons donc le confirmer en rechargeant notre page Web. Oui, c'est toujours en gras, mais maintenant cela signifie que c'est un texte plus important, et c'est essentiellement l'idée de cimenter le DML Et encore une fois, nous parlerons davantage de HTML sémantique à la fin de cet article Donc, pour l'instant, sachez qu'il ne faut pas utiliser B, mais utiliser fort pour mettre le texte en gras. Maintenant, créons également du texte en italique. Choisissons ce mot. Donc, ces technologies fondamentales. Et tout comme B, il y a en fait deux façons de le faire. Le plus ancien est l'élément I. Donc, en intégrant ces technologies dans cet élément I, fermons ceci. Alors maintenant, si nous rechargeons notre page Web, vous voyez ici ce texte : les technologies fondamentales sont devenues en italique. Donc, parce que nous avons utilisé cet élément I, mais les gars, une fois de plus, pour créer ce code HTML sémantique, nous ne devrions plus utiliser cet élément I, mais au lieu d'écrire ce I, nous pouvons utiliser EM EM est donc synonyme de accent. Faisons une sauvegarde. Maintenant, les gars, si je recharge la page Web, vous pouvez voir les résultats Maintenant, notre texte est en italique, mais maintenant nous lui avons essentiellement donné le sens d' un texte souligné, mais il a une signification sémantique OK, super. Il s'agit d'un grand progrès. Vous vous en sortez vraiment bien jusqu'à présent. Maintenant, juste pour terminer cette conférence, je voudrais déjà vous proposer votre tout premier petit défi de codage. Je passe donc simplement à ce Stab, donc ce que je veux que vous fassiez, c'est que vous voyez que nous avons ce langage de balisage hypertexte Vous en voyez donc ici la lettre de départ. Donc, ce code HTML est en gras. Donc, en gros, ici, nous avons ce langage de balisage hypertexte Donc, ce H T M et L. Donc je veux que cela apparaisse dans le texte en gras. Alors, pensez-vous que vous pouvez le faire et écrire du code HTML vous-même pour la toute première fois ? Eh bien, j'espère vraiment que vous essayerez parce que, comme je l'ai déjà dit, ces défis de codage sont vraiment très importants pour que vous puissiez commencer à mettre en pratique vos compétences, même s'il s'agit simplement de quelque chose de très simple comme celui-ci. Alors, s'il vous plaît, mettez la vidéo en pause dès maintenant et mettez chacune de ces quatre lettres en gras. Et je reviendrai ici dans une seconde avec vous pour vous montrer comment procéder. Alors, tu as bien réussi à le faire ? Alors maintenant, je vais vous montrer comment vous pouvez le rendre audacieux. Enveloppons-le donc dans l'élément fort, et ici et là nous devons le fermer et ici dans le texte, nous devons donc ajouter un autre élément fort. Ici, nous devons le mettre en gras. Ajoutons encore un élément fort. Enfin, voici ce L. Mettons également celui-ci en gras. J'espère avoir fait toutes les choses correctement. Je vais maintenant recharger la page Web. Et c'est parti. Le HTML est maintenant marqué en gras, super. Encore une fois, j'espère que vous avez réussi à le faire vous-même, car c'est vraiment important pour votre processus d'apprentissage. Donc, les gars, lors de la prochaine conférence, nous ajouterons du texte à notre page Web, et nous essaierons de faire plein de choses différentes. Chers étudiants, j'espère que vous appréciez le cours et que vous le trouvez utile. J'ai beaucoup travaillé pour créer ce cours pour vous et vos commentaires sont très importants pour moi. Si ce cours vous a aidé de quelque manière que ce soit, qu'il s'agisse d'améliorer vos compétences, renforcer votre confiance en vous ou de vous inciter à créer quelque chose par vous-même, veuillez prendre un moment pour rédiger un avis positif. Vos commentaires me motivent à continuer. Merci d'avoir fait partie de ce voyage. J'ai hâte de lire tes pensées. 9. Autres éléments de texte Liste ordonnée et liste non ordonnée: Continuons à travailler avec le texte. Et dans cette conférence, nous allons apprendre à créer des listes avec des puces et des chiffres. Et ce que je veux dire par liste, c'est essentiellement une liste de points, comme vous le voyez ici. Nous avons donc ici tous ces points. Et aussi comme une liste de commandes comme ces numéros. Nous en voyons donc ici un, deux, trois, et nous avons également une liste avec les points. Voyons comment nous pouvons le créer dans notre code HTML. C'est très facile à faire en HTML. Donc, en commençant par cette liste de commandes, endroit où cette liste de commandes est présente signifie qu'elle se trouve dans la section Qu' est-ce que le HTML. Je fais juste défiler la page vers le bas. Voici ce qu'est l' en-tête HTML et après cela, nous avons trois autres paragraphes et nous avons cette liste de commandes. Nous avons donc deux paragraphes et il en manque un autre. Ajoutons donc cela également. Je passe donc simplement à ce fichier de contenu, que je vous ai montré lors de la conférence précédente. Nous voyons donc ici ce qu'est le HTML. Donc, après ce titre, nous avons donc ce paragraphe, et nous avons également cette liste. Regardons tout ça. Et collez-le ici et ce que je veux gâcher, alors je termine ce paragraphe et je le ferme. Donc, les gars, pour créer ce type de liste de commandes, nous devons ajouter un élément pour que le nom de l'élément soit OL. Donc, les gars, OL est l'abréviation de Order List. Bien entendu, nous devons également le fermer. Donnons-nous maintenant un peu d'espace ici car en fait, pour chacun des éléments de la liste, nous devons créer un élément à l'intérieur de la liste de commande. Pour cela, nous utilisons l'élément Ay, qui signifie élément de liste. Ici, nous allons ajouter cet allié et nous devons également fermer celui-ci. Donc, arrêtons ça et je le mets juste ici. Allons prendre ces deux-là. Et je l'ai juste collé ici. , je place juste ce texte individuel entre fois, je place juste ce texte individuel entre la fermeture Ay. Sauvegardons ce fichier et Preter fera sa magie Faisons une sauvegarde. Comme je reviens simplement à ma page Web que j' ai créée auparavant. je le recharge, vous verrez le résultat. Nous y voilà. Nous avons maintenant ajouté un élément de paragraphe , puis nous avons créé cette liste de commandes. Sympa. Le navigateur Google Chrome comprend notre code et sait qu'il doit le rendre sous de liste de numéros de commande comme celui-ci, deux, trois, bien sûr, il applique ensuite automatiquement ces numéros sans que nous ayons à faire quoi que ce soit. Et si nous ajoutions un autre élément, disons que nous ajouterions un autre élément. Je crée donc simplement un élément et j'écris juste le premier élément. Et comme je viens de vous le dire tout à l'heure, Ai est l'abréviation d'un élément de liste. L'élément individuel, nous devons donner un élément complet. Donc, une fois que nous avons créé cet élément OL, il est donc complètement vide et à l'intérieur de celui-ci, nous devons créer des éléments de liste comme celui-ci. Ainsi, chaque fois que nous créons des Ailements dans notre page HTML, ils seront présentés sous forme de puces comme ceci Sauvegardons-le et rechargeons la page Web, et voilà Voilà, les gars, maintenant que j' ai ajouté ce dernier article, c'est le premier élément de cette liste de commandes. Je ne veux pas ça, alors je m'en débarrasse. Rechargeons à nouveau la page Web, Nie. Les gars, revenons à notre site Web final, notre dernière page Web de cette section. Ici, vous voyez les gars, maintenant ce que nous voulons faire sur cette page Web signifie que nous devons ajouter ce titre ici, pourquoi devriez-vous apprendre le HTML ? Ensuite, nous devons ajouter un paragraphe, puis nous devons créer cette liste de désorbement. Retournons au travail. Maintenant, nous devons d'abord créer cette rubrique. Je reviens simplement à ce fichier de contenu et je le copie j'ajoute quelques espaces ici. Créons un titre Hori. Collez maintenant le texte ici et fermez le tag. Revenons maintenant à ce contenu, saisissons tout cela et collons-le. J' enroule simplement ce texte dans ce paragraphe. Nous avons maintenant ce contenu ici, que vous voulez voir apparaître sous forme de liste sous forme de puces, et l'élément que nous utilisons pour cela est l'UL. Vous pouvez peut-être deviner que UL est l'abréviation de Unorder List. Fermons celui-ci. C'est une liste sans chiffres, ce que nous disons être une liste non ordonnée car l'ordre des éléments n'a pas d'importance Mais à l'intérieur de la liste elle-même, nous devons toujours utiliser l'élément pour les éléments individuels. Comme auparavant, nous devons intégrer tous ces différents éléments de contenu dans un élément allié. C'est ce que nous avons déjà fait avant ici. Je suis sûr que vous savez comment vous y prendre, et vous avez peut-être vu qu'il s' agit d'un autre très petit défi de codage pour vous. Mettez la vidéo en pause maintenant, faites exactement la même chose que nous avons faite ici. Enveloppez chacun de ces éléments dans un véritable élément allié, et ainsi, vous pourrez continuer à entraîner à écrire du code HTML par vous-même. J'espère que c'était un défi simple et faisons-le rapidement ici. Ajoutons les éléments alliés ici. Fermons cette tête. C'est le gros texte, terminons-le ici. Intéressons donc tout cela aux éléments alliés de ce dernier point. Découpons tous ces éléments et collons-les à l'intérieur de l'élément UL. Et jusqu'à présent, vous voyez les gars, notre formatage est devenu très compliqué. Il s'agit d'un élément parent à l'intérieur de cet élément parent s'agit donc d'un élément enfant, il n'est donc pas dans le bon ordre. Je veux juste donner quelques onglets ici, et nous avons maintenant une indentation correcte De sorte qu'ils soient tous alignés visuellement en tant qu'éléments enfants. Peut-être avez-vous remarqué comment j'utilise les termes éléments enfants et éléments parents. Ainsi, chaque fois que nous avons un élément au lieu d'un autre, le conteneur d' un autre élément est essentiellement le parent. Il s'agit du contenant de cet élément. C'est ce qu'on appelle un élément parent. Dans ce cas, il s' agit donc d'une liste de désorbés. Ensuite, les éléments qui se trouvent à l'intérieur de cet élément parent sont appelés éléments enfants. C'est bon. Et vous voyez que le format ici est complètement faux. Mais cela ne m'inquiète pas car pour cela, nous avons l' outil d'aide de Prettier Prettier s'occupe de tout notre formatage, mais j'espère que vous verrez que sans ce formatage, cela ressemble à un gâchis complet C'est très difficile à comprendre. Par exemple, cet élément n' est pas un élément enfant de cette URL. Cet élément est un enfant de cette URL, mais il montre par indentation qu'il s'agit de l'élément parent, qui n'est pas ici, il doit être aligné ici, par exemple, comme ceci Mais nous pouvons aussi simplement le laisser à prettier une fois que nous avons enregistré le fichier Et maintenant, comme je le disais, alors que je sauvegarde ce fichier, Peter fait sa magie et formate joliment ce code ici Revenons à ce que nous sommes en train de créer. Vous voyez donc ici. Rechargeons simplement cette page Web, et elle est là La création d'une liste est une autre partie importante de la rédaction de DM que nous utilisons tout le temps. J'espère donc que vous avez apprécié cette conférence, car elle était très importante. Donc, avant de poursuivre, assurez-vous de revoir ce que nous venons de faire ici et réfléchir un peu certaines des choses que j'ai dites plus tôt, comme le fait que chaque élément a une signification différente et que nous devons utiliser ces éléments pour structurer notre contenu. Nous ne pouvons donc pas simplement insérer tout notre texte ici dans le corps du texte. Donc, si nous le faisions, il n'y aurait aucune structure ni aucune logique. Mais je voulais juste vous montrer ce qui se passe si je sélectionne. En gros, tous ces textes. Passons à notre fichier de contenu et sélectionnons l'ensemble du texte. Copions ceci. Et il suffit de le coller ici. Faisons une sauvegarde, et voilà. Revenons à notre page Web. Rechargeons cette page Web, et elle est là. Bien que vous voyiez qu'il ne s'agit désormais que d'un gros bloc de texte et que le HTML ne se soucie pas vraiment des espaces blancs. HTML supprime tous les sauts de ligne ici. Il sera regroupé sur une seule ligne. Pour ces espaces blancs et sauts de ligne, ils ne sont pas tous pertinents pour le HTML. C'est ça. Il n'y a aucune structure, il n'y a aucun sens. Il n'y a rien en gros. Supprimons ce texte, rechargez-le. J'espère que ce petit exemple vous a montré l'importance de regrouper tous les éléments de contenu à l'intérieur d'un élément. Cela donne en fait un sens au contenu. Mais sur ce, je vous quitte et je vous dis à bientôt dans la prochaine vidéo. Dans les prochaines vidéos, nous aborderons d' autres sujets passionnants, alors préparez-vous. 10. Images et attributs: Maintenant, une chose qui manque encore à notre article de blog en ce moment, ce sont quelques images. Nous allons donc apprendre à utiliser l'élément d'image STML. Donc, si nous consultons notre page de démonstration, nous remarquons ici que nous avons ces deux images importantes. Nous avons donc cette grande image ici, qui illustre en quelque sorte le billet de blog, et puis nous avons également cette photo de cet auteur, et commençons donc à intégrer ces images dans notre article de blog. Les images se trouvent donc, bien entendu, dans notre dossier de projet. Voici donc les fichiers de démarrage. Ils sont donc venus avec ce TatterFles et la seule image que nous voulons ajouter à notre page Web, cette image d'article Donc, vous voyez ici que nous avons cette image de publication. Il suffit donc de cliquer sur et vous pourrez voir l'aperçu dans le code VS uniquement sans aucun problème. Nous voulons ajouter cette image dans ce fichier ML sous les éléments du corps. Nous avons donc ici les titres. Tout d'abord, nous allons ajouter cette image de publication. Vous voyez donc que cette image se trouve en dessous de ce paragraphe publié par Maria. Nous avons donc ce paragraphe ici. Donc, en dessous, nous devons ajouter ceci. Nous devons donc inclure cette image ici. Donc, comme pour tout autre élément, nous commençons par l'écrire comme ceci. Donc, moins qu'un symbole, il faut écrire ici IMG. Mais maintenant, souvenez-vous de la façon dont je vous ai dit dans la première conférence de cette section que l'élément image est un élément spécial, et c'est parce qu'il n'a aucun contenu et qu'il n'a donc pas non plus de balise de croisière Au lieu de cela, nous ajoutons simplement une barre oblique ici à la toute fin de cet élément, comme ceci Vous vous demandez peut-être si nous ne spécifiez aucun contenu ici pour l'élément image, alors comment le HTML saura-t-il quel élément il doit afficher ? Et c'est une excellente question, qui nous amène à quelque chose de nouveau dans le langage HTML, à savoir les attributs. Les attributs sont donc essentiellement des éléments de données que nous pouvons utiliser pour décrire des éléments. Il existe donc de nombreux attributs différents en HTML, dont l'un est l'attribut source. C'est donc celui qui nous intéresse en ce moment. L'élément source se trouve donc à l'intérieur de cet élément d'image. Ici, nous devons écrire SRC et equals, et nous devons écrire des codes doubles, comme vous pouvez le voir ici Collaborez donc cette barre latérale, et maintenant nous allons ajouter une image de publication Si vous ne vous souvenez pas de l'image, vous pouvez agrandir la barre latérale. Vous pouvez écrire le nom de l'image. Nous avons donc écrit une image de publication. Ou vous pouvez obtenir de l' aide à partir du code VS. C'est une suggestion automatique. Vous pouvez simplement cliquer ici. Revenons donc à notre page Web sur laquelle nous travaillons. Rechargeons donc cette page Web ici. Et en effet, ici c'est génial. Encore une fois, récapitulons rapidement. Nous n'avons pas spécifié l'image en utilisant le contenu de cet élément. Au lieu de cela, nous devions spécifier un attribut, et dans ce cas, il s'agit de l'attribut source. Et n'oubliez pas qu'un attribut est essentiellement comme une donnée. Donc une information décrivant cet élément. Nous décrivons donc ici la source à partir de laquelle le navigateur doit essentiellement lire l'image. C'est vrai. Maintenant, outre les attributs source, il existe d'autres attributs que nous pouvons spécifier pour les images, et celui que nous ne devons jamais ignorer est l'attribut alt. Nous devons donc l'écrire comme ceci sous la forme Alt ALT, et nous devons écrire des égaux, et nous devons fournir des codes doubles. Donc, les gars, à l'intérieur de ça, nous devons décrire l'image. Donc, vous voyez, les gars, Alt signifie texte alternatif. Donc, en gros, ce que nous devons spécifier ici , c'est un texte qui devrait décrire le sujet de l'image. Et c'est très important pour diverses raisons. L'une d'elles est que cela permettra aux moteurs de recherche tels que Google Chrome de savoir réellement le contenu de l' image, car sans la description, les moteurs de recherche ne savent pas vraiment de quoi parle l'image. Et ce qui est probablement encore plus important, c'est qu'en spécifiant la description de l'image, nous pouvons également autoriser les personnes aveugles à utiliser notre site Web. Ainsi, les utilisateurs qui utilisent un lecteur d'écran ne verront pas l'image, mais ils auront plutôt un lecteur d'écran, lisant le texte alternatif, donc la description qui leur est destinée. Ne négligez donc jamais cet attribut. Il est très important de toujours rédiger une bonne description. Ici, cette image est du code HTML à l'écran. Maintenant, cela ne changera pas visuellement ce que nous voyons ici, à moins que l'image ne puisse être trouvée pour une raison quelconque. Disons que nous avons oublié d'écrire ce JPEG. Nous avons donc oublié ce PG. Maintenant, si nous rechargeons la page Web, vous voyez ici ce que nous avons écrit dans le texte modifié est donc tel qu'il est imprimé sur notre page Web, comme vous pouvez le voir. Nous ne voulons donc pas cela, alors écrivons. Et maintenant, rechargeons la page Web. Et voilà. Vous avez fait de grands progrès jusqu'à présent. Maintenant, les gars, je veux juste réduire cette image. J'ajoute donc un autre attribut ici. Nous pouvons donc utiliser de nombreux attributs. Donc, celui que nous allons utiliser ici, c'est l'attribut width. Et ici, nous devons écrire des largeurs égales et des codes doubles. Nous allons donc maintenant réduire cette image en pixels. Alors maintenant, je donne cette image en 640 pixels. Vous pouvez donc écrire 640 comme ceci. Et maintenant, si nous rechargeons la page Web, voyons les résultats Maintenant, la largeur de l' image est modifiée avec succès car nous avons incorporé cette largeur ici. Donc, un peu plus tard, nous verrons cela dans la section CSS. Les gars, nous pouvons également fournir un attribut de hauteur, par exemple, identique à celui-ci. Nous pouvons donc maintenant changer cela à 600 pixels, et maintenant nous pouvons donner une hauteur de 280 pixels. Alors les gars, maintenant vous vous demandez comment je suis capable de donner ces pixels. Je connais donc ici les dimensions de l'image. Donc, ici, vous voyez sur l'image du post, nous avons ce 1280 en 720 Donc 1280 ici c'est la largeur et 720 c'est la hauteur. J'ai donc déjà expérimenté toute la largeur et la hauteur Ce que j'ai fait signifie que j' ai cette largeur de 1280. Donc, dans le calculateur, la moitié est de 640 pixels. J'ai donc ajouté ces 640 pixels. Après cela, j'ai changé d'avis et j'ai donné les 600 pixels. C'est donc assez sympa et comme ça, je leur ai donné 40 pixels. Maintenant, si je recharge la page Web et que je vois des images, mais bien sûr, si je le voulais, je pourrais en faire un carré Par exemple, ce qui déformerait alors complètement l' image comme nous le voyons ici Cette largeur est donc de 600. Donc, si je lui donne juste 600 pixels, une fois que j'ai déchargé la page Web, vous voyez ici Notre image est complètement déformée car nous avons modifié le rapport hauteur/largeur de l'image. Et les gars, encore une chose que je voulais vous montrer si vous n'avez pas donné cet attribut de hauteur, nous pouvons vous en donner une. Et si nous supprimons simplement cette hauteur, le rapport hauteur/largeur complet sera conservé. Alors rechargez-le. Et c'est parti. Fermons donc cette barre latérale. Sans donner l'attribut de hauteur, le rapport hauteur/largeur est conservé. Mais bien sûr, vous pouvez donner une hauteur en fonction de vous. Alors rechargez-le. C' est ainsi que nous incluons des images dans un document HTML. Revenons donc à la dernière page Web de ce billet de blog. Et vous voyez, donc une autre image que nous voulons inclure ici. Donc, cette image d'auteur de Maria. Donc, après ce titre en T, nous avons cette image de l'auteur. Alors revenons ici. En dessous, nous devons ajouter cette image de l'auteur. Nous voulons donc inclure cette image de Maria. Donc, ici, vous pouvez aller dans cette barre latérale et vous pouvez voir que nous avons cette image de l'auteur, donc ce point d'auteur au format PNG. Vous pouvez donc inclure cette image. Je réduis donc simplement la barre latérale et j' ajoute juste quelques espaces ici Et nous voulons cette image d' une hauteur et d'une largeur de 75 pixels. J'ai donc un autre défi à vous lancer, et ce que je veux que vous fassiez, c'est que vous incluiez cette image que je vous ai montrée vous-même, ici même, dans cet endroit. OK, alors prenez une minute pour mettre la vidéo en pause et incluez cette image de 75 x 75 pixels, puis je reviendrai ici dans une minute avec la solution. C'est bon. J'espère donc que vous avez un peu plus d'entraînement ici. Ajoutons donc cet élément d'image ici, et je veux juste donner le SRC, donc cette source Le double est égal à, et je connais l'auteur. Donc, ici, le code VS nous aide, alors cliquons dessus. Nous n'ignorons jamais que c'est l'attribut alt. Alors maintenant, pour récapituler rapidement, je veux juste vous dire que cette modification signifie texte alternatif Rédigons une description de cette image. J'écris juste comme portrait de Maria. Ensuite, ce que nous voulons faire signifie que nous devons donner la propriété width. Écrivez-le à la main pour que le code reste gravé dans votre esprit. Je lui donne juste 75 pixels, et maintenant donnons-lui une hauteur de 75 pixels, et n'oubliez pas de fermer cet élément d'image avec une barre oblique comme celle-ci Sauvegardez-le, et revenons à notre page Web sur laquelle nous travaillons actuellement. Alors maintenant, si je recharge la page Web, OK, bravo. Belle progression. Nous savons maintenant comment fonctionnent les images et comment les attributs fonctionnent également. Et en fait, nous pouvons également spécifier des attributs sur d'autres éléments en HTML. Et l'une des raisons pour lesquelles cela est très important est en fait l'élément HTML lui-même. Donc, remontons et vous voyez que dans cet élément HTML, nous devrions toujours avoir besoin de spécifier un élément, donc c'est la langue. Donc, pour le langage, nous utilisons ce mot clé ang, et nous écrivons des codes égaux et doubles. Donc, ce que cela signifie, quelle langue vous utilisez dans votre navigateur Web. Nous utilisons donc actuellement la langue anglaise. Donc, pour la langue anglaise, nous utilisons le mot clé Ian comme ça. Mais pour les autres langues, il existe d'autres codes. Par exemple, pour l'allemand, c'est probablement le DE et pour le portugais, nous utilisons le PT comme ceci. Et si vous avez une autre langue, vous pouvez simplement trouver le code en recherchant sur Google. Ajoutons donc ceci Ian. Une autre chose que nous pouvons et devons faire est de spécifier le jeu de caractères utilisé dans ce document. C'est donc quelque chose qui me vient à l'esprit, car il s'agit d'une information qui décrit le document. Nous avons donc besoin d' un autre nouvel élément à l'intérieur de cet élément principal. Nous avons donc besoin d'un nouvel élément simplement appelé méta. Les métadonnées sont donc des données concernant des données. Nous décrivons donc ici le jeu de caractères. Nous écrivons donc ici un ensemble de soins qui équivaut à du double code. Et ici, nous devons écrire en majuscules ces UTF et huit, qui sont essentiellement tous les caractères simples que nous utilisons en anglais Maintenant, cet élément n'a pas de balise de fermeture, nous le fermons donc avec une barre oblique comme celle-ci Maintenant, je ne passe pas beaucoup de temps sur ce genre de choses, car plus tard, lorsque vous créerez vos propres pages, cela se fera automatiquement. C'était juste pour vous montrer qu'il s'agit simplement d'une autre méthode ou d'un autre endroit où nous avons besoin de certains attributs pour lesquels nous devons ensuite spécifier une valeur, d'accord. UT de huit, voici la valeur. Nous avons spécifié cet attribut de jeu de caractères. OK, et oui. Donc, dans la prochaine vidéo, nous allons créer d'autres liens intéressants. Je pense que c'est tout pour cette conférence, donc je vous verrai à la prochaine. 11. Hyperliens: Les hyperliens ou les liens courts sont l'un des éléments fondamentaux d'Internet Les liens sont ce qui permet réellement à Internet de devenir un Web mondial. Sans liens entre les pages, il n'y aurait pas de Web. Nous allons donc apprendre à placer des liens sur nos propres pages Web. Nous pouvons maintenant classer les liens dans deux grandes catégories. La première catégorie comprend les liens qui pointent vers d'autres pages de notre propre site Web. Supposons qu'ici , sur notre site Web, Ninja Coding, nous avions publié un autre article de blog, afin que nous puissions ensuite créer un lien de cette page vers cette autre page. Pour le moment, en revanche, l'autre catégorie comprend les liens qui pointent vers l'extérieur de notre site Web. Par exemple, si je place un lien vers wlthscool.com ici à partir de cette page, il s'agira bien entendu d' un lien vers l'extérieur Maintenant, nous créons ces deux types de liens exactement de la même manière en HTML, mais il y a encore certaines particularités dont nous devons être conscients Commençons maintenant par un deuxième lien que je décrivais, qui pointe en dehors de notre propre site Web. Si je reviens à ma page de démonstration, vous verrez que dans la section HTML, nous avons un lien vers le site Web de W three Schools. Ce lien pointe vers l'extérieur de notre page. Si je clique dessus, alors ici vous pouvez vérifier que ce lien y va. En gros, sur le site Web de cette école WT. Il s'agit essentiellement d'un site Web où vous pouvez tout apprendre sur le HTML ainsi que sur le CSS et le JavaScript. Il propose des didacticiels et des ressources pour l'apprentissage, le développement Web et la programmation, ainsi que des exemples interactifs pour une expérience pratique, car il est important, en tant que développeur Web, de savoir comment utiliser et de trouver des informations ici dans cette page de documentation Web. Maintenant, ce que nous voulons ici signifie qu'il suffit de copier cette URL. Pour ce faire, vous pouvez créer un nouvel onglet ici. Ici, vous pouvez le rechercher sous le nom Webley schools Webl schools HTML Introduction Vous pouvez maintenant consulter ce site Web de W three Schools, vous pouvez donc simplement l'ouvrir, puis vous serez redirigé vers le même site Web. Ou si vous n'avez pas trouvé ce site Web cela signifie qu'il n'y a aucun problème. Je ne fais donc que copier cette URL, et encore une fois, gardez à l'esprit que cela s'appelle une URL. Comme vous le savez, chaque site Web sur Internet possède sa propre URL, et c'est ce dont nous avons besoin pour créer un lien vers cette page. Je le copie simplement pour revenir à la page de démonstration et vous le voyez ici. Ce lien se trouve après la liste des commandes. Maintenant, allons-y. après cette liste de commandes, nous avons un lien ici. Créons un lien après cette liste de commandes. Pour créer un lien en HTML, nous utilisons l'élément A qui représente ancre. Techniquement, un hyperlien ou un lien est en fait appelé une ancre en HTML Il s'agit donc d'un élément d'ancrage. Tu peux le fermer comme ça. Ou nous devons vraiment le fermer. Commençons par le faire dès maintenant. En ce qui concerne le contenu du lien, ce que nous indiquons ici est en fait le texte que nous voulons afficher sur la page. Le texte du lien. Dans ce cas, donc une école, mais qu'en est-il de l'URL ? Où voulons-nous que ce lien pointe ? Eh bien, pour cela, nous devons à nouveau utiliser un attribut. Dans ce cas, il s'agit d'un attribut tarifaire, puis d'un double code, puis nous mettons simplement en page l'URL que nous avons copiée, et c'est tout. Donc, si je le sauvegarde , je reviens simplement sur ma page Web sur laquelle je travaille actuellement et si je la recharge, alors vous voyez ici Notre joli lien est créé en HTML, et vous voyez ici que lorsque je me dirige vers les écoles WT, l'URL sera affichée ici. Vous pouvez consulter ici. Et quand je clique dessus, vous pouvez voir que cette page mène au site Web des écoles WT où nous avons Point great. C'est déjà la base de la création d'un lien. C'est très simple. À l' heure actuelle, nous voulons que ce lien soit vraiment du genre « revenons en arrière ». Et si vous consultez notre page de démonstration, en ce moment, ce que je veux signifie, je veux ce lien au lieu de ce texte. Donc, pour ce faire, nous devons créer un élément de paragraphe pour cela et nous n' avons qu'à écrire le texte. Par exemple, vous pouvez en savoir plus sur le lien d'ancrage qui se trouve dans la suite de ce paragraphe. Et ici, nous devons fermer l'élément de paragraphe. Comme ça. Sauvegardons-le ici, et je reviens à la page Web, et je pourrai le recharger ici. Ici, vous pouvez vérifier. C'est exactement la même chose que dans notre démo. Et maintenant, cela ressemble exactement à l' original, en ce moment, remarquez ici quand je clique sur ce lien, puis vous voyez ici ce qui se passe ici. Vous voyez que nous avons accédé directement à cette page et que notre propre page a maintenant disparu. Donc, bien sûr, nous pouvons y retourner. Mais parfois, ce que nous voulons faire c'est ouvrir un lien dans un nouvel onglet. Permettez-moi donc également de vous montrer comment nous pouvons procéder. Et bien sûr, ce n'est pas toujours ce que nous voulons. Nous voulons tellement souvent que la page soit réellement déplacée vers l'URL que nous avons spécifiée ici. Mais il est également parfois utile de garder la page ouverte et d' ouvrir simplement l'URL dans un nouvel onglet. Mais nous pouvons le faire en spécifiant un attribut cible comme celui-ci. Et la syntaxe est un peu bizarre. Nous devons donc écrire un trait de soulignement puis un blanc. Sauvegardez-le, revenons en arrière et rechargez-le une fois de plus et remarquez que lorsque je clique sur ce lien, la page s' ouvre dans un nouvel onglet Remarquez comment il a ouvert un nouvel onglet, et notre onglet d'origine est toujours ouvert. Génial. Donc, ce mot et nous avons maintenant un lien qui pointe vers une URL qui se trouve en dehors de notre propre site Web. Mais maintenant, en ce qui concerne le premier scénario, où nous voulons créer un lien vers une page interne, revenons à notre page de démonstration. Vous voyez donc qu'au tout début de cette page, nous avons ces liens, n'est-ce pas ? Ce sont donc censés être les liens 0,2 page qui font partie de ce blog. Créons donc maintenant ce premier lien ici, bloguez et créons également une nouvelle page vers laquelle vous pouvez réellement créer un lien. Ainsi, créer une nouvelle page revient à créer un nouveau document HTML. Ouvrons donc la barre latérale, et ici je vais créer un fichier au log point HTML. Et cachée. Nous avons maintenant créé un fichier HTML vide. Nous pouvons maintenant créer le passe-partout en utilisant un aide-mémoire pour créer la structure HTML Mais en fait, pratiquons encore une fois un peu. Si vous le souhaitez, vous pouvez même mettre la vidéo en pause et la taper vous-même. Mais je vais le faire ici très rapidement. C'est du HTML, puis nous devons y insérer un élément de tête, et bien sûr, nous devons créer un élément de titre pour cette page de bloc. Ensuite, je vais fermer l'élément de tête et créer un élément de corps pour cela. Ici, je vais créer un ajout obligatoire. Écrivons maintenant bienvenue sur notre blog. Et fermons le titre H deux comme ceci, et c'est tout. Faisons une sauvegarde, et nous avons ici un document HTML très simple et agréable. Mais maintenant que cela est en place, nous pouvons créer un hyperlien ou un lien ici même dans ce fichier HTML à points d' index, qui pointera vers le code HTML à points de blog Rassemblons cette barre latérale pour que le navigateur accède ensuite à cette page Faisons-le après cette rubrique en H. Je vais donc créer un élément d'ancrage pour cela et écrire HRF. Maintenant, je donne le nom du fichier sous forme de point de blog HTML , que nous avons créé maintenant. Et fermons l'élément d'ancrage. Et à l'intérieur de cet élément d' ancrage, nous devons écrire le texte. Pour l'instant, je vais écrire un blog comme celui-ci et sauvegardons-le. Et si je reviens à ma page Web, sur laquelle nous travaillons, rechargeons maintenant la page Web, et voici notre beau lien regardez ce qui se passe lorsque je clique dessus Boum. Nous sommes maintenant sur le blog, et vous pouvez voir ici, dans cette URL, que nous avons ce fichier HTML à points de blog à la fin de cette URL. le moment, pour revenir en arrière, nous pouvons bien sûr cliquer ici sur ce bouton de retour. Mais ce que nous pourrions également faire, c'est ajouter un lien ici, nous renvoyons simplement vers le code HTML à points d' index, n'est-ce pas ? Cela semble être une bonne idée. Revenons donc ici à ce fichier HTML à points de blog qui constitue un autre défi. Maintenant, je veux que vous créiez vous-même ce lien. Mettez une vidéo en pause ici et créez un lien qui renvoie vers le code HTML à points d'index. Alors, avez-vous réussi à le faire ou au moins à l'essayer ? Eh bien, je l'espère vraiment. Quoi qu'il en soit, bien sûr, nous utilisons à nouveau l'élément A. Ensuite, nous avons utilisé l'attribut Azure of. Ensuite, nous devons écrire ici sous forme de pile HTML à points d'index, où vous souhaitez pointer ce lien. Alors fermons-le. Et ici, je vais écrire : fermons l'élément d'ancrage ici. Ensuite, à l'intérieur de ce texte, je vais l'écrire comme si je rentrais chez moi. Si vous avez écrit autre chose, il n'y a aucun problème. Et faisons-le une sauvegarde. Et si je recharge la page Web, nous avons un lien. Nous pouvons cliquer dessus et revenir en arrière. Nous pouvons donc revenir au blog, et nous pouvons également revenir au point d'index m. Alors rapprochons-nous de celui-ci. Nous n'en avons plus besoin. Et pour terminer, nous pouvons également spécifier un lien qui ne mène nulle part. Permettez-moi de vous le montrer également. Écrivons donc d'abord le contenu. Écrivons donc simplement un élément d'ancrage et fermons-le. Et ici, passons à la page de démonstration. Nous avons ici une boîte flexible et une grille CSS. Maintenant, écrivons simplement flexbox. En gros, le contenu, mais regardez ce qui se passe lorsque je recharge la page Donnons-lui un s maintenant que vous voyez que ce n'est plus un lien, c'est donc un texte normal. Vous voyez qu'il est uniquement écrit flexbox, mais remarquez qu'il s'agit simplement d'un texte normal et non souligné Ce n'est clairement pas un lien. Même s'il s'agit en fait d'un élément d'ancrage, ce qui fait d'un encouragement un véritable lien, c'est la propriété HRF, et nous devons donc vraiment la spécifier Sinon, il ne s'agit pas du tout d'un lien. Il ne s'agit alors que d'une ancre qui n' est plus vraiment utile pour le moment. Mais que faire si vous ne voulez pas que ces points aboutissent, comme je le disais, eh bien, la solution est de les fournir. Si je sauvegarde maintenant et que je le recharge, nous redeviendrons un lien En fait, ça ne pointe nulle part. Que se passe-t-il lorsque vous cliquez sur ce lien ? En gros, ça remonte vers le haut, donc ça ne fait rien. Par exemple, nous allons passer à la partie supérieure et un peu plus tard dans ce cours, nous utiliserons réellement ce comportement. Mais pour l'instant, je veux juste que vous sachiez que c'est ainsi que nous pouvons spécifier des liens lorsque nous n'avons pas encore d'URL pour eux ou que nous n'avons aucune page. En gros, c'est comme un lien réservé, alors copions-le ici, je l'ai juste mis en page ici, et ici je l'écris sous forme de grille CSS Il n'est donc pas nécessaire de le réécrire. Mais bien sûr, si tu veux, tu peux le réécrire. Donc, juste pour que cette navigation paraisse un peu plus complète. Mais tous ces liens ne doivent pointer nulle part, et c'est ainsi que vous spécifiez liens, les hyperliens ou les ancres, comme vous pouvez également les appeler en HTML. Web Comme je l'ai dit au tout début, il s'agit d'une partie très importante du Assurez-vous donc que vous comprenez comment ils fonctionnent et comment nous les plaçons dans nos propres pages Web. 12. Structurer notre page Web: Nous avons donc déjà appris quelques éléments HTML très importants et sommes déjà en mesure de créer une belle page avec des fonctionnalités intéressantes. Mais maintenant, il est temps d'ajouter une certaine structure à notre document et à nos éléments. Nous allons donc maintenant apprendre quelques nouveaux éléments HTML phi pour cela. Maintenant, quand j'ai dit que la page manquait de structure, je voulais dire que tous ces éléments que nous plaçons dans notre document apparaissent simplement les uns après les autres ici. Ils ne sont pas vraiment distingués les uns des autres et, surtout, ils ne sont probablement pas regroupés de manière logique. Nous allons donc changer cela en créant des éléments de conteneur pour cela, qui regrouperont ensuite ces éléments. Maintenant, la première chose qui me vient à l'esprit, ce sont les liens. Nous avons donc ces liens. Donc, chaque fois que nous avons quelques liens, nous devons les regrouper dans un élément de navigation. C'est donc essentiellement comme une navigation. Je crée donc un élément de navigation pour cela. Donc, en gros, Nav signifie navigation. Donc je vais juste le fermer et je fais une sauvegarde. Maintenant, si je recharge la page Web, vous voyez ici sur notre page Web que rien n'a changé Tout ce qui se passe ici, c'est que cela a essentiellement créé une boîte invisible, qui contient maintenant ces éléments. OK ? L'élément en lui-même ne fait donc rien. Il ne fait que regrouper ces éléments. Et je comprends qu'à l'heure actuelle, cela ne semble ni intuitif ni logique de le faire, mais croyez-moi, il sera très important d'avoir toutes ces différentes pièces dans leurs propres contenants. D'accord. Donc, en regardant notre page Web, vous voyez ici que nous avons cet ajout et les liens. Il s'agit essentiellement de l' en-tête de notre page Web. Il nous suffit donc d'intégrer cet ajout et ces liens dans notre élément d'en-tête. Il s'agit donc d'un élément spécial du DML. Maintenant, je crée un élément d'en-tête comme celui-ci. Il suffit de fermer cet en-tête en dessous de l'élément de navigation. Nous avons maintenant regroupé ce titre et les liens dans un élément d'en-tête. Les gars, après ces liens, nous avons ici ce billet en bloc. Les gars, il suffit d'emballer tous ces poteaux. Nous avons un élément spécial en HTML pour cela, le nom de l'élément est article. Un article dans ce contexte ne signifie pas simplement un article écrit comme celui-ci, mais il peut aussi ressembler à des choses du monde réel. Comme un ordinateur, c'est un article, un stylo ou un téléphone. Ce sont donc tous des articles, et si d'une manière ou d'une autre nous avions besoin de représenter un ordinateur au format STML, un article serait également un bon élément pour cela Maintenant, vous voyez que notre corps a deux éléments enfants directs. Donc, en gros, cet en-tête et aussi cet article. Faisons une sauvegarde, et si je recharge la page Web, vous verrez Rien n'a changé sur notre site Web. L'aspect visuel de la page Web est donc assez identique à celui d'avant. Maintenant, une chose que vous pourriez vous demander, eh bien, si ces boîtes ne font rien, alors pourquoi ne pas les appeler simplement Nav, toutes en-têtes ou articles ? Celui-ci pourrait également être un article et rien n'aurait changé sur la page. Par exemple, c'est vrai. Donc, si je recharge la page Web, les gars, je pense que quelque chose a changé Vous voyez donc que le titre Hawn est devenu petit. Il est donc plus petit que cela. Il s'agit donc essentiellement du deuxième titre, et c'est le titre principal. Alors maintenant, si nous avons ajouté cet article, c'est pourquoi cette rubrique est devenue petite. Cependant, nous ne le faisons pas pour ce que l' on appelle le HTML sémantique Et je vais expliquer brièvement ce que cela signifie dans la prochaine vidéo. Mais maintenant, pour aller encore plus loin, remettons-le ici. En tant qu'élément d'en-tête. Maintenant, les gars, enfin, si je regarde ma page de démonstration, à la fin, nous avons cette pose connexe, donc cette liste et nous avons aussi ce texte. En gros, ce texte est appelé pied de page. Chaque page existante possède un pied de page à la fin de sa page Web Créons-le donc. Il suffit donc d' aller à la fin du fichier HDML et les gars, pour créer ce pied de page, nous avons un élément spécial dans Les gars, maintenant vous devinez peut-être que le nom serait Potter Il s'agit donc d'un élément spécial en HTML. Il suffit donc de fermer ce pied de page également. Maintenant, nous pouvons également créer un paragraphe ici pour créer ce texte. Les gars, écrivons ce texte ici. Je ne vous ai pas fourni ce texte, vous suffit donc de l' écrire manuellement. Et les gars ici présents, vous pouvez le remarquer. C'est ce qu'on appelle le symbole du copyright. Nous avons donc ce C. Alors, comment pourrions-nous le créer ? Les gars, cela s' appelle une entité HTML. C'est donc quelque chose de nouveau en HTML. Alors maintenant, pour créer cela , il suffit d' écrire un petit code. Nous devons donc écrire le pourcentage. Et dans mon cas, je connais le nom du symbole du copyright. Nous devons donc écrire le pourcentage, puis copier, et nous devons écrire un point-virgule Ou vous pouvez simplement cliquer ici, et il vous suffit d'écrire l'autre partie. Écrivons-le. Alors revenez dans le futur, sauvegardez. Revenons maintenant à page Web que nous sommes en train de créer. Et si je recharge la page Web, comme vous vous y attendiez, l'aspect visuel de la page est toujours le même, comme je l'ai mentionné au début Encore une fois, ces éléments sont simplement importants pour regrouper le contenu en parties logiques, ce qui est important pour le HTML sémantique et aussi pour le style avec CSS, comme vous le verrez En parlant de HTML sémantique, ce sera le sujet de notre prochaine vidéo J'espère donc vous y voir très bientôt. 13. Une note sur le HTML sémantique: J'ai donc mentionné le terme HTML sémantique à quelques reprises dans cette section Définissons donc très rapidement ce que j'entends par HTML sémantique HTML. Lorsque nous parlons de sémantique, nous voulons dire que certains éléments ont en fait un sens ou un but qui leur sont attachés Ainsi, lorsque nous pensons à un certain élément HTML, nous ne devons en fait pas penser à apparence de cet élément tel qu'il est affiché sur la page. Mais nous devrions plutôt réfléchir à ce que signifie réellement cet élément et à ce qu'il représente. C'est essentiellement la définition du HTML sémantique. Désormais, tous les éléments du DML ne sont pas sémantiques. Et en fait, j'en ai déjà parlé un peu plus tôt dans cet élément. C'est donc cet élément fort qui met valeur notre élément ici sur la page. Rappelez-vous donc comment j'utilisais auparavant l'élément B mais je ne lui attache aucune signification. Je l'ai donc déjà expliqué, et maintenant c'est peut-être un peu plus logique. Encore une fois, en utilisant l'élément fort, ce texte restera toujours en gras ici sur la page Web. Mais ce qui compte vraiment ici, c'est que nous attribuons maintenant un certain sens à ce contenu. Nous disons maintenant qu'il s'agit d'un contenu fort, ce qui signifie essentiellement un contenu très important. Et il en va de même pour cet élément EM. Cela met l'accent sur notre texte. Donc, ce mot technologique fondamental, encore une fois, nous utilisons EM pour le souligner, et il apparaît toujours italique sur la page Web ici, comme vous pouvez le voir Mais ce que nous voulons vraiment dire, c'est cela. Nous y avons donc accordé une importance particulière. C'est ce que signifie cet élément ici en ce moment. Et il en va de même pour tous ces éléments que nous avons utilisés dans la dernière vidéo. Par exemple, ici, dans cet élément de navigation, tout cela ne fait que créer une boîte. Rappelez-vous, qui contient alors ces trois éléments d'ancrage. Mais visuellement, cela ne fait rien. Tout cela ne fait que donner un sens au fait qu'il s' agit d'une navigation. Mais au lieu d'utiliser NAB, nous aurions également pu utiliser un élément plus générique, quel est l'élément de développement ? Écrivons-le simplement. Nous devons également le fermer. Comme ça. Visuellement, rien ne changera, et tout cela n'a fait que créer une nouvelle boîte, mais une boîte sans aucun sens. C'est donc ce que signifie DV. Donc, avant DML Pi, nous utilisions toujours D pour chaque boîte dont nous avions besoin, comme ceci sur la page Puis HTML Phi est apparu et a introduit ce concept de HTML sémantique Maintenant, nous ne devons utiliser l'élément D que lorsque nous ne voulons pas attribuer une certaine signification à un certain conteneur. Donc, à un certain élément de boîte sur notre page. Donc, dans ce cas, nous voulons vraiment que cela signifie qu'il s'agit d'une navigation. Il en va de même pour la fille, l'entête et le monteur que nous avons ici Et en fait, c'est vrai même pour le paragraphe. Par exemple, tous les autres paragraphes sont en fait essentiellement des boîtes remplies de texte maintenant. Le P a bien sûr une signification sémantique. Cela signifie qu'il s'agit d'un paragraphe, mais nous pourrions à nouveau utiliser une boîte générique sans aucun sens. Donc, le développement et rien ne changeraient visuellement. Alors écrivons-le maintenant, rechargeons la page Web. En fait, quelque chose a changé ici. Nous avons perdu une partie de l' espace blanc qui entoure le P. Remettons-le de toute façon ici. Alors chargez, et maintenant nous revenons à nos paragraphes parce que nous voulons qu'ils aient un sens, et bien sûr, nous voulons aussi l'espacement que le navigateur nous donne par défaut autour des éléments P. Mais l'idée que j'ai évoquée demeure, car nous pourrions très facilement recréer cet espace ici en utilisant du CSS plus tard Donc, si vous le vouliez, nous pourrions en fait créer l'intégralité de la page Web uniquement à partir d'éléments D, puis utiliser du CSS pour les styliser comme nous le souhaitons. Mais bien sûr, nous ne le faisons pas. Nous utilisons le HTML sémantique pour donner du sens à nos éléments. Vous vous demandez peut-être pourquoi nous le faisons réellement , et il y a plusieurs raisons, et je pense que je les ai déjà mentionnées. L'une d'entre elles est donc l'optimisation pour les moteurs de recherche, ce qui signifie essentiellement que les moteurs de recherche tels que Google seront en mesure de comprendre la structure de notre contenu et, par conséquent, ils seront mieux à même d'analyser de comprendre la structure de notre contenu et, par conséquent, ils seront mieux à même d'analyser votre contenu et le contenu de votre page Web. L'écriture de code HTML sémantique est également extrêmement importante pour l'accessibilité et en particulier pour les personnes qui utilisent des lecteurs d'écran pour consulter nos pages Web OK ? J'espère donc que cela a du sens, et nous continuerons également à aborder ce sujet au fur et à mesure que nous passerons en revue le reste des codes. Mais je tenais tout de même à préciser très clairement dès le début que lorsque nous pensons au HTML, nous ne devons pas seulement penser apparence réelle dans le navigateur, mais encore plus à ce que ces éléments signifient réellement et à quoi ils correspondent. Cela étant dit, nous avons en quelque sorte terminé tout ce que nous avions à apprendre dans cette section. Dans la vidéo suivante, nous allons donc configurer un peu plus le code VS, puis nous passerons aux derniers défis. Alors n'attendez pas et passons à la prochaine conférence ici. 14. Installation d'extensions de code supplémentaires VS: Bon retour. Nous avons donc commencé à configurer notre éditeur de code VS au tout début du cours. Mais maintenant, nous sommes prêts à installer trois extensions supplémentaires qui nous simplifieront un peu la vie lorsque vous codez du HTML. Passons donc au panneau d' extension ici, et la première extension que nous allons installer ici s'appelle Image review. Il faut donc écrire comme ça et cliquer sur le premier résultat. Donc, ce que fera cette extension signifie qu'elle nous montrera un petit aperçu de l'image dans notre fichier HTML. Il ne vous reste plus qu'à cliquer sur ce bouton d'installation, et je reviens simplement à mon fichier HTML à points d'index et je fais défiler la page vers le bas. Maintenant, vous voyez que nous avons déclaré une image ici, et vous voyez que notre petit aperçu de l'image s'affiche dans le caniveau, comme on l'appelle Et ici, vous voyez que nous avons une autre image, avons donc incluse dans le HTML. Les gars, comme vous pouvez le voir sur notre page Web, nous avons cette image, donc la première et la seconde. Nous l'avons donc inclus ici dans ce fichier HTML, et comme vous pouvez le voir ici, il y a une petite équipe d'images ici dans cette gouttière Donc, encore une image que nous avons ici. Maintenant, cette équipe d'imagerie est là, c'est vrai. Et cela peut parfois être extrêmement utile. C'est pourquoi je voulais vraiment vous montrer celui-ci. Maintenant, la prochaine extension que nous allons installer, je reviens donc à mon panneau d'attention. Ici, vous devez rechercher une surbrillance de couleur. Il suffit maintenant de cliquer sur le premier résultat. Voici donc l'icône de ce surlignage de couleur. Encore une fois, il vous suffit de cliquer sur ce bouton d'installation. Et en fait, celui-ci, je ne peux pas encore vous montrer à quoi il ressemble car il ne sera pertinent qu'en CSS. Mais croyez-moi, cette extension est vraiment très utile pour visualiser les couleurs en CSS Nous allons maintenant installer une autre extension. Il vous suffit donc d'écrire ici la balise de renommage automatique. Cliquez sur le premier résultat. Voici donc l'icône de ce tag rythmique d'auteur. Alors, souvenez-vous de cela. Donc, encore une fois, il vous suffit de cliquer sur ce bouton d'installation, et les gars s'assurent de cocher cette case. Ainsi, chaque fois qu'il y a une mise à jour de cette extension, celle-ci sera automatiquement mise à jour. OK. Maintenant, pour montrer comment fonctionne cette extension, je reviens à mon fichier HTML à points d' index. Supposons que nous voulions réellement faire de cet en-tête un élément de développement Par exemple, je le renomme simplement en DV. Cependant, avant avoir cet en-tête, il est automatiquement renommé car nous avons installé une extension appelée étiquette de renommage automatique Maintenant, vous voyez qu'il change automatiquement la balise de fermeture, donc la balise de fermeture. Et encore une fois, cela est extrêmement utile et nous facilite un peu la vie en écrivant du HTML, car croyez-moi, nous devons le faire tout le temps, exemple changer le nom ultime. OK. Maintenant, remettons-le en place. Je le nomme donc simplement comme en-tête. Et pendant que je tape ici, il est automatiquement renommé, comme vous pouvez le vérifier. Maintenant, les gars, une autre chose que nous voulons faire au moins, c'est qu' il suffit d' aller dans les paramètres, et vous devez cliquer sur les paramètres. Nous allons donc rétablir les paramètres que nous avions désactivés précédemment Nous allons donc maintenant rechercher un réservoir à fermeture automatique. Maintenant, assurez-vous de cocher cette case comme suit. Je pense qu'à ce stade, vous ne commettrez plus l'erreur d' obtenir une étiquette de fermeture. Et maintenant, nous pouvons autoriser VS code à faire ce travail pour nous. Revenons maintenant à notre fichier HTML à points d' index. Et maintenant, par exemple, si j'écris juste un paragraphe, par exemple, comme celui-ci. Je suis donc en train d'écrire le tag d'ouverture. Mais vous voyez ici que le code VS ferme automatiquement cette balise de paragraphe. Maintenant, quoi que nous voulions écrire, nous pouvons écrire ou tout ce que tu peux écrire. C'est donc également un paramètre très utile. Supprimons maintenant ce paragraphe ici. Et maintenant, nous allons installer le plus important, appelé serveur live. Il vous suffit donc d'écrire ici un serveur live comme celui-ci. Cliquez sur le premier résultat, et vous verrez que j' ai déjà installé cette extension. Alors maintenant, je veux juste l'activer. Maintenant, si vous n'avez pas installé cette extension, veuillez l'installer. Maintenant, je vais juste vous montrer comment fonctionne cette extension. Revenons donc à notre fichier HTML à points d' index. Les gars, maintenant je vais à l'université avec ce panneau d'extensions. Maintenant, pour ouvrir Live Server, il suffit de cliquer sur ce bouton. J'espère donc que vous pourrez voir ce bouton de golf en bas ici. Alors cliquez dessus. Et après avoir cliqué, vous voyez maintenant que notre page Web est ajoutée dans un nouvel onglet, n'est-ce pas ? Le serveur live indique donc que le serveur est démarré. Alors je ferme juste celui-ci. Maintenant, vous voyez peut-être que c'est le même résultat, que nous obtenons sur notre première page Web. Par exemple, celui-ci, en gros, a exactement la même apparence, mais il y a une très grande différence. Disons que je veux juste changer cette rubrique Coding Ninja. Alors maintenant, je veux juste changer cela car, par exemple, je vais écrire ici comme sur le code. Maintenant, vous voyez, une fois que j'ai enregistré le fichier, vous pouvez le vérifier. Par exemple, je fais une sauvegarde, et vous voyez ici. Vous voyez ce qui s'est passé, la page a été automatiquement rechargée sans que nous ayons à faire quoi que ce soit Nous n'avons donc fait qu'enregistrer le code, et ce qui se passera ensuite, c'est que la page ici sera automatiquement mise à jour. Ainsi, toutes les modifications que nous avons apportées ici seront essentiellement injectées dans cette page, et vous pouvez maintenant voir le reflet de nos modifications immédiatement. Alors je le remets maintenant. Donc, si je fais une sauvegarde, tu pourras partir. Il n'est pas nécessaire de recharger manuellement la page Web. Le serveur live fait donc le travail à notre place. Maintenant, si je veux arrêter cette connexion, une fois que j'ai développé cette page Web, je peux simplement cliquer ici sur ce port cinq double zéro, et notre connexion au serveur en direct se terminera, d'accord, OK. Maintenant, une autre différence que je voulais juste partager avec vous. Je reviens donc à ce fichier, et vous voyez ici l'emplacement du très long fichier. En gros, cela s'appelle une URL. Il est donc complètement long. Et dans ce cas, une URL très courte, 127.0, signifie qu'elle exécutera un serveur Web pour vous Ainsi, chaque fois que vous apportez des modifications à un fichier HTML, cela se reflétera immédiatement ici. Maintenant, si pour une raison quelconque, vous ne pouviez pas le faire fonctionner sur votre ordinateur, alors bien sûr, ne vous inquiétez pas. Tu peux toujours le faire à l'ancienne. Donc, en gros, comme nous l'avons fait jusqu'à présent, vous pouvez simplement ouvrir le fichier à partir de votre système de fichiers comme nous l'avons fait, puis continuer à l' actualiser manuellement. Mais nous n'avons plus besoin de cet onglet pour le moment. On vient de fermer ça. Nous avons notre serveur en direct qui diffuse la page. Chaque fois que nous effectuons quelques modifications, d'accord, nous sommes maintenant prêts à relever nos deux derniers défis de codage en HTML. On s'y voit bientôt. 15. Défi n°1: Il est maintenant temps de le premier grand défi de codage de ce cours. Commençons dès maintenant. Avant de commencer avec le véritable défi, je souhaite d'abord apporter quelques modifications à la structure de fichiers que nous avons actuellement dans ce projet. En particulier, ce que je veux faire, c'est placer toutes les images dans un seul dossier afin que je puisse ensuite vous montrer comment inclure les images comme celle-ci lorsqu'elles se trouvent dans un dossier spécifique. Donc, en ce moment, vous voyez que ces images se trouvent exactement dans le même dossier que notre fichier HTML à points d'index. Maintenant, ce que je veux faire signifie que je veux juste placer toutes les images dans un dossier séparé, puis je veux donner le chemin ici dans cet emplacement source. Maintenant, ici, nous avons ce robinet Explore, alors développons-le. Comme vous pouvez le voir ici, toutes ces images se trouvent exactement dans le même dossier que notre fichier HTML à points d'index. Maintenant, je veux juste créer un dossier ici. Pour créer un dossier, vous voyez ici que nous avons cette icône, il vous suffit de cliquer sur la deuxième icône, et maintenant je donne le nom de mon dossier IMG. Nous avons créé un dossier ici. Maintenant, je ne fais que développer cela. Il me suffit de glisser-déposer ici. Faisons donc de même pour toutes les images. Toutes les images se trouvent maintenant dans le dossier IMG. Récupérons maintenant la barre latérale. Sauvegardons-le dans notre fichier HTML à points d'index. Maintenant, je veux juste recharger la page Web, pas celle-ci, en gros cette démo Celui-ci, sur lequel nous travaillons actuellement. Maintenant, si je recharge la page Web, vous pouvez vérifier ici Ces deux images, celles que nous avions précédemment, ne se trouvent pas ici car nous les avons lues dans un dossier séparé. Habituellement, ce que nous ferons signifie que nous créerons un dossier, puis nous ajouterons des images dans ce dossier. Développons cette barre latérale. Maintenant, vous voyez que nos images sont dans le dossier des images. Maintenant, pour résoudre ce problème, nous devons donner ici avant tant qu'IMG, puis nous devons donner une barre oblique Ensuite, il faut donner le nom de l'image. Dans ce cas, cet auteur point png. Maintenant, si je lui donne un coffre-fort et si je recharge la page Web, vous pouvez vérifier ici que l'image est apparue ici et qu'elle est également apparue ici dans cette gouttière, comme on l'appelle Maintenant, faisons la même chose pour la deuxième image. Je donne donc comme IMG, puis comme barre oblique. Sauvegardons-le et diffusons la page Web. Maintenant, la deuxième image apparaît également ici et elle apparaît également ici dans cette gouttière Maintenant, nous résolvons complètement le problème des images que nous avons dans le dossier séparé. Habituellement, nous plaçons toujours les images dans un dossier séparé, et j'ai donc pensé qu' il était important de vous le montrer, surtout maintenant avant ce défi où nous allons utiliser d'autres images. À propos de ce défi, je suis de retour sur ma page de démonstration et faisons défiler la page vers le bas pour vous voir. Donc, en gros, ce que je veux que vous fassiez signifie que vous n'avez qu'à coder cette partie vous-même. Fondamentalement, cette section de publication connexe. Maintenant, vous le voyez ici dans cette section de publication connexe. C'est donc comme une liste de désorbée, et vous voyez ici que c'est comme une puce. D'accord ? Donc, dans cette liste non ordonnée, nous avons trois éléments de liste et chacun d' eux contient une image, un lien d'ancrage Donc, en gros, ce lien et ce nom d'auteur. En gros, c'est comme un paragraphe. Alors laissez-moi vous montrer où cela devrait être dans notre balisage. Donc, dans notre fichier HTML. Faisons défiler l'écran vers le bas où vous devez coder cette partie, ce qui signifie qu'après cet article, il vous suffit de le coder, pas dans le pied de page, pas dans l'article Vous devez coder cette partie après cet article. Ici, nous aurons besoin d'un autre élément et celui-ci, je l'écris d'ailleurs pour vous. Ici, nous allons utiliser un élément secondaire. Et ici, vous voyez que le code VS est autocomplété pour nous. Ici, nous allons utiliser cet élément assign et l'élément assign est généralement utilisé pour certaines informations secondaires. Cela complète les informations contenues dans la partie principale de la page. Dans ce cas, la partie principale de la page est l'article, puis les informations secondaires essentiellement des ports connexes sont essentiellement des ports connexes liés à l'article Vers la partie principale. D'accord ? Maintenant, visuellement, nous utilisons souvent l' élément side comme barre latérale, mais il n'est pas nécessaire que ce soit le cas Mais à propos de ce défi, vous voyez qu'il commence par cette rubrique, donc par ce port connexe. L'un des titres, par exemple H un, deux, trois, quatre, cinq et six, souvenez-vous, alors vous voyez ici qu'il s' agit en fait d'une liste Ce que nous ne faisions pas auparavant, c'était d'avoir plusieurs éléments de liste au lieu d'un seul élément de liste. Ici, dans cet exemple, nous avons un élément de liste gros, nous n'avons que ce texte. Maintenant, dans ce cas, dans chaque élément de liste, nous avons une image, un lien, et nous avons également un paragraphe. En gros, le nom de l'auteur, et il n'y a aucun problème. Ainsi, au lieu de chaque élément de liste, il peut y avoir plusieurs autres éléments enfants. Et avec ces informations, je pense que vous êtes maintenant en mesure de le construire. Passons enfin aux images ici. Ce sont des informations dont vous avez besoin. En gros, ils se trouvent tous exactement dans le même dossier. En gros, ici dans ce dossier IMG. Vous voyez ici que nous avons lié un, deux et trois. En gros, ce sont toutes ces images. Et les dimensions que je voulais leur donner sont de 75 x 75 pixels, et maintenant je crois que je vous ai tout donné, veuillez suspendre la vidéo maintenant et prendre quelques minutes, peut-être dix à 15 minutes pour écrire le code HTML de cette section. Bonne chance avec ça et à l'unité de soins intensifs une fois que tu seras prête. C'est bon. J'espère que tu t'en es bien sortie. Laissez-moi vous montrer comment je l'ai fait. Créons comme titre et écrivons simplement un article connexe. J'espère que vous commencerez à voir à quel point c'est utile code VS ferme désormais automatiquement nos éléments HTML. Pour cette liste à puces, créons une autre liste. Ici, nous devons créer un nom de famille EMI SAC, SRC. Maintenant je donne mon texte Al en tant que femme souriante Le seul attribut que nous n' oublions jamais est l'attribut lt. Femme souriante aux longs cheveux noirs ondulés, puis nous devons donner une largeur de 75 pixels Les gars, encore une chose que je voudrais vous dire , c'est que vous pouvez ignorer un attribut. Par exemple, vous pouvez ignorer l'attribut height ou l'attribut wit. l'un de ces deux Vous pouvez ignorer l'un de ces deux attributs. Maintenant, par exemple, je saute l'attribut height. Fermons maintenant la balise image puis je vais créer un lien, essentiellement l'élément d'ancrage, essentiellement l'élément d'ancrage, et mon lien ne pointe actuellement nulle part Je le donne donc sous forme de hachage et écrivons pourquoi DMM est la Créons maintenant un paragraphe. En gros, nous voulons écrire le nom de l'auteur. Maintenant, faisons-en la même chose et examinons le résultat. En gros, il s'agit de notre page de démonstration. Je reviens maintenant à ma dernière page Web sur laquelle nous travaillons. Je fais juste défiler la page vers le bas. Chargons-le. Génial. Magnifique. Tout ce que nous codons dans notre fichier HTML se reflète dans le véritable navigateur Web. Retournons au travail. Créons également cet élément de liste, par exemple, l'élément lie. Créons donc un autre élément. Ici, je vais créer une balise image et je vais créer un atriboot ultra Maintenant, je vais écrire une femme souriante avec ordinateur portable blanc, puis nous devons créer un attribut de largeur. Je donne des dimensions de 75 pixels, fermons la balise d'image et créons un élément d'ancrage. Créons un paragraphe. En gros, David Smith. Enfin, il ne nous reste plus qu'à créer un autre élément de liste. Je vais créer et le terminer. Nous devons écrire Altetribut et enfin, j'écris un homme souriant dans notre costume noir formel Maintenant, bien sûr, votre Altex ne doit pas être exactement le même que le mien Ce n'est pas du tout un problème. Je donne un attribut de largeur de 75 pixels et terminons. Maintenant, créons un lien. En gros, cet élément d'ancrage ne pointe nulle part. Écrivons pourquoi Java crée ? Enfin, nous devons donner à l'auteur le nom de Subi Sara. Davis. Maintenant, sauvegardons-le ici et si je consulte ma dernière page Web, sur laquelle nous travaillons, si je charge la page Web, c' est magnifique. Cela ressemble exactement à notre page de démonstration, et nous avons maintenant tout ce contenu que nous voulons afficher ici joliment balisé de manière très logique. Vous vous demandez peut-être pourquoi nous avons utilisé une liste ici dans ce cas, et la raison en est essentiellement l'idée qui sous-tend le HTML sémantique C'est ce que j'ai expliqué un peu plus tôt. Si nous pensons à cet article connexe, nous pouvons très facilement affirmer qu'il s' agit essentiellement d'une liste de publications connexes, et s'il s'agit d'une liste, nous devrions l'annoter dans notre code HTML Nous devrions écrire notre code STML sous forme de liste, et c'est exactement ce que nous avons fait plus tard avec le CSS Plus tard, ce que nous ferons signifie que nous supprimerons les puces à l'aide du CSS. D'accord, parce qu'ils n' ont beaucoup de sens dans ce contexte, mais même en supprimant les puces, nous voulons toujours connaître le sens de cet élément. Tout cela est là pour former une liste. Quoi qu'il en soit, cela suffit pour cette vidéo. J'espère vraiment que vous avez relevé ce défi et que vous aimerez le relever, même si cela a pris du temps et même si vous deviez revoir certains concepts des conférences précédentes, c'est tout à fait normal et c'est exactement comme ça que cela devrait être maintenant pour vous entraîner un peu plus Même s'il y a un autre défi de codage à venir, complètement indépendant de ce projet. Mais c'est vraiment passionnant, alors j'espère vous y voir bientôt. 16. Défi n°2: temps de relever un autre défi de codage passionnant afin que vous puissiez continuer à mettre en pratique vos nouvelles compétences en HTML. Dans celui-ci, je veux que vous construisiez ce composant pour ces chaussures de sport modernes et confortables. Je parle de composant ici parce que je veux que vous imaginiez ce contenu ici dans le contexte d'un magasin de commerce électronique. Imaginez que nous ayons un magasin de chaussures et qu'il y ait plusieurs chaussures pour chacune d'elles, il y a alors le petit composant. Donc, des choses comme le prix, une brève description. Un lien puis quelques détails sur le produit ici. J'écris ce DML sur une plateforme de codage spéciale appelée CodePen Il s'agit d'un endroit en ligne où nous pouvons essentiellement écrire notre code, puis il exécutera automatiquement le code et rendra. Cela facilite également le partage de ce code. Maintenant, bien sûr, vous n'avez pas besoin d'utiliser CodePen pour relever ce défi Vous pouvez maintenant accéder à votre éditeur de code et développer cette barre latérale. Et vous voyez ici que j'ai créé un dossier pour vous. En gros, ces dossiers de défis et si vous entrez dedans, alors, comme vous pouvez le voir, nous avons ici cette image, et nous avons également ce fichier texte. Donc, en gros, je vous ai fourni tout le contenu de ce défi. Maintenant, si vous voulez voir l'aperçu de l'image, vous suffit de cliquer dessus et vous pouvez la consulter ici. Et pareil ici, car nous avons notre fichier de contenu. En gros, nous avons tout le contenu nécessaire pour relever ce défi. Les gars, si vous terminez votre défi de codage, vous avez encore besoin d'une URL de cette image. Désormais, CodePen ne vous permet pas d'ajouter directement des images sur leur plateforme Ce que j'ai fait signifie que j'ai hébergé cette image sur une plate-forme unique et que j'ai créé une URL pour que vous puissiez simplement copier cette URL et la coller dans le stylo de code. Maintenant, les gars, si vous voulez connaître le contenu de ce défi, alors vous voyez que j'en ai fourni le texte. Donc, en gros, à partir d'ici, vous pouvez récupérer tout le texte jusqu'à ici, vous pouvez le copier. Si je ne le fais pas ici dans cette vidéo c'est parce que nous allons en fait relever ce défi plus tard. Nous allons donc continuer à développer ce très petit projet, qui créerait alors un désordre de fichiers différents et de nombreux codes différents. Comme vous le faites sur votre propre ordinateur, c'est plus facile si vous le souhaitez créer un nouveau fichier ML et de le faire ici. Mais d'un autre côté, je pense qu'il est également utile et utile pour vous d'en apprendre un peu plus sur CodePen et de relever le défi Permettez-moi de vous faire une démonstration très rapide de CodePen. Créons un nouvel onglet ici et cherchons CodePen. Et vous pouvez consulter ici codpen point IO, il suffit de cliquer dessus Les gars, si vous regardez cette vidéo à l'avenir, l'interface de ce site Web pourrait être modifiée. Les gars, une fois que vous êtes arrivé sur ce site Web de CPN, vous pouvez simplement cliquer ici pour démarrer le codage Vous pourrez donc voir cette interface de CodePen. Mais vous pouvez toujours créer un nouveau stylo à code ici en tant que Copen point IO slash Maintenant, les gars, permettez-moi de vous présenter certaines choses à propos de CodePen. En gros, ici, nous avons ce code HTML. Il s'agit d'un panneau HTML, un panneau CSS et d'un panneau JavaScript. En gros, vous pouvez coder ici en HTML et CSS ici et aussi en JavaScript ici dans ce panneau. Dans ce cas, je ne veux pas ce panneau CSS et JavaScript. Donc, ce que je vais faire signifie simplement assembler ce panneau. Pour le compiler, je clique simplement sur ce bouton en forme de flèche, et vous voyez ici que nous avons une option pour minimiser l'éditeur CSS, il suffit de cliquer dessus Et je ferai de même pour le JavaScript. Maintenant, les gars, nous avons plus d' espace ici dans notre panneau HTML. Donc les gars, quel que soit le code HTML que nous codons ici, il sera directement reflété ici dans ce panneau de résultats. Écrivons donc simplement sous forme d'un seul titre. Et ici je vais écrire Hello World. Je ferme donc le tag. Maintenant, les gars, comme vous pouvez le voir ici, ce que nous avons écrit dans ce panneau HTML. En gros, nous avons écrit un titre principal intitulé hello world, et cela se reflète directement ici dans ce panneau de résultats. En gros, le Hello world. Voyons donc le défi de codage, que nous voulons créer ici. Ici, vous voyez que le nom du défi est défi à relever. Quels sont les éléments de ce défi de codage que nous voulons créer ? En gros, nous avons un titre et une image, et nous avons aussi ces prix nous avons cette livraison gratuite, nous avons ici du texte, et aussi nous avons un lien, et nous avons les détails du produit, et nous avons ici une liste de décommande, et nous avons également un bouton Pour l'instant, pour relever ce défi, je voudrais vous donner quelques conseils Je vais donc passer à un autre mode Je clique donc simplement sur ce mode source. Je me cache juste. Maintenant, les gars, ce que je veux signifie qu'il vous suffit d' intégrer tout ce contenu dans un élément d'article. Ensuite, vous voyez encore une chose que nous avons. En gros, cette image. CodePen ne se permet pas d' héberger directement les images sur cette plateforme, nous ne pouvons pas injecter les images directement ici dans cette plateforme de codage Donc, ce que nous pouvons faire signifie qu'il vous suffit de copier cette URL. vous ai donc fourni cette URL dans le fichier de contenu, afin que vous puissiez y accéder ou simplement la taper. Et encore une chose que je tiens à vous dire, vous voyez, nous avons ici un lien, donc plus d'informations. Et à la fin, voyez-vous, nous avons ici cette flèche. En fait, cette flèche est une entité HTML. OK ? Maintenant, les gars, je veux juste vous montrer une dernière chose. Si je vais sur ma page Web, donc essentiellement cette page Web laquelle nous travaillions auparavant, vous voyez maintenant en bas de page, nous avons ici ce symbole de copyright Il s'agit également d'une entité ML. Maintenant, ce que je veux dire signifie qu'il existe une liste pratique d'entités HTML. Vous pouvez donc consulter ici. En gros, sur ce site Web, donc sur le site Web de cette école WT, nous avons cette liste HTML de quatre entités, donc nous avons beaucoup d'entités DML Maintenant, les gars, si vous voulez accéder directement à ce site Web de WT schools, gros à cet espace d'entités DML, alors vous pouvez créer un nouvel onglet, et ici vous pouvez rechercher les écoles WT HTML quatre entités. Et ici, vous pouvez consulter ce site Web. Vous pouvez simplement cliquer dessus et vous arriverez le même site Web que celui que je vous ai montré plus tôt. Revenons maintenant au défi que je suis en train de relever. Ici, vous voyez que nous avons cette entité de flèche d'écriture, essentiellement ce symbole de flèche d' écriture. Maintenant, revenons en arrière et si je veux rechercher ce symbole HTML d' écriture en forme de flèche, alors ce que je peux faire signifie que je peux simplement effectuer une recherche ici. Par exemple, j'appuie sur mon clavier en tant que Ctrl plus F où une barre de recherche sera présente, et ici je rechercherai une flèche. Et quelles sont les flèches présentes dans cette liste, elle sera affichée ici. Par exemple, je veux juste cette flèche d'écriture. Vous pouvez donc vérifier ici. Ici, nous devons écrire le code de l'entité DML sous forme de pourcentage R A R et point-virgule Copions simplement ceci. Les gars, comme ça, vous êtes le seul à pouvoir trouver un symbole. Par exemple, dans la vidéo précédente, nous avons utilisé le symbole du copyright. Vous pouvez écrire le copyright ici et vous pourrez voir ce symbole de copie, et ici nous avons ce code ici Donc, ce pourcentage de copie et ce point-virgule. C'est ce que je vous ai montré tout à l'heure. Donc dans mon cas, je veux la flèche d'écriture, donc j'écris juste la flèche ici. Les gars, ce code, vous devez l'écrire ici pour relever le défi, et je le copie simplement ici. Et ici, vous voyez, les gars, nous avons ce bouton cliquable qui est carte Ato que nous n'avons jamais utilisée auparavant Je vous le montre donc simplement dans ce fichier TML. C'est donc comme un simple bouton. Nous avons donc créé un élément de bouton pour cela. Nous avons donc ouvert et fermé, et à l'intérieur de cela, nous avons fourni le contenu. C'est vrai. Mais si vous le créez sur un stylo à code comme je vais le faire, vous aurez besoin de cette image qui se trouve à cette URL. Il nous suffit donc de le copier ici et de l'utiliser pour votre propre projet. Les dimensions de l' image doivent alors être de 220 pixels. Avec ça, je pense que je t'ai donné tout ce que tu avais besoin de savoir. Alors allez-y et copiez cette URL. Et maintenant, je vais passer pleine page afin que vous puissiez tout voir en même temps. Ni vous laissera vous occuper de cela et reviendra ici dans cinq ou dix minutes une fois que vous serez prêt. OK, nous voilà de retour et j'espère que ce n'était pas trop difficile pour vous, donc ce n'était pas trop difficile. J'espère donc que vous aurez pu mettre en pratique un peu plus vos compétences. Et maintenant, au cas où vous auriez moindre doute ou que vous rencontriez un problème, je vais vous montrer ma solution ici. Revenons à notre stylo à code. En gros, notre stylo à code vide, je vais simplement le supprimer et créer un élément d' article pour cela. Et maintenant, comme vous pouvez le voir, nous devons fermer manuellement les éléments et copier tout le texte ici. Enveloppons maintenant tout le texte en quelques éléments. Par exemple, maintenant je vais écrire deux titres, essentiellement le titre secondaire et ici nous devons fermer manuellement les éléments. Après ce titre, nous avons besoin de cette image. Créons une balise d'image pour cela. Copions maintenant l'URL de celui-ci. Je copie simplement l'URL. Maintenant, comme vous pouvez le voir, j'ai collé l'URL Je vais maintenant écrire l'attribut alt. Écrivons le texte Al. Des baskets noires et blanches flottant sur un fond violet. Maintenant, je donne une largeur de 220 pixels, et maintenant je vais fermer l'élément image. Maintenant, comme vous pouvez le constater, les résultats sont reflétés ici dans le panneau des résultats. Ici, vous voyez que nous avons terminé cette rubrique. En gros, nous avons intégré ce texte dans le deuxième titre et nous avons également ajouté une image. Ensuite, après avoir vu, nous avons ce texte ici. Le texte eSTIML que vous voyez se compose donc d'une seule ligne. eStiml ne se soucie donc pas de tous ces espaces ici. Ce qu'il fera signifie donc qu'il traitera ensemble du texte comme un simple paragraphe. C'est pourquoi il est apparu en une seule ligne. Maintenant, incorporons simplement tout le texte dans les éléments, par exemple. Nous avons donc ces paragraphes, intégrons-les à l'élément de paragraphe, puis nous devons créer un autre parangon. Comme vous pouvez le constater, que nous intégrons ce texte aux éléments, ce code est intentionnel, comme vous pouvez le voir, un paragraphe de plus que vous voulez Et je pense qu'il s'agit essentiellement d'un lien. Donc, en HTML, nous devons le baliser comme un lien. Je veux juste donner le HR de l'attribut. Et ici, je ne vous ai pas indiqué où pointe ce lien. Il suffit donc de fournir has has représente qu'un lien ne pointe nulle part, alors fermons-le. Et ici, vous voyez que nous n'avons qu'une seule flèche, ce n'est pas une bonne façon de représenter la flèche. Nous avons une entité spéciale pour cela. Par exemple, nous devons écrire le code de la flèche droite sous forme de pourcentage, RAR et semiclm, puis nous avons les informations de protection Maintenant, en gros, c' est comme un titre. Maintenant, pour ce titre qui est « entrer dans la zone de confort », j'en ai donné deux. Maintenant, je vais donner à ce titre un h trois, et terminons. Et puis nous avons cette liste à puces. En gros, cette liste de désorbement. Enveloppons-le également. Je vais créer une liste non ordonnée ici. Découpons ce texte ici et mettons-le ici. Je vais regrouper tout ce texte dans un seul élément alla comme celui-ci. Je pense que vous vous êtes entraîné à écrire du HTML. Nous avons enfin un dernier élément. Enfin, nous avons ce bouton Attucat. Enveloppons-le comme suit dans l'élément du bouton. Voyons maintenant le résultat ici. Cela correspond exactement au défi que nous avons lancé. Les gars, encore une différence, nous avons ces détails de prix. C'est en gras, et ici vous pouvez vérifier qu'il est dans le texte normal. Donc, pour mettre cela en gras, ce que nous devons faire signifie que nous devons regrouper ce texte en un seul élément fort. Donc, comme nous l'avons appris dans les conférences précédentes. Maintenant, j'ai intégré ce texte à l'élément fort. Maintenant, notre texte est en gras, super. Quoi qu'il en soit, cela nous permet de relever ce défi et de passer revue tout ce que vous venez d'apprendre, toutes vos nouvelles compétences, étudiants de Tear. J'espère que vous appréciez le cours et que vous le trouvez utile. J'ai beaucoup travaillé pour créer ce cours pour vous. Et vos commentaires sont très importants pour moi. Si ce cours vous a aidé de quelque manière que ce soit, qu'il s'agisse d'améliorer vos compétences, renforcer votre confiance en vous ou de vous inciter à créer quelque chose par vous-même, veuillez prendre un moment pour rédiger un avis positif. Vos commentaires me motivent à continuer. Merci d'avoir participé à ce voyage. J'ai hâte de lire tes pensées. Merci.