HTML 101 : Une introduction au développement Web pour les débutants complets

1. 101 : une introduction au développement Web pour les débutants: Bonjour et bienvenue dans HTML one-to-one, un guide pour débutants sur le codage. Jetons un coup d'oeil à ce qui va être couvert dans ce cours. Tout d'abord, nous allons faire installer un programme de codage. Ensuite, nous allons jeter un oeil à ce qu'est HTML et comment l'écrire. Nous allons avoir beaucoup d'expérience pratique. Et enfin, nous allons avoir un petit projet où nous créons une page Web HTML. Mais pourquoi devriez-vous apprendre le HTML ? Honnêtement, c'est la structure osseuse sous-jacente derrière chaque site web. Vous ne pouvez pas afficher un site Web sans HTML. Vous devez connaître HTML et pour entrer dans d'autres développements web. Si vous voulez devenir un développeur web, si vous voulez simplement faire des sites Web pour passe-temps, vous devez connaître HTML. Il est très facile à apprendre, ne devrait prendre que quelques jours pour vraiment saisir. Mais surtout, apprendre le HTML est la première étape pour apprendre à coder. Salut, je m'appelle Caleb et aujourd'hui je vais être votre instructeur. Je suis un développeur web senior et instructeur de codage premium. J' ai appris à plus de 300 mille étudiants comment coder avec succès. Et une fois de plus, bienvenue dans HTML 101, un guide pour débutant sur le codage. Une fois prêt, allons-y et commençons avec cette première leçon. 2. Qu'est-ce que le HTML ?: Bon, jetons un coup d'oeil à ce que HTML est. Alors, qu'est-ce que HTML ? Html signifie langage de balisage hypertexte. En fait, ce n'est pas un langage de programmation. C' est ce qu'on appelle un langage de script, mais il reste absolument vital pour le développement web. Et 100% de tous les sites Web utilisent le HTML. Html est la structure derrière chaque site Web sur Internet est l'épine dorsale derrière chaque site Web unique. Et puis nous couche couche sur le dessus du HTML. Mais sans HTML, honnêtement, il n'y a pas de site Web et ce n'est pas une opinion, c'est juste un fait. C' est ainsi que fonctionnent les sites Web et Internet. Donc, la première chose que vous devriez apprendre dans le développement web est HTML. Jetons un coup d'oeil à HTML versus HTML5. Vous verrez souvent les gens dire, apprendre HTML5 ou HTML5, ceci ou HTML5 que. Mais HTML5 est en fait la dernière version de HTML et il sera juste toujours appelé HTML5 et finalement il sera juste appelé HTML. Donc, il n'y a pas de HTML six sur la route, il n'y a pas de sixième itération de HTML. Donc, chaque fois que vous voyez HTML5, vous pouvez réellement penser à HTML5 et HTML comme exactement la même chose. Et c'est parce qu'ils sont exactement la même chose. 3. Obtenir la configuration: Ok, jetons un coup d'oeil à la mise en place. D' abord. Vous allez avoir besoin d'un éditeur de texte. Je suggère fortement VS Code. C' est gratuit et il fonctionne sur tous les systèmes d'exploitation. Donc, avant de faire quoi que ce soit, assurons que nous avons VS Code installé. Et je vais juste à Google ce téléchargement VS Code et est codé point Visual Studio.com. Et c'est le programme d'édition de texte que nous allons utiliser dans ce cours. Maintenant, si vous avez déjà écrit du code et que vous avez un éditeur de texte différent que vous préférez, c'est ok. Mais si vous n'avez jamais écrit de code auparavant, allons de l'avant et téléchargeons ce programme. Donc pour moi, dans ce cours, j'utilise un Mac. Mais peu importe si vous utilisez Mac ou Linux ou Windows, ce sera le même programme, directement sur les trois systèmes d'exploitation. Windows 78 ou dix. Assurez-vous de télécharger celui-ci. Si vous êtes sur Mac, téléchargez celui-ci. Et si vous êtes sous Linux, téléchargez l'un de ces deux. Une fois que vous avez téléchargé et installé le code VS, assurez-vous que vous pouvez ouvrir votre éditeur de texte comme celui-ci. Donc le tien va avoir l'air un peu différent. Une fois que vous l'ouvrez, la vôtre va être une couleur différente, mais en fin de compte c'est exactement le même esprit du programme, juste une couleur différente parce que j'aime l'accessibilité derrière elle. J' aime pouvoir taper des trucs ici. Et c'est une couleur assez facile à lire sur votre écran. Donc, vous allez juste avoir l'air un peu différent dans les couleurs, mais la mise en page générale va être exactement la même. Assurez-vous donc que le code VS est téléchargé et installé. Et une fois que vous aurez ça, passons à la prochaine leçon. 4. Syntaxe HTML: Okey-dokey. Jetons un coup d'oeil à la syntaxe HTML. Maintenant, le mot que je dis ici est syntaxe. Et tout ce que cela signifie, c'est le style que vous écrivez quelque chose. Donc l'anglais a une syntaxe particulière avec des apostrophes, des points d'interrogation, des virgules, des choses comme ça. C' est comme un balisage pour la façon dont on écrit une langue. Et écrire du code n'est pas différent. Il y a certaines règles que nous avons en place. Donc, tout d'abord, allons de l'avant et regardons une syntaxe HTML. Donc, typiquement, ça ressemble à ceci. Nous avons une sorte d'éléments. Et il s'ouvre comme ça et se ferme comme ça. Donc chacun d'entre eux est appelé une balise, ceci comme une balise d'ouverture. Et c'est une balise de clôture. Et il a toujours, toujours, toujours, toujours, un signe moins que. Ensuite, le mot de l'élément, quel que soit l'élément, et il y en a beaucoup. Et puis un signe plus grand que. Et puis pour mettre fin à un élément, nous faisons la même chose. On l'ouvre. Et puis nous disons en fait que ce n'est pas un élément d'ouverture, c'est un élément de clôture et nous disons cela avec une barre oblique puis le mot. Et puis nous le fermons à nouveau avec un signe plus grand que ou un symbole. Maintenant, vous avez peut-être remarqué que j'ai mis ceci sur une ligne différente, et c'est en fait OK. Html ne se soucie pas vraiment de l'espace blanc supplémentaire, donc cela n'a pas vraiment d'importance. Tout ça, toutes ces lignes supplémentaires entre la ligne 4 et la ligne 11, ça n'a pas vraiment d'importance d'être honnête. On en parlera plus en profondeur un peu plus tard. Donc tout ça ici, est ce qu'on appelle un élément. Maintenant, à l'intérieur de ces éléments, nous pouvons avoir du texte. Donc, on a, disons, un texte ici. Et ce qu'un navigateur va faire est alors dire, Hey, il y a un élément particulier ici et il se ferme ici, et quoi qu'il soit à l'intérieur, appliquez-lui ces règles. Donc, quelle que soit la règle de l'élément, peut-être aussi gras, rendre ce texte en gras est ce qui va faire. Et nous parlerons d'audacieux à l'avenir aussi. Mais en ce moment, vous devez aussi savoir que cet élément n'est pas réellement un élément réel. On passe juste en revue la syntaxe ici. Juste pour que cela ait du sens. Dans les prochaines leçons. L' autre chose que nous pouvons avoir sont ces choses appelées attributs. Et cela va en fait à l'intérieur d'un élément. Donc ce que je vais faire, c'est diviser ça sur sa propre ligne, et c'est bon. Il va être fondamentalement la même chose à votre navigateur parce que encore une fois, il ne se soucie pas de cet espace supplémentaire là-dedans. Donc, nous avons ces choses appelées attributs, puis il va nom d'attribut est égal à. Et puis vous pouvez avoir deux apostrophes comme ça ou deux guillemets comme ça. Et puis nous pouvons mettre de la valeur ici, une sorte de texte. Donc on peut dire un texte ici. Maintenant, nous pouvons avoir plusieurs attributs. Nous pouvons avoir, disons, un attribut title. Et encore une fois, vous n'avez pas besoin de savoir ce que c'est, couvrira tout cela dans les leçons futures. Encore une fois, nous allons juste passer en revue la syntaxe ici, et ceci est un exemple d'un second attribut. Deuxième attribut. Ici, nous pouvons avoir de plus en plus, nous pouvons effectivement avoir un nombre illimité d'attributs. Les attributs sont comme des éléments. Un élément a une règle que votre navigateur va lire. Donc, si cela devait être gras, votre navigateur, c'est un texte le plus audacieux. Et juste parce que j'écris attribut ici ne signifie pas réellement qu'il va faire quoi que ce soit. Maintenant, un bon exemple de cela, parce que ce n'est pas réellement précieux, attribut n'est pas un attribut valide en HTML. Nous pourrions juste écrire le titre est égal à, et puis quel que soit le titre, et le titre est en fait un attribut approprié. Et vous pouvez avoir cette, euh, la plupart de vos éléments HTML. Encore une fois, nous en parlerons à l'avenir. Vous n'avez pas besoin de mémoriser tout ça non plus. Parce que lorsque vous écrivez ceci, mesure que vos doigts commencent à taper de plus en plus, vous allez vous familiariser avec le fonctionnement du HTML et son apparence. Donc le gros plat ici, c'est, c'est ton élément et tu as une étiquette d'ouverture, et tout ça c'est un tag. Vous avez une balise de fermeture et tout ce qu'elle englobe est votre élément. Ensuite, nous avons des attributs, comme l'attribut title. Et ainsi, le nom de l'attribut est égal à il a besoin de ce signe égal. N' ajoutez pas d'espaces avant ou après. Assurez-vous que c'est tout à fait. Donc, vous avez votre attribut est égal à. Et puis soit citations, apostrophes. Maintenant, voici le catch est que si elle s'ouvre avec un guillemet, il doit se terminer par un guillemet. Sinon, si elle s'ouvre par une apostrophe, elle doit se fermer à l'intérieur d'une apostrophe. Et vous pouvez réellement voir le code VS mis en évidence pour moi. Il dit que tout ici est pareil. Et cela s'appelle la mise en évidence de la syntaxe. Mais dès que j'ai remplacé cette citation par une apostrophe, parce que cet attribut doit s'ouvrir et se fermer avec le même caractère. Cette mise en évidence de la syntaxe a fonctionné. Maintenant, si votre mise en évidence de la syntaxe ne fonctionne pas tout de suite et que vous suivez comme vidéo et que vous essayez de faire ce que je fais. Descendez ici et cela va probablement dire texte brut. Vous pouvez cliquer sur ceci et vous pouvez taper HTML et cliquez simplement sur celui-ci et il changera votre surbrillance de syntaxe pour vous. C' est donc tout ce qu'il y a à cette leçon particulière. Vous n'avez pas besoin de faire quoi que ce soit à ce stade. C' est vraiment important de savoir que tout ça est un élément. C' est une balise d'ouverture. C' est une balise de fermeture. C' est votre contenu intérieur. Et ce type ici est un attribut. Laissez ça s'enfoncer un instant. Une fois que vous êtes prêt, passons à la leçon suivante où nous parlons de la structure HTML de base de chaque page. 5. La structure de base: Jetons un coup d'oeil à la structure de base de chaque page Web. Donc j'ai VS Code ouvert ici et je vais juste aller à File New, qui est en fait en dehors de ma zone d'enregistrement. Donc, il suffit de commande ou de contrôle N ou fichier, Nouveau fichier. Et vous allez voir ce tout nouveau fichier. Vous allez aller de l'avant et passer de texte brut au HTML. Et ce que nous pouvons faire ici est de remplir automatiquement. Donc, nous avons un joli raccourci ici, donc nous n'avons pas à nous rappeler que c'est HTML deux-points cinq. Et puis, si vous appuyez sur l'onglet, il devrait être autocomplete pour vous en utilisant l'abréviation Emmett. Vous pouvez voir ça sur le côté droit de mon écran ici. Alors allons de l'avant et appuyez sur Tab. Et ça fait tout ça pour moi. Maintenant, je vais aller de l'avant et supprimer quelques choses juste parce qu'on n'en a pas besoin en ce moment et ça pourrait être un peu déroutant. Et je vais juste changer ce retrait juste pour qu'on puisse regarder un peu de nidification et je vais en parler, je vais en parler dans une seconde. Mais passons par cette ligne par ligne. Donc la ligne numéro un, c'est le genre d'éléments les plus bizarres que vous allez voir. Vous ne voyez pas trop souvent les éléments commençant par un point d'exclamation type doc est le seul. Donc, nous disons, hey navigateur quand vous lisez ce fichier non, que c'est un fichier HTML5. C' est un fichier HTML. Ce n'est pas un PDF, ce n'est pas un texte clair, n' est pas JavaScript, ce n'est pas CSS, ce n'est pas une image, Ce n'est pas une police, ce n'est pas une sorte d'autre document. Il s'agit d'une page HTML, donc s'il vous plaît la rendre comme une page HTML. Ensuite, sur la deuxième ligne, nous avons une balise d'ouverture appelée HTML, et c'est là que tout notre HTML va réellement. Et puis sur la ligne 9, nous fermons que les balises disaient que tout ici va vivre à l'intérieur de cette balise HTML et du code envieux, vous pouvez réellement cliquer sur cette petite flèche et vous pouvez l'effondrer, ce qui est vraiment sympa. Donc, si jamais vous avez trop de code, vous êtes un peu submergé. Vous pouvez toujours réduire votre code. Ensuite, nous avons deux parties principales à chaque page. Nous avons notre tête. Encore une fois, c'est un élément de tête d'ouverture, d'accord, tag plutôt. Et c'est une étiquette de tête de fermeture. Et tout ça, c'est l'élément de tête. Et vous pouvez réellement le voir comme HTML. Et nous avons un autre élément ici appelé le titre. Mais celui-ci est imbriqué à l'intérieur de la tête et la tête est imbriquée à l'intérieur de HTML. Et puis nous avons ici un élément de titre qui change juste le titre de la page. Donc, quand vous allez sur une page web, comme celle-ci, quand nous avons téléchargé le code VS il y a quelques leçons. Il change ce titre ici pour vous. C' est ce que fait l'élément title. Maintenant, vous pouvez avoir toutes sortes de choses dans votre tête, mais vous pouvez penser à l'élément de la tête comme littéralement la tête sur votre corps. C' est ton cerveau. Il contient toutes ces informations supplémentaires. Ce n'est donc pas complètement visuel, mais il contient des informations supplémentaires. Votre corps est comme le corps dans lequel vous vivez. C' est ce que les gens vont voir. Donc, si je retourne à cette page juste à titre d'exemple, tout ici fait partie du corps. Donc tout ce qui est visuel, la partie interactive de votre page Web, c'est le corps. Et nous allons mettre la plupart de notre code là-dedans. Alors allons de l'avant et faisons un exemple ici. Et nous allons juste écrire bonjour monde. Et ce que je vais faire, c'est sauver ça. Donc, fichier Enregistrer sous. Et où dois-je jeter ça ? Jette ça sur mon bureau. Je vais appeler ça Hello World dot HTML. J' en ai déjà un, alors allons-y et remplacons ça. Maintenant ce que je peux faire dans mon navigateur, comme je reçois, encore une fois, je peux aller au fichier, mais cette fois je vais aller à Ouvrir le fichier. Donc c'est la commande o ou o si vous êtes sur Windows, je crois qu'il doit bureau. Et ouvrons le monde bonjour. Et c'est une page web. Maintenant, si vous suivez cette vidéo, hésitez pas à faire une pause à ce stade et essayer d'écrire le code que j'ai écrit dans cette vidéo. Ce n'est pas beaucoup de code et c'est vraiment facile d'écrire avec VS Code. Rappelez-vous les deux-points HTML cinq, puis appuyez sur onglet. Et cela complétera automatiquement tout cela pour vous. Et puis il suffit d'écrire quelque chose à l'intérieur de votre élément corporel. Donc, je viens d'écrire bonjour monde, et cela est apparu comme texte sur ma page. Si vous faites cela, enregistrez votre fichier, puis ouvrez-le dans votre navigateur. Et tu vois Hello world. Alors hé, félicitations, vous venez littéralement de faire votre première page web. Donc, ma suggestion est de donner cela un coup parce que c'est toujours vraiment, vraiment une bonne pratique et c'est vraiment simple à ce stade. Donc oui, ma suggestion est de donner une chance à ça. Une fois que vous êtes satisfait de vos résultats ou peut-être que vous ne voulez pas donner une chance et que vous voulez passer à la leçon suivante. De toute façon, passons à la prochaine leçon ensemble et nous commencerons à parler de l'élément titre. 6. Titres de page: Ok. Bonjour et bienvenue. Dans cette leçon, allons de l'avant et parlons de ce type ici, l'élément titre. Donc, dans la dernière leçon, nous avons créé cette page appelée bonjour monde. Et je vais juste supprimer ça. Et c'est la page que nous avions à l'origine et il dit document là-haut, juste dans cet onglet. Alors continuons et actualisons ceci et nous allons le voir comme le nom du fichier et qui correspond au nom du fichier ici. Alors bonjour soulignent le monde point HTML. Bonjour soulignent le monde point HTML. Même chose. Pas vraiment élégant, pas ce que vos utilisateurs recherchent, pas convivial pour les moteurs de recherche. Mais nous pouvons changer cela avec un élément de titre. Et donc je vais écrire le titre slash title. Allons de l'avant et les esprits mis à un modèle Django. Mais je veux changer cela d'un template Django à un fichier HTML. Alors, continuons ici et changeons ce titre. Disons bonjour de Caleb. Et rafraîchir. Et vous pouvez toujours rafraîchir avec la commande R ou je crois que le contrôle le sont. J' utilise juste Google Chrome en passant, n'a pas vraiment d'importance quel navigateur vous utilisez. Mais vous pouvez simplement recharger la page et il dit bonjour de Caleb et vous pouvez changer cela à tout moment. On pourrait dire bonjour de la Terre. Et vous pouvez faire File Save ou vous pouvez appuyer sur le contrôle S ou la commande S, je crois que c'est. Oui, Command S sur Mac, je crois que c'est Control S sur Windows. Allez-y et sauvegardez ce fichier. Revenons ici, actualisons cette page. Bonjour de la Terre. Et c'est donc la balise de titre. Maintenant, vous ne devriez avoir qu'une seule étiquette de titre parce qu'elle n'est vraiment utilisée qu'une seule fois. Ayant à titre de balises, votre navigateur ne saura pas lequel utiliser. Assurez-vous donc que vous n'avez qu'une seule balise de titre. Maintenant, la chose à ce sujet, cet élément particulier, cet élément title, il doit vivre à l'intérieur de l'élément head, et cela doit vivre à l'intérieur de vos éléments HTML. Donc maintenant, nous entrons dans l'imbrication. Nous avons cet élément HTML, et à l'intérieur de celui-ci, nous avons le titre de la tête, élément de fermeture, et nous avons l'élément de fermeture du contenu du corps. Et c'est tout ce qu'il y a à créer un titre dans un onglet ici en utilisant HTML naissant easy. Une fois que vous vous sentez mal à l'aise avec cela, passons à la prochaine leçon et nous commencerons à ajouter du contenu réel à une page. Donc, il ne dit pas simplement bonjour monde, il va dire bonjour monde et peut-être un titre que nous pourrions écrire un paragraphe, nous pouvons avoir plusieurs titres, des choses comme ça. 7. Paragraphes et titres: Ok, jetons un coup d'oeil aux paragraphes et aux en-têtes. Et c'est là qu'une page va réellement commencer à prendre une forme supplémentaire ici. Donc il ne va pas juste dire bonjour monde. Maintenant, un paragraphe, et comme beaucoup d'éléments en HTML est juste une balise p. Mais parce que c'est un élément et c'est un élément assez standard, nous pouvons faire p et ensuite nous faisons slash p. Et c'est encore une fois, c'est juste notre syntaxe. Il s'agit de notre étiquette d'ouverture ou de fermeture. Et le tout ensemble est un élément. Donc p signifie paragraphe, mais nous n'écrivons pas de paragraphe, nous écrivons juste p pour paragraphe. Ici. Nous pouvons soit écrire du texte ici ou si vous voulez garder votre code bien et propre, nous pouvons aller de l'avant et le mettre sur des lignes séparées. Donc je vais juste garder ça sur des lignes séparées. Je pense que ça a l'air un peu plus propre comme ça. Et ce que je vais faire est de taper Lorem, appuyez sur l'onglet. Et ça remplit ma zone de texte avec un tas de Lorem Ipsum, mots latins. Je n'ai aucune idée de ce que cela signifie, mais c'est une chose courante que vous allez voir dans le développement web. Alors allons-y et économisons. Ainsi, vous pouvez aller à Fichier, Enregistrer ou commander S ou Control S sur une fenêtre. Revenons à la page que nous créons et appuyez sur Actualiser. Et maintenant, nous avons ce lorem ipsum texte. Maintenant, allons de l'avant et créons un titre pour cette page, un en-tête. Donc juste à l'intérieur du corps, au-dessus de l'élément P, pas à l'intérieur, mais au-dessus. On va écrire H1. Et la bonne chose à propos de VS Code est quand vous écrivez un élément, chaque fois qu'il dit l'abréviation Emmett, vous pouvez simplement cliquer sur onglet. Donc, j'appuie sur onglet et il écrit mon code pour moi et puis je peux écrire quelque chose à l'intérieur. Vous pouvez dire, Bienvenue au HTML 101. Allons-y, sauvegardez cette page. Retournez à notre navigateur et appuyez sur Actualiser. Nous avons ce gros texte ici, HTML, Bienvenue au HTML 101 et puis lorem ipsum ici. Maintenant, si cela semble plus petit sur votre écran, c'est parce que je suis réellement zoomé sur un 175%. Le tien devrait ressembler à quelque chose d'un peu plus comme ça. Je viens de l'agrandir pour qu'il soit plus facile de voir sur votre écran. Ce n'est pas le seul titre de taille que nous pouvons avoir. Nous pouvons avoir des éléments H2, H3, H4, H5, H6. Alors allons de l'avant et créons une balise H2. Et cela pourrait être comme un sous-titre, un guide des débutants pour le codage. Et vous pouvez voir que je suis un peu plus rapide ici, mais la syntaxe reste la même. Ceci est une balise HTML d'ouverture, une balise H2, et ceci est une balise de fermeture. Encore une fois, vous avez cette barre oblique, puis le nom de l'élément, et cela dit juste que tout à l'intérieur d'ici doit être une taille de police H2. Et tout ce qui se trouve entre les deux balises H1 doit être super grand. Et tout entre les deux balises de paragraphe est votre paragraphe juste des textes généraux pour la plupart. Alors, sauvegardez ça. Revenons ici et voyons à quoi ressemble un H2. Il devrait être juste entre ces deux sections du texte. Et vous pouvez voir qu'il est un peu plus petit. Ce que je voudrais que vous fassiez pour une expérience pratique en ce moment est de créer un H1, H2, mais aussi créer un H3, créer un H4, H5, H6. Et encore une fois, tout ce que je fais ici est de taper un nom d'élément. Dès que l'abréviation Emmett apparaît, je peux appuyer sur tab et il crée l'élément H6 pour moi. Alors allez-y et jetez un oeil à ce à quoi ressemble H1 à H6. Ajoutez du texte supplémentaire ici. Barbecue Lol. Allez-y et sauvegardez ça. Et lorsque vous retournez sur la page et appuyez sur Actualiser, consultez les différentes tailles d'en-tête. Et vous pourriez être un peu surpris quand H6 ressemble à. 8. Whitespace n'a pas d'importance: espaces n'ont pas d'importance. Maintenant, j'ai mentionné cela très tôt, mais les espaces blancs n'ont pas d'importance. Vous pouvez voir que j'ai en fait un élément ici, un H2. En fait, tout ça est un élément. Et je n'ai pas d'espacement ou de nouvelles lignes ou quoi que ce soit. C' est juste une étiquette d'ouverture H2O, un tas de taxes, puis une étiquette de fermeture H2. Mais avec un paragraphe, j'ai l'élément p ici, et puis j'ai en fait cassé ceci sur une nouvelle ligne. Ajout d'un tas d'espaces supplémentaires ici. Et puis, à la toute fin, je l'ai cassé sur une nouvelle ligne, un tas d'espaces supplémentaires. Maintenant, votre navigateur ne se soucie pas du nombre d'espaces il y a. Il va essayer de tout condenser en un seul espace de toute façon. Donc, à titre d'exemple, Allons de l'avant et ajoutons un espace juste après le mot ipsum. Je vais juste ajouter un tas d'espaces. Si on écrivait un article de journal, ça aurait l'air terrible. Ce serait deux mots, une virgule, puis tous ces espaces différents. Et ces petits points que vous voyez. Après avoir mis en évidence cette base qui me dit juste que c'est un espace qui est, ce n'est pas en fait qu'ils me disent juste qu'il y a un espace. Alors allons de l'avant et sauvegardons ça. Rendez-vous sur votre navigateur et appuyez sur rafraichir. Et nous verrons dès que je frapperai, absolument rien ne changera. Alors rechargeons cette page. Je peux recharger ça une centaine de fois. Rien ne ressemble à ce que ça change. Cependant, si nous allons si nous cliquons quelque part sur la page, nous pouvons aller avec le bouton droit de la souris voir la source de la page. Et nous pouvons voir tout notre code source et c'est exactement ce que j'ai écrit dans le code VS. Et vous pouvez voir que tous les espaces sont là. Mais votre navigateur dit, non, vous n'avez pas besoin de tous ces espaces. Compressons cela dans un seul espace visuel, donc les espaces n'ont pas d'importance. Un autre exemple ici est que je pourrais ajouter toutes ces nouvelles lignes et il y a un tas de nouvelles lignes. Vous pouvez en fait voir qu'il y a tellement de nouvelles lignes qui comme je ne peux même plus vraiment lire le code. Et allons de l'avant et ajoutons un peu plus de lorem ici. Donc l'onglet Lorem et moi devrions avoir deux paragraphes, non ? Je devrais avoir ce premier paragraphe. Et je peux me débarrasser de cet espace parce que cela n'a pas d'importance. J' ai trois nouvelles lignes, puis j'ai un autre paragraphe. Maintenant, intuitivement, vous penseriez que cela créerait deux paragraphes pour nous. Ça ne va pas faire ça. Donc, si je sauvegarde cela, retournez sur le navigateur, ce que vous allez voir est que ceux-ci sont combinés ensemble. Et encore une fois, il a pris toutes ces nouvelles lignes et l'a écrasée dans un seul espace pour vous. Maintenant, si vous voulez plusieurs paragraphes, mais vous devez faire est que vous devez fermer cet élément de paragraphe. C' est proche de cet élément de paragraphe et cela crée qu'il a gagné son premier paragraphe. Allons l'effondrer et montons ici. Et on doit juste rouvrir ça. Et je vais te montrer ce que je fais ici dans une seconde. Tout ce que j'ai fait, c'est que j'ai fermé le premier élément ici et j'en ai rouvert un nouveau ici. Donc, si nous examinons cette question ensemble, nous avons le paragraphe 1, paragraphe 2. Ils ne sont pas imbriqués. Ce n'est pas un paragraphe à l'intérieur d'un paragraphe. C' est un paragraphe. Et puis nous fermons, puis un deuxième paragraphe et nous fermons cela. Alors continuons et cliquez sur Enregistrer. Et maintenant, quand nous actualiserons notre page, nous allons voir qu'il s'agit en fait de deux paragraphes distincts, comme nous l'avons probablement voulu en premier lieu. Donc, la leçon ici est que les espaces n'ont pas d'importance. Si vous voulez utiliser un espace blanc supplémentaire. Il y a des façons de le faire, comme envelopper vos textes dans différents paragraphes ou différents H1 ou deux h différents. Et ce n'est qu'un exemple de plus. Allons, allons-y et voyons ce qui se passe quand je mets ceci est sur une nouvelle ligne, juste dans mon H1 juste pour démontrer que, que ce n'est pas spécifique seulement aux paragraphes non plus. Donc je vais sauver ça. Va ici, frappez rafraichir, et ce n'est pas sur une nouvelle ligne. Et encore une fois, c'est parce que notre navigateur ne porte pas, même si nous avons écrit le code de cette façon, notre navigateur ne se soucie pas qu'il ait cet espace blanc supplémentaire. Donc je vais aller de l'avant et nettoyer tout ça. Il suffit de supprimer cet espace blanc supplémentaire parce que j'aime que mon code soit gentil et bien rangé. Et c'est ce qu'il nous reste. Ensuite, jetons un coup d'oeil à des éléments d'imbrication un peu plus. Nous l'avons déjà fait avec HTML, titre de la tête, corps H1, H2 et paragraphe. Ceux-ci sont imbriqués, mais entrons dans une terminologie. 9. Nesting éléments HTML: Bon, jetons un coup d'oeil à imbriquer du code. Donc, nous avons déjà imbriqué notre HTML. Et ce que cela signifie, c'est que nous avons un élément HTML. Et puis à l'intérieur de cela, au lieu de seulement des textes réguliers comme nous voyons avec un paragraphe ou un titre un, titre deux, nous avons un autre élément et ensuite nous pouvons avoir un autre élément. Et cela peut durer essentiellement pour toujours. Maintenant, ce que je vais faire est de faire défiler ma page juste en dessous de mes deux paragraphes que j'ai. Et je vais créer un nouvel élément appelé div. Ou si vous voulez utiliser l'abréviation Emmett DIV. Et puis dès que vous les voyez à l'abréviation par ici, allez-y et appuyez sur la lettre de tabulation sur votre clavier et elle le remplit pour vous. Maintenant, un div honnêtement ne veut rien dire. Nous parlerons plus de divs sur la route, mais cela ne fait rien comme un paragraphe va séparer votre texte avec. Par exemple, un paragraphe va séparer votre texte ici. C' est comme un joli petit espacement là-dedans et ça en crée un autre pour toi. Un div ne fait pas vraiment ça. Alors allons de l'avant et disons que c'est un élément div. Allez-y et enregistrez cela, actualisez votre page. Il va dire que c'est un élément div. Et maintenant à l'intérieur de cet élément, et cela va sembler un peu bizarre au début, mais nous avons un élément div. Et puis on peut avoir du texte là-dedans. On peut avoir une autre div ici aussi. On peut dire div. Il s'agit d'un élément imbriqué. Et nous fermerons celle-là aussi. Allons de l'avant et actualisons cette page. Et on va voir qu'il apparaît sur la ligne juste après. Mais tout cela est enveloppé dans un div. Maintenant, une bonne façon de regarder cela est de cliquer avec le bouton droit sur votre page. Allez à Inspecter. Et je vais rendre ça un peu plus grand ici. Oups, c'était trop grand. Et faisons défiler vers le bas et nous pouvons passer le curseur sur les éléments ici. C' est donc notre outil d'inspection. C' est incroyablement utile. Vous allez vouloir l'utiliser pour à peu près tout ce qui concerne le front-end. Donc HTML, CSS, et JavaScript sur la route. Mais pour l'instant, nous allons simplement rester avec HTML. Et ce que nous avons ici, c'est un div. Et nous pouvons ouvrir cette div et nous pouvons voir qu'il y a des textes et vous pouvez voir que lorsque je survole, cela change réellement ce qui est sélectionné sur ma page. Et puis nous avons un élément enfant et c'est ce qu'il s'appelle quand il est imbriqué, c'est un élément enfant. Et c'est sur sa deuxième ligne. Nous pourrions en fait aller une couche plus profonde aussi. Donc, j'ai mis ceci sur une nouvelle ligne juste pour garder le code bien rangé et bien rangé. Et je pourrais faire une autre DIV, ou expérimentons. Et faisons un paragraphe à l'intérieur d'un div. Il s'agit d'un paragraphe. Allez-y et sauvegardez ça. Retournez sur mon navigateur et appuyez sur Actualiser ici. Et vous pouvez voir que je survole les choses, va me montrer ce que exactement un sélectionné. J' ai donc un élément div ici, et il sélectionne à la fois le div imbriqué et le paragraphe. Alors qu'ici, il ne s'agit que de sélectionner un paragraphe à la fois. Vous pouvez le voir comme je me retourne entre eux. Donc ici, j'ai l'overarching, l'élément conteneur s'appelle div. Et puis j'ai du texte et puis j'ai un autre div, et puis j'ai à l'intérieur de ce div, un paragraphe là, j'ai du texte ici et puis j'ai un paragraphe ici. Et vous pouvez vraiment voir que ce paragraphe a un tas d'espacement autour d'elle, donc il bosse un peu votre texte vers le bas. Maintenant, jetons un coup d'oeil à une terminologie ici. Celle-là. Cela va être votre élément parent et cela va être un élément enfant. Donc, à quoi cela ressemble généralement, c'est que vous avez une sorte de parent slash d'élément parent, puis une balise de fermeture comme ça. Et puis vous avez une sorte d'éléments enfants et la proximité de cette étiquette là à nouveau, peu importe si vous avez un espace blanc supplémentaire. Vous pouvez mettre ça sur plusieurs lignes si vous le vouliez, ce que je vais faire. Et ensuite, on peut aller plus loin. On pourrait appeler ça un grand enfant, élément grand enfant slash petit-enfant. Et cela peut continuer et encore et encore pour toujours. Donc on peut dire créer un grand enfant. Et il continue et encore et encore. Maintenant, la terminologie va changer en fonction de ce dont vous parlez. Donc si je me débarrasse de mon petit-fils et de mon arrière-petit-fils, quand on travaille ici. C' est notre élément principal. Ça s'appelait un enfant. Et si nous parlons de l'élément qui l'entoure, celui qui l'entoure comme ça, c'est ce qu'on appelle un élément parent. Maintenant, si nous travaillons sur l'élément parent et que nous voulons parler d'un élément à l'intérieur de celui-ci. On appellerait ça un enfant. Maintenant nous sommes, les changements de terminologie sont si nous avons élément petit-enfant et c'est celui sur lequel nous travaillons, et c'est notre élément principal. Disons qu'on parle avec un collègue de travail de cet élément particulier. On appellerait ça l'élément, quel qu'il soit, peut-être que c'est un DIV. L' enfant deviendrait alors le parent. parent deviendrait alors le grand-parent. C' est donc relatif, comme dans une hiérarchie familiale. Maintenant, aucun de ces éléments ne sont en fait des éléments réels. Alors allons de l'avant et supprimez-les. Et juste pour les fonds, Iz allons de l'avant et ajoutons un élément h3 ici, juste un petit titre. Et il dit, c'est un exemple d'imbrication d'éléments. Donc j'ai enregistré ce fichier et je vais le rafraîchir. Et fermons notre inspection avec ce x ici. Ceci est un exemple d'imbrication d'éléments, et tout cela est dans un élément. Maintenant, dans la leçon suivante, nous allons voir pourquoi l'imbrication est en fait très, très important parce que pour l'instant ce n'était pas très important. Nous n'avions pas besoin d'imbriquer ça du tout, mais nous devions savoir comment cela fonctionne pour arriver à la prochaine leçon. Alors, dans la leçon suivante, jetons un coup d'oeil à l'audace, l'italique et au soulignement de votre texte. Et puis on va les mélanger et les faire correspondre tous les trois. 10. audacieux, italiques et soulignements: Bon, bienvenue de retour de la vidéo d'imbrication. Allons de l'avant et en fait créer quelque chose d'applicable ici. Donc je vais juste faire de l'espace pour travailler juste parce que j'aime beaucoup d'espace supplémentaire. Et encore une fois, les espaces n'ont pas d'importance, nous le savons bien ? Nous allons donc créer un nouveau paragraphe ici, et fermons automatiquement cette balise de paragraphe. Et ici, écrivons les abaissons. Appuyez sur l'onglet et nous obtenons un ipsum Lorem, tout comme nous l'avons fait avant. Maintenant, si nous voulons audacieusement certains textes, vous pensez que ce serait le mot gras. Ce n'est pas tout à fait intuitif, mais c'est assez proche. On utilise juste la balise b. Donc nous pourrions faire B et nous allons en gras les quatre premières lettres ou mots ou autres. Et donc j'ai une balise p, un paragraphe, et imbriqué comme un élément enfant est l'élément gras. Et donc je garde ça. Et si je passe à Google Chrome et appuie sur rafraichir, vous pouvez effectivement voir que mon texte ici est en gras et le reste n'est pas en gras. D'accord ? Donc, c'est imbriquer et cela est en fait entrer dans quelque chose d'un peu plus intéressant, un peu plus utile, un peu plus applicable à l'apprentissage du HTML. Ensuite, allons-y et mettons-nous en italique. Donc, en italique pour faire quelque chose en quelque sorte de fait, c'est un bon exemple. Tout ce que j'ai fait là-bas a fait ça en italique. Donc c'est une sorte d'écriture manuscrite ish, I. Allons de l'avant et ajoutons un élément i à ces trois mots. Et donc si je rafraîchis la page, lesquelles avons-nous ici ? Copa USD. Je ne vais même pas essayer de le dire, mais c'est le qu'il a 30 mots ici. Et si j'appuie sur rafraichir, nous pouvons voir que cela a changé automatiquement. Enfin, nous avons souligné et c'est exactement la même chose. Donc vous penseriez qu'il serait souligné, mais ce n'est pas le cas. Nous utilisons une sorte de raccourci quand il s'agit de HTML. Et on dit juste que c'est le nouvel élément. Et encore une fois, cela a une étiquette d'ouverture et de fermeture. Tous les trois ont des étiquettes d'ouverture et de fermeture. Je vais sauver ça, revenir ici, frappez rafraichir. Et nous pouvons voir que cela est maintenant souligné. Maintenant, où cela devient vraiment, vraiment intéressant est que nous pouvons créer un autre paragraphe. Et Laura, et tu vois à quel point c'est le plus rapide parce que j'ai cette fin de tabulation. Si je voulais faire cette audacieuse, italique et soulignée. Et débarrassons-nous de ça. Ne faites qu'une seule ligne au lieu de deux ou trois phrases là. Faisons juste une phrase. Je peux dire être frappé Tab fait audacieux pour moi. Et puis il veut que je mette mon texte ici. Eh bien, c'est sympa. Mais ce que je vais faire ici, c'est juste attraper tout ça. Je vais frapper Control X ou commander Exon MAC. Cela coupe juste dans mon presse-papiers et puis contrôle V ou Command V comme dans violet à coller. Et quand je sauve, rafraîchir, on va voir qu'on a maintenant une phrase audacieuse. Maintenant, si nous voulions faire cette italique aussi, n'est pas BI pour gras, italique, c'est juste b. Et puis à l'intérieur, nous disons I. Alors nous pouvons aller par ici, appuyer sur onglet pour en indenter un peu plus. Et slash I. Une chose à noter aussi est que votre texte pourrait réellement défiler loin de l'écran ici. Vous pouvez aller dans vos paramètres et vous pouvez modifier votre habillage de mots ou vos paramètres d' habillage de texte afin qu'il Briggs s'allume automatiquement sur deux nouvelles lignes. Donc, vous pouvez voir que tout ce truc pour moi est la ligne 27, même si elle couvre plusieurs lignes, c' juste pour que ce ne soit pas une longue ligne travers la page et que je dois faire défiler à gauche et à droite. Ok, donc j'ai ajouté un paragraphe, en gras, en italique. Allons de l'avant et sauvegardons et rafraîchissons. Et maintenant, c'est audacieux et en italique. Donc ça marche assez bien. Enfin, ajoutons un nouvel élément, et je déplace juste ce texte très rapidement. Allez-y et enregistrez ce fichier, actualisez. Et maintenant, nous pouvons voir que c'est audacieux, italique et souligné, mais il y a une règle ici. Votre étiquette intérieure, votre étiquette la plus intérieure, doit avoir une étiquette interne la plus fermante. Donc, si le dernier que vous avez est un u, la première balise de fermeture est un u. si le deuxième élément que vous avez ici est un i, le second dernier est une barre oblique I, la même chose avec bold. Donc, nous commençons par audacieux ici et nous fermons et vous pouvez réellement voir, et c'est pourquoi je l'ai indenté comme ça, afin que vous puissiez voir que ceux-ci correspondent de cette façon. Vous voulez toujours que vos éléments correspondent de cette façon. Des choses drôles peuvent arriver si vous ne correspondez pas à vos balises d'ouverture et de fermeture, c'est assez important. Donc, à ce stade, si vous voulez aller de l'avant et donner un coup de feu, essayons d'imbriquer un paragraphe. Donc, créez un élément de paragraphe. Puis gras votre texte, italique votre texte, soulignez votre texte. Et peu importe s'il est gras, italique ou souligné ou tout autre ordre, il pourrait être italique, souligné gras, il pourrait être souligné gras, italique. Ça n'a pas vraiment d'importance tant qu'ils correspondent. Et puis ajoutez du texte là-dedans. Et je veux que vous fassiez en sorte que votre texte soit les deux. Ce ne sont pas les deux, mais tous. Il devrait être en gras, en italique et souligné, et il devrait figurer dans un élément de paragraphe. Allez-y et donnez ça une fois que vous serez prêt à aller de l'avant et je vous verrai dans la leçon suivante. 11. L'élément div: Ok. Bonjour et bienvenue. Dans cette leçon, nous allons parler d'éléments div. Donc, ce que je veux faire ici, c'est que j'ai déjà un tas de code et je veux juste l'effondrer donc c' est un peu plus lisible pour moi parce que cela devient assez long. Et débarrassez-vous de cet espace blanc supplémentaire juste parce que j'aime que mon code soit bien rangé. Et si nous le voulions, nous pourrions effondrer juste l'œil, juste la perle, juste un paragraphe. Mais dans cette leçon, allons de l'avant et parlons de div. Div est un élément factice. Et en fait, ça ne veut rien dire. Donc, comme nous l'avons dit, P représente le paragraphe B signifie gras, je représente italique. Div est juste un diviseur. Et vous pouvez réellement voir que la référence MDM ici de VS Code dit que l'élément div n'a aucune signification particulière du tout. Elle représente ses enfants. Il peut être utilisé avec la classe Lang et les attributs title pour marquer la sémantique, commentaire, blah, blah, blah. Ce truc devient un peu trop avancé pour nous en ce moment. Mais fondamentalement cette première ligne qui dit l'élément div n'a aucune signification particulière du tout. C' est important. Il n'a pas de signification particulière. Maintenant, ce dont nous allons parler ici est un div n'a pas de signification particulière, cela n'a pas de signification particulière. Mais regardons aussi comment cela fonctionne côte à côte. Parce que dans cette dernière leçon, où nous avons fait des caractères gras, italiques et soulignés, nous pourrions utiliser ces trois éléments. Et en fait, un meilleur exemple est celui où nous avions un paragraphe, mais ensuite nous avons eu des caractères gras et ce texte gras était à côté du texte normal. Et puis on a eu des italiques. Et ce texte en italique était juste à côté du texte normal et du texte sous-jacent. Même chose, encore et encore et encore. Et cela entre dans ce concept d'éléments de bloc par rapport aux éléments en ligne. Donc, un div est un élément de bloc. Et ce que je veux dire par là, c'est que si je touche la commande C ou le contrôle C, et puis la commande V ou le contrôle V, je viens de copier toute la ligne. Et c'est une deuxième ligne. Alors continuons et sauvegardons cela, actualisez notre page ici. Et vous pouvez voir ici, il dit juste que cela n'a pas de signification particulière. C' est une deuxième ligne. Et si je fais cela, faites un clic droit et inspectez, lorsque je survole l'élément, vous pouvez réellement voir que cette ligne bleue qui traverse toute la page, c'est un élément bloc. Donc, même si c'est seulement en fait besoin de, l'espace de, cela n'a pas de signification particulière. Vous pouvez voir que ça prend toute la ligne. C' est ce qu'on appelle un bloc d'éléments. Et tu vas voir ça tout le temps parce que c'est, c'est vraiment bon de savoir. La raison en est que, par exemple, si ce paragraphe n'était pas un élément bloc de ces deux paragraphes fusionnerait et qu'ils ne seraient pas réellement des paragraphes. Ce serait un paragraphe fusionné avec le deuxième paragraphe pour en faire un gros. Ce n'est pas ce qu'on veut tout le temps. Et donc la bonne chose à propos de ce paragraphe est aussi un élément de bloc est qu'il va prendre toute la largeur de votre écran. Il va prendre autant de biens immobiliers que possible. Revenons donc à notre code et essayons même de les mettre côte à côte dans notre code. Donc c'est ouvrir un div et le fermer, ouvrir un autre div et le fermer. Allons de l'avant et gardons ce rafraîchissement et nous allons voir que rien n'a changé. Rien n'a changé, littéralement rien n'a changé. Et c'est encore parce que ce sont des éléments de bloc. Donc notre ensemble de navigateurs, ok, vous avez un élément ferme un autre élément qu'il ferme. Dans l'outil d'inspection. C' est exactement ce que notre navigateur voit. Cela a été corrigé pour nous, donc c'est sur deux lignes différentes. Et encore une fois, ce sont des éléments de bloc, donc ils vont prendre autant d'espaces possibles qu'ils peuvent séparer par l'élément lui-même. Maintenant, c'est un concept étrange, mais dans la leçon suivante, nous allons parler des éléments de bloc par rapport aux éléments en ligne, et comment vous pouvez les utiliser ensemble et quelle est la différence. 12. Éléments de blocage et éléments en ligne: Ok, regardons les éléments de bloc par rapport aux éléments en ligne. Jusqu' à présent, nous avons travaillé principalement avec des éléments de bloc. Maintenant, un élément de bloc est si je clique avec le bouton droit de la souris et inspecte, vous pouvez voir qu'il prend toute la largeur de ma page, même s'il n'utilise que ce que 30% du texte dit réellement. Allouer toute la largeur de la page pour cet élément H2 particulier, paragraphes ou éléments de bloc également. H 3s, H 4-5-6, même celui en haut de la page. Mais ce qui ne l'est pas, c'est que si nous descendons ici, nous avons ce paragraphe particulier avec des éléments imbriqués. La prochaine chose n'a rien à voir avec ça. Ce qui est important à noter est que cet élément B pour bold, il ne prend pas toute la largeur de la page entière. Il est en fait assis côte à côte avec votre texte normal. Et puis nous avons l'italique, le texte régulier souligné, puis un texte plus régulier maintenant souligné, italique et gras. Ceux-ci sont appelés éléments en ligne et tout ce que cela signifie est qu'ils peuvent exister côte à côte avec d'autres éléments. Alors que paragraphe, vous pouvez voir que je n'ai que du texte jusqu'à environ ici. Si je survolais cela à droite de l'endroit où j'ai sélectionné ce texte, cela prend toujours cet espace supplémentaire. C' est un bloc d'éléments. Maintenant, vous n'avez pas besoin d'avoir des éléments en ligne à l'intérieur d'un élément bloc. Bien que typiquement c'est ce que vous allez finir par faire, mais il n'y a pas de règle pour cela. C' est juste, c'est un élément en ligne. Et on pourrait mettre l'italique juste à côté du gras, juste à côté du sous-jacent. Ça n'a pas vraiment d'importance parce que c'est un élément en ligne. Donc, il va prendre le moins d'espace possible par rapport aux éléments de bloc, comme ici. Ce div est un élément de bloc. Ce div est un élément de bloc. Et ça va prendre toute la largeur. Maintenant, quelques cas d'utilisation sont gras, italique et soulignés. Mais aussi si vous vouliez un élément de bloc, vous pourriez utiliser un titre que je peux H1 à H6, et cela va mettre votre texte plus grand sur sa propre ligne. Et ce qui est bien à ce sujet, c'est qu'on a déjà un titre ici. Bienvenue dans HTML 101. Nous avons un sous-titre ici utilisant un élément h2. Et puis nous avons quelques paragraphes. Ce sont tous des éléments de bloc et c'est ce qui rend notre page agréable. Maintenant, si pour une raison quelconque si audacieuse, nous sommes un élément de bloc, et je vais vous montrer à quoi ça va ressembler. Mais n'essaie pas ça. Je ne veux pas que vous essayiez cela parce que cela sort de la portée du HTML, mais je vais vous montrer à quoi cela ressemble. Bloc d'affichage. Donc ce que je viens d'écrire là-bas, tu n'as pas besoin d'essayer. Mais je l'ai changé. J' ai détourné son comportement par défaut pour être bloc au lieu d'inline. Et vous pouvez voir que le gras est maintenant sur sa propre ligne. Et c'est pourquoi les éléments en ligne sont très importants. Parce que si vous avez des caractères gras sur sa propre ligne, vous n'aurez jamais la possibilité de sélectionner un texte particulier dans un paragraphe et de le rendre gras, souligné ou métallique. Maintenant, il y a beaucoup d'éléments différents là-bas qui sont en ligne et il y en a beaucoup qui sont bloqués. Et donc vous allez devoir en quelque sorte les découvrir au fur et à mesure que vous vous déplacez dans l'apprentissage du HTML. Il y a trop d'éléments à cette couverture, il y en a probablement des centaines. Mais pour la plupart, vous allez utiliser une poignée d'entre eux à peu près tous les jours. Et vous devez connaître la différence entre un élément de bloc comme celui-ci que j'ai détourné, ou un élément en ligne. Pour que vous puissiez réellement rendre votre texte présentable d'une manière humaine lisible. C' est donc la différence entre les éléments de bloc et les éléments de ligne. 13. Liens vers d'autres pages: Ok, donc le web est fait de liens vers d'autres pages. C' est vraiment tout ce que c'est. Y ont une page ici, mais que se passe-t-il si je voulais créer un lien vers Google ou si je voulais créer un lien vers une autre page de mes premières choses ? Tout d'abord, commençons par utiliser le formulaire le plus simple. Laissons simplement un lien vers Google ou Facebook ou Instagram ou quelque chose comme ça. Donc, dans cette leçon, nous allons créer deux types de liens différents. Le premier, et j'ai juste retourné à VS Code ici. Comment le premier va être un lien juste vers Google. Et c'est un lien absolu. Le second sera un lien relatif. Donc, un lien commence par l'élément a, et cela représente l'ancre. C' est une ancre hypertexte. On peut voir ça par ici. Merci VS Code pour le remplissage qui m'a informé. Donc, nous avons une balise d'ancrage et cela utilise réellement notre premier attribut. Nous n'avons pas encore utilisé d'attribut. Et ça va être HREF. Et cela signifie une référence hypertexte. Et fondamentalement, c'est comme ça que nous allons pointer vers une autre page Web. Maintenant, ça fait un peu de temps. Mais un attribut est toujours le nom d'attribut égal. Et puis soit citations ou apostrophes, ils doivent commencer et se terminer par la même chose. Peu importe lequel vous utilisez, mais doit commencer et se terminer par la même chose. Et allons de l'avant et fermons ceci une étiquette. Et disons que c'est un lien. Et voyons ce qui se passe. Quand je retourne ici et rafraîchis ma page. On dirait un lien. Mais quand je clique dessus, ça ne va nulle part. Donc, ce que je veux faire ici est HREF est égal à, et je veux le lien complet vers n'importe quel site Web, y compris la partie HTTP qui est vital. Vous avez besoin du HTTP à chaque fois que vous voulez un lien absolu. Alors allons de l'avant et allons sur Instagram.com. Donc tout ce que j'ai fait là-bas était HTTP ou HTTPS. La plupart des sites Web ont que s Ces jours-ci, barre oblique deux-points et puis le site Web, donc Instagram.com. Et en fait, cette barre oblique n'est même pas nécessaire. Allons de l'avant et sauvegardons cela et actualisons. Et quand je vais ici, vous pouvez voir que le lien a changé en bleu parce que je n'ai pas encore cliqué dessus. Et nous allons cliquer sur le lien et regarder cela. Ça m'a amené à Instagram. Alors je vais y retourner. Et peut-être que je ne veux pas d'Instagram, peut-être que je voulais quelque chose d'un peu moins personnel. Allons à Google. Alors allez-y, sauvegardez, rafraîchissez. Et vous pouvez voir en bas à gauche il est dit HTTPS, Google.com. Cliquez dessus. Et boum, ça nous amène à Google. Et c'est tout ce qu'il y a pour vraiment ajouter un lien vers n'importe quelle page que vous avez. Encore une fois, c'est l'élément a pour l'ancrage. L' attribut HREF est égal à citation, puis l'URL de votre site Web, ce lien, puis du texte. Donc, nous pouvons dire que cela va aller à Google. Et parce que ça va à deux lignes dans mon éditeur, je vais juste mettre ça sur deux lignes différentes. Et encore une fois, les espaces n'ont pas d'importance. Donc, peu importe que j'ai tous ces espaces différents ici, et je peux toujours revenir à mon navigateur, appuyez sur Rafraîchir. Et la seule chose qui change le texte, pas l'espacement supplémentaire. Et donc ça a changé le texte. Cela va aller à Google. Et c'est le cas. Maintenant, c'est bien, mais que se passe-t-il si vous voulez créer un lien vers votre propre page Web ? Eh bien, c'est un peu différent parce que vous pouvez voir ici, il n'y a pas de HTTPS, c'est un fichier et vous pouvez théoriquement y lier, mais vous ne voulez pas, parce que pendant que je suis sur un Mac, donc ça commence par fichier, mais si vous êtes sous Windows, cela commence par C. Et si vous êtes sous Linux, c'est juste une barre oblique. Donc ça ne marchera pas pour tout le monde. Et nous devons nous assurer que cela fonctionne sur tous les systèmes d'exploitation. Et la façon dont nous contournons cela est d'utiliser un lien relatif. Ainsi, un lien relatif semble presque identique à un lien absolu ou à une ancre absolue. Et nous pouvons faire un HREF est égal à, nous avons nos citations ici. Et allons dire deuxième page point HTML. Fermez cette balise d'ouverture et dites ceci va à la deuxième page. Et nous fermons toujours. Chaque fois que nous avons du texte à l'intérieur d'un élément, nous le fermons toujours avec une balise de fermeture. Et jetons un coup d'oeil à ça. Et nous pouvons voir que ces liens sont côte à côte. Donc, nous savons à partir de la dernière leçon que ce sont éléments en ligne parce qu'ils fonctionnent côte à côte, ce qui signifie que nous pouvons bien les mettre à l'intérieur d'un paragraphe. Et quand je clique sur cela va à une deuxième page en bas à gauche, vous pouvez réellement voir qu'il va aux utilisateurs Caleb, bureau italien, deuxième page point HTML, et cela n'existe pas réellement. Donc, quand je clique sur ce lien, il va à une page 404. 404 signifie simplement que votre page n'existe pas car votre fichier n'a pas été trouvé, peut avoir été déplacé ou supprimé. L' accent est mis sur cela, si vous déplacez des fichiers d'un dossier à un autre dossier, il peut être déplacé ou supprimé. Et fondamentalement, c'est dire que le fichier n'existe pas. Alors continuons et faisons en sorte que ce fichier existe. Je vais fermer cet onglet parce que ce n'est pas nécessaire. Et faisons ça. Je vais copier toute cette page. Et je vais aller File, Enregistrer sous. Et partout où vous avez helloworld point HTML, et appelons cette 1 deuxième page point HTML. Sauvegardez. Et donc maintenant, nous avons un deuxième point de page HTML. Et je peux fichier ouvrir ou commande ou contrôle O et ouvrir le monde bonjour. Et maintenant, nous avons deux dossiers côte à côte. Donc la deuxième page, ce que je vais faire, c'est que je vais supprimer à peu près tout ce qui se trouve à l'intérieur du corps. Alors, allons et supprimons tout ça. Changons le titre à la deuxième page. Et disons un H. Voici la deuxième page. C' est tout ce qu'on va faire. Alors j'ai sauvé ça. Et quand je reviendrai ici, cela existe maintenant à cet emplacement de fichier sur mon ordinateur. Et si j'appuie sur rafraichir, ça marche en fait. Donc si je retourne, rafraîchissez ça juste pour un bon ménage. Si je rafraîchis ceci et je dis que cela va à la deuxième page, c'était 414. Il disait qu'il y avait un fichier manquant ou une page manquante. Maintenant, ce n'est pas maintenant, il va réellement charger la page pour moi. Enfin, sur notre deuxième page, allons de l'avant et ajoutons un lien d'ancrage supplémentaire à notre page Hello World. Et disons Hello World dot HTML. Maintenant, la chose à garder à l'esprit ici est que ce n'est pas un lien absolu. Il ne commence pas par HTTP, ce n'est pas un lien absolu. Cela dit simplement aller dans ce fichier particulier qui se trouve être dans le même dossier que la deuxième page. Ils sont donc côte à côte dans le même dossier. Et ça va dire, oh, cherchez ce dossier particulier. Donc, c'est en fait un lien vers un autre fichier, pas nécessairement une page Web. Et il se penche un peu sur la façon dont les pages sont réellement servies sur un serveur. Fondamentalement parce que le serveur est juste l'ordinateur de quelqu'un d'autre. Mais celui-ci pourrait dire : Retournez à la maison, sauvegardez, rafraîchissez. Retournons à la maison. Je vais faire ça juste une touche plus grande ici. Donc c'est notre deuxième page. Retourne à la maison. Et nous avons maintenant deux pages qui relient l'une à l'autre. Et si vous nous donnez une photo et que vous obtenez cela fonctionne, cela signifie que vous avez réussi à créer un réseau de pages. Vous n'avez pas seulement une page Web maintenant, vous avez un site Web. 14. Ouverture dans de nouvelles fenêtres: Ok, jetons un coup d'oeil à l'ouverture d'un lien dans une nouvelle fenêtre. Donc, nous savons probablement tous que vous pouvez contrôler ou commander cliquer sur un lien et cela va s'ouvrir dans un nouvel onglet. Et peut-être qu'on ne veut pas ça. Peut-être que nous voulons forcer les gens à, chaque fois qu'ils cliquent sur un lien, ouvrir dans un nouvel onglet, ce qui pourrait être le même que de cliquer avec le bouton droit et ouvrir le lien dans un nouvel onglet. Mais si on veut forcer ça à quelqu'un, on a ce pouvoir. Donc, je vais passer à helloworld dot HTML, et pour Google chaque fois qu'ils vont à une page externe, parce que c'est une page interne ou une page relative, et c'est un site Web externe ou un lien absolu. On peut dire que la cible est égale à, et celle-ci a l'air un peu bizarre. Il y a un trait de soulignement, mais Target est égal à vide. Et donc c'est notre attribut, est égal à apostrophe soulignement vide est la valeur doit être ce trait de soulignement vide. Et puis notre attribut de clôture, guillemets. Allons de l'avant et sauvegardons ça. Et nous allons juste rafraîchir cette page. Et maintenant, on dirait que rien n'a changé. Mais quand je clique dessus, je ne vais pas commander clic ou contrôle clic. Je ne vais pas cliquer avec le bouton droit de la souris et cliquer sur ouvrir le lien dans un nouvel onglet. Je vais juste cliquer sur ce lien et il va s' ouvrir dans un nouvel onglet pour moi automatiquement. Juste comme ça, nous avons maintenant deux onglets. Et c'est ainsi que vous ouvrez un lien dans un nouvel onglet. 15. Ajouter des images: D' accord, regardons ajouter une image à notre page. Donc, pour une image, nous avons vraiment besoin d'un fichier image et j'aime aller à cet endroit appelé Splash.com. Et nous pouvons simplement utiliser des images libres, royalties, libres. Et je veux juste n'importe quelle image. Peu importe ce que l'image est, bien que celui-ci soit assez parfait ordinateur portable. C' est à peu près ce que je veux. Cliquez et je vais télécharger ceci et je vais télécharger le plus grand que je veux, juste pour que je puisse vraiment faire. Il en obtient un bon exemple en quelques secondes, peut-être pas trop grand, c'est une image assez grande. Téléchargeons le grand. Et maintenant cela va aller dans mon dossier Téléchargements. Et je veux que ça vive à côté de mon Hello World et de la deuxième page, et c'est sur mon bureau. J' ai donc besoin d'ouvrir ce dossier et de le déplacer dans mon bureau. Sinon, cela ne fonctionnera pas. Donc, si je copie ce fichier ici, allez sur mon bureau, collez-le. Et où êtes-vous ? Juste là. Appelons ça l'image de Caleb. Ce n'est pas mon image. Je n'ai pas pris cette image. Xps a pris cette image, mais je vais l'appeler l'image de Caleb juste pour rester simple. Alors revenons à ici et puis allons-y, nous allons fermer. On n'a plus besoin de l'ouvrir. Et passons au code VS. Et maintenant, ajoutons une image. Maintenant, c'est intéressant parce que les images n'ont pas de texte, donc n'a pas besoin d'une balise de fermeture et la réponse est en fait non. Alors allons de l'avant et créer un H3 et H4, H3, appelons ceci images. Et pour créer une nouvelle image est la balise IMG. Ce n'est pas une image, c'est IMG. Maintenant, si je ferme ça, il y a deux façons de fermer ça. Il s'agit donc d'une balise à fermeture automatique, ce qui signifie qu'elle n'a pas d'image de barre oblique. n'est pas comme ça que celui-ci fonctionne parce qu'il n'y a pas de texte, il n'y a rien d'autre à afficher. Au lieu de cela, nous allons utiliser un attribut. Et on peut juste dire qu'il y a une image ici. Et vous pourriez voir un proche comme celui-ci. Ceci s'appelle XHTML est, est une façon plus ancienne de faire les choses et totalement valide encore, j'écris beaucoup de code de cette façon parce que je suis un peu plus âgé, mais c'est toujours complètement valide. Ou vous pouvez simplement écrire IMG et vous voulez la source de l'image. Le SRC pour la source est égal au point d'image de Caleb. Maintenant, c'est important. Vous devez connaître cette extension de fichier. Et cette extension de fichier ici était point JPEG. Jpeg. Maintenant, si le vôtre est en majuscules points-points, GAAP, G comme ceci ou comme ça, assurez-vous qu'il correspond. Il doit être parfait. Donc le mien n'était pas que le mien était point JPEG. Je peux aller de l'avant et sauver ceci et faire défiler vers le bas jusqu'à l'endroit où il est censé apparaître. Et on va voir cette image géante. Et c'est pour ça que je voulais cette image énorme ici. Parce que c'était une très grande image. Maintenant, cool, l'image est apparue, mais c'est juste trop grand. Maintenant, ce que nous pouvons faire est que nous pouvons ajouter un deuxième attribut. On peut dire que la largeur est censée être, et ce sera en pixels, disons 500. Allons de l'avant et sauvegardons ça. Et ce que cela va faire est de faire de cette image une largeur de 500. Et mettre automatiquement à l'échelle la hauteur pour moi. Donc, si je clique avec le bouton droit de la souris et inspecte ce qui est cool à ce sujet, il est dit largeur 500. Mais vous pouvez réellement voir que je survole l'image, il dit que l'image est 500 par 281 par 0,25. Maintenant, si nous voulons qu'il faussent cela et je ne sais pas pourquoi vous voudriez le faire, mais si jamais vous vouliez fausser une image, vous pouvez ajouter une largeur et une hauteur. Et vous pouvez dire que la hauteur va être, disons 200. Donc ça va regarder un peu plus loin maintenant. Vous pouvez voir que c'est un peu écrasant. Rendons cela assez extrême et changez la hauteur à 100. Donc maintenant, nous avons 500 par 100. Si je survole, vous pouvez réellement voir dans ma fenêtre, il dit IMG 500 par 100. Maintenant, peut-être que nous ne voulons pas mettre à l'échelle une image par sa largeur. Peut-être que l'un de nous veut le mettre à l'échelle par sa hauteur. Nous jamais, et il y aura des moments où vous voulez mettre à l'échelle une image par sa hauteur ou la justice avec l'un ou l'autre, pas nécessairement les deux. Disons que, pour une raison quelconque, nous travaillons avec un designer et que le concepteur dit non, l'image doit être d'une hauteur maximale de 100 pixels. Et nous disons, OK, la hauteur est égale à 100. Sauvegardez. Et nous allons de l'avant et nous rafraîchissons. Il s'agit maintenant d'une hauteur de 100 et d'une largeur. Quoi que ce soit automatiquement, c'est 177.77. Et notre navigateur fonctionne cela pour nous. Donc, comme un résumé, nous pourrions dire que nous avons un élément image. n'y a pas de balise de fermeture parce que, eh bien, qu'allons-nous fermer ? n'y a pas de contenu à mettre entre deux balises. Nous utilisons des attributs ici. La source, le SRC est égal à l'image de Caleb. ALL JPEG. Et cela pourrait aussi être un lien vers une image particulière sur le web. Web, comme HTTP website.com slash image.all JPEG. Ça pourrait être quelque chose comme ça. Il peut utiliser des URL absolues ou relatives. Et donc, nous utilisons une URL relative. Nous avons un deuxième attribut, la largeur est égale à 503e. La hauteur de l'attribut est égale à 100. Et cela fait sont vraiment bizarre image. Et toute cette chose est l'élément image. Maintenant, il y a beaucoup plus que nous pourrions ajouter, et en fait je vais ajouter ça ici de toute façon, deux choses. Allons-y parce que ça devient un peu grand. Jetons ça sur des lignes séparées juste parce que nous le pouvons, parce que l'espace blanc n'a pas d'importance. Et ajoutons un alt. Et alt va être le texte qui apparaît quand un lecteur d'écran essaie de lire votre image, essayant de décrire ce qu'est l'image ou si le texte ou non le texte, mais si l'image casse quel texte afficher, donc montre-moi et passons à l'image de point manquante. Donc, ce n'est pas un fichier sur mon ordinateur. Ça ne va pas marcher. Cette image va se briser pour moi. Et vous pouvez voir une image cassée et il dit : «  Montrez-moi, c'est le texte alt. Et si je défais ça, je te le reprends. Mon image régulière ici. Tout le texte n'apparaît pas comme parfait. On ne veut pas qu'elle se montre. Nous voulons que l'image apparaisse, mais juste au cas où l'image ne s'afficherait pas, nous avons un recul. C' est ainsi que nous ajoutons une image. Ce que je voudrais que vous fassiez maintenant, c'est ajouter une image à votre page, à votre page Hello World. N' oubliez pas que vous pouvez obtenir toutes sortes d'images que vous voulez à partir d'un Splash.com et simplement utiliser n'importe quelle image que vous aimez. Peu importe ce qu'est l'image. 16. Relier une image à une autre page Web: Bon, bienvenue. Bonjour, bonjour, bonjour. Dans la dernière vidéo, nous avons créé une image. Nous utilisons les attributs SRC, width , height et alt dans cette vidéo. Dans cette leçon, ce que nous allons faire, c'est en faire un lien. Parce que si je retourne à ma page, je ne peux pas cliquer dessus. Ça ne va nulle part. Et nous avons besoin que ça aille quelque part. Eh bien, nous n'avons pas besoin, mais peut-être que nous le voulons, peut-être que nous voulons que cela aille à notre deuxième page, point HTML. Alors allons de l'avant et enveloppons notre image dans une ancre. Donc, nous disons qu'un HR REF est égal à, et je peux le remplir en seulement une seconde. Je vais choisir ça. Et tout ce que je fais, c'est de taper ça. Juste parce que je suis assez désireux de belles tabbing. Nous avons donc une balise d'ouverture et une balise de fermeture, et ça veut dire que ça va faire le tour de notre image. Et puis pour notre HREF, faisons la deuxième page point HTML. Et cela va aller à notre deuxième page point HTML. Et donc si je rafraîchis ceci, il semble que rien n'a changé, mais je peux maintenant cliquer dessus. Et vous pouvez voir en bas à gauche il dit deuxième page point HTML. Si je clique dessus, il va à ma page. Retournez à la maison, faites défiler vers le bas. Et maintenant, nous avons une image, et cela va à une autre page. Maintenant, tout ce que nous avons vraiment fait ici est imbriqué dans l'image à l'intérieur d'une balise d'ancrage. Et c'est pourquoi l'imbrication était vraiment important à apprendre. Pour commencer. Nous avons appris sur les images, nous avons appris sur les balises d'ancrage, et maintenant nous mélangeons les deux ensemble. Ce que j'aimerais que vous fassiez, c'est exactement la même chose. Prenez une image, quelle que soit l'image d'un Splash.com. Assurez-vous qu'il s'affiche sur votre page, puis faites un lien vers une autre page. Vous pouvez même simplement créer un lien vers google.com si vous le souhaitez, ou une autre page Web là-bas. Si vous n'avez pas une deuxième page déjà construite, vous pouvez créer un lien vers n'importe où sur Internet, votre profil Facebook, votre profil LinkedIn, n'importe quoi de ce genre. 17. Règles et passes de lignes horizontales: Déjà bonjour. Jetons un coup d'oeil aux règles horizontales et aux sauts de ligne. Tout d'abord, je vais travailler sur l'un des paragraphes que nous avons réellement au tout début, nous avons créé ces deux paragraphes ici. J' ai donc un paragraphe et un vétérinaire, un deuxième paragraphe. Et disons que je veux une sorte de ligne entre eux. J' ai ce truc appelé un HR, une règle horizontale. Et parce qu'il ne prend aucun texte à l'intérieur, il n'a pas besoin d'une balise de fermeture. Encore une fois, il s'agit d'une balise auto-fermante tout comme l'image. Allons de l'avant et sauvegardons ça. Et ça devrait apparaître ici. Et quand je vais me rafraîchir, bam, c'est là. Il apparaît juste là. Et une règle horizontale est un élément de bloc. Il va prendre toute la largeur. Comme vous pouvez le voir. Il prend toute la largeur du tout. Il est, est une ligne entre votre texte. Donc, c'est vraiment bon pour séparer les en-têtes ou le contenu ou des choses comme ça. L' autre chose que je voulais te montrer était une étiquette BR. Nous avons donc une règle horizontale, mais nous avons aussi une balise BR. Donc, disons que nous voulions séparer cela sur sa propre ligne, mais pas sur son propre paragraphe, mais nous voulions qu'il ressemble à ceci. Donc nous avons une première ligne de lorem ici et ensuite Odeo Sun Tzu, peu importe, tout ce qui est sur sa propre ligne aussi. Ok, donc j'ai juste enregistré ça et le code VS répare automatiquement ça pour moi. Donc, si je retourne à la page, rien n'a changé. Et encore une fois, c'est parce qu'en HTML, espaces n'ont pas d'importance. Votre navigateur ne s'en soucie pas. Ce dont il se soucie, c'est que si vous voulez une nouvelle ligne, vous pouvez simplement taper BR. Et c'est simplement une ligne, briser BER pour la pause. Et si je sauvegarde et actualise ma page, nous allons voir que juste ici va être une nouvelle ligne juste comme ça. Donc ça a commencé une nouvelle ligne par ici. Et maintenant, nous avons une règle horizontale et un saut de ligne côte à côte, ou je suppose que pas côte à côte, mais, vous savez, dans la même leçon, ce que j'aimerais que vous fassiez, c'est de donner un coup de feu aux deux et c'est un super facile ne devrait pas vous en prendre plus d' environ 30 secondes, peut-être 60 secondes. Créez une règle horizontale, puis créez un saut de ligne à l'intérieur d'un paragraphe. 18. Commentaires HTML: Jetons un coup d'oeil aux commentaires HTML. Donc, un commentaire est fondamentalement un morceau de code que vous pouvez écrire et qui ne sera pas exécuté par votre navigateur. Et ça ressemble à ça. Donc c'est moins que signe. Vous pouvez voir que tous nos éléments HTML ressemblent à cela. Un de ces moments bizarres où on voit un point d'exclamation, puis un tiret et un tiret. Et ensuite, nous pouvons mettre notre texte ici. Et puis il se termine par un tiret, tiret et un signe plus grand que. Et donc si je sauvegarde cela, et généralement jusqu'à présent, il apparaîtrait au-dessus de mon accueil au texte HTML 101. Mais si je retourne ici, frappez rafraichir. Il n'apparaît pas du tout. Cependant, si je clique avec le bouton droit de la souris sur Afficher la source de la page, c'est Ne mettez jamais de mots de passe, de secrets, de cartes de crédit, de réponses, quoi que ce soit. Ne mettez rien de secret là-dedans parce que ce n'est pas vraiment secret. Il est 100% accessible à tous vos utilisateurs. Ce n'est donc pas un bon endroit pour écrire des secrets. Ce qui est bon, c'est d'expliquer ce que nous faisons. Donc, nous pouvons dire que c'est un tutoriel. Et nous allons peut-être casser ça sur deux lignes séparées. Ceci est un délit, donc cours tutoriel sur HTML. Nous apprenons le HTML à partir de zéro. Et encore une fois, je peux sauver ça. Revenez ici, rafraîchissez mon code source. Vous pouvez voir que le code source est réellement modifié. Retournez ici, actualisez la page réelle, et elle n'est pas rendue. Et cela s'appelle un commentaire HTML. Si vous dites qu'il s'agit d'un commentaire HTML. Maintenant, ce qui est vraiment cool à ce sujet, c'est que vous pouvez également commenter le code existant. Alors allons de l'avant et commentons cela. Alors faisons le signe d'ouverture et vous pouvez voir qu'il a tourné tout mon texte Gray jusqu'à ma page, au bas de ma page. Et passons ici et fermons cela et vous pouvez voir la syntaxe mise en évidence à nouveau, me fait savoir que les choses fonctionnent comme je veux qu'elles fonctionnent. Sauvegardez ça. Et parce que j'ai commenté cela, Il va toujours apparaître dans le code source. On le voit ici. C' est dans le code source. Mais parce que c'est entre une syntaxe de commentaire d'ouverture et de fermeture, actualisons et nous pouvons voir qu'il n'apparaît plus. Le navigateur dit que c'est un commentaire et ne pas exécuter, ne le rend pas. C' est vraiment juste un morceau de texte inutile pour le navigateur. C' est plus utile aux humains qu'aux ordinateurs. Et c'est un commentaire HTML. Maintenant, vous allez voir certains d'entre eux de temps en temps. Ce n'est pas trop souvent que vous les voyez, mais quand vous le voyez, sachez juste que ce sont les choses qui ne vont pas apparaître lorsque vous chargez votre page. 19. Listes: Ok, jetons un coup d'oeil aux listes. Il existe deux types de listes. Il y a une liste ordonnée et une liste non ordonnée, et nous allons démonter les deux. Maintenant, c'est intéressant parce que c'est l'un de ces éléments qui nécessite l'imbrication. Et encore une fois, il est important de savoir à propos de l'imbrication ici. Donc je vais jeter un titre ici appelé listes. Maintenant, la première que je veux aborder est une liste ordonnée et o L. Maintenant, nous pourrions dire quelque chose ici et nous allons en prévisualiser ça. Faites défiler ma page et il dit quelque chose ici, mais il ne sait pas vraiment quoi faire. Et c'est comme une liste. Mais si je voulais faire un deuxième point, ça ne marche pas. Ce que nous pouvons faire, c'est dire, parce que c'est une liste, il a besoin d'un élément de liste. Et tout ce que je fais ici, c'est dire list-item, balise d'ouverture, balise de fermeture list-item. Et maintenant, nous avons deux éléments qui sont imbriqués à l'intérieur de notre liste ordonnée. Donc, enregistrez et actualisez. Et maintenant, il liste pour nous 123, ainsi de suite et ainsi de suite. Donc sur les comptes pour nous. Je n'en ai pas écrit un, je n'en ai pas écrit deux. C' est une liste ordonnée. Maintenant, une liste non ordonnée, très, très similaire, mais ça ne va pas avoir le comptage, il va juste avoir des points de puces. Donc je pourrais faire UL et ensuite je pourrais faire Ally. Et ceci est un élément de liste. Cliquez sur l'onglet parce que j'ai cette abréviation Emmett. Point numéro un. Copiez cette ligne entière vers le bas vers le bas. Pointez pour copier cette ligne entière vers celle en dessous. Et j'utilise juste le contrôle c et le contrôle v, ou le commandement C et le commandement V. Et ça copie toute ma ligne pour moi. Allez-y et sauvegardez cela et rafraîchissez. Et nous avons des points de balle. Et alors que nous progressons dans HTML, vous vous familiarisez un peu plus avec l'imbrication et l'ouverture et la fermeture des balises et des attributs et des choses comme ça, cela va devenir beaucoup plus facile. Et vous avez probablement déjà remarqué que si vous avez parcouru tous les, toutes les vidéos jusqu'à ce point qu'une liste ordonnée, vous connaissez déjà en quelque sorte la syntaxe. Vous savez que c'est un élément imbriqué et qu'il y a du texte là-dedans , puis il a une balise de fermeture et d'ouverture. Et si on en veut un autre, on a juste un autre élément enfant. Donc vous avez un enfant LI ici, enfant LA ici, et l'OL parent. Et à ce stade devient vraiment, vraiment facile pour vous d'apprendre. Un exemple de cela est la liste non ordonnée. Donc, une liste ordonnée a la numérotation, évidemment parce qu'elle s'appelle une liste ordonnée, mais une liste non ordonnée ne l'a pas. Il a juste des points de balle. Mais la syntaxe est presque identique. La seule chose que nous avons vraiment changé ici est de l'OL à l'UL. Et vous pouvez donc voir à partir d'ici que l'apprentissage HTML va juste devenir plus rapide, plus rapide et plus rapide. Vous apprenez déjà toutes les bases très, très rapidement. C' est comme ça qu'on fait une liste. Si vous voulez mettre la vidéo en pause ici, allez-y. Appuyez sur pause et essayez ceci par vous-même. Assurez-vous qu'il apparaît dans votre navigateur lorsque vous êtes gentil et prêt. Passons à la prochaine leçon. 20. tags CSS: Parlons des balises CSS. Donc celui-ci est vraiment intéressant. En fait, nous n'avons traité qu'un élément à l'intérieur de notre tête. Mais avec CSS, nous pouvons, en fait, nous le mettons n'importe où, mais généralement nous le mettons dans notre tête. Et celui-ci est un style. C' est un élément de style. Et ce que je dis ici est CSS dans les stands pour une cascade et des feuilles de style en cascade. On y va. Feuilles de style en cascade. Et je peux le commenter pour qu'il ne s'affiche pas réellement dans le navigateur. Maintenant, ce qui est intéressant ici, c'est que cela n'accepte pas le HTML. N'est-ce pas bizarre ? Nous écrivons du HTML, mais cela n'accepte pas le HTML. Et à ce stade, nous entrons dans cette chose appelée feuilles de style CSS en cascade, qui est un moyen pour nous de styliser notre page. Ce que cela prend est CSS markdown, balisage, langage css. Et c'est très, très différent. Cela ne ressemble pas du tout au HTML, et vous n'avez pas besoin de le savoir pour ce cours particulier, mais c'est une bonne transition vers ce que vous apprendrez ensuite. Donc, disons que nous voulions changer toute la couleur d'arrière-plan en noir, et que nous voulons changer toute la couleur, la couleur du texte en blanc. On peut le faire. On peut dire corps. Et vous pouvez voir que cela correspond à l'élément. Et tout ce que nous allons faire, c'est une accolade, un fond, une couleur. Et vous pouvez voir VS Code est très utile. Ça m'aide à comprendre ce que je suis censé écrire. Changez ça en noir. Et puis je peux changer la couleur de la police. Et vous pouvez réellement voir que la référence MDM apparaît, définit la couleur de la couleur du texte d'un élément blanc. Et donc cela va sélectionner cet élément, le corps, et tout ce qu'il contient. Et il va essayer de lui appliquer ces règles. Donc si je retourne ici, frappez rafraichir. Vérifie ça. Notre page contient désormais du texte blanc avec un fond noir. Maintenant encore une fois, ce n'est pas quelque chose que vous devez savoir et honnêtement je dirais ne pas l'apprendre, mais je devais vous montrer ce que c'est parce que vous allez voir ces éléments de style partout. Maintenant, ce que je vais faire, c'est que je vais le commenter aussi. Rafraîchissez ma page et ramenez-la à la normale. Maintenant, si vous vouliez, par tous les moyens, donner un coup de feu et n'hésitez pas à l'expérimenter. Mais sachez que vous avez encore beaucoup plus de HTML à apprendre. Vous devez apprendre à ajouter des vidéos et de l'audio et des choses comme ça. Et vous devez apprendre ces choses avant d'apprendre CSS, ou au moins vous avez montré que c'est beaucoup plus facile d'apprendre une chose à la fois au lieu d'apprendre aux choses à la fois. Mais si vous vouliez expérimenter et vous amuser avec elle et par tous les moyens, allez-y. Mais c'est la balise de style, c'est votre CSS. Et encore une fois, non, tu n'as pas besoin de le savoir. Je voulais juste te montrer ça. Juste comme une tête haute, vous allez voir cette balise dans la nature dans autre code source que vous voyez comme sur Google.com par exemple, il y en aura dans leur facebook.com a probablement quelques instagram.com et a probablement, a quelques éléments de style à l'intérieur de leur HTML. Donc c'est une chose courante. Et je voulais juste m'assurer que tu serais familier avec ça. D' accord, nous en avons fini avec CSS. Passons à la suivante où nous avons appris essentiellement le même concept, mais pour JavaScript. 21. tags Script: Bonjour et bienvenue dans le monde de JavaScript. Ok, donc il y a deux choses dont je veux parler. La première est la façon dont nous ajoutons les deux pages de JavaScript, quelques façons de le faire. Et la deuxième façon, ou La deuxième chose dont je voulais parler est de ne pas apprendre JavaScript en ce moment. Ça va être très tentant. Vous allez entendre des personnes dans des groupes Facebook et des groupes d'apprentissage et des groupes LinkedIn dans d'autres cours. Et vous devez apprendre JavaScript. Mais ce n'est pas vrai. Vous devez apprendre HTML avant d'apprendre JavaScript. Javascript est utilisé pour modifier et travailler avec HTML. Et si vous ne connaissez pas très bien HTML, vous ne serez pas en mesure d'apprendre JavaScript, donc vous avez besoin de HTML d'abord. Cela dit, je vais vous montrer comment ajouter du JavaScript ici. Donc, cela commence par la balise de script. Et ici, encore une fois, parce que c'est HTML, ça ne se soucie pas vraiment des espaces. Cependant, nous n'écrivons pas de code HTML ici. Nous ne le faisons pas, nous écrivons JavaScript. Nous écrivons JavaScript ou JS en bref. Ici. C' est ce qui est important. Alors rappelez-vous toujours que je vois beaucoup de gens essaient d'écrire comme un div à l'intérieur de leur script et cela ne fonctionne pas dans ce cas parce que quoi que ce soit entre les deux balises de script ici, la balise d'ouverture et de fermeture que votre navigateur pense être JavaScript et non HTML. Et c'est important à savoir parce que si vous avez suivi mon autre cours sur les fondamentaux du web, il y a différents moteurs dans votre navigateur. Vous disposez d'un moteur pour le rendu HTML et d'un moteur pour le rendu, le rendu CSS et d'un moteur pour le rendu JavaScript. Et c'est dire, Hey, utilisez le moteur JavaScript pour cela, pas le HTML1. Alors allons de l'avant et créer un exemple ici, Bonjour monde. Et vous n'avez pas besoin de savoir cela maintenant. Mais c'est JavaScript et tout ce que cela va faire, c'est quand je charge la page, ça va me donner un peu de pop-up. Donc, quand je retourne à ma page, appuyez sur Actualiser. Ça dit bonjour monde. Et puis il montre ma page. Donc, il exécute le JavaScript, puis le HTML. Donc, c'est une façon. L' autre façon dont vous allez voir cette balise en cours d'utilisation est le script. Et que se passe-t-il si je clique sur ce bouton juste là ? C'est parfait. Au lieu d'avoir tout votre code dans votre page, vous pouvez avoir ce code dans un autre fichier, comme le test JavaScript ab.js. Et tu n'as pas besoin de ça ici. On peut s'en débarrasser. Et ce code peut vivre dans un autre fichier. Et donc tout ce que nous disons ici, c'est utiliser la balise de script. Alors hey, Chrome, Firefox, bord Safari, Il y a un JavaScript que je veux que vous restiez ici, la source comme une image et défiler comme une image. La source Src est égale à et puis quel que soit le nom du fichier. Maintenant, c'est un fichier relatif, un peu comme ce lien relatif. Donc devrait être dans le même dossier. Si ça n'existe pas, rien ne se passera. Si cela existe, mais qu'il n'y a rien là-dedans, rien ne se passera. Vous avez réellement besoin de JavaScript pour exécuter. Et encore une fois, ce n'est pas quelque chose que nous devons savoir maintenant. Mais ce que je vais faire, c'est boum, commente ça. Et ce n'est qu'un commentaire HTML. Et cela s'assure que mon navigateur dit, hey, n'importe quoi entre cette balise d'ouverture et la balise de fermeture ou la syntaxe ne le rend pas. Il est permis de vivre là et le code source, mais ne l'exécute pas réellement. Et si je retourne à Chrome et que je rafraîchis la page, cette alerte disparaît. Tellement parfait. Maintenant encore une fois, vous n'avez pas besoin de savoir cela. La raison pour laquelle je voulais vous montrer cela est parce que vous allez voir beaucoup de scripts dans le web moderne d'aujourd'hui, il y a beaucoup de JavaScript. Et encore une fois, vous devez connaître HTML pour bien connaître JavaScript. Mais vous allez voir beaucoup de scripts partout. Et donc quand vous voyez cela, sachez simplement que tout entre la balise de script d'ouverture et de fermeture va en fait être JavaScript et non HTML ou CSS. 22. Le code de partage avec CodePen: Okey-dokey, jetons un coup d'oeil à une chose cool ici. Donc, pendant que vous apprenez à écrire du code, vous allez vouloir être en mesure de partager votre code avec des gens. Et c'est vraiment, vraiment difficile de partager ce genre de code en toute sécurité avec les gens. Les gens mettent leurs fichiers dans des zips, puis président des groupes Facebook et il semble vraiment spammy et personne ne sait si c'est vraiment sûr à télécharger. Et puis si vous avez une question, votre question reçoit une réponse. C' est juste cette chose que tu veux éviter. Il y a un meilleur moyen. Donc, ce que vous pouvez faire est que vous pouvez aller à CodePen.io. Et je voulais créer un nouveau stylo. Oh, regarde toutes sortes de trucs. Mais je veux juste créer un nouveau stylo régulier ici. Ce que cela va faire est de me donner HTML, CSS et JavaScript travailler avec. Maintenant, à ce moment particulier, si vous suivez ce cours, vous n'avez probablement pas besoin de connaître JavaScript, et vous n'avez probablement pas besoin de connaître CSS, vous avez probablement juste besoin de connaître HTML. Maintenant, ici, vous pouvez écrire n'importe quoi bonjour monde. Et ça prend juste une seconde, mais ça finit par louer, ça rend pour vous. Maintenant, le fait est que vous n'avez pas besoin de votre Doctype. Vous n'avez pas besoin de HTML, vous n'avez pas besoin de corps. Vous n'avez pas besoin de ces balises. Ce dont vous avez besoin, c'est de tout entre la balise body jusqu' à la balise de fermeture juste là. Nous pouvons donc maintenant cliquer avec le bouton droit de la souris Et cela ne va pas nécessairement montrer mes images parce que pendant que je dis hey, CodePen, ne cherchez pas la deuxième page, mais l'image.all JPEG de Caleb. Et c'est là que le texte alt entrera. Et donc il ne peut pas trouver ça parce qu'il ne sait pas. C' est un site Web, ce n'est pas sur mon ordinateur, et donc il cherche l'image de Caleb .All JPEG sur le serveur sur l'ordinateur de quelqu'un d'autre. Ils ne l'ont pas encore, donc ça ne va pas marcher. Donc juste une tête là-haut. Mais, vous savez, comme vous écrivez de plus en plus de HTML et CSS et JavaScript sur la route. Vous pouvez faire tout cela dans un stylo de code. Maintenant, le bien, c'est que tu peux nommer ça. Alors bonjour monde. Allons de l'avant et sauvegardons ça. Et je viens de créer un compte CodePen gratuit. Au fait, c'est complètement gratuit. Vous n'avez pas besoin de payer pour CodePen. Alors s'il vous plaît, pendant que vous apprenez, ne payez pas pour CodePen. Tu n'as jamais besoin de payer pour ça. Et tu as ce joli petit lien. Et donc si je l'ouvre dans un autre onglet, je viens de copier et de coller ce lien. Il se montre. Et si j'ai un autre onglet, collez-le là, il apparaît. Et ce qui est vraiment sympa, c'est qu'il sauve tout votre code. Et donc si vous avez besoin de partager votre code dans le groupe Apprendre à coder Facebook ou dans une section de projet sur cette plate-forme. Ou vraiment vous devez partager votre code avec un ami un développeur, un mentor ou n'importe qui. Même si vous voulez juste montrer ça à vous et à votre conjoint, à vos amis, à votre famille. Vous pouvez simplement leur envoyer ce lien avec tout le code qu'il contient. C' est un moyen vraiment, vraiment bon de partager votre code et c'est un moyen sûr de partager votre code afin que les gens n'aient pas à se soucier de télécharger des fichiers zip bizarres ou Google Drive ou Dropbox ou quoi que ce soit du genre. C' est tout simplement CodePen et des dizaines de millions, sinon des centaines de millions de personnes utilisent CodePen. C'est complètement sûr. C' est là depuis très longtemps. Ça ne va nulle part. C' est un bon service à utiliser lorsque vous avez besoin de partager votre code. Donc, lorsque vous partagez un code, s'il vous plaît partager votre CodePen, lien. 23. Trouver un soutien supplémentaire: Ok, si tu as besoin d'un soutien supplémentaire, j'ai un énorme groupe de soutien pour toi. Donc, évidemment, vous pouvez poser des questions ci-dessous, s'il vous plaît faire si c'est votre truc, poser des questions ci-dessous. Mais si vous voulez des réponses tout de suite, comme en quelques minutes, parfois même quelques secondes, vous allez vouloir rejoindre une sorte de groupe de soutien. Maintenant, apprendre HTML est en fait assez facile. Il est considéré comme l'une des choses les plus faciles à apprendre dans le développement web. Mais ça ne veut pas dire que c'est facile pour tout le monde. Et donc si vous avez besoin d'un peu de soutien supplémentaire, vous pouvez aller sur facebook.com et cherchons ici pour apprendre à coder. Et ce groupe compte actuellement 56 905 membres. C' est un groupe que j'ai créé il y a longtemps. Et encore une fois, il y a 56 000 membres là-dedans. Il y a aux questions posées tout le temps, gens répondent aux choses tout le temps. Par exemple, les auto-codeurs élevés, Mon nom est Dragos. Il a une bonne question et voici 132 commentaires. Si je continue à défiler vers le bas, je veux dire, je participe à ça. Je veux dire, c'est mon groupe qui ici est intéressé à apprendre comment demandes Web et les réponses Web où il pourrait 59 commentaires. Je peux poster ça il y a 11 heures ? Donc il y a beaucoup de discussions ici, mais vous pouvez poser des questions comme, comment puis-je faire quelque chose d'audacieux ? Comment faire quelque chose de métallique ? Pourquoi mon code ne fonctionne-t-il pas ? Ensuite, partagez votre lien CodePen. S' il vous plaît, ne montrez pas de capture d'écran. Je recommande fortement de ne pas montrer une capture d'écran. Je recommande fortement de ne pas copier et coller votre code dans le groupe Facebook. Partagez-le sur CodePen ou largeur CodePen plutôt. Donc, si vous avez besoin d'un soutien supplémentaire, Certainement, rejoignez certainement l'apprentissage du code groupe Facebook. C' est complètement gratuit. Tu n'as pas à t'inscrire pour quoi que ce soit. C'est complètement gratuit. C' est juste une belle petite valeur ajoutée que j'aime donner à mes étudiants. Mais encore une fois, vous savez, même si c'est facultatif, vous n'avez pas à le faire. Mais si vous voulez un peu de soutien supplémentaire avec des réponses opportunes, c'est vraiment un bon endroit pour être. 24. Votre projet final: Ok, jetons un coup d'oeil à votre projet. Votre projet va être relativement facile. Vous n'avez pas à tout faire ici et rappelez-vous, vous n'avez pas besoin de mémoriser tout ce que nous avons écrit dans ce cours. Vous pouvez toujours juste Google aussi. Donc si vous êtes comme, oh, je sais ce qu'est un H1, mais je ne me souviens pas exactement comment faire un lien. C' est très bien. Vous pouvez Google et vous tapez dans Google HTML lien tutoriel. Et vous allez trouver des centaines, des milliers, peut-être même des millions de pages qui vont vous montrer exactement comment ajouter un lien. Souviens-toi, tu n'as pas besoin de te souvenir de tout ça. Tout ce que vous devez savoir, c'est comment trouver la réponse. Et c'est honnêtement environ 50% de tout emploi en tant que développeur web de nos jours est juste de savoir comment trouver les réponses, pas de les mémoriser, mais de pouvoir trouver les réponses. Donc, en passant au projet ici, ce que je voudrais que vous fassiez, c'est que je voudrais que vous créiez un nouveau fichier HTML. Ensuite, je voudrais que vous créez un en-tête. Donc comme un bateau de sous-en-tête H1, comme ce que vous faites, ce que vous voulez entrer dans quelque chose comme ça, une image. Et puis, et enfin, ajoutez un lien vers votre Twitter. Twitter, Instagram, Facebook. Cela n'a pas vraiment d'importance, assurez-vous juste d'avoir au moins un lien. Alors faisons ça. Créer un 2.1, et ce serait un bon moment pour une liste ordonnée imbriquée, passant, 2.2. bien, donc j'ai juste formaté cela un peu plus agréable juste pour que nous puissions tous le lire ensemble. Donc, créez un nouveau fichier HTML. Assurez-vous que vous avez un en-tête là-dedans, mettez votre nom là-dedans, un sous-en-tête, un sous-en-tête S, Lake, votre titre, votre description de travail, votre passe-temps préféré ou quelque chose comme ça ? Avait une image de n'importe quoi, je dirais ajouter une image de vous-même. C' est totalement sûr parce que ça va être sur votre ordinateur. Mais si vous préférez partager votre projet avec une image d'autre chose, c'est tout à fait correct aussi. Vous pouvez toujours aller sur un Splash.com et obtenir une image gratuite. Enfin, ajoutez un lien vers votre Twitter, votre Instagram ou votre Facebook, ou simplement ajoutez un lien vers Google ou quelque chose. La partie importante ici est que vous allez ajouter un lien. Alors allez-y et donnez-lui un coup de feu. Si jamais vous êtes coincé, n'oubliez pas, vous pouvez référencer les autres vidéos ou vous pouvez continuer à regarder cette vidéo et je vais vous montrer exactement comment je le fais. Mais j'aimerais que vous arrêtiez cette vidéo ici et donniez ce projet que j'ai tourné. N' oubliez pas de partager votre projet et ci-dessous sur cette plate-forme, si cette plate-forme offre ce genre de fonctionnalité, sinon vous pouvez toujours partager vos progrès avec le groupe d'apprentissage à coder Facebook. Alors mettez votre vidéo en pause ici. Je vais nous donner environ cinq secondes, puis je vais reprendre le jeu et je vais vous montrer exactement comment je fais ça. Ok, donc je vais créer ce projet. Je vais vous montrer exactement comment je le fais. Donc les premières choses d'abord Nouveau Fichier, et je viens de faire la Commande N, Ou vous pourriez aller à. Fichier, Nouveau fichier, Enregistrer, qui va enregistrer ceci sur mon bureau. Et je vais appeler ça Caleb layout.html parce que c' est ma page de portefeuille. C'est ce que je veux faire. J' ai besoin de ces trucs HTML5 ici. Donc je n'ai pas besoin de la méta. On n'a pas parlé de ça. C'est un peu plus avancé et je n'ai pas besoin de Lang est égal à l'anglais à nouveau, c'est un peu plus avancé. On n'a pas besoin de s'en soucier. On va changer le titre pour la page de Caleb. Et qu'est-ce que j'ai besoin d'ajouter ici ? J' avais besoin d'ajouter un en-tête qui est 2.1 dans cette liste. Donc un en-tête H1, je vais mettre mon nom ici, Caleb Pauline, H2. J' avais besoin d'un sous-en-tête, alors mettons quelque chose de plus petit et vous êtes comme un développeur senior H3. Et je suis un instructeur de code premium. C' est mon rôle dans la vie. Le rôle que je me suis donné. 2.3, ajoutez une image, d'accord ? Donc je sais déjà que j'ai une image ici. Ce n'est pas une image de moi, mais c'est une image et ceci vient d'une leçon précédente, donc je peux le faire. Image SRC est égal à l'image de Caleb. ALL JPEG, et c'est juste dans le même dossier que ce fichier. Tout ça vit sur mon bureau. C'est dans le même dossier. Alt. Caleb, Colleen. Et je veux donner une largeur pour qu'il ne soit pas énorme, je ne sais pas, comme 400. Enfin, j'ai besoin d'un paragraphe dès maintenant et j'avais besoin d'un lien. Mais aussi je vais ajouter un paragraphe de toute façon. Je ne veux pas vraiment écrire un paragraphe entier. Je vais jeter un peu de lorem ici. Et puis j'avais besoin d'un lien vers, disons Twitter. Donc ce lien pourrait être juste une balise d'ancrage. Un HREF est égal à HTTPS, barre oblique Twitter.com. Caleb, grand, maigre, et vous pouvez aussi me trouver sur Instagram si c'est votre confiture et est mis à Pauline. Et c'est tout ce qu'il y a. Donc, je peux revenir à mon navigateur et je peux aller Fichier, Ouvrir Fichier et ouvrir Caleb point HTML. J' espère que je n'ai pas de fautes de frappe là-dedans parce que ça va être un peu gênant. Et boom, il y a ma page HTML. J' ai un H1, j'ai un h3 pour mon sous-titre. J' ai une image et j'ai du texte Lorem là-dedans. J' ai juste jeté ça en quelque sorte à la dernière minute là-bas. Et un lien vers mon twitter, qui m'amène directement à Twitter. Et c'est tout ce qu'il y a. Donc j'y suis allé assez vite et je l'ai fait exprès pour que tu aies à faire une pause et, et tu devrais peut-être réfléchir un peu plus fort. Je veux que tu travailles vraiment à quelque chose comme ça. Mais quand vous avez terminé, veuillez partager vos progrès ci-dessous. Enfin, merci beaucoup d'avoir pris le temps de suivre ce cours. J' espère que vous avez appris quelque chose de grand, amusant et nouveau. Et si jamais vous voulez consulter l'un de mes autres cours, il suffit de cliquer sur le lien vers mon profil sur cette plateforme, vous pouvez voir tous mes cours sont également disponibles ici, y compris ce qu'il faut apprendre ensuite, comme plus HTML avancé, CSS, et JavaScript, Python, PHP, un tas de projets entre les deux, toutes sortes de choses. Enfin, si vous aimez ce que je fais ici, si vous aimez ma façon d'enseigner, n'oubliez pas de me suivre sur le partage des compétences. Merci encore d'avoir suivi ce cours et j'espère vous voir dans un autre.