HTML et CSS pour les débutants

1. Introduction: Bonjour et bienvenue dans une nouvelle classe. Ceci est HTML et CSS. Et fondamentalement HTML signifie langage de balisage hypertexte. Et c'est un langage très facile pour décrire la structure d'une page Web. Et si je veux apprendre la programmation ou le codage, je vais commencer par HTML, car c'est le langage le plus simple et le plus simple. Maintenant j'ai eu Eunice, et je serai votre instructeur pour ce cours. Alors commençons par le contour. Alors, qu'est-ce qu'on va couvrir ? Donc, les sujets de cette classe sont quelques notions sur la cellule et quelques balises prédéfinies et ainsi de suite. Nous avons aussi des attributs. Et puis nous allons parler de style et de formatage. Ensuite, nous allons passer à des images de longueur moins et des tableaux. Et puis enfin, nous allons apprendre comment laisser notre fichier CSS à notre HTML. Et puis finalement, nous allons finir notre classe avec parler des types d'entrée. Donc c'est ça. Et j'espère que vous avez apprécié ce cours. Rendez-vous à la prochaine vidéo. 2. Titres: Et maintenant, c'est notre code Visual Studio. Allons de l'avant et cliquez sur le fichier. Nous pouvons voir ici, nous avons les extensions et a commencé à ajouter quelques extensions. Par exemple, nous pouvons HTML. J' ai déjà installé certains d'entre eux, cependant, c'est le support HTML CSS pourrait être utile. Nous avons aussi celle-là. Et enfin, je vais télécharger et, et le navigateur juste pour voir notre code HTML et notre navigateur et installer. Maintenant, fermons cette extension et commençons avec notre code ici. Donc, par exemple, laissez-moi simplement créer un nouveau fichier. Et ce nom de liste de fichiers au début, le HTML. Et nous sommes bons maintenant, je l'ouvre, voir le premier HTML ici. Et comment puis-je écrire mon premier code HTML ? Je peux simplement écrire STM n et aller au restaurant HTML cinq, et c'est notre premier code HTML. Supposons maintenant que je veux voir ce code. Je peux simplement cliquer avec le bouton droit ici et ajouter dans le navigateur par défaut. Et puis c'est notre première page. C' est une page vide puisque nous n'avons rien ajouté jusqu'à présent. Permettez-moi d'aller de l'avant et d'expliquer un peu la structure de ce code HTML. Donc, la première chose que nous allons remarquer est ce DOCTYPE, HTML, et cela indique le type de document. Et parce que nous écrivons en HTML, nous allons le définir en HTML. Maintenant, la deuxième chose est HTML. Nous ouvrons la balise d'ouverture. C' est donc notre code HTML à l'intérieur de la balise d'ouverture et de fin. Et puis nous avons notre langue. Nous pouvons simplement ajouter cette langue, et dans ce cas nous utilisons l'anglais. Donc, EN indique l'anglais. Maintenant, chaque fois que nous ajoutons à notre balise, nous pouvons simplement écrire du HTML. Et voici notre étiquette d'ouverture. Maintenant, si vous voulez écrire notre balise de fin est la même que notre ouverture, mais nous allons ajouter cette barre oblique. Et comme nous pouvons le voir, la structure de notre code HTML est assez simple et simple. Donc, à l'intérieur de notre HTML, nous avons deux tâches principales. Donc le premier est la tête. Et à l'intérieur de notre tête avoir notre titre, puis nous avons notre corps. Et ici, nous allons écrire notre code. Et par exemple, je peux écrire un lope. Et si je viens d'ouvrir cela dans le navigateur par défaut, je peux voir vers bas imprimé ici. Maintenant, laisse-moi revenir ici. Et c'est donc notre corps. Et ici, nous allons écrire tout ce que nous voulons. Et supposons que j'écris ce bonjour et un texte habituel ou une petite taille. Par exemple, lorsque je l'écris, par exemple, comme un titre, je peux simplement utiliser le titre. Et ce sera à un seul. Et si j'appuie sur Entrée, j'en arrive à un. Et dans ce cas, si j'écris bonjour, exécutez ceci. Je vais recevoir ce grand bonjour. Maintenant, en fait, nous avons tellement de rubriques. Par exemple, X2 sera plus petit. Et bien sûr, h3 sera plus petit aussi. Et laissez-moi juste vérifier ici. Donc, en haut et dans un navigateur différent et nous obtenons celui-ci, c'est H2, et c'est bord trois. Et en fait, nous n'avons que six titres. Donc si j'écris x, je comprends bien. Bonjour et têtu et appuyez sur Entrée, rien ne se passera. Nous n'avons pas un avantage réservé sept monde. Donc, si je juste, et donc nous allons obtenir ce petit Bonjour. Et ceci est, fondamentalement, il suit les titres comme nous pouvons le voir à mesure que nous allons plus haut et les chiffres, la taille de notre titre ou de notre titre seraient de plus en plus petits. Et c'est fondamentalement, donc c'est notre premier code HTML, est très simple. Cependant, cela deviendra beaucoup plus compliqué. Et nos prochaines vidéos. Reste concentré et te voir. 3. Les bases du HTML: Maintenant, après avoir écrit nos en-têtes, nous pouvons commencer par une bande passante. Donc supposons que je veux écrire ici, je peux simplement écrire b. Donc c'est un paragraphe et je vais écrire, mon nom est Eunice. Et si j'ouvre ça, on va chercher Hello. Mon nom est eu des unités. Maintenant, permettez-moi d'écrire un autre paragraphe et je peux simplement écrire ici, ceci est un autre paragraphe dessus. Comme nous pouvons le voir, nous allons obtenir deux paragraphes différents. Cependant, si j'écris simplement ici et ajoute, nous allons les obtenir, tous à la même ligne. Donc, si je veux commencer un nouveau paragraphe, je fermerai simplement le premier et le haut. Et comme vous pouvez le voir ici, c'est parce que dans le temps de la première, et c'est la balise d'ouverture de la seconde. Maintenant, laissez-moi juste les supprimer et juste finir ça. Et maintenant passons à une autre chose. Et c'est le lien. Alors, comment pouvons-nous ajouter un lien vers notre code HTML ? Donc, la première chose que nous allons écrire est un, puis appuyez sur Entrée. On va avoir ça. Et si vous ne l'obtenez pas, vous pouvez simplement l'écrire. Donc, une référence h, et ceci est l'abréviation de référence et égale à. Et comme vous pouvez le voir, nous les avons ici et nous devrions écrire notre lien dans ces conditions. Alors laissez-moi simplement aller à Google et saisir ce lien, par exemple, et les bases ici. Et si je simplement, je peux simplement écrire ici, c'est un lien Google. Et ouvre-le. Nous allons obtenir Bonjour. Mon nom est les unités de tête et c'est une jambe Google. Donc, si j'appuie sur ce lien et il ouvrira automatiquement ce lien ou Google Photos, comme vous pouvez le voir ici. Et c'est ainsi que nous pouvons créer, comme vous pouvez le voir, il suffit de revenir en arrière, et c'est ainsi que nous pouvons créer notre lien en HTML. Passons maintenant à un autre concept de base et c'est d'ajouter une image. Donc, comme vous pouvez le voir, si je veux créer une image, je peux subdiviser IMG et tourner. Et c'est notre balise d'ouverture à l'intérieur de la balise d'objet. Comme avant, nous devons ajouter notre source deux, c'est la source de notre image. Et supposons que je veux revenir ici et Google Photos. Donc, c'est une image. Je peux simplement copier ce lien. Et Long, mais on s'en sortira. Donc c'est notre lien. Si maintenant j'ouvre ceci, nous pouvons voir que nous allons obtenir cette image. Et nous apprenons comment ajuster la taille de celui-ci ou la longueur et la largeur de cette image plus tard. Mais pour l'instant, c'est ainsi que nous pouvons simplement ajouter cette image et notre code HTML. Maintenant, revenons ici. Supposons que je veux créer un bouton. Et dans ce cas, je peux simplement écrire le bouton et, et donc c'est notre bouton et je peux simplement écrire, par exemple, cliquer sur moi dans ce. Et nous pouvons voir ici, nous avons un bouton qui dit Cliquez sur moi. Maintenant, ça ne fait rien à Maintenant puisque nous n'avons rien ajouté, si j'appuie sur ce bouton, rien ne se passera. simplement voir qu'il change un peu mais revient à la normale et rien n'apparaîtra à l'écran. Et parce que nous n'avons pas ajouté de code à ce bouton, revenons à notre code HTML et commençons à parler de moins. Donc, un HTML, nous avons deux types de liste. Nous avons la liste non ordonnée et une liste ordonnée. Commençons donc par créer une liste non ordonnée. Permettez-moi donc d'aller de l'avant et de supprimer ceci et de commencer par un titre numéro deux. Et c'est une liste non ordonnée. Et comment pouvons-nous créer une liste non ordonnée ? Nous pouvons simplement utiliser les initiales vous et, et ceci est notre liste. Maintenant, comment pouvons-nous créer des éléments et décider de réduire le sens ? Chaque fois que nous créons, chaque fois que nous, chaque fois que nous écrivons u l, c'est notre vide moins que maintenant nous n'avons ajouté aucun élément. Donc, chaque fois que nous voulons ajouter un élément, nous pouvons simplement écrire un élément de liste. Et ça ouvre un peu. Et à l'intérieur de ces deux fois, nous pouvons créer notre objet. Donc supposons que j'ai pris le bon téléphone. Et le second sera un ordinateur portable. Et ce troisième sera une montre. Et maintenant, si j'ouvre ça, on peut voir que c'est une liste non ordonnée. Et nous avons trois articles : téléphone, ordinateur portable et montre. Maintenant, laissez-moi revenir ici et créons une autre liste. C' est, ce sera une liste ordonnée. Et dans ce cas, laissez-moi juste écrire ici Etch, faire aussi. Et à l'intérieur de ce bord à L, va écrire ceci comme une liste ordonnée. Et comment pouvons-nous le créer ? Donc, oh, et comme d'habitude, et nous pouvons simplement ajouter nos éléments ici. Donc, le premier élément de liste comme d'habitude, et laissez-moi écrire les mêmes éléments qu'avant. Donc, nous avons trouvé, nous avons ordinateur portable et nous avons Watch. Laisse-moi ouvrir ça une fois de plus. Et c'est une liste ordonnée. Nous avons trois, en fait trois articles et ils sont numérotés de un à trois. Maintenant, une autre chose ici, si, par exemple, j'avais allié et laissez-moi juste une bouteille. Et cette affaire, nous n'avons pas vraiment besoin d'ouvrir ça à chaque fois. Nous pouvons simplement retourner ici et juste rafraîchir et vous pouvez le voir ici. Mais je pense que c'est plus facile. Je viens de m'ouvrir. Mais chaque fois que vous ouvrirez tout ça, ce sera si désordonné ici. Donc juste mis à jour en rafraîchissant la page d'en haut. Donc, c'est essentiellement pour la liste non ordonnée et ordonnée et HTML. C' est ainsi que nous pouvons les créer et créer des éléments à l'intérieur de chacun d'eux. C' est donc la fin de cette vidéo, et la prochaine vidéo, nous allons discuter des attributs HTML et vous voir ensuite. 4. Attributes: Passons maintenant aux attributs, et nous avons vu quelques attributs en HTML. Donc, par exemple, quand nous avons écrit A et appuyez sur Entrée, nous avons obtenu ce HREF. Il s'agit d'un hyperlien hypertexte. Et chaque fois que nous écrivons, par exemple, essayons HTTP et, et google.com. Et si j'ouvre ça comme avant, c'est juste écrire quelque chose à l'intérieur de ça. Dites par exemple, cliquez ici. Et laissez-moi juste retourner à Google et exécuter ça. On va amener Glick ici. Et si je clique ici, cela me conduira automatiquement à Google. Je peux chercher tout ce que je veux ici. Maintenant, laissez-moi juste supprimer ceci et ceci est notre page. Et laisse-moi revenir en arrière. Donc, c'est un attribut. Maintenant, un autre attribut pourrait être l'attribut title. Donc, par exemple, si nous écrivons un titre, alors laissez-moi simplement supprimer ceci. Et maintenant, nous avons un peu d'espace. Alors supposons que je veux écrire bonjour monde et bonjour monde à l'intérieur de l'un. Je peux ajouter la balise d'ouverture ici. Un titre égal à. Il s'agit d'un en-tête par exemple. Et remarquez que si j'ouvre ça, rien ne se passera. Je reçois simplement bonjour monde. Cependant, nous pouvons utiliser ce titre plus tard chaque fois que nous voulons appeler, par exemple, cet en-tête ou l'utiliser à un autre endroit. C' est donc un autre attribut. Maintenant, par exemple, nous avons également les attributs width et height. Ainsi, chaque fois que nous ajoutons une image à notre code HTML, nous pouvons simplement ajuster cette image. Par exemple, permettez-moi de revenir ici et de remarquer ici que nous avons cette image. Bonjour, copions ce lien et laissez-moi revenir ici. Image. Donc la source sera ceci. Et bien sûr, je peux ajouter une alternative, je le ferai plus tard. Mais pour l'instant laissez-moi simplement ajouter la largeur et la hauteur afin que je puisse simplement taper. Laisse-moi courir ça d'abord pour voir à quoi ressemble cette image. Donc ça ressemble à ça. C' est très grand. Donc, si je veux juste ajuster cela, je peux simplement écrire ça. Je veux que la hauteur de ceci soit égale à 600 et que la largeur soit égale à 400 dans ce cas. Et laissez-moi revenir en arrière, rafraîchir. Donc c'est notre image maintenant. Et vous pouvez remarquer qu'il devient plus petit. Ainsi, nous pouvons ajuster la largeur et la hauteur comme, comme nous le voulons. Donc, par exemple, permettez-moi juste de le faire carré par trois cent trois cents. Retourne. Courez à nouveau. Et c'est notre image maintenant. Donc, c'est tout pour l'alternative pour, je suis désolé, pour les attributs hauteur et largeur. Néanmoins, ce que nous allons aborder, c'est, par exemple, supposons que j'ai celui-ci et que nous ayons un titre. Par exemple, si je veux juste écrire un mot, je peux simplement ajouter ici, bonjour. Et cela a un titre, cela fonctionnera correctement. Rien ne se passera. Si je vais de l'avant et que je dirige ça, rien ne se passera. Donc nous avons juste bonjour monde. Cependant, si j'ai deux lettres ou deux mots vers le titre, par exemple, bonjour monde, je ne peux pas ajouter cela à un seul titre sans citations. Donc, comme vous pouvez le voir ici, c'est une orange et c'est le bleu ciel. Donc, ce n'est sûrement pas un titre. Donc, pour y remédier, je peux simplement ajouter des mutations comme nous l'avons fait auparavant. Cependant, si j'ai juste un mot, je peux simplement ajouter sans ajouter de conditions. Et la dernière chose que je vais discuter dans cette vidéo est l'audacieux. Et dans ce cas, supposons que j'ai un paragraphe. Je suis l'uranus et je voulais être un bateau. Je peux simplement ajouter le être ici. Désolé. Permettez-moi de l'ajouter comme d'habitude. Et je vais prendre ça. Cependant, j'ai fini ici. Alors, comme on peut le voir ici, Chaim avait des unités. C' est dans les deux. Supposons que je veux juste que mon nom soit en gras. Je ne veux pas de haute messagerie instantanée et tu veux qu'ils soient normaux. Je peux revenir en arrière et juste ouvrir ceci, être sur des blocs publicitaires et le fermer après cela et ceci une fois de plus. On a bu. Comme nous pouvons le voir, nous obtenons des unités de tête et boulon. C' est donc utile, par exemple, si nous avons quelques mots spécifiques que nous devons mettre en évidence, nous pouvons simplement ajouter le boulon ou être ouvrir et fermer des balises. Et ça fera le travail comme on peut le voir ici. Et c'est tout pour les attributs. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 5. Paragraphe: Maintenant, concentrons-nous un peu sur le paragraphe. Mais tout d'abord, supposons que nous ayons quelques titres et suivis d'un paragraphe et du corps. Donc, par exemple, supposons que j'ai le titre. Et à l'intérieur de cette rubrique, nous avons cette rubrique 1. Après ça, essayons-le. Les mots sont dans la section paragraphe et je peux simplement écrire, c'est le premier paragraphe. Ensuite, après cela, je peux écrire ceci comme en ajoutant deux. Puis un autre paragraphe, ceci comme le deuxième paragraphe. Et enfin en ajoutant trois. Je suis désolé. Laisse-moi juste ajuster ça. Alors, la tête trois. C' est trois. Et enfin, c'est le troisième. Maintenant que nous avons apporté cela. Allons l'ouvrir. Et comme nous pouvons le voir ici, nous avons ceci comme première ligne. Il s'agit du premier paragraphe, titre du deuxième paragraphe et de la rubrique 3, troisième alinéa. Maintenant, laisse-moi revenir ici. Et comme vous pouvez le voir, il n'y a pas séparés. Le ils sont juste suivis les uns les autres, ils se suivent les uns les autres. Cependant, si je veux simplement les séparer par une ligne, je peux simplement utiliser le DSE, et c'est une ligne horizontale. Donc, si j'utilise HR entre le paragraphe 1, paragraphe 2, paragraphe 3, exécutez ceci. Je vais le rafraîchir. Je vois qu'ils sont maintenant séparés par cette ligne horizontale. Et revenons à notre code et travaillons avec quelque chose d'un peu différent. Et c'est la structure d'un paragraphe. Maintenant, supposons que j'ai un paragraphe et à l'intérieur de ce paragraphe, j'ai ceci est la première ligne du paragraphe. Et puis un autre paragraphe. Et à l'intérieur de cela, nous avons ceci comme la deuxième ligne du paragraphe. Rafraîchissons. Et nous avons deux lignes. Donc, c'est le premier, second et tout fonctionne normalement. Cependant, supposons que j'ai à l'intérieur de cela. Laisse-moi juste maintenant, laisse-moi juste prendre ça et coller ici comme on peut le voir. Nous avons donc deux lignes dans notre code HTML. C' est la première ligne et c'est la deuxième ligne. Cependant, si je retourne à notre navigateur et exécute ceci, nous pouvons voir qu'ils sont sur la même ligne. C' est donc la première ligne du paragraphe. C' est la deuxième ligne. Cependant, ils sont sur la même ligne. Donc, notez ici que chaque fois que nous avons un paragraphe, tout ce que nous écrivons, même si nous ajoutons juste quelques lignes, ils seront sur la même ligne dans notre navigateur. Donc on peut voir qu'ils sont ici sur la même ligne exacte. Et en fait, le nombre de lignes dans un paragraphe dépend de la taille de la fenêtre du navigateur. Donc, par exemple, si nous redimensionnons notre fenêtre de navigateur ici, laissez-moi juste à gauche un peu. Et nous pouvons voir que nous avons maintenant deux lignes. Et c'est le maximum que nous allons obtenir. Nous avons donc deux lignes. Si on redimensionnait notre fenêtre. Maintenant, si nous voulons qu'ils soient sur des lignes séparées, nous pouvons soit travailler avec des paragraphes différents comme nous l'avons écrit précédemment. Ainsi, par exemple, nous avons ce paragraphe et l'autre paragraphe. Et nous allons juste rafraîchir. Nous allons avoir deux paragraphes différents. Cependant, nous avons une autre méthode que nous allons utiliser ici, et c'est le BR. Et laissez-moi simplement écrire, par exemple, si je veux que ce soit sur une ligne séparée, je peux simplement écrire BER et ensuite le fermer ici. Et comme on peut le voir, laisse-moi courir. Et nous allons obtenir comme deuxième ligne du paragraphe. Et c'est sur une ligne séparée. Donc, ici, nous avons raté ça. Et laissez-moi juste supprimer ceci juste pour le rendre plus simple. Et le ce paragraphe à partir d'ici actualiser. Et vous pouvez le voir maintenant que nous avons ceci est la première ligne et c' est la deuxième ligne sur des clients différents ou séparés. Maintenant, la dernière chose que nous allons faire est de travailler avec le Bri. Et ce prétendre préserve à la fois les espaces et les lignes. Donc ici par exemple, si j'ajoute quelques espaces ici et reviens, rafraîchir, rien ne se passera. Ainsi, les espaces ne sont pas conservés chaque fois que nous utilisons DBR. Cela cependant, si j'utilise le pré, par exemple, supposons que j'ai Bree ici. Et à l'intérieur du Suprême. Laisse-moi juste écrire quelque chose. Par exemple, j'ai cette ligne ici, donc c'est la première ligne, et puis c'est la deuxième ligne. Cependant, il est sur la troisième ligne en fait. Donc nous avons une ligne vide ici. Et laissez-moi juste ajouter quelques espaces. Et puis laissez-moi écrire ici. C' est la dernière ligne. Maintenant, laissez-moi revenir à notre navigateur. Rafraîchir. Et comme nous pouvons le voir, nous avons donc quelques espaces ici, ici et ici. Et comme on peut le voir, nous avons une ligne vide. Donc, chaque fois que nous ajoutons une ligne vide ici, elle sera sur notre navigateur. Donc, ce pré préserve simplement tous nos espaces et lignes chaque fois que nous y écrivons quelque chose. Donc c'est tout pour le paragraphe. Ce sont des informations générales et nous pouvons toujours y creuser plus profondément. Cependant, ce n'est que l'introduction de la façon dont nous pouvons utiliser paragraphe et comment ajuster notre paragraphe comme nous le voulons. étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 6. Styles: Maintenant, parlons un peu de style. Et pour chaque composant, pour chaque tag, nous pouvons écrire son propre style. Maintenant, nous allons creuser plus profondément et commencer, chaque fois que nous écrivons notre CSS. Pour l'instant, nous pouvons simplement écrire quelques styles simples. Donc supposons, laissez-moi juste supprimer tout ça. Et supposons que j'ai un titre et un paragraphe. Supposons que j'en ai un et celui-ci, c'est un cap. Et puis il sera suivi de trois paragraphes. Ainsi, le premier paragraphe est bleu, le second est rouge, et le dernier est noir, par exemple. Tellement noir. Maintenant, si j'ouvre ceci et comme d'habitude, donc c'est un titre et bleu, rouge, noir, Cependant, ils sont tous en couleur normale et la couleur par défaut qui est noir. Et supposons que je veux que cette lettre de ce mot soit en bleu et que ce mot, qui est lu à B, en fait en rouge et affiché sera normal. Laisse-moi retourner ici. Donc, la première chose que nous allons faire est de spécifier que nous avons besoin d'un stylet. Donc, à l'intérieur du paragraphe, à l'intérieur de la balise d'ouverture du paragraphe, je peux écrire du style. Et il sera égal d'ouvrir les devis. Et je veux la couleur. Donc, c'est aussi simple que ça. Donc, la couleur sera bleue. Et comme vous pouvez le voir ici, il s'agit d'une boîte ou d'un carré indiquant que la couleur est bleue. Si nous voulons changer quelque chose, je peux simplement appuyer ici et nous pouvons changer. Donc supposons que je veux, je voulais être un peu plus sombre, donc je peux retourner ici ou un peu plus léger ici et ainsi de suite. Enfin, pour changer la couleur, je peux aussi la changer d'ici. Donc, ici, nous avons nos couleurs. Et comme vous pouvez le voir, pour chaque couche, nous avons un code spécifique. Et pour l'instant, restons avec le bleu. Donc, je peux simplement écrire la couleur sera égale au bleu et je suis désolé, il n'est pas égal est la colonne. Et pour le rouge fera la même chose. Donc, le rouge sera égal à la couleur rouge. Et on est bien. Maintenant, si je retourne en arrière et mettre à jour ceci en rafraîchissant, va obtenir bleu et rouge, n couleurs différentes. Et noir, qui est dans la couleur normale et noir. Maintenant, supposons que je veux changer la taille de ça. Je peux simplement écrire, laissez-moi écrire juste Beck. Et cette tuile que nous allons choisir est égale pour ouvrir les mutations. Et nous avons ici la taille de la police, comme vous pouvez le voir ici, entrez. Si la taille définie sera un. Supposons que je voulais qu'il soit 50 pixels. Rafraîchir. Nous allons obtenir grand et 50 pixels au lieu de la normale. Et comme vous pouvez le voir ici, si je veux le noir aussi, je peux tout simplement aussi, non ? Nous avons donc besoin du style égal à la taille de la police, égal à 50 pixels. Et rafraîchir. Nous allons obtenir noir et grand et 50 pixels chacun. Maintenant supposons que je ne veux pas faire faillite canon de ce navigateur pour être un blanc. Supposons que je voulais que ce soit un bleu ciel ou un bleu poudre. Je peux simplement écrire à l'intérieur du corps. Je peux ajouter du style. Et à l'intérieur de ce type, nous pouvons ajouter la couleur de fond. Comme vous pouvez le voir, nous avons l'arrière-plan et la couleur. Je suis désolé, nous devons l'ajouter ici donc il y aura égal à, comme vous pouvez le voir, nous avons bleu poudré, nous avons piloté était, et nous avons besoin du bleu poudre. Et laissez-moi revenir en arrière, rafraîchir. Nous pouvons donc voir que le courant d'arrière-plan est maintenant bleu poudre au lieu de blanc, ce qui est la valeur par défaut. Nous pouvons également changer la famille de polices, ou par exemple, nous ne voulons pas que ce soit normal. Et supposons que je veux ce bleu, je veux changer cette famille de polices pour charger, par exemple. Donc, à l'intérieur du style, laissez-moi juste, laissez-moi essayer avec le noir, par exemple. Donc, à l'intérieur de la fiche, je peux ajouter du style. Et à l'intérieur du style, je veux changer la famille de polices. Et nous avons une liste de toutes les familles que nous pouvons choisir. Donc nous avons de la place pour Daniel, Supposons que nous en ayons besoin. Et si je retourne ici, courez, nous pouvons voir que cette police est différente de celle-ci. Et choisissons un autre. Par exemple, pour le titre et le style. Et donc cette fois, nous avons font-family. Et nous allons essayer ça. Et la Corée par exemple. Donc, nous avons et nouveau et revenir en arrière, rafraîchir. Et c'est un titre et il est écrit en Corée. Police. Maintenant, peut même changer la taille de la police. Au lieu d'écrire 50 pixels, je peux le changer avec un pourcentage. Donc, par exemple, je peux ajouter à un 100%, revenir en arrière. Nous pouvons voir que c'est un peu plus petit qu'avant. Cependant, si je viens d'ajouter, par exemple, ici, 100% revenir en arrière sol, nous pouvons voir que cela sera beaucoup plus rapide. Nous avons donc deux méthodes aussi. Notre taille de police, soit en spécifiant les pixels, soit en spécifiant le pourcentage d'augmentation de la taille de la police. Maintenant, remarquez que chaque fois que nous écrivons quelque chose, maintenant il fait du code ML ici. Il sera automatiquement à gauche. Donc, comme on peut le voir ici. Donc, c'est l'ajout. Supposons que nous voulons changer la position de ceci est ce titre pour decenter par exemple. Une façon de le faire est d'ajuster cela à partir d'un seul. Alors laissez-moi juste supprimer ceci. Et nous avons besoin, au lieu de l'écrire sur la gauche, je peux ajouter dans le style, le texte aligné. Donc le texte aligné BY devait être au centre. Retournez, rafraîchissez-vous. Vous allez obtenir ceci comme un cap et il est au centre de la ligne. Maintenant, nous pouvons faire la même chose exacte pour chaque en-tête sont chaque paragraphe. Cependant, si nous voulons que tout notre code soit centré, nous pouvons simplement ajouter le style ND. Ici. Nous pouvons ajouter le texte aligner, je suis désolé, dans l'étude, dans le style du corps et du centre. arrière et nous allons obtenir tous nos composants ou, ou Oliver paragraphes et titres centrés au centre de chaque ligne dans notre navigateur. Donc c'est tout pour les styles. C' est une idée petite ou spécifique. Et nous allons en discuter davantage dans les prochaines vidéos quand nous allons parler de CSS et comment écrire notre code CSS. Mais pour l'instant, nous prenons ceci comme une introduction. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 7. Formatage de texte: Passons maintenant à la mise en forme du texte. Et nous avons déjà parlé du B ou des deux. Et cela va juste faire discret, il suffit de faire notre paragraphe ou en-tête et boulon. Supposons que j'ai mon corps. Juste, laissez-moi juste supprimer ceux-ci et le style et voulait être par défaut. Et supposons que j'ai le paragraphe. C' est un Bolt, Bolt. Et dans ce cas, si je voulais qu'il soit audacieux, je peux simplement ajouter la balise b ici. Laissez-moi simplement copier ceci et ajouté à la fin de notre balise et ouvrez ceci. Nous pouvons voir que nous avons ce boulon et boulon. Maintenant, revenons en arrière. Et nous avons aussi une autre étiquette d'ouverture et c'est fort. Et ils sont tous les deux les mêmes. Si fort. Et à l'intérieur enfilé cela aussi fort, comme fort fait ou tout simplement rafraîchir d'ici. On va avoir ce tableau et c'est fort. Et comme vous pouvez le voir, ils sont les mêmes. Et nous pouvons utiliser l'un ou l'autre et ils font leur travail. Maintenant, supposons que je veux écrire un paragraphe et Alec, je peux simplement commencer par ouvrir la balise I. Donc, nous avons le paragraphe I. Cela signifie métallique et c'est une italique. Maintenant, revenons, rafraîchissons et nous allons obtenir, c'est une italique et comme vous pouvez le voir, ça change. Maintenant, nous avons aussi une autre chose qui est similaire à un dialecte, et c'est le EM et signifie souligner. Et ce texte, comme taille m. Retournez, rafraîchissez-vous. Et nous allons obtenir cette taxe est souligné. C' est donc une structure très similaire à celle du délégué. Et comme nous pouvons le voir, nous avons les deux et forts. Ils sont tous les deux similaires. Ils sont métalliques et soulignés, et ils sont également similaires. Maintenant, nous avons aussi petit. Cela indique donc que nous voulons qu'un paragraphe soit petit. Et supposons que je veux l'écrire en utilisant petit. Donc, je viens juste d'écrire petit et d'ouvrir la balise. A l'intérieur de cette balise, nous pouvons écrire ceci comme un texte de modèle. Retournez, rafraîchissez, et nous allons obtenir ce petit texte. Cependant, si je le compare à un balises normales, c'est un texte normal. Retournez, rafraîchissez-vous. Nous allons remarquer qu'il y a une différence entre ces deux textes. Donc c'est la normale et c'est la plus petite. Et bien sûr, si je veux mettre en évidence quelque chose, supposons que je veux mettre en évidence cette normale. Je peux simplement utiliser la marque. Donc, je veux mettre en évidence Normal dans notre paragraphe. Je peux ajouter Mark. Et puis à l'intérieur de cette marque, je peux ajouter normal que Rafraîchir, nous allons obtenir normal surligné par jaune. Donc, la couleur jaune est par défaut. Et nous avons aussi le d et ça, et dans ce cas, supposons que j'ai ma couleur préférée. Donc, dans les scientifiques paragraphe j'ai mon favori. L' autre est bleu. Et supposons que j'ai changé d'avis et que je veux supprimer ceci et essayer rouge. Et si je retourne en arrière et que je fais ça, on peut voir que ma couleur préférée est le bleu, le rouge. Et supposons que je veux supprimer cela, donc je viens d'ajouter une ligne d'état ici, ligne horizontale sur le bleu. Je peux simplement utiliser le mot-clé del. Et dans ce cas, alors. Et à l'intérieur de ce delta, on peut ajouter le bleu. Retournez, rafraîchissez, et nous allons devenir bleus. Et comme on peut le voir, ça, comme si c'était supprimé et on le changeait en rouge. Passons maintenant à une autre chose. Et c'est là que nous voulons souligner quelque chose. Donc, nous pouvons utiliser les ins et cela représente le texte inséré ou ajouté. Donc, par exemple, si je veux souligner le favori ici, supposons que je veux souligner la couleur. Revenons à notre code et miner sous-jacent décoloré en utilisant les ins, ins. Et à l'intérieur, nous pouvons ajouter notre couleur, revenir en arrière, rafraîchir. Et comme vous pouvez le voir, nous avons souligné la couleur en utilisant l'Ion comme tag. Et nous avons aussi le type abonné et sub est l'abréviation de la pile. Donc, chaque fois que nous voulons l'utiliser, supposons que je veux changer, ou laissez-moi simplement créer un autre paragraphe. Et à l'intérieur de ce paragraphe, nous avons ce texte est abonné. Je peux ajouter ici sous et à l'intérieur de ce sous-script. Puis suivi d'un texte. Pas de dos. Et bien sûr que vous vous écrasez. Nous allons obtenir cela en tant que balises abonnées et ce mot est en fait abonné. Nous avons aussi le super scripté. Et dans ce cas, supposons que nous ayons quelque chose que nous voulons qu'il soit. Par exemple, dix à la puissance de trois. Donc paragraphe non scientifique au lieu d'écrire dix à la puissance de trois de cette façon, retournez en arrière, revenons en arrière et exécutons ceci. On va avoir dix à la puissance de trois heures. Je peux utiliser sous et Intel 3 ici. Laisse-moi juste ajuster ça. Retourne. Et nous allons obtenir dix à la puissance de cette façon. Et nous pouvons également utiliser l'abonné, Par exemple, si nous travaillons avec le même, par exemple, masse pour différents objets. Et supposons que nous les appelions m1, m2, m3. Donc au lieu de les écrire de cette façon, à l'intérieur de ce paragraphe, nous en avons, euh, un. Au lieu d'écrire ceci, cette façon et d'obtenir M-one comme dense, nous pouvons utiliser le sous-marin et en ajouter un ici. Et en dehors du sud, nous avons notre masse et faisons ça. Et comme nous pouvons le voir, nous allons obtenir l'affichage m1 et semble plus agréable. Et nous pouvons mieux le comprendre lorsque vous conduisez quelque chose qui doit être ajusté. C' est donc une idée générale sur la mise en forme du texte. Nous avons beaucoup de formats et nous pouvons les utiliser quand nous le voulons. Cependant, ce sont les plus importants. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 8. Citations et citations: Discutons maintenant de certaines conditions et citations. Donc, tout d'abord, si nous voulons juste écrire du texte à l'intérieur de quelques citations, permettez-moi juste de supprimer ceci. Tout d'abord. Et supposons que nous ayons notre paragraphe et à l'intérieur de cet essai de paragraphe que Brian a mis. Et nous voulons dire ce que Brian a dit à l'intérieur des citations. Donc, nous pouvons simplement écrire, supposons que nous voulons écrire, c'est le numéro un. Et pour créer un devis, nous pouvons simplement utiliser le mot-clé file d'attente. Et à l'intérieur de ce cube, on peut ajouter ce qu'on veut. Supposons qu'on veuille que ce soit le numéro un. Et retournez en arrière. Courir. Brand a dit que c'est le numéro un. Et comme nous pouvons le voir, ce sont des citations ajoutées. Maintenant, supposons que nous voulons coder quelque chose et que nous pouvons utiliser du code bloc à l'intérieur. Dans ce cas, par exemple, je peux utiliser un code bloc. Et à l'intérieur de ce code de bloc, nous pouvons ajouter. Par exemple. Vous pouvez voir que ce n'est pas le seul moyen. Et nous utilisons ce code bloc. Si je vais de l'avant et me rafraîchir, on peut voir qu'il y a un peu à droite. Nous avons de l'espace ici, et cela indique que nous codons quelque chose. Ce ne sont donc pas nos paroles. C' est le monde d'une autre personne. Supposons maintenant que nous voulons ajouter la citation. On peut l'ajouter ici. Donc, à l'intérieur du code bloc, nous pouvons ajouter le site, et à l'intérieur du site, nous pouvons ajouter l'URL au code. Donc HTTP, quelque chose, je ne sais pas. Et je pense que les États-Unis qui est utilisé pour une URL. Donc c'est tout pour le code bloc. Passons à une autre chose qui est l'adresse. Maintenant, chaque fois que nous voulons écrire une adresse, nous pouvons utiliser la pile d'adresses. Donc adresse et à l'intérieur de cette adresse, nous pouvons écrire quelques informations. Donc la première chose que nous allons faire est d'écrire notre nom. Alors, comment les États-Unis, et puis si nous voulons juste sauter aligné, nous pouvons utiliser DBR pour sauter. Et à l'intérieur de la deuxième ligne, nous allons écrire le, supposons que l'e-mail. Donc Hadi Yunus à et pense, oh, qui soutiennent Outlook.com. Et après cela, nous voulons écrire, par exemple, notre adresse. Alors adresse ici. Et enfin, après cela, nous devons ajouter notre emplacement. Supposons que les USA et nous le sommes, maintenant nous avons fini. Nous pouvons revenir en arrière et comme vous pouvez le voir, c'est notre adresse. C' est une italique. Nous avons d'abord notre nom, adresse e-mail et notre emplacement. Et c'est tout pour les agoras. Passons à une autre chose qui est l'abréviation. Donc, par exemple, si nous voulons parler de l'Organisation mondiale de la Santé connue sous le nom de h2, nous pouvons l'utiliser comme ceci. Donc, à l'intérieur de ce paragraphe, nous pouvons dire que l'OMS a été fondée en 1948. Maintenant, si je viens de lancer ceci, rafraîchir notre navigateur, je vais obtenir cela sans rien indiquer ce qui est l'OMS. Maintenant, si nous voulons indiquer que l'UE est l'Organisation mondiale de la santé, je peux ajouter un BBR, et voici l'abréviation. Et le titre sera Organisation mondiale de la Santé, organisation, médiation. Et à l'intérieur, nous pouvons ajouter, OK. Maintenant, revenons ici, exécutez ça. Et comme vous pouvez le voir, nous avons ce rho et nous avons un peu d'amidon souligné. Et cela indique qu'il s'agit d'une abréviation de quelque chose d'autre. Et c'est l'Organisation mondiale de la Santé en fait. Maintenant, en ce qui concerne l'image, revenons en arrière et prenons cette URL. Donc, nous avons une URL d'une image qui dit bonjour. Et à l'intérieur de cette image, nous pouvons créer ici IMG. Donc, la première chose que nous allons faire est d'écrire la source de cette image et nous avons notre source. Et après cela, nous allons juste ajuster. Donc, nous pouvons écrire que la largeur sera égale à 200 et la hauteur à être égale à 250. Et dans ce cas, laissez-moi juste revenir avant de faire quoi que ce soit, rafraîchir le document et nous allons faire représenter Hello comme ça. Maintenant, ajoutons une citation à cela. Alors ajoutons que c'est bonjour. Et à l'intérieur de notre code, suivant, l'imagerie peut écrire un paragraphe. Et à l'intérieur de ce paragraphe, Nous avons besoin de site. Donc, nous allons ajouter le site. A l'intérieur du côté. Nous pouvons ajouter le, ce que cette image est à propos. Donc, dans ce cas, nous allons simplement ajouter bonjour. Et le créateur ou le créateur de cette image est inconnu. Maintenant, revenons à des centaines en arrière. Et comme vous pouvez le voir, nous avons cité que le titre, ou de quoi s'agit-il cette image ? Et dans ce cas, c'est le cas, bonjour. Maintenant, nous pouvons également ajouter ici une alternative. Comme nous pouvons le voir, nous avons sur ce que c'est et t. Donc, dans ce cas, supposons. Si quelque chose s'est produit ou si un adulte a été généré à partir de cette URL, nous allons simplement le remplacer par ce mot bonjour. Oh, laisse-moi juste ajouter une photo qui dit bonjour. Et dans ce cas, laissez-moi juste écrire quelque chose ici juste pour rendre cette URL invalide. Donc j'aime les lettres supplémentaires. Retournez et exécutez ça. Et comme nous pouvons le voir, cette image ou cette URL générer, génère un additif. Et nous allons utiliser l'alternative. Et dans ce cas, c'est une image qui dit bonjour. Et comme nous pouvons le voir, nous allons obtenir une photo qui dit bonjour et mettre en place l'image elle-même. Laisse-moi juste ajuster ça. Et maintenant, on est bon de retourner à la course. Nous allons obtenir les photos puisque maintenant l'URL est valide. Nous avons aussi une attaque qui couvre les répressions alignées. Et dans ce cas, si nous le voulons, et supposons que nous voulons inverser cette ligne. Donc nous avons un paragraphe et une spirale, je suis désolé, laissez-moi l'écrire. Et nous avons le paragraphe. A l'intérieur de ce paragraphe, nous voulons inverser le signe. Donc, c'est une ligne. Et pour être écrit de droite à gauche, au lieu de l'écrire de gauche à droite. Alors maintenant, revenons. Rafraîchi, rien ne se passera. Nous allons obtenir une ligne simple, et c'est une structure normale en ligne. Maintenant, revenons. Si nous voulions l'obtenir de gauche à droite, nous allons utiliser la vidéo. Et dans ce cas, BD. Et la direction est d, l, donc de droite à gauche. Et si je copie ceci, collez-le ici et courez, nous allons remarquer que c'est la même ligne, mais écrit à l'envers. Donc, si nous voulons le lire, donc DES est une ligne et il serait écrit de droite à gauche. Maintenant, cela peut être utile lors de l'écriture de certaines chaînes ou de l'écriture de certains entiers, et nous voulons l'inverse d'entre eux. Donc, au lieu d'avoir à écrire une boucle for à partir du point de fin jusqu'au point de départ, nous pouvons simplement inverser un temps inverse et commencer à travailler avec eux de cette façon. Donc, dans cette vidéo, nous présentons le code bloc, l'adresse, abréviation AB, IRR, et bien sûr le site et la vidéo. Et cela étant dit, c'est la fin de cette vidéo. Et la suivante. 9. Liens: Maintenant, discutons du mode longueur. Donc, tout d'abord, laissez-moi juste l'écrire une fois de plus. Comment pouvons-nous accéder à un lien ou comment pouvons-nous ajouter un lien à notre code HTML ? Donc, à l'intérieur de notre paragraphe, nous pouvons simplement ajouter un lien en utilisant la référence h, je suis désolé, à l'intérieur de notre a. Donc, ici, nous avons le lien. Donc supposons que je veux aller à Google pour qu'elle soit EBP HTTP, la barre oblique avant de colonne deux fois, nous obtiendrons. Et si j'ajoute ici Google, laissez-moi juste ouvrir ceci. Et comme nous pouvons le voir, nous avons Google. Si j'appuie sur ce mot, nous allons automatiquement aller sur google.com. Et ici, on peut chercher ce qu'on veut. Maintenant, revenons à notre code et commençons discuter comment pouvons-nous changer cette longueur ou ce qu'il faut faire avec l'esclave. Donc, la première chose que nous allons discuter est les URL absolues par rapport aux URL relatives. Donc, chaque fois que nous écrivons HTTP, cela indique qu'il s'agit d'une URL absolue. Il s'agit donc d'une adresse web complète, et nous l'ajoutons à l'attribut hyper reference. Maintenant, parfois nous avons des URL relatives, et ces URL sont essentiellement un lien vers une page du même site Web. Donc, par exemple, si nous avons, supposons que nous avons Google.com et à l'intérieur de Google.com nous avons des images. Ainsi, nous pouvons simplement écrire une URL qui nous emmène de Google à des images Google sans même écrire le HTTP. Ceci, nous pouvons simplement écrire des images Google.com et cela fonctionnera bien. Maintenant, une autre chose à penser est la couleur du lien. Maintenant, comme vous pouvez le voir ici, la couleur du lien est en fait bleue tout d'abord. Et puis laissez-moi juste le changer juste pour voir la différence. Et à l'intérieur, laissez-moi le nommer Google avec la minuscule g, juste pour le changer, rafraîchir. Et comme vous pouvez le voir, c'est un Google. Maintenant, si je veux changer d'érudit, je peux revenir ici et ajouter une heure de style ici. Donc nous avons le style et la couleur, par exemple, nous pouvons changer la couleur en bleu et nous allons obtenir ce bleu. Supposons que je voulais qu'il soit rouge. Je peux simplement ajouter du rouge, revenir en arrière, rafraîchir. Et voici notre lien maintenant et lisez. C' est donc essentiellement la même chose qu'un paragraphe. Même si nous avons affaire à un lien, nous allons faire exactement la même chose qu'avant. Maintenant, notez ici que chaque fois que nous écrivons un lien, nous créons un lien. Nous avons cette ligne ici. Donc, une façon de supprimer cela est de simplement. Droit et style. Nous avons besoin d'une décoration de texte. Nous avons donc une décoration de texte et nous devions avoir neuf ans. Et maintenant, nous allons y retourner et exécuter ça. Et comme vous pouvez le voir, nous n'avons pas de ligne et nous avons déjà enlevé la couleur ici. Donc, nous allons avoir la couleur par défaut, qui est un peu comme le violet. Et si j'appuie, prédis-moi comme avant, rien ne changera, mais cette ligne disparaîtra. Maintenant, si je presse ici encore une fois, pas seulement ça, nous allons aller vers le haut et google.com dans la même fenêtre ou dans le même onglet et la fenêtre. Ainsi, par exemple, je voulais ouvrir ce document dans une nouvelle fenêtre ou un nouvel onglet. Je devrais le préciser. Voici donc l'importance d'une cible. Donc, au lieu d'écrire ceci, il suffit d'écrire le lien et d'écrire simplement le week-end Google spécifiez la cible ici. Donc la cible sera égale à, nous avons 44 exemples, donc nous avons l'auto, et cela ouvre le document dans la même fenêtre ou onglet qu'il a été nettoyé. C' est donc la valeur par défaut, et nous avons aussi le vide et cela ouvre le document dans une nouvelle fenêtre ou un nouvel onglet. Nous avons aussi le parent d'un dopant, le document dans le cadre parent. Et enfin, nous avons le haut et il ouvre le document dans le corps entier de la fenêtre. Supposons que nous voulions ouvrir une nouvelle fenêtre. Dans ce cas, je peux utiliser le vide, donc je vais utiliser vide. Retournez, rafraîchissez, appuyez sur. Et comme vous pouvez le voir ici, j'ouvre toujours un nouvel onglet ou une nouvelle fenêtre au lieu de l'ouvrir et la même fenêtre. Donc, en utilisant cela, nous pouvons toujours avoir notre page principale. Cependant, nous avons également le lien auquel nous faisons référence sur une autre fenêtre ou onglet. Et revenons ici. Maintenant, supposons que nous voulions ajouter une image, et chaque fois que nous cliquerons sur cette image, cela nous mènera à un autre endroit. Donc nous avons déjà une image ici. Alors c'est bonjour. Copions le lien et travaillons avec. Et chaque fois que nous appuyons sur cette image, elle nous emmène automatiquement, nous emmène sur Google.com. Et dans ce cas, une façon de le faire est de monter et comme d'habitude, donc c'est l'hyper référence. Et à l'intérieur de cette référence, nous allons écrire google.com. Cependant, au lieu d'ajouter Google ou d'écrire Google, nous allons ajouter une image dans ce cas. Donc IMG, comme d'habitude. Et à l'intérieur de la source, je vais simplement et cette image. Laisse-moi revenir ici et me noyer bientôt. Notez que maintenant nous avons une image et chaque fois que nous appuyons dessus, cela nous mènera à google.com. Donc, nous allons juste ajuster ceci pour que la hauteur soit. Égal à 40, par exemple, et largeur égale à 30. Je pense que c'est bon. Tu es de retour R1. Et comme vous pouvez le voir ici, nous avons un faible. Chaque fois que nous appuyons dessus, résonnons, il faudra, prend, nous emmène sur google.com. Maintenant, revenons en arrière et voyons maintenant comment vous pouvez utiliser un lien dans notre HTML sont notre navigateur principal. Supposons donc que nous ayons quelques exemples, exemple 123456. Donc ici, supposons que j'en ai un, je suis désolé, h un. Et c'est l'exemple un. Ensuite, nous avons un exemple dans Biograph. Supposons que cet exemple soit quelque chose. Ensuite, nous avons 111 fois. C' est l'exemple deux. Et dans ce cas, nous avons aussi un paragraphe et cet exemple comme d'habitude. Ensuite, nous avons aussi pour plus d'exemples, donc je vais juste les copier à ce stade. Donc, j'écris simplement ceci et puis copie l'autre. Donc, cet exemple est, et nous avons quelques informations maintenant, laissez-moi juste copier ceci, lire plus de fois. Donc, nous avons 123. Maintenant, laissez-moi changer M. Donc nous avons ici 456. Maintenant, si je vais de l'avant et ouvrir ce fichier dans notre navigateur, nous pouvons voir que nous avons, ceci est l'exemple un. Cet exemple est l'exemple 23456. Cependant, supposons que je dois passer à l'exemple 56 immédiatement. Donc, au lieu de les écrire comme ça, je peux ajouter quelques liens ici. Donc, la première chose serait dans un paragraphe. Donc, un sera l'ID de notre paragraphe ou notre exemple auquel nous devons sauter. Nous devons donc spécifier un id folate pour cela. Donc, par exemple, à l'intérieur de l'ensemble S1, Nous allons spécifier que c'est e cinq. Et bien sûr ici, nous avons une idée et les deux V égal à E6 indiquant que c'est un exemple, des exemples x. Maintenant, si nous revenons ici, donc h référence sera à hashtag et l'ID, qui est cinq dans ce cas. Maintenant, je peux écrire ici. Passez à l'exemple 5. Laisse-moi ouvrir ça. Et comme nous pouvons le voir ici, nous avons passé à l'exemple 5, cependant, il n'est pas encore ajouté. Alors. Parce qu'on l'a écrit ici au lieu de l'écrire à l'intérieur de l'étiquette a. Maintenant, retournez en arrière. Et comme vous pouvez le voir, nous avons passé à l'exemple 5. Si j'ai un précédent, il me faudra tout de suite pour en citer l'exemple cinq. Et cela fonctionnera si nous avons tant d'exemples. Permettez-moi donc de copier ceci et d'imprimer, par exemple, dix fois. Je ne sais pas. Et maintenant, si je reviens, et donc nous allons avoir beaucoup d'exemples. Cependant, si je presse sur la densité va me prendre immédiatement à l'exemple cinq, quoi qu'il soit. Et la même chose s'applique bien sûr aux circuits d'exemple. Donc, nous avons E6 indiquant qu'il s'agit d'un exemple six sous-alinéa a et hashtag E6, et aller à l'exemple six. Maintenant, si je lance ça, retournez ici et rafraîchissez. Je peux voir que nous avons cependant à l'exemple six. Et si je clique dessus, cela me prendra immédiatement à l'exemple six. Maintenant, il y a un ET apparaît ici à la fin du navigateur est parce que nous n'avons pas de données. En suivant ces deux exemples montrent que supposons que j'ai quelques données ici. Nous avons donc des titres au-dessus et ci-dessous. Et si je reviens, fais ça, on verra qu'on a de la bière. Donc, si je vais à l'exemple cinq, je peux synthétiser l'exemple cinq en haut de la page. Si je passe à l'exemple six, je peux également voir que c'est l'exemple six en haut de la page également. Maintenant, la dernière chose que nous allons discuter est d'écrire un email à quelqu'un. Et dans ce cas, laisse-moi revenir ici. Et au lieu de simplement créer une hyper référence ou une longueur heureuse qui nous amène à l'image. Nous pouvons simplement ajouter l'image elle-même ici. Alors laissez-moi juste aller de l'avant et supprimer ceci. Maintenant, chaque fois que nous voulons écrire un email. Alors laissez-moi juste commencer par, c'est un lien e-mail. Et puis après cela, je vais écrire un et à l'intérieur de la FRH, je vais utiliser le courrier pour ainsi envoyé à quelqu'un, par exemple, pas. Et si je veux ajouter le sujet, je peux simplement ajouter le point de délégation et ensuite le sujet. Le sujet serait, par exemple, de bonjour monde. Alors bonjour. Et chaque fois que nous voulons écrire un espace à l'intérieur de cette référence H, je devrais ajouter le pourcentage 20. Donc le pourcentage 20 indiquera que je suis, j'ai besoin d'un espace ici. Alors bonjour à nouveau et envoyer un e-mail d'ici. Maintenant. Alors à chaque fois. Laisse-moi ouvrir ça. Et comme nous pouvons le voir ici, nous avons ceci comme un lien e-mail envoyer l'image d'ici. Donc, chaque fois que j'appuie sur cela, il me conduira automatiquement à mâle et il définira le sujet et le destinataire de l'e-mail par lui-même automatiquement, puisque je l'ai indiqué ici dans l'image. Donc mâle deux indique la personne que je vais envoyer l'e-mail à l'adresse, comme vous pouvez le voir ici. Puis suivi par le sujet. Bien sûr, nous avons le sujet égal à Bonjour à nouveau. Et enfin, nous pouvons aussi ajouter, au lieu de juste le sujet, nous pouvons également ajouter le corps. Donc, je peux simplement écrire ici et corps. Et à l'intérieur du corps, je peux aussi écrire ce que je veux. Et chaque fois que je veux utiliser un espace, je peux simplement ajouter le pourcentage 20. Donc, c'est tout pour envoyer un e-mail et c'est tout pour le lien en général est une idée très générale. Nous avons tellement de choses que nous pouvons faire avec un lien ou une référence en HTML. Mais pour l'instant, il s'agit d'une introduction générale. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 10. Images: Maintenant, en ce qui concerne les images, je crois que nous avons une bonne idée sur les images tendent maintenant. Et ce n'est pas un, juste un résumé de ce que nous avons appris sur les images et comment les utiliser. Alors laissez-moi tout d'abord supprimer cela et commencer par créer une image. Et comme d'habitude, nous avons notre longueur ici. Et comme avant, nous pouvons spécifier la largeur et la hauteur. Donc la largeur sera égale à 200 et la hauteur serait égale à 200. Donc ces choses que nous savons, et si je reviens, alors c'est notre image ici. Et comme nous pouvons le voir, nous nous sommes ajustés comme nous le voulons. Maintenant. Par exemple, si j'ai cette image et comme nous l'avons dit précédemment, cette URL ne fonctionne pas. Nous pouvons écrire ici image de Google. Et quelque chose s'est passé dans cette URL, peut-être en la copiant ou par erreur, nous ajoutons quelque chose, et ce n'est pas une URL valide, comme nous l'avons dit, nous allons obtenir l'alternative pour cette image. Dans ce cas, nous avons écrit que nous avons besoin d'image de Google. Maintenant, supposons que nous voulons écrire cette image ou cette image sur la droite. Une façon de le faire, une barre S en spécifiant ce flux de tuiles vers la droite. Maintenant, on peut ouvrir Stein ici. Ainsi, le style sera égal et à l'intérieur du style. On doit ajouter le flotteur. Et dans ce cas, nous avons besoin que l'image soit à droite. Donc, si je rafraîchis, je peux voir que l'image de Google est maintenant sur la droite. Laisse-moi juste copier le bon lien ici. Dans ce cas, c'est le lien. Laissez-moi juste le copier dans mon code ici. Et nous allons obtenir cette image là où nous le voulons. Donc nous le voulons à droite, nous allons l'obtenir ici. Maintenant, nous pouvons également spécifier la largeur et la hauteur pour être pourcentage. Supposons donc que je veux que la largeur soit égale à 100%. Et dans ce cas, si je le spécifie comme un 100%, je vais obtenir la largeur comme ceci. Maintenant, laissez-moi revenir en arrière et spécifier la hauteur pour être égale à un 100%. Aussi, retournez en arrière, rafraîchissez. Et comme vous pouvez le voir, nous allons obtenir le premier ou le premier lien ou l'image initiale que nous avons obtenu à partir de ce lien. Maintenant, c'est donc une façon de spécifier la largeur ou la hauteur, soit en spécifiant le pourcentage, soit en spécifiant le pixel. Maintenant, une autre chose est, nous avons parlé est chaque fois que nous voulons ajouter une image pour être une référence, nous pouvons simplement écrire un et à l'intérieur de ceci a, Je vais utiliser l'image et cela me prendra, par exemple, à SGP, google.com. Et comme nous l'avons dit précédemment, chaque fois que nous écrivons la référence a et nous devons fermer ici la balise div. Et comme on peut le voir, si je reviens maintenant, exécutez ça, nous l'avons sur la droite. Je peux cliquer dessus. Et si je clique dessus, cela me conduira automatiquement à Google.com. Ce sont donc des idées de base sur les images. Nous avons tellement d'autres informations et idées que nous pouvons utiliser. Cependant, je pensais juste que je pouvais simplement fusionner toutes les idées dont nous avons parlé dans les vidéos précédentes. Dans cette vidéo, juste pour clarifier ou avoir une idée claire de ce que nous pouvons faire avec les images et comment les utiliser. Et bien sûr, comment manipuler la taille ou l'emplacement de notre image dans notre code HTML ou notre navigateur. Donc c'est tout pour les images. se voit dans la vidéo suivante. 11. Tableaux: Parlons maintenant des tables et du HTML. Alors, comment peut recréer notre table ? Donc, tout d'abord, nous avons notre corps. Et à l'intérieur de ce corps, nous pouvons commencer par créer la table en utilisant la balise table. Appuyez sur Entrée. Donc c'est notre table maintenant. Maintenant, nous devons, une fois que nous avons la ligne et la colonne. Donc, si nous voulons créer une ligne, nous pouvons simplement utiliser la croissance de la table. Et à l'intérieur de cette loi de table, supposons que je n'ai qu'un composant ou un élément dans notre table. Et cela nous donne une donnée de table unique. Donc, les données représentent des colonnes dans ce cas. Donc TDI. Et laisse-moi juste essayer un. Maintenant, si je vais de l'avant et que je l'ouvre, nous pouvons voir que nous allons en avoir un. C' est donc une table de taille 1. Nous n'avons qu'un élément dans l'écurie du Père Noël. Supposons maintenant que je veux une table d'une ligne et deux colonnes. Je peux ajouter ici DD. Et à l'intérieur de ce TED, je peux ajouter le numéro. Supposons que je le veux, laissez-moi revenir ici, rafraîchir. Et comme vous pouvez le voir, nous avons maintenant une table. Et nous avons dans ce tableau deux articles ou deux chiffres, 12. Et maintenant, ils ne sont séparés par rien. Ils sont juste affichés comme et comme ils sont ici. Alors revenons en arrière. Et supposons que je veux créer une matrice de, une matrice de trois par 33 par trois en fait. Et dans ce cas, j'aurai trois rangées et trois colonnes. Donc, la première ligne aura trois éléments ou trois chiffres. Dans ce cas, nous avons 123 et la deuxième rangée, j'ai besoin de créer une autre ligne en utilisant le TR. Et à l'intérieur de cette rangée, j'aurai aussi trois numéros, donc 456. Et enfin j'ai ma dernière rangée et à l'intérieur de la course, j'ai les trois derniers chiffres. Ils sont 789. Donc DD 7, TD 8. Et bien sûr, TD 9. Si je reviens maintenant, actualisez ceci, nous pouvons voir que nous avons une table de trois lignes et trois colonnes. Comme nous pouvons le voir, nous avons 123456789. Donc l'idée générale. Chaque fois que nous voulons créer une ligne, nous allons utiliser DTI. Chaque fois que nous allons ajouter un ampère ou comme un moment précis, nous allons utiliser le Td. Et cela signifie des données de table. Maintenant, comme nous pouvons le voir ici, nous avons une matrice trois par trois. Supposons que je veux ajouter quelques titres ici. Donc, c'est, je peux spécifier que ce sont le premier nombre, deuxième et le troisième chiffre. Et je peux vraiment le faire en créant une nouvelle ligne ici. Donc nous avons TR à l'intérieur de cette rangée. Je peux ajouter th. Donc, th. Et à l'intérieur de la scène, je peux écrire et b1, puis suivi par l'âge et B2. Puis enfin th et B3 revenir en arrière, rafraîchir. Et comme nous pouvons le voir, ils le sont et un boulon, comme nous pouvons le voir numéro un, numéro deux, numéro trois sont dans les deux. Maintenant, changeons l'exemple et traitons de la bordure de la table. Jusqu' à présent, nous n'avons pas de frontières, comme nous pouvons le voir, elles sont simplement affichées et elles forment la table. Cependant, nous n'avons pas encore les chaudières. Laissez-moi revenir à notre code et supprimer ceci. Donc, à l'intérieur de notre table, créons, ajoutons des données en fait. Donc, la première chose que nous allons faire est d'ajouter des personnes et nous allons leur demander des renseignements sur la dispersion. Donc le Prénom, LastName, et H. Donc la première chose que nous allons faire est de créer la première ligne. Et à l'intérieur de cette ligne, nous allons ajouter trois colonnes. Donc, le premier indiquera le prénom. Donc le prénom, puis le nom de famille TH. Et enfin l'âge, l'âge. Maintenant, après avoir créé ce rho, nous pouvons commencer par ajouter nos données. Ainsi, le premier client ou la première personne sera TD. Donc, ce sont les données TLB, Alex, et le nom de famille sera un point. Et bien sûr, nous devons ajouter est h. Et dans ce cas, supposons que l'âge est de 30 ans. Et puis créons un autre pro. Et à l'intérieur du rouleau, nous avons John, et nous avons aussi J. Et enfin l'âge sera de 45 ans. Et la dernière personne serait que nous venons d'ouvrir à la, Je suis désolé, ici nous devons ajouter la cellule TD de la sont sélectionnés juste le doyen John Jay, et DD 45. Et maintenant à l'intérieur de notre dernière rangée, nous allons ajouter un Aimee derrière eux de cette façon. Et ce sera un, et enfin, l'âge sera de 25 ans. Maintenant, si je retourne ici et que je fais ça, nous avons notre table jusqu'à maintenant, prénom, nom et âge. Maintenant, si je veux ajouter le plaisancier, je peux les ajouter à chaque rangée et colonne. Donc, chaque fois que j'ajoute une ligne ou des données, je suis désolé, une donnée ou un titre, je peux ajouter la bordure. Cependant, une façon de traiter tout cela, au lieu d'ajouter chaque fois ici, par exemple, à Boulder et ensuite l'utiliser, je peux simplement ajouter et la tête. Donc, à l'intérieur de notre tête, après le titre, nous pouvons ajouter du style. Ainsi, à l'intérieur de ce genre, on peut changer ce qu'on veut ici. Donc, par exemple, je veux changer la table quantique. À l'intérieur de la table, je veux changer l'en-tête de la table et les données de la table et donc, et à l'intérieur de ce changement Eigen , par exemple, le Boyden, je voulais faire bouillir pour être un pixel, et je veux qu'il soit noir solide. Maintenant, revenons vers le bas. Et comme nous pouvons le voir, nous avons évité oh, 1%. Et c'est pour que maintenant, si je retourne ici et que je me laisse simplement simplifier cela ou le minimiser, reviens. Et comme nous pouvons le voir aujourd'hui, devenez plus petit. Maintenant, supposons que je ne veux pas que ce soit si chic. Je veux juste être, juste que ma table soit simple. Dans ce cas. Je peux enlever la bordure extérieure. Ce cas, je peux utiliser l' effondrement de la bordure et être égal à s'effondrer, rafraîchir. Et comme vous pouvez le voir, nous allons obtenir une version plus simple de la table sans les bordures extérieures. Maintenant, comme nous pouvons le voir ici, l'écurie comme un peu désordonnée, seules les informations sont ajoutées ensemble. Et supposons que nous voulons changer le rembourrage à l'intérieur de l'huile, l'intérieur des données de la table. Donc, une façon de le faire est d'ajouter à notre style. On veut le titre. Et donc th td ouvrir ceci et nous voulons qu'ils aient le rembourrage de 15 accès par exemple. Donc si je vais de l'avant maintenant et rafraîchis ça comme nous pouvons le voir. De là, nous avons 15, d'ici nous sommes 1515 et ainsi de suite. Donc, le rembourrage est fondamentalement la distance minimale que nous allons avoir entre la bordure de la table et l'élément lui-même. Maintenant, comme nous pouvons le voir ici, 15 pixels, c'est beaucoup. Laisse-moi juste essayer cinq pixels. Et, et je pense que c'est bon. Maintenant, si I1 les titres à être à gauche, je peux simplement ajouter à l'intérieur du style, l'âge et, et j'ai besoin que le texte aligné soit à gauche. Retournez, rafraîchissez-vous. Et rien ne se passerait puisqu'ils sont à la tour gauche. Nous devons ajuster la taille de la table. Donc, à l'intérieur de notre table, après avoir créé cette table, nous pouvons simplement ajouter ici cette tuile. Et nous avons besoin que la largeur soit égale à 100%. Et dans ce cas, avant de revenir rafraîchir, nous pouvons voir que la table est maintenant beaucoup plus audacieuse. Et dans ce cas, chaque fois que nous utilisons la taxe alignée à gauche, nous allons obtenir prénom, nom et âge à gauche. Cependant, si je supprime simplement cela, promeut Dieu. Donc, supprimez le texte aligner à gauche votre dos et actualiser. Nous pouvons voir que le Prénom, Nom, et l'âge, vont être au centre de notre boîte. Et c'est parce que le titre est généralement au centre et tous les autres éléments. Donc, chaque fois que nous utilisons TD, ils seront automatiquement sur le côté gauche de notre boîte. Maintenant. Jusqu' à présent, nous avons le titre horizontal. Comme nous pouvons le voir, nous avons le prénom, le nom et l'âge. Mais supposons que je veux créer une table qui représente les numéros de téléphone et le, et cela, par exemple, nous pouvons dire que cela représenterait le téléphone. Donc nous allons être à droite à l'extrémité gauche et à droite sur les cases de droite, nous allons écrire le numéro de téléphone, le réel Pour un numéro. Donc, une façon de le faire est de créer la table comme d'habitude. Donc, tout d'abord, laissez-moi revenir ici. Après notre table, nous allons créer une autre table. A l'intérieur de cette table, nous allons avoir la première rangée. A l'intérieur de la première rangée, nous allons créer le premier titre de table et nous avons le téléphone. Et puis nous allons ajouter nos données. Et dans ce cas, nous allons ajouter les chiffres réels. Supposons donc que nous ayons 555555 pour D4, et c'est notre première rangée. La deuxième rangée sera également comme ceci. Donc, le traitement sera par téléphone et les données seront le numéro. Et dans ce cas, nous avons ce numéro. Alors revenons en arrière et exécutons ça. Et comme on peut le voir, nous avons le téléphone, et c'est le cap vertical. Ainsi, comme nous pouvons le voir, les en-têtes sont verticaux et les nombres par défaut sont sur les cases de droite. Alors vérifiez les choses. Nous pouvons simplement ajouter avant notre table un titre. Donc H on sera ceci est un exemple de l'horizontale. Et puis, et après l'écurie. Donc, entre les deux tables, nous allons écrire chacun a également montré cela comme un exemple. À 30 filles ayant. Maintenant, si je retourne en arrière et que je l'exécute encore une fois, nous pouvons voir qu'il s'agit d'un exemple de titre horizontal. Comme nous pouvons le voir, les titres sont horizontaux et ici les titres sont verticaux. Et c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons discuter des tables plus et vous voir ensuite. 12. Table 2: Supposons maintenant que nous voulions ajouter une légende à notre table. Donc, au lieu d'écrire un titre ici, nous allons ajouter ceci comme une légende à notre table, et la même chose s'applique ici. Donc, une façon de le faire est qu'à l'intérieur de notre table, nous pouvons ajouter une légende. Et on peut dire qu'il s'agit d'un cap vertical. Supprimons ceci et revenons à notre première table. Et bien sûr, à l'intérieur de ce tableau, ajoutez également une légende. Re, n'ajoute pas. Et dans ce cas, si je reviens maintenant et noie ce rafraîchissement, nous allons remarquer qu'il s'agit d'un titre horizontal et de dés vertical. Et ils sont au centre de notre table. Donc, si je veux qu'ils soient sur le côté gauche afin que je puisse écrire du texte aligné sur la gauche. Maintenant, retournez en arrière, rafraîchissez. Et nous pouvons simplement voir que cette rubrique horizontale est maintenant à gauche. Et nous pouvons aussi faire la même chose pour le droit. Je ne l'ai pas utilisé maintenant. Mais nous pouvons aussi l'utiliser. Courir. Et nous pouvons voir que c'est notre position horizontale, et c'est maintenant la position la plus appropriée. Maintenant, supprimons ces tables et travaillons avec une nouvelle juste pour voir une nouvelle fonctionnalité. Et dans ce cas, nous allons ici et bien sûr nous en sortir. Et nous avons encore cela aussi. Maintenant, revenons à notre corps et créons une nouvelle table. Et bien sûr, la largeur sera comme d'habitude. Donc, la largeur de ceci sera égale à un 100%. Et maintenant, nous pouvons travailler avec notre table. Donc, la première chose que nous allons créer est le premier trait à l'intérieur de la première rangée, nous allons simplement ajouter le nom pour que les titres soient nommés et l'autre titre serait en fait un numéro de téléphone. Donc numéro de téléphone. Et nous allons ajouter une autre ligne pour une seule personne. Et donc les premières données seront le nom, comme nous l'avons dit. Supposons que le Yunus. Et bien sûr, le second sera le numéro de téléphone. Et dans ce cas, laissez-moi supposer que c'est mon numéro de téléphone. Maintenant, si je peux retourner ici et faire ça pour voir qu' on a le nom d'un certain nombre d'unités et le numéro de téléphone. Et supposons que j'ai deux numéros de téléphone et que je veux les ajouter tous les deux ici. Donc, une façon de le faire est de créer deux cellules à l'intérieur de cette colonne. Donc si je retourne ici et à l'intérieur du th, alors c'est le deuxième, l'âge, le titre de la table. Je peux ajouter col span et à l'intérieur de cela je peux spécifier le nombre de sons que je veux fusionner ensemble. Donc, par exemple, ici dans ce cas, je veux, et je peux simplement ajouter DD et un nouveau numéro de téléphone. Et dans ce cas, c'est le deuxième numéro, qui arrivera. Et comme nous pouvons le voir, nous avons maintenant deux numéros de téléphone, le premier et le second, et ils sont achetés sous la section numéro par défaut ou le solde du numéro de téléphone. Maintenant, puisque nous avons fait cela pour les colonnes, nous pouvons faire exactement la même chose pour les lignes. Et dans ce cas, permettez-moi de le démontrer à l'intérieur de nos tables. Donc, et si table, nous allons avoir le TR et bien sûr le nom, puis suivi du nom. Donc je veux juste les déplacer. Donc, nous allons avoir un nom. Et puis ici pour le numéro que le nom ici. Et les deux sur les chiffres ici et ici. Donc, et les scientifiques vont avoir $0.02. Pour ce faire, nous allons créer notre premier titre, c' est-à-dire le nom, cependant, suivi des données. Et dans ce cas, ce sera mon nom. Alors, les États-Unis. Et bien sûr à l'intérieur de notre deuxième rangée, nous allons créer notre premier cap, deuxième hélium, désolé. Donc, ici, nous avons l'âge. Et puis 78s, je peux spécifier la portée de la ligne. Et j'avais besoin d'être deux. Et à l'intérieur, nous allons ajouter le numéro de téléphone. Et enfin, nous avons les deux numéros de téléphone. Nous avons donc le premier, et c'est égal à td. Et la seconde sera une nouvelle rangée. Comme nous l'avons dit, nous avons besoin de trois rangées. Donc, TR. Et si je reviens maintenant, lancez ça pour que nous puissions voir que nous avons Mon nom, ajouter Uranus que le numéro de téléphone. On a deux numéros de téléphone. Alors qu'est-ce qu'on a fait ici ? Laisse-moi revenir en arrière. Et comme nous pouvons le voir quand je spécifie la ligne 22, j'ai juste pris deux cellules ou deux lignes et les fusionner ensemble. Donc, si je supprime cela de mon code, et voyons ce qui va se passer. Exécutez ceci une fois de plus. Je vois que nous avons la deuxième rangée suivie du nombre. Cependant, le troisième numéro sera là. Maintenant, une façon de faire face à cela est simplement d'ajouter le dernier titre. Alors. Un titre vide. Je suis désolé, je ne l'ai pas sauvé. Rafraîchir. Et comme on peut le voir, nous avons un anti-îlot. Donc, juste pour supprimer cela et ne pas confondre le lecteur, nous pouvons simplement utiliser la rowspan et fusionner acheté pousse à se rassembler. Puisque nous avons besoin de quatre numéros et ils représentent tous les deux le même numéro de téléphone ou les deux sur les numéros d'un même utilisateur. Laisse-moi revenir ici et enlever cette époque inconnue. Donc c'est notre table. Maintenant, supposons que j'ai besoin de la bordure intérieure et extérieure, donc je vais y aller, je vais enlever l'effondrement R1. Et comme nous pouvons le voir maintenant, nous avons plus de table de fantaisie. Maintenant. Et supposons que je veux augmenter ou modifier l'espacement des frontières. Donc dépourvue d'espacement est en fait la distance entre la bordure intérieure et extérieure et décider de cette table. Alors laissez-moi revenir ici et à l'intérieur de ma table ou à l'intérieur du style ici, nous pouvons ajouter que nous voulons que la table soit, par exemple, l'espacement des bordures et soit égale à cinq pixels. Retournons et exécutons ça. Et comme vous pouvez le voir, il a changé et il a augmenté. Donc, par exemple, si j'utilise maintenant 15, vous revenez R1. Nous pouvons remarquer qu'il change et la distance entre la frontière intérieure et extérieure va augmenter. Maintenant, chaque fois que nous créons une table, nous n'avons pas besoin d'ajouter simplement des éléments ou des mots. Nous pouvons ajouter tout ce que nous voulons. Ainsi, par exemple, nous pouvons ajouter un paragraphe, une liste, un mot, ou même une autre table. Laissez-moi revenir ici et supprimer ceci, un espacement des frontières et ajouter ici l'effondrement de la frontière. Comme d'habitude. Retourne R1. Et laisse-moi aller ici et on doit le sauver. Je suis désolé. Pas de course bancaire. Et voici notre table. Cependant, à l'intérieur de notre table, permettez-moi de supprimer les lignes et les colonnes et de démarrer une nouvelle table. Donc, si je vais de l'avant et les titres, je suis désolé, jusqu'à ici, je peux commencer par créer la première rangée. Donc, la première rangée, à l'intérieur de la première rangée, nous allons créer notre première colonne. Ainsi, la première colonne, les premières données seront composées de paragraphes. Donc B, c'est un paragraphe. Et puis laissez-moi simplement créer un autre paragraphe. C' est donc un autre paragraphe. Retournons ici. Et comme nous pouvons le voir, si je crée ceci, nous avons la première colonne ou le premier élément à l'intérieur de notre table. Maintenant, si je retourne en arrière et nous allons créer une autre colonne. Et à l'intérieur de cela, nous allons simplement créer une liste. Ou créons une autre table par exemple. Donc, à l'intérieur de TD, nous allons créer la deuxième table. Donc, nous allons taper la table. Et à l'intérieur de cette table, nous allons créer la première ligne. Versets de la première rangée de 212. Et puis la deuxième rangée sera également composée de deux colonnes, donc 34. Maintenant, si je retourne en arrière et que je lance ça, nous allons récupérer les 22 articles dans notre table extérieure ou plus grande table. Et ces deux éléments seront spectrographes et liste. Notre table. Maintenant, notre deuxième ligne sera composée d'une liste et d'un mot. Donc, à l'intérieur de notre table, nous allons créer la deuxième rangée. Donc, ici, après avoir obtenu, après avoir terminé de la première rangée, créer la deuxième et à l'intérieur de la seconde aura un mot. Supposons donc que j'ai une charge et que le deuxième élément à l'intérieur de la deuxième ligne sera une liste. Donc, pour créer cette liste, nous allons simplement utiliser une liste non ordonnée. Et supposons qu'on ait besoin de la TD. Nous avons donc créé un TD, et ensuite nous pouvons créer notre liste. Liste donc non ordonnée. Dans cette liste, nous avons quelques éléments de liste. Donc Banana, un autre élément de liste, mappeur. Et le dernier sera ananas. Donc maintenant, nous avons fini. Retournons et exécutons ça. Et comme nous pouvons le voir, nous avons notre table et se compose de paragraphes, tableau, Word et liste. Et c'est tout pour la table. Cependant, nous pouvons encore modifier quelques choses. Par exemple, nous pouvons changer la couleur d'arrière-plan de ce tableau. Donc, nous pouvons utiliser l'ID pour le faire. Donc nous avons notre table, et je veux dire la table extérieure ou la plus grande table. Et dans ce cas, je peux ajouter ici l'idée d'être égal à, par exemple, celui. Et maintenant, si je veux accéder à cette table, je peux simplement l'utiliser dans le style. Donc, à l'intérieur de notre style, je peux spécifier que j'ai besoin de l'ID d1. Avons-nous ouvert les accolades et j'ai besoin de la couleur de fond pour être égale à cela. Supposons que pur, but, je pense qu'est-ce qui était bon ? Et maintenant, retournez en arrière, rafraîchissez. Et comme vous pouvez le voir, notre table se tourne vers le but. Maintenant, nous pouvons également spécifier que nous voulons la première ligne soit égale à B d'une couleur noire et la deuxième ligne d'une colonne, blanche ou grise par exemple. Nous pouvons donc le faire en spécifiant simplement la ligne et la colonne et en spécifiant l'arrière-plan, la couleur, la taille ou la famille de polices. Et c'est tout pour le cône. Nous pouvons faire tant de choses avec des tables en HTML, mais c'est comme d'habitude, une idée générale. Et vous pouvez creuser plus profondément dedans et en apprendre plus par vous-même. Mais pour l'instant, on va s'en tenir à ça. Alors, c'est ça. C' est la fin de la vidéo de la table. Cela étant dit, on se voit dans la prochaine. 13. Listes: Maintenant, parlons plus de moins. Et dans nos codes HTML précédents, nous avons créé une liste. Et dans cette vidéo, nous allons approfondir ce sujet. Donc, tout d'abord, laissez-moi juste supprimer tout cela et revenir à notre défaut normal. Bien, donc nous y voilà. Donc nous avons notre tête et notre corps. Donc, pour créer une liste, comme nous le savons, si nous voulons commencer par la liste non ordonnée, nous pouvons taper q et entrer. Et voici notre liste non ordonnée. Et par défaut, si j'ai ajouté quelques éléments ici. Donc et laissez-moi juste ouvrir ce navigateur par défaut. Et comme on peut le voir ici, on a de la banane et de l'Apple. Et c'est la liste par défaut non ordonnée. Maintenant, comme nous pouvons le voir par défaut, nous avons les balles de disque. Donc, c'est la même chose si j'écris dans le style que je veux que l'heure de la liste soit un bureau. Et dans ce cas, si je vais de l'avant et me rafraîchir, ne vais rien changer puisque c'est déjà une balle de disque. Maintenant, supposons que je veux qu'ils soient cercles. Je peux simplement revenir à mon code et changer le bureau, le type de disque en cercle. Retournons ici et rafraîchissez-vous. Et comme on peut le voir, maintenant, nos points de balle, notre cercle au lieu de bureau. Nous avons aussi le carré, par exemple, dans ce cas, laissez-moi juste revenir en arrière et changer ce cercle, deux carrés S. Nous avons donc différents types de points à balles. Et comme nous pouvons le voir ici, nous avons le quand il pointe comme carré. Et par exemple, si nous ne voulons pas de points de puces, dans ce cas, je peux définir mon type sur none. Donc, comme nous pouvons le voir ici, si nous nous rafraîchissons, nous allons obtenir notre moins sans aucun point de balle. Passons maintenant à la liste ordonnée. Et dans ce cas F i1. Pour créer ma liste ordonnée, je peux simplement taper O L. Et à l'intérieur de cette liste, je peux définir mes éléments de liste. Comme d'habitude, et Anna et Apple. Retournons, rafraîchissez-vous. Et comme nous pouvons le voir, nous allons obtenir ma liste par ordre croissant de un à deux, puisque je n'ai que deux articles. Maintenant, supposons que je veux les commander par lettres au lieu de chiffres. Dans ce cas, je peux revenir ici et définir mon style comme d'habitude. Ainsi, le type de la liste ordonnée sera égal à un ensemble de nombres. En retournant, exécutez ça, je vais avoir un, B, et C et ainsi de suite. Maintenant, supposons que je les veux. La lettre normale remonte et comme nous pouvons le voir, ils changeraient. Et bien sûr, par exemple, si je les veux avec des chiffres romains, je peux revenir aussi et changer cela en i, indiquant que je les veux en romain. Et comme nous pouvons le voir, nous pouvons utiliser les numéros de drame comme commande dans ce cas. Maintenant, bien sûr, si je veux qu'ils soient aussi romains mais pas capital dans ce cas, je peux les sécher. Oeil normal et comme vous pouvez le voir, je vais avoir comme dans les numéros de Brahman. Maintenant, nous avons aussi quelque chose qui s'appelle une liste de description. Et dans cette dernière semaine peut énumérer des éléments. Mais nous pouvons ajouter, par exemple, une description pour cet article. Dans ce cas, supposons que j'ai la banane et Apple et que je veux ajouter la couleur. Donc, je peux ajouter une banane, un jaune, et une pomme, rouge dans ce cas, par exemple. Et si je reviens, laissez-moi simplement créer notre liste de description. Et comment on fait ça ? Nous pouvons simplement écrire d et appuyer sur Entrée, et ceci est une liste d'inscription. A l'intérieur de cette liste, je l'ai fait. Je peux utiliser le DT. Et si j'entre un café ou une banane dans ce cas. C' est donc l'article et DD, juste pour indiquer que nous allons entrer la description de cet article. Donc DD, Go et moi pouvons simplement écrire, par exemple, jaune. Maintenant, revenons à DT et DD et lisons. Et bien sûr, si je retourne en arrière et me rafraîchir, il suffit de sauvegarder ceci et de le sauvegarder. Maintenant, revenez rafraîchi. Et nous allons obtenir la banane, suivie de la description, puis la pomme et également suivie de la description. Maintenant, je peux simplement ajouter ici, par exemple, la couleur. Juste pour clarifier ce que je fais. Et dans ce cas, laisse-moi revenir une fois de plus. Et comme nous pouvons le voir, nous avons nos fruits et la couleur qui y est associée. Néanmoins, passez à la liste imbriquée. Et fondamentalement, la liste imbriquée est une liste qui se trouve dans une autre liste. Et dans ce cas, supposons que j'ai, par exemple, une liste et c'est la plus grande. Donc, il n'est pas ordonné. Donc, je vais utiliser un. Donc, à l'intérieur de cette liste, j'ai l'élément de liste. Supposons que j'ai des ordinateurs portables ou des téléphones, puis suivi d'un autre élément de liste. Et dans ce cas, c'est un ordinateur portable. Et bien sûr, cet ordinateur portable, j'ai beaucoup, beaucoup de types. Supposons que je veux créer une liste de ces ordinateurs portables. Donc, je peux créer une liste ONU, non ordonnée à l'intérieur de cet élément de liste. Et à l'intérieur de cette liste non ordonnée, je peux créer, disons HB, Mark, et ainsi de suite. Maintenant, si je retourne à mon navigateur rend, nous pouvons voir que nous avons des téléphones, ordinateur portable, et à l'intérieur de l'ordinateur portable désintox, HP et Mack. Maintenant, notez ici que les points par défaut sont bureau. Donc la balle du bureau a donné la priorité. Cependant, si nous le sommes, nous les avons déjà utilisés. Et les points de puces par défaut sont maintenant les cercles. Maintenant, nous avions aussi la liste horizontale et nous pouvons la créer en utilisant le style. Nous pouvons changer le style d'affichage de nos articles de liste. Donc supposons que je dois juste lister des éléments. Dans ce cas, nous avons notre ordinateur portable et formé. Laisse-moi retourner ici. Et laissez-moi juste créer un identifiant pour cela. Et dans ce cas, laissez-moi le nommer C 5. Maintenant, à l'intérieur de notre style, ici, à l'intérieur de notre tête, nous pouvons créer cette tuile. Donc, ici, nous avons du style. Et bien sûr, si je veux utiliser ceci ou accéder à cette liste non ordonnée. Et l'idée est C5. Nous devons accéder aux éléments de la liste et à l'intérieur de cette liste non ordonnée. Et dans ce cas, je dois changer l'affichage pour éclairer. Et en utilisant cela, je peux voir que maintenant mes éléments de liste sont, mes articles sont répertoriés de manière horizontale. Donc, chaque fois que nous utilisons l'illuminé ici dans notre écran, ils vont être affichés horizontalement. Donc ce n'est pas pour le moins. Et laissez-moi juste ajouter quelques choses. Et ils ne sont pas clairement liés à la liste. Cependant, je les trouve qu'ils sont importants et qu'ils devraient être ajoutés dans notre classe. Donc, la première chose est l'élément DIV. Et cet élément est un élément de bloc et va toujours commencer une nouvelle ligne et prendre toute la largeur disponible. Donc, c'est fondamentalement juste comme une boîte. Laisse-moi juste le démontrer ici. Déplaçons est et supprimez les équipes. Et je peux créer cet élément. Donc, à l'intérieur de cette div, je peux dire bonjour, monde. Donc, par exemple, si je veux que le gras apparaisse, je peux ajouter dans mon style ici que je veux que la chaudière soit égale à un pixel, disons, et noir massif. Donc, je veux que la couleur soit noire et la largeur de la bordure d'un pixel. Et comme nous pouvons le voir ici, nous avons maintenant des chaudières conscientes. Et ils sont maintenant de la taille d'un pixel. Et bien sûr, ils sont d'autre couleur noire. Si je voulais changer de couleur, disons que je peux y retourner. Et comme vous pouvez le voir, désolé, I1, I2 et ainsi de suite. Et bien sûr, nous allons obtenir HelloWorld et la frontière est inclinée maintenant. Donc, comme nous pouvons le remarquer, cet élément va s'étirer vers la gauche et guider autant qu'il le peut. Donc, comme nous pouvons le voir ici, il pour aller sur toute la page de et de ce point de fin jusqu'au dernier bit de l'écran. Maintenant, un autre élément est l'élément span, et dans ce cas, laissez-moi revenir ici. Donc, cet élément span est un élément en ligne et ne démarre pas sur une nouvelle ligne et ne prend que autant que nécessaire. Alors laissez-moi juste démontrer l'utilisation de cet élément span. Alors laissez-moi aller et supprimer ceci, la créer notre portée. Et bien sûr, laissez-moi vous dire que j'ai besoin de HelloWorld. Et laissez-moi me taire. A l'intérieur de notre expansion, je vais ajouter mon style pour être bordure, un pixel comme d'habitude et noir solide. Je reviens maintenant, rafraîchis ça. Nous pouvons voir que nous avons bonjour monde à l'intérieur de la frontière. Cependant, le pointeur prendra juste autant que nécessaire. Maintenant, supposons que j'ajoute quelques mots dehors. Donc, cette plage est dans un paragraphe. Et bien sûr, j'ai quelques mots en dehors de la travée. Donc je peux dire que je suis Adi et bon. Par dans ce cas, si je retourne en arrière et nous pouvons voir que ce Hello World est entre ces mots et la frontière va juste prendre autant que nécessaire. Donc, nous pouvons voir que le mot est à l'intérieur de la boîte et il s'adapte parfaitement. Maintenant, si nous voulons styliser cette étendue et les éléments, par exemple, supposons que j'ai ceci. J' ai donc ici le paragraphe, à l'intérieur du paragraphe, j'ai de la nourriture. Il y a des récupérations. Et nous avons le rouge, le bleu et le jaune. Cependant, je veux que chaque couleur soit présentée et la couleur respective. Donc maintenant, si je retourne ici et des lambdas, je vais y trouver trois couleurs, rouge, bleu et jaune. Et pour ce faire, nous pouvons simplement ajouter ce coin pour s'étendre. Alors, travée et je peux taper du pain. Et le style de ceci. Nous pouvons utiliser la couleur pour être égale à cela. Et le week-end le rendre audacieux, si amusant. Et bien sûr, je dois ajouter et attendre d'être égal à. Maintenant, si je retourne en arrière et exécute ceci, je peux voir que nous avons lu et que c'est le point de terminaison. Donc on peut faire exactement la même chose pour le bleu et le jaune. Et c'est ainsi que nous pouvons styliser notre portée et nous pouvons faire la même chose exacte avec notre élément div. Donc c'est tout pour cette vidéo. se voit dans la prochaine. 14. CSS: Et parfois chaque fois que nous écrivons notre code HTML, certaines choses peuvent devenir un peu désordonnées puisque nous allons ajouter, par exemple, des styles et des détails. Et dans ce cas-là, nous ne comprenons peut-être pas exactement ce que nous faisons dans notre fichier HTML. Voici donc l'importance d'un fichier css. Et à l'intérieur du CSS, nous allons styliser nos éléments ou nos données. Et dans ce cas, au lieu d'écrire le style ici, temps d'installation et notre tête. Donc, nous n'avons pas vraiment besoin d'écrire Stein ici, ou même d'ajouter un style dans chaque composant. Donc on n'a pas besoin de faire ça. Nous pouvons simplement écrire heure seul ou notre fichier CSS où nous allons styliser nos composants. Donc, je viens de créer mon fichier point CSS, j'ai nommé fichier. Et à l'intérieur de ce fichier, je viens de dire que je veux être une couleur de fond et la couleur de fond est acquise. Maintenant, j'ai ici h un dans ce cas. Et j'ai besoin de relier ces deux fichiers ensemble. Donc, une façon de le faire est d'utiliser la longueur et nous avons CSS. Donc c'est Stylesheet et je veux lier le fichier, le TSS. Maintenant, si je vais de l'avant et, je suis désolé, retournez et ouvrez ça. Dans le navigateur par défaut. Je vais y aller, je vais obtenir celui avec une couleur d'arrière-plan de bande passante d'unquote. Maintenant, nous pourrions aussi vouloir, j'ai deux couleurs différentes pour différents titres. Supposons que j'ai une autre rubrique qui dit « Monde ». Et dans ce cas, si je retourne ici et me rafraîchir, je vais obtenir la même couleur pour les deux titres. Cependant, une façon de faire face à cela est de créer des idées différentes, séparer des idées pour chaque composant, puis d'utiliser ces idées dans notre fichier CSS. Donc supposons que je veux que cela soit acquis et la seconde de la couleur rouge, dans ce cas, je vais créer un ID ici. Donc c'est le premier et c'est le deuxième. Maintenant, si je reviens et que je peux spécifier que pour l'ID d'abord, j'ai besoin que la couleur d'arrière-plan soit égale pour se produire. Et pour la carte d'identité. Deuxièmement, je suis désolé, ici, je dois me lever, par exemple. J' ai écrit le premier avant. Donc, cette couleur d'arrière-plan doit être égale à. Retournons en arrière et lançons ça. Je vais obtenir le premier avec la couleur de fond d' Alcoa et le second avec la couleur de fond du rouge. Donc, comme vous pouvez le voir, nous pouvons utiliser des idées. Et F, Par exemple, je veux que les deux soient aqua. Je peux simplement dire que je veux qu'on soit égal à l'aqua. Cependant, si j'ai aussi quelques autres titres, et je veux seulement ces deux couleurs de fond de l'eau et simplement ajouter ici. La seconde. Et bien sûr, j'ai besoin d'ajouter le hashtag. Maintenant, supprimons cela, revenons en arrière et disons que j'ai ici la couleur rouge. Cependant, maintenant je cours ceci, je vais obtenir aquifère les deux avec eux puisque l'ID est priorisé sur le type des composants. Donc, tout d'abord, nous avons l'identifiant, puis nous avons le type. Maintenant, si j'ai aussi un autre cap ici. Supposons donc que j'ai un titre à l'intérieur après notre paragraphe et que cela indique la fin. Et je n'ai pas précisé d'idée pour la vente. Et si je vais de l'avant et que je cours, je vais obtenir la couleur d'arrière-plan par défaut des amis, puisque j'ai spécifié que pour chaque ID, pour chaque titre, la couleur d'arrière-plan doit être lue à moins que j'aie la première ou la seconde. Et dans ce cas, la couleur de fond sera une citation. Maintenant, nous avons aussi quelque chose qui s'appelle la classe. Et dans ce cas, chaque fois que nous créons une classe, elle est similaire à l'idée, mais généralement elle est utilisée pour plus d'un composant. Et dans ce cas, laissez-moi juste l'utiliser pour supposons que j'ai un p et que je veux spécifier la classe pour être égale aux couleurs. Et dans ce cas, si je veux accéder à ce paragraphe et à mon CSS, je peux utiliser l'opérateur point et suivi du nom de la classe et le nom du sablier est coloré et dire, laissez-moi vérifier ses couleurs. Et bien sûr, je peux changer la couleur de fond comme d'habitude. Donc, la couleur de fond serait égale à C vert, voyons. Et retour Ramdas, je vais changer la couleur de fond en utilisant la classe. Donc, nous pouvons soit utiliser du verre ou de l'ID, ou même utiliser l'ensemble du composant en l'appelant simplement. Par exemple, en ajoutant 11 chacun à répondre. C' était donc juste une idée générale à propos de notre fichier CSS. Et ce fichier nous pouvons ajouter tout ce que nous voulons concernant cette période de nos composants. Et dans ce cas, nous pouvons simplifier les choses dans notre code HTML. Puisque nous allons écrire la majeure partie de notre code ici, nous ne voulons pas ajouter le style et les rendre plus compliqués et décrits. Nous pouvons les ajouter et nous pouvons réellement les créer dans notre fichier CSS et juste les lier en utilisant cette feuille de style de relation de lien. Et hyper référence devrait être notre fichier que CSS. Et c'est essentiellement pour, cette vidéo, est juste une vidéo d'introduction sur la façon de lier notre fichier, notre fichier CSS, à notre fichier HTML. Et comme nous l'avons dit, nous pouvons faire tant de choses. Nous sommes avec notre fichier CSS, mais pour l'instant nous allons rester avec cela. Alors on se voit dans la prochaine vidéo. 15. Types d'entrée: Maintenant, discutons des types de MBA. Supposons donc que nous voulons un nom de l'utilisateur. Et dans ce cas, nous avons besoin d'une boîte où l'utilisateur peut placer ou ajouter son nom. Et dans ce cas, si nous voulons créer cette boîte, nous avons besoin de la balise formulaire. Donc, si j'écris formé ici et appuyez sur Entrée, un formulaire avec une action se produira. Et on verra ce qu'on peut en faire dans une minute. Mais pour l'instant, l'action ne sera rien. Nous allons simplement entrer notre nom et cliquer sur la case. Ou le consultant si vous voulez créer une entrée quatre sous-réseaux. Permettez-moi donc de vous montrer ce formulaire. Donc, tout d'abord, nous devons créer notre label. Et dans ce cas, laissez-moi juste nommer le nom. Donc c'est le prénom et à l'intérieur de mon étiquette par Dr. Prénom. Et après avoir créé notre label, nous devons créer notre entrée. Donc maintenant cette entrée sera de type texte. Et bien sûr, laissez-moi juste essayer, ma contribution ici. Et laissez-moi simplement créer un ID pour plus tard. Donc, l'idée sera, donc ceci est FirstName, donc un chemin d'image. Et bien sûr, je peux créer un but pour mon apport. Et dans ce cas, je le nomme aussi chemin. Maintenant, si je veux sauter la ligne comme d'habitude, nous pouvons utiliser DBR juste pour sauter la ligne. Laisse-moi ouvrir ça et voir ce qui s'est passé ici. Donc, si nous créons ceci, nous allons obtenir notre prénom. Ceci est retardé avec juste créé et suivi de notre entrée. Ici, nous pouvons ajouter quelque chose. Par exemple, j'ajoute Hadi. Maintenant rien ne se passera parce que nous n'avons pas ajouté d'action. Et nous n'allons pas ajouter une action dans cette vidéo, car nous apprenons simplement comment créer nos entrées et comment les styliser. Maintenant, revenons ici à notre code et ajoutons une autre étiquette. Dans ce cas, laissez-moi juste sauter une ligne ici aussi pour mieux le voir. Et bien sûr, j'ai besoin d'une étiquette, mon nom et de mon nom, donc L. Et puis j'ai besoin d'entrer le nom de famille. Bien sûr, l'entrée sera de type texte également nommé l'ID pour être égal à lname. Et puis bien sûr, le nom sera également choisi pour être le même que l'ID. Et bien sûr, sauter la ligne, revenir en arrière et rafraîchir. Et comme nous pouvons le voir, maintenant nous avons le prénom suivi de ses marques, et le nom de famille suivi de Sparks. Maintenant depuis ici, je n'ai pas ajouté. Il, juste ajouté et rafraîchir. Donc nous pouvons voir que maintenant nous avons deux boîtes. Nous avons deux entrées. Nous pouvons ajouter notre prénom et notre nom de famille. Et dans ce cas, nous pourrions vouloir ajouter le fond ou l'entrée soumettre. Et dans ce cas, chaque fois que nous appuyons sur soumettre, cela nous mènera, cela nous mènera à autre part. Maintenant, comme nous l'avons dit dans cette vidéo, nous allons juste discuter de la façon de créer ces entrées. Donc, si je retourne ici, je peux créer une autre entrée. Cependant, cette fois, le type n'est pas du texte. Nous avons un HTML n'a soumis et bien sûr, le nom dévaluer, je suis désolé. Je peux ajouter un dévoué à soumettre. Maintenant, si je retourne en arrière et rafraîchir, je peux voir que j'ai ici l'entrée soumettre. Donc, chaque fois que j'appuie sur la soumission, ça me conduira à un autre endroit. Par exemple, nous pouvons vouloir ajouter ce prénom et ce nom ensemble et en un mot, dans une phrase, puis simplement loués à l'utilisateur. Par exemple, disons bienvenue. Disons que j'entre 30 et unités. Dans ce cas, chaque fois que j'appuie sur soumettre, il va générer une lettre de bienvenue disant bienvenue avait des années. C' est donc un exemple de la façon dont nous pouvons l'utiliser. Cependant, nous devons ajouter l'action de l'ancienne forme. Et pour l'instant, nous allons continuer à les créer. Supposons que nous ayons un nom d'utilisateur et un mot de passe. Et dans ce cas, nous voulons que l'utilisateur entre son mot de passe comme un champ de mot de passe. Donc on peut juste lui demander d'entrer son mot de passe sous forme de texte. Puisque le mot de passe doit être le naziisme. Et pour ce faire, nous pouvons créer une étiquette au début, et cette étiquette sera notre nom d'utilisateur. Et puis demandez le nom d'utilisateur. Et bien sûr, ajoutez notre contribution. À l'intérieur de notre entrée, nous avons le type à taxer puisque nous ajoutons le nom d'utilisateur au début. Et si je leur ai demandé d'antagoniser un texte, je dois lui demander d'entrer son mot de passe maintenant. Donc l'étiquette sera maintenant tilleul. Laissez-moi juste une image B et mot de passe. Ensuite, bien sûr, je devrais ajouter l'entrée et l'heure pourrait être mot de passe. Maintenant, si je retourne ici et me rafraîchir, voir que nous avons le nom d'utilisateur et le mot de passe. Cependant, je peux écrire ici mon nom d'utilisateur et mon mot de passe seront comme ça. Donc on a un écran noir, on peut voir ce que j'écris maintenant. Donc, c'est essentiellement pour le mot de passe, et c'est ainsi que nous pouvons créer le champ de mot de passe. Donc, comme on peut le voir, il est écrit comme des cercles noirs. Maintenant, passons à un autre type d'entrée, et c'est le type radio. Et dans ce cas, par exemple, j'ai trois types. Disons que je veux demander le genre. Dans ce cas, je peux taper mâle, femelle ou autre. Donc, pour faire ça, laisse-moi revenir en arrière. Et à l'intérieur de notre formulaire, nous pouvons créer notre entrée pour être radiale au lieu de texte. Et puis bien sûr, je peux ajouter notre étiquette. Donc, l'étiquette sera son nom, il Mail par exemple. Et je demande si c'est un mâle, puis sautez aligné. Et bien sûr, l'amplitude sera une radio temporelle de plus. Et laissez-moi juste créer notre travail. Donc, l'étiquette sera qu'il a fait dans ce cas femelle, puis a sauté la ligne. Et bien sûr, je peux également ajouter l'entrée 11 fois. Et dans ce cas, l'entrée sera également de type radio. Et puis nous avons notre label. Donc l'étiquette sera maintenant autre. Et nous pouvons écrire à leur année. Maintenant, si je retourne à mon navigateur ici, et, et donc nous pouvons voir que nous avons mâle, femelle ou autre, et je peux choisir un ou plusieurs. Et dans ce cas, je peux demander avant de créer ces quatre, je peux demander un, disons trois ans. Et quel est ton sexe ? Et après ça, laisse-moi déprimer. Et comme nous pouvons le voir, nous pouvons choisir dans cette liste. Donc nous pouvons choisir soit mâle, femelle, ou autre. Et comme avant, bien sûr, je peux ajouter l'entrée de soumission afin que je puisse créer mon entrée à soumettre dans ce cas. Et si je retourne rafraîchir, nous pouvons voir que nous avons soumis. Et si je présente soumettre cela devrait me prendre ou générer quelque chose d'autre. Maintenant, passons à un autre type d'entrée. Et dans ce cas, ce seront les cases à cocher. Ainsi, la case à cocher du type d'entrée, définie comme le nom indique une case à cocher. Donc, pour les réseaux P8, permettez-moi juste de supprimer ceci. Et tout d'abord, je crée mon entrée. Et le type pourrait être, comme on l'a dit, vérifier les bogues. Et bien sûr, laissez-moi travailler. Par exemple, parlons des ordinateurs portables. Donc L1, donc saut sur sera et l'entrée est deuxième entrée sera également de type case à cocher et l'étiquette sera L2. Dans ce cas, nous pouvons ajouter, par exemple, des mathématiques. Et si je vais de l'avant maintenant et créer notre contribution soumettre. Donc, c'est de type soumettre et laissez-moi revenir en arrière, rafraîchir. Et comme vous pouvez le voir, nous avons HB NMAC. Désolé, c'est la question pour l'autre. Pour le, comme nous l'avons dit, les boutons radio. Mais pour l'instant laissez-moi juste supprimer ceci et revenons, rafraîchir. Donc, comme on peut le voir, nous avons HB et Mac. Et j'ai oublié d'ajouter quelques lignes ici. Donc nous pouvons ajouter une ligne ici. Et ici. Maintenant, retournez en arrière, rafraîchissez. Nous pouvons voir que nous avons HB, Matt et soumettre, donc nous pouvons choisir un ou plusieurs. Et puis chaque fois que nous appuyons sur soumettre, ce qui nous mènera comme réinitialisation à un autre endroit. Maintenant, revenons ici et discutons du bouton d'entrée et de la façon dont nous pouvons travailler avec. Donc, si nous supprimons ceci dans notre formulaire, chaque fois que nous voulons créer bouton, bouton, nous n'avons pas vraiment besoin de cette formule. Donc, je peux créer l'entrée, et ce sera de type bouton. Et je peux choisir cette alerte onclick quelque chose. Donc, dans ce cas, chaque fois que nous cliquons dessus, il va alerter bonjour. Et maintenant, je retourne ici. Et comme vous pouvez le voir, nous avons quelque chose, désolé, c'est ce que nous devrions arriver et maintenant la valeur sera, Je ne peux pas augmenter, par exemple, un clic moi. Alors cliquez sur moi. Et maintenant, revenons en arrière et exécutons ça. Alors rafraîchissez. Et comme vous pouvez le voir, nous avons le bouton Cliquez sur moi. Et chaque fois que j'appuie dessus pour générer ceci, par exemple, cette alerte. Et ça dit bonjour. Maintenant, si j'appuie sur OK, je peux y retourner. Et chaque fois que je tape dessus ou j'appuie dessus, il générera cette alerte disant que cette page dit, et le message que je vais envoyer à l'utilisateur. Revenons à notre code et parlons du champ numérique. Et ce type d'entrée est le nombre et définit le champ d'entrée numérique. Nous pouvons donc utiliser les attributs minimum et maximum pour ajouter la restriction numérique et le champ d'entrée. Donc, par exemple, si je veux que l'utilisateur ajoute une quantité, par exemple, et je peux vouloir la spécifier entre 110. Je peux utiliser les attributs min et max pour m'assurer que l'utilisateur ajoute la valeur correcte ou la valeur dans le domaine spécifique. Alors maintenant, créons notre téléphone. Donc, nous en avons quatre. Dans ce cône. Nous pouvons créer notre label. Et cette étiquette sera je limite la quantité pour l'instant. Et bien sûr, notre quantité. Ce sera entre, comme nous l'avons dit, 110. Et puis je peux créer notre entrée. L' entrée sera du numéro de type, comme nous l'avons dit. Et je peux utiliser le minmax. Donc, le minimum sera égal à un et le maximum sera égal à 210 dans ce cas. Maintenant, laissez-moi simplement créer notre type d'entrée soumettre et sauter aligné ici. Maintenant, retournez en arrière, rafraîchissez. Et comme on peut le voir, nous avons une quantité entre 110. Donc nous pouvons soit utiliser ces curseurs, soit et comme nous pouvons le voir, si j'en arrive à dix, ça ne changera plus depuis notre timbre maximum. Maintenant, si je présente Soumis devrait m'emmener ailleurs. Cependant, maintenant nous n'avons pas ajouté notre téléphone, rappelez-vous. Mais pour l'instant, par exemple, si j'ai demandé 44 et appuyez sur submit, cela générera ce dicton que la valeur doit être inférieure ou égale à dix. Et si je choisis moins cinq et présente soumis à dire que la valeur doit être supérieure ou égale à un. Donc, c'est essentiellement pour le champ de nombre. Et comme nous pouvons le voir, nous avons tellement de types d'entrée et nous en discuterons plus tard aussi dans la prochaine vidéo. 16. Types d'entrée 2: Continuons maintenant notre discussion sur la quantité ou le type d'entrée numérique. Et dans ce cas, nous avons dit que nous pouvons ajouter le minimum et le maximum. Cependant, nous pouvons également ajouter cet onglet et la valeur initiale. Donc, par exemple, si je retourne à mon code et après avoir ajouté le minimum et le maximum, permettez-moi d'ajouter la maxime à chasser. Le minimum sera 0. Et je peux ajouter cette balise dans ce cas. Donc, l'étape, par exemple, je choisis d'entrer dans l'étape de dix. Dans ce cas, l'utilisateur sera obligé d'entrer soit 0102030 et ainsi de suite jusqu'à ce qu'il atteigne le nombre 100, qui est le maximum. Et je peux également ajouter la valeur et w, par exemple, il serait égal à 20 dans ce cas. Donc, si je retourne ici, rafraîchir, donc la valeur initiale sera 20 sur, je peux en ajouter dix et rien ne se passera. Il remontera à 20. Si j'ajoute 30, disons qu'il reviendra aussi à 20. Et bien sûr, si j'ajoute un 150, il dira que la valeur doit être inférieure ou égale à 100. Ainsi, comme nous pouvons le voir, le minimum et le maximum sont toujours appliqués. Cependant, la valeur sera toujours égale à 20. Et dans ce cas, laissez-moi simplement supprimer cette valeur et coller à la taille de l'étape. Et revenons en arrière et frais. On n'a rien ici. Cependant, si j'entre quatre, veuillez entrer une valeur valide. Les deux valeurs ajoutées les plus proches sont 010. Donc, comme nous l'avons dit, nous avons choisi la taille du pas pour être égale à dix. Et dans ce cas, nous devrions nous en tenir à choisir quelque chose qui est multiple de benzo. Si je choisis dix, c'est correct. Quand t est également correct, et ainsi de suite jusqu'à atteindre le 100. Et ce sera aussi correct. Donc c'est tout pour les étapes numériques. Passons maintenant à un champ de date. Et par exemple, si je veux demander à l'utilisateur d'entrer son anniversaire, je peux utiliser le type de date d'anniversaire dans ce cas. Donc, si je retourne en arrière et supprime cela, je peux créer l'étiquette au début. Le testament serait de type, nommez-le. C' est l'anniversaire dans ce cas. Et j'ajouterai l'anniversaire. Et bien sûr, je dois créer mon entrée. Cependant, le type sera, dans ce cas, date, et je peux sauter aligné et créer mon entrée soumettre comme d'habitude. Et maintenant, revenons à notre navigateur, actualisons. Et comme vous pouvez le voir, nous avons l'anniversaire et suivi du type de date. Et je dois entrer ici à la date et le mois et bien sûr, l'année, disons à 1000 dans ce cas. Et si j'appuie sur Soumettre, il devrait générer quelque chose. Et maintenant supposons que nous voulons ajouter quelques restrictions. Et nous pouvons ajouter le minimum et le maximum. Par exemple, si je retourne à mon code et à l'intérieur de l'étiquette, disons l'étiquette ici. Je peux ajouter l'anniversaire. Cependant, je peux lui demander d'entrer une date avant, par exemple, poof avant 2 mille. Et bien sûr, dans mon type d'entrée, le max sera ici. Donc max sera égal à, disons 199. Et bien sûr, je peux ajouter le 1212. Bien sûr, je suis désolé, E, on peut ajouter 30. Et revenons à notre code. Et comme nous pouvons le voir, jusqu'à ce que je l'ai fait avant 2 mille. Donc, si j'ajoute 1000 ici et 7572001, cliquez sur Soumettre. La valeur doit être 3012 ou antérieure, 11999 ou antérieure. Maintenant, supposons que je veux entrer une date après 2 000. Donc, dans ce cas, je peux demander à l'utilisateur d'entrer une date après 2 mille et le minimum dans ce cas sera ici. Donc minimum sera égal à, Je peux choisir d'être 2001 pour laisser dire. Et dans ce cas, revenons à notre navigateur et voyons ce qui s'est passé. Donc maintenant, si je saisis quoi, 1999 soumettre des offres interbedded le champ. Ok, je suis désolé. Ici, nous devons ajouter quelque chose, disons par phi. Et comme nous pouvons le voir, valeur doit être la date spécifique à cent, dix cents ou. Et dans ce cas, nous venons de changer cette année 2001. Et il devrait fonctionner correctement et générer ou prendre nous emmène à une autre page. Et c'est essentiellement pour la restriction de champ de date. Maintenant, supposons que nous voulons montrer une couleur. Et dans ce cas, nous pouvons utiliser la couleur du type d'entrée. Et revenons à notre code comme d'habitude. A l'intérieur de nos quatre. Créons notre label. Et disons que pour cette étiquette sera en utilisant la couleur. Et nommez-le, sélectionnez votre couleur. Et dans ce cas, l'utilisateur doit sélectionner sa couleur. Et bien sûr, le type d'entrée sera coloré. Et laissez-moi simplement créer notre contribution soumettre. Alors Soumettez ici, puis revenez en arrière, actualisez. Et comme nous pouvons le voir, nous avons sélectionné la couleur et la couleur noire est la couleur par défaut. Cependant, nous pouvons changer ceci et notre code et notre côté, notre type d'entrée. Nous pouvons ajouter notre valeur pour être égale à une couleur spécifique. Et c'est le code pour les rats ou la théorie ff 0-0. 0. Maintenant, revenons à notre navigateur et actualisons. Et comme nous pouvons le voir maintenant, la couleur qui est en face de nous est la couleur rouge. Si je clique dessus, il va générer cette page ou cette boîte. Et je peux choisir la couleur que je veux. Et après cela, je peux le soumettre comme d'habitude. Et c'est tout pour le sélecteur de couleurs. Maintenant, nous pouvons également créer un champ d'arrangement. Et dans cet exemple, le champ de derange s'affichera comme un contrôle de curseur. Donc, par exemple, nous pouvons payer quelque chose de similaire au volume ici. Donc, à l'intérieur de notre volume, nous pouvons voir que nous pouvons nous déplacer à droite ou à gauche et augmenter ou diminuer notre volume. Et nous pouvons réellement créer cela en utilisant HTML. Et donc revenons à notre code ici et commençons avec. Donc, au lieu d'écrire la couleur étiquetée, je vais créer notre étiquette et je vais le nommer volume. Et puis nous allons ajouter le volume ici. Donc, c'est un volume compris entre 0. Et bien sûr, je dois ajouter mes commentaires. Dans ce cas, l'entrée sera de la plage de type, et je peux ajouter le minimum et le maximum comme d'habitude. Ainsi, les hommes seront égaux à 0 et le maximum sera égal à 100. Et dans ce cas, alors c'est tout. Nous allons simplement créer notre, Par exemple, le bouton soumettre. Alors soumettez, puis revenez en arrière, actualisez. Et comme vous pouvez le voir, nous avons maintenant notre volume entre 0 et par défaut il est au milieu à 15. Maintenant, je peux faire défiler d'avant en arrière et choisir le volume que je veux, puis soumis. Donc c'est tout pour le champ de plage. Nous pouvons également ajouter un champ de moine, en parlant de champs. Il permet à l'utilisateur de sélectionner un mois et l'année. Et le mois n'est pas pris en charge dans Firefox Safari ou Internet Explorer 11 ou une version antérieure. Assurez-vous donc que vous avez quelque chose d'autre et que vous utilisez, par exemple, ici, Google Chrome. Et revenons à notre code ici. Pour ce faire, nous pouvons simplement créer notre label pour être un anniversaire. Nous pouvons donc choisir le mois et l'année. Donc ici, anniversaire, nous avons le mois et l'année. Et bien sûr, notre volume sera, nous allons le changer pour le mois d'anniversaire. Donc, j'écris simplement la demande. Et maintenant, nous pouvons créer notre contribution. Donc, l'entrée serait de type mois. Et bien sûr, je peux ajouter une autre contribution à soumettre. Donc, ceci est soumis et a sauté à une autre ligne. Retournez à notre code, actualisez. Et comme nous pouvons le voir ici, nous pouvons choisir un mois spécifique, janvier, juin, juillet et février. Je peux choisir ce que je veux. Et l'année. 2 mille. Et c'est essentiellement pour le mois et l'année et comment nous pouvons choisir un mois et une année spécifiques dans notre champ de mois. Passons maintenant à un autre indice important pour afficher un contrôle d'entrée faible. Et cette semaine d'entrée n'est pas prise en charge dans Firefox, Safari et Internet Explorer 11 ou une version antérieure. Pour vous assurer que si vous voulez utiliser cette entrée, vous devez avoir quelque chose d'autre installé. Revenons maintenant à notre code et créons notre label. Dans ce cas, laissez-moi simplement supprimer ceci. Et l'étiquette sera faible et sélectionnera faible, puis créera notre entrée. Et dans ce cas, notre entrée sera de type faible. Et maintenant, si je retourne à mon navigateur, rafraîchir, donc la semaine sera les trois. Et le, Je peux choisir l'année que je veux d'ici. Et puis bien sûr, cliquez sur soumettre. Et je peux aussi utiliser l'année civile. Donc, comme vous pouvez le voir, vous pouvez choisir n'importe quel faible et n'importe quelle année nous sommes allés de notre calendrier. Et si je veux choisir cette semaine, je peux simplement cliquer dessus et il va générer pour moi ma semaine. Maintenant, passons à un autre exemple et pour créer un contrôle d'entrée de temps. Donc, ce temps nous permet de sélectionner une heure sans fuseau horaire. Et en fait, cette fois n'est pas prise en charge dans Safari ou Internet Explorer 12 ou une version antérieure. Revenons à notre code. Et à l'intérieur de notre entreprise, nous allons créer notre label. Autrement dit, le temps et les limites sont simplement nom à la fois et, et demander à l'utilisateur de sélectionner une heure. Et puis nous pouvons créer notre entrée et ce sera de type temps. Et bien sûr, le bouton Soumettre. Et maintenant, retournez en arrière, rafraîchissez. Et comme vous pouvez le voir maintenant, nous avons notre temps. Donc pour quatre et nous pouvons toujours le temps d'ici et nous pouvons choisir ce que nous voulons. Donc, c'est fondamentalement pour le temps et mettre le contrôle. Passons maintenant au champ email. Donc, si nous voulons créer un champ e-mail, je peux simplement créer l'étiquette comme d'habitude. Et cette étiquette sera pour un e-mail. Et je peux demander à l'utilisateur d'entrer comme il l'a fait. Entrez donc votre adresse e-mail. Et bien sûr, j'ai besoin de créer une entrée de type email dans ce cas. Et puis sauté aligné et enfin, créer le bouton de soumission et revenir en arrière. Donc, comme nous pouvons le voir maintenant, nous avons notre e-mail et si je viens de taper quelque chose, il dira que ceux-ci incluent et ajouter dans l'adresse e-mail. Kdf manque l'annonce. Donc, je peux ajouter un exemple à l'exemple, point com. Et bien sûr, si je me suis soumis, cela fonctionnera très bien et générera autre chose ou m'emmènera ailleurs. La dernière chose que nous allons discuter, c'est le champ de recherche. Et il se comporte en fait comme un champ de recherche régulier ou un champ de texte. Donc, pour le faire, nous pouvons simplement créer de l'équipement. Donc c'est pour la recherche et la recherche, Google, disons. Et puis après cela, je peux créer mon entrée de recherche de type et maintenant sauter aligné. Si nous retournons et rafraîchissons, nous allons obtenir la recherche ira. Je peux entrer ce que je veux et ensuite soumis à la recherche ou faire ce que je veux avec elle. Et c'est tout pour les types d'entrée. Nous avons tellement de types d'entrée et vous pouvez les rechercher. Et c'est tout pour cette vidéo. Alors, on se voit à la prochaine. 17. PROJET: En ce qui concerne la partie projet, vous allez créer un formulaire de voyage. Et ce formulaire, vous allez demander à l'utilisateur d'entrer son prénom et son nom, comme vous pouvez le voir ici. Alors tu vas lui demander de parler un peu de lui-même. Ensuite, pour indiquer la raison offre câble, par exemple, pour visiter la famille ou les amis, soit pour étudier à l'étranger ou pour faire le travail Ferrante ou le travail à long terme. Et vous pouvez également ajouter d'autres voir je ne l'ai pas ajouté, mais vous pouvez toujours ajouter d'autres. Il y a peut-être une autre raison. Et bien sûr la destination. Je viens donc d'ajouter cinq destinations, France, l'Italie, l'Amérique, la Grande-Bretagne et l'Espagne. Et puis après cela, nous allons appuyer sur soumettre, et il devrait être soumis. Donc c'est tout pour ce projet. Je pense que tous les outils sont à votre disposition. Dans les vidéos précédentes, nous pouvons juste revenir en arrière quelques champs que vous avez manqué quoi que ce soit. Nous avions appris à créer l'entrée et à la compléter. Nous pouvons utiliser le rembourrage ici, et nous avons également appris comment choisir entre les entrées et bien sûr, comment soumettre. Ils sont donc tous disponibles dans les vidéos précédentes. Donc tu peux aller les voir quand tu en as envie. Et ce n'est pas pour ce projet. J' espère que ça vous plaira. Et n'oubliez pas de l'ajouter à la section projet pour que je puisse le regarder et vous donner mes commentaires. 18. Récap: Félicitations pour avoir terminé ce cours. Vous venez de terminer la classe HTML et CSS. Et faisons un bref résumé sur ce qu'on a couvert ? Tout d'abord, nous avons parlé de quelques bases et de la syntaxe. Ensuite, nous avons passé au style et au formatage. Et nous avons aussi parlé de tableaux, de listes et d'images. Et bien sûr, nous avons appris comment lier notre CSS à notre fichier HTML. Et c'est tout pour cette classe. J' espère que c'était bénéfique. Et merci beaucoup de vous inscrire à ce cours. Et à bientôt.