HTML 201 : Développement Web HTML intermédiaire | Kalob Taulien | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

HTML 201 : Développement Web HTML intermédiaire

teacher avatar Kalob Taulien, Web Development Teacher

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      HTML 201 : Intermédiaire du site Web

      1:50

    • 2.

      Plus vous n'êtes

      3:04

    • 3.

      Liens internes

      4:02

    • 4.

      Favicons

      4:39

    • 5.

      Cheminement

      6:27

    • 6.

      Introduction aux tables

      2:45

    • 7.

      Lignes et cellules de table

      2:32

    • 8.

      Ferger et lignes de table

      4:19

    • 9.

      Largeurs de table et de cellules

      3:47

    • 10.

      Entêtes de table

      0:51

    • 11.

      Inline CSS

      3:39

    • 12.

      Cours HTML

      5:48

    • 13.

      L'identification HTML

      3:10

    • 14.

      Le formatage du code

      3:17

    • 15.

      Les entités HTML

      3:10

    • 16.

      Introduction aux formulaires

      2:25

    • 17.

      Éléments d'entrée

      2:14

    • 18.

      Zone de texte

      2:52

    • 19.

      Boutons

      3:27

    • 20.

      Menus de descente

      5:28

    • 21.

      Intégrer des vidéos

      2:43

    • 22.

      Votre projet

      10:36

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

435

apprenants

22

projets

À propos de ce cours

Bienvenue dans HTML 201

Ce cours est le cours intermédiaire qui vient après le cours HTML 101 (trouvez.

Si vous avez déjà écrit un cours, ce cours est certainement pour vous. Sinon, si vous êtes NOUVEAU à l'adresse du HTML et le codage, ce cours pourrait être trop avancé pour vous cherche.

Ensemble, nous allons nous plonger dans des browser, telles que les liens de page interne, comment ajouter une icône favicon à votre page Web dans votre navigateur, comment se link aux fichiers et pages dans d'autres dossiers (dites relatives à l'actifs), des tables avec des ligne, des cellules, et comment les merge Nous vous plongerons également dans des personnages spéciaux en HTML, comme le symbole du droit, comment fonctionnent et d'ajouter des lieux où vous pouvez saisir votre nom, votre e-mail et votre mot de passe, grandes zones de texte, et nous le moyen d'offrir à vos utilisateurs, un ensemble d'options.

Les mini-tasks sont la fin de plusieurs vidéos sont à la fin de plusieurs vidéos pour vous permettre d'acquérir l'expérience au fur et à mesure de vos progrès dans HTML 201.

Ce que vous apprendrez

Dans HTML 201, vous apprendrez un peu plus avancé. Nous allons aborder des éléments tels que des liens de page interne, des links, la pathologies, des documents, des tables, Des éléments de forme et de forme, comment vous pourrez être intégré une vidéo vidéo sur Youtube.

Exig

Vous devriez déjà être familiariser avec des sujets de base du HTML et HTML, telles que la syntax, les éléments et les attributs.

Vous devriez également avoir un éditeur de texte téléchargé et installé.

Vous aurez également besoin d'une connexion sur Internet afin de vous voir ces vidéos et de me coder.

Votre projet :

À la fin de ce cours, vous créerez une page HTML avec une mise en page, vous ajouterez un titre, une navigation, un contenu écrit, une image et une vidéo layout,

Lorsque vous avez terminé avec votre projet, faites une capture d'écran et you're dans votre projet Skillshare.

Les ressources :

  • Téléchargez le code VS (éditeur de texte gratuit)

Rencontrez votre enseignant·e

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Enseignant·e

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... Voir le profil complet

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. HTML 201 : Intermédiaire du site Web: Bonjour et bienvenue à HTML 201A, apprentissage HTML intermédiaire. Donc, dans ce cours, nous allons sauter beaucoup de choses de base. Vous devriez déjà connaître les bases telles que la syntaxe HTML, choses comme la création de liens, soulignements, gras, ajouter des images, vous savez les choses simples comme ça. Donc, si vous ne savez pas comment le faire déjà en HTML, s'il vous plaît revenir au cours HTML 101 ou commencer un cours HTML et prendre celui-ci. Sinon, vous allez être un peu perdu dans celui-ci. Sinon, si vous avez suivi HTML 101 ou si vous êtes déjà familier avec HTML Basics, ce cours sera fait pour vous. Nous allons traverser beaucoup de choses différentes, comme des liens internes sémantiques, des fabrications, des cheminements. C'est vraiment un gros. Nous allons créer une mise en page Web à l'aide de tableaux. Les tableaux sont très importants ici. Nous allons regarder un peu plus dans CSS tels que les classes CSS en ligne, les ID, la mise en forme du code, les formulaires, les champs de formulaire comme lorsque vous tapez votre adresse e-mail ou votre mot de passe, des choses comme ça. Et quelques bouts entre les deux. Salut, je m'appelle Caleb Pauline. Je vais être votre instructeur aujourd'hui. Nous allons apprendre le HTML intermédiaire. J' ai appris à plus de 300 000 étudiants à coder. Je suis un développeur web senior et un instructeur de codage en ligne. À la fin de ce cours, nous allons créer ensemble une page Web basée sur ML était une mise en page correcte. Donc, si vous avez suivi le cours HTML 101, cela n'aurait pas une mise en page appropriée. On jette un tas d'éléments sur une page. Celui-ci va avoir une mise en page correcte, donc nous allons avoir un titre et une navigation, une section de contenu. Nous allons intégrer une vidéo YouTube, un tas d'images, mais un peu plus de contenu et il y a du contenu écrit, ça va être fantastique. Maintenant, si tout ça semble être dans votre ruelle, j'ai hâte de vous voir dans cette première leçon. 2. Plus vous n'êtes: D' abord, nous devons clarifier quelques choses. Donc, quand nous avons créé une structure de base dans le cours HTML 101, et passons simplement du texte brut au HTML. Et en passant, j'utilise du code VS si vous utilisez un éditeur différent, tout ce que j'ai fait était d'aller à File qui est juste en dehors de ma zone d'enregistrement, puis un nouveau fichier, donc Commande ou Contrôle, et nous allons créer un nouveau fichier pour vous. Et il a automatiquement pensé que c'était un fichier texte brut. J' ai donc cliqué ici où il utilise un texte brut tapé en HTML et sélectionné HTML. Et ça nous donne juste de jolis petits goodies comme ça. Nous pouvons faire HTML deux-points cinq, appuyez sur Tab pour auto-complétion en utilisant VS Code. Et ça nous donne un tas de trucs ici. Donc, je vais vraiment aller de l'avant et supprimer une partie de cela. Et je vais appeler ce HTML2 01. Maintenant, nous avons appris à certains moments que nous avons paragraphe nous pourrions mettre un peu Lorem Ipsum là-dedans. Et nous pourrions dire, par exemple, que cela devrait être souligné, quelque chose comme ça. Maintenant, si je sauvegarde ceci comme allons ici et index.html sans nom. Et je viens d'enregistrer cela dans un dossier particulier que j'avais appelé HTML à 01. Et je l'appelle index.html. Mais si j'ouvre Google Chrome ou n'importe quel type de navigateur, quel que soit votre navigateur préféré, vous pouvez aller au fichier, puis ouvrir le fichier. Donc Contrôle ou Commande O. Allez dans mon dossier ici. Et nous allons ouvrir ceci et nous pouvons voir que cela, une fois que j'ai zoomé, est souligné. Et c'est cool, ça fait ce que nous voulons, mais malheureusement sous-jacent est obsolète. Il était donc normal d'apprendre cela il y a un moment juste parce que nous devions le souligner. Mais il y a une meilleure façon de le faire. Et la meilleure façon de le faire serait probablement d'ajouter une travée ici. Et allons de l'avant et changeons cela en un élément span. Et tout cela est, est un simple élément en ligne. Et vous devriez être familier avec les helminthes bloqués par rapport aux éléments en ligne à ce stade. Et ce que nous allons faire, c'est travailler avec cet attribut de style. Et cet attribut de style nous permet d'écrire CSS. Donc, vous n'avez pas besoin de savoir trop de CSS en ce moment. Mais si vous voulez souligner, je dirais peut-être essayer de mémoriser celui-ci en particulier. Je dis aux gens que tu n'as pas besoin de trop mémoriser. Je veux dire, vous pouvez toujours Google, comment ajouter sous-jacent en utilisant CSS, cela fonctionnera aussi bien. Je vais faire du texte, de la décoration, de l'espace deux-points, du soulignement. Maintenant, si je sauvegarde cela, revenez à ma page et actualisez, il devrait sembler que rien n'a changé. Et c'est parfait. Et je peux toujours vérifier en cliquant avec le bouton droit de la souris et en cliquant sur Inspecter. Et vous pouvez voir dans mon outil d'inspection ici qu'il y a en fait une travée avec la décoration de texte soulignée. Et si je le voulais, je peux activer et désactiver ça maintenant, ce qui est vraiment, vraiment sympa. Donc, en allant de l'avant, chaque fois que nous utilisons des soulignements, allons de l'avant et utilisons la décoration de texte sous-jacente. Au lieu d'utiliser les éléments de l'interface utilisateur, juste parce que l'élément de l'interface utilisateur est obsolète, il provient d'anciennes versions de HTML et CSS peut maintenant le faire, et nous préférons utiliser CSS chaque fois que nous le pouvons. 3. Liens internes: Ok, jetons un coup d'oeil aux liens internes. Donc, en fait, récapitons d'abord. Alors, comment créer un lien ? Nous créons un lien et je vais faire une touche plus grande ici. Nous créons un lien avec l'ancre à l'élément et l'attribut HREF. Et cela pourrait aller à HTTP, website.com, aller sur website.com. Et ça va juste nous montrer un petit lien ici. Et ça va aller sur website.com, peu importe ce qu'il y a sur ce site. C' est ainsi que nous créons un lien. Mais que se passe-t-il si nous voulions créer un lien vers autre chose dans la page ? Alors allons de l'avant et nous rendre la page un peu plus agréable. Alors disons un. Bienvenue dans HTML 201. Et créons un lien. Et nous ne savons pas encore ce que ce lien va être, mais nous savons qu'il va dire défiler jusqu'au bas de la page. Et nous pouvons nous en débarrasser parce que ce n'est plus nécessaire. Ce n'était qu'un exemple. Donc maintenant, quand je fais cela, je clique sur défiler jusqu'au bas de la page et il ne fait rien. C' est parce que ça ne va nulle part. Vous pouvez voir qu'il n'y a pas de HREF, Non, il n'y a pas de référence de lien hypertexte. Donc, disons que nous avions cette page vraiment, vraiment longue et allons de l'avant et copions ça un tas de fois. Et je ne me soucie pas vraiment du formatage en ce moment. Je veux juste que la page fasse défiler comme ça. Et je veux quand nous cliquons sur le lien pour aller au bas de la page et peut-être avoir un lien en bas de la page pour nous ramener au haut de la page. Alors faisons ça. Disons qu'il y aura, disons comme un H3. Et nous allons lui donner un ID, et c'est un identifiant unique pour cet élément, donc il ne devrait jamais avoir le même ID dans la même page. Alors appelons ceci en bas, et c'est le bas de la page. Et quand je rafraîchis, vous pouvez le voir juste comme le bas de la page, rien n'est arrivé à l'ID n'a rien fait de particulier. Mais si nous revenons à notre lien, nous pouvons réellement taper l'ID du signe numérique. Maintenant quel que soit cet ID, et maintenant que l'ID que nous avons écrit était en bas, allez ici, ID est égal au fond. Sauve ça. Et je vais juste me rafraîchir ici. Et vous pouvez voir mon lien a changé de couleur. Et vous pouvez réellement le voir dit le signe numérique index.html en bas. Et quand je clique sur ceci, boom, ça m'amène au bas afin qu'il ne fasse pas un défilement lisse, mais ça m'a sauté au bas de la page, ce qui était en fait assez important pour les longues pages de contenu. Maintenant, allons de l'avant et créons un lien pour nous ramener au sommet. Alors peut-être supprimons cela comme un H3 et cela rend cela un peu plus caché. Créons un div ici. Et vous pouvez voir que nous allons être un peu plus avancés avec ça. Id est égal à bottom, mais nous savons que les ID peuvent ou devraient être complètement uniques. Allons-y et débarrassons-nous de celui-ci. Tu peux vraiment te débarrasser de toute cette ligne. Et mettons un lien ici qui va remonter au sommet. Retour en haut. Maintenant, parce qu'il s'agit d'un lien interne, cela a besoin d'un ID quelque part sur la page appelée en haut. Donc, revenons à notre code ici, et donnons à ceci un ID de haut. Et rafraîchissons votre page et donnons une photo. Et cette façon de zoomer pour moi, je veux revenir en arrière. Et cela devrait me faire défiler jusqu'au bas. Boom, juste comme ça ou pas défiler mais sauter vers le bas et ça devrait sauter en haut, juste comme ça. Maintenant, nous avons des liens internes. Ce que je voudrais que vous fassiez, c'est créer une page assez longue pour que vous créez réellement une barre de défilement ici. Ou ce que j'ai fait, c'est parce que cette page n'était pas très longue. Vous pouvez toujours ouvrir votre outil d'inspection et si vous le réduisez ou si vous l'amenez assez haut, il réduira en quelque sorte votre fenêtre d'affichage et vous aurez une barre de défilement et vous pouvez le tester comme ceci. Allez-y et donnez une chance une fois que vous serez prêt, passons à la prochaine leçon. 4. Favicons: Jetons un coup d'oeil aux icônes fabuleuses. fabrications sont ces petites icônes qui apparaissent juste à côté du titre de votre page. Maintenant, nous n'avons pas vraiment un jeu de favicon. Nous avons un titre, ce qui est cool, mais si nous voulons quelque chose d'un peu personnalisé ? Nous pouvons en fait ajouter cela aussi. Nous pouvons le personnaliser pour être ce que nous voulons. Savoir. Typiquement, il devrait s'agir d'une image de 32 pixels sur 32 pixels, donc c'est assez petit. Je ne vais pas suivre cette règle parce que je sais qu'elle va la réduire, mais si vous voulez qu' elle soit correctement dimensionnée, peut-être avoir une translucidité ou une transparence appropriée ou quelque chose comme ça. Alors oui, tu vas vouloir 32 par 32 image. Mais je vais juste utiliser l'image aléatoire que j'ai à partir du codage, du codage pour tout le monde branding. Alors ouvrons notre code ici. Et dans notre tête, ce que nous allons créer, c'est l'élément de lien. Et nous pouvons faire le lien deux-points, favicon. Et il nous donne toutes sortes de trucs ici. Maintenant, par défaut, il veut que nous utilisions un point ICO. C' est un format plus ancien. On n'est pas obligés de faire ça. Nous pouvons utiliser, disons un point PNG. Maintenant, c'est juste comme lier à une image ou un fichier CSS ou JavaScript, nous devons en fait nous assurer que cela fonctionne. Et vous remarquerez que nous utilisons trois attributs ici. Nous avons donc l'élément de lien. On a le rail ou la relation comme quoi s'agit-il ? C' est un raccourci et c'est une icône, une référence de lien hypertexte à l'endroit où se trouve cette image, puis le type d'image. Et nous ne voulons pas que le type d'image soit une icône X, nous voulons que l'image soit P&G parce que je vais utiliser un PNG. De même, si vous utilisez un JPEG, ce serait JPEG. Alternativement, JPEG avec un e, Mais nous utilisons P&G. Maintenant, c'est à ce stade que je pourrais vraiment vouloir utiliser mon éditeur un peu plus. Donc ce que j'aimerais faire, c'est au lieu d'avoir un seul fichier ouvert, je vais ouvrir tout ce dossier. Je vais ouvrir le dossier. Je vais aller sur mon bureau où se trouve ce dossier, et je n'ai que index.html là-dedans. Allons-y et ouvrons ça. Et il semble vraiment qu'il n'a pas fait beaucoup, sauf ajouté cette barre de l'explorateur. Maintenant, si cette barre explorée ne s'affiche pas, vous pouvez toujours aller à où êtes-vous quelque part dans votre explorateur de vue juste là. Afficher l'Explorateur qu'il l'allumera toujours pour vous. Donc, cliquez sur index.html. Et c'est juste la page sur laquelle je travaillais. Et ici, je veux aussi une sorte d'image pour lier deux. Donc je vais ouvrir mon Finder. Je vais copier cette image particulière. Je suis venu préparé à cette leçon avec une image appelée codage pour tout le monde, favicon dot PNG. Je vais juste copier ce nom entier. Et vous pouvez voir que je l'ai copié dans ce dossier, VS Code était comme, oh, il y a un nouveau fichier. Ok, mettons-le là aussi, et maintenant on peut le prévisualiser. Donc, c'est à ça que va ressembler l'image. Et tout ce que j'ai à faire, c'est parce que j'ai copié ce nom de fichier, je vais juste coller ce nom de fichier. Et nous n'utilisons pas de barres obliques ou de points, de points ou quoi que ce soit du genre. On n'utilise pas ça, ou disons contre, on ne fait rien comme ça. Nous voulons nous assurer que c'est dans le même dossier que notre index.html, juste pour garder cela simple pour l'instant. Et vous pouvez le dire dans le même dossier parce que nous sommes dans le HTML2, euh, un dossier par ici. Et il y a index.html et codage pour tout le monde, favicon dot PNG. Allons de l'avant et sauvegardons ça. Et actualisons cette page. Et vous pouvez voir que favicon s'est pointé maintenant. Maintenant, si vous utilisez un autre navigateur et qu'il ne s'affiche pas, cela pourrait être dû à l'une des deux raisons. Il y a une faute de frappe et vous n'avez pas réellement ajouté l'image correctement. Je vais vous montrer comment le déboguer en une seconde. Ou il y a la mise en cache et je sais que les navigateurs comme Microsoft Edge aiment encaisser assez fort. Donc, vous pourriez avoir à faire un rechargement dur ou ouvrir un autre navigateur. Je juste parce que votre navigateur va essayer d'obtenir cette, cette image une fois et ensuite essayer de la mettre en cache pendant très, très longtemps. Maintenant, si ça ne vient pas pour toi, et allons-y et faisons-le ça. Il n'apparaît pas là-dedans. Et vous pouvez réellement voir avec mes outils d'inspection ouverts, il y a une erreur. Si je vais sur ma console, vous pouvez voir le fichier err d'erreur réseau introuvable et cherche un codage de requête pour tout le monde, favicon dot PNG. Et cela n'existe tout simplement pas. Donc, si vous ouvrez vos outils d'inspection et qu'il y a une faute de frappe, ou que le fichier n'existe pas, vous verrez l'erreur juste là. Et je vais annuler ça. Et on y va. On a un favicon. Donc, si vous suivez avec moi, ce que j'aimerais que vous trouviez une petite image, quelque chose comme ça, et ajoutez-la comme votre favicon à la page sur laquelle vous travaillez. 5. Cheminement: Bon, parlons de quelque chose qui est un peu complexe et un peu délicat parce que celui-ci va tromper beaucoup de gens pendant très longtemps, y compris moi. Et je parle de cheminement. Donc nous avons tout mis dans un dossier particulier en ce moment, mais si nous voulions un autre dossier ? Et si nous voulions déplacer notre favicon dans un dossier appelé images slash fab icons. Et on pourrait juste cliquer et faire glisser ça juste là-dedans. Nous avons un dossier ici appelé images, puis un autre dossier appelé icônes fab, puis un fichier ici appelé codage pour tout le monde. Donc, dans la dernière leçon, nous avons créé un favicon. Mais quand je rafraîchis cette page, on va voir que ce fichier aérien est introuvable. Il n'existe plus parce qu'il n'est plus dans ce même dossier. C' est sur le même dossier que index.html. Mais ce que nous pouvons faire est que nous pouvons dire et aller à la barre oblique du dossier des images, la barre oblique du dossier des icônes fab, puis notre nom de fichier. Alors allons de l'avant et sauvegardons ce rafraîchissement de toute façon et apparaît pour nous. Donc, c'est le chemin. C' est comme ça que nous entrons dans un chemin. Donc, nous avons juste eu un nom de dossier slash un autre nom de dossier, et en passant, n'utilisez pas d'espaces. Je sais que beaucoup d'utilisateurs de Windows aiment utiliser des espaces, mais dans des choses comme ça, ne pas utiliser d'espaces est beaucoup plus facile si vous utilisez des traits de soulignement ou des tirets, mais s'il vous plaît n'utilisez pas d'espaces, vous allez rencontrer beaucoup de problèmes. Donc, un dossier nommé barre oblique, nom de dossier barre oblique, puis le nom de fichier, Simple comme ça. Maintenant, allons de l'avant et ajouter une image dans le seul dossier images ici, pas le dossier favicon, mais juste les images. Alors allons de l'avant et allons gagner Splash dot com. Et prenons une image d'un ordinateur parce que nous travaillons sur des ordinateurs. Assez bien. Et téléchargeons celui-ci gratuitement. Prenons la petite version de celui-ci parce que c'est tout ce dont nous avons besoin. Je voudrais remercier Glenn Carsten. De Peter. C' est une jolie photo. Merci de m'en servir. Allons-y et montrons ça dans le Finder. Et je vais ouvrir ça. Je suis juste en train de copier ce fichier. Allons-y et jetons ça ici. Et je vais renommer ceci en ordinateur ab.js JPEG et éditeur. Vous pouvez réellement voir cela transformé en un dossier approprié maintenant. Et maintenant il y a des sous-dossiers ici, mais dans les images, j'ai un dossier appelé icônes fav et un dossier, et pas un dossier mais une image, un fichier appelé Computer dot J peg. Maintenant, je vais me débarrasser d'un tas de ces éléments p parce que maintenant on n'en a pas vraiment besoin et on va faire cette page longtemps de toute façon. Donc, ce lien interne vers le haut et le bas de la page va parfaitement fonctionner. Finalement, Probablement pas en ce moment parce que la page est une sorte de courte. Mais allons de l'avant et ajoutons une image. Et ce SRC va être des images, c'est le nom du dossier. Et puis le nom de fichier est Computer dot JPEG est donné un ordinateur alt. Et c'est tout. Donc, si nous retournons à notre page et que nous nous rafraîchissons, nous pouvons voir cette image s'afficher maintenant. Et c'est dans le dossier Images maintenant, encore une fois, si cela ne fonctionne pas pour vous, assurez-vous juste que vous avez toujours les choses tapées correctement. Il est sensible à la casse. Donc, si vos dossiers appelés images en minuscules, n'écrivez pas d'images en majuscules et cela ne fonctionnera tout simplement pas pour vous. Alors faisons des images. Brise-moi et rafraîchissons. Nous pouvons voir le texte alt apparaît là-bas et dans ma console, vous pouvez réellement voir une erreur introuvable. Donc ça passe dans un dossier. Disons que quelqu'un va dans le dossier des images parce que nous pouvons le faire. Nous savons que HTML 201 est un dossier. Et nous savons aussi que les images sont un dossier. Alors faisons ça. Allons aux images slash. Et nous pouvons réellement voir que nous avons un tissu sur un dossier et nous avons un ordinateur JPEG pointillé. Mais disons qu'on voulait que quelque chose arrive ici. Ce que nous pouvons faire, c'est aller dans notre dossier d'images, créer un nouveau fichier. Nous voulons appeler ce index.html. Et cela signifie simplement utiliser cette page par défaut. Il s'agit de la page par défaut que votre navigateur va rechercher. Donc, même si vous n'atterrissez pas sur cette page, va essayer d'utiliser cette page. Quoi qu'il en soit, juste par défaut. Mon code VS est configuré pour utiliser des modèles Django par défaut, mais passons en HTML5. Et faisons HTML deux-points cinq. Le dossier Images sera le titre, le nom, et dans le corps, disons juste, salut, salut, salut, salut, salut. Très bien, donc je rafraîchis juste la page que nous avons, ce fichier index.html et il ne montre pas notre page par octet par défaut, c'est une bonne pratique car une fois qu'il arrive sur un serveur, index.html va être la page qui apparaît par défaut . Donc ça va ressembler à ce que tu cliques dessus, comme ça. Mais cela ne va pas nécessairement dire index.html. Ce n'est pas une chose dont vous devez vraiment vous souvenir à ce stade, mais c'est une petite chose cool que vous pouvez faire avec des serveurs en direct, sites Web en direct sur la route. Donc maintenant, nous avons ce fichier index.html, dossier d'images internes. Relions une page. Alors disons h3. Il s'agit du dossier Images. Et nous allons créer un Lincoln ici, un lien d'ancrage avec l'hypertexte, référence hypertexte. Et nous allons utiliser une page relative. Donc, on va dire d'aller dans un dossier, et c'est comme ça que nous faisons. Nous allons pointer vers le haut un dossier. Si nous devions monter un dossier de plus car il est déjà dans le dossier Images. On devait être dehors. Nous pourrions faire point, barre oblique, point, barre oblique, point, point slash. Chacun d'entre eux que vous pouvez voir est en train de monter un dossier dans mon ordinateur. Maintenant, je ne veux rien de tout ça. J' en veux juste un. Et je veux être en mesure de sélectionner non pas le dossier images, mais index.html. Et ça va faire référence à celui-ci ici. Le nom devient un peu déroutant parce que nous devons fichier index.html est mais ok, et VS Code était assez intelligent pour comprendre ce que nous essayions de faire. Retourner à la maison, c'est ce que je vais dire dans leur page de trois fraîcheur. Faites de ça un gros, plus grand. Et on peut rentrer à la maison. Et quand je clique dessus, il retourne au HTML à une seule page d'accueil. Donc, c'est un chemin en un mot pour déplacer vers le haut d'un dossier, utilisez une barre oblique de point. Pour se déplacer dans un dossier. Vous n'utilisez pas la barre oblique des points, vous spécifiez simplement la barre oblique du nom du dossier, sous-dossier nommé S'il y a une barre oblique, puis votre nom de fichier. Et c'est un chemin en un mot. 6. Introduction aux tables: Ok, jetons un coup d'oeil aux tables. Les tableaux sont extrêmement importants pour nous en ce moment car ils vont nous permettre de créer une sorte de mise en page pour notre page. Maintenant, il est vrai, mises en page, orange vraiment créé avec des tables plus. C' est une façon très ancienne de faire les choses, mais parce que nous ne connaissons pas CSS et nous ne connaissons pas encore JavaScript. C' est la seule façon que nous avons et c'est 100% acceptable parce que même si nous allons utiliser tables d'une manière qui n'est plus vraiment utilisée. Nous allons apprendre tout sur la façon utiliser les tables correctement parce qu'il est toujours utilisé pour des choses comme les ensembles de fonctionnalités ou peu près n'importe quel site Web du gouvernement parce qu'ils utilisent toujours des tables pour une raison quelconque. Oui. Donc, les tables sont toujours utilisées. courriels utilisent les tables de table tout le temps. C' est une compétence vraiment importante à avoir. Donc je vais descendre ici et dans cette leçon, je vais juste vous montrer comment une table est créée, mais nous n'allons pas encore faire quoi que ce soit avec elle. Alors n'ai pas l'impression que tu dois coder avec moi. Donc, une table est un élément de table comme celui-ci. Et à l'intérieur de cela, nous avons des lignes de table appelées TR et, ou je peux faire TR. Et puis onglet. Nous pouvons avoir un autre onglet de ligne de table TR. Ensuite, à l'intérieur de chaque ligne de tableau, les cellules sont appelées cellules de table ou cellules de données de table T Ds. Cellule 1. Et on va ici et on va faire la cellule TD 2. Et au fait, si tu es un peu nouveau dans ce cours, je vais un peu trop vite pour toi. Ce que j'ai fait là était que je pouvais taper dans Table et parce que c'est un élément HTML, je peux taper dans la table. Et dès que je vois cette abréviation Emmett, je peux appuyer sur la touche de tabulation de mon clavier et il le crée juste en éléments HTML pour moi. Donc maintenant, nous entrons dans une belle imbrication et un HTML 101 que nous avons tout appris sur l'imbrication. Donc, nous savons que tout cela va être une table incluant les éléments enfants et petits-enfants. Tout cela est une rangée incluant ses éléments enfants. Et ce seul élément ici va être une cellule, et celui-ci sera la cellule deux. Et si nous actualisons notre page ici, faites défiler. On peut voir la cellule 1, la cellule 2, rien de fantaisie qui se passe vraiment, il ne semble pas que quelque chose s'est passé. Mais si on donnait à cela une frontière d'une ? Nous avons maintenant une table. Nous pouvons faire plus avec nous pour, nous pouvons dire que la largeur va être un 100%. Et ça prend tout ça, comment on pourrait ajouter une autre cellule. Et celui-là va être si 1,2, je suppose. Et nous pourrions ajouter 1.3 et nous pouvons monter, ainsi de suite et ainsi de suite. De toute façon, nous allons approfondir cette question dans les prochaines leçons. Mais je voulais juste vous montrer rapidement que c'est ainsi que nous créons une table. 7. Lignes et cellules de table: Jetons un coup d'oeil aux lignes et aux cellules du tableau. Donc, pour créer une table, nous faisons cette table barre oblique. Et c'est tout ce que nous avons vraiment à faire pour créer une table. Mais à l'intérieur d'une table se compose de deux éléments principaux, une ligne de table. Et c'est ce que TR signifie. T r est égal à une ligne de table. Et à l'intérieur de chaque ligne, nous avons des cellules sont des cellules de données de table. Donc, un td est égal à une cellule de données de table. Et donc c'est par l'onglet TD. Et créons une première cellule, la première cellule ici. Et revenons à un navigateur et appuyez simplement sur rafraichir. On va voir notre première vente. On ne peut pas le voir et on peut l'inspecter si on le voulait. Et nous pouvons voir que nous sommes en fait dans une table et notre navigateur est assez intelligent pour dire, hé, il est censé y avoir un corps ici. Alors enroulez les TR dans un corps en t. Donc, cela va en fait d'un niveau plus profond. Donc, il va table T Body TR td. Maintenant, je n'ai pas besoin d'écrire le corps t parce que je suppose que tout ce que j'écris sera dans le corps de la table de toute façon, et le navigateur fait la même hypothèse afin que nous puissions le raccourcir de cette façon. Maintenant, pour voir nos progrès, j'aime toujours jeter la frontière ici et ensuite je me débarrasse de cette frontière plus tard. Alors faisons une bordure d'un et une largeur de 100%. Rafraîchissons. Et maintenant, nous pouvons voir que nous avons notre première cellule. Et si nous allons de l'avant et ajoutons une deuxième cellule, et cela va être côte à côte, qui est quelque chose que nous n'avons pas pu réaliser avec des éléments de bloc dans HTML 101. Mais maintenant, nous pouvons, et nous pouvons continuer à le faire, ainsi de suite et ainsi de suite. Donc, au lieu de secondes L Nous pourrions faire troisième cellule et nous pouvons continuer à ajouter de plus en plus. Et on se débarrasse de ce troisième Salomon et on copie tout ça. En fait, je ne vais pas le copier. Écrivons ceci à la main parce que c'est une bonne pratique d'écrire ceci à la main. Ted Row pour en vendre un. Et si je fais un autre tube télé Tab R2, L2. Et on y va. Nous avons d'abord vendre, deuxième rangée de cellule 2l, une rangée à vendre. Et c'est ainsi que nous créons des lignes de tableau et des cellules. Ce que j'aimerais que vous fassiez, c'est que vous donniez cette chance. Je veux que vous créiez une table deux par deux, que vous créiez quatre cellules. Vous avez donc deux lignes vers les colonnes et quatre cellules au total. Allez-y et donnez une chance une fois que vous serez prêt, continuons sur la prochaine leçon où nous plongons un peu plus dans les tables. 8. Ferger et lignes de table: Jetons un coup d'oeil à la fusion des cellules et des lignes. Donc, cela devient vraiment, vraiment intéressant et ce n'est pas vraiment super intuitif au début, mais ça devient un peu plus vous le faites. Donc, dans la dernière leçon, nous avons créé une table deux par deux, deux lignes, deux colonnes. Celui-ci, nous voulons créer un trois par trois. Donc je vais faire une table ici et je veux voir ma frontière. Je veux voir mes progrès ici. Et puis changez cette largeur à 100% parce que je voulais prendre autant de place sur ma page que possible. Je ne veux pas vraiment laisser d'espace supplémentaire sur la droite. Maintenant, pour une bonne mesure, nous pourrions toujours faire un corps de t si nous le voulions. Je n'ai pas fait ça dans la dernière leçon. J' en ai parlé, je ne l'ai pas fait. C' est bon. Je vais le faire cette fois-ci juste pour te montrer qu'on peut le faire. Donc on a une rangée de table ici. Nous savons que ce sera notre première ligne de table. Deuxième rangée, troisième rangée. Et tout ce que je fais, c'est de hacher cet automne, en ébauchant ça. Je le rends un peu plus facile à travailler. Et maintenant j'ai besoin, parce que j'ai trois lignes et trois colonnes et allons de l'avant et créer TD 12. Et tout ce que je fais ici pour copier toute la ligne est la commande C, la commande V ou le contrôle C, le contrôle V. Et je vais sélectionner tout cela, copier, le coller et le coller dedans. Allons de l'avant et regardons à quoi ressemble notre table maintenant. On a la première ligne, la troisième rangée. Sont en fait, ce sont des colonnes. J'ai eu ça à l'envers. Donc, dans la colonne 1, la colonne 2, la colonne 3, la ligne 1, la ligne 2, la ligne 3. Maintenant, il y a un moyen de fusionner les cellules ensemble. Et nous pouvons le faire d'une manière très intéressante. On peut faire colspan. Donc, la portée de la colonne est égale à trois. Donc nous devons jeter un oeil ici. Combien de colonnes avons-nous ? 123. On peut passer trois colonnes. Allons de l'avant et sauvegardons ceci et voyons ce qui se passe. Ce numéro un dans la rangée 1 prend trois espaces, mais maintenant il y a deux cellules de plus ici. Maintenant, si vous voyez quelque chose comme ça, vous pouvez supprimer en toute sécurité ces cellules supplémentaires parce qu'elles ne sont pas nécessaires. Nous avons dit colspan de trois, alors prenez trois largeurs de colonne. Et puis nous avions aussi du vieux HTML là-dedans et nous venons de nous en débarrasser. Quand nous actualiserons notre page, nous verrons que Rho 1 prend trois colonnes. Maintenant. Maintenant, allons de l'avant et fusionnons celui-ci et celui-ci ensemble. Ne faisons pas ça. Faisons ça deux et ça trois. On doit donc descendre à la deuxième rangée. Donc nous avons la première ligne ici. Faisons la deuxième rangée. Et nous voulons fusionner ces deux-là ensemble. Donc, nous pouvons dire que colspan est égal à deux parce que nous voulons que cela prenne tous les numéros deux et trois. Allons de l'avant et sauvegardons cette actualisation. Et maintenant, il prend aussi cet espacement supplémentaire. Maintenant, allons de l'avant et fusionnons celui-ci. Alors rangez pour vendre un et rangez trois cellules un. Allons de l'avant et fusionnons ces ensemble. Donc, nous pouvons réellement écrire, nous pouvons fusionner des morceaux de lignes ensemble aussi. Donc ici, parce que nous voulons fusionner vers le bas, faisons une rangée de deux. Et voyons à quoi ça ressemble. Si je ne règle pas ça, vous pouvez voir une autre cellule déplacée, ce qui n'est pas ce que nous voulons. Donc nous avons toujours 123 et la troisième rangée et nous ne voulons pas ça. Allons-y et supprimez ce Rho Rho parce qu' on en a un ici et on en a un ici. On n'a pas besoin des deux. Supprimons simplement celui-ci. Donc, supprimez, enregistrez, revenez à notre navigateur et actualisez et regardez cela. On a trois largeurs de colonnes. Dans notre première rangée. Ici, nous avons deux largeurs de colonnes. Ici, nous avons deux hauteurs de rangées. Et nous le faisons avec ces attributs appelés rowspan et colspan ou colonne span. Cela va être très important pour vos projets finaux. Et ce que j'aimerais que vous fassiez, c'est que vous fassiez ce que j'ai fait. Créez une table trois par trois. Puis commencez à fusionner des lignes et des cellules ensemble et voyez comment il déplace les cellules, puis essayez de supprimer les cellules appropriées et de le faire fonctionner comme vous le souhaitez. Allez-y et donnez-lui un coup de feu. Si vous êtes coincé, n'oubliez pas, vous pouvez toujours poser des questions ci-dessous ou dans le groupe Facebook appelé apprendre à coder. Il y a plus de 56 000 membres. Nous pouvons vous aider en quelques minutes seulement après avoir posté une question. Allez-y et donnez un coup de feu et je vous verrai dans la leçon suivante. 9. Largeurs de table et de cellules: Ok, bienvenue. Jetons un coup d'oeil aux largeurs de tableau et aux largeurs de cellule. Donc je vais supprimer cette table de la dernière leçon, en créer une nouvelle. Et donnons à cela une bordure d'un, et créons simplement du contenu par défaut ici nous avons une ligne de tableau, une cellule de tableau, une cellule ici, une table standard. Nous devrions en être un peu familiers maintenant. Donc, si je passe à mon navigateur et que c'est de la dernière vidéo, si je me rafraîchis, je dois vendre ici. Il ne prend pas beaucoup de place, peut-être un, il occupe 50% de l'espace sur cette page. Et si je fais un zoom arrière, tu peux voir que c'est super, super minuscule. Et ce que je peux faire, c'est que je peux dire que la largeur est égale à 50%. Jusqu' à présent, je l'ai dit avec est égal à 100% et il prend toute cette largeur par ici. Mais maintenant, je dis en fait seulement prendre 50%. Et je peux passer en mode réactif ici. Et je peux le voir à mesure que ma page devient plus petite, aussi cette table. Maintenant c'est super, super difficile à voir parce que c'est super, super minuscule. Mais il devient de plus en plus petit. Donc, il maintient cette largeur de 50%. Et tout ce qu'il a fait là était de cliquer sur cette petite icône dans Google Chrome et qui m'envoie en mode responsive. Vous pouvez donc voir comment les choses vont ressembler sur les tablettes, sur les mobiles, des choses comme ça. Maintenant, je vais juste zoomer ici. Et revenons à un 100% parce que je veux utiliser plus de largeur. Donc, je peux prendre plus de biens immobiliers juste à des fins de démonstration dans la vidéo, il semble juste un peu mieux. Tu n'as pas à suivre exactement ce que je fais. Donc je vais ajouter une deuxième rangée ici. Et disons que j'ai eu une vente ici et que je ne voulais pas qu'elle prenne exactement 50% de la table. Donc ce que notre navigateur ici fait est de dire, hé, il y a une table, c'est 100% de largeur. Il y a deux cellules, 100 divisées par deux, c'est 50% chacune. C' est tout ce qu'il fait ici. Disons que je voulais que le premier soit plus petit. On pourrait dire ici, largeur est égale à, et donnons-lui un 20% ici. Maintenant, avant de vous montrer à quoi cela ressemble, je veux aussi mentionner que vous pouvez vous débarrasser du signe de pourcentage et vous pouvez le faire en pixels aussi. Maintenant, c'est un peu plus dur. C' est un peu plus dur. n'est pas toujours ce que vous voulez pour cent est généralement ce que les gens recherchent. Mais vous pourriez aussi dire au lieu d'une largeur de 100%, car une largeur de 500 pixels. Mais je vais rester avec le pourcentage pour l'instant. Je sauve ça, je rafraîchis ma page. Et vous pouvez voir que la cellule est devenue plus petite. Maintenant, vous pensez probablement , à quoi sert ça ? Mais si je fais cela, je peux faire une nouvelle ligne de table et une nouvelle cellule ici. Et je peux faire colspan égal à, c'est censé être égal à deux. Donc c'est comme s'il y en avait deux, mais ça va être fusionné ensemble. Bienvenue sur mon site web. Et dans celui-ci, celui où la largeur n'est que de 20%, on pourrait dire quelque chose comme H3. Mettons ça sur de nouvelles lignes pour qu'on puisse le lire. Navigation H3. Et ici, nous pourrions faire du contenu H3. Allons de l'avant et rafraîchissons ceci et nous pouvons voir la bienvenue sur mon site web. C' est comme le titre de ma page. Nous avons la navigation pour que nous puissions faire une liste de liens là-dedans. Et nous avons mis du contenu ici. Donc maintenant, nous travaillons sur une mise en page réelle. Maintenant, ce que je voudrais que vous fassiez est de créer une table et avec une seule cellule particulière, je veux que vous lui disiez exactement quelle largeur il devrait être, donnez-lui une largeur. Et comme résumé, tout ce que nous avons fait là était d'ajouter l'attribut width à la table ou à la cellule. Dans mon cas, j'ai fait les deux. Donc, la table est une largeur de 100%. Et puis j'ai dit que la cellule devrait être 20% de la largeur de la table. 10. Entêtes de table: Ok, jetons un oeil aux en-têtes de table. Maintenant celui-ci est en fait super facile parce que nous avons utilisé les éléments TD pour la cellule de données de table. Allons de l'avant et utilisons un en-tête de table. Et tout ce qu'on fait ici c'est T h. Et je vais changer ça en fichier HTML. Th représente une cellule d'en-tête dans un tableau. Et nous allons de l'avant et changeons aussi la balise de fermeture. Et vous allez voir de la dernière leçon à cette leçon, est à quoi ça ressemblait, et c'est à ça que ça ressemblera dès que j'aurai frappé Refresh. Il est maintenant centré et audacieux. C' est un en-tête de table. Et c'est vraiment tout ce qu'il y a pour ajouter un en-tête de tableau fonctionne exactement de la même manière qu'une cellule de données de table. La seule différence est au lieu de TED, nous avons dit th, c'est tout. Suivant en bref. Une fois que tu auras eu le coup de ça, passons à la prochaine leçon et je te rejoins là-bas. 11. Inline CSS: Okey-dokey, bienvenue. Jetons un coup d'oeil à CSS en ligne maintenant nous avons déjà couvert cela dans la toute première leçon où nous avons dit que le style est égal à la décoration de texte sous-jacente. Nous pouvons le faire sur presque tous les éléments du corps de notre page. Et par corps, je veux dire l'élément du corps. Donc, n'importe quel élément ici, nous pouvons ajouter cet attribut de style aussi. Alors allons de l'avant et créons un div. Et ici, donnons-lui un attribut de style, et changeons quelques choses. Et je vais juste vous donner un petit aperçu du CSS. Alors donnons-lui un rembourrage de 40 pixels. Donnons-lui une couleur de police de blanc et une couleur de fond de, disons noir. Pour que nous puissions le lire bien sur l'écran. Et ici, je peux dire onglet inférieur. Et c'est tout ce que je vais faire. Donc, vous pouvez réellement voir la syntaxe ici. Et à ce stade, je n'ai probablement plus besoin de vous expliquer cette syntaxe, mais juste pour un bon ménage, passons-y de toute façon. J' ai donc créé un Div, l'espace. style est l'attribut est égal à et puis j'ai tout entre guillemets. Ensuite, j'ai une déclaration CSS ici. Donc tout ça est une déclaration. Vous n'avez pas besoin de vous souvenir de la partie CSS d'ailleurs. Mais c'est une déclaration CSS, disaient ajouter le remplissage 40 pixels en haut, à droite, en bas et à gauche. Changez la couleur de la police en blanc, couleur de fond en noir. Et entre chacune de ces déclarations, comme celle-ci, nous avons un point-virgule, donc c'est un peu différent du HTML, mais toujours très, très lisible. Et tout cela ici s'appelle CSS en ligne. Revenons donc à notre page et je vais frapper rafraîchir et regarder cela avec juste un peu d'effort et connaissant juste une petite quantité de CSS, nous avons été en mesure de créer un rembourrage ici. Donc on a un espacement ici, par ici, par ici, et par ici. Nous changeons la couleur de fond en noir et la couleur de la police en blanc. Nous pouvons également faire un clic droit inspecter. Et si je clique sur cet élément particulier, nous pouvons les activer et les désactiver. C' est ce que le rembourrage fait. Nous pouvons changer ce rembourrage pour qu'il soit plus élevé ou plus bas si nous le voulions, c'est ce que nous faisons ici. Et tout ce que j'ai fait, c'était de cliquer là-dedans et j'ai appuyé sur la flèche vers le haut ou vers le bas. Vous pouvez également taper si vous le souhaitez. Si vous le vouliez, vous pouvez faire défiler tout le chemin vers le bas dans cette petite fenêtre ici et vous pouvez voir que cela vous dira tout de suite qu'il y a un rembourrage de 40 sur les quatre côtés. Et c'est en ligne CSS, c'est vraiment tout ce qu'il y a. Et nous pouvons écrire tous nos CSS là-dedans. Maintenant, ce n'est pas une très bonne façon de le faire. Mais de temps en temps, vous allez voir que cela va vraiment être nécessaire. Et c'est juste quelque chose dont vous devriez être très conscient. Maintenant, ce CSS à nouveau, à ce stade, ne vous sentez pas comme vous avez besoin de savoir cela. Après vous, après avoir terminé HTML2, O1, ce cours, n'hésitez pas à ramasser CSS. J' ai un cours sur CSS appelé la masterclass CSS. C' est un parcours énorme qui passe par tout ce que vous pourriez penser. Mais pour l'instant, continuons à nous concentrer sur HTML. Maintenant, si vous voulez suivre et faire exactement ce que j'ai fait, allez-y et mettez la vidéo en pause et donnez-nous un rembourrage. Rappelez-vous qu'il va tout ce que nous essayons de changer l'espace deux-points, puis une valeur, puis un point-virgule. Et puis ce que nous essayons de changer, comme l'espace de couleur deux-points, puis la valeur, puis un point-virgule. Et c'est comme ça qu'on a mis trois d'affilée comme ça. Alors n'hésitez pas à lui donner un coup de feu ou non. Et quand tu as fini, quand tu es à l'aise, quand tu es prêt. Passons à la prochaine leçon. 12. Cours HTML: Très bien, comme nous plongons de plus en plus dans HTML, nous allons finir, nous allons finir par faire une transition un peu plus dans CSS. Et dans cette leçon, je veux vous montrer exactement comment nous pouvons le faire tout de suite. Donc, dans la dernière leçon, nous avons regardé la couleur de rembourrage et le fond blanc, couleur blanche et la couleur de fond du noir. Maintenant, disons que nous voulions ajouter cela à un autre div. Et donc nous pourrions écrire un autre div ici, et nous pouvons le remplir avec du Lorem Ipsum. Et puis nous devrions copier et coller ceci comme ça, qui n'est pas une grosse affaire, mais si nous avons cela 20 ou 30 fois et alors nous devons faire un changement tous. Disons que nous devions changer le blanc en bleu et changer les blancs en bleu ici. On doit le faire 20 fois. Et cela devient vraiment bien par manque d'un meilleur terme parce que vraiment irritant. Et ça prend beaucoup trop de temps et il y a une meilleure façon de vivre votre vie. Donc, je vais, tout d' abord, créer un autre div ici. Et cela pourrait tout aussi facilement être des paragraphes. Et allons-y et voyons ce que nous avons sur notre page. J' ai un ipsum lorem. Un lorem ipsum dans lorem ipsum. Donc, nous avons 123. Et disons que je voulais appliquer ce style à ce troisième, mais pas le second. Ce que nous pourrions faire, c'est que nous pourrions réellement extraire cet attribut de style dans un élément de style. Maintenant, il se trouve qu'ils portent le même nom. Vous ne pouvez pas nécessairement extraire un nom d'attribut et le transformer en un élément et juste espérer que cela fonctionne. Mais dans ce cas, nous pouvons, donc c'est juste une coïncidence là-bas. Donc ce que je vais faire, c'est que je vais sélectionner tout ça supprimé, viens ici, coller ça dans mon style. Et donc cela ne va rien faire, mais ce que je regarde ici, c'est la réutilisabilité. J' ai donc cette div et j'ai cette div. Et je voulais être en mesure de donner ces trois attributs, ces trois attributs CSS aux deux d'entre eux. Et nous pouvons le faire avec une classe CSS, et nous pouvons dire Nom de classe ici. Et sélectionnez ces trois, remontez, mettez-les là-dedans. Et donc cette syntaxe semble un peu bizarre. On ne va pas passer trop de temps ici. Mais la classe commence par un point. Puis le nom. n'y a pas d'espace ou quoi que ce soit dedans. Ce sont des supports bouclés sensibles à la casse. Et puis les choses que nous mettons à l'intérieur de notre attribut de style que nous mettons maintenant dans un élément de style. Et ce que nous pouvons faire ici, c'est que je vais copier ceci, mais avant tout, je veux vous montrer que quand je rafraîchis la page, rien ne se passe. Ma console ne se brise pas, elle ne se plaint pas. J' ai juste trois divs avec lorem ipsum dedans. Et ce que je veux faire ici, c'est dire, dans ce premier, la classe est égale au nom de la classe ici. Et vous pouvez voir que VS Code essaie de remplir automatiquement cela pour moi. Et je pourrais aussi faire la classe est égale au nom de la classe ici. Et donc au lieu d'écrire le style est égal à paddings, 40 pixels, la couleur est blanche, couleur de fond est noire. Au lieu d'écrire que deux fois, nous l'avons écrit une fois, semble un peu différent. Et nous avons dit des classes égales à ClassName. Écoutez les classes égales à ClassName ici. Maintenant, lorsque je rafraîchis ma page, je l'enregistre et actualise la page. Vous verrez qu'il applique le style aux deux sections pour moi. Maintenant, attention avec les fautes de frappe ici parce que j'utilise des caractères majuscules et minuscules ici. Mais si vous ne le faites pas correctement. Et j'ai délibérément appelé celui-là, ça ne va pas apparaître, mais ta console ne va pas se plaindre non plus. Donc, vous devez garder un oeil dehors pour ça, assurez-vous que vous tapez les choses correctement. Si cela signifie que vous tapez plus lentement, cela signifie que vous tapez plus lentement. C' est bon. Maintenant, l'autre chose avec les classes est que nous pouvons ajouter plusieurs classes. Donc nous pourrions ajouter une autre classe ici, appeler en majuscules, et nous pourrions transformer du texte en majuscules. Maintenant, je les connais déjà parce que j'écris beaucoup de CSS dans ma vie quotidienne. Mais VS Code est également très utile ici. Donc, dès que j'ai tapé du texte, vous pouvez voir est d'essayer de me donner toutes sortes d'options différentes ici. Il y a beaucoup de choses à CSS. Encore une fois, vous n'avez pas besoin de tout mémoriser si vous ne voulez pas vraiment le faire. Vous pouvez toujours juste comprendre comment Google est, tant que vous pouvez comprendre comment obtenir la réponse, c'est ce qui est important. Mais en retournant des lunettes. J' ai donc une seconde classe ici. Encore une fois, la classe commence par un point. C' est ce que ça veut dire. C' est beaucoup comme dire que le point est égal à ou là-haut c'est beaucoup comme dire que la classe est égale à. Nous utilisons juste le point comme une méthode abrégée. Et puis faisons un de ces majuscules et nous pouvons ajouter des majuscules à la seconde. Maintenant, nous devons ajouter un espace. Et ici, si vous n'ajoutez pas d'espace, ça ressemble à ça. Et votre navigateur va penser que le nom de classe s'appelle nom_classe ici, en majuscules. Comme tout un mot, ce n'est pas son className ici, l'espace, puis les majuscules aussi bien. Et nous pouvons ajouter de plus en plus si nous le voulions, tant qu'ils font réellement quelque chose. J' ai donc ClassName ici, espace, majuscules. Et quand je rafraîchis cela, nous devrions voir que cela hérite de ce même style, mais devrait aussi être tout en majuscules. Et regarde ça. C' est comme s'il me criait dessus. Et c'est tout ce qu'il y a à vraiment des classes en HTML. Une classe est un morceau de code réutilisable. Il a ce petit point ici qui dit en tant que classe, il a ce genre de syntaxe. Encore une fois, vous n'avez pas besoin de connaître cette partie à ce stade. Veuillez vous concentrer sur le HTML. Html sur lequel nous voulons nous concentrer est l'attribut appelé classe. Et comment cela fonctionne, nous pouvons avoir un nom de classe, espace, nom de seconde classe, espace, nom troisième classe, ainsi de suite et ainsi de suite et ainsi de suite. 13. L'identification HTML: Ok, bienvenue de retour. Nous avons encore une chose à couvrir quand il s'agit de CSS, et c'est cette idée d'un ID. Et nous l'avons fait quand nous créons des liens internes. Nous pouvons donc créer un lien qui va vers le bas ou comme celui-ci, un lien qui remonte vers le haut de la page. Mais nous utilisons cet attribut d'ID ici, et nous pouvons réellement styliser des choses basées sur une idée aussi. Donc, dans la dernière leçon, nous avons regardé les cours. Les classes utilisent un point. Mais si je fais défiler ici, vous pouvez réellement voir cet identifiant, comme si je reliais ici en haut et faire, faire, faire, faire, faire, faire, faire, faire, faire, faire. Id est égal à top. Mais ici, j'y suis toujours lié avec un signe numérique, un numéro, un signe haut. Et ça va me ramener au sommet de l'identité. Maintenant, ce que cela veut dire est fondamentalement le signe numérique est égal à haut. Id est égal à top. C' est la même chose. Donc, si nous faisons défiler vers le bas à l'intérieur de notre attribut de style ici, nous pouvons créer un ID de test d'ID. Et ici, et vous verrez que cela commence par un signe numérique, pas d'espaces, pas de caractères spéciaux. C' est juste un texto régulier ici. Alors n'essayez pas d'avoir trop de fantaisie avec vos noms de classe ou vos noms d'ID. Et ici, nous pourrions faire quelque chose comme une bordure, cinq pixels, rouge solide. Rendons en fait cela beaucoup plus odieux et faisons 15 pixels rouge solide. Maintenant, hors de l'emballage, cela ne va rien faire parce que nous n'avons appliqué cet ID de test particulier nulle part. Allons-y et ajoutez-le à ce milieu. Donc nous avons trois divs ici. Nous avons un div supérieur avec le nom de la classe ici, div inférieur avec le nom de la classe ici et en majuscules. Et au milieu, nous avons ID est égal à. Et je vais faire défiler l'ID de test et vous pouvez voir que ces deux correspondent ici. Maintenant, la chose avec les ID est qu'ils sont censés être 100% uniques. Aucun navigateur n'honore pas toujours cela, mais JavaScript rencontrera toujours un problème si vous avez deux ID identiques. Donc, vous n'avez pas vraiment besoin de savoir ce que cela signifie pour le moment. Mais ce que vous devez savoir, c'est qu'une pièce d'identité est exactement comme votre permis de conduire. Il ne devrait y avoir qu'une seule copie. Il ne devrait y avoir qu'une seule version. C' est votre carte d'identité. Revenons à notre navigateur ici. Et quand je frapperai, on verra une bordure rouge de 15 pixels par ici. Comme ce super odieux. Donc, tout comme les classes, nous pouvons sélectionner des choses par ID, puis y ajouter un style. Et c'est d'où vient cet attribut ID. Maintenant, il n'y a rien à faire ici. Ne vous inquiétez pas, vous n'avez pas besoin de savoir tout cela maintenant, vous allez avoir des tonnes d' expérience avec cela en CSS et JavaScript quand vous allez apprendre ces choses. Mais pour l'instant encore, continuons à nous concentrer sur HTML. Il est juste bon de savoir qu'il existe un attribut de classe et un attribut d'ID, et c'est ainsi que cela fonctionne. Oh, et une dernière chose. Vous n'ajoutez pas plusieurs ID ici. Donc comme comment nous avons le nom de classe ici, puis un espace, puis en majuscules. Et c'est sélectionner ce truc et ce truc avec un ID. On ne fait pas ça avec une pièce d'identité. On dit juste qu'il y a une seule chose ici. Donc, nous ne faisons pas de test d'ID. Et un autre, et un autre. On ne fait pas ça. On dit juste qu'il y en a un. Alors laissez ce couler quelques minutes. N' hésitez pas à me rencontrer et à la prochaine leçon, et nous reviendrons au HTML. 14. Le formatage du code: Ok, bienvenue. Jetons un coup d'oeil à quelques façons différentes de formater le code, format du code ou le formatage du code. La première façon est cette pré-balise p e. Et si nous passons juste au-dessus de ce temps, MD n va nous dire que la balise pré est un élément pré qui représente un bloc de texte préformaté dans lequel la structure est représentée par un type d'Alibaba par la première, la chose la plus importante ici est que si représente un texte préformaté, quelques trucs ici. Et allons-y et voyons juste à quoi cela ressemble au début. Donc c'est près du fond ici. Et regarde ça. En fait, ça a fait quelque chose de bizarre. Il a ajouté un tas d'espaces. Donc, en HTML 101, si vous vous souvenez, j'ai prêché à ce sujet. Html ou pas HTML, mais votre navigateur ne se soucie pas des espaces. Cependant, il y a quelques cas où c'est le cas. Pré est l'un de ces cas. Donc, la pré-étiquette est très sensible au blanc. Et si on faisait une deuxième ligne ici, la deuxième ligne ici. Maintenant, en HTML régulier, nous devons ajouter un BAR ou une sorte d'élément de bloc pour entrer sur une nouvelle ligne comme celle-ci. Mais nous n'avons pas besoin de le faire, pas dans un pré-tag de toute façon. Et une pré-étiquette. Regarde ça s'affiche parfaitement. Maintenant, la chose à garder à l'esprit est que la pré-étiquette se soucie de l'espace blanc. Alors allons de l'avant et ajoutons un tas d'espaces ici. Rendre ça juste comme si terrible. Il aligne également notre texte d'ailleurs, donc peu importe la police par défaut, car notre éditeur de texte va essayer de s'assurer que chaque police est mono ou que chaque lettre est monoespacée, sorte que h est la même largeur que E, car la même largeur que la nôtre est la même largeur que e est la même largeur que les yeux. la même façon que Zed dit où ce m, ouais, tu comprends le but. Dans la balise pré. Ça va faire exactement la même chose. Alors que si vous regardez ici que r n'est pas aussi large que le FEP. Alors que ici le SOM soit de la même largeur, même les espaces sont de la même largeur. C' est ce qu'on appelle l'espacement de Mano. C' est donc une façon de formater votre code. Une autre façon de formater votre code est si nous voulions faire quelque chose en ligne parce que PRE comme un élément de bloc, nous pourrions dire, ajoutons du texte Lorem ici, code barre oblique. Et ça va être dans la ligne pour nous. Et cela va le faire ressembler un peu plus de code comme, peu plus comme ça. Et regarde ça. Il a en fait pris lorem ipsum dolor siège, siège, assis. Je ne sais pas. Et il l'a formaté beaucoup comme ça. Est-ce que c'est sensible aux espaces ? Explongeons. Ajoutons un tas d'espaces entre lorem ipsum. Celui-ci n'est pas sensible aux espaces. Tu regardes ça ? Mais pré est sensible aux espaces. C' est donc une bonne distinction à garder à l'esprit. Donc je vais juste annuler ça parce que ce n'est pas nécessaire. Et ce sont deux façons de formater votre code. Donc, vous pouvez écrire du code comme celui-ci. Il va toujours essayer de rendre HTML à l'intérieur de celui-ci. N' oublie pas ça. Vous aurez toujours besoin d'entités HTML. C' est une chose dont on parlera à l'avenir. Mais vous pouvez toujours formater votre code comme ceci ou comme ceci. Élément de bloc, élément en ligne, joli élément de code. 15. Les entités HTML: Ok, jetons un oeil aux entités HTML. Maintenant, dans la dernière leçon, nous avons examiné les éléments pré-et code. Et disons que je voulais mettre quelque chose comme B. C'est audacieux. Et disons que je voulais vraiment montrer ça. Je ne voulais pas nécessairement juste dire comme ceci est un texte en gras. Je voulais montrer cette étiquette. Maintenant, on va rencontrer un problème quand je frapperai. Il, juste en gras mon texte. Donc, il rend toujours HTML régulier, et ce n'est pas ce que nous voulons. On veut que cette étiquette apparaisse. Maintenant, nous avons ces choses appelées éléments HTML. Et un élément HTML commence par une esperluette ou la fin, et se termine par un point-virgule. Et c'est vraiment juste des raccourcis pour montrer moins que, plus que le droit d'auteur, des choses comme ça. Et maintenant il y en a tellement que je ne peux pas les couvrir tous. Et tu vas devoir faire un peu de googling pour ça. Mais nous pouvons faire moins que, qui est ce symbole ici, B. Et puis nous pouvons faire des esperluettes plus grandes que g t. Et cela semble vraiment, vraiment bizarre, mais ce que ça va faire est de le transformer en ça. Et celui-ci va le transformer en ça. Mais seulement pendant qu'on l'affiche. Alors allons de l'avant et rafraîchissons votre page. Et nous pouvons voir que cela apparaît maintenant. Allons de l'avant et copions tout ce truc sur notre étiquette de fermeture. Et ajoutons une barre oblique ici. Regarde ça. Donc, notre texte n'est plus gras et il nous montre les balises HTML. Maintenant, nous pouvons faire la même chose, exactement la même chose à l'intérieur de nos éléments de code que nous utilisons dans notre dernière classe ou dernière leçon. Même chose, et nous n'avons pas à le faire à l'intérieur de l'élément de code. On pourrait le faire n'importe où. Ça n'a pas vraiment d'importance. Vous verrez ici qu'il dit B, c'est gras, sorte que c'est un élément HTML ou une entité. Et une entité, tout ce qu'il est de prendre une sorte de façon de lire régulièrement le code que vous êtes navigateur. Nous avons essayé de l'interpréter et de le montrer comme vous voulez le montrer d'une manière lisible par l'homme. Maintenant, un très bon exemple est si nous devions ajouter comme un pied de page à notre page ici. Disons que c'est notre pied de page. On pourrait dire quelque chose comme et copier. Et puis on pourrait mettre l'année ici pour pouvoir mettre comme 2022, si c'est l'année. Faites défiler vers le bas et voilà, un droit d'auteur. Maintenant, juste pour les fonds, je vais jeter dans les extras ici. On peut le faire pour les super, et ça l'invente. Donc, il l'amène un peu au lieu d'être centré. Et nous pouvons aussi faire SUB, SUB pour indice, exposant et indice. Et ça fait tomber. Donc je vais annuler ça si vous n'êtes pas libre de jouer avec eux si vous voulez, mais ils ne sont pas vraiment nécessaires. Juste pensé, jetez-les là pour s'amuser parce qu'ils travaillent en quelque sorte sur le droit d'auteur. Le droit d'auteur est généralement cette petite vue minuscule, en haut de la ligne, vous utiliseriez l'exposant pour cela. 16. Introduction aux formulaires: Ok, parlons rapidement des formulaires Real. Formulaires. Maintenant, nous allons passer un peu de temps sur les formulaires, mais ce ne sera pas vraiment très utile pour nous. Les formulaires sont la façon dont nous envoyons des données à un serveur. Mais nous n'avons pas réellement de serveur juste parce que nous avons ouvert dans le fichier HTML dans votre navigateur ne signifie pas que c'est un serveur. serveur exécute généralement un langage de programmation comme Python ou PHP, Java, C, autre formatage approprié, langage de programmation approprié que nous utilisons pas un langage de programmation. Html n'est pas un langage de programmation, c'est un langage de script. Et donc, nous n'avons pas de serveur, nous n'avons pas besoin du serveur pour l'exécuter. Cependant, les formulaires sont importants pour créer des formulaires de contact, mettre à jour des formulaires, se connecter formulaires d'inscription, oublié vos formulaires de mot de passe, des choses comme ça. Maintenant, la forme ressemble généralement à ceci. Vous avez l'élément de formulaire. Vous avez une sorte de méthode. Et vous pouvez réellement voir que cela suggère ici, eh bien trois, mais vraiment vous allez utiliser GET ou post pour la plupart. Je, allons de l'avant et utiliser get. Et l'action va aller à un point de page HTML. Maintenant, juste comme un exemple ici, allons de l'avant et créer un bouton. Et le type sera Soumettre, et nous couvrirons tout cela individuellement, individuellement aussi. Soumettez ce formulaire. Et si je retourne à ma page et actualise et clique sur Envoyer ce formulaire, regardez ce qu'il fait à mon URL. Il va à un point de page HTML. Donc ça a changé la page pour nous, ce qui est plutôt cool. Et il essaierait également de recueillir les informations du formulaire et de les mettre dans l'URL, ce qui n'est pas idéal pour les mots de passe, les cartes de crédit ou des choses comme ça, mais c'est une bonne façon de travailler avec les formulaires lorsque vous apprenez simplement. Jetons un coup d'oeil à ce que nous pouvons faire d'autre avec un formulaire. Et encore une fois, vous n'avez pas besoin de suivre avec cela, couvrira tout cela seul. Donc, entrée, nous avons obtenu des entrées et nous pouvons faire une zone de texte. Et j'ai juste laissé mon code VS, mon éditeur remplir automatiquement des trucs pour me montrer des choses. Il s'agit d'un champ de saisie. C' est une seule ligne, comme votre email, votre mot de passe ou quelque chose comme ça. Et c'est une zone de texte comme vous ajoutez votre adresse. Alors allons de l'avant et jetons un coup d'oeil à certaines de ces choses individuellement. Ce que je vais faire, c'est juste supprimer ça parce que ça ne sera pas utile dans la prochaine leçon. Bien que je voulais faire ici était de vous montrer, hé, c'est comme ça que les formulaires fonctionnent. Et dans la leçon suivante, nous allons vraiment commencer avec les formulaires. 17. Éléments d'entrée: Bon, bienvenue. Dans la dernière leçon, nous avons examiné ce qu'une forme fait, une action. On ne veut pas que ça aille nulle part. Faisons ça. Allons à la même page que nous sommes déjà sur. Donc, quand nous avons certains éléments, comme l'entrée, zone de texte ou le bouton, ou il y en a un ont été effectivement sélectionnés. Nous allons couvrir tous ces éléments individuellement. Mais quand nous les avons, ceux-ci devraient tous être enveloppés dans un élément de forme. Maintenant, c'est une sorte de mélange et de correspondance et de faire ce que vous aimez. Il n'y a pas beaucoup de règles. Comme dans vous n'avez pas besoin d'avoir un bouton de zone de texte d'entrée puis sélectionnez. Vous pouvez les mélanger et les assortir de n'importe quelle façon, forme ou forme que vous aimez. Mais commençons par l'entrée. Donc, nous pouvons faire des entrées. Et je vais juste frapper Tab. Et par défaut, c'est le type du texte, donc juste du texte normal, mais il y a beaucoup de types différents. Il y a un bouton qui ressemblerait à un bouton, une case à cocher colorée datetime, datetime, local, date, fichier email caché. Ce qui est agréable parce que l'on apparaît pas du tout, mais vous pouvez toujours mettre des informations dans un téléchargement d'image, mois, numéro, mot de passe, Recherche radio, telle recherche, soumettre, serviette, heure de texte, URL, semaine, ainsi de suite et ainsi de suite et ainsi de suite jusqu'à un et ainsi de suite. Travaillons simplement avec un pour commencer avec du texte normal. C' est donc notre élément. C' est notre attribut, type est l'attribut, et c'est notre valeur. On dit que c'est un champ de texte. Ensuite, nous pouvons lui donner une valeur par défaut et dire bonjour monde. Et nous pouvons lui donner un espace réservé aussi. espace réservé est égal à entrer votre nom. Allons de l'avant et jetons un coup d'oeil à ce que cela ressemble. Oh, non, faites défiler vers le bas. Merci. Ça a HelloWorld. Et lorsque je supprime cela, supprimer, supprimer, supprimer, supprimer, supprimer, supprimer, supprimer, supprimer, supprimer. Ce dernier, ce petit texte en arrière-plan qui est un texte réservé. Mais quand je rafraîchis la page par défaut, il dit bonjour monde. Et c'est à cause de la valeur que je lui ai donnée. Maintenant, un autre exemple serait mot de passe. Allons de l'avant et, et vous pouvez voir que cela transforme ça en petits points que nous ne pouvons pas vraiment voir ce qu'il fait. Donc, c'est le champ d'entrée, c'est vraiment tout ce qu'il y a. Dans la leçon suivante, allons de l'avant et jetons un coup d'oeil à notre champ de zone de texte. 18. Zone de texte: Bonjour et bienvenue. Dans la dernière leçon, nous avons créé un champ de saisie dans celui-ci, allons de l'avant et créons une zone de texte. Maintenant celui-ci est un peu différent. Vous remarquerez que le champ de saisie était une balise à fermeture automatique. Le formulaire ne l'était pas, donc il enveloppe un tas de choses ici, mais le champ d'entrée prend réellement une valeur sous la forme d'un attribut appelé valeur. La zone de texte ne le fait pas. On peut se débarrasser du nom et de l'identité parce qu'on ne fait rien de tout ça. Nous avons aussi un peu de brise-règles ici où nous disons, hé, celui-ci n'utilise pas vraiment de valeur. L' attribut ne fait pas cela. Celui-ci veut que nous mettions notre texte ici. Et c'est intéressant parce que si je rafraîchis cette page, dit texte ici. Mais ce qui nous rend plus intéressant, c'est que c'est l'un de ces rares cas où les espaces comptent. L' espace blanc a de l'importance ici. Et la raison pour laquelle je vous montre ceci est parce que j'ai sur mon texte de première ligne ici, mais sur la deuxième ligne, j'ai comme 15 ou ce que cela fait 12 espaces avant le mot blanc. Allons de l'avant et voyons ce que ça fait. Qui sont zone de texte. Il ne le rend pas très agréable et nous donne tous les espaces supplémentaires là-dedans. Donc, si jamais vous rencontrez quelque chose comme ça, allez-y et jetez cela tout à fait à gauche de votre document, votre page sur laquelle vous êtes un fichier sur lequel vous travaillez. Allons de l'avant et rafraîchissons. Et cela le ramène à gauche, et c'est notre valeur par défaut. Maintenant, cela peut également prendre un espace réservé. espace réservé est égal à, wow, un espace réservé. Espace réservé. Ok, rafraîchissez-vous. Allez-y et prenons tout ça et vous pouvez voir que j'ai aussi de l'espace blanc. Allons de l'avant et nettoyons cela et attrapons tout ce Supprimer. Et il est dit, wow, porte-place bien. Maintenant, nous avons aussi des colonnes et des lignes comme une table. On peut dire les colonnes, disons au lieu de 30, disons qu'il y en aura 50. Les colonnes montent et descendent. Donc ça va être 30. Donc 50 va être, je vais deviner que quelque part par ici sont assez proches. Et puis nous avons des rangées qui vont de haut en bas. A dix rangées ici, on peut dire cinq rangées. Rallons-le juste un peu plus court. Donc nous avons eu 12345 et après ça, la petite barre de défilement va apparaître pour nous, 6789. Et vous pouvez voir cette barre de défilement ici. Nous pouvons également les redimensionner, ce qui est assez agréable. La plus grande différence entre une zone de texte et un champ de saisie car il a des colonnes et des lignes, l'espace réservé est exactement le même, mais la valeur va en fait entre la balise HTML d'ouverture et de fermeture. À ce stade, j'aimerais que vous donniez une photo, créez une entrée, puis créez une zone de texte. N' oubliez pas que si vous êtes coincé, vous pouvez poser des questions ci-dessous. Ou bien, vous pouvez rejoindre le groupe d'apprentissage pour coder Facebook. Nous sommes 56 mille membres plus peuvent aider le yoga à tout moment. 19. Boutons: Ok, jetons un coup d'oeil aux boutons. Qu' est-ce qui est si important à propos d'un bouton ? Eh bien, si nous revenons à notre page ici, nous avons un champ mot de passe et nous avons une zone de texte ici, mais nous n'avons pas de moyen de soumettre ce formulaire. n'y a pas de bouton pour soumettre ce formulaire, et c'est ce qu'un bouton fait. Maintenant, le bouton peut faire l'une des trois choses. Donc, nous allons faire le bouton est égal à bouton et cliquez sur moi. Donc, la chose importante ici est que nous disons type, tout comme notre entrée, type est égal à mot de passe, type de bouton est égal à bouton. Maintenant, quand je vais ici et me rafraîchir, je clique sur ceci, rien ne se passe. Et c'est parce que nous avons dit Type est égal à bouton. C' est en grande partie pour JavaScript, où JavaScript peut réellement faire quelque chose avec le clic d'un bouton. Pour nous, c'est complètement inutile. Ensuite, nous avons réinitialisé. Maintenant, la réinitialisation ne semble pas faire quoi que ce soit. Mais si je vais de l'avant et supprime cela et fais un tas de choses aléatoires dans votre cas, fait comme, comme, comme, comme, comme des données. Et cliquez sur moi. Parce que ce paramètre est défini sur Type est égal à réinitialiser. Ça va réinitialiser tout mon formulaire. Donc, cela va automatiquement remplir avec une valeur par défaut, et cela va apparaître avec sa valeur par défaut. Juste comme ça, ça nous a remis le formulaire. Donc assez cool, honnêtement pas utilisé trop souvent ces jours-ci. Celui que vous allez utiliser le plus souvent est soumettre. Et maintenant, si je rafraîchis ma page et actualise, cliquez sur moi. Il a en fait rechargé ma page. Et vous pouvez voir qu'il est allé au point d'interrogation index.html. Et puis remets-moi en bas. Maintenant, ce point d'interrogation est parce que nous utilisons une méthode appelée get. Et quand cette méthode est get, ce que nous pouvons faire est ici, nous pouvons dire que le nom est égal au mot de passe et que la zone de texte que nous pouvons voir le nom est égal à, je ne connais pas l'adresse de quelqu'un. Par exemple, continuons et actualisons cette page. Et quand je soumets ce formulaire une fois de plus, vous pouvez voir le mot de passe est égal à bonjour monde. C' est ce qui apparaît ici. Et l'adresse est égale au texte ici. Une nouvelle ligne, les espaces n'a pas d'importance ici. Et de sorte que le mettre dans ou URL. Maintenant, c'est en fait une très mauvaise pratique. Ne mettez jamais des choses comme votre mot de passe, URL interne jamais. Ce n'est pas vraiment quelque chose dont vous avez besoin pour être trop préoccupé en ce moment, mais je vais le prêcher juste pour que vous soyez familier avec une sorte de fonctionnement de la sécurité. Si vous avez déjà mis un mot de passe, une carte de crédit ou un numéro d'assurance sociale, numéro de sécurité sociale dans votre URL. Google peut prendre cette URL et la stocker sur Internet et il ne saura pas mieux. Il pensera que c'est une page légitime. Non seulement Google, mais étant ou d'autres moteurs de recherche, les bots seront en mesure de soumettre le formulaire et d'obtenir cette information aussi bien. Les gens partageront les liens avec leur mot de passe dans et des choses comme ça. Vous voulez juste éviter de partager un mot de passe ou un numéro de carte de crédit, des numéros de sécurité sociale, un numéro d'assurance sociale, quelque chose comme ça, tout ce qui est privé. Vous ne voulez jamais mettre votre URL. Encore une fois, je reçois un peu de prédication sur la sécurité ici, mais c'est vraiment bon de savoir. La chose à noter ici cependant, est test1. Test2. Mot de passe est égal à tester deux adresses égales à tester une, comme nous l'avons dit. Et ce formulaire est maintenant soumis parce que nous avons le type de bouton est égal à soumettre. 20. Menus de descente: Ok, allons de l'avant et regardons les options de liste déroulante. Maintenant celui-ci est vraiment intéressant. J' aime vraiment celle-là, mais avant que nous le fassions, nettoyons ça juste une touche parce que notre forme air un peu grossier et ça vous montrera à quoi ça ressemble avant et après. Donc je vais ajouter un tas de divs. Et ici, sachant qu'un div est un élément factice ne fait absolument rien, mais c'est un élément bloc. Donc ça va en quelque sorte mettre ça sur leurs propres lignes. Et faisons ça aussi. Et c'est à ça que ressemblait notre forme au début. Je vais zoomer ici. C' est à quoi ressemble la forme au début. Et quand je rafraîchis la page, c'est sur sa propre ligne en ligne. En ligne. Donc c'est un peu mieux à mon avis. Allons de l'avant et créons un div de plus ici juste pour que nous puissions avoir un élément select. Et cet élément de sélection est assez intéressant. Donc ce qu'on peut faire, c'est le nom. Nous pouvons lui donner un nom sélectionné option de soulignement. On n'a pas besoin de lui donner une pièce d'identité. Et celui-ci est intéressant parce que cela fonctionne un peu différemment de la zone d'entrée et de texte. Ce que cela fait, c'est qu'il nous permet d'utiliser l'élément option où nous pouvons mettre une valeur et une représentation textuelle de cette valeur ici. Donc, valorisez un, et nous pouvons dire que c'est la valeur un. Nous faisons la même chose sur la deuxième ligne, valeur deux et c'est la valeur à, allons de l'avant et voyons à quoi cela ressemble. C' est une petite liste déroulante maintenant, et nous pouvons le faire encore et encore. Je vais juste en faire un tas ici. Pas vraiment bon exemple, mais un exemple quand même. Et nous pouvons sélectionner l'un d'entre eux. Maintenant, la raison pour laquelle nous ajoutons une valeur dans l'année plus la représentation textuelle de cette valeur est que si je sélectionne la valeur 1, soumettez ce formulaire. Vous pouvez voir ici. Donc, l'option sélectionnée est égale à la valeur un, et cette valeur un correspond ici. Donc, lorsque vous soumettez votre formulaire, votre langage de programmation côté serveur comme Python va lire cette valeur, va dire que c'est la valeur un ne va pas chercher pour ceci est la valeur un, il va chercher juste la valeur un. Maintenant, nous pouvons également rendre les choses désactivées et nous pouvons également faire des choses présélectionnées. Alors allons de l'avant et faisons une nouvelle option ici qui est désactivée par défaut. La valeur de l'option ne sera rien. Et disons que cela est désactivé comme égal à désactivé. Désactivé, juste comme ça. Allons de l'avant et peut-être jeter ça sur une nouvelle ligne juste pour qu'il soit un peu plus lisible. Et rafraîchissons notre page. Effectuez un zoom avant. Nous avons ici une option qui est désactivée. Je ne peux pas le sélectionner et je peux sélectionner la valeur un ou deux, mais pas désactivé. Disons maintenant que j'ai une option ici que je veux toujours être sélectionné par défaut. Et dire par défaut. sélectionnée est la valeur. Sélectionné par défaut est la représentation textuelle de cette valeur. Et nous pouvons dire, ledit élu est égal à sélectionné, sélectionné par défaut. Et donc même si je reviens à cette page et Lake, effacez tous ces trucs comme si je suis un nouvel utilisateur, je fais défiler vers le bas de la page, sélectionné par défaut, même si c'est une troisième option, il, il n'a pas sélectionné valeur1 et valeur2 par défaut, il est sélectionné par défaut. Maintenant, la dernière chose à savoir sur ces champs de formulaire est que vous pouvez les rendre obligatoires. Donc, disons nécessaire et requis. Donc, le mot de passe dans les champs d'adresse sont obligatoires. Allons de l'avant et actualisons cette page. Allons de l'avant et effacons cela et cliquez sur moi et dit s'il vous plaît remplir ce champ. Là où cela devient intéressant, c'est qu'on peut dire que ce n'est pas un mot de passe. Nous pouvons dire qu'il s'agit d'une adresse e-mail. Rafraîchissons la page. Et en fait, ce que je dois faire est de changer ce type email et même de changer le nom en email aussi. Donc, la valeur par défaut est Hello World. Mais si je clique sur ceci est s'il vous plaît inclure une annonce dans l'adresse e-mail. Il sait qu'il cherche une adresse e-mail. Bonjour monde à something.com. Ok, donc la validation a dépassé la première, elle n'a pas passé la seconde. Il veut que je remplisse ce champ ici. Une fois que je l'ai rempli, il soumettra la page ou soumettra le formulaire pour moi. Maintenant, ce sont des formes en un mot, les formes sont incroyablement importantes. Ils sont aussi assez complexes. Donc, je recommande fortement de prendre quelques minutes et de déconner avec elle. Maintenant, il ne sera pas immédiatement applicable à vous jusqu'à ce que vous commenciez à travailler avec un langage de programmation côté serveur. Encore une fois, comme Node.js, Python, C, PHP, quelque chose comme ça. Mais vous pouvez toujours obtenir une pratique pratique de comprendre que quelque chose peut être nécessaire, qu'il a un nom qu'il pourrait aller dans l'URL si c'est une getMethod que le type pourrait être e-mail, mot de passe, texte, réinitialiser. Cela pourrait même techniquement même par bouton si nous le voulions, changeons cela pour bouton et voyons ce qui se passe là. Le change en bouton. Bien que j'aime utiliser cette forme de bouton, c'est un peu plus explicite, nommé verbeusement Even. Et oui, alors donne-lui une chance et joue-y un peu. N' essayez pas de réaliser quoi que ce soit en particulier, juste essayé de casser les choses. Que se passe-t-il lorsque vous tapez Kohls est égal à 500 ou un ? Voyez si cela semble différent ou des lignes, ou voyez si vous pouvez faire cette sélection, cet élément de sélection requis également. Allez-y et jouez avec ça. n'y a pas d'objectif ici, mais je dirais passer au moins dix minutes à jouer avec cela et juste avoir une idée de la façon dont cela fonctionne parce que ceux-ci sont incroyablement importants sur la route. 21. Intégrer des vidéos: Ok, bienvenue de retour. Jetons un coup d'oeil à l'intégration d'une sorte de contenu. Maintenant, nous le faisons généralement avec un élément appelé un iframe. Et iframe prend un SRC et une bordure de cadre alors qu'il prend beaucoup de choses différentes. Mais la bordure du cadre sera 0 parce que nous ne voulons pas de bordure autour d'elle. Mais ajoutons cette bordure. Et là de toute façon, faisons SRC est égal à HTTPS. Caleb point i, voyons si cela fonctionne même. Pourtant. Mon site ne vous laissera pas faire ça. Mais vous pouvez voir qu'il y a une bordure de cadre par ici. Et l'exemple est la bordure de cadre un par rapport à la bordure de cadre d'impression 0. Nous aimons la bordure de cadre 0 ces jours-ci, il semble juste un peu mieux. Mais allons de l'avant et ajoutons une vidéo YouTube. Donc, je suis juste sur le codage pour tout le monde chaîne YouTube. Et passons aux fondamentaux du développement web. Arrêtons ça. Et si je vais de l'avant et que je clique sur Partager, je peux partager sur Facebook, Twitter, ou je peux cliquer sur Intégrer. Et ça me donne un iframe et un tas de code. Et je peux juste copier ça. Et supprimons cet iframe. Collez ça ici. Et vous remarquerez que c'est un iFrame. Il a aussi une largeur et une hauteur. Sa source est l'URL YouTube. Donc dub, dub, dub dot youtube.com slash intégrer slash j, y arc PIH DG. C' est l'idée vidéo unique, oui, bordure de cadre de 0. Et YouTube ne veut pas non plus que nous ayons une bordure de cadre et permettre un tas d' autres choses ici que nous pouvons nous débarrasser de Sauf permettre le plein écran. Gardions ça là-dedans. Cela semble utile. Et pour que nous puissions retourner à notre page et rafraîchir et regarder ça. Nous avons une vidéo YouTube sur notre page comme ça. Et c'est littéralement aussi facile que ça. Donc c'est littéralement copier et coller. Mais voyons ce qui se passe quand on fait avec ces neuf largeur de 900, mais la hauteur reste la même à 315. Ça devient un peu squishy, n'est-ce pas ? Disons que la largeur va être de 900 et la hauteur est de 100. Et maintenant, on dirait qu'il est un peu coupé. Il y a donc des moyens de contrôler cela. Et je vais annuler cela parce que YouTube a suggéré les bonnes dimensions pour moi. Et je peux juste aller de l'avant et jouer ça et ça marche juste pour moi dès la sortie de la boîte. Maintenant, ce que je voudrais que vous fassiez, c'est aller trouver une vidéo YouTube, cliquer sur ce lien de partage ou ce bouton de partage, puis obtenir l'iframe et le mettre dans votre page. Je veux que vous ayez un peu d'expérience avec cela parce que dans la prochaine vidéo, nous allons plonger dans votre projet final où vous allez devoir utiliser une intégration, comme un iframe. 22. Votre projet: Okey-dokey, bienvenue. Nous sommes enfin à votre projet final pour HTML2 01. Maintenant, voici ce que je veux que vous fassiez, c'est que je veux que vous créiez une mise en page. Donc, je veux que vous ayez une sorte d'en-tête et de section de navigation et une section de contenu. Et il doit avoir une mise en page et il doit utiliser des tables ou une seule table, plusieurs tables, peu importe. Je vais vous laisser le soin. Votre navigation doit comporter au moins un lien vers une autre page existante de la vôtre. Zone de contenu. Doit avoir une image, un paragraphe, un en-tête et une vidéo YouTube. Enfin, votre pied de page doit avoir un symbole de copyright et l'année de création de cette page. Donc, il pourrait être comme Copyrights 20-20 et copyright 20-25. Et quand vous aurez fini, j'aimerais que vous preniez une capture d'écran de votre page et que vous la partagiez avec le reste de la classe. Je pense qu'il est vraiment utile d'obtenir des commentaires si vous ne voulez pas partager avec la classe, c'est bon. Vous pouvez toujours aller sur Facebook apprendre à coder le groupe et le partager avec le groupe et obtenir des commentaires là-bas aussi. Mais la rétroaction est absolument vitale et ne soyez pas trop nerveux à propos des commentaires. Des milliers de personnes le font tous les jours. C'est tout à fait correct. Nous pouvons vous donner toutes sortes de commentaires positifs pour vous aider à écrire un meilleur code, pour rendre les choses un peu plus belles, un peu plus modernes, des choses comme ça. C' est toujours agréable d'avoir une autre paire d'yeux sur votre code. Alors allez-y et donnez un coup de feu. Ce que je vais faire, c'est que je vais mettre en pause cette vidéo pendant environ, je ne sais pas, cinq secondes environ. Et puis je vais créer ma version de ça juste devant vous. Alors allez-y et arrêtez la vidéo ici et vous le savez si vous êtes coincé, vous pouvez juste me regarder faire la mienne et ensuite vous pouvez l'essayer vous-même aussi. Mais je vous recommande fortement de l'essayer par vous-même d'abord, faire transpirer votre cerveau un peu. C' est vraiment, vraiment important. Ok, allons de l'avant et créons notre page de projet. Donc, je vais aller à Fichier, Nouveau Fichier et laisser les changements du texte brut à un fichier HTML. Et la première chose que je dois faire est de créer cette structure HTML5. Ce document s'appellera le projet de Caleb. Et la première chose dont nous avions besoin ici était de créer une mise en page à l'aide de tableaux ou d'un tableau. Et donc je laisse soudainement de la place pour que nous puissions travailler ici. Et nous voulons quelque chose qui ressemblera un peu à ça. À cause de Doo-Doo-Doo. Il manque la façon la plus difficile de dessiner quelque chose. Mais oui, pour qu'on ait quelque chose comme ça. Donc nous avons comme notre en-tête ici. Ils pourraient dire comme le projet de Caleb, site Web de Caleb, votre site Web, votre nourriture préférée, votre animal de compagnie préféré, vos meubles préférés ou quoi que ce soit comme ça. Nous avons une sorte de navigation sur la gauche. Par ici. Nous avons un contenu et le bon, et nous avons une sorte de pied de page en bas. C' est le genre de regard que je vais chercher. Votre style peut être un peu différent, votre mise en page peut être un peu différente. Mais d'abord, je sais que j'ai besoin d'une table et je sais que je dois travailler avec cette table et voir exactement ce qui se passe. Et je veux que la largeur soit à 100% de cette page. Ensuite, je sais que j'ai au moins une rangée ici. J' ai donc une ligne de table, et je veux le titre de table ici. Maintenant, il est agréable d'avoir le titre de table va l'auditer pour moi, mais je ne veux pas qu'il soit audacieux. Je veux un H1, je veux que ce soit énorme et dire le projet de Caleb Tolkien. Ensuite, nous avons une autre rangée ici. Alors allons de l'avant et créons une autre ligne de table. Celle-ci a deux cellules. Donc nous faisons la cellule TD 1, TdS L2. Et allons de l'avant et prévisualisons ceci en enregistrant ceci comme point HTML de mon projet. Et je peux aller au fichier, ouvrir le fichier, mon projet point HTML. Et nous pouvons voir que les cellules ne fonctionnent pas vraiment. Et cela est attendu parce que nous voulons que cela prenne toute la largeur. Mais ça veut dire qu'il y a deux cellules, on doit les afficher d'une manière ou d'une autre. Ce que nous pouvons faire ici, c'est que le colspan est égal à deux. Et ça veut dire qu'il y a deux cellules ici. Assurez-vous que cela fait aussi semblant qu'il s'agit de deux cellules. Et on y va. Ça a l'air un peu mieux. Maintenant, nous avons une navigation ici dans la cellule 1. Allons donc juste de l'avant et étiquetons cette navigation et étiquetons ce contenu. D'accord. Vous pouvez voir que ça a heurté ma navigation. Changeons la largeur ici. La largeur de celui-ci va être quelque chose comme 20%. Ça a l'air mieux. Enfin, ce que j'ai écrit ici, qui, en passant, je pourrais rap dans un pré-tag, c'est que j'ai besoin de cette rangée du bas ici. Alors allons de l'avant et ajoutons cette rangée du bas, rangée de table, td, pied de page ici. Voyons à quoi cela ressemble. Pas mal, pas mal. Mais nous voulons aussi que cela ait un colspan de deux. Faisons colspan de deux. On y va. On a un pied de page ici et on veut le centrer. Donc, ne faisons pas ça un TD, faisons un th. Et commençons par la chose la plus facile ici. Nous avons donc terminé notre mise en page. Le pied de page doit comporter un symbole de copyright. Nous savons que c'est une entité HTML. C' est ce petit c avec un cercle autour. Donc nous pourrions dire et copier le site de Caleb comme de nous vivons dans le futur, 20-30. On y va. Pas mal, pas mal. Navigation. Nous savons que les règles étaient la navigation devrait avoir un lien vers une autre page existante. Allons-y et donnons-nous de la place pour travailler ici. Et créons une liste non ordonnée. Et changeons cela en un fichier HTML. Nous avons une liste non ordonnée et ce premier lien va être une balise d'ancrage qui va à index.html. Index.html. Accédez à notre HTML sur une page. D' accord ? Ok, ça arrive ensemble. Je vais zoomer ici. Alors ça se réunit. Allons de l'avant et créons un autre allié avec une ancre à l'intérieur, un élément de liste avec une ancre à l'intérieur. Et disons à celui-ci d'aller à, je ne sais pas, Facebook.com, mais c'est un lien externe. Nous avons besoin de la barre oblique deux-points HTTPS. Et cela pourrait dire, Allez sur Facebook. Dot com. On y va. On a quelques liens là-dedans. Nous savons que celle-ci existe parce que c'était la page sur laquelle nous travaillions ou c'est une page sur laquelle je travaillais à partir de toutes les autres vidéos. Enfin, nous avons du contenu ici. Ce que nous voulions ajouter à votre contenu devrait avoir une image de paragraphe, un en-tête et une vidéo YouTube. Allons-y et ajoutons d'abord cet en-tête. Et donc tu réalises que ce que j'ai fait c'était juste un texte pour moi. Tout ce que je voulais vraiment faire était de me dire que c' là que c'était censé être pour que je puisse rapidement le sélectionner et commencer à travailler. Allons de l'avant et ajoutons un en-tête ici. Et ce n'est pas forcément un vrai contenu, un en-tête là-dedans. Il a juste besoin de cocher ces critères d'acceptation. Donc, l'en-tête est fait. On peut s'en débarrasser. Lien vers une autre page, débarrassez-vous de cela. Créez une mise en page à l'aide de tableaux. Débarrassez-vous de ce pied de page devrait avoir un symbole de copyright. Débarrassez-vous de ça. Maintenant, nous avons juste une image, un paragraphe et une vidéo YouTube. Allons de l'avant et ajoutons un paragraphe ici. P. Laura. D' accord. Celle-ci est faite. Nous n'avons plus besoin de ce paragraphe. Il nous faut une image. Avons-nous encore des images ? On a un ordinateur, alors allons-y et ajoutons ça. Img. La source va être des images que ce dossier ici slash ordinateur, dot-dot-dot JPEG. Et l'alt va être ordinateur juste au cas où l'image ne se charge pas. Est-ce que ça marche pour moi ? Oui, c'est là. Il y a une grande image là-dedans. Enfin, ajoutez une vidéo YouTube. Donc je vais juste démarrer YouTube ici et aller à la chaîne de codage pour tout le monde. Et allons-y et faisons le formatage Python. Allons de l'avant et cliquez sur partager, et nous allons obtenir cette intégration. Et tout ce que je fais, c'est que je sélectionne ce texte à copier. Et ici, coller. Et cette largeur va toujours être 560, cette hauteur va toujours être 316. Je vais laisser ce permettre Excel accéléromètre presse-papiers, n'est-ce pas ? Tout ça. Je vais laisser ça là-dedans parce que c'est ce que Google suggère. Nous n'avons pas besoin de savoir ce que c'est vraiment à ce moment particulier parce que c'est du HTML intermédiaire, pas du HTML avancé. Allons-y et revenons à notre page. Et nous avons un titre. On a un peu de navigation là-dedans. Nous avons un en-tête, un paragraphe, une image, nous avons une vidéo YouTube, et nous avons un pied de page. La dernière chose que je veux faire est de me débarrasser de cette frontière et de cette pré ici. Nous allons donc nous débarrasser de ce texte préformaté et cette bordure peut être supprimée. Et voyons ce qu'on a. On y va. Nous avons une page HTML avec une mise en page correcte. Et c'est tout ce qu'il y a. Alors merci d'avoir suivi ce cours. Je m'appelle Caleb Eataly et je vous remercie d'avoir pris le temps d'apprendre HTML 201 ou le HTML intermédiaire avec moi aujourd'hui. N' oubliez pas si vous aimez la façon dont j'enseigne, vous pouvez toujours me suivre sur le partage de compétences aussi. Des milliers de personnes me suivent déjà. Mais vous aurez de petites mises à jour. Un bateau comme quand j'ai un nouveau cours qui est sorti, choses comme ça et ensuite vous pouvez regarder New Course a comme je les ai mis dehors. Merci encore d'avoir pris le temps d'apprendre tout cela avec moi. J' ai vraiment hâte de vous voir dans un autre cours. Si je ne vous vois pas dans un autre cours, j'espère vous voir dans le Facebook apprendre à coder Group est un groupe totalement gratuit. C' est totalement facultatif. Mais il y a environ 56 000 membres en ce moment. Tout le monde est prêt à vous aider à tout moment. Et si je ne te vois pas là-dedans, alors encore une fois, merci et heureux codage. se voit autour. Au revoir.