Programmation HTML Pour Tout Le Monde | John Elder | Skillshare

Vitesse de lecture


1.0x


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

Programmation HTML Pour Tout Le Monde

teacher avatar John Elder, Codemy.com

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 Tout le monde Promo Intro

      1:14

    • 2.

      HTML Tout le monde 1 Intro et Sublime

      2:58

    • 3.

      HTML Tout le monde 2 Qu'est-ce que le HTML

      5:26

    • 4.

      HTML Tout le monde 3 Structure de la page HTML

      6:41

    • 5.

      HTML Tout le monde 4 Tags d'en-tête

      4:03

    • 6.

      HTML Tout le monde 5 Pause des paragraphes et des lignes

      6:11

    • 7.

      HTML Tout le monde 6 pré-étiquette

      3:18

    • 8.

      HTML Tout le monde 7 BlockQuote

      4:11

    • 9.

      HTML Tout le monde 8 Liens

      3:36

    • 10.

      HTML Tout le monde 9 images

      5:05

    • 11.

      HTML Tout le monde 10 Listes

      6:48

    • 12.

      HTML Tout le monde 11 tables

      6:31

    • 13.

      HTML Tout le monde 12 Tables avancées

      4:47

    • 14.

      HTML Tout le monde 13 CSS

      6:54

    • 15.

      HTML Tout le monde 14 Intro Au Bootstrap

      4:17

    • 16.

      HTML Tout le monde 15 Installer Bootstrap

      4:59

    • 17.

      HTML Tout le monde 16 Tables de bootstrap

      6:13

    • 18.

      HTML Tout le monde 17 Bootstrap Navbar

      4:12

    • 19.

      HTML Tout le monde 18 cartes de bootstrap

      3:36

    • 20.

      HTML Tout le monde 19 Bootstrap Jumbotron

      5:20

    • 21.

      HTML Tout le monde 20 Bonus

      4:18

  • --
  • 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.

133

apprenants

--

projet

À propos de ce cours

Apprenez à créer des sites Web impressionnants à l'aide du HTML et du cadre CSS Bootstrap. Développement Web Avec le HTML rendu facile !

Dans ce cours, je vous enseignerai des émissions HTML au début.

Si vous avez jamais voulu construire des sites Web, c'est le cours pour vous. Le HTML constitue chaque site Web sur Internet.

Vous ne pouvez pas devenir un développeur Web front-end sans avoir d'abord appris le HTML, et ce cours est tout ce dont vous aurez besoin.

Je commencerai à vous enseigner du HTML de base. On vous explique notamment :

  • Éditeur de texte d'Intro et de Sublime

  • Qu'est-ce que le HTML

  • Structure d'une page en HTML

  • Tags d'en-tête

  • Les étiquettes de paragraphe et les ruptures de lignes

  • Étiquettes PRE

  • Tags Blockquote

  • Liens en HTML

  • Images en HTML

  • Listes HTML (ordonnées et non ordonnées)

  • Tableaux Html

  • Tables avancées

  • Utiliser le CSS avec du HTML

Une fois que nous aurons les bases du HTML hors du chemin, nous en apprendrons sur le Cadre CSS Bootstrap :

  • Intro To Bootstrap CSS Framework

  • Installation de Bootstrap

  • Tables de bootstrap

  • Barres de navigation Bootstrap

  • Cartes de bootstrap

  • Bootstrap Jumbotron

Bootstrap est l'un des cadres CSS les plus populaires, des millions de sites Web l'utilisent. Il est complètement gratuit et facile à utiliser une fois que vous avez appris quelques astuces du métier !

En rassemblant ces deux sections vous donnera les compétences dont vous avez besoin pour construire à peu près n'importe quel type de site Web que vous aimez.

Je m'appelle John Elder, je suis le PDG de Codemy. com et j'ai plus de 35 cours ici à Udemy avec plus de 42 000 étudiants et 100 000 inscriptions sur tous mes cours (il y a une raison pour laquelle la plupart de mes étudiants s'inscrivent à plus d'un de mes cours ! ).

Vous n'obtenez pas seulement un tas de vidéos avec ce cours, vous avez également accès à moi ! Je suis là pour répondre aux questions toute la journée au quotidien. Si vous vous coincez en chemin, ou si vous avez juste besoin d'un peu de clarification, tirez-moi un message et je vous y I'll

Inscrivez-vous aujourd'hui et apprenons du HTML !

Rencontrez votre enseignant·e

Teacher Profile Image

John Elder

Codemy.com

Enseignant·e

John Elder is a pioneer in Internet Marketing who created one of the first Internet advertising networks back in 1997. He sold it to a publicly traded company at the height of the dot com boom and then went on to create the best-selling Submission-Spider search engine submission software that's been used by over 3 million individuals and small businesses in over 45 countries.

Today he teaches Web Development courses at Codemy.com the online code school he founded.  

John graduated with honors with a degree in economics from Washington University in St. Louis where he was an artsci scholar.

Voir le profil complet

Level: Beginner

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 Tout le monde promo Introduction HTML: D' accord. Bienvenue au cours. Mon nom est John Elder de Cody me dot com et je serai votre instructeur aujourd'hui et ce cours, je vais vous apprendre le codage html à partir de zéro. Quand vous aurez terminé, vous serez en mesure de lire, écrire et de comprendre. HTML. La base fondamentale de chaque site Web sur Internet dans la première moitié du cours apprendra. HTML. Je vais vous apprendre la syntaxe HTML et toutes les balises d'élément majeur dans leurs attributs dans la seconde moitié du cours apprendront à utiliser le framework CSS bootstrap pour styler ou pages Web et les rendre incroyables. Donc, si vous avez toujours voulu créer des sites Web, c'est le cours pour vous. Si vous avez peu ou pas d'expérience de codage, c'est le cours qu'il vous faut. Et si vous ne voulez pas passer beaucoup de temps à apprendre mais que vous voulez vraiment comprendre comment tout cela fonctionne, c'est certainement le cours pour vous. Je m'appelle John Elder. J' ai 35 cours ici, vous, pour moi plus de 42 000 étudiants et critiques extrêmement positives. Mais si vous n'êtes pas satisfait pour quelque raison que ce soit, je vous offre 30 jours de remboursement garantie, pas de questions posées. Et contrairement à beaucoup d'instructeurs ici, je suis là pour répondre aux questions toute la journée, tous les jours. Donc s'il y a quelque chose que vous ne comprenez pas tout à fait, ou si vous avez une question quelconque, tirez dessus. Je suis heureux d'aider de toutes les façons que je peux. HMO est un. Les parties les plus importantes du développement Web et de l'apprentissage n'est jamais minis année. Inscrivez-vous maintenant, nous allons coder un peu html. 2. HTML Tout le monde 1 Introduction et Sublime: D' accord. Bienvenue au cours. Je m'appelle John Elder de Cody me dot com et je serai votre instructeur aujourd'hui. Cette vidéo que je veux passer quelques minutes à parler de tous les outils dont nous allons avoir besoin pour ce cours. Maintenant. Heureusement, HTML ne nécessite absolument aucun outil spécial. Vous savez, avec la plupart des langages de programmation. Ruby, vous devez télécharger et installer Ruby. Je pensais que vous deviez télécharger installer des trucs de base de données Python. Ma suite. Vous devez télécharger Install my sequel, Django. Même chose, noeud. Même chose. Chaque démonstration est totalement différente. Il est construit dans cuit dans chaque navigateur Web unique existant. Donc, n'a pas d'importance si vous utilisez Chrome Firefox safari opera, quoi que ce soit du tout. HTML est déjà là. C' est déjà prêt à travailler. Il n'y a rien à faire. Donc, pour écrire le code de citation de démonstration H, tout ce dont vous avez besoin est une sorte d'éditeur de texte, une sorte de pas de pads, quelque chose sur lequel écrire. Et ça n'a même pas besoin d'être un éditeur de texte spécial, mais ça devrait être, euh, vous savez, vous pouvez utiliser Windows Pas de pad, ce qui est un peu ridicule. Mais vous pourriez si vous le vouliez. Donc, dans cette vidéo, je vais recommander l'éditeur de texte que je vais utiliser tout au long de ce cours. C' est le sublime éditeur de texte. Donc, si vous allez à la sublime tex dot com, vous voyez, c'est une sorte d'image de ça ici. Et c'est bien parce que c'est un revêtement. Éditeur de texte Peu importe le langage de programmation que vous utilisez. Il va en quelque sorte vous voir ici changer de couleur en fonction du code différent que vous écrivez, et c'est vraiment agréable et utile afin de garder votre code plus lisible et des choses comme ça. Alors allez-y et téléchargez ceci. Il est disponible pour Windows. Mac Lennix n'a pas d'importance quel système d'exploitation vous exécutez. C' est totalement gratuit, mais si vous n'aimez pas le texte sublime pour une raison quelconque, et c'est l'un des plus populaires. Mais une autre alternative est pas pad plus plus dans Google. Cela, et vous remarquerez que la grande différence est que c'est une sorte de fond blanc où sublime était noir et vous pourriez changer la couleur de ces deux. Mais par défaut, le sublime vient noir. Pas de pad plus plus vient blanc. Je vais voir Adam est un autre éditeur de texte populaire. Vim ont un peu plus compliqué. Il y a un éditeur de code de studio visuel si votre personne Microsoft, je ne suis pas sûr si c'est gratuit ou non. Mais comme je l'ai dit, je vais utiliser un texte sublime pour ce cours. En fait, je pourrais le tirer ici, et c'est juste un éditeur de texte de base. Vous pouvez écrire des trucs et vous pouvez voir déjà qu'il commence à changer de couleur, ce qui est cool. L' une des bonnes choses à ce sujet est que si vous allez voir et ensuite la syntaxe, vous pouvez voir que vous pouvez l'utiliser pour n'importe quel langage de programmation que vous aimez. ce moment, nous avons sélectionné HTML. Je n'avais même pas besoin de faire ça. Il a juste deviné que je faisais du HTML. Donc c'est cool. Je vois les rails, python, PHP, perle ont un script, ce que vous voulez. Vous pouvez le faire dans un texte sublime. Donc, vérifiez définitivement ça. Tu vas devoir utiliser un éditeur de texte. Pourrait aussi bien utiliser celui-ci trié pour suivre avec moi. C' est donc plus facile à suivre. Donc je pense que c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons sauter à droite et commencer à apprendre html 3. HTML Tout le que tout le monde est HTML 2 qu'est-il HTML: OK dans cette vidéo. Nous allons parler un peu de HTML avant d'entrer et de commencer à écrire n'importe lequel de ça. Et je veux en parler parce qu'il est important de comprendre exactement ce que c'est. HTML signifie un langage de balisage hypertexte, et la plupart des gens le considèrent comme un langage de programmation, un langage de programmation informatique. Mais techniquement, ce n'est pas le cas. Ce n'est pas vraiment comme PHP ou Pearl ou Ruby ou Python ou Java script. Ce n'est pas un langage de programmation, mais il agit beaucoup comme un langage de programmation. Donc on a tendance à être comme, OK, oui, c' est un langage de programmation, mais techniquement ce n'est pas le cas. C' est une marque de langage, et, ah, cette différence est importante. Fondamentalement, HTML est juste une série de balises, de balises d'ouverture et de balises de fermeture. Et puis quoi que ce soit entre les deux, l'étiquette qui est marquée obtient quelque chose qui y est fait. Vous savez, si vous voulez faire quelque chose ah, titre, titre, vous pouvez voir ici nous avons une étiquette de titre sur la balise ouverte et une balise fermée se ferme désignée par une petite barre oblique, puis à l'intérieur d'ici, c'est ce qui est Votre titre, vous savez, Si vous voulez faire un titre, nous le faisons. H une étiquette. Tout ce qui est à l'intérieur de cette balise est le titre. Donc, c'est tout ce que HTML est vraiment. Il s'agit juste d'une série de balises imbriquées d'ouverture et de clôture des taxes. Maintenant, toutes les balises HTML ne se ferment pas, et nous en parlerons un peu. Mais pour la plupart, ils s'ouvrent et se ferment, et c'est tout ce que c'est. Donc, apprendre le HTML n'est vraiment qu'une question de mémoriser toutes les balises et de les utiliser simplement . Chaque fois que vous voulez faire quelque chose à quelque chose, vous voulez faire du texte gros, vous le mettez dans une grande balise de texte. Vous savez, on parlera de toutes les différentes étiquettes à l'avenir. Je ne veux pas vraiment entrer en quelque sorte dans tout cela pour l'instant, mais HTML alimente absolument tous les sites Web. Il n'existe pas de site Web. Il n'est pas fait en HTML. Toutes les pages Web sont en HTML. Donc, vous allez à n'importe quel site Web que vous voulez et juste un clic droit et cliquez sur cette page de vue source, et vous pouvez voir le HTML réel pour cette page. Tout ce qu'il est juste prêt à voir il n'est pas caché n'est pas secret. Tu sais, ce n'est pas un propriétaire où ils ne veulent pas que tu le voies. C' est très évident. Et c'est juste là maintenant, d'accord, accord, hors de la batte, surtout avant que tu aies suivi ce cours. Ce n'est pas tout cela va vraiment avoir un sens. Mais au fur et à mesure que nous allons de l'avant, vous commencerez à comprendre toutes ces différentes balises sont comment elles sont utilisées et, ah, c'est en fait très, très facile et vous devriez le ramasser très rapidement. Comme je l'ai dit, c'est juste une question de mémoriser tous les tags. Et il n'y a pas beaucoup d'étiquettes, donc on peut l'assommer assez rapidement. Maintenant, il y a essentiellement deux parties à un site Web. Il y a le HTML. Et puis il y a le CSS, et le CSS est ce qui rend les choses assez correctes. CSS signifie feuilles de style en cascade, donc il a du style. HTML est comme le cadre, les os nus, vous savez, le squelette de la page Web, puis CSS le rend comme je l'ai dit, rend joli. Ajoute de la couleur, ajoute de la forme, des choses comme ça. Alors excusez-moi, Ce n'est pas un cours en CSS. Eh bien, une sorte de toucher ici et là, parce que vous ne pouvez vraiment pas faire h démo sans CSS. Vraiment ? mais juste en apprenant HTML, vous n'avez même pas besoin de le regarder. Il CSS. Donc, nous ne allons pas passer beaucoup de temps, le cas échéant, à parler de CSS. Beaucoup de fois, les gens n'apprennent pas le CSS. Ils utilisent simplement le framework CSS comme Bootstrap. Et plus tard, nous allons probablement regarder bootstrap très rapidement et vous montrer comment le faire. Donc c'est un peu amusant. Et nous allons regarder cela vers la fin du cours si rapidement avant de passer à autre chose. Vous savez, j'ai mentionné que HTML est juste une question d'ouverture et de fermeture des balises, non ? Chaque balise est appelée un élément dans HTML Element et chaque élément peut avoir des attributs, attributs, air juste fondamentalement des informations mawr dans le côté de la balise, et nous n'avons pas vraiment d'attributs ici encore. Donc nous regardons ces, vous savez, quelques vidéos à partir de maintenant, une fois que nous avons vraiment plongé et commencé à apprendre ça. Mais c'est à peu près, um, um, les éléments et les attributs droit, une balise et ont beaucoup d'attributs. Il y a plusieurs sortes de communes que vous voyez souvent. On parlera de ça, et la seule autre chose, c'est juste que les balises s'ouvrent et se ferment avec cette petite barre oblique que vous pourriez voir, comme, juste ici, ici et à droite ici. Euh, juste là et juste là. Vous pouvez voir ici est une balise, et il a une balise à l'intérieur de celui-ci. J' ai mentionné plus tôt que html est imbriqué. Ceci est une balise imbriquée à l'intérieur d'une balise qui est elle-même imbriquée à l'intérieur de cette balise, et vous pouvez voir généralement nous dans Dent pour montrer que l'imbrication maintenant, html n'est pas vraiment sensible à la casse. Donc je veux dire, tu peux le faire comme ça, non ? Oups. HTML ne connaît pas la différence. C' est juste un valide est ce que nous avions avant. Mais cette façon est juste beaucoup plus facile à lire pour les humains stupides. Droit ? C' est donc la convention que nous utilisons habituellement. Donc, et c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons sauter et commencer à apprendre les différents tags et devrait être amusant 4. HTML All Structure de la page HTML: OK dans cette vidéo. Je veux parler de la structure d'une page HTML, et nous avons déjà regardé cela, mais je veux en parler un peu plus en détail. Mais avant de le faire, je veux parler de la façon de voir cette chose. Donc on a des trucs ici et on parlera de ce que c'est dans une minute. Mais pour utiliser cela pour l'enregistrer et l'afficher dans un navigateur Web, nous venons ici pour fichier et ensuite enregistrer comme et je suis juste en train d'enregistrer cela sur mon bureau, vous pouvez l'enregistrer absolument n'importe où. On ne va pas pousser ce code sur un serveur Web du tout. Dans ce cours. On va juste apprendre le HTML et on va tout faire localement sur notre ordinateur. Alors enregistrez cela où vous voulez, Mais comme je l'ai dit, je vais l'enregistrer sur le bureau et juste l'enregistrer comme page point html et vous pourriez voir que je n'ai pas à le faire parce que, ah, html est déjà sélectionné. Il suffit de voir comme ça, et toutes les pages HTML se terminent par point html. C' est juste la convention, donc c'est ce qui les désigne comme des pages HTML afin que nous puissions minimiser cela ici. Et puis vous pouvez voir ici, il est paginé à HTML petite icône de chrome droit sur mon bureau. Et pour afficher cela dans un navigateur Web. Je viens de faire glisser cela plus et faire cela et cliquez, entrez et boom ici il ISS afin que vous puissiez également simplement taper dans le fichier. Voir les utilisateurs flatlining page de bureau HTML. Cette planète plate est le nom de mon ordinateur, donc les années seront différentes. Je ne pense pas que le monde était plat. Je trouve juste que c'est marrant que certaines personnes fassent encore ça. C' est pour ça que j'ai nommé mon ordinateur. J' ai un étrange sens de l'humour, donc ah, de toute façon, toute façon, donc il a reçu. C' est un titre, et c'est un paragraphe qui correspond à ce genre de choses ici, et nous en parlerons plus en détail dans une seconde. Donc, c'est comment enregistrer une page HTML. Comment afficher la vue dans un navigateur Web que j'utilise. Chrome n'a pas d'importance le navigateur Web que vous utilisez. Firefox Safari, n'importe quel navigateur Web du tout. C' est tout de même. Donc, pour le reste de cette vidéo, je veux parler de la structure d'une page web, et toutes les pages Web ont la même structure. Ils commencent par le type DOC et cela dit juste au fichier, Hey, c'est HTML Et en fait, vous pouvez vous débarrasser de ce fichier de cette ligne. Vous n'avez pas à le faire, mais si vous voulez une sorte de code standard, vous devriez le mettre là. Ensuite, nous avons une balise HTML, et toutes les pages Web sont essentiellement des balises HTML, et vous voyez tout le reste est imbriqué dans cette balise HTML. En fait, si je clique dessus, vous pouvez voir cette balise HTML de fermeture met en évidence ici. Donc tout à l'intérieur d'ici est une démo d'âge. Ensuite, nous avons cette étiquette tête et la balise head n'est pas visible sur une page Web. Il contient des informations. Um, si vous connaissez le PDG, parfois vous mettrez des tags de PDG dans leurs balises méta. Vous pourriez mettre comme, balises de médias sociaux à graphique ouvert et des choses comme ça. Ils n'apparaissent pas sur la page, mais ils sont utilisés pour des choses comme Oh, Google. Afin de m'excuser de catégoriser vous listez votre site sur Google. Ils sont utilisés pour certains sites de médias sociaux. Vous savez, si vous postez un lien sur Facebook et que la petite image apparaît automatiquement. Vous pouvez le désigner à l'intérieur de votre tag head et, comme dit, il n'apparaît pas sur votre page, mais il est utilisé pour d'autres choses. La principale chose à l'intérieur d'une balise head est cette balise title, et vous pouvez voir ici il dit ma page Web. Si on retourne sur notre site, c'est juste ici. Le haut ici. Vous voyez ça, la barre du navigateur. Ça dit ma page Web ici. C' est le titre du site. Et, euh, c'est important pour ah, spécifiquement pour les chirurgiens comme Google et Bing utiliseront ce genre de liste sur leur moteur de recherche quel est le titre de votre site, et c'est vraiment le seul utilisé pour ceci. Aussi, il apparaît juste ici sur ce bar. Mais si vous êtes comme moi, j'ai généralement 1000 onglets ouverts et vous ne pouvez même pas le lire quand il y a tant d'onglets ouverts. Je pense que beaucoup de gens font ça, donc ce n'est pas une chose super, tu sais, tu sais, importante, mais tu devrais quand même le faire. Alors nous fermons la balise head et ensuite la balise body commence, et c'est probablement la chose la plus importante, tout à l'intérieur de la balise body et vous pouvez voir ici où elle se ferme. Tout à l'intérieur d'ici apparaît sur la page, non ? Donc, dans notre cas, nous avons deux choses. Nous avons cette étiquette H un dans cette balise P et H un signifie cap, et nous parlerons d'autres titres plus, probablement dans la vidéo suivante ou celle qui suit. Et c'est un onglet de paragraphe, et cela désigne simplement le texte comme un paragraphe, et nous en parlerons plus tard aussi. Mais vous pouvez voir qu'il correspond juste à ces deux choses à l'écran. C' est un titre. Ceci est un paragraphe Très cool, Très facile. Hum, et c'est vraiment tout ce qu'il y a. Donc, comme je l'ai dit, toutes les pages Web suivent ce format de base. Maintenant, à l'intérieur de cette balise body, vous pourriez avoir 50 lignes de code 100 lignes de code, 2000 lignes de code, mais tout est à l'intérieur de ce corps et puis finalement, à la fin, nous avons juste fermez nos balises HTML. Alors retournez à n'importe quel type de site Web que vous aimez et affichez la source de la page et vous verrez autour en haut. Nous avons le type de doc. Voilà la tête. Voici une de ces balises méta dont j'ai parlé. Ah, voici d'autres tags dont je n'ai pas parlé. Ce sont des choses CSS. On en parlera plus tard. Quelque chose ici. C' est le lien CSS. C' est là que va CSS. On en parlera plus tard. Comme je l'ai dit , , toutes sortes de choses sur les médias sociaux et voir le corps. Voici enfin la tête de la balise se termine. Donc, à l'intérieur de votre étiquette de tête, vous pouvez avoir beaucoup de choses et la plupart des sites Web le font, et nous verrons cela aller de l'avant. Mais c'est là que commence la balise corporelle. Donc voici tous les trucs de corps pour cette page Web, et ça continue à aller et en marche. Et vous pourriez voir qu'on n'est même pas allé à la moitié de la page, puis en bas. La balise body se ferme dans la balise HTML se ferme. C' est donc le format de base de ah dans la page Web HTML. Et comme je l'ai dit, toutes les pages Web suivent ce format. C' est très standard et assez simple. Donc, vous savez, nous allons utiliser ce genre de modèle comme modèle de démarrage presque toujours et c'est donc cool. Donc c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons sauter et commencer à apprendre des éléments HTML individuels 5. HTML Tout le monde 4 tags d'en-tête: Ok, donc on a mis les bases hors du chemin. Maintenant, c'est juste une question d'apprendre toutes ces balises. Donc on va commencer. Nous avons déjà un couple de sur l'écran, alors commençons par cette première étiquette H un. Comme je l'ai dit tout à l'heure, cela représente un en-tête. Et c'est une sorte de chose très courante, surtout pour, vous savez, comme les sites Web qui sont des blogs. Ils ont toujours un titre du top ou des sites de nouvelles avec un vous savez, une histoire qui a un titre de top. Vous utiliserez souvent ce H un et les balises d'en-tête sont importantes car elles rendent le texte standardisé grand, mais aussi parce que les moteurs de recherche comme Google une importance de signe pour une balise Hone. Vous savez, Google sait que si vous mettez quelque chose dans un H one tag, vous dites, Hey, c'est important. C' est un titre, vous savez, c'est l'en-tête numéro un, l'en-tête le plus important, et il l'utilise en quelque sorte pour catégoriser les sites Web. Donc aussi c'est juste cool visuellement, donc il y a beaucoup de balises d'en-tête de six, en fait, si vous pouviez appeler cet en-tête ou en appeler autant, mais passons par là. Ils sont tous numérotés, non ? Alors allons-y. C' est la tête ou deux et il suffit de copier ceci. Donc, si vous enregistrez ceci et je vais frapper le cul de contrôle sur mon clavier pour enregistrer sa commande s je crois que vous êtes sur un Mac ou vous pouvez aller ici et juste cliquer sur fichier enregistrer à chaque fois. Donc, si je reviens ici, nous voyons que c'est l'en-tête et vous remarquerez qu'il est légèrement plus petit. Droit ? Et c'est la désignation principale ici que chacun est le plus grand. H 2 est légèrement plus petit, H 3, légèrement plus petit jusqu'à H 6. Donc, passons très vite par ici et allons H trois, c'est l'en-tête trois sur chaque quatre. C' est l'en-tête pour et h 5. C' est l'en-tête ou cinq. Il sait que j'ouvre et ferme chacun. H six, c'est l'en-tête six. Et la bonne chose est à propos de sublime. Je viens de mettre le support dans la Ford Slash et il auto automatiquement Kerekes à l' étiquette de fermeture . Il ne le fait pas toujours correctement. Vous devez faire attention, mais normalement il sait lequel vous essayez de fermer, donc et sauvegardez cette tête sur notre page et cliquez sur Recharger et vous pouvez voir ci-dessus tout le chemin vers le bas jusqu'à l'en-tête six. Que se passe-t-il si on essaie de faire un H 7 ? C' est l'en-tête sept. Sauve ça. Reviens. On a juste un texte normal, non ? C' est très semblable à ce texte ici, parce qu'il n'y a pas de balise h sept, donc rien ne se passe vraiment. Dans la plupart des langages de programmation informatique. Si vous faites quelque chose de mal, vous obtenez une grosse erreur en colère sur l'écran ou le programme ne fonctionne tout simplement pas du tout. HTML est très indulgent. Tu sais, on vient d'inventer une étiquette à l'heure sept heures. Il n'existe pas. Et au lieu d'avoir une grosseerreur en colère, erreur en colère, il a juste dit, euh, euh, il a juste un peu ignoré et craché du texte standard à la place. Donc HTML comme je l'ai dit, très indulgent. Et, ah, une des raisons pour lesquelles c'est si facile de travailler avec. Surtout pour les débutants. Vous pouvez faire beaucoup d'erreurs et beaucoup de fois vous en sortir. Donc, ces étiquettes diffusent les étiquettes d'âge et reviennent ici très rapidement et juste une sorte de dire, quelques choses ici En réalité, vous n'utiliserez presque jamais la plupart de ces balises. Vous utiliserez H un toujours vous utiliserez l'âge pour parfois, comme, sous-titres. Vous savez, euh, je peux imaginer un scénario où vous utiliseriez une étiquette H 3, mais tous les quatre ans 586, je fais ça 25 ans. Je ne pense pas avoir utilisé ces étiquettes. C' est bon de savoir qu'ils existent, mais excusez-moi, vous n'allez pas souvent les utiliser. C' est bon de savoir qu'ils existent, mais excusez-moi, Donc c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons regarder la balise de paragraphe. 6. HTML tous 5 Paragraphe et trait de rupture: OK dans cette vidéo, je veux parler de la balise de paragraphe ou de la balise P. Et la balise P a une balise d'ouverture et une balise de fermeture. Et à l'intérieur, il y a juste du texte. Maintenant, vous pouvez mettre des choses sur l'écran par lui-même sans étiquette P, mais vous ne voulez pas le faire. Vous allez toujours vouloir une sorte de blocs de texte enveloppés dans des balises P. Cela aide vraiment à garder les choses organisées et ensemble, et nous verrons pourquoi ici dans une seconde. Mais d'abord revenir à notre page ici, et je viens de passer à ce site lèvres un point com et cela génère un texte factice. Nous devons donc générer du texte ici. Je veux donc un paragraphe comme celui-ci. Et donc je vais vivre. Mettez en surbrillance tout cela et copiez Control seed une copie, ou vous pouvez faire un clic droit et sélectionnez Copier. Et ce n'est qu'un fonds fictif avec lequel on peut jouer pendant qu'on apprend. Donc au lieu de cela, je vais contrôler V pour coller, ou vous pouvez cliquer avec le bouton droit et coller, et je vais juste coller dans tout ce texte. Droit ? Donc, si nous sauvegardons cette tête sur notre page et cliquez sur Recharger. On demande si on voulait traduire trans. Non. Donc, nous avons tout ce texte factice et il s'étend jusqu'à la fin de notre page. Maintenant, avec CSS, nous pourrions styler ceci et nous pourrions dire, OK, mettre ceci dans un bloc. C' est seulement, tu sais ça ou quoi que ce soit. On ne va pas regarder ça maintenant, mais remarquez comment tout va ensemble et ce n'est peut-être pas évident. Mais si je viens ici et que je colle juste ce truc sans étiquette P et que je l'enregistre, voir à quoi cela ressemble ? Il semble fondamentalement cette année, Mais prenons les balises P offrent ici et voyons la différence. Ok, donc ici nous avons juste à ces paragraphes sans balises P. Et si nous rechargeons ça maintenant, tout est secoué ensemble, vous voyez ? Et nous ne voulons pas cela parce que nous avons clairement deux paragraphes. Nous voulons qu'ils soient séparés. Donc on veut les envelopper toujours dans les étiquettes que j'invente. Et si j'étais vraiment, vraiment sérieux, je verrais probablement dans Dent No, non, revenir. Ça ne me laisse pas endetter pour une raison quelconque. Quoi qu' il en soit, on y va. Oui. Indenté pour le rendre un peu plus facile à lire. Um, tu pourrais faire ça. Alors, revenez ici et rechargez. Et maintenant bonjour. Cette traduction. Maintenant, nous avons encore deux paragraphes. Donc très important de séparer les différents blocs de texte. Et c'est important parce que html ne comprend pas vraiment le formatage. Droit ? Pour qu'on puisse aller bonjour de leur propre chef. Une ligne différente là-bas. Je m'appelle John Elder, ça. Donc, ce truc est partout. Notre éditeur de texte. Si nous sauvegardons cela et revenons ici et appuyez sur reload, ça met tout en une seule ligne. HTML fait cela. Maintenant. Ce sont des balises que nous pouvons remplacer, et nous en parlerons bientôt. Mais par défaut, même si vous enveloppez ces choses dans une balise p et enregistrez cela, cela ne change pas. Il met toujours tout sur une ligne s alors gardez cela à l'esprit lorsque vous écrivez du code html et se débarrasser de cela bien, nous allons enregistrer cela pour plus tard. Um, la façon la plus populaire de rompre les choses. Mais tu ne veux pas toujours faire ça. On en parlera un peu plus tard. Mais sinon secouez cela très rapidement. Donc si on dit ça, on sait ce qui va se passer. On va les froisser ensemble et on ne veut pas ça. Donc, une chose que nous pouvons faire est d'utiliser un saut de ligne et le saut de ligne est juste être comme ceci maintenant sauts de ligne d'une de ces balises qui n'ont pas d'ouverture et de balise de fermeture. Comme je l'ai dit, la plupart des balises ont une ouverture et une fermeture, mais il y a une poignée qui sont juste une balise et c'est l'un d'entre eux, et il est désigné par cette barre oblique à l'intérieur de la balise d'ouverture. Donc, c'est essentiellement ah Kong Canton ation de l'ouverture et de la balise de fermeture dans une balise en faisant ce raccourci avec la barre oblique avant juste là. Vous savez, quand vous avez une balise ouverte normale et une balise fermée, vous la fermez avec cette barre oblique. C' est ce qu'on fait ici de toute façon, même si un saut de ligne fait ce qu'il dit. Ça fait un saut de ligne. Donc ici, vous pouvez en quelque sorte dire parce que ce n'est pas tout un paragraphe, donc c'est le 1er 1 et c'est le 2ème 1 Il est pris que c'était le 2ème 1 a commencé ici , mais il est descendu maintenant dans cette ligne suivante. C' est ce que fait la balise de saut de ligne, et vous pouvez utiliser plus d'un droit auquel nous pouvons faire si nous voulons un peu d'espace entre maintenant. Cela fonctionne et cela semble très similaire à la balise P, mais c'est une sorte de meilleures pratiques de ne pas le faire comme ça, mais d'envelopper tout dans une balise P. Alors gardez ça en quelque sorte à l'esprit. Donc c'est le paragraphe qui est, euh, saut de ligne dans la prochaine vidéo. Je pense qu'on va regarder la pré-étiquette. 7. HTML TOUS ONT Pre: OK dans cette vidéo, je veux parler de la pré-étiquette. Et dans la dernière vidéo, on dirige tous ces gobbledygook ici, et on l'a formaté ici. Mais ce formatage ne s'est pas traduit sur la page. Il a tout mis sur une seule ligne. je Commejel'ai dit, on peut remplacer ça. Et nous pouvons le faire avec la pré-étiquette. Donc, pour faire ça. Tout d'abord, nous allons juste nous débarrasser de tout ce texte maladroit ici. Et au lieu d'envelopper cela dans une étiquette p, nous voulons l'envelopper dans une étiquette pré, accord ? Et la pré-étiquette a une ouverture et une fermeture, donc on la ferme comme ça, et on y va. Donc, à l'intérieur de la balise pré, il maintient tout ce formatage le mieux possible. Donc maintenant, si nous revenons ici, nous voyons ça. Bonjour, là. Mon nom est John Elder, et c'est en quelque sorte dans le même format général et farfelu que nous avons mis dans l'éditeur de texte. Maintenant, vous n'allez pas souvent faire quelque chose comme ça parce que c'est un peu bizarre, mais il y a des utilisations pour le pré-tag, non ? Hum, hors de main, je peux penser à une poésie, par exemple. Si vous voulez mettre un poème sur votre site et que vous connaissez chaque ligne que vous vouliez sur une ligne séparée , alors vous savez que nous pourrions y aller. Nous sommes les créateurs de musique. Nous sommes les rêveurs de rêves. Poème stupide, je sais, se demandant par seul voir les briseurs et assis par desolé, base-ball desolé eso. Voyons peut-être. Ok, donc si nous gardons ça et revenons ici, qui nous obtenons tout, chaque ligne est sur sa propre ligne et vous remarquez que le texte est un peu différent, non ? C' est, vous savez, un peu plus petit. Et c'est une sorte de ce que fait la pré-étiquette maintenant. Nous pourrions également prendre tout cela, passe-temps et le coller à nouveau. Mais au lieu de la balise pré, nous pourrions utiliser la balise P. Si on garde ça, je pense qu'on sait ce qui va se passer. Tout va être sur une seule ligne. Ce n'est pas bon. Mais tu pourrais, tu sais, faire quelque chose comme, hum, frapper un saut de ligne sur chacune à la fin de chaque ligne, non ? Ça mettra chaque ligne sur sa propre ligne. Et ce genre de travail. Mais remarquez la différence dans la taxe. C' est une sorte de texte normal. Hum, et c'est, vous savez, un texte légèrement plus petit, bizarre ou regardant. Maintenant, vous pouvez remplacer cela. Cette taille de texte bizarre avec CSS. Comme dit, nous ne allons pas entrer dans CSS et son cours beaucoup du tout. Mais c'est comme ça que tu ferais ça. Donc c'est le pré-tag. Um, assez simple. Pas une balise très courante. Tu ne vas pas l'utiliser si souvent, mais il a ses usages de temps en temps. Dans la prochaine vidéo, on va regarder la citation. 8. HTML All 7 BlockQuote: D' accord. Cette vidéo que je veux parler de citations et de citations étaient très courantes, en particulier pour, comme,les comme, sites de nouvelles et les articles et bloquer les messages. Vous citez souvent des choses. Vous voulez que ces citations soient autour de votre citation. Et vous pourriez le faire avec quelque chose appelé la balise de citation de bloc. Et allons bloquer la citation. Peut-être ne voulons-nous pas y mettre fin. Voilà, tu y vas. Euh, d'accord. Donc j'aime les autres citations. Il a une étiquette ouverte et fermée. Alors gardons ceci et jetons un coup d'oeil et voyons à quoi ça ressemble ici et encore. Tout se passe sur un seul écran. Ils sont tous sur une, euh, ligne ici. On ne veut pas ça pour pouvoir nicher à l'intérieur d'un pâté de maisons. Citer notre preach ag. Très bien, et pas taper. Maintenant, quand vous nichez, vous voulez fermer la chose la plus proche. Donc, tu sais, on l'a ouvert et on l'a fermé. Tu ne veux pas vraiment faire quelque chose comme ça, hein ? droite. C' est faux. Ou même c'est faux, n' est-ce pas ? Cela fonctionnera probablement toujours. On y va. Mais vous voulez fermer la chose la plus proche. Donc, euh, la fin de ceci la balise la plus proche est la prétaxe. On le ferme. La suivante est la citation de bloc. Donc nous fermons ça. Donc si tu dis ça et retourne ici, boum, on a la même chose. Maintenant, il n'y a pas de guillemets, guillemets réels autour de cette chose. Mais c'est juste parce que nous n'avons pas désigné de guillemets dans le CSS. Et tu ferais ça ? J' ai dit que ça avait commencé. Ce n'est pas un cours en CSS, donc nous n'allons pas en parler. Donc c'est la citation de bloc. Maintenant, il y a d'autres façons de citer des choses. Hum, on pourrait y aller. La devise de Kuta me dot com est. Et si vous avez juste une petite citation, vous pouvez l'utiliser. Juste la balise de queue. Euh, apprenez à coder chez Kota me dot com. D' accord. Pour que tu puisses faire quelque chose comme ça. Et les guillemets apparaissent en fait pour ce petit. Donc c'est un peu cool, et vous remarquerez que ça met tout sur une ligne, qui est ce que nous voulons dans ce cas particulier , donc ces enregistrements marquent ces citations d'air, je dois dire, et noir citation et le petit Qué ou quoi ? Vous voulez regarder leur truc 01 je pourrais dire que vous pouvez mettre une citation ici. C' est un attribut, est-ce pas ? Nous parlons des attributs très brièvement plus tôt sur le four intérieur, élément html out. Vous pouvez avoir des attributs. Et l'un des attributs est les attributs de citation. Donc, tu sais, on pourrait faire quelque chose comme Arthur. Oh, Sean dans la mer, j'épelle ça, mais certains comme ça ou souvent tu verras, euh, genre, ici, on pourrait y aller. Le site est égal à, um, http ou avant Kotomi dot com. droite. Donc nous gardons ça, revenons ici et frappons. Recharger. Souvent avec des attributs, vous ne pouvez pas vraiment les voir. Toi, il n'y a rien. Tu sais, même si on survolait la souris ici. Little Citation box ne s'affiche pas ou quoi que ce soit, mais c'est bon pour, genre, moteurs de recherche. Si Google scanne cette chose lorsque Google scanne un site Web, ils regardent la source de la page et ils prennent toutes ces informations. Et, euh, donc ils pourraient en faire un petit quelque chose. Si tu veux mettre Citation , , c'est comme ça que ça marche. Donc, dans la prochaine vidéo, nous allons commencer à regarder les liens 9. HTML Tout le monde de HTML 8 liens: OK dans cette vidéo. Je veux parler de liens. Et les liens sont une partie importante de n'importe quel site Web. Si nous revenons ici, et revenons à, disons que les liens de communication à points Kotomi sont comme ces choses ici, non ? Vous cliquez sur un lien, va à une autre page, ou il va à un site Web externe, ces liens aériens et, vous savez, les liens sont partout en html. Euh, juste, tu sais, aussi commun que tu peux récupérer notre page ici. Bon, alors comment on va ? Ces liens sont super faciles. Nous venons d'utiliser la balise A et les liens que la balise A a une barre oblique avant de fermeture a Maintenant, à l'intérieur, nous avons besoin d'un attribut. Et les attributs de lien est h r e f ne savent pas vraiment pourquoi ce n'est pas h r e f signifie ref . Um, ouais, je n'ai aucune idée de ce que ça signifie, mais à l'intérieur, tu mets là où tu veux que ce truc pointe. Donc, si vous voulez un pointé vers un site Web externe, nous pourrions aller http ou deux-points pour slash ford slash um Kotomi dot com, par exemple. Maintenant, à l'intérieur, voici où va ton texte de lien, donc on pourrait juste taper kodori dot com ou juste me couvrir. Droit ? Donc c'est ce qui va apparaître sur la page web. Donc si vous sauvegardez ça, revenez ici et rechargez, on me voit enrobé. Si on clique dessus, ça va à Kotomi. Très cool. Maintenant, vous pouvez également faire des liens internes si vous avez votre propre site Web. Donc, par exemple, nous avons Nous sommes sur page point html. On pourrait avoir, vous savez, page deux points HTM. Oh, c'est parfaitement bien dans notre cas, nous n'avons pas de page deux, donc si nous cliquons dessus, nous obtenons un fichier introuvable. Mais si nous avions une page à elle, que la page va faire correctement ? Donc très cool ? Il y a d'autres attributs ou des liens. Um, vous pourriez mettre en fait, nous allons reprendre ça, ils vont. Un autre attribut est cible. Et essayons de nouveau. Je pense que c'est ce que c'est. Ça fait un moment que je n'ai pas fait un oui. Tu vois, un nouvel onglet apparaît, non ? Donc, si vous voulez que votre lien s'ouvre dans un nouvel onglet du navigateur Web, vous utilisez simplement ces attributs qui est cible est égal à nouveau. Plutôt cool. Maintenant, à l'intérieur d'un Ici, nous avons du texte, mais vous pouvez également évidemment lié à des images. Débarrassons-nous de cette cible. Sauvegardez ça. Reviens et frappe. Recharger. Accédez à ce site, par exemple. Ici. droite. C' est un logo. Si je clique dessus, il va sur le site Web. Um, cette image juste ici. Si je clique dessus, il va à cette page web. On n'a pas encore parlé d'images. On en parlera dans la prochaine vidéo, mais la même chose. Vous avez juste mis votre étiquette d'image juste ici. Rapide dans une balise A et il devient lien Herbal. Il est cliquable. En gros. Donc c'est tout ce qu'il y a aux liens. Très simple. Rappelez-vous que la balise A H R E f est les attributs de lien. Personne ne se souvient de ce que h r e f signifie, mais c'est comme ça que vous faites un lien. Dans la vidéo suivante, nous allons regarder des images 10. HTML Tout le monde 9 images: OK dans cette vidéo, je veux parler d'images et d'images ou super simple. Nous utilisons juste une balise image et la balise image est I I I I am G S R C. Maintenant, les balises image sont une autre de ces balises qui n'ont pas de balise de fermeture. Et d'habitude, quand ça arrive, on le fait. On n'a pas à faire ça. Tu peux. C' est valide, html si vous voulez, mais vous n'avez pas à le faire. Donc, l'élément HTML est I m G. Ceci est la balise image. A l'intérieur de ça. Nous avons un attribut appelé SRC et SST. SRC représente la source. Donc tu veux pointer ça aussi, quelle que soit la source de tes images. J' ai donc cette photo de mon chien Aspen sur mon bureau. Et comme il est dans le même répertoire, nous pouvons simplement taper son nom. C' est un fichier PNG, et c'est tout. Si on avait ça dans un répertoire spécial appelé Images, on pourrait faire quelque chose comme ça, non ? Si cela est assis sur 1/3 sites Web de parti quelque part comme un cdn d'une sorte de gestion de diffusion de contenu A à B s objectifs, j'ai besoin d'un B s ou Cloudflare ou quelque chose comme ça, Vous pouvez aller, vous savez, Kotomi point com barre oblique images barre oblique point tremble PNG. D' accord, donc Mais comme je l'ai dit, on fait ça localement sur notre ordinateur, et ce fichier est juste assis sur mon bureau pour qu'on puisse juste enregistrer ça et revenir sur notre page et cliquer, Recharger et boum. Voici l'image. Maintenant, c'est une image gigantesque, non ? C' est gentil ou même difficile de le voir même si on fait défiler. C' est de l'aspirine. C' est un bébé. Husky, bébé, elle a, je ne sais pas, 18 mois. Peut-être sur cette photo, quelque chose comme ça. C' est un ouragan, alors c' est cool, mais c'est inutile, non ? C' est gigantesque. , Normalement, vous pouvez éditer l'image et une sorte de, vous savez, boutique photo ou gimp ou quelque chose comme ça et la rendre plus petite. Ou vous pouvez utiliser un autre attribut, qui est la hauteur dans le avec. Donc, nous allons la hauteur égale et avec égale. Et on pourrait juste, tu sais, inventer quelque chose pour qu'on puisse aller, hum, 500 par, um, 700. Je ne sais pas. Voyez à quoi cela ressemble sauver cela, et cela semble un peu mieux, mais évidemment il apparaît sur l'écran. Mais le rapport d'aspect peut ne pas être correct pour cette image, donc nous pourrions obtenir des distorsions. Et ce que je veux dire par là, c'est, exemple, au lieu de 700 Et si je choisis ah 900 ? Eh bien, il l'a fait automatiquement. Pour nous. C' est le dessus. Mais une façon de s'assurer que vous obtenez le bon rapport d'aspect à chaque fois est de simplement utiliser l'un de ceux-ci. Donc, si nous utilisons juste avec de 900, cela gardera le rapport d'aspect original de l'image intact . Si vous ne savez pas quels sont les problèmes d'aspect, c'est la dimension réelle. La chose est à l'origine qu'il gardera ceux intacts et le fera paraître bien. Donc c'est cool. Encore une chose sur les images. Il y a un autre attribut, et c'est tout le texte A L T. Et c'est juste Eh bien, nous allons juste jouer avec ça. Allons-y. Dis bonjour à Aspen. Sauvegardez ceci ici et appuyez sur recharger. Et comme la plupart des attributs, rien attributs, n'est vraiment visible. Toutes les balises ne s'affichent en aucune façon de forme ou de forme. Mais c'est bon pour le moteur de recherche des moteurs de recherche, en particulier Google. J' adore tous les tags. Si vous voulez qu'une petite chose apparaisse, vous pouvez utiliser la balise title. Sauvegardez ceci et appuyez sur. Recharger. Maintenant, si on passe la souris là-bas, on a une petite boîte qui apparaît qui dit, Dis bonjour à Aspen. Donc c'est plutôt cool. Donc ce sont des images ? Comme je l'ai dit tout à l'heure, on peut en faire un lien pour qu'on puisse faire un horrible égal. Comme je l'ai dit tout à l'heure, Http. Kotomi dot com et ensuite quelque chose comme ça, accord. Si nous disons cela ici dans hit reload Non, vous voyez, nous cliquons dessus. Mouvement va à Kotomi dot com. Il est donc facile de faire des liens à partir d'images ou de faire des images lien à base de plantes. Si tu veux le dire comme ça, euh, plutôt cool. Donc ces images aériennes, ces images qui relient l'air. Dans la vidéo suivante, nous allons commencer à regarder les tables 11. HTML Tout le monde 10 listes de HTML: OK dans cette vidéo. Je veux parler des listes maintenant. On va parler de tables dans cette vidéo, mais je pense que je vais garder ça pour la prochaine. La vidéo est un peu plus avancée, et avant de le faire, je veux diapositive et lister. Donc les listes sont super importantes, beaucoup plus importantes que vous ne le pensez. Et fondamentalement, qu'est-ce qu'une liste de liste est juste une liste à puces, est-ce pas ? Il y a donc principalement deux types de liste. Il y a des listes ordonnées et de nouvelles listes ordonnées, et une liste A Norden est comme un point à côté de chaque article. C' est juste des points de balle là-bas, inhabituel. Juste une liste. Une liste ordonnée est, vous savez, comme 12345 Ils sont en ordre. Alors comment on fait ces choses ? Eh bien, allons juste entrer ici et créer, hum, ma liste inhabituelle et disons qu'on n'a rien à mettre ici, donc pour créer une liste, on commence avec toi. L et cela signifie la liste ordonnée Anno, et nous pouvons la fermer avec la balise de fermeture maintenant, à l'intérieur ici, chaque élément de liste est un L. I tag droit l I et fondamentalement chaque ligne que vous voulez devient un objet allié. Donc je vais juste copier ça. Et 2345 Donc c'est, hum, euh, des tâches pour aujourd'hui. On doit promener le chien, laver la moto. C' est très sale en ce moment. Tu vis toujours dans la poussière du désert . Voyons voir. Lisez un livre, voyez ce que nous avons besoin d'autre pour faire la lessive et ensuite acheter des courses. Ok, donc si nous gardons cette tête ici et que nous cliquons sur recharger, nous obtenons ce joli petit sur la liste ordonnée et vous remarquerez qu'il y a des petits points à balles, chacun très cool et très utile. Maintenant tu penses que quoi ? Eh bien, dans chaque démo, vous utiliserez des balles pour beaucoup de choses différentes. Et c'est parce que lorsque vous ajoutez deux listes CSS, vous pouvez faire toutes sortes de choses bizarres. Beaucoup de fois, quand on voit comme un bar au sommet du site web, tu sais, comme, comme, euh, retourner sur mon site, ce bar de haut en haut d'ici. Je ne me souviens pas, mais je crois que cela est créé avec une nouvelle liste de commandes, puis avec CSS. Nous venons de dire au navigateur d'ignorer le petit point Vous pouvez le rendre invisible type de chose, un ensemble de très commun pour des choses comme ça et juste un tas d'autres choses. Comme vous commencez à devenir plus avancé avec le développement Web, vous juste vous allez utiliser des listes. Ah, beaucoup, c'est bizarre parce que tu sais qui utilise des listes, mais, euh, c'est vrai. Et comme je l'ai dit, avec CSS affaiblir le style, ces points, nous pourrions faire disparaître complètement les points. On peut les changer aussi. Des petits diamants. On peut les changer pour tout ce qu'on veut. Vraiment ? Et ah, c'est plutôt cool. Donc ce sont des listes de Norden. Faisons une liste ordonnée. Donc ma liste ordonnée. Et pour ce faire, nous venons de nous changer d'un U L à un ol o signifie liste ordonnée, non ? Super simple. Donc nous sauvegardons cela, revenons ici et cliquez sur Recharger quand nous verrons 12345 et vous remarquerez que le navigateur a mis ces chiffres en lui-même, non ? On n'avait pas besoin, tu sais, d' en mettre un prochain. Chaque 123, etcetera. Um, ça a tout fait pour nous. Et vous remarquerez aussi, euh, il y a, vous savez, un peu de formatage ici. Droit. Voici où se trouve notre texte ici. Tous ces trucs ont un peu été mis en retrait. Et c'est ce que dans ou un ordre de liste que Doran a commandé fera. Donc c'est plutôt cool maintenant. Comme je l'ai dit, vous pouvez changer toutes sortes de choses à ce sujet avec CSS. On n'y va pas, mais vous pouvez faire un raccourci ici en utilisant les attributs de type. On n'y va pas, Donc si nous allons sur la liste ordonnée, euh, type est égal à un capital. Un costume qui ressemble à un boom. Maintenant, il tourne de 12345 Je suis allé à un B C d e. droite. Donc c'est un peu intéressant si on passe en minuscule A, on obtient des lettres minuscules qui vont aller. Hum, on peut y aller. Voyons voir. Ici, tu y vas. Tapez un. Ils reviendraient aux chiffres. C' est une sorte de valeur par défaut. , On peut dio,c'est amusant. Affaiblir faire le capital. J' ai des chiffres romains. Tu te souviens ? Chiffres romains de l'école primaire ? I, I v et V um également affaiblir faire minuscule. Je vois ça ici et j'appuie sur Reload. On a des chiffres romains en minuscules. Très cool. Maintenant, nous pouvons aussi faire l'imbrication de ces choses. Alors débarrassons-nous de cela et revenons à une liste inchangée. Et donc nous gardons ce très vite et regardez-le, obtenons notre liste régulièrement honorée. Mais disons que nous voulons ajouter un petit quelque chose. Alors créons une autre liste à l'intérieur d'ici pour acheter des courses. Et juste pour te montrer à quoi ça ressemble, je vais copier toute cette ligne et la mettre en quelque sorte ici. Donc c'est à l'intérieur de notre liste. Et pour ce faire, nous aimons juste ça et à l'intérieur de ce l j'affaiblit, juste créer une toute autre liste. Créons une liste ordonnée. Et à l'intérieur de ça, on veut, hum, hamburger. On veut, euh, du fromage. On veut des petits pains. Et on veut que je ne sais pas, orange utilise du jus d'orange bizarre avec des hamburgers et ensuite on peut fermer ça. Donc, vous voyez, ceci est imbriqué à l'intérieur de cette liste nordique. Alors, à quoi ça ressemble ? Moon, on a 1234 à l'intérieur d'ici. Vous savez, dans cet article de liste si très, très cool et ah, super utile. Donc je pense que c'est tout pour les listes. Dans la vidéo suivante, nous allons commencer à regarder les tables 12. HTML All 11 tables: OK dans cette vidéo, je veux parler des tables et des tables sont en quelque sorte un sujet HTML plus avancé. Mais il y a quelque chose que tu utiliseras, probablement pour toujours. Um, ils sont juste un peu toujours utilisés dans HTM. Oh, et ici j'ai créé une table très basique. Droit. Donc, nous avons une table est fondamentalement juste des lignes et des colonnes. Donc, c'est une rangée. C' est nos lèvres. C' est une rangée. C' est une rangée, tu sais que la rose va de gauche à droite. Les colonnes montent et descendent. Tellement la couleur préférée. Il s'agit d'une adresse e-mail de colonne. Il s'agit d'un nom de colonne. C' est une colonne. Donc, quand vous pensez à des tables, vous ne pensez qu'à des lignes et des colonnes. Alors, comment construit-on ce truc ? Eh bien, ce n'est pas si difficile. Un peu délicat, mais pas trop mal une table commence. J' ai déjà écrit le code, donc nous allons juste marcher à travers ça. Maintenant, une table commence avec une balise de table et vous pouvez voir la balise de table se ferme. Et à l'intérieur d'ici, je lui ai donné un style avec un avec 50%. Maintenant, techniquement, c'est probablement un truc de type CSS. CSS est en cascade des feuilles de style. Je l'ai référencé plusieurs fois tout au long de ce cours, Um mais pour ce cas, j'ai juste eu un peu de CSS. On parlera de ça. Probablement le prochain couple de vidéos, mais je l'ai donné un avec 50%. Donc, si nous revenons ici, vous pouvez voir qu'il va à mi-chemin de l'écran ici. C' est 50%. Si je laissais ça, ça s'étendrait tout le long de l'écran. Et je n'ai pas autant de données ici, autant de colonnes, donc ça aurait l'air bizarre. Alors ensuite, Comme je l'ai dit, les tables ont des lignes et des colonnes. Et pour créer une ligne, utilisez une balise de ligne de table, une balise TR juste ici pour créer une colonne que vous créez, ah, balise T D créée, qui signifie données de table. Maintenant, Tedy Tag va à l'intérieur d'une étiquette TR, et on en parlera dans une seconde. Alors passons par ici. Regardons ce premier morceau ici. J' ai créé une ligne de table de lignes et j'ai défini une ligne à gauche. Hum, si on enlève ça, on l'enregistre et on touche à recharger, on pourrait voir tous ces en-têtes s'effondre, donc je veux qu'ils s'alignent à gauche. Donc je l'ai juste donné dans la ligne de gauche et vous pouvez faire une ligne à gauche. Tu peux faire une ligne, non ? Tu pourrais faire un centre de ligne. Je pense que c'est à peu près tout. Alors, sauvegardez ça. Maintenant, nous avons ce que nous avons ces balises e ouvrir et fermer. Et qu'est-ce que c'est ? Eh bien, ça signifie tête de table et c'est exactement ce que ça sonne. C' est ce genre de tête ou de rangée. Vous pouvez voir les couleurs audacieuses, légèrement différentes, et fondamentalement, ce juste genre de noms, les différentes colonnes. Tu n'as pas besoin de ça. Tu pourrais laisser ça éteindre. En fait, si nous faisons cela, nous retirons toute cette section TR et la sauvegardons. Ceci est toujours tout à fait valable. Nous n'avons tout simplement pas les beaux titres de table pour expliquer ce que ces données sont si importantes pour utiliser vos balises th. Et comme je l'ai dit, chaque rangée est à l'intérieur d'une étiquette TR. Toutes les données d'une ligne vont à l'intérieur d'une balise tr. Donc, de l'ouverture TR et de la fermeture tr tout ici est une colonne. Nous avons donc trois colonnes. Alors nous fermons ça. Maintenant, si nous voulons une autre ligne en dessous, nous créons une autre balise TR et vous pouvez voir ouvrir et fermer. Et à l'intérieur de cette étiquette nous voulons. Nous avons besoin de trois colonnes parce que nous avons trois colonnes d'en-tête de table, non ? Donc chacun d'entre eux correspond à un th donc le 1er 1 est le 1er 1 ici. Nom. Le 2ème 1 est le 2ème 1 ici adresse email, et le 3ème 1 est le 3ème 1 Donc ils doivent correspondre, non ? Si,par exemple,nous avons par exemple, créé une autre balise TD et simplement tapé quelque chose et l'enregistrer, vous pouvez voir que tout est jeté hors de coup, est-ce pas ? Parce qu'il n'y a pas de colonne supplémentaire ici, et ça a l'air bizarre. Tout est gratté ensemble. C' est juste bizarre. Donc, vous devez vous assurer que dans chaque t que vous créez a le même nombre de TD et il y a, hum, exceptions à cela et nous en parlerons. Peut-être la prochaine vidéo, je crois. Mais pour la plupart, gardez-les tous cohérents. Donc, sauvegardez ceci Donc, nous avons ce TR tags la rangée de table à l'intérieur, nous avons TV s T D signifie que les données de table sont fondamentalement des colonnes. Et donc nous avons une route, adresse e-mail de John John et la couleur de John Forever. Si nous voulons une autre ligne en dessous de cela, nous devons simplement créer un nouveau ensemble et le remplir avec les mêmes données. Même chose si on veut une autre rangée après ça. Donc, nous avons trois rangées ici et puis ça se termine. Ensuite, nous avons notre étiquette de table de clôture et de jeter un coup d'oeil à ce que nous avons juste cela. Donc c'est vraiment tout ce qu'il y a aux tables. Hum, maintenant, c'est une table très basique. C' est très simple. Il n'y a pas de style. Tu peux. Vous pouvez styliser les tables d'un zillion de façons différentes, et vous voyez probablement directement. Tu sais, bordures de rose rayées, différentes couleurs. Et nous n'allons pas en parler dans cette vidéo ou dans la prochaine vidéo. C' est une chose CSS, mais vous pouvez faire des choses très basiques comme apparaître pour la table. Nous voulons donner à cette frontière une frontière de base. Tu y vas. Border est égal à un maintenant, Comme vous l'avez dit, vous feriez normalement CSS pour cela et vous verrez pourquoi ici en ce moment. Si on sauve ce boom, on aura cette frontière. Mais tu sais, c'est plutôt moche. Et vous pouvez styliser cela un peu avec HTML. Mais je ne vais pas vous montrer comment, parce que c'est une sorte de chose d'identité obsolète. Tu ne feras jamais ça. Vous allez toujours utiliser CSS. Nous ne allons pas vraiment parler de CSS, donc il n'y a pas grand-chose à dire à ce sujet, mais juste une sorte de comprendre que vous pouvez changer les choses dans une table, faire ressembler toutes sortes de façons différentes, et nous pourrait en parler un peu plus tard. Mais pour l'instant, on va le laisser comme ça. Alors, euh, qu'est-ce qu'on peut faire d'autre ? Tout ce dont je veux parler dans cette vidéo dans la prochaine vidéo, nous allons parler de quelques sujets de table légèrement plus avancés Call span et Rose span et, euh, voir de quoi il s'agit. Donc ce sera dans la prochaine vidéo 13. HTML All 12 tables avancées: OK dans cette vidéo, je veux parler de quelques sujets de table plus avancés. Nous avons fait des trucs de table de base dans la dernière vidéo de cette vidéo. Je veux parler de Roe couvrant la durée de l'appel. Donc ici, nous avons juste une sorte de rose basique et des colonnes, non ? Mais vous voudrez peut-être que certains champs s'étendent sur. Par exemple, toutes les colonnes sont toutes les routes. Alors, comment faites-vous ça ? Ce qu'on va regarder dans cette vidéo. Alors revenons ici. Et d'abord, disons que nous voulons un en-tête sur tout le haut de ceci et que nous voulons que le tout s' étende sur les trois de ces colonnes. Donc c'est assez simple. Nous venons juste de revenir ici et nous voulons cela ici la toute première chose. Donc, nous allons créer un nouveau TR ouvrir et fermer la balise et créons un th et nous voulons qu'il couvre trois colonnes. Donc on utilise l'intervalle d'appel et on a dit ça égal à trois et on ferme ça et disons qu'on voulait juste dire, euh, ma table, ça. Alors gardons ça et jetons un coup d'oeil quand on le fait étirer tout le chemin et que vous remarquez qu'il n'y a pas, euh, lignes au milieu ici. Comme pour tous les autres. moment, cemoment, on peut le voir très clairement parce qu'on a encore ce genre de frontière. Donc si je prends ça et sauve ça, ça devient un peu plus difficile à dire. Mais je peux jeter un peu de couleur ici, alors, euh, allons-y. La couleur BG est égale, et je vais juste donner à ça, ah, une sorte de couleur grise. Sauvegardez ça. Et boum. Maintenant, on comprend, tu sais, qu'il s'étend à travers cette école. Comme je l'ai dit, vous utiliserez généralement des choses de couleur comme celle-ci en utilisant CSS un jour. Juste une sorte d'utiliser une sorte d'ancienne façon de rétrograder. Nous le faisions de cette façon avant que CSS ne soit inventé. Ça vous dira combien de temps. Je veux dire, il y a 20 ans, je le faisais, euh, donc je ne te recommande pas de le faire comme ça. Ramenons cette frontière ici très vite. Jetez un oeil. Ok, donc c'est la durée d'appel. Nous avons aussi une portée de ligne, alors revenons ici et disons ici dans notre en-tête principal que nous voulons une autre tête de table et appelons simplement ces données et nous voulons étirer cela autour. Je ne vais pas l'étirer. Trois rangées, je crois. Jetez un oeil ici. Donc 1234 lignes. Nous voulons que ça étire toutes les routes ici. Alors comment on fait ça ? Eh bien, nous voulons l'étirer. Nous voulions étendre a surgi. On a utilisé la portée de la ligne. Hum et on veut que ça soit égal à quatre. Maintenant, cela va nous donner une sorte de problème ah. Parce que maintenant cela ne s'étend pas tout le chemin à travers parce que nous avons ajouté une autre colonne. Droit ? Donc, nous devons aussi ajuster celui-ci en haut pour appeler la plage quatre si nous voulions étirer tout le chemin, non ? Le boom qui répare ça. Maintenant, enfin, cette chose de données est secouée à gauche. Nous pouvons changer cela aussi. Comme on l'a fait tout à l'heure. Avec cet alignement, nous pouvons également voir, juste en ajoutant une ligne égale Mais disons centre, sauvegardez ceci. Revenir n'a pas fonctionné. Qu' est-ce que j'ai fait ? Ne le sauvez pas. Appel en quatre. Aligner est égal au centre. Enregistrer ne fonctionne pas. Ça devrait marcher. Oh, mauvaise zone C'est ce qu'on voulait sur le truc des données. Donc d'accord, donc la ligne est égale au centre plus. Café ce matin. Ok, Boom. Maintenant, les données sont écrasées au centre, et cela semble beaucoup plus agréable. Il s'agissait donc de sujets de table de base, bien , pas de base, plus avancés. Et vous pouvez, vous savez, mélanger et assortir toutes sortes de façons différentes. On pourrait ajouter de la couleur à celle-ci si on le voulait. On n'y va pas, mais oui, sont des tables de base dans la prochaine vidéo. J' ai parlé de CSS et comment nous n'allons pas apprendre CSS. Il y a quelques choses que nous devons apprendre sur CSS. On va regarder ça dans la prochaine vidéo. Je vais te montrer qu'on n'apprendra pas le CSS. Je vais juste vous montrer comment utiliser CSS. Comment l'incorporer dans une page HTML. Tu dois absolument le savoir. Donc, nous allons regarder cela dans la prochaine vidéo 14. HTML Tous 13 CSS: OK dans cette vidéo. Je veux parler de CSS. Maintenant, je sais que je vous ai dit tout au long de ce cours que nous n'allons pas traiter avec CSS. Et nous ne sommes pas vraiment, je ne vais pas t'apprendre le CSS. Je vais juste vous montrer les trois principales façons d'intégrer CSS dans une page web et c'est important. Vous avez besoin de savoir ça. Donc, il y a trois façons et passons juste la première est en ligne et nous avons déjà regardé cela un peu. Nous voyons ici dans notre tableau, nous avons ces attributs de style, puis ceci et puis les guillemets de fermeture. Ceci est en ligne CSS. Nous avons trouvé dans l'élément html et à l'intérieur de celui-ci en ligne. Nous avons ajouté CSS, et vous pouvez le faire à peu près à n'importe quel élément html CIA. Voici notre étiquette Hone. Nous pourrions aller style et ensuite écrire un peu de couleur CSS bleu essayer et peut-être l'épeler correctement. Euh, et vous pourriez voir CSS est généralement une chose à gauche avec deux-points, et puis je pense à droite avec un demi-côlon. Donc, ce sont le genre de la façon dont CSS ressemble souvent. Donc si nous gardons ça, revenez ici et appuyez sur Reload. Boum ! Ça devient bleu. Très, très simple. Droit ? Pour qu'on puisse le faire. Débarrassez-vous de ça pour l'instant. Euh, tu peux aussi le faire. Euh, voyons voir. Je ne sais pas comment je veux dire ça, euh, en interne, je suppose. Et en interne à ne pas confondre avec en ligne, il apparaît dans la partie en tête de notre document. Nous pouvons simplement créer une balise de style et il s'ouvre et se ferme et n'importe quoi à l'intérieur d'ici, c'est juste que vous écrivez juste CSS ici. Maintenant, euh, ici, je vais en écrire, et on en parlera dans une seconde. Mais vous pouviez voir le problème ici. J' ai fait juste un peu, et ça commence déjà à être encombré ici. Lorsque vous voyez évaluer, vous utilisez des pages et des pages de celui-ci. Je veux dire beaucoup. Et vous ne voulez pas mettre tout ça dans votre tête Document sur chaque page de votre site web, vous savez ? De plus, si vous avez 1000 pages sur votre site Web, vous devez faire 1000 fois avec CSS, et vous ne voulez pas le faire Donc ce n'est pas une sorte de méthode ah que vous voulez utiliser à moins vous n'ayez juste une petite chose que vous devez dio. Donc ici, euh vient d'écrire un CSS très rapide, nous allons styler notre table. La table, cette étiquette et la balise TD. Je veux donner à ceci une bordure d'un peut devenir solide, rendre noir, puis l'effondrer. Et en s'effondrant, on pouvait voir ça en quelque sorte des regards soulevés ici. On dirait presque qu'il a une tridimensionnelle. Tu sais, il y en a deux, il y en a un peu comme une frontière, non ? Vous pouvez en quelque sorte voir qu'il a l'air différent. L' effondrement se débarrasse de ça. Nous voulons juste résoudre la ligne. Je vais descendre ici à notre table. Je vais me débarrasser de cette étiquette de bordure qu'on a mise là. Sauvegardons ceci et jetons un coup d'oeil et voyons à quoi cela ressemble. Boum. Maintenant, il a l'air un peu plus élégant, un peu plus moderne, et c'est toujours CSS. Maintenant, c'est tout. Internalized est tout sur la page elle-même. Et allons-y. Je vais copier ça et m'en débarrasser. Normalement, tu ne veux pas faire ça. Comme je l'ai dit, à moins que ce soit juste un peu. Juste un petit extrait de code CSS normalement, ce que vous allez vouloir dio et c'est une sorte de moyen principal de faire CSS est externe, et par externe, je veux dire, nous voulons créer une feuille de style CSS en externe et ensuite liée à elle. Donc je vais venir ici pour créer un nouveau fichier et disons juste que ce fichier sauvegarde sous, et nous allons l'enregistrer sur le bureau même où nous avons sauvegardé notre page. Et je vais juste appeler ce style point CSS Dans tous les fichiers CSS finissant point CSS signifie feuilles de style en cascade. On s'en fiche. Donc je veux coller le même code de table ici, et je vais le sauvegarder maintenant. Si nous revenons ici, rien ne se passera parce que nous avons créé le fichier. Nous avons mis notre CSS CSN dedans, mais nous ne l'avons pas lié à notre page web actuelle. Alors comment on fait ça ? Eh bien, encore une fois, dans la section tête de notre page ici, peu importe où nous avons juste besoin d'une balise CSS. Donc, ce rail de lien, puis le nom de celui-ci est feuille de style. Et puis Herath, c'est comme un lien. Comme quand nous avons parlé de liens plus tôt. Nous voulons que cela pointe vers où se trouve ce fichier. C' est dans le même répertoire. Donc, nous pourrions juste écrire le style de ce style de projet de loi que CSS n'importe quoi. Nous nommons ce fichier. Droit ? Donc vous dites que ça revient ici et maintenant c'est lié. Si on frappe le rechargement. Boom, On peut voir ça, Um ce CSS si cool. Hum, tu sais, on peut y aller h un comme on l'a fait plus tôt en ligne couleur bleue, non ? On fait ça ici. Et puis si on frappe recharger qui ça devient bleu, tu vois, tu vois, on n'a pas changé le tag h one du tout. C' est pour ça que c'est si cool. CSS et HTML fonctionnent ensemble, mais ils ne le sont pas. Vous n'avez pas besoin d'apporter des modifications à votre HTML pour que le CSS prenne effet , ce qui est vraiment cool. Donc, vous ajoutez juste ce lien CSS en haut de votre page dans la section de tête et c'est tout. Donc, vous voyez, c'est CSS. Vous êtes peut-être familier avec ça. Je ne vais pas entrer dans plus de détails sur CSS, je pourrais enseigner tout un cours sur CSS. En fait, j'ai dans le passé, euh et, euh, nous allons juste le laisser pour la plupart de la raison pour laquelle je fais ça, c'est parce que, pour être complètement honnête, personne n'écrit CSS plus. Il y a tellement de frameworks CSS où vous pouvez simplement le télécharger, gifler directement lié à elle et boom. Ça marche que personne n'écrit. CSS CSS est une douleur. C' est vraiment le cas. C' est très délicat, tu sais. Historiquement, CSS fonctionne tous un peu différent dans chaque version d'un navigateur. Donc vous savez que vous avez Firefox. Vous avez du chrome. Vous avez Internet Explorer ont jusqu'à présent vous avez des dizaines d'autres navigateurs, et ils utilisent tous CSS un peu différemment. Donc, vous deviez faire une version pour Firefox. Aversion pour l'aversion du chrome pour le safari. Au fil du temps, ils ont commencé à s'unifier un peu. Mais il y a encore des petites choses qui peaufinent et des choses que vous devez faire pour différents navigateurs, et c'est juste une douleur, et personne n'aime le faire. C' est pourquoi nous avons des frameworks CSS que vous pouvez simplement copier coller boom. Ça marche et nous commencerons à en parler dans la prochaine vidéo. Nous allons regarder le cadre bootstrap, qui est de loin le plus populaire là-bas. Et oui, donc c'est tout pour CSS dans cette vidéo. Dans la prochaine vidéo, nous allons regarder Bootstrap. 15. HTML Tout le monde 14 Introduction à Bootstrap: Ok, donc nous avons passé par la plupart des principaux éléments HTML maintenant il ya quelques choses franges ici et là. On n'a pas parlé, mais en gros ces trucs dont j'ai parlé dans la première moitié de ce cours, jusqu'à maintenant, ça va t'obtenir, genre, 85 90% de ce que tu vas faire avec HTML. Le reste est juste en quelque sorte d'ajouter un style avec CSS, et nous ne allons pas vraiment entrer dans cela dans ce cours. Ce que nous allons entrer dans est d'utiliser un framework CSS. Maintenant, je ne vais pas vous apprendre CSS, mais je vais vous montrer comment utiliser comment intégrer un framework CSS dans votre document HTML et celui que nous allons regarder où commencer à le regarder est appelé bootstrap . Donc, si vous aviez plus pour obtenir bootstrap dot com, le voici. C' est complètement gratuit. Ceci est créé par certains gars sur Twitter et je ne sais pas, peut-être il y a 10 ans ou environ et il est devenu tellement populaire, les gars ont quitté Twitter et ils ont juste fait ça à temps plein maintenant et ils ont en quelque sorte filé un twitter. Je ne pense pas que Twitter soit le propriétaire. C' est open source, mais nous sommes sur la version 4.1 en ce moment. Et si la version est différente au moment où il a regardé ce cours, c'est bon. Ça n'a pas vraiment d'importance. Vous pouvez souvent passer en revue les anciennes versions si vous voulez utiliser celle que j' utilise spécifiquement dans ce cours, mais cela n'a pas vraiment d'importance. Euh, alors jetons un coup d'oeil à ça. Clip la documentation et c'est tout, et nous allons entrer dans tout ça dans un peu. Je vais vous montrer comment orteil l'installer et comment l'utiliser et des trucs comme ça. Mais regardons ici et passons aux composants et voyons juste quelques-unes des choses que vous pouvez faire. Donc tout de suite, on a une grande liste de trucs, non ? Donc voici ces alertes aériennes. Si vous voulez une alerte sur votre page, voici le code. Tout ce que vous avez à faire est de copier ce collé sur votre page et boom, vous avez cette alerte. Très cool. Des boutons. Si vous aimez les boutons, vous voulez des boutons de couleur différente. Voici le code pour tout ça. Une fois cela installé, vous devriez avoir à copier et coller ceci et le modifier pour, vous savez, dire ce que vous voulez que le bouton dise. Et c'est tout. Um, cartes, rencontrez des petites cartes. Vous pouvez y ajouter une image. Un peu cool. Euh, carrousel. Vous avez déjà vu ça ? Des curseurs. Ils sont appelés. Vous savez, vous pouvez ajouter ceci à votre site en copiant ce code. En le hâtant, en le peaufinant un peu. Et boum, ça marche. Très cool. Euh, voyons voir. Jumbotrons juste cette grosse boîte. C' est amusant. Nous allons jouer avec ce, euh, nab notre Vous savez, ces barres nah du haut. Chaque site dispose d'un bar à talons. Très bien, voici un AB que vous pouvez utiliser, et vous pouvez changer la couleur. Je vais vous montrer comment faire ça en copiant et en collant, puis en tweetant . Donc, ce sont toutes les choses différentes. Et tu vois, qu'est-ce qu'on a d'autre ? Ceux avec des composants. Si nous allons exposer Ah, vous pourriez vouloir lire ceci. Si vous êtes intéressé à utiliser réellement cette chose, cela montre que c'est un système de grille appelé. Comment positionner les choses sur une page. Tu sais, notre page. On l'a juste fait. Tu sais, c'est très fade. Juste boum juste là sur la page. Mais si vous vouliez cette table, vous savez, ici avec une image enroulée autour d'elle et tout ce genre de choses Ah, vous feriez cela en utilisant différents conteneurs et différentes choses du système de grille. Et vous pouvez lire à ce sujet ici. ne vais pas vraiment approfondir ça. Comme je l'ai dit, je n'enseigne pas le CSS. Je ne veux même pas vraiment t'apprendre Bootstrap. Je veux juste que ça vous montre ce qui est possible ? Vous commencez, vous montrez comment apprendre si vous êtes intéressé par l'apprentissage et je vais vous montrer quelques choses pour que vous puissiez voir que vous savez de quoi il est capable ? C' est cool. Donc c'est vraiment je veux tout ce dont je voulais parler dans cette vidéo, juste ah, introduction rapide à ce que cette chose est et ce qu'elle peut dio dans la prochaine vidéo. On va passer par cette section ici. Je vais vous montrer comment l'utiliser réellement sur votre page Web. Vous pouvez voir et un petit modèle de démarrage. Tu sais, ça devrait sembler familier. Maintenant, il y a beaucoup de choses que nous avons déjà faites. HTML la tête de balise médecin sur le titre. Le corps. Il y a un H, tu sais, ferme les étiquettes. Donc, c'est très que vous devriez être familier avec le HTML de cela déjà, donc cela va rendre l'utilisation beaucoup plus facile, donc nous allons entrer dans tout cela dans la prochaine vidéo. 16. HTML All 15 Installez Bootstrap: Ok, Donc dans la dernière vidéo, nous avons parlé un peu de bootstrap dans cette vidéo sur un spectacle que vous aviez commencé à l' utiliser . Il y a donc deux façons de le faire. Alors dirigez-vous vers bootstrap dot com et cliquez sur la documentation, et vous pouvez soit télécharger ceci et son décrochage, puis l'utiliser, ou vous pourriez simplement y être lié. Donc c'était les deux façons et d'obtenir à quel point vous êtes sérieux, vous voudrez peut-être le télécharger. La seule raison de le télécharger est si vous voulez le modifier et que vous ne le faites probablement pas, pas vrai. Si vous voulez le modifier, vous connaissez déjà CSS et vous voulez en quelque sorte le modifier pour faire des choses très spécifiques. Et tu pourrais le faire. Et je ne vais pas en parler. C' est bien au-delà de nous dans ce cours. Mais pour la plupart des gens, tu peux juste être lié à ça et qu'est-ce que je veux dire par lié à ça ? Tu te rappelles quand on a créé notre faux petit style ? Ce n'était pas faux, c'était réel. Ce n'était pas faux, Mais cheesy petite feuille de style ici point de style CS dit que nous avons lié à elle apparaissent le haut avec cette balise Eh bien, vous pouvez utiliser la même balise, mais à la place, pointez ceci à vous savez, cdn dot Obtenir bootstrap dot com barre oblique démarre. Quoi qu'il en soit, ce n'est pas le vrai que je regarderai ça dans une minute. Mais tu pourrais juste faire ça, et ensuite c'est tout. C' est tout ce que tu as à faire. Commencez juste à utiliser ceci. Il y a encore une chose dont je parlerai dans une seconde. Donc c'est ce qu'on va dio. Je vais laisser ça pour l'instant. Et alors allons-y et faisons-le. Alors comment on fait ça ? Eh bien, dirigez-vous ici et cherchez ce modèle de démarrage. Et fondamentalement, ce que vous voulez faire est de copier tout ça. Maintenant, je ne vais pas faire ça parce que nous avons déjà les morceaux de notre propre modèle de démarrage, mais je vais prendre ce truc en bas. Maintenant, vous voulez vous assurer de saisir cette requête J dans ce truc javascript dans ce fichier javascript bootstrap javascript. Et ces airs ne font que des liens vers des CD externes, réseaux de diffusion de contenu, qui abritent ces choses. Donc je vais juste mettre tout ça en évidence. Cliquez et copiez et revenez ici. et je vais juste supprimer nos deux lignes du bas et juste coller ceci en clic droit et coller ou contrôler V sur votre clavier afin que vous puissiez voir que nous avons cela et nous avons nos balises de fermeture ici. Donc on est à mi-chemin maintenant. On a juste besoin de ces trucs en haut. Alors, tu vois ? Je veux probablement ça dans ça. Tu vois, c'est la feuille de style du rail de liaison, puis la référence et le lien vers la chose réelle, non ? Tout comme on est là. Même chose exacte. Fondamentalement, ça pointe juste vers un autre toi, Earl. Tellement cool. Très facile. Et nous pouvons juste C'est Ah, Vieux port qui rend votre site mobile prêt. Donc, si vous voulez que votre site Web soit beau sur un téléphone cellulaire, tout ce que vous avez à faire est d'ajouter cette ligne et il le fera. C' est de la magie. C' est de la magie réelle, parce que sinon il faut beaucoup de revêtement pour rendre un site mobile prêt ? Mais pas si vous utilisez un framework comme bootstrap, ce qui est l'une des principales raisons pour lesquelles les gens l'utilisent parce que c'est juste si facile. Donc, copions juste ces deux lignes de contrôle, voir, pour copier et retourner ici. Et je vais juste me débarrasser de cette ligne et coller dans ces deux lignes et affaiblir un peu. Si on veut. Ça n'a pas vraiment d'importance. Ok, alors gardons ça et voyons, juste en faisant ça, qu' est-il arrivé à notre petite page web ici ? Si nous cliquons sur recharger maintenant, abord, jetez un coup d'oeil. Tout te brûle ça dans l'esprit parce que ça va changer légèrement, et tu vas vouloir le remarquer. Si prêt ? 123 Recharger ! Boum ! Tout est légèrement différent, non ? Nos tables ont toutes foiré, et nous allons le modifier un peu. Ceci est gratté sur le côté, mais cela nous indique que le bootstrap a été installé. Donc, les premières choses d'abord très rapidement. Je vais juste sortir tous ces trucs du coin. Et pour ce faire, je vais utiliser un conteneur bootstrap. Donc, nous créons juste un div. Faisons-le par ici. Div, avec une classe de conteneur. Vous avez dit que bootstrap a des conteneurs comme système de grille. Une partie de ça. Donc maintenant, nous devons fermer ça. Alors descendez jusqu'à la fin ici et fermez-le. Donc, nous gardons ça. Reviens ici et frappe. Recharger. Ok, c'est un peu mieux. Uh, ajoutons du cache-chaux ou deux. Débarrassez-vous de ce style. Sauvegardez ça ici. D' accord ? Ce n'est pas beaucoup mieux. Mais nous allons modifier cela dans la prochaine vidéo quelques vidéos et vous montrer exactement comment utiliser ces différentes choses. Donc, euh, ouais, ce sera dans la prochaine vidéo. 17. HTML All 16 tables de bootstrap: Ok, alors qu'est-ce qu'on veut faire ici ? Eh bien, nous avons ces rappels de table. Nous allons jouer avec et rendre ça plus agréable. Alors comment on fait ça ? Eh bien, les premières choses d'abord. Revenons ici et regardons notre table, et nous nous débarrassons de tout le style que nous avons fait jusqu'à présent. Et c'est à peu près tout le style que nous avons fait. Alors pour elle, euh, quoi d'autre ? Débarrassons-nous de la portée de cette rangée. Changeons celui-ci. 23 C'est la chose de ma table qui s'étend sur le dessus. Et nous allons nous débarrasser de voir ce truc de données. C' est juste que j'ai vraiment besoin de ça. Alors sauvegardons ceci et jetons un coup d'oeil et voyons. Ok, donc c'est un peu mieux. Débarrassez-vous de ça. Ma table. Pensez à vraiment besoin de ça. On va juste se débarrasser de toute cette rangée de table. Ok, donc on est de retour aux bases. Très basique petite table ici. Nom, email, adresse. Un interlocuteur favori. Tout s'est enroulé ensemble. Pas très génial. Qu' est-ce qu'on fait ? Eh bien, revenons ici. Commençons par obtenir un coup de pouce, Dr dot com, et vous le voulez toujours. Cliquez simplement sur la documentation. Et puis vous voulez descendre presque toujours deux composants. Et puis tu veux juste regarder par ici pour ce que tu veux faire. Et nous voulons faire des tables et je regarde et je ne vois pas de tables nulle part. Alors j'essaie le contenu suivant. Et bien sûr, c'est là. Table. Donc, nous cliquons dessus. Et ici, nous voyons la table. Donc, pour faire une table dans bootstrap. Tout ce que nous faisons est la même chose avant de créer notre balise de table, mais nous lui donnons une classe de table, ce qui est assez simple. Copiez ça. Venez ici à notre étiquette de table et collez-la. Sauvegardez ceci et voyons ce que cela a fait. Boum. Tout droit de la chauve-souris. Ça a l'air plutôt bien, non ? Oui. On a de belles petites choses ici. Ce n'est pas génial, mais affaiblir. On peut jouer avec ça maintenant. Maintenant, qu'est-ce qu'on peut dio ? On va juste faire défiler ici et regarder des trucs. Si vous voulez qu'il sombre, vous lui donnez une classe de table sombre. On ne veut pas ça. Ce sont des options de tête de table laides. On pourrait dio, euh, disons que les phares de table maintenant laissons ça pour l'instant. Oui. D' accord. Alors les premières choses d'abord. Ils sont rayés Rose. Nous reviendrons à ça. On veut une frontière, n'est-ce pas ? Parce qu'il n'y a pas de frontière ici et ici, il n'y a rien. Donc, voyons juste que vous voyez cette classe de table, il met aussi cette petite chose là-dedans. Donc c'est copier cette tête ici. Donnons-lui un espace et un rythme aussi juste et économisons-le et boum. Impressionnant. Très cool. Pour qu'on puisse le faire. Dis qu'on veut Striped Rose. Droit ? On pourrait faire ça. Tu vois ? Oui. A l'intérieur de la classe de table à nouveau. Nous ajoutons juste cette prochaine petite chose tableau tableau tableau de bord rayé. Alors copiez ça. Donnez-lui un espace. Et c'est le truc avec CSS. Tu pourrais juste donner un espace aux choses et continuer à ajouter des choses. C' est toujours amusant. Bon, alors maintenant nous avons rayé. Très cool. Que pouvons-nous d'autre table de commande dio. On a fait cette frontière moins stable, hein ? Rose verbale. Donc, quand vous passez votre souris sur les changements de couleur, c'est cool nous. Et qu'on lui donne juste une table. Dash, survol, économiser un autre espace, Un autre collage. Et maintenant, boum. Très cool. Normalement, vous avez besoin d'un script java pour le faire. Mais rappelez-vous, nous avons ajouté tous les trucs JavaScript ici et ah, c'est juste qu'il le fait automatiquement dans bootstrap. Très, très cool. Alors voyons quoi d'autre ? On va probablement vers la fin de ce qu'on pourrait faire. On pourrait faire une petite table. Oh, c'est juste à ça. Je vois que c'est un peu grand. Si au lieu de cela nous voulons petite capacité. Est-ce que c'est à droite ? Et boum. Maintenant, c'est un peu comme vous pourriez aimer que ça ne pourrait pas. Quoi que vous vouliez que vous puissiez faire, nous pouvons changer différentes couleurs, non ? Fais ça. Nous ajoutons chacune de ces choses. Donc primaire est cette couleur secondaire. Est-ce que cette couleur réussit cette couleur ? Alors ajoutons le succès de la table, et nous voulons juste donner ceci à un TR spécifique, non ? Alors nous allons trouver le tr que nous voulons. Disons que c'est le milieu et qu'on lui donne juste une classe de ce truc. Sauve ça, reviens et frappe. Recharger. Boum ! Maintenant, c'est vert. C' est cool, hein ? C' est si facile. Et pour que tu puisses faire toutes les choses que tu sous-titres. Je ne suis pas vraiment sûr de ce que cela fait pas de tables réactives, ces téléphones cellulaires d'abord et des choses que vous pouvez lire à ce sujet si vous voulez, si vous voulez. Tellement cool. Um, donc c'est comme ça qu'on utilise le projet de boost. Quand Quand chaque fois que vous voulez chose vient à la documentation, commencez par les composants. Il sera probablement là dedans si ce n'est pas essayer le contenu de la section différente a une typographie qui est, comme des choses de police. Chacun des trucs, hum, des images. Vous faites différentes choses avec des images, des , des tableaux et des figures. Je ne sais pas ce que c'est, mais pour la plupart, tout ce qu'il veut sera dans cette section des composants. Donc, dans la prochaine vidéo, nous allons commencer à passer par cette section de composants pour regarder des choses différentes. Je pense que nous allons peut-être regarder les boutons à côté pour voir comment ça marche, donc ce sera dans la prochaine vidéo. 18. HTML All 17 Bootstrap Navbar: Ok, alors qu'est-ce qu'on veut regarder d'autre dans bootstrap pour qu'on puisse passer en revue et regarder toutes ces choses, mais je vais juste en choisir quelques-unes pour des choses plus courantes que tu vas gérer . On a des boutons. J' allais te montrer comment faire ça, mais c'est vraiment si simple. J' allais te montrer comment faire ça, Euh ah. Vous pouvez ajouter un bouton à un lien. Donc c'est l'avoir un lien texte. Vous pouvez juste à l'intérieur de votre balise h r F à une classe avec l'une de ces choses, et le lien devient un bouton si très, très simple là. Mais ce que je veux vraiment regarder, c'est des barres d'attelage. C' est cette barre en haut de l'écran. Chaque site a un bar de knave ces jours-ci, il semble que alors comment en créer un avec bootstrap ? Eh bien, vous pouvez faire défiler ici et ils ont un tas d'options différentes avec des images sans images. Je vais juste prendre le 1er 1 a une barre de recherche scolaire dedans, et, ah, des trucs déroulants. Copions cette tête sur notre page web, et nous voulons venir juste en dessous de la balise body. Nous voulons que ce soit la toute première chose sur notre page. Donc, je pourrais juste contrôler V ou faire un clic droit Excusez-moi et cliquez sur Coller. Et on a mis tout ça là-dedans. Donc je vais juste sauver ce contrôle et jeter un oeil et voir ce qu'on a ici. Et boum, on a ce truc cool. Maintenant, hum, ça descend le javascript pour que ça marche. Très cool. Ceci est une barre de recherche. Il ne va nulle part parce que nous ne l'avons pas programmé pour faire quoi que ce soit. On ne va pas vous voir, mais un très cool Maintenant, je ne suis pas un grand fan de ce gris très clair. Donc la première chose que je fais d'habitude est de monter au sommet de sa nab notre ici pas pire, n'a pas notre lumière. Il suffit de le changer pour attraper notre obscurité et juste à côté de lui aussi. Deux spots. Enregistrez ceci et rechargez. Et boum, on a ce sombre. Très, très cool. Et le vert correspond au vert ici. On a un thème à ce sujet. droite. Donc, ça commence à se réunir. Cela commence à ressembler à un vrai site Web. Et tout ce que nous faisons, c'est copier et coller certaines choses. Maintenant, on peut changer ça pour ne pas en vouloir. State Knave Bar. Disons-le. Allons juste par ici. Nous voyons ce lien tout de suite, nab notre marque, et il dit nab sont quand nous changeons juste. Changeons le John Elder pour en faire un site personnel. Je ne sais pas quoi que ce soit. Boom, John. Plus vieux. Très cool. Hum, cette liste déroulante, je ne veux pas vraiment descendre. Je n'ai pas autant de pages sur mon petit site web, donc je ne veux pas m'en débarrasser. Alors, comment puis-je faire ça ? Eh bien, je ne peux pas faire défiler ici et chercher le menu déroulant. Et ici, je vois la liste déroulante. Je me souviens tout à l'heure, j'ai parlé d'utiliser des alliés dans des barreaux. Vous avez déjà vu un exemple ? Um, tout de suite. Donc c'est cool. Donc on peut cliquer ici et on peut voir ça ici ou les faits saillants de l'Ally. Donc on peut juste se débarrasser de tout ça, sauver et le recharger. Boum ! Et maintenant, il est parti. Très cool. Euh, aussi cette maison et cette personne handicapée. Je veux me débarrasser de ces deux-là aussi juste parce qu'on n'a pas besoin de lui et juste parce que je veux te montrer comment le faire. Donc, en regardant par ici, je vois cette maison à nouveau. Trouvez l'AL que j'ouvre et ferme, et je le supprime juste. Même chose avec les désactivés puisque vous connaissez HTML. Maintenant, il est très facile de venir ici et de modifier cela comme vous voulez, qui est très cool. Donc on dit ça maintenant, ce lien, je vais changer ça pour dire sur moi. On n'a pas de page sur moi, mais personne ne le sait encore. D' accord. Donc, John Elder à propos de moi qui commence à avoir l'air assez bien. Donc, il est vraiment aussi facile à utiliser. Bootstrap. C' est pourquoi je veux dire littéralement des millions de personnes des millions de sites Web utilisent bootstrap. Um, c'est si facile et c'est complètement gratuit. Donc très, très cool. Dans la prochaine vidéo, je pense que nous allons jouer un peu plus avec ça. Peut-être qu'on va regarder ces cartes, dire comment utiliser cette cause c'est vraiment très cool. Et ce sera dans la prochaine vidéo 19. HTML All 18 cartes de bootstrap: D' accord, continuons à regarder ces cartes. Il suffit de cliquer sur le bouton de la carte ici et ici nous l'avons. Je vais copier tout ça, revenir sur notre site et mettre ça sous notre table. J' ai donc mis quelques ruptures de ligne ici juste pour une bonne mesure. Et je vais juste accélérer tout ça, et on peut le faire si on veut. Alors sauvegardons ceci et jetons un coup d'oeil à ceci. Donc d'accord, on a ça. n'y a pas d'image ici. Alors ajoutons cette photo de mon chien avec laquelle on a joué tout à l'heure. Et on pourrait le faire juste avec ce truc SRC. Et je pense que c'était ce qu'Aspen à P et G. était-ce le nom de ça ? Je ne m'en souviens pas. Nous le découvrirons bientôt. Je pourrais le regarder en haut. D' accord. Très cool. Et vous pourriez voir un redimensionnement. C' est pour nous seul ? Peut-être que c'était juste de l'aspirine . Je joue juste à ce stade, parce que c'est très amusant. Elle regarde dans l'autre sens. Avery majestueux, ouragan très royal. Ok, donc on a ce titre de carte, on peut changer ça et on va juste changer ça pour dire, comme ça a été Chillin maison et ensuite Bonjour. Mon nom est Aspen et je règne tout ce que je vois dans toutes les directions. Ouais, résume à peu près tout ça. Et maintenant, nous avons ceci. Mais maintenant je ne suis pas un grand fan de ce bouton. Alors revenons ici à nos boutons et choisissons une couleur différente. Donc on a une sorte de thème sombre qui se passe ici. Peut-on utiliser le vert ? Peut-être qu'on s'en tient à l'obscurité, alors je vais devenir secondaire. Donc, pour changer cela, nous venons de frapper ici et nous voyons ce btm primaire. On passe juste au secondaire et, euh, on nourrit le tremble. Je ne sais pas. Tellement cool. Donc vous savez, juste si facile de faire ces choses avec bootstrap. Vous savez, c'est juste une question de trouver la chose que vous voulez jouer avec la copie, de l'ajuster un peu. Maintenant que vous savez, html, vous pouvez en quelque sorte lire ici. Ici, nous ch cinq tag. Nous savons ce que c'est. La balise P. Nous savons ce que c'est. Il y a Aneha, Ref tag sur le lien. Évidemment. Vous savez ce que c'est la seule chose qui n'est pas familier sont ces classes div et ce tout CSS pur en CSS Ah, diviseur Div. Um, c'est juste ce que vous enroulez tout dans et CSS, puis vous lui donnez un tri de classe, comme l'attribut de CSS qui lui indique exactement quelle partie de CSS vous voulez styliser cette chose. Donc vous savez, la classe du corps de la carte, la classe de l'image de la carte, la classe de la carte pour classer ici de la table, juste une sorte de comment ça fonctionne. Très, très simple et très cool. Donc, dans la prochaine vidéo, je pense que nous allons regarder une ou deux choses de démarrage plus sangles et ensuite appeler ça fait. Et ce sera dans la prochaine vidéo. 20. HTML All 19 Bootstrap Jumbotron: Ok, donc on en a assez fini ici. Faisons juste quelques petites choses de plus juste pour jouer avec cela et obtenir un peu plus d'expérience en utilisant cela. Donc apparut en haut. Nous avons cette bienvenue sur mon site web. C' est bon, mais qu'est-ce qu'on pourrait faire d'autre ? Eh bien, regardons par ici. On a un jumbotron. C' est plutôt cool. J' aime bien le Jumbotron ici. On a un jumbotron fluide. Allons-y et copions ce type et voyons au lieu de notre H. Faisons juste un peu d'espace ici et coller tout cela dans. Sauvegardez ça et jetez un oeil et voyez ce qu'on a ici. D' accord ? Peut-être que c'est cool. Peut-être que ce n'est pas que je ne sais pas. Hum, alors modifions ça. Débarrassons-nous de ce bouton. On n'en a pas besoin. Et nous n'avons pas besoin de cette ligne ici dans ce petit texte. Alors débarrassons-nous de certaines de ces choses. Tout d'abord, je vais mettre en évidence tout ça et en quelque sorte l'avoir un peu plus. Ok, donc on ne veut pas du bouton. Alors débarrassons-nous de ce bouton. Boom est parti. Et nous ne voulons pas de cette HR, nous n'avons pas parlé des balises HR H R signifie règle horizontale et ces balises html pur air. Et ça fait juste une ligne, tu vois, n'est-ce pas ? Comme, je ne peux pas vraiment le mettre en évidence. Mais juste au-dessus de ce bleu, mettant en évidence cette ligne juste ici, c'est une règle horizontale. C' est cool. Um, ou si gêné de dire, je les utilise plus que je devrais, alors débarrassons-nous de ça. Débarrassez-vous de cette étiquette P. Ok, alors qu'est-ce qu'on a d'autre ici ? Trois. Charger et voir. Très bien, allons-y bien. Changeons Bonjour, Monde à Je ne sais pas. Bienvenue sur mon site web. C' est mon petit coin tsar de l'Internet. On devrait épeler Internet, non ? Internet a toujours l'air mal. Euh, hein. Point d'exclamation. Regarde mon incroyable tableau ci-dessous, et si tu es vraiment cool, tu pourras nourrir Aspen. Regarde mon incroyable tableau ci-dessous, et si tu es vraiment cool, D' accord. D' accord. Donc d'accord, c'est un peu boiteux, mais, vous savez, juste un autre exemple de la façon dont vous pourriez faire des choses avec le projet de bottes, et ah, je suis aussi un peu gêné de dire que j'ai utilisé le Jumbotron sur les sites Web plus souvent que je devrais le faire. C' est vraiment stupide, mais, tu sais, c'est comme ça. Donc, en regardant par ici chapelure. C' était une sorte de boutons utiles qu'on a déjà regardé, hum, dépliants. C' est cool. Besoin de formulaires. Nous ne parlons pas vraiment des formulaires Web plutôt d'un type de programmation backend, mais vous pouvez styliser des formulaires. Bootstrap. Très facile. Barres Naff, pagination. Très cool. Facile à ajouter des escales. Barres de progression intéressantes, plus programmatiques. Vraiment conseils d'outils. On va planer des choses, et c'est à peu près tout. Donc, oui, c'est bootstrap. C' est vraiment aussi facile que ça. Et j'espère que ça vous intéresse de voir comment vous en servir. Et j'espère que tu vas jouer avec ça toi-même. Plongez et commencez à tester des choses. Commencez juste à jouer avec. C' est la meilleure façon d'apprendre Bootstrap et, ah, très cool. Donc je pense que c'est à peu près tout. Nous avons une compréhension très basique du HTML. Ce n'est vraiment pas si dur, tu sais, je pense que tu as vu que ce n'est pas vraiment un langage de programmation. Ce n'est vraiment pas si dur, tu sais, tu sais, Il s'agit juste d'ouvrir des balises et de fermer des balises. Et puis à l'intérieur de la balise, le texte est marqué à n'importe quelle balise. Et puis, si vous voulez des yeux de style orteil, il en fait des couleurs assez utilisées, mises en page, des choses comme ça. C' est tout CSS. C' est beaucoup plus avancé. Um, vous pouvez apprendre CSS et je vous recommande vraiment de le faire. Ne devenez pas un expert chez CSS, mais juste assez appris. Euh, un peu comme tu l'as appris. HTML. Tu viens d'en apprendre assez pour être dangereux, non ? Vous en avez assez appris pour pouvoir le lire, être capable de faire des choses de base et, plus important encore, pour être capable de le comprendre quand vous le voyez ailleurs. Comme si vous voulez utiliser bootstrap, vous savez que vous pouvez regarder à travers ici et il y a beaucoup de voir s'il y a beaucoup de HTML dans Boots draft. Eh bien, vous savez tout ça. HTML Maintenant, vous savez ce que cela signifie, ce qu'il fait , le but de celui-ci, comment le modifier, comment le faire. Vous savez, faites exactement ce que vous voulez, et c'est vraiment, vraiment tout ce que vous voulez en cette époque de développement Web moderne. Donc je pense que c'est tout. Dans la prochaine vidéo, nous allons dire quelques choses. Enveloppez cela et continuez à partir de là 21. HTML All 20 Bonus de HTML: D' accord. Donc je pense qu'on va dire ça fait. Maintenant, vous avez un orteil basique très solide. C' est une compréhension de niveau intermédiaire du HTML. Ce n'était pas si dur. Je veux dire, c'est un cours très court, mais html est très facile. Il n'y a pas beaucoup à ça. Comme je l'ai dit, au début, HBO n'est pas vraiment un langage de programmation. C' est un langage de balisage. Je vais juste mémoriser les tags et apprendre à les utiliser. C' est à peu près tout. Alors, euh, bien sûr. J' espère que vous avez passé un bon moment. J' ai passé un bon moment à l'enseigner. Si vous aimez ce cours, si vous aimez mon style d'enseignement, peu importe et que vous voulez, prenez d'autres cours de moi. Passez à Kota me point com. C' est mon site web et il y a tous mes cours. Il y en a plus de 30. J' ajoute de nouveaux cours chaque semaine et vous pouvez voir que nous avons des trucs vraiment cool. Ruby sur rails, python, Django, JavaScript, PHP. Vous le nommez. Nous avons probablement plus de 1000 vidéos à ce stade sur 30 cours. Plus de 50 000 étudiants à ce stade. Oui, je crois qu'on est encore à 50 ans. On n'a pas encore atteint 60 ans quelque part là-dedans, mais oui, ce cours ici. Um, juste pour vous donner un exemple, nous créons un clone du site Pinterest en utilisant Ruby on Rails. Des trucs très cool. Hum, ici, nous créons une application portefeuille de devises crypto avec python. Très cool, Django pour la construction de sites web. Comme je l'ai dit, JavaScript, des trucs de base de données. serveur de suite Microsoft a eu Ah, ma suite. Cours de serveur. Quelque part là-bas aussi. Programmation Ruby ou Kryptos trucs ou rubis sur rails. Stuff Ruby pour le développement de jeux, Roku, et aller plus PHP PHP quelques trucs de monnaie crypto. Très cool, Lennox, si vous avez déjà été curieux de savoir ce qu'est Lennox et comment l'utiliser, c' est un bon cours pour ça. Et nous avons un peu de marketing s PDG et email marketing étaient codeurs. On construit des trucs, tu dois encore commercialiser les trucs que tu construis. Donc en quelque sorte vous apprendre à faire ça aussi. Plus de trucs de base de données, plus de trucs PHP. Tellement cool. Si vous êtes intéressé, cliquez sur cette inscription dès aujourd'hui. Mais maintenant, normalement, l'adhésion est de 49 dollars. Ça couvre absolument tout. Une seule fois, de l'argent, l'argent, garantie de retour. Bien sûr. Euh, tu as aussi des cours futurs. Donc, j'avais de nouveaux cours toutes les semaines ou deux et vous obtenez ceux-ci gratuitement en tant que membre total. Ils apparaissent juste sur votre compte. Rien pour s'inscrire pour qui ils ont juste. Ils sont apparus comme par magie. Donc, pas de frais supplémentaires pour ça. Et c'est très cool. Mais comme un bonus d'abord souffraient à travers ce cours. Je veux vous donner ce code promo. Si vous cliquez sur la chose de vérifier ici et tapez, voyons Super Coder, ce que je sais est un code vraiment dorky. Mais je suis trop paresseux pour le changer. Ça va faire 22 dollars de plus. Donc tu as payé 27$ pour tous mes cours. Tu ne peux même pas acheter une pizza pour autant. Je dois juste couvrir le coût de mon groupe avec. Pour toutes les vidéos que j'ai à l'église quelque chose, euh, c'est à peu près un ralentit Aiken G. O. Um, j'ai dit argent garantie que vous pourriez accéder à moi et me poser des questions. Vous pouvez accéder à d'autres étudiants leur poser des questions interagissent. C' est ah, c'est une petite communauté cool, et après 27 dollars, je pense que c'est ah vraiment bon voler si tu t'aimes pour moi Si tu aimes juste regarder des cours sur toi pour moi j'ai tous mes cours de Kota Me sur tu me connais eso Si vous vous dirigez vers john elder dot org ford slash vous à moi point PHP Ceci est mon site web personnel, et il a tous les mêmes cours, mais avec des liens vers vous vers moi. Et il y a des codes promo ici, je pense que 11 ou 12 dollars ses cours ce que vous payez. Ils m'ont enfermé à quel point je peux y aller. Certes, c'est beaucoup plus cher que de suivre tous mes cours pour 27$. Mais certaines personnes comme toi pour moi. Hum, pour une raison quelconque, peut-être que vous avez des crédits accumulés là-haut. Certaines personnes vous ont donné des cours ou quoi que ce soit. Euh, si c'est le cas, vous pourriez vérifier tous mes cours ici, cliquer sur le lien dans un boppy vers vous vers moi. Donc, Comme dit, j'espère que vous avez apprécié le cours. Laisser un avis Si vous en avez envie. Bon, mauvais ou autre. J' apprécie toujours d'avoir des commentaires. Et ce serait vraiment utile. Et, euh, je pense qu'on va appeler ça. Fait. Je m'appelle John Elder. J' espère que vous avez apprécié le cours, et nous vous verrons la prochaine fois