HTML et CSS Beginners Heaven

1. Introduction: Bonjour mon ami. C'est leurs premières secondes où je devrais attirer votre attention ou vous fermez simplement ces vidéos. Est-ce que je l'ai fait ? Eh bien, je l'espère parce qu'il y a tellement de plaisir que nous allons avoir dans ces voitures. Tout d'abord, remarquez que je ne parle pas comme des robots, donc c'est la principale différence entre mes courbes et les autres. Tu n'iras pas t'ennuyer. Ok, ce n'est pas un prochain cours ennuyeux. C'est un cours plutôt cool. Donc, si vous vous demandez à chaque fois que vous apprenez quelque chose de nouveau, des questions telles que : pourquoi avons-nous besoin d'attributs ? Que sont les sélecteurs et pourquoi ils sont nommés sélecteurs, etc. Ensuite, vous êtes au bon endroit car je répondrai à toutes ces questions et je vous expliquerai tout à partir de zéro. D'accord ? Je crois que tout le monde a la capacité de développer des logiciels s'il avait enseigné correctement, et cela vous inclut. Après mon cours, vous comprendrez enfin tout ce que vous créez. Donc, ce que vous saurez après cette particule, notre cours, eh bien, vous saurez comment utiliser des balises HTML, des attributs et un sélecteur CSS. Vous saurez comment installer et définir Visual Studio Code. Vous apprendrez des raccourcis super, vraiment super efficaces appelés emmet. Et vous pouvez ensuite ajouter une image de votre côté, comment créer des liens internes externes, comment créer des formulaires utilisateur avec des entrées, etc. Il y a donc beaucoup de comptoir pour vous, n'est-ce pas ? Et la question est pourquoi devriez-vous choisir mon cours ? Eh bien, parce que vous avez mon aide sur les sujets couverts. Posez une question dans la section questions et réponses, et je vous aiderai le plus rapidement possible. Mes cours sont mis à jour si nécessaire. J'ai des milliers de clients satisfaits, d'accord ? Que devriez-vous savoir avant ce cours ? Pour être honnête, il suffit de bonnes intentions, donc rien n'est nécessaire. Ok, tu peux juste être un grand débutant, d'accord. Et qui suis-je ? Eh bien, je suis notre Kaddish Wold Arctic. Et j'ai une expérience énorme en programmation, comme vous pouvez le voir ici. Et j'ai déjà enseigné à beaucoup de gens, et la plupart d'entre eux sont très heureux. Vous pouvez lire les commentaires sur Internet, j'adore enseigner aux autres et qui aiment aider les autres. N'oubliez pas que si vous avez des questions, hésitez pas à poser la question. Vous pouvez m'envoyer un message et je vous répondrai le plus rapidement possible. Merci d'avoir regardé cette première vidéo et de passer une bonne journée. Bonne chance. 2. Télécharger et installer le code Visual Studio: Bonjour, mon ami d'aujourd'hui. Nous allons voir comment télécharger le code Visual Studio, qui est, comme vous pouvez le voir, un éditeur de code. Mais qu'est-ce que cela signifie ? C'est un éditeur ? Rédacteur, comme son nom l'indique, regardez les noms. Regardez toujours les noms. Editor est un programme utilisé pour l'édition, rien d'étonnant ici, non ? Mais que peut-il modifier ? Peut-il modifier uniquement des sites Web ou peut-être du texte ? Pour être honnête, comme vous pouvez le constater, cet éditeur peut être utilisé non seulement pour le HTML, mais aussi pour Python, Java Scream, CSS, Java, dactylographié, etc. C'est une chose assez importante. Et vous vous demandez peut-être pourquoi devrions-nous utiliser un éditeur comme celui-ci ? Pourquoi devrions-nous le télécharger ? Pourquoi ne pouvons-nous pas écrire des sites Web en utilisant, par exemple, Note Pod ? Vous ne pouvez pas le faire avec un bloc-notes. Pour être honnête, vous pouvez utiliser n'importe quel éditeur de texte pour créer un site Web. Cependant, lorsque vous utilisez un éditeur, comme par exemple le code Visual Studio, vous économiserez beaucoup de temps et du temps, c'est de l'argent , car votre code sera coloré, rendez-le plus clair. L'éditeur vous suggérera, que devriez-vous écrire ensuite ? Cela fermera le texte dont nous parlerons plus tard, et ainsi de suite. L'éditeur est donc quelque chose qui fonctionnera pour vous. Donc c'est bien d'avoir quelque chose comme ça, non ? Il est bon de savoir que l'éditeur que vous allez choisir n'a pas d' importance. Commençons, vous pouvez choisir le code Visual Studio. Vous pouvez choisir, par exemple, des haricots nets, etc. Le plus important pour vous, c'est qu'il vous convienne. Tout dépend de vos goûts, de ce que vous devez utiliser. Pour être honnête, vous pouvez taper le développement Web de Google. Mm. Des éditeurs, et vous pouvez en rechercher quelques-uns, les ouvrir, jouer avec eux. Mais pour être honnête, au début, il suffit d'ouvrir n'importe quoi. Commencez simplement à coder car c'est le plus important. Commencez à coder, plus tard, vous verrez ce qui est important pour vous. Je pense que le code de Visual Studio est vraiment l'un des meilleurs éditeurs. De plus, si vous apprenez à vous en servir. Eh bien, vous n'aurez pas besoin d'apprendre un autre éditeur si vous voulez changer le langage dans lequel vous allez programmer, n'est-ce pas ? Parce que vous pouvez y programmer presque tout ce que vous voulez. Ainsi, lorsque nous tapons du code Visual Studio, nous pouvons le télécharger pour Windows. Lorsque nous cliquons ici, comme vous pouvez le voir, vous pouvez trouver des liens, par exemple, pour Linux ou Macintosh Alors, cliquons ici, et sauvons le combat. Donc, une fois le fichier téléchargé, nous pouvons cliquer sur Ouvrir ici, et maintenant c'est la partie importante. Nous devrions lire la licence, d'accord ? C'est un élément vraiment important. Puis cliquez sur Next, Next. Et puis ensuite. Et vous pouvez créer des icônes de bureau sur le bureau. Vous pouvez donc l'ouvrir assez facilement. Cliquez sur Suivant, installez et pour être honnête, c'est tout. Votre éditeur va être installé, et nous en parlerons. Eh bien, maintenant, lorsque nous cliquons sur Terminer, comme vous pouvez le voir, cela ressemble à ceci. Nous verrons comment l' utiliser dans la prochaine conférence. Ça fait partie de la leçon. Merci beaucoup 3. Créer un projet en: Bonjour, il est temps de créer un site Web dans notre éditeur de code Visual Studio. Comment le faire. Eh bien, tout d'abord, nous devons opérer sur des fichiers. Comment opérer sur des fichiers avec autant de boutons ici. Sur quoi dois-je cliquer ? Eh bien, d'abord, ne vous inquiétez pas. Vous n'avez pas besoin de savoir où vous devez, vous savez, tout trouver instantanément dans cet éditeur. D'accord, d'accord ? Lorsque vous le regardez, ne vous inquiétez pas. Il existe de nombreuses options. Vous n'avez pas besoin de tous les connaître. Nous utiliserons les plus importants à l'avenir. Je vais vous le montrer étape par étape, afin que vous ne vous sentiez pas dépassé. Donc, tout d'abord, nous devons opérer sur dossier. Mais comment ajouter un fichier à notre code Visual Studio ? Vous pouvez le faire de deux manières. Vous pouvez créer un nouveau dossier, un nouveau dossier. Créons, par exemple, un dossier appelé CATs. Maintenant, nous allons simplement le déplacer ici. Je le déplace simplement. Je tiens le bouton gauche de la souris enfoncé et je le place juste ici. Bonjour. C'est maintenant dans notre éditeur. Ici, comme vous pouvez le voir, les CATs. Et comme vous pouvez le voir, ce truc s'est développé ici, d'accord ? C'est un explorateur, donc ce qui vous permet d'explorer des éléments contenus dans le dossier joint qui a été ajouté à votre éditeur, n'est-ce pas ? Comme dans Windows, par exemple. Mais cela semble un peu différent. Et ici tu peux faire quoi. Vous pouvez créer un nouveau fichier, vous pouvez créer un nouveau dossier. Alors faisons-le. Cliquons sur les cinq nouveaux. Comme vous pouvez le voir maintenant, nous pouvons taper ici le nom de notre FI. Ainsi, par exemple, sample, et quand je clique simplement sur Entrée, comme vous pouvez le voir, j'ai créé un cinq. Exemple, le problème est que, hé, nous allons écrire dans ce qui se trouve dans le HTML à l'avenir. Vous ne savez pas exactement ce que c'est pour le moment, mais nous allons écrire du code en HTML. Nous devrions donc modifier l'extension ici. Comment le faites-vous ? Cliquez avec le bouton droit de la souris , renommez et saisissons votre code HTML Comme vous pouvez le voir, cela a changé l'icône ici. Nous écrivons maintenant du HTML. Et nous pouvons taper ici ce que nous voulons. Comme vous pouvez le voir lorsque nous tapons des choses ici sur le côté droit. Nous avons ici quelque chose comme ça, ce truc blanc par ici. Cela suggère qu'il y a eu un changement dans notre code et qu'il n'a pas été enregistré. Nous devons l'enregistrer pour voir le résultat. Nous pouvons donc cliquer sur le fichier et enregistrer ou utiliser le raccourci Control plus S depuis Safe. Comme vous pouvez le constater, nous venons de le dire et nous pouvons utiliser l' ouverture de ce fichier. Alors, comment le faire, nous pouvons le minimiser. Découpes ouvertes. Clic droit, Openwave Par exemple, Firefox. Comme vous pouvez le constater, il s' agit de notre site Web Faces, qui est assez étrange car il ne dit rien d' intéressant, mais ne vous inquiétez pas. Ici, à l'avenir, vous apprendrez à créer des sites Web qui ont un sens en ce moment. C'est juste pour le fun. Amusant, amusant. Et maintenant, la question est si c'est le seul moyen d'ajouter un dossier. Ce n'est pas seulement ainsi qu'il faut procéder. Nous pouvons fermer le dossier que nous avons déjà ouvert ici, comme vous pouvez le voir , fermer le dossier, et pour ouvrir à nouveau le fichier, mais pas en le déplaçant ici, nous pouvons simplement cliquer ici sur l'explorateur, puis cliquer sur Ouvrir le dossier et le trouver. C'est ici qu'il fait des chats. Donc, comme le dossier, et comme vous pouvez le voir, nous venons de l'ouvrir à nouveau. Vous pouvez simplement le déplacer vers le code Visual Studio, ou vous pouvez simplement l'ouvrir en utilisant comme vous pouvez le voir l'explorateur, n'est-ce pas ? Ainsi, pour créer des fichiers, vous pouvez le faire de cette façon, mais n'oubliez pas que, comme vous n'avez pas besoin de créer un site Web dans Visual Studio Code, vous pouvez le créer même à l'aide du bloc-notes Vous pouvez donc cliquer sur Nouveau. Et vous pouvez simplement, par exemple, utiliser le bloc-notes. C'est un document textv, il n'a pas été traduit en anglais Je ne sais pas quoi, mais ça veut dire bloc-notes. Et ici, nous pouvons, par exemple, taper quelque chose comme sample. Nous allons changer l' extension en HTML. Le problème est que je l'ai appelé de la même manière qu'ici, peut-être que nous allons le changer en échantillon deux, d'accord. Et comme vous pouvez le voir, il est également disponible dès maintenant ici, et vous pouvez passer de l'un à l'autre en cliquant simplement ici. OK ? Vous pouvez minimiser cela tout en continuant à travailler sur votre projet à vos côtés, dans votre dossier. Vous avez donc plus d' espace ici, non ? C'est très utile. La plupart du temps, nous le ferons comme ça. Nous savons donc maintenant comment regarder le dossier. Mais n'oubliez pas que c'est également important. Il est important que lorsque vous ouvrez votre fichier avec Firefox, comme vous pouvez le voir, il n' y ait rien ici pour le moment. Pourquoi ? Parce que nous n'avons pas enregistré le fichier. Il est important de toujours enregistrer le fichier. Vous avez la suggestion ici et ici. Il indique également qu'un fichier n'a pas été enregistré. Et ici, nous avons des informations sur laquelle. Control plus S, et comme vous pouvez le voir, c'est enregistré maintenant. Et ici, nous devons maintenant rafraîchir la page afin de voir le changement. Nous devons donc cliquer sur le bouton Recharger la page en cours ou sur le contrôle plus r à partir de l'actualisation, et comme vous pouvez le constater, nous avons un résultat Donc, dans cette conférence, vous l'avez appris. Nous avons quelque chose comme un explorateur qui vous permet d'explorer les dossiers de votre ordinateur. Et pour être honnête, cela simule vraiment un projet, non ? Nous avons entendu un projet concernant les coupures Nous pourrions donc créer un site Web sur les coupures dans ce dossier et nous amuser. Mais ce genre de choses fera l'affaire dans les prochaines conférences. Si vous avez des questions, comme toujours, n'hésitez pas à les poser. Merci beaucoup. Passe une bonne journée. 4. Setting de votre premier projet: Bonjour, aujourd'hui, vous allez apprendre les bases du HTML. Donc, tout d'abord, vous apprendrez ce qu'est le HTML et ce qu'est la technologie. C'est probablement le mot le plus important que vous devez comprendre pour créer des sites Web. Quand tu le comprendras bien, tout sera facile. Et ne t'inquiète pas. Je ferai tout mon possible pour que vous le compreniez bien. OK, alors qu'est-ce que le HTML ? Le HTML est vraiment un langage de balisage hypertexte. Donc c'est comme ça que ça se passe. C'est un raccourci vers ce truc. Et que signifie « hyper » ? Hyper signifie que c'est quelque chose de super, non ? Cela signifie que quelque chose va très bien. Mais comment le texte peut-il être hypertexte ? C'est assez étrange, justement parce que le texte n'est que du texte, lorsque nous regardons ici, où nous avons des mots ici, et ce n'est qu'un simple texte. Comment est-ce que ça peut être hyper ? Comment cela peut-il être un très bon texte ? Pouvez-vous faire quelque chose que d'autres textes peuvent faire ? Eh bien, lorsque nous avons un livre, et lorsque nous allons à l' index de ce livre, lorsque nous voulons trouver la section 4 et y chercher la réponse. Nous avons besoin de quoi ? Nous devons le faire manuellement. Nous devons utiliser nos mains pour passer à la quatrième section du livre, car il ne s'agit que d'un simple texte. Cependant, cette fois, lorsque nous examinons l'hypertexte, il s'agit d'un texte avancé. Comme il s'agit d'un code HTML, Comme il s'agit d'un code HTML, il vous permet de sauter à l'aide d'hyperliens, C'est pourquoi on les appelle des hyperliens d'un texte à un autre Nous sommes simplement habitués à utiliser l'hypertexte. Écoutez, lorsque nous tapons ici Pologne, à droite, par exemple, et que nous avons ici quels liens, les hyperliens qui vous permettent passer d'un endroit à un autre, puis d'un autre endroit, et d'un autre endroit Nous pouvons simplement sauter ici autant de fois que vous le souhaitez, et nous le ferons rapidement. C'est plutôt cool. Nous y sommes habitués. Mais bon, textez normalement, quand nous regardons des livres, ne faites pas ce genre de choses, non ? Donc oui, c'est un hypertexte. C'est pourquoi il y a un hyperlien dans ce raccourci, d'accord ? Il s'agit d'un texte très avancé qui vous permet de faire des choses vraiment cool que nous apprendrons bien sûr. Alors, que signifie le balisage linguistique ? Cela signifie qu'il doit être annoté, il doit donc être marqué. Il faut donc le suivre. Tuck signifie vraiment balisage, parce que cela vous permet d' annoter des choses Cela vous permet de baliser des éléments. Cela vous permet de dire comment interpréter quelque chose ? Lorsque nous avons un texte comme celui-ci, eh bien, nous voudrions le faire fonctionner différemment. Par exemple, nous avons ici le HTL, et j'aimerais le mettre en gras, n'est-ce pas J'aimerais changer la police d'écriture ici. Alors, comment le faire, vous devez utiliser les taxes. Tu dois marquer. C'est pourquoi on l'appelle langage de balisage Et comment le faire. Eh bien, nous devons utiliser les impôts. Disons, appelons ça Bolt, parce que ça va mettre ce truc en gras. Et ajoutons ici une colonne comme celle-ci, et ouvrons-la dans le navigateur Web. Lorsque nous le faisons ainsi, vous remarquerez que rien n'a changé. Pourquoi ? Parce que chaque balise à l'intérieur code HTML doit ressembler à ceci. D'accord ? Le nom du tag doit se trouver à l'intérieur de quelque chose comme ça. Et est-ce que ça va marcher ? Non, ça ne marchera pas. Rien ne s'est passé Mais bon, le truc du verrou a disparu parce qu'à l'heure actuelle, notre navigateur Web , le Firefox, essaie de l'interpréter, mais il ne sait pas ce que cela signifie. Nous devons utiliser la fiscalité à partir d'une sorte de référence. Et vous pouvez trouver cette référence, par exemple, sur ce site Web ici. Et comme vous pouvez le constater, il existe de nombreux tags. Et cette balise que nous recherchons s'appelle B, qui définit le texte en gras, et nous devons le faire comme ça. Alors maintenant, lorsque nous actualisons notre page, comme vous pouvez le voir, oui. Ce texte est boulonné. Mais bon, je voulais mettre en gras uniquement cette partie du texte, pas tout. Ouaip. C'est pourquoi nous devons fermer le tag que nous avons ouvert. OK. Nous devons le fermer en utilisant la barre oblique B à l'intérieur Il est dit que, hé, c' est le tag de fermeture, c'est le tag d'ouverture, c'est le début, c'est la fin, et ce truc ici s'appelle totalement Aliment. Ça s'appelle Aliment. Cela va maintenant indiquer au navigateur Web qu'il doit interpréter cette partie, le contenu. À mettre en gras. Et nous l'informons à l'aide du tak, en utilisant le langage de balisage que nous allons découvrir lors de prochaines conférences Nous devons apprendre comment fonctionnent ces tatouages. C'est ainsi que vous créez des sites Web. Utiliser des tatouages comme ça À l'avenir, vous apprendrez à créer les hyperliens qui vous permettront de passer d'un endroit à l'autre dans votre texte Vous avez probablement remarqué que les entrées dans les espaces blancs, n'est-ce pas, vous savez, les espaces etc. ne sont pas interprétées ici, n'est-ce pas ? Tout est sur une seule ligne. C'est pourquoi nous devons apprendre à, vous savez, lui donner une belle apparence. Et vous le faites bien en utilisant un texte que nous découvrirons à l'avenir. J'ai créé quelque chose comme ça qui vous aidera à vous souvenir de cet élément, donc tout consiste en un point de départ du contenu et un point final Il y a des noms que vous pouvez trouver dans la référence que je vous ai montrée, comme par exemple B, qui change le contenu, nous devons mettre fin à la balise. Sinon, si nous ne mettons pas fin à l'étiquette, nous bloquerons tout, ce qui n'est pas ce que nous voulons. Nous devons terminer ce que nous avons commencé, comme dans la vraie vie. Bien sûr, cela ne fonctionne pas à chaque fois. C'est du HTML. Il s'agit simplement d'un langage de balisage hypertexte C'est une langue dans laquelle nous utilisons les taxes, pour annoter le texte, pour le rendre hyperactif. Ce n'est qu'une leçon. Merci beaucoup 5. Document de base HTML: Bonjour, mes amis. Aujourd'hui, je vais vous montrer quelques balises supplémentaires qui vous permettront de créer la structure de base de votre code HTML f. Chaque code HTML f devrait commencer par une balise HTML, d'accord ? Et cette balise indique au navigateur Web qu'il va interpréter le langage HTML. Plus tard, vous devriez créer ce que l'on appelle tête. On a la tête sur les épaules, non ? Cet endroit sera donc utilisé pour stocker des informations supplémentaires sur votre site Web. Comme, par exemple, le titre. Vous pouvez donc créer un titre pour votre site Web ici, et vous pouvez le placer entre la balise de titre d'ouverture et de fermeture. Et ici, vous pouvez, par exemple , appeler cela les images amusantes de chats, comme ça. Maintenant, nous pouvons l'ouvrir. J'enregistre le fichier en utilisant le raccourci Cro plus S, et comme vous pouvez le voir ici, nous avons ce qu'il faut. Pour le moment, il s'agit des cinq chemins d'accès à notre fichier. Mais quand je rafraîchis la page, contrôlant plus, comme vous pouvez le voir, des images amusantes de découpe, oui, nous pouvons maintenant changer le titre de notre site Web C'est plutôt cool. Donc, à l'intérieur de la chaleur, nous avons mis des informations comme celles-ci. Il y aura plus d'impôts qui seront prélevés ici. Nous en reparlerons plus tard. C'est le plus fondamental. Nous créons une sorte de modèle que nous pouvons utiliser pour créer des sites Web que vous pouvez copier. Maintenant, nous allons créer prochain acte qui s'appellera body. Comme nous avons un corps dans notre vie réelle, lorsque vous regardez les humains, vous remarquerez qu' ils ont une sorte de contenu à l'intérieur de leur corps. Oui, c'est la même situation ici. Nous avons quoi, le code HTML principal. À l'intérieur, nous avons la tête et le corps, qui ont un contenu, n'est-ce pas ? Voici le contenu de votre site Web. Maintenant, lorsque nous l'actualisons, comme vous pouvez le voir, nous avons ici des informations. Voici le contenu de votre site Web. Et vous vous demandez probablement pourquoi avant alors que nous faisions quelque chose comme ça. Pourquoi ? Il y a toujours du contenu ici lorsque j'ai dit que nous devrions créer des sites Web comme celui-ci. C'est une bonne question. Et quelle est la réponse ? Les navigateurs Web sont assez intelligents. Ils peuvent interpréter presque tout ce que vous mettez ici. Vous pouvez mettre le titre au mauvais endroit comme ça, et il sera toujours là. Changeons-le. Tu peux voir. Tout fonctionne bien. Alors pourquoi s'embêter à le faire comme ça ? Tout d'abord, soyons une bonne personne pour un autre codeur de fichier HTML. Nous partons simplement du principe que lorsque nous examinons l'étiquette principale , nous trouverons ici des informations sur le site Web. Imaginez que votre code soit payant, comme ceci. Et certaines personnes mettraient le titre ici et d'autres le mettraient, je sais, comme ici. Quelque part au milieu. Ce serait horrible pour nous, non ? Si les choses se passaient dans des endroits bizarres et différents. C'est donc une sorte de norme, d'accord ? Alors faisons-le de cette façon. Mais si vous pensez toujours que cela ne vous suffit pas, imaginez une seconde il existe des robots dans Google, font des recherches sur Internet et analysent Internet. Et ils analysent les sites tels que vous les créez. Et si vous faites des choses bizarres sur votre site Web, comme mettre le titre à un endroit étrange, et que vous commettez de nombreuses erreurs de ce genre, elles peuvent simplement vous donner un inconvénient dans le classement. OK ? Vous créez les sites Web pour le rendre visible afin de vous assurer d' avoir des clients pour inciter les internautes à regarder votre contenu, n'est-ce pas ? Donc, vous ne voulez probablement pas assez de personnes consultent votre site Web, n'est-ce pas ? C'est donc une bonne raison de créer un contenu qui s'affiche bien également derrière l'écran, n'est-ce pas ? Non, vous n'avez pas besoin de vous soucier uniquement de ce qui se trouve ici, mais aussi de ce qui se trouve dans les coulisses. Donc oui, tu peux le mettre ici. Cela fonctionne très bien. Mais maintenant c'est mieux quand tu le fais comme ça. Et il existe également de nouveaux navigateurs Web qui, vous savez, peuvent interpréter de telles choses. Certaines personnes plus âgées ne le feront pas correctement. Vous trouverez également des scripts dans le futur. Vous apprendrez à créer des scripts et ils analyseront votre code en entrant dans le texte. C'est un sujet assez avancé, mais il suffit de le taguer à l'esprit, créer du contenu comme il se doit. Dans la tête, nous mettons du texte comme le titre, dans le corps, nous mettons du contenu. Nous pouvons donc, par exemple, verrouiller le contenu ici, comme ceci. Bam, comme vous pouvez le voir, voici le contenu de vos sites Web Il y a encore une chose que vous devez retenir à propos des normes. Vous pourriez créer votre fichier HTML de cette façon, d'accord ? Commencez donc par les majuscules. Cela fonctionnera très bien. Vous pourriez, je le sais, le remplacer par « j'aime ». Cela fonctionne toujours bien même si nous ne l'avons pas fermé de la même manière. Vous pouvez donc faire beaucoup de choses assez étranges dans votre code. Je vous en prie, ne le faites pas. OK ? Vous pouvez mais ne commencez jamais, je connais le titre en majuscules Peut-être que cela vous convient, mais la norme est de tout commencer par le petit étui, d'accord ? N'utilisez donc pas de majuscules dans les noms de balises. Il est également bon de savoir que tout ce que vous mettez ici dans le titre est affiché ici, et c'est très important ce que vous mettez ici, car si vous mettez ici, je ne sais pas , quelque chose comme une page Web , cela ne vous pas utile, ni pour l'utilisateur. Et cela ne sera pas non plus utile pour les robots qui analysent Internet. Ainsi, lorsque Google Robot trouve votre site Web et voit la première page Web, il se demande : de quoi parle cette page Web ? Il essaiera d'analyser le contenu ici. Mais quand il verra le titre ressembler à ça, il n'en sera pas sûr à 100 % et il ne donnera pas points aux choses que vous mettez ici. Si vous avez une page sur les chats, c'est une bonne idée de mettre ici les chats. Si vous avez un site Web sur les vélos, inscrivez le vélo ici. Je ne sais pas répéter que les chats. Des chats, des chats, des chats, des chats. Ce n'est pas une bonne chose parce qu' alors Robot dira : « OK, il le répète ». Je pense qu'il triche peut-être. Ce type n'est tout simplement pas cool. Nous allons donc le bannir. Mettons ici un mot, peut-être deux fois le mot qui décrit correctement votre page Web. Le contenu devrait vraiment être là, et cela améliorera votre classement dans Google. Tout est dans la leçon. 6. Balises et envelopper le texte existant en utilisant EMMET: Bonjour, mon ami. Aujourd'hui, vous allez apprendre à étiqueter l'eye tag. Vous apprendrez également comment clôturer votre taxe imbriquée, quelle est notre taxe imbriquée avec nos éléments imbriqués Et aussi, vous apprendrez un raccourci très, très important qui vous permettra d'enrouler pour insérer la balise sur le texte déjà écrit. Cela vous fera gagner beaucoup de temps. Le eye-tag ressemble à ceci. Nous ouvrons donc le support en fermant un et remarquons que nous avons ici le support à fermeture automatique. Le dernier est simplement ajouté automatiquement par l'éditeur. Et quand je mettrai le contenu ici, du contenu si enclin, vous remarquerez que le contenu ici. Il est vraiment enclin. Donc c'est vraiment un raccourci pour le mot en italique, d'accord ? Cela crée donc des mots inclinés, du texte incliné, non ? Et c'est ainsi que cela fonctionne. Mais la question est si je peux mettre la balise inclinée ou la balise en gras sur le texte qui existe déjà, n'est-ce pas ? Par exemple, souvenez-vous d'ici. Je veux le mettre en gras. Comment le faire rapidement ? Eh bien, nous pourrions, vous savez, taper A, puis la balise de fermeture, et vous pouvez voir que maintenant cette balise qui a été ajoutée ici n'est pas bonne pour nous parce que nous la voulons ici, n'est-ce pas ? Nous voulons le copier, donc nous devons, vous savez, le couper contra plus X. Et le coller ici Cela prend du temps, Counter plus z, on peut y revenir. Eh bien, nous pouvons aussi le faire de cette façon. Nous pouvons mettre B, puis le compteur plus Z, puis le taper ici. C'est un peu plus rapide, non ? Comme vous pouvez le voir, lorsque nous saisissons uniquement l'attaque d'ouverture et le crochet d'ouverture, puis la barre oblique Cela va être fermé automatiquement. Ce qui est bien, mais c'est quand même lent. Il serait préférable que nous puissions simplement envelopper d'une manière ou d'une autre l'élément, le texte qui existe déjà sur notre site Web avec ce t, n'est-ce pas ? Y a-t-il un raccourci pour cela ? Eh bien, oui, la bonne chose est qu'il existe un raccourci dans le code de Visual Studio utilisant quelque chose appelé ET. Nous découvrirons les raccourcis ET pendant les cours , car je pense que si j'utilise tous les raccourcis au cours d'une conférence, vous ne vous en souviendrez jamais. Il faut comprendre l'importance de les utiliser, non ? Nous allons donc sélectionner ce mot ici et utiliser le raccourci Ctrl plus Shift plus P. Et comme vous pouvez voir, voici de nombreux raccourcis que vous pouvez utiliser. Et lorsque nous tapons l'enveloppe avec une abréviation, comme vous pouvez le voir, elle a été récemment utilisée par moi, et je clique dessus. Nous utilisons le clic gauche sur le bouton de masse ou nous cliquons sur le er. Vous pouvez voir maintenant qu'il attend l'abréviation. Maintenant, lorsque nous tapons ce que nous tapons, comme vous pouvez le voir, ce sera la balise d'ouverture et de fermeture instantanée sur le texte que nous avions sélectionné, n'est-ce pas ? C'est plutôt cool parce que maintenant nous pouvons simplement mettre B ici, et cela va être mis en gras. Je n'ai pas besoin de retirer l'étiquette de fermeture et de la copier ici ou de la mettre ici. Cela prend juste du temps. Nous pouvons utiliser des raccourcis. C'est plutôt cool. Entrez la fin. Le travail est terminé. C'est donc un très bon moyen très simple de bien intégrer votre texte à la taxe. La question est de savoir si nous pouvons le faire encore plus rapidement. Contra plus z, revenons-en au contra plus plus P. Comme vous pouvez le voir, voici une sorte de matériel Vous pouvez cliquer dessus et configurer les raccourcis clavier. Lorsque vous cliquez ici et que vous ajoutez une combinaison de touches, vous pouvez appuyer sur la combinaison de touches souhaitée , puis appuyer sur Entrée pour créer la nouvelle liaison correspondant à cette combinaison avec abréviation. Nous n'aurons donc pas besoin d'utiliser le raccourci contro plus sheaf plus P pour ensuite trouver la Il suffit, par exemple, taper contro plus sheaf plus E. Pourquoi ai-je pris la peine utiliser le control plus shaft plus A plus Parce que bon, notez que de nombreux raccourcis sont déjà utilisés. Par exemple, contro plus A est utilisé par deux commentaires existants. Vous pouvez voir par quoi, tout sélectionner. Ce serait stupide de supprimer le raccourci comme celui-ci , des raccourcis. Il est donc préférable d'utiliser quelque chose qui n'a pas été utilisé, comme par exemple celui-ci. Maintenant, en cliquant sur Entrée, nous pouvons le faire un peu plus rapidement. Cro plus Shift plus, puis B. Ba, c'est plutôt cool, non ? Parlons maintenant de la taxe imbriquée. Notez que supposons que ce texte soit incliné et en même temps en gras. Je veux donc le mettre en gras et en même temps. Donc, lorsque nous tapons B de cette façon, puis ici, comme vous pouvez le voir, cela va être mis en gras. Ceci est en gras. Texte. Maintenant, quand je veux ajouter de l'italique. Remarquez que lorsque je fais Counter Plus, où dois-je placer mon œil ici ? Dois-je le mettre ici ? Comme vous pouvez le constater, même l'éditeur vous dit que quelque chose ne va pas. Il essaie de combler la lacune, en italique. Comme il ne s'agit pas de la bonne assiette, vous devez toujours vous souvenir l'ordre dans lequel la taxe doit être clôturée. Nous fermons la voie la plus éloignée . Le dernier. Notez que le dernier repli est ou le premier repli est B, et le dernier est I, et nous devrions le changer, d' accord, ces deux B. C' est l'ordre que vous devez utiliser Donc, lorsque vous fermez le, lorsque vous ouvrez le thêta, vous devez d'abord le fermer, n'est-ce pas ? Si c'est le pli intérieur, c'est un pli extérieur comme celui-ci, il faut le fermer comme dernier repli, et vous vous demandez peut-être pourquoi je n'ai pas utilisé Eh bien, parce que nous devons en savoir un peu plus sur les raccourcis à propos de MD afin créer deux balises en utilisant le raccourci que nous avons découvert. Donc, exemple de texte, faisons quelque chose comme ça. Sélectionnez-le, contro plus shift plus E, et il attend l'abréviation Remarquez que lorsque je tape B, puis I, puis B, eh bien, rien ne se passe bien pour nous. Nous voulons avoir deux balises, la taxe imbriquée. Comment résoudre ce problème l'aide du raccourci que nous avons découvert. Nous devons taper B, puis ce signe, qui est plus grand que le sinus, le crochet angulaire, et maintenant nous tapons I. Comme vous pouvez le voir, cela indique que B est la balise extérieure, I est la balise intérieure. Eh bien, nous pourrions, vous le savez, en tirer le meilleur parti, non ? Mais c'est le résultat que nous recherchons. Nous voulons que le texte soit en gras et en italique. Remarquez à quel point c'est rapide de faire ce genre de choses, n'est-ce pas ? On fait juste B, I, et c'est tout. Maintenant, recommençons manuellement. Le compteur B plus B. est en panne. Mmm. OK, et encore une fois, avec le raccourci. Exemple de texte. Sélectionnons et cette bosse. C'est plutôt cool, non ? C'est donc le raccourci que je recommande vivement d'utiliser. Vous savez maintenant quels sont les avis fiscaux nécessaires selon lesquels nous les avons déjà utilisés, comme ici, par exemple, nous avons le titre principal et le titre interne Et cela ne semblait pas difficile à comprendre, vous savez, quand vous devez fermer lequel vous devez fermer en premier parce que nous utilisons la touche Entrée ici, n'est-ce pas ? Notez que nous pouvons également le faire ici. Et maintenant, si on le faisait comme ça, ça aurait l'air, tu sais, bizarre, non ? C'est donc une bonne idée d'ajouter parfois indentations dans votre code pour le rendre un peu plus facile à lire, n' Et remarquez également que lorsque vous ajoutez des indentations, cet éditeur est plutôt cool car nous pouvons plier et déplier Comme ça. Alors pourquoi est-ce utile ? Eh bien, imaginez que nous ayons ici un tag principal, et disons que nous avons ici de nombreux tags concernant le titre de notre site Web. Je vous rappelle donc ces informations supplémentaires concernant votre site Web. Et pour être honnête, lorsque vous l'écrivez, n'en aurez plus besoin. Et vous, c' est juste plié, n'est-ce pas ? Et tu n'as pas besoin de le voir à chaque fois. Donc c'est plutôt cool, non ? Vous pouvez simplement rendre votre code plus facile à lire. Vous pouvez faciliter le passage d' un endroit à un autre, car vous n'avez pas besoin de lire choses qui ne sont pas nécessaires pour le moment. OK, c'est pour cette leçon. Merci beaucoup 7. Créer des paragraphes<p>| Quels sont les espaces blancs ?</p>: Bonjour, mon ami. Notez que lorsque vous regardez ce texte, le texte est aligné. Mais quand on regarde ici, ce n'est certainement pas le cas, n'est-ce pas ? Nous utilisons des entrées ici. Nous utilisons donc une sorte de clé qui devrait briser les lignes, non ? Mais ça n'a pas été le cas. Pourquoi ? Parce que le HTML n'interprète pas ce que l'on appelle les caractères blancs. Les caractères blancs sont des choses comme Enter Tabulator. Donc, lorsque vous cliquez sur Tap, il s'agit d'une tabulatrice, comme par exemple, ici, Et aussi, de l'espace, mais pas de l'espace comme celui-ci. Eh bien, vous devez, d'une manière ou d'une autre, être capable d'utiliser l'espace sans avoir à mettre quelque chose d'étrange ici, juste un seul espace parce que c'est assez souvent nouveau. Espacez donc plus les uns après les autres. OK ? Donc, lorsque vous avez quelque chose comme ça, tous ces espaces, sauf un, seront supprimés. Notez que nous avons ici notre exemple de texte, un exemple de texte. Et bien, il n'y a tout simplement pas de place ici, comme ça. Il n'y a qu'un seul espace, pas tant d'espaces. OK ? Ce sont donc des caractères blancs et ils ne sont pas interprétés par le HTML, n'est-ce pas ? Eh bien, par le navigateur Web qui interprète le HTML avec précision Et bien, comment pouvons-nous briser les limites ? Nous pouvons couper les lignes en utilisant ce que l'on appelle des paragraphes, n'est-ce pas ? Ils sont utilisés pour créer des sections, non ? Et la balise qui crée les paragraphes s'appelle P. From, elle signifie paragraphe. Et bien, on peut le mettre ici. Par exemple, voyons cela ici. Comme vous pouvez le voir, nous avons mis le paragraphe, et oui, il fonctionne bien. Nous avons maintenant atteint le point de rupture de ligne. Cette ligne est là, ainsi que le contenu qui suit cette piste, donc tout ce contenu se trouve juste en dessous Il y a également une sorte de marge entre cela et le reste du contenu de notre page lorsque nous avons ajouté le tag. Ajoutons-le à d'autres parties de notre code k. Faisons-le par exemple sur ce truc. Nous devons le sélectionner ou nous pouvons utiliser le raccourci. Il existe un raccourci qui vous permet de sauter depuis l' endroit où vous placez ce clignotant et d' utiliser le Shift plus n Vous pouvez ensuite sélectionner le code entier ici, puis vous pouvez utiliser quelle commande plus Shift plus P, et utiliser le MED rub avec abréviation ou utiliser le raccourci que vous avez programmé ici Qu'est-ce que le P. Maintenant, lorsque nous actualisons, comme vous pouvez le voir, il s'est produit la même chose. Nous avons maintenant la marge du bas vers le bas, et maintenant ça a l'air mieux, non ? C'est pourquoi nous utilisons des paragraphes pour pouvoir couper les lignes afin de les rendre un peu plus faciles à lire. Mettons maintenant le paragraphe également ici. Je suggère de regrouper tous les exemples de texte en un seul paragraphe. Vous pouvez également le faire. Je pense que cette chose devrait également être comme ça et comme ça. Aucune actualisation. Comme vous pouvez le constater, ce texte est un peu plus facile à lire. 8. Étiquette vide et briser la ligne<br />: Bonjour, mon ami. Journée. Nous allons parler de ce que l' on appelle l'impôt nul. D'accord ? Qu'est-ce que le vide ? Le vide n'est que le vide, n'est-ce pas ? Cela signifie que le tag n'a pas de fin. Donc oui, c'est un tag qui a une ouverture mais qui n'a pas de fin. Il existe de nombreuses étiquettes de ce type, mais nous n'en apprendrons qu' une seule dans cette conférence, et nous parlerons d'une étiquette appelée bière qui signifie break. Comme son nom l'indique, cela brise les limites, d'accord ? Et ça ne fait rien d'autre, d'accord ? Cela ne fait que briser les limites. C'est pourquoi nous n'avons pas besoin de faire quelque chose comme ça. Pause pause, non ? Parce que bon, il n'y a tout simplement aucun contenu à mettre ici, n'est-ce pas ? C'est pourquoi nous allons simplement l'écrire comme ceci. C'est juste un deck vide qui n'a pas de fin, d'accord ? Et lorsque vous l'utiliserez, vous ajouterez la conduite de frein. Comme lorsque vous utilisez le paragraphe. Mais lorsque vous utilisez un paragraphe, notez qu' il existe également une marge entre un texte et un autre. Hein ? Parfois, vous ne voulez pas un tel comportement. Imaginons donc que nous ayons votre exemple de texte, un exemple de texte, un exemple de texte. Disons que nous voulons avoir une pause entre chacune de ces lignes, n'est-ce pas ? Nous allons donc simplement faire quelque chose comme ça. Et maintenant, bon, depuis le début, nous n'avons pas besoin d'en ajouter car il y a un paragraphe vous pouvez voir, nous avons simplement franchi la ligne. Et juste une seule, non ? Line, et nous n'avons pas ajouté de marge. C'est ainsi que fonctionne la ligne de frein. Vous pouvez le savoir, en ajouter autant que vous le souhaitez, freiner les lignes, comme vous pouvez le voir, cela ne fera que casser des objets, autant de fois que nous taperons le BR Vous verrez à l'avenir que certaines personnes écrivent la taxe nulle en utilisant quelque chose comme la barre oblique ici à la fin, d'accord ? Et pourquoi en est-il ainsi ? Parce que cela suggère que cette balise n'a pas de fin. Mais il y a si peu de tags vides que vous apprendrez à l'avenir, que je pense que cela n'a tout simplement pas l'air bien. Écoutez, le code comme celui-ci ci-dessus serait plus gros, non ? Ce n'est pas aussi facile à lire. À mon avis, nous ne devrions pas simplement l'utiliser. Dans ce qu'on appelle HTML, il était obligatoire d'utiliser quelque chose comme ça, n'est-ce pas ? Il fallait simplement informer le frère qu' il y avait une fermeture. C'est une attaque qui n'a pas de fin, d'accord ? Mais comme nous utilisons la version la plus récente du HTML, c'est la plus ancienne. Nous pouvons simplement écrire BR, et nous n'avons pas besoin d'ajouter ici la barre oblique Je parle de la barre oblique uniquement parce que, quand vous regardez le code qui va être écrit par quelqu'un d'autre, c'est une bonne idée de le comprendre, n'est-ce pas ? Vous seriez surpris. Hé, pourquoi ce type a-t-il ajouté la barre oblique ici Maintenant, vous savez, il l' a ajouté parce qu' il essaie probablement de répondre à certaines exigences supplémentaires ajoutées par le HTM. Mais ce n'est pas obligatoire pour le moment, alors je pense que nous allons le dire comme ça. Donc BR, un nouveau TA qui franchit juste les limites. Il n'ajoute pas de marge comme le paragraphe. Ce n'est qu'une leçon. Merci beaucoup 9. Quels sont les attributs ? [titre] et [lang]: Bonjour, mon ami. Aujourd'hui, vous allez apprendre ce qu' est un attribut en HTML ? Vous apprendrez un attribut appelé langage du titre, et vous apprendrez un raccourci qui ajoute un attribut à l'aide de ce que l'on appelle met. Cela accélérera la façon dont vous codez votre code HTML. Commençons donc par l' attribut. Qu'est-ce que c'est ? Imaginez une personne, une personne dans un jeu, donc une sorte de personnage. Et ce personnage a une sorte de vitalité, de réflexe, d' intelligence, de charisme C'est un jeu d'attribution. Alors, quel attribut décrit ? Il décrit des informations supplémentaires sur le personnage. Et c'est la même chose qui se passe ici. Si vous souhaitez ajouter des informations supplémentaires sur un fichier HTML comme celui-ci. Par exemple, nous voulons informer le navigateur Web du type de langue que nous utilisons. Nous allons utiliser un attribut, appelé langage. Nous ne saisissons pas de langue, mais l'attribut s'appelle ang. Il s'agit d'un raccourci, nous tapons donc lang. Ensuite, nous devons taper le signe égal, entre guillemets, puis nous insérons la valeur qui représente le langage que nous utilisons de notre côté. Dans notre cas, c'est quoi, c'est en anglais, donc nous allons taper E n. Voici donc le nom de l'attribut, le signe égal, les guillemets et la valeur. C'est ainsi que vous créez des attributs qui constituent des informations supplémentaires sur le tack Comme sur le personnage des jeux vidéo. La question est donc de où vient l'attribut ? OK. Supprimons-le et utilisons le raccourci clavier plus l'espace. Et comme vous pouvez le constater, nous en avons plusieurs. La question est la suivante : avez-vous besoin de tous les connaître ? Non, il y en a quelques-uns qui sont négatifs, et vous devez principalement les apprendre ? Parfois, vous aurez besoin certains attributs rares qui se trouvent ici, mais vous n'avez pas besoin, vous savez, de les apprendre par cœur. Ne t'inquiète pas. Ce n'est pas quelque chose que vous aurez besoin d'apprendre et de vous souvenir de tout par cœur. Ce serait difficile, et je ne pense pas que ce soit totalement une modification. Alors ne t'inquiète pas, d'accord ? Nous allons apprendre le plus important, et c'est tout à fait suffisant pour, vous savez, coder en HTML. Revenons donc à la langue. Et comme vous pouvez le constater, nous pouvons maintenant évaluer votre valeur. La question est quel type de valeur devons-nous mettre ici ? Est-ce la bonne valeur ? Eh bien, non, les valeurs de langue se trouvent dans la référence du code de langue HTL, vous devez taper quelque chose comme ça dans Google et taper les codes de langue, et vous trouverez les codes correspondants pour la langue dans laquelle vous créez votre site Web Par exemple, disons que le polonais est P. C'est la langue que je vais utiliser. Mais pour l'anglais, comme vous pouvez le voir, c'est E N. Et aussi si vous venez du français, du français, etc. C'est donc la valeur que nous allons utiliser. Mais découvrons le prochain attribut appelé title. Titre. Disons que nous voulons mettre le titre ici. Arcadis Dat est marié depuis quand. Le titre est un attribut qui va créer une sorte d' infobulle avec la valeur que nous allons attribuer à l'attribut title Terminons le mérite avec une sorte de balise comme, par exemple, B. Et maintenant nous pouvons mettre ici le titre de l'attribut, qui est le nom de l'attribut, et la valeur dans ce cas est ce que nous voulons. Dans ce cas, nous voulons indiquer depuis mon mariage, par exemple. Comme il est très important de le savoir, moins pour les femmes, j'espère ne pas avoir commis d'erreur. Allons-y ici. Comme vous pouvez le constater, lorsque nous actualisons notre page et que nous passons le pointeur de la souris, nous déplaçons le pointeur sur le texte ici Nous avons reçu l' infobulle depuis 2017. C'est à cette époque que je me suis mariée. Et c'est ainsi que cela fonctionne. Vous fournissez des informations supplémentaires pour l'infobulle. Titre, vraiment, je pense que ce serait un meilleur nom, mais ils appellent le titre, et cela donne des informations supplémentaires sur le point, comme par exemple B, et le texte qu'il contient Dans ce cas, il crée une infobulle. Il s'agit de l'attribut suivant que vous avez appris. Nous allons maintenant apprendre un raccourci qui ajoute un attribut à l'aide de MET. C'est plutôt cool. Écoutez, quand vous avez ET, nous pouvons vraiment faire quelque chose comme ça. Par exemple, P, puis nous pouvons utiliser le crochet et taper le nom de l'attribut. Ensuite, lorsque nous appuyons sur Entrée, comme vous pouvez le voir, nous avons le nom de l'attribut à l'intérieur. L'étiquette d'ouverture. Nous pouvons mettre la valeur ici. Eh bien, nous pouvons également mettre la valeur ici, comme par exemple depuis 2017, mais comme vous pouvez le constater, ce n'est pas bon. Nous devons utiliser le système de devis et, pour être honnête, contrôler l'espace. Comme vous pouvez le constater, cela prend du temps. Je préfère saisir la valeur manuellement plus tard. Il en va de même pour placer l'attribut entre crochets dans la balise d'ouverture. Mais il y a des moments où vous pouvez même l'améliorer. Vous pouvez voir que vous pouvez multiplier nombre de fois que vous souhaitez voir le tag le répéter. C'est donc la version la plus simple, mais vous pouvez également mettre le nom de l'attribut et vous pouvez répéter plusieurs fois quelque chose. Cela vous permet de coder plus rapidement. Mais ce n'est pas comme si vous deviez vous souvenir de tous ces raccourcis. C'est bien de les connaître, mais vous pouvez coder manuellement, rien ne se passera. Ce sont des choses assez avancées que je vous montre ici en ce moment. Cela ne fera qu' accélérer votre travail. Mais si vous êtes simplement content de vous amuser avec HTM, ne vous inquiétez pas pour les raccourcis que je vous montre. Accélérer les choses, mais ce n'est pas quelque chose dont on a besoin. Vous pouvez simplement tout saisir manuellement. Mais c'est cool de pouvoir emballer les choses plus rapidement. Vous pouvez simplement double-cliquer dessus, puis utiliser le raccourci avec le MSO Control plus C plus B et vous pouvez utiliser le wrap avec abréviation dont j'ai parlé, vous pouvez continuer à le lier, puis vous pouvez simplement taper B, le titre, et vous pouvez simplement taper ici comme ça C'est un peu plus rapide que de le faire manuellement. Mais ce n'est pas comme si tu pouvais le faire, n'est-ce pas ? Vous pouvez toucher quelque chose dans ce titre. Donc, c'est environ une ou deux secondes plus rapide, mais le temps est précieux. Cela dépend donc vraiment de vous. Vous apprenez ce qu'est un attribut. Il s'agit d'informations supplémentaires que vous ajoutez à la taxe. Ce n'est qu'une leçon. 10. Étiquette neutres<span></span>: Bonjour, mon ami. Aujourd'hui, vous allez découvrir l'attaque appelée span, d'accord ? Et à quoi ça sert ? Eh bien, ça ne fait rien. La question est de savoir à quel moment vous voudriez créer une attaque ne sert à rien. Eh bien, remarquez cela lorsque nous avons voulu ajouter le titre de l'attribut, qui affiche une infobulle avec la valeur depuis 2017 Eh bien, nous avons dû ajouter une balise B, par exemple, ou nous aurions besoin d'utiliser ici une autre balise dont nous avons entendu parler, par exemple, A, n'est-ce pas ? Ou de nombreuses autres balises présentes dans le code HTML, mais la plupart des balises HTML modifient le contenu. Par exemple, le mérite du contenu était en gras. Et ce n'est pas quelque chose que vous voulez toujours avoir. Par exemple, ici, vous ne voulez pas le mettre en gras. Nous voulons en faire un simple texte, mais nous voulons tout de même ajouter un attribut. Et c'est à ce moment-là que vous utilisez un tack appelé span Comme vous pouvez le constater, nous n'avons rien changé dans le texte, mais lorsque nous déplaçons la souris sur le texte, nous avons toujours l'infobulle Donc oui, c'est à ce moment-là que vous utilisez le span. C'est quelque chose qui ne fait tout simplement rien. Donc, pour être honnête, l' envergure est juste un tachymètre neutre Cela ne fait rien, mais cela vous donne la possibilité d' ajouter des attributs comme ici, sans styler, sans, par exemple, mettre le contenu en gras Tout cela se trouve dans cette leçon. Merci. 11. Installation de extensions dans VSC : AutoRenameTag: Bonjour. Aujourd'hui, vous allez apprendre à installer des extensions dans le code Visual Studio, basant sur le problème rencontré lors de la dernière conférence. Notez qu'il faut du temps pour transformer le spam en spam. Nous avons dû le changer à deux endroits, non ? Et le temps est précieux, comme je le dis toujours. Existe-t-il donc une extension qui pourrait le faire pour nous ? Eh bien, nous pourrions le rechercher. Notez qu'ici, nous avons quelque chose comme le bouton une infobulle en dessous Lorsque vous cliquez dessus, vous pouvez rechercher des extensions et les installer. Vous pouvez rechercher une extension pour HTML. Comme vous pouvez le constater, ils sont nombreux. Eh bien, vous pouvez les installer si vous le souhaitez. Vous pouvez les consulter, vous amuser avec eux, vous pouvez en savoir plus sur eux, sur ce qu'ils font, etc. Mais ne vous concentrez pas là-dessus pour le moment, car vous devez d' abord apprendre le HTML et savoir ce qui pourrait vous être utile. Je vous montrerai celles qui vous seront utiles le moment venu. Comme maintenant, nous voulons que le tag comme ici automatiquement modifié lorsque je le change ici, je veux qu'il soit changé ici, non ? Alors, comment pourrait-on l'appeler ? Tapons peut-être Auto O ici. Renommer automatiquement le tag. Oui, nous voulons renommer automatiquement le tag. Installons-le. Et attendons une seconde. Il est installé. Comme vous pouvez le voir, vous pouvez voir ici Même quelqu'un a montré ce qui se passe lorsque vous l'utilisez. Regardez, il tape ici, il tape aussi ici. heure actuelle, lorsque nous voulons changer l'intervalle en, hé, c'est V pour l'Italie. Salut, c'est Italic. Peut-être encore une fois. C'est encore Span. C'est plutôt cool, n'est-ce pas ? Les extensions sont donc très utiles, mais vous devez savoir ce que vous recherchez. Vous savez comment installer les extensions dès maintenant. Vous savez que vous pouvez lire à leur sujet ici. Et bien, tu sais comment les utiliser, non ? Il suffit de les installer, et ils sont installés, c'est assez facile. Et comme vous pouvez le constater, nous avons installé quelque chose. C'est très utile, non ? Nous ne voulons pas utiliser la méthode p ici, nous voulons la remplacer par quelque chose de nouveau que nous apprendrons à l'avenir, par exemple, Section Or vous le ferez tous assez rapidement Ça fait partie de la leçon. Merci beaucoup. 12. « Style » de l'attribut - Comment modifier la couleur de l'arrière-plan ?: Bonjour, mon ami. La leçon d'aujourd'hui est très importante. Pourquoi est-ce ainsi ? Parce que vous découvrez l'attribut appelé style. C'est un attribut assez important que vous allez beaucoup voir à l'avenir. Vous apprendrez également comment modifier l'arrière-plan de votre page. Et vous découvrez l'attribut Big cool qui est obsolète, et vous apprenez ce que signifie obsolète Alors, où pensez-vous pouvoir donner des informations supplémentaires concernant le contexte de notre page ? Où se trouve un attribut comme celui-ci ? C'est une étiquette corporelle intérieure, non ? Soyez bien, le corps est le corps de notre site Web, et vous pouvez également le mettre ici et changer la couleur de fond. Ainsi, lorsque nous utilisons l' espace Cro plus, comme vous pouvez le voir, vous pouvez choisir l'attribut de couleur BG, qui représente la couleur de fond. Lorsque vous déplacez la souris ici, vous pouvez voir la couleur d'arrière-plan du document. Mais il y a aussi plus d'informations ici. Cette méthode n'est pas conforme. Utilisez plutôt la propriété de couleur d'arrière-plan CSS sur l'élément. Parce que, eh bien, cet attribut est obsolète, qui signifie qu'il n'est plus utilisé Alors pourquoi est-ce que je te montre ça ? Nous devrions simplement apprendre de nouvelles choses, non ? Eh bien, c'est vrai. Mais il y a toujours du mal. Il est bon de savoir qu'il existe de tels attributs. C'est bon de savoir qu' il existe de tels tags. Et quand vous les verrez à l'avenir, comprendrai comment ils fonctionnent, car nous pouvons apprendre de nouvelles méthodes, mais cela ne veut pas dire que d'autres utilisent toujours les anciennes méthodes arrivera tout simplement pas si tout le monde arrête soudainement d'utiliser BG Color, par exemple, n'est-ce pas ? Il est donc bon de savoir qu'ils existent. Notez également que même la couleur ici est le rouge. Vous pouvez donc voir assez rapidement ce qui n'est plus, vous savez, utilisé. C'est donc obsolète. Mais bon, vous pouvez changer la couleur BG trop tôt, par exemple quelque chose comme le rouge, ou vous pouvez la changer en orange. Vous pouvez donc utiliser les mots de couleur simples ici, et vous pouvez changer la couleur d'arrière-plan comme ceci. C'est assez simple, c'est vrai. Mais il existe une nouvelle méthode pour modifier l'arrière-plan de la page, et nous allons l'utiliser maintenant, appelée attribut style. Et lorsque vous utilisez les guillemets ici, vous pouvez faire bien plus que simplement changer la couleur de fond Et nous parlerons de ces autres propriétés ici lors de prochaines conférences, mais ne vous sentez toujours pas dépassés pour le moment. Je sais que vous venez de visiter de nombreuses propriétés ici, et vous pensez peut-être que non, non, non, non, non, ce n'est pas pour moi. Je ne vais pas me souvenir de tout ça. Ne t'inquiète pas. À l' avenir, vous n'aurez besoin de vous souvenir que des propriétés les plus utilisées. Vous allez en apprendre davantage sur eux. Et tous les autres. Eh bien, vous pouvez les trouver assez rapidement. Regardez, vous pouvez taper dans Google, comment changer la couleur de fond en HTML. Boum. Et comme vous pouvez le constater, vous pouvez utiliser la propriété CSS Background Color , que nous utilisons actuellement. C'est assez rapide, non ? Vous pouvez simplement taper Google, comment faire, et vous découvrirez comment le faire. Alors ne t'inquiète pas. Vous n'avez pas besoin de tout mémoriser par cœur. D'accord, d'accord ? Vous vous habituerez aux propriétés que vous utilisez le plus souvent. Comme vous pouvez le voir, lorsque je clique sur Entrée ici, revenons ici, couleur d'arrière-plan, j'appuie sur Entrée. J'ai ajouté les deux points ici et le point-virgule, car c'est à cet endroit nous avons mis la valeur de la couleur de fond Pour cette propriété spécifique qui change la couleur de notre site Web. Et quand j'utilise l'espace Control plus, comme vous pouvez le voir, nous avons maintenant beaucoup de couleurs que vous pouvez utiliser ici, n'est-ce pas ? Comme, par exemple, Aqua. Maintenant, quand nous revenons ici, comme vous pouvez le voir, nous le changeons en Aqua. Vous pouvez utiliser n'importe quelle couleur de cette liste. Mais il n'y a pas que cela, notez que nous avons la couleur ici. C'est cool car vous pouvez voir instantanément quelle est la couleur à côté du nom. Mais remarquez également que lorsque je déplace la souris ici, nous avons un sélecteur de couleur C'est cool. Nous pouvons nous déplacer comme, allons-y, peut-être verdâtres, peut-être faisons-nous quelque chose comme ça. Et cliquez sur Entrée. Eh bien, je n'ai pas eu besoin de cliquer sur quoi que ce soit. Je passe simplement la souris sur ce qui n'est pas ici, par exemple. Comme vous pouvez le voir, je peux changer de couleur. Mais vous remarquerez que notre couleur a changé pour devenir quelque chose d'étrange , appelé G B, rouge, vert, bleu, d'accord ? Vous pouvez mélanger le rouge avec le vert et le bleu. Et en fonction de l' ampleur des rougeurs vert ou du bleu, vous pouvez créer des couleurs. Vous pouvez en mettre un ici, par exemple, comme vous pouvez le voir, maintenant il n'y a plus beaucoup de rouge. Maintenant, nous allons mettre un en bleu, et comme vous pouvez le voir, ce truc va devenir plus vert. C'est la valeur maximale, comme vous pouvez le voir maintenant, elle est plutôt verte. Quand on en met un ici, il est noir. Quand on en mettra 255, ça va être rouge, rouge, avec 25, ça va être rouge, mais pas tant que ça, non ? Par exemple, 19, comme vous pouvez le voir, nous arrivons assez rapidement à la couleur rouge. Mais pour être honnête, pourquoi se donner la peine d'apprendre tout cela alors que nous pouvons simplement utiliser le sélecteur de couleurs C'est plutôt cool. Mais c' est dans le studio visuel. Vous utilisez un éditeur différent, ne vous inquiétez pas, ne vous inquiétez pas. Totalement, ne vous inquiétez pas, car vous pouvez trouver des sélecteurs de couleurs dans Google, vous pouvez taper Color Picker HTML, et vous en trouverez un assez rapidement C'est ainsi que vous changez de couleur. En utilisant le rouge, le vert et le bleu. Mais il est bon de savoir que lorsque vous utilisez, par exemple, des noms HTML sympas, il y aura un site Web comme celui-ci. Comme vous pouvez le voir, à chaque nom comme celui-ci correspond un truc étrange comme celui-ci. C'est quoi ça ? Eh bien, utilisons la couleur chocolat. Comme ça, cette fois. Comme vous pouvez le voir, nous avons obtenu la couleur chocolat. Si nous tapons du chocolat, ce sera également pareil. Ce truc s'appelle X. Et pour être honnête, c'est la même chose que le rouge, le vert et le bleu, ce d deux, lorsque vous changez, tapons hex dessus Comme vous pouvez le voir, tapons d deux, et c'est 210. Si nous avions du rouge, du vert et du bleu , comme ça, ce serait 210. Ensuite, nous devrons traduire la partie suivante, qui est 69, 69, soit 105. Ensuite, nous ferons de même pour un A. C'est juste x, et c'est juste une autre façon de représenter, comme vous pouvez le voir, j'ai fait référence aux mêmes choses. Ici, lorsque vous utilisez le convertisseur de couleurs un peu plus rapidement. Je voulais juste vous montrer comment cela fonctionne. Copions ceci Ici, comme vous pouvez le voir, c'est 20010530 La même chose que nous avons ici. Il s'agit donc simplement d' une représentation différente. C'est hexagonal C'est ce qu'on appelle la représentation hexadécimale du rouge, du vert et du bleu. Manière de changer de couleur. Vous pouvez donc changer de couleur en utilisant le RGB, vous pouvez changer de couleur en utilisant le X ou, par exemple, HSL, cela dépend vraiment de ce que vous voulez faire. faites pas la différence, pour être honnête, je préfère ce truc parce que c'est le plus court et qu'il prend le moins de place. Je préfère donc utiliser celui-ci en X. OK ? Mais est-ce que ce sont les deux couleurs ? Eh bien, nous pourrions arrêter cette conférence car nous avons appris à changer la couleur de fond. Nous savons que la couleur PG est dupliquée, ce qui signifie qu'elle n'est plus utilisée, mais qu'elle fonctionne Mais il se peut que cela cesse de fonctionner, il est donc bon de passer à des choses qui fonctionneront à l'avenir. Nous savons que l' attribut stall possède de nombreuses propriétés dont vous devez vous souvenir. Mais comment choisissons-nous les couleurs ? Est-ce que ce sont les deux couleurs ? Eh bien, comme vous pouvez le voir ici sur le côté gauche, vous pouvez lire beaucoup de choses sur les couleurs. Je recommande de les lire. Mais je pense que le plus important, ce sont les roues chromatiques. Remarquez que nous avons une roue chromatique RGB ici, et cela semble dégoûtant, non ? Mais quand tu emménages ici, ça a l'air génial, non ? Cela sera utilisé par les peintres, les artistes et les designers. Pourquoi ? Parce que ça a l'air génial. Et ce sont des couleurs qui se marient très bien, d'accord ? Et ce sont des couleurs que vous devez utiliser. Et ce qui est cool ici, c' est de regarder les combinaisons de couleurs. Lorsque je clique dessus, je passe, par exemple, à des cris de couleur monochromatique W, nous pouvons choisir le thème de couleur pour l'ensemble de notre site Web, nous pouvons voir à quoi il ressemblerait à différents endroits, comme celui-ci, nous pouvons nous déplacer et nous pouvons le rendre un peu, par exemple plus sombre, comme ça. Par exemple, j'aime bien ce truc. Et maintenant ? Eh bien, je choisirais simplement ces couleurs ici et je les copierais sur mon site Web, et cela fonctionnera. Si je veux, par exemple, cela dans notre couleur de fond, je le copierais simplement ici. Comme ça. Et bon, ça marche. Plutôt cool. Bien sûr, à l'avenir, vous apprendrez comment changer la partie de la couleur du site Web, etc. Ne vous inquiétez pas, comment changer la couleur du texte, etc. Dans cette conférence, vous avez appris à choisir les couleurs pour le futur. Il existe donc de nombreux autres schémas, comme celui-ci, comme vous pouvez le voir, il a l' air un peu différent, mais il a quand même l'air bien. Vous pouvez lui donner l'apparence que vous souhaitez et faire en sorte que les couleurs se mélangent bien. Normalement, c'est assez difficile, même en utilisant le sélecteur de couleur comme celui-ci Vous allez bien choisir une ou deux couleurs, mais si vous voulez avoir quelques autres couleurs qui se marient bien, alors c'est assez difficile. Il suffit d'utiliser le schéma de couleurs. Cela vous fera gagner beaucoup de temps et votre site Web aura l' air plutôt cool. Ce n'est qu'une leçon. Merci beaucoup. 13. Ajouter une image à votre site: Bonjour, mon ami. Aujourd'hui, je vais vous montrer comment ajouter une photo, une image sur votre site web. Tout d'abord, nous devons utiliser une nouvelle balise appelée IMG, d'accord comme ça. IMG est donc l'abréviation d'image. Si facile à retenir. OK. Mais remarquez qu'il n' y a pas de balise de fin, non ? Comme lorsque nous utilisons la ligne de frein. Il n'y a donc tout simplement pas de balise de fin. Et bien, vous pouvez fermer la balise image en utilisant la barre oblique comme ici Il s'agit de l'information indiquant que cette balise est fermée au même endroit. Mais tu n'en as pas besoin, d'accord ? Ce n'est pas obligatoire. C'était obligatoire. Si vous utilisiez X HTML. Donc, si vous rencontrez quelqu'un qui fait quelque chose comme ça, ne vous inquiétez pas, nous travaillerons, n'est-ce pas ? Vous pouvez le faire, mais nous n'en avons pas besoin. Alors ne t'inquiète pas. Ne le fais pas. Et maintenant, il y a une chose importante, comment ajouter cette image ? Eh bien, s'il n'y a pas de balise de fin, cela signifie que tout ce qui connecté à l'image se trouve à l'intérieur de cette balise, et nous donnons ces informations supplémentaires en utilisant l'attribut, n'est-ce pas ? Cela s'appelle S RC. La source. Cela signifie source. Nous avons donc mis ici la source, donc nous avons mis la valeur d'où nous voulons obtenir l'image. Eh bien, où est notre image ? Tout d'abord, nous devons le mettre dans notre dossier. Comme vous pouvez le constater, nous avons ici, par exemple, celui de JP G, et nous pouvons le mettre ici. Alors déplacez-le simplement vers les chats comme ça, ou vous pouvez simplement le faire comme ça, déplacer vers notre éditeur et le déplacer ici. Et comme vous pouvez le voir , il est maintenant là. Comme vous pouvez le voir, nous pouvons l'ouvrir, vous pouvez le regarder. Nous pouvons voir quelques informations sur l'image ici, sa taille, sa largeur , sa hauteur , son coût sur notre disque et son nom. Maintenant, lorsque vous utilisez le raccourci contro plus espace, comme vous pouvez le voir, cela me suggère que je peux ajouter celui que JP ici Et pour être honnête, c'est tout. Comme vous pouvez le constater, nous avons ajouté une image à notre site Web. C'est assez gros, mais nous l'avons ajouté et il fonctionne bien. La question est tout d'abord, concentrons-nous sur le nom. Ne nommez pas vos images comme ça, d'accord ? C'est une mauvaise idée. Vous devez le renommer pour vous assurer que le nom représente le contenu de l'image Cette image représente la guitare basse. Le type de guitare est la basse. Je pense que nous devrions simplement la renommer, cliquer avec le bouton droit de la souris, renommer ou utiliser le raccourci F deux, et appelons-la guitare basse Ou la guitare basse, peu importe. Notez que je n'ai pas utilisé l'espace ici. Je ne l'ai pas fait comme ça. chaque mot, vous devez vous connecter en utilisant le tiret ici comme ceci. Vous ne devez pas utiliser d'espaces dans les noms. Par ailleurs, ne nommez pas vos fichiers de cette façon. N'utilisez pas les majuscules. Juste un petit étui. Et bien, c'est comme ça que nous procédons, non ? Si vous vous contentez de le nommer, il est maintenant plus autodescriptif . Nous changeons donc le nom. Eh bien, cela ne change rien ici, mais cela semble mieux maintenant, non seulement pour nous, mais aussi pour les bateaux de Google qui, lorsqu' ils regardent le nom, peuvent, vous savez, voir quoi parle cette page et ce que contient ce fichier, d'accord ? Peut-être que les robots peuvent analyser des images fréquemment utilisées. Mais une telle image, eh bien, il est difficile d'interpréter ce qu'il y a exactement ici. C'est une guitare basse. Il y a des sortes de bougies, il aura du mal à les interpréter. Mais ici, il peut prendre cette guitare basse d'ici, et il le sait, c'est un véritable engouement pour la guitare. Cette page concerne probablement les guitares. C'est donc une bonne idée de nommer vos photos comme ceci. Nous savons donc maintenant comment joindre l'image. La question est de savoir ce que nous faisons lorsque, par exemple, quelque chose se passe comme ça. L'image ne sera donc pas faible. Comme vous pouvez le constater, il y a quelque chose comme ça ici, et nous pourrions y mettre un autre message. A est donc l'abréviation de message alternatif. Donc, l'autre message, que doit faire l'ordinateur cas de problème avec la source. Peut-être que le serveur est tombé en panne, quelque chose comme ça. Vous devez taper ici ce qui est représenté ici. Par exemple, guitare basse, p. Comme vous pouvez voir ici, nous avons maintenant de bonnes informations sur la guitare bus. Le problème est que maintenant, cette chose a également pris de la place. Remarquez que cela a pris beaucoup de place. Si vous aviez du texte ici, vous voudriez qu'il soit toujours là. Vous ne voudriez pas détruire l'apparence de votre page. C'est pourquoi vous devez toujours spécifier la propriété with, nous attribuons à la largeur de votre guitare. C'est 680 et la hauteur est de 1024. Et comme vous pouvez le constater, maintenant, lorsque nous dessinons une flèche ici, comme vous pouvez le voir, nous avons une bonne guitare basse, la description, mais il y a quelque chose qui tient la place de notre image. Cela indique donc la vague et la hauteur, et c'est également utile pour accélérer le chargement de votre site Web, car il va s'afficher Il va donc créer le contenu de votre site Web plus rapidement lorsqu'il connaît la taille des images de votre côté. L'accélération du chargement de votre site Web. Vous pouvez, par exemple, remplacer par quelque chose comme ça, et non la taille qui se trouve ici, comme ceci. Disons-le comme ça. Comme vous pouvez le constater, cela fonctionne bien, mais cela n'a pas l'air bien. Cependant, si vous supprimez le masque, notez que ce sera proportionnel. Changez, non ? La taille est modifiée proportionnellement. Cela signifie donc que lorsque vous modifiez la largeur, la hauteur ira en fonction du wi, d' accord. Donc c'est plutôt cool, peut-être. Vous pensez peut-être que vous pouvez également régler la hauteur et que cela va changer la largeur. Donc ça a l'air bien. Le problème est que vous ne devriez pas l'utiliser. Eh bien, peut-être que si vous l'utilisez une fois, rien de grave ne se produira. Mais si vous l'utilisez très souvent, vous ralentissez le chargement de votre site Web. Pourquoi ? Parce que nous, le navigateur Web devions faire le travail à votre place, j'ai dû modifier la taille de votre image. Cela prend donc du temps. Ensuite, notez que cette image occupe environ la moitié du mégaoctet, 462 kilo-octets Si vous aviez modifié la taille ici, par exemple, comme nous l'avons fait ici, la taille à 320. Il a une largeur deux fois plus petite, comme ça. Cette image ne prendrait alors que 250 kilo-octets environ Il est deux fois plus petit. Votre site web, nous le chargeons plus rapidement. Si vous devez modifier la taille de l'image, faites-le manuellement, ouvrez-la dans une sorte d'éditeur qui édite les images et faites-le manuellement Ne le faites pas par ici, vous pouvez le faire par ici, mais essayez de l'éviter. Il est préférable de simplement saisir les valeurs qui sont là pour accélérer votre site Web afin de vous assurer que tout semble correct. De cette façon, votre site Web sera plus facile à lire pour les robots pour les robots de Google, et votre site Web sera mieux classé. C'est juste pour la conférence ? Eh bien, non, nous pouvons insérer des images plus rapidement. Notez que lorsque j'ouvre en utilisant ce signe inférieur ou inférieur, le tag, lorsque j'ouvre comme ça, je dois faire manuellement ce dont j'ai besoin pour accéder manuellement à tous ces attributs. Cependant, quand je le fais comme ça. Je n'utilise pas ce signe ici et je tape simplement IMG. Maintenant, je clique sur Enter. Comme vous pouvez le voir, cela mettra quelque chose comme ça ici, et je peux mettre la source, utiliser le mot-clé tab et passer à un message alternatif comme celui-ci. C'est un peu plus rapide, je n'ai pas besoin de taper EMG que la source. Ensuite, je tape simplement EMG Guitare Buzz Guitare Bam Buzz . C'est plus rapide. Vous avez donc appris que si vous souhaitez utiliser la fonctionnalité MET, installée par défaut dans le code de Visual Studio, vous devez procéder de cette façon. Ça l'est aussi. En outre, cela fonctionne pour d'autres types. Par exemple, si je voulais créer le métatype dont nous allons parler, comme vous pouvez le voir, nous pouvons, par exemple, le créer avec des attributs supplémentaires, et vous n' avez pas besoin de réfléchir à la manière dont les attributs sont appelés dans ce Vous le faites simplement comme ça et quelque chose est rempli par l'éditeur, ce qui est bien parce que vous n'avez pas besoin de vous en souvenir. Et j'adore les fonctionnalités comme celle-ci. Parce que n'oubliez pas que vous êtes un p, la personne créative qui doit créer des choses. Il ne faut pas se souvenir de tout par cœur. Ce n'est pas nécessaire de nos jours. Vous devez savoir comment rechercher des objets et vous devez savoir comment les utiliser. Ce n'est qu'une leçon. Merci beaucoup. Et c'est toujours le cas, n'oubliez pas que si vous avez des questions, n' hésitez pas à les poser. 14. BONUS : Où obtenir des images GRATUITES sur votre site ?: Bonjour. Aujourd'hui, je vais vous montrer comment obtenir des photos gratuites et totalement gratuites sur votre site. Vous pouvez utiliser pour ce site le nom de pexels.com, pixel.com ou unsplash.com. Utilisons-en un. Supposons que nous recherchions les CT. OK ? Je souhaite avoir un site sur le CAT. Supposons donc que nous voulions trouver un chat qui figurera sur notre site Web. Comme vous pouvez le voir, ces photos sont magnifiques, non ? Ils sont vraiment géniaux. Ce n'est pas vraiment travail pour lequel vous devrez normalement payer. Ils sont gratuits. Vous pouvez simplement cliquer dessus , cliquer sur le téléchargement gratuit ou déplacer votre souris ici, et vous pouvez même modifier la taille de l'image pour qu'elle soit un peu plus petite. Je pense que la version plus petite est meilleure. Cliquons sur le téléchargement gratuit, cliquez sur OK. Et comme vous pouvez le constater, nous avons téléchargé le fichier. Comme vous pouvez le voir également, le nom de ce fichier n'est pas bon, non ? Parce que nous avons ici une coupure, et le nom doit toujours représenter ce qui est sur la photo. La couleur de ce CD est le gingembre. Appelons peut-être le fichier Ginger Cut. Allons-y encore une fois, et appelons ça du gingembre coupé. C'est un meilleur, certainement un meilleur nom. Vous devez également ajouter un attribut lorsque vous attachez l' image de votre côté, alternez et tapez le gingembre coupé, par exemple. Alors fais-le toi-même dès maintenant parce que tu as besoin de faire de l'exercice. Vous devez saisir le code. Vous pouvez simplement regarder la vidéo. Copiez-le dans votre dossier. Clés, et ajoutez-le simplement à votre site Web. Je pense que tu devrais t' entraîner encore un peu plus et jouer avec ces équipes. Amusez-vous bien et cherchez de l' inspiration, car vous pouvez vraiment trouver plein de photos sympas ici, ici et ici, jouer avec, ajouter à votre site Web, afin que vous puissiez vous amuser et savoir comment le faire sans réfléchir. C'est comme cette leçon. Merci beaucoup. 15. Obtenir une taille img avec un raccourcis VSC: Bonjour. Aujourd'hui, je vais vous montrer comment définir la largeur et la hauteur de l'image de manière rapide et facile. Parce que normalement, vous devrez ouvrir l'image. Vous pouvez le faire un peu plus rapidement, ne pas utiliser l'Explorateur de fichiers en utilisant leur contrôle et un clic gauche dessus. Et comme vous pouvez le voir, l'image s'est ouverte. Et ici, dans ce coin, nous avons la largeur et la moitié. Le problème de cette solution est que nous devons la mémoriser maintenant, n'est-ce pas ? Donc quand je clique ici, je dois me rappeler que la largeur est ce que je pense voir scanner et 80 alors je ne me souviens pas de la hauteur, non ? Je dois cliquer à nouveau ici, donc ça prend du temps, non ? Et nous n'aimons pas les choses qui prennent du temps. Placez leur curseur à l'intérieur de la balise d'image , puis utilisez le raccourci F1 ou tracé de contour x3 plus b. Et maintenant ici, vous pouvez taper la taille de l'image de mise à jour ou vous pouvez simplement taper image. Comme vous pouvez le voir, il n'y a qu'une chose comme ça. Lorsque vous cliquez sur Entrée, nous avons bien la largeur et la hauteur définie. C' est plutôt cool. Et notez également que vous pouvez définir la liaison de clé ici à quelque chose qui le rendra encore plus rapide. Cependant, je ne le recommande pas dans cette situation. Pourquoi est-ce ainsi ? Parce que la situation comme celle-ci n'est pas comme vous le faites tous les jours, vous êtes alors image et vous oubliez le plus de temps. Donc peut-être 23 fois par page, quelque chose comme ça. Et quand vous utilisez ces choses ou quand vous utilisez juste quoi ? F1, puis tapez image et lorsque vous cliquez sur Entrée, notez que c'est la première chose. Maintenant, après avoir ouvert ce haut à droite, il dit le récemment utilisé, donc c'est vraiment plus rapide en utilisant notre droite est juste entrer F1 si vous avez une autre image. Disons que ça ressemble à ça. Donc, entrer F1, entrer F1, c'est de jolis fichiers, non ? Alors ne vous inquiétez pas de le régler. Le raccourci ne le savait pas. Alors merci beaucoup. 16. Comment lier à différents dossiers ? Créer une théorie du PATH: Bonjour, mon ami. Le truc, la valeur que nous mettons ici dans l'attribut source en tant que valeur s'appelle puff Pourquoi s'appelle-t-il Puff parce que cela représente un moyen de trouver le fichier, n'est-ce pas Donc, afin de trouver le fichier bas gitar do JPE, votre ordinateur doit regarder où Eh bien, dans le même dossier où se trouve ce document que nous écrivons dans un exemple, ce code HTML se trouve actuellement . C'est où ? Il se trouve dans le dossier CaTS. OK Alors il saute d'ici à ici. Tout va bien car bon, l'image apparaît. La question est la suivante : que devons-nous faire lorsqu' il existe un autre dossier ? Par exemple, créons un nouveau dossier, mais pas à partir d'ici, mais en utilisant le code de Visual Studio afin d'apprendre à le faire. Il suffit de cliquer sur le dossier Nut ici et appelons-le, par exemple, images. Parce que ce dossier contiendra des images. Hein ? Eh bien, dans une situation normale, ce n'est pas une bonne idée de mettre tous les types de fichiers dans un seul dossier, n'est-ce pas ? Parce que, eh bien, si votre projet grandit, vous allez simplement vous perdre. Mettons donc les images dans le dossier des images. Déplaçons-le ici, puis cliquons sur Déplacer. Bon, maintenant c'est bon, mais le problème, c'est que nos images ont disparu. Pour accéder aux images du dossier, nous devons créer un chemin d'accès. Et pour ce faire, nous devons taper des images. Comme vous pouvez le constater, le code de Visual Studio nous donne un indice, puis la barre oblique, puis le nom du fichier Maintenant, comme vous pouvez le voir, nous avons retrouvé notre image. Cela ne s'est pas affiché car le chemin est mal écrit, mais ici, tout est correctement écrit Et c'est assez simple, non ? Nous avons juste besoin de taper où nous devons chercher dans le fichier ici. Mais tout n'est pas dans ce sujet. N'arrêtez pas cette conférence car certaines situations sont plus difficiles. Par exemple, créons un nouveau dossier et appelons-le, par exemple, articles. Disons que nous allons mettre leurs articles. Et déplaçons ce fichier ici vers les articles, et bien, supprimons-le, et mettons-le ici. Copions-le donc ici. Et comme vous pouvez le voir, ouvrons-le dans les articles, et ouvrons-le avec Firefox. Comme vous pouvez le constater, il n' y a tout simplement rien ici. Nous n'avons qu'un message alternatif, n'est-ce pas ? Ce n'est donc pas une bonne chose. Pourquoi cela ne fonctionne pas Parce que vous devez vous rappeler que votre ordinateur recherche la guitare basse et les images où. Lorsque nous sommes dans le dossier des articles, et que l'exemple de deux fichiers HTML se trouve ici, là où le fichier HTML est représenté, où il a été créé. Nous en aurons donc besoin ici. Les images devraient se trouver ici. Mais il n'est pas là. C'est un dossier dans un sens. Une fois, il faut monter. Mais comment monter ? Et c'est une bonne question. Nous devons utiliser deux points puis une barre oblique. Et cela signifie, hé, allons dans un répertoire plus haut. Fermons donc ceci, passons à CATs, puis nous allons rechercher des passons à CATs, images, puis nous allons regarder dans le dossier d' images de ce JP 5 en particulier. Et comme vous pouvez le constater, maintenant cela fonctionne bien. D'accord ? Il existe donc des méthodes avancées pour se déplacer dans les dossiers. Ce n'est qu'une leçon. Merci beaucoup 17. Vendre le code source de TOUS Quels sont les commentaires ?: Bonjour, mon ami, saviez-vous que vous pouvez consulter le code de n'importe quel site Web ? Oui, vous pouvez accéder à n'importe quel site Web, totalement n'importe quel site Web, et vous pouvez consulter le code du site, vous pouvez même aller sur Google et voir comment il a été écrit, n'est-ce pas ? Mais seulement la partie visible, d'accord ? Sur le fond du site. Vous pouvez donc en regarder la partie HTML. Alors, comment le faire. Utilisez le raccourci, le Control plus U. D'accord ? Et comme vous pouvez le voir, ce site est vraiment un site de script, non ? Eh bien, ce site est un site assez avancé. Mais quand vous allez sur le site comme ça, c'est toujours un peu difficile. Vous pouvez voir ici certaines choses qui ne sont probablement pas comprises, mais vous pouvez voir des choses que vous connaissez sur le corps, la tête, par exemple , vous pouvez apprendre de choses comme ça. Nous allons découvrir des choses que vous pouvez voir ici, la plupart d'entre elles. Eh bien, parce que nous ne parlerons pas , par exemple, de Javascript, code qui vous permet modifier dynamiquement les choses de votre côté. C'est totalement le sujet d'un autre cours. J'ai un cours à ce sujet, vous pouvez donc trouver ou apprendre ce sujet ailleurs. Mais bon, vous pouvez voir la source. C'est le plus important. Lorsque vous allez à nos côtés, celui que nous avons écrit jusqu'à présent, lorsque nous allons à la source, vous pouvez voir que c'est exactement ce que nous avons écrit ici, et nous pouvons le copier-coller ici et travailler de la même manière. Nous codons comme ça. Non, cela n'arrivera pas car, comme vous pouvez le voir, il y a des références dans le fichier, il y a des scripts comme celui-ci, et vous devrez télécharger tous les fichiers connectés sur le côté si vous voulez que cela fonctionne de la même manière. Il peut également y avoir une sorte de langage qui fonctionne sur le côté serveur du site, comme par exemple PHP ou peut-être le Python, eh bien, vous ne l'avez pas, n'est-ce pas ? Donc, signes avancés, vous ne pourrez pas le copier. Mais vous pouvez apprendre en regardant comment les gens utilisent les DP, par exemple, et nous verrons comment ils utilisent les tags, n'est-ce Et comment cela cadre-t-il avec des choses dont nous parlerons également. C'est ce que vous pouvez apprendre du code écrit par d'autres. C'est donc plutôt génial. Mais la partie la plus importante de cette conférence est de savoir quels sont les commentaires et quand les utiliser. commentaires, comme leur nom l'indique, sont des éléments qui vous permettent de commenter une sorte de code, par exemple, supposons que vous vouliez commenter l'image, n'est-ce pas ? De quoi parle l'image ? Alors, comment le faire. Vous utilisez les signes suivants, le signe inférieur, puis le point d'exclamation, puis d. Et comme vous pouvez le voir, la fin de ce truc est d et le plus grand D. Et quoi que vous mettiez ici, cela ne sera pas interprété Comme vous pouvez le voir, lorsque je l' actualise, il n'est pas là. Et bien, nous pouvons même placer toutes ces choses ici sous le commandement. Comment le faire ? Eh bien, vous pouvez utiliser le raccourci qui ressemble à ceci, Control plus slash Je me contente donc de salgate, et comme vous pouvez le voir, c'est maintenant sous le commandement Tout ce qui se trouve entre ceci et cela sera sous le commandement. Comme vous pouvez le constater, tous les textes ont disparu ici. Mais cela n'a disparu que du point de vue de l'utilisateur, mais pas du point de vue des personnes sachant coder. Lorsque vous allez à la source, en utilisant le raccourci Control plus, je vois, eh bien, ces commentaires sont là. Donc, ne mettez pas ici ce que vous voulez. Vous ne devriez pas mettre ici des choses secrètes, car tout le monde peut les voir. Alors, quand utiliser vraiment quelque chose comme ça ? Serait-il judicieux de décrire l'image dont j'ai parlé plus tôt ? Eh bien, vous pouvez le faire, mais peut-être uniquement sur le code de développement. Le code de développement est le code que nous avons ici. Mais lorsque vous passez de notre côté, lorsque vous le transférez sur Internet, vers le serveur Web, ce n'est pas une bonne idée de transmettre tout le texte, car votre site Web sera plus grand à cause de ce type de texte. Eh bien, ce n'est pas grand-chose, parce qu'un caractère est très petit ne prend pas beaucoup de place, mais lorsqu'il y a plusieurs personnages comme celui-ci, imaginez que nous avons reçu nombreux commentaires et que vous commentez tout, votre site Web se charge un peu, peu plus vite, plus lentement. Donc, cela ne fonctionnera tout simplement pas bien pour vous. Parce que la vitesse du site Web est très importante pour un classement élevé dans Google. Donc, ne commentez pas tout. Mais pour apprendre, lorsque vous apprenez quelque chose, ou lorsque je vous enseigne, c'est une bonne idée d' utiliser des commentaires pour vous dire que IMG signifie image, SRC signifie source, etc. C'est une bonne idée d'utiliser des commentaires pour cela car bon, ce n'est pas cool de l' avoir visible ici, non ? Parce que je voulais juste t'apprendre comment ça marche, non ? Je ne veux pas le montrer ici. De plus, la plupart du temps, lorsque j'utilise ce genre de choses , disons que je ne veux pas cette image pendant une seconde, et que j'utilise simplement le raccourci clavier et la barre oblique, n'est-ce Et cette image disparaît. Et peut-être plus tard, je voudrais revenir sur ce code, et je veux l'avoir à nouveau. Donc, ça va revenir. Donc, la plupart du temps, je l'utilise pour cela, juste pour le commenter pendant une seconde, puis j'y reviens ou je veux simplement décrire certaines choses pour d'autres ou des formulaires, mais juste pour la partie développement. Non lorsque je passe à Internet. Tout est dans la leçon. Merci. 18. Meta Tags: Bonjour, mon ami, nous avons appris que dans la section principale de notre site Web, nous devrions ajouter des informations supplémentaires concernant notre site Web, et nous avons ajouté le titre. Il existe des balises appelées Meta, qui sont utilisées à cette fin, pour ajouter des informations supplémentaires. Et comme vous pouvez le constater, ce tag n'a pas de fin. Tu peux le terminer comme ça. Mais ce n'est pas obligatoire, non ? Parce que nous utilisons le code HTML des actualités. Donc, le méta-tag. Et comme il s'agit d'une balise qui n'a pas de fermeture, nous utiliserons des attributs pour spécifier les informations supplémentaires concernant notre site. OK, alors quel type d' information pouvons-nous mettre ici ? Commençons par quelque chose de drôle. Comme, par exemple, l' auteur de ce site. OK. Alors, comment le faire. Nous devons utiliser un attribut auquel nous donnons des informations supplémentaires concernant la balise méta. Et c'est ce qu'on appelle un nom. Et nous précisons ici des choses comme, par exemple, l'auteur. Il existe de nombreux autres noms qui vous permettent de spécifier, par exemple, une description, des mots clés, etc. Nous les apprendrons quand nous en aurons besoin. Dans cette conférence, nous en apprendrons quelques-unes , mais pour être honnête, vous n'avez pas besoin de vous en souvenir toutes, car il s'agit simplement de quelque chose que vous allez probablement copier-coller d'un côté à l' autre, d'accord ? Donc, ne vous inquiétez pas, vous n' avez pas besoin de vous en souvenir par cœur. OK, alors nommez l'auteur. Et maintenant, le problème est savoir comment mettre le contenu ? Comment attribuer de la valeur à cet auteur ici ? Nous devons simplement créer un autre attribut qui contiendra le contenu pour l'auteur, n'est-ce pas ? Dans ce cas, je suis l' auteur de cette page. Je vais taper Arcadis Vodac Ces informations ne sont pas visibles pour tout Vous devez accéder au code source, puis vous pouvez le trouver ici, n'est-ce pas ? Et ces informations peuvent être utilisées par des programmes qui analysent le site, et ils peuvent, par exemple, montrer maintenant que l'auteur de ce site est Arcadis Vodach Pour être honnête, cette méta est spécifiquement pour dire bonjour, ce contenu a été créé, ce site a été créé par moi, n'est-ce pas ? Vous pouvez taper ici le nom de votre entreprise, etc. Mais il existe des métatacs utilisées par Google, par exemple, lorsqu'il recherche des choses, il cherche quelque chose, il cherche quelque chose, ce que l'on appelle une balise de méta-description Comme vous pouvez le constater, nous pouvons utiliser le MET ici pour certaines balises méta, malheureusement, pas pour l'auteur, mais pour la description, qui précise la description de votre site. Quelle est cette description ? Lorsque vous tapez ici des coupures, notez que nous avons ici un titre, c'est ce qui se passe ici. Et nous avons quelque chose comme une description de votre côté. Oui, vous pouvez spécifier la description de votre camp ici, dans cet attribut de contenu. Tapons quelque chose Les chats sont des animaux de compagnie que nous aimons tous. Minimisons ce que nous aimons tous. Les chatons sont adorables. Par exemple, faisons-le comme ça, afin que nous puissions voir tout le texte et qu'ils adorent snacks de notre ville, quelque chose comme ça OK, et vous vous demandez peut-être maintenant pourquoi cela ressemble à ça. Eh bien, lorsque vous créez une description, vous devez vous efforcer de la rendre conviviale pour la personne qui examine la description de votre point de vue, n'est-ce pas ? Et vous devriez utiliser les mots clés qu'il écrirait probablement parce que c'est quelque chose qui peut être pris en compte dans le classement de votre camp, d'accord ? Et aussi, quand il y a quelque chose que vous savez, drôle ici ou peut-être qu'il y a quelque chose qui attire l'attention de l'utilisateur. Il cliquera sur votre côté dans le classement. Mm. Il y aura plus de chances qu' il le fasse, non ? C'est donc très important pour, vous savez, j'utilise les chats, les chatons. J'utilise le ti, non ? Je n'ai pas utilisé simplement, vous savez, parce que certaines personnes décriraient le site sur des chats comme les chats, les chats, les chats, les chats, pour, vous savez, monter plus haut dans Google parce que Google prend en compte le nombre de fois que les chats ont été orthographiés , par exemple, sur votre site Si tu en fais trop, ce ne sera pas une bonne chose. C'est une excellente description qui, vous savez, ne semble pas avoir été créée pour le robot. Il a été créé pour la personne. Et maintenant, eh bien, nous ne créons pas, par exemple, un article sur images amusantes de coupures, mais nous sommes quoi ? Ils adorent manger des snacks de notre côté chic. Par exemple, changeons le titre en Kitty. Des en-cas. Tu ferais mieux prendre des snacks ou quelque chose comme ça, non ? Et cela vous permettra d'obtenir des résultats plus élevés dans Google. Cette chose peut être considérée par Google comme une suggestion. Que mettre ici ? Pourquoi ai-je parlé de suggestion ? Parce que Google pourrait penser : « D'accord, vous mentez ou peut-être qu' il existe une partie du site Web qui décrit mieux votre site Web », et il ne l'inclura pas. Mais la plupart du temps, il en tiendra compte. C'est donc une bonne idée de prendre le temps d' indiquer ici ce qui améliorera le classement de votre camp. Il existe également une balise méta appelée réservoir de mots clés, elle spécifie les mots clés. Les mots qui sont essentiels pour vous. Dans ce cas, il s'agirait de chats, de clés, de snacks, etc. Mais bon, cela n'en tient plus compte , parce que les gens spammaient ici des mots clés, comme par exemple, Cat Cat CCCC cuts, comme par exemple, Cat Cat CCCC cuts, et cela pourrait entraîner, vous savez, du spam sur Internet, Cela ne prend donc pas en compte. Mais vous pouvez spécifier vous-même les mots clés ici, juste pour savoir de quoi parle ce côté, mais ce n'est pas nécessaire pour être honnête. Il y a donc cette description, et notez que je l' ai mise sous le titre. Tu peux le mettre où tu veux, non ? Mais pour être honnête, il est préférable de le mettre sous le titre car vous pouvez maintenant voir exactement le titre et la description en un seul endroit. S'il y avait plus de contenu ici et que vous aviez une description ici, ici le titre, ce serait un peu compliqué, non ? Ce n'est pas une bonne façon de coder les choses. Mettez donc la description ici. Il y a des auteurs par exemple ici, et c'est joli. OK. Il existe d'autres métabalises, mais nous en parlerons quand nous en aurons besoin, d' Je pense que ce serait le meilleur moyen d'apprendre de nouvelles choses. Le sur la leçon. Merci beaucoup 19. Charset - Encodage de bonne bonne forme sur votre site: Bonjour, mon ami. Aujourd'hui, nous allons parler de l'encodage approprié sur votre site Web. Imaginez que vous avez un forum. Sur ce forum, sur ce forum, il y a de nombreux sujets avec des personnes de différents pays. Par exemple, depuis la Pologne, n'est-ce pas, remarquez que nous utilisons ici un caractère appelé L en polonais, et ce caractère ne figure pas sur tous les claviers, par exemple, n'est-ce pas ? Il y a donc une sorte de codage qui se produit en arrière-plan et qui montre cette lettre. Des lettres normales comme celle-ci, comme AB CDFG, etc., celles que l'on trouve dans presque toutes les langues, seront interprétées sans problème Mais comme celui-ci, cela peut donner de mauvais résultats, cela peut être interprété. Je vais faire quelque chose très rapidement maintenant. Remarquez que cela peut être comme ça. Je reviens à ce qui s'est passé avant, et je vais bientôt expliquer ce qui s'est passé. Cela peut donc être interprété de manière fiable, et nous devons éviter de telles situations parce que nous voulons être professionnels. Nous voulons un encodage qui nous permette de toujours nous assurer que tout s'affiche parfaitement sur votre site Web. Pour ce faire, nous devons encoder votre site Web, la même manière que le fichier est codé Comme vous pouvez le voir, le codage de base, qui est dit en ce moment, s' appelle UTF huit Ce codage est plutôt cool car il interprétera toujours tout correctement. Mais vous devez également l'ajouter ici dans la métabalise à l'aide du. Comme vous pouvez le voir, EMT, nous pouvons utiliser ce raccourci, et nous obtiendrons une métabalise ressemblant à ceci raccourci, et nous obtiendrons une métabalise ressemblant à Et ce truc, comme vous pouvez le voir, indique type de contenu équivalent à HTTP, et le contenu est Tex HTML, et le kit de voiture est UTF huit Honnêtement, c'est difficile à retenir, je le copie et le colle toujours d'un endroit à autre parce que ce serait horrible de m'en souvenir. Et ce truc, assurez-vous que tout sera interprété correctement, d'accord ? Mais vous devez toujours vous en souvenir : le fichier, et ici nous avons obtenu les informations doit également être dans le même encodage que celui-ci. Lorsque nous l'actualisons, comme vous pouvez le voir, ici, nous avons le bon encodage. Cependant, vous vous demandez peut-être avant que ce dernier ne soit également interprété correctement. Oui Mais Firefox, dans cette version, est assez récent, et il va juste s'assurer que c'est la version par défaut et qu'il va interpréter correctement, car cet encodage est assez connu et je vais juste le deviner. Mais il existe de nombreux programmes, moyens d'ouvrir votre site. Crois-moi À l'avenir, apprenez-en plus sur eux. Je ne sais pas, en regardant HTML dans une sorte de programme qui interprète les e-mails, vous pourriez avoir des problèmes avec les lettres, par exemple, comme celui-ci C'est donc une bonne idée de le mettre ici. Et votre site web sera toujours beau. Vous devez également savoir que cette façon d'écrire l'encodage est assez ancienne et qu'elle fonctionne sur les anciens navigateurs Web et les anciennes applications. Mais d'une manière ou d'une autre, c'est suggéré par le code de Visual Studio. Je pense que c'est simplement parce qu' ils veulent soutenir et avoir toujours un encodage correct. Donc, si vous souhaitez prendre en charge tous les navigateurs Web , etc., utilisez cette méthode. Cependant, si vous voulez gagner du temps, vous pouvez utiliser quelque chose comme ça. Ensemble de voitures attributaire qui définit simplement le jeu de voitures sur UTF H. C' est donc égal à cela ci-dessous, mais cela n'est pas pris en charge aussi bien que le point ci-dessus, avec ces Vous vous demandez peut-être dans quelle mesure il n'est pas pris en charge. Pour être honnête, presque tout le monde va soutenir ce projet, presque, non ? C'est donc à vous de décider. Nous allons donc utiliser ce truc parce que je pense que c'est plus facile à retenir, non ? Et ça a l'air mieux. Il contient moins de caractères, votre site Web sera donc beaucoup plus rapide. Peut-être pas beaucoup, mais, vous savez, lettre à lettre et votre site Web sera plus petit. Vous avez probablement remarqué que j'ai cliqué ici au début, quelque chose comme ça, et que j'ai rouvert avec un encodage différent sur notre site Web Écoutez, nous pouvons utiliser, par exemple, le 8892, qui est le codage central d' Europin, et il contient des caractères de cet endroit dans le monde, Et quand je l'utilise, je remarque que le caractère L change. Lorsque j'utilise le contrôle plus Z, je reviens à l' encodage que nous avions auparavant, mais lorsque je rafraîchis ici, comme vous pouvez le voir, nous avons une lettre humide. Parce que le fichier est encodé dans cet encodage. Nous devons donc également avoir ici le même encodage, comme celui-ci. Comme vous pouvez le constater maintenant, cela fonctionne correctement. N'oubliez donc pas que vous devez toujours avoir le même encodage que celui de votre fichier. La plupart du temps, vous l'avez avec UTF huit et vous n' avez rien d'autre à faire , mais ajoutez simplement le Carset à l'UTF huit ici et tout fonctionnera correctement Revenons à ce qui est pris en charge partout. Comme ça et tout va bien. Il est également important de savoir que cette contre-attaque, exceptionnellement, devrait toujours être présente. Après la première métattaque, pourquoi ? Parce que, eh bien, si vous le mettez ici, par exemple, remarquez que le caractère L est là, et le programme saura quel encodage nous avons ici. Ce n'est pas une bonne idée car nous pouvons recevoir des lettres avant. Qui plus est, les programmes étudient la question le plus tôt possible. Certains programmes ne seront donc même pas en mesure de l' interpréter si c'est plus tard. Il suffit donc de le mettre comme première chose dans la section principale. Tout cela se trouve dans cette leçon. Merci beaucoup 20. Doctype HTML: Bonjour, mon ami, aujourd'hui, je vais vous dire, pourquoi devrions-nous ajouter le type Doc à HTML 5 ? Pourquoi devrions-nous spécifier le type de document que nous utilisons ? Et c'est une très bonne question, car lorsque vous regardez l'extension de fichier HTML, nous pouvons voir qu'il s'agit de HTML. Pourquoi se donner la peine de dire que ce type de document est du HTML, n'est-ce pas ? Hé, c'est assez stupide, non ? Mmm. Eh bien, ça le serait. Mais le problème est que le HTML est assez long chez nous. Cela fait environ 30 ou 40 ans avec nous. Et, vous savez, il y a longtemps, les gens ne pouvaient pas, vous savez, s'attendre à ce que même Internet se développe, comme il s'est développé, et ils ne savaient pas quel type de versions HTML seraient disponibles dans le futur. Oui, des versions de HTML. Et c'est la cause de ce problème. Nous utilisons la nouvelle version S HTML, appelée HTML five. Et pour spécifier un document comme celui-ci, nous devons taper ici uniquement quelque chose comme ça. Comme vous pouvez le constater, marquez le point d'exclamation Doc type, qui signifie type de document, et tapez simplement votre code HDML Et tout cela est plutôt drôle. Pour être honnête, tu peux terminer cette conférence. Vous devez l'ajouter ici en haut pour simplement dire aux navigateurs Web nous utilisons le nouveau SHTL Si ce sujet vous intéresse un peu plus, je vais vous parler un peu des anciennes versions. Parce que bon, lorsque vous allez ici, vous remarquerez qu'il existe de nombreux types de documents HTML. Et le plus populaire est HTML, qui est assez ancien, que vous n'avez même pas besoin de connaître. Mais ce type comme ici est encore assez souvent utilisé de nos jours. Et pour l'utiliser, il vous suffit de copier ce truc ici, et vous utilisez X X HTML en ce moment. Mais quelle est la différence ? Quand je fais référence à cette page, elle fonctionne toujours très bien, non ? Quand j'utilise la version di avant elle. Comme vous pouvez le constater, cela fonctionne toujours bien. N'y a-t-il donc aucune différence ? Eh bien, les navigateurs Web sont jolis, vous savez, bons de nos jours. Et même si vous n' utilisez pas la bonne norme, tout fonctionnera correctement. J'ai donc pris la peine de l'ajouter ici parce que bon, ils ont besoin de deviner maintenant, non ? Le navigateur sait quelle version nous utilisons lorsque nous l'indiquons ici et il n'a pas besoin de la deviner. Donc, vous savez, il faudra un peu plus de temps, par exemple, pour charger certaines choses. Quelque chose peut être mal interprété, en particulier dans les anciens navigateurs Web, d'accord ? C'est donc encore trop gros, vous savez, pour être compilé avec le standard. Nous devrions utiliser le code HTML à points et l'ajouter ici. OK ? Vous devez au moins ajouter des informations ici. Cela ne prend pas beaucoup de temps, alors ajoutez-le ici. Et pour être honnête, vous pouvez créer un modèle pour votre prochain site Web. Vous pouvez simplement le copier sur le site Web suivant, et vous n'avez pas besoin de vous en souvenir à chaque fois. Il vous suffit de le copier sur un autre site Web. Mais revenons à la version qui est X HTML. Quelle est la principale différence ? Parce que vous verrez parfois des pages comme celle-ci, et cela ne devrait pas vous surprendre, d'accord ? Lorsque vous utilisez du HTML, vous devez ajouter la barre oblique à la fin de chaque balise void, sorte que la balise n'a pas de fin, d'accord ? Il indique que cette balise se termine ici. C'est donc très populaire, et vous pourriez rencontrer quelque chose comme ça à l'avenir, d'accord ? Dans le nouveau SH TML, nous avons obtenu le support de nombreuses fonctionnalités de JavaScript dont je parle dans le cours de JavaScript Ce X HTML n'est pas pris en charge pour. Mais comme je l'ai dit plus tôt, même si vous utilisez le XHTML avec les nouveaux navigateurs Web S, il sera supporté mon heure. Alors ne t'inquiète pas. Vous devez savoir que le XHTML est encore utilisé la plupart du temps de nos jours, car HTML 5 n'est pas aussi bien supporté dans les anciens navigateurs Web, n'est-ce Les utilisateurs utilisent donc le XHTML s'ils veulent prendre en charge d' anciens navigateurs Web tels qu' Internet Explorer Six, peut-être pour vous, c'est même un nom inconnu pour le moment. Mais il fut un temps où il y avait un navigateur Web appelé Internet Explorer, et cela rendait la vie des développeurs Web vraiment horrible, car beaucoup de choses n'étaient pas interprétées de la même manière que dans les autres navigateurs Web. Et bien, si vous voulez le soutenir, vous devez utiliser X HTML, par exemple, pour vous assurer que tout est correctement affiché, d'accord ? Mais bon, est-ce vraiment important de nos jours ? Eh bien, si vous écrivez un énorme site visité par, je ne sais pas, 5 millions de personnes par jour, vous voulez peut-être soutenir ces personnes, ou vous pouvez être une personne qui dit aux autres que nous évoluons avec l'innovation et que nous ne les soutenons plus non plus. Cela dépend du client que vous avez. Donc, si vous avez un client qui dit vraiment : «   Hé, vous savez, je veux prendre en charge le navigateur Web, alors ne vous embêtez pas à utiliser HTML Five, copiez-le simplement en haut et essayez d'utiliser les taxes répertoriées ici, n'est-ce pas ? Mais n'utilisez pas les nouvelles balises répertoriées dans HTML 5. Be HTML five s affiche une nouvelle taxe, comme, par exemple, une section, qui n'est absolument pas prise en charge en HTML. HTL 5 n'est donc en fait qu'une nouvelle taxe, nouvelles façons d'utiliser le script Java avec du HTML, etc. OK ? Et c'est celui-ci que nous allons utiliser. Mais c'est bon à savoir. Il fut un temps où les gens utilisaient d'autres types de documents. Et maintenant, vous savez aussi pourquoi vous devez spécifier quelque chose comme ça en haut, n'est-ce pas ? Parce que si vous ne le faites pas, navigateur Web ou tout autre programme analysant votre code HTML devra deviner les versions HTML, ce qui n'est pas bon pour vous, d' accord, sinon l'utilisateur verra votre site. Donc, tout ce qui n'est pas bon pour l'utilisateur ne le sera probablement pas non plus pour le classement dans Google, parce que Google aime, vous savez, aimer les sites Web professionnels, n'est-ce pas ? Donc, si vous spécifiez le type de document, tout ira bien. Ce n'est qu'une leçon. Merci beaucoup. 21. Fonctions de sauvegarde en direct et de code automatiques: Pour voir le résultat de notre édition ici, disons que nous ajoutons le point d'interrogation ici. Nous devons faire quoi. Nous devons défier en toute sécurité. Nous devons donc utiliser le raccourci control plus S , puis aller ici, puis utiliser le contro plus un Chaque montre prend du temps. Ne serait-il pas préférable que ce qui se passe ici se passe déjà ici. Faisons en sorte que le changement soit visible instantanément ici. Ce serait génial. Pour cela, nous devons utiliser une extension appelée live server. Nous saisissons le serveur Search Book Life et nous appelons « cliquez sur Installer ». Comme vous pouvez le constater, il est déjà installé. Et maintenant, qu'est-ce qui a changé ? Eh bien, nous devons le gérer. Pour l'exécuter, nous devons sur le bouton « passer en ligne ici ». Ou vous devez cliquer avec le bouton droit de la souris ici et cliquer sur Open W Live Server. Avant cela, je vais entrer dans les paramètres de l'extension. Pour accéder aux paramètres d' extension spécifique telle que Live Server, comme vous pouvez le voir, vous pouvez cliquer ici sur le bouton Gérer, et nous devons l'actualiser. Retournons-y encore une fois. Maman, hum. Maintenant c'est ici. Réglages de l'extension. Nous cliquons sur les paramètres de l'extension. Et comme vous pouvez le constater, nous n' avons plus que les paramètres connectés à cette extension nouvellement installée. Et nous avons ici quelque chose comme ça. Navigateur personnalisé. Spécifiez les paramètres de navigateur personnalisés pour Life Server. Par défaut, il ouvrira votre navigateur favori par défaut. J'ai configuré par défaut le navigateur Web Chrome. Mais si vous ne voulez pas utiliser le navigateur par défaut, comme par exemple nous utilisons Firefox dans le cours, nous allons cliquer sur Firefox ici. Et maintenant, quand je vais ici et que je clique sur Go Live, comme vous pouvez le voir, c'est le démarrage, et bam Nous sommes actuellement sur ce site ici. Et bien, nous pouvons maintenant faire quelque chose comme ça. Réduisons-le, à droite. Placez cette fenêtre ici, par exemple, comme ceci. Et maintenant, lorsque nous faisons quelque chose comme ça, nous supprimons les points d' interrogation ici, et j'enregistre simplement le fichier ici. Je n'ai pas besoin de rafraîchir le fichier ici. D'accord. Donc, quoi qu' , par exemple, mettons-le il arrive ici, par exemple, mettons-le en gras. Maintenant, je sauvegarde le f, Control plus S. Comme vous pouvez le voir, le résultat est visible ici instantanément. C'est cool. Mais bon, je vous ai dit que cela pouvait être fait automatiquement, instantanément. Le code de Visual Studio est plutôt cool car nous pouvons définir la fonctionnalité de sauvegarde automatique Pour ce faire, nous allons entrer dans cinq paramètres de préférences. Comme vous pouvez le voir, le raccourci est « control plus coma ». Et ici, dans le champ de recherche, nous allons taper auto safe. Et comme vous pouvez le voir ici, nous pouvons contrôler la sécurité automatique des éditeurs sales, n'est-ce pas ? Et nous pouvons le changer de désactivé à After Delay. Cela signifie que cela va sauver votre f après un certain temps. Cela va être précisé ici dans quelques secondes. 1 000 millisecondes, c'est 1 seconde. On peut le laisser comme ça. Et maintenant, remarquez que lorsque j'ajoute le point d'interrogation, comme vous pouvez le voir, il s'actualise presque automatiquement Au bout d'une seconde, si on met ici, par exemple, 2 secondes, non ? Cela va prendre un peu plus de temps. Mais maintenant, comme vous pouvez le voir, ce truc blanc est là-haut, et il a été retiré au bout de 2 secondes. Et le changement ici est également visible au bout de 2 secondes. Nous pouvons donc également saisir le y en gras. Je peux voir qu'il est maintenant en gras au bout de 2 secondes Je pense qu'une seconde, c'est plutôt bien. Nous pouvons le laisser à la légère. Nous avons appris comment le sauvegarder après un certain temps. Et c'est plutôt cool, car vous pouvez voir instantanément tout ce que vous apprenez sur le côté droit de votre écran. Le problème est que, comme vous pouvez le constater, nous n'avons pas beaucoup d'espace, car nous utilisons le moniteur Fu HD. C'est pourquoi je recommande vivement d'acheter moniteurs offrant une vue plus grande. Vous pouvez utiliser le ratio hauteur/largeur 21 pour 9 ou 32 pour 9. En ce moment, j'en utilise 16 à 9. Il n'y a pas assez d'espace à gauche et à droite. Nous pourrions également, par exemple, créer quelque chose comme control plus minus. Nous pouvons le faire ainsi, et nous aurons alors plus d' espace pour notre site Web. problème avec la solution, c'est qu' il est difficile de voir le téléphone maintenant, non seulement sur la vidéo, mais dans la vraie vie, non ? Mais peut-être que vous avez une bonne vue, vous pouvez donc jouer comme ça sur votre propre ordinateur. Même si vous n' avez pas un grand écran, vous pouvez toujours configurer votre navigateur Web de cette manière. C'est quand même très utile parce que pour le moment, quoi que vous fassiez ici, n'est-ce pas ? Lorsque je supprime ces points d' interrogation, je n'ai pas besoin d'utiliser le raccourci plus S, et le résultat est immédiatement visible ici, lorsque je passe simplement au navigateur, n'est-ce pas ? Mm. Je vais dans le navigateur, et le résultat est là instantanément. Je ne perds donc pas mon temps. Mais je recommande vivement d'avoir un écran plus grand ou même deux moniteurs, voire trois moniteurs, n'est-ce pas ? Parce que cela accélère et eh bien, si c'est votre travail, cela accélère votre travail lorsque vous travaillez avec HTM Melfis Vous pouvez voir que faites-vous instantanément ? Non, quand il faut sauter comme ça, non ? D'accord ? C'est là toute la leçon. 22. Entities et validation HTML: Bonjour, mon ami. Aujourd'hui, vous allez apprendre ce qu'est une entité. Quand l'utiliser. Comment l'utiliser. Eh bien, l'entité n'est qu'un nom. Signes de caractères que vous pouvez saisir sur votre clavier. Donc, pour obtenir le caractère inférieur à, vous devez le taper. La première chose, vous vous demandez peut-être pourquoi se donner la peine de faire quelque chose comme ça ? Pourquoi ne pas simplement taper le plus bas qu'ici. Notez que nos rédacteurs remarquent que quelque chose ne va pas ici. Eh bien, le personnage est là. Lorsque j'utilise l'entité, donc pour utiliser l'entité, vous tapez l'esperluette en utilisant le shift plus sept, sur votre clavier, puis le nom de l'entité, puis le point-virgule puis le point-virgule Comme vous pouvez le voir, M Nous avons également le caractère inférieur à. Pourquoi même s'embêter ? Eh bien, que se passera-t-il si je veux créer un site Web, où je parlerai de HTML. Je dirais, par exemple, ce truc bloque le texte, par exemple comme ça. Comme vous pouvez le constater, tout est verrouillé par la suite, et nous pouvons voir la version bêta que nous décrivons ici Si le HTML utilise une sorte de co-acteur comme le less, alors pour des choses comme la taxe. Alors c'est une bonne idée de s'évader. C'est le processus qui consiste à transformer cela en ceci, échapper au personnage, puis pour le faire, nous allons simplement faire quelque chose comme ça, plus bas alors. Nous allons utiliser l'entité. Comme vous pouvez le voir maintenant, ce f ferme le texte. Je n'ai pas tout mis en gras par la suite. Nous pourrions simplement donner les informations à ce sujet. Pour le moment, nous pouvons mettre le texte en gras, comme ceci. Mais ce truc ne sera pas interprété par le navigateur Web comme s'il s'agissait d'un tag. Il y a un moment où vous voulez faire quelque chose comme utiliser l'entité. Y en a-t-il d'autres ? Eh bien, remarquez qu' ici j'ai fait quelque chose comme depuis le set R. Eh bien, nous sommes en train de me citer, Arcadis Et pour être honnête, nous devrions utiliser les citations ici pour les rendre correctes. Le problème est que le code HTML, lorsqu'il indique l' attribut recherche la valeur entre guillemets, la valeur se trouve actuellement ici. Le texte ici est juste quelque chose dont il ne sait pas quoi en faire. C'est peut-être l'attribut suivant, mais nous n'avons pas de nom d'attribut depuis. Maintenant, comme vous pouvez le voir, lorsque nous déplaçons la souris ici, il n'y a rien ici. Il n'y a qu'une flèche. Comment le résoudre ? Eh bien, il y a ceci ici. Nous pouvons utiliser la citation comme ceci, et comme ceci. Nous pouvons représenter la citation. Une citation. Comme vous pouvez le voir maintenant, cela fonctionne bien. Eh bien, pour être honnête, ce cas spécifique peut être résolu un peu différemment. Par exemple, vous pouvez utiliser l'apostrophe ici. Parce que lorsque vous utilisez une apostrophe ici, vous pouvez utiliser Mais lorsque vous utilisez l' épostrophe ici, vous pouvez utiliser l'épostrophe à l'intérieur, n'est-ce pas ? Donc, s'il y avait un moment où vous deviez utiliser epostrophe et guillemets en même temps, ce serait une Et aussi, je pense qu' il est préférable de commencer chaque attribut par des guillemets, en particulier pour créer votre code, surtout parce que ce genre de choses n'a pas besoin d'être tapé manuellement comme ça, non ? Ils peuvent provenir d'une base de données ou ainsi de suite. Vous devez toujours vous échapper, alors changez le guillemet en que comme ceci, si vous l'utilisez dans l'attribut, ne vous embêtez pas à l'utiliser comme ça. Ici, vous pouvez utiliser des guillemets. Dans le texte où il y a un texte, ou vous pouvez utiliser des guillemets, en cas de valeur inférieure Eh bien, si vous l'utilisez comme ça, par exemple, six est inférieur à sept. Comme vous pouvez le constater, nous avons un signe indiquant que quelque chose ne va pas, mais cela fonctionne bien. Cependant, si nous copions notre version. Son contenu entier est ce qu' on appelle un validateur HTML, et ici nous pouvons choisir la validation par saisie directe et copier notre code Vous remarquerez qu'il y a une erreur ici. Vous devez toujours éviter le caractère inférieur pour vous assurer que votre code est correctement validé, recopions-le ici. Comme vous pouvez le constater, l' erreur a disparu. Vous pouvez utiliser cet outil pour vérifier si tout a été écrit correctement. Eh bien, Visual Sudo Code, vous pouvez également remarquer que quelque chose ne va pas ici, mais il n'y a aucune information Donc, pour cette valeur inférieure, vous devez toujours utiliser cette entité. Et il y a quelque chose qui s' appelle Ampersand. Vous devez donc toujours échapper à Ampersand lorsque vous passez les liens, lorsqu'ils se trouvent à l'intérieur d'un Non, ici, le HTML et le CSS sont appropriés. Mais lorsque vous le transmettez à l'aide de liens, comme ici, par exemple, il , comme ici, par exemple, s'agit d'un sujet assez avancé, mais vous devez simplement rappeler qu'un jour, lorsque vous allez transmettre un lien, quelque chose ne fonctionnera pas, et vous avez un signe comme celui-ci à l'intérieur d'un lien Rappelez-vous à propos de cette conférence que vous devez y assister et utiliser cette personne au lieu de celle-ci. Il y a également un espace de rupture. Écoutez, normalement, lorsque nous ajoutons des espaces, ils ne sont pas interprétés. Il n'y a pas de places ici. Et c'est une bonne chose que cela se passe comme ça car nous pouvons maintenant formater notre code assez facilement, comme je le voulais peut-être ici. Et HTML, le navigateur Web n' interprétera pas les espaces HTML à l'intérieur du fichier de cette manière. Cependant, peut-être qu'un jour vous voudrez avoir quelque chose, qui ne brise pas l'espace, qui soit un espace qui sera interprété. Ensuite, vous pouvez simplement le copier et comme vous pouvez le voir, maintenant, chaque espace que j'ai ajouté à l'aide de cette entité est interprété car il s'agit simplement d'un caractère que nous mettons dans le texte, et nous savons ce que nous faisons. Nous disons : « Hé, je sais ce que je fais, je veux de la place ici. Ainsi, l' espace non cassant peut ajouter un espace que la norme ne serait pas là Comme vous pouvez le voir, c'est aligné maintenant ici, alors peut-être que je veux quelque chose comme ça. C'est tout ? Eh bien, il existe de nombreuses autres entités, par exemple, vous pouvez trouver une entité qui va créer une intégrale, le symbole issu du calcul, comme ceci. Cependant, nous utilisons l'UTF huit et vous pouvez le trouver sur ce site Web Vous pouvez vraiment copier des choses, par exemple, je veux ce signe, donc je vais simplement le copier ici. Et ça va bien fonctionner. Notez que ce panneau est là. Lorsque vous utilisez le TFA, vous n'avez pas à vous en soucier Je pense qu'il vaut mieux simplement copier le signe dans votre code HTML. Ce qui est bien, c'est que vous pouvez accéder, par exemple, au MOG Smiles, et vous pouvez obtenir toutes ces informations en utilisant, par exemple, le numéro attribué à ce MOG, mais ce qui est amusant, c'est que vous pouvez, par exemple, copier même le mod dans l'éditeur, comme celui-ci, et vous remarquerez que cela se trouve sur votre C'est plutôt cool. Vous pouvez trouver beaucoup de choses amusantes ici, par exemple ROs, comme par exemple des formes géométriques. Cela peut être très utile, je pense. Donc, des symboles monétaires , que vous pouvez simplement copier sur votre site Web si vous en avez besoin. Tout est dans cette leçon. Merci. 23. Comment nommer correctement vos fichiers ? Pourquoi la page principale est appelée index.html ?: Bonjour, mon ami. Aujourd'hui, nous allons parler de la façon nommer correctement le Pis, comment nommer votre Pis HTML, d'accord ? Et pourquoi ? La page principale est toujours appelée index HTML. Commençons donc par comment devons-nous appeler nos noms ? Il ne faut pas l'appeler comme nous le faisions avant. Donc, échantillon 2, allez. Personne ne sait de quoi parle cette dispute, quoi parle cette page quand il regarde le nom comme ça. Le nom doit toujours décrire le sujet de votre page Web. Dans notre cas, c'est Kitty Sacks. La question est : devrions-nous utiliser des espaces comme ici ? Non, chaque mot doit être séparé par un jour. Vous n'utilisez pas d'espaces, vous utilisez des pour séparer les mots. Eh bien, vous ne devriez pas utiliser ici les lettres qui ne sont pas basiques dans l'alphabet. Comme celui-ci, ne les utilisez pas. Utilisez uniquement AB CDF G. L'alphabet de base. Eh bien, vous pouvez utiliser des chiffres, mais uniquement lorsqu' ils parlent vraiment votre description concernant votre site Web, par exemple, le numéro du produit ou quelque chose comme ça, qui pourrait vous aider à le trouver, mais sinon, essayez de l'éviter. C'est ainsi que vous appelez votre site Web. OK ? Comme Kitty Snacks. Et maintenant, lors de la mise en ligne, vous remarquerez que ce nom est là, et il est utile pour les utilisateurs qui visitent votre site Web. Parce que lorsqu'ils le copient et le transmettent à quelqu'un, ils peuvent le voir à partir de ce nom d'URL, donc à partir de ce nom de lien. De quoi parle ce lien, non ? C'est donc utile pour les autres utilisateurs, et cela permet également aux internautes de naviguer sur votre site Web. Donc, tout ce qui est utile sera également bonne chose considérée comme une bonne chose pour Google, pour Google à la fois. C'est donc quelque chose qui sera pris en compte par Google Ranking. C'est donc une bonne idée d'utiliser ici les mots qui représentent votre point de vue, mais souvenez-vous, ne mettez pas votre description, n'est-ce pas ? Ce serait vraiment stupide de faire quelque chose comme des kits, d'autres compétences, d'aimer manger, etc. Ce n'est pas un endroit pour spammer les mots clés. Vous venez de mettre ici principalement le titre, ou quelque chose lié au titre. C'est quelque chose qui devrait être bref. C'est ainsi que vous créez les noms. Mais un côté, un côté, doit toujours être appelé Index point HTML, et il doit s'agir de la page principale de votre site Web. Pourquoi est-ce ainsi ? Notez que lorsque nous viendrons ici et que nous supprimerons cette partie, nous obtiendrons la structure, l'index de nos dossiers de notre serveur Web. Lorsque nous allons ici, nous pouvons trouver les images, les articles et nous pouvons trouver un autre site Web ici. Le serveur cherche donc un index, mais il ne l'a pas trouvé. Il met donc ce qui se trouve dans le dossier principal. Le dossier est donc coupé dans notre cas. Mais si nous fournissons l'index qu'il recherche, donc lorsque nous changeons le nom en Index that HTML, vous remarquerez que lorsque je rafraîchis ici, il trouve Index at HTML. Nous pouvons également taper ici Index at HTML, et il trouvera Mais vous n'en avez pas besoin car c'est ainsi chaque serveur Web est programmé. Il recherche le point d'index HTML. Peut-être Index point PHP, si vous écrivez dans une autre langue, mais qu'il cherche l'index. C'est pourquoi la page principale ne devrait pas être un nom autodescriptif comme Kitten Snacks, par exemple Il devrait s'appeler Index at HTML. Cependant, les pages qui se trouvent sous le dossier, par exemple les articles, disons que nous voulons créer un autre site Web, alors copions cela ici. Et par exemple, il ne s'agira pas de snacks pour chats, mais d' images amusantes de chats, n'est-ce pas ? Donc ici, vous devez créer une description, essayer de la créer. Bien sûr, créez-le et nommez-vous ici en tant qu'auteur. Et renommons-le en quoi ? Des images de chats, par exemple, non ? Ou des images amusantes. Des chats, quelque chose comme ça. Parce que cela décrit le sujet de cette page Web. Mais cette page, la principale, devrait contenir ce qu'on appelle un menu, que nous verrons comment créer à l'avenir. Et c'est comme un index. C'est comme une ouverture vers tous les autres sous-sites, la page est connectée à votre page Web, à l'ensemble de votre site Tout est dans cette leçon. Merci. 24. EXTENSION : Icônes suples dans votre VSC: Bonjour, mon ami. Je pense que les icônes par défaut situées à côté du nom de votre page ou à côté du nom du JPE Five, etc., ne sont pas très bonnes Heureusement, vous pouvez les modifier. Comment le faire ? Eh bien, vous pouvez utiliser le raccourci plus trois plus B ou le raccourci unique et taper l'équipe à cinq icônes. Lorsque vous le choisissez, comme vous pouvez le constater, vous pouvez le remplacer par rien. Si vous ne voulez pas les avoir du tout, ou si vous pouvez les réduire au minimum. C'est plutôt cool. Ou vous pouvez les remplacer par ce qui se trouvait ici. Mais heureusement, il existe également une option comme celle personnalisée où vous pouvez installer des équipes d'icônes supplémentaires. Lorsque vous cliquez dessus, vous trouverez toutes les équipes d'icônes que vous pouvez installer à partir des extensions. Et celui que je préfère, c'est celui-ci. Lorsque vous l'installerez, vous aurez ici la possibilité de le choisir. N'oubliez pas de le choisir car c'est actuellement le paramètre, alors changez-le en icônes Viacde Maintenant, regardez comme ils sont cool. Ils sont tellement colorés et même s' ils sont colorés, ils ne prennent pas trop de place. Ils sont vraiment très bons. Je recommande vivement celui-ci. Toutefois, si vous le souhaitez, vous pouvez installer, par exemple, l'icône du matériau , l' installer, puis vous devez passer au matériau. Y a-t-il une grande différence ? Il y a une certaine différence. Faisons-le un peu plus vite. Counterplat déplace P, et passons du code Material au code Vos Comme vous pouvez le constater, la différence réside principalement dans les dossiers. Je préfère celui-ci, mais peut-être que tu préfèreras celui-ci. Pour être honnête, il y en a beaucoup parmi lesquels choisir. Alors joue avec eux, non ? Et choisissez celui que vous aimez, parce que, eh bien, l'éditeur est principalement pour vous, pas pour moi, n'est-ce pas ? Vous avez vos propres préférences, et c'est cool avec Visual Studio Code, vous pouvez presque tout faire avec cet éditeur pour lui donner l'apparence que vous vouliez Je recommande vivement celui-ci, et nous allons l'utiliser depuis maintenant. Ce n'est qu' une leçon. 25. LIST : ol vs li: Bonjour. Aujourd'hui, je vais vous montrer comment créer une liste d' éléments, de positions que vous souhaitez présenter à l'utilisateur. Quand utilisons-nous une liste ? Eh bien, par exemple, pour montrer aux étudiants ce dont nous parlerons dans le cours spécifique. C'est le moment où vous utilisez la liste. Vous pouvez également répertorier, par exemple, les étudiants de la classe. Quand quelqu'un appelle le numéro 14, il sait qu'il va être interrogé, et il va s'agiter un peu Ce ne sera pas une chose agréable. Vous utilisez donc une liste pour répertorier des éléments afin de montrer aux gens ce qu'ils vont voir sur votre site Web, par exemple, n'est-ce pas ? Ce qu'il doit faire demain matin. Par exemple, il doit se réveiller, puis il doit se brosser les dents et ainsi de suite. Vous savez donc maintenant quand utiliser la liste. Et comment les utilisons-nous ? Eh bien, nous les utilisons pour présenter les choses manière ordonnée, par exemple. Quand on regarde des choses ordonnées, c'est plus facile à lire, n'est-ce pas ? Donc, pour être honnête, vous utilisez des listes pour faciliter la lecture. C'est la principale raison pour laquelle vous les utilisez. Sinon, vous pouvez tout mettre en paragraphe. Mais comme vous l'avez vu ici, ce n'est pas professionnel en HTML, vous devez lister une balise spécifique, appelée UL ou OL Donc, la première chose représente une liste non ordonnée, et la seconde, une liste ordonnée. Et quelle est la différence ? Eh bien, lorsque nous créons une liste ordonnée, nous créons simplement une étiquette comme celle-ci, et nous y mettons des éléments de liste. Donc, comme vous pouvez le voir, nous avons le numéro ici, ce qui signifie que nous pouvons mettre quelque chose ici, et lorsque nous le copions, comme vous pouvez le constater, nous pouvons en mettre beaucoup plus, et ils sont numérotés automatiquement, et c'est plutôt cool parce que remarquez qu'avant, lorsque nous l'utilisons ici, disons que ces deux points ne proviennent pas de cette conférence, nous devrions donc les supprimer Supprimons-les. Mais maintenant je fais quoi. Changez les numéros manuellement, ce qui n'est pas cool. L'avantage de la solution que nous venons apprendre, c'est que lorsque nous copions le texte ici, comme ça, vous remarquerez que quoi ? Il s'agit d'un numéro automatique. Si je change, disons que je veux d' abord en parler. Je le copie donc ici. Comme vous pouvez le constater, les chiffres sont modifiés automatiquement, ce qui est essentiel. C'est donc la première chose qui est cool ou publiée. La deuxième chose est de noter que nous n'avons pas de conduite de frein car chaque article est un frein automatique. OK ? Donc c'est cool aussi, non ? Vous n'avez donc pas besoin d' utiliser la conduite de frein ici. Et regardez, vous pouvez utiliser le raccourci cool, qui est une flèche plus sur le clavier pour déplacer les choses vers le haut comme ça. Disons que je le veux d'abord, comme vous pouvez le voir, c'est le premier maintenant ici. Mais si je le fais ici, accord, comme ça, je dois encore changer de numéro. C'est donc une fonctionnalité assez intéressante du code de Visual Studio. Vous pouvez déplacer les choses vers le haut ou vers le bas après avoir décidé quel ordre vous voulez les placer ici. Si l'ordre des choses n'a pas d'importance, vous pouvez utiliser underly. Il vous suffit donc de changer l'OL en UL. Ensuite, vous modifiez simplement ce qui est présenté avant chaque article de location. Donc, vous changez le nombre en un cercle comme ceci. Vous pouvez modifier ce qui est visible ici. Vous n'avez pas besoin de montrer le cercle, vous pouvez montrer d'autres choses, mais des choses comme ça, le formatage, coloration et d'autres choses du genre devraient être tracées par le biais de ce que l'on appelle le CSS, et nous en reparlerons à l'avenir. Donc ne vous inquiétez pas si vous regardez, par exemple, les cercles ici, et que vous vous dites « j'aimerais avoir autre chose ici parce que je n'aime pas ça ». Tu peux le faire, mais pas maintenant. Les balises sont simplement utilisées pour le formatage balises afin de donner une signification supplémentaire au texte. Et ce sens n'est pas seulement pour nous. Pour les personnes qui consultent notre site, mais c'est aussi pour Google Robots, pour Google Robots, parce qu'elles consultent votre page, et lorsqu'elles voient une liste ordonnée, elles peuvent voir que vous publiez quelque chose. Quelques éléments cruciaux à propos de votre site, eh bien, à propos des éléments contenus dans l'article. Donc, si vous utilisez un paragraphe, ils peuvent voir que vous créez une sorte de texte. Ce n'est donc pas une bonne idée d' utiliser un paragraphe pour ajouter une liste. Eh bien, il y a d'autres textes que vous apprendrez à l'avenir, comme par exemple l'adresse. Et si vous mettez une adresse ici, Google sait qu'il y a une adresse. s'agit donc que d'informations supplémentaires concernant le type de texte que nous mettons en forme. Quel type de texte nous montrons à l'utilisateur. Cependant, si vous souhaitez changer son apparence, la plupart du temps, vous allez le faire via CSS. Pourquoi ? Parce que c'est mieux. Pourquoi c'est mieux, tu l' apprendras à l'avenir. Comme vous pouvez le voir dans notre liste d'éléments, nous devrions également nous renseigner sur le raccourci utile , appelé Shift plus tab dans cette conférence. Et à quoi ça sert ? Lorsque je sélectionne tout et que j'utilise l'onglet Shift plus, comme vous pouvez le voir, tout se déplaçait d'un niveau vers la gauche. Disons donc ici, comme vous pouvez le voir, un niveau vers la gauche. Échange d'indentations. Lorsque j'utilise l'onglet, je peux revenir à ce qui se trouvait ici. Je pense qu'il vaut mieux avoir la tête au même niveau que la tête et le corps, car nous allons avoir plus d'espace ici, juste pour le texte. Cela n'a pas vraiment d'importance pour nous de l'avoir à ce niveau , n'est-ce pas ? Nous pouvons y retourner comme ça. En utilisant l'onglet, vous pouvez y aller à droite une fois, car bon, le tag est toujours là. On ne regarde même pas ça. C'est juste là. Cela augmente donc la clarté de notre code, je pense. La leçon. Merci beaucoup. 26. Astuces rapides avec Emmet à utiliser avec des listes: Bonjour. Aujourd'hui, vous allez apprendre quelques raccourcis qui amélioreront votre vie en tant que futur développeur web. Commençons donc par ce raccourci ici. Notez que nous pouvons créer le moins d'éléments dans UL en faisant quelque chose comme ça. UL, puis LI, puis nous devons formater le débat parce que cela ne sert à rien. Ensuite, si vous voulez un autre LI, nous ferons ce que nous ferons avec Contro plus, Control plus V. Control plus V, nous en voulons trois, par exemple C'est bon, c'est bien de le faire de cette façon. Mais si vous savez que vous allez avoir deux I gratuits, alors pourquoi ne pas utiliser ce que l'on appelle ce signe ? Eh bien, ce panneau, lorsque nous allons sur ce site Web, s'appelle le signe de l'enfant. Pourquoi l'appelle-t-on ainsi ? Eh bien, cela vous permet de créer un enfant à l'intérieur du parent. Le parent est un tag situé juste au-dessus d'un autre tag. L'enfant est juste à l'intérieur d' un autre parent. Eh bien, les parents donnent naissance à des enfants, à des enfants. Eh bien, lorsque vous tapez quelque chose comme ça, NAF , une balise que vous découvrirez plus tard, elle est utilisée pour créer la navigation, et vous tapez quoi ? Avec ce signe, vous allez créer un enfant dans NAV qui s'appelle UL. Vous pouvez ensuite créer le hit suivant, appelé A. Comme vous pouvez le voir, il s'agit d'un aide-mémoire qui est ajouté dans l' onglet ressources de ce cours Vous pouvez aller sur ce site ici, l' ouvrir et vous pouvez même le télécharger et l'imprimer. Il y a encore quelques points ici. Vous n'avez pas besoin de tous les connaître, ne vous inquiétez pas. Mais il y a des choses qui sont utilisées ici que vous ne connaissez pas pour le moment. Par exemple, le D et ainsi de suite, ne vous inquiétez pas. Je vais vous montrer des exemples comme celui-ci lorsqu'ils seront nécessaires. Alors, qu'est-ce qu'on peut faire ? UL et à l'intérieur d'UL, on peut mentir. Comme vous pouvez le voir, nous avons ici le raccourci de l'abréviation MA. Pour l'afficher, car vous pourriez l'avoir comme ça, vous devez utiliser le raccourci clavier plus l'espace. Comme vous pouvez le voir, j'appuie sur Ctrl plus espace, puis vous pouvez voir à quoi ressemblera cette abréviation après l'avoir étendue après avoir appuyé sur Entrée. Vous n'avez donc pas besoin d'appuyer sur Entrée pour simplement voir à quoi cela ressemble. Alors maintenant, lorsque vous appuyez sur Entrée, comme vous pouvez le voir, nous avons un Ai, il nous reste donc à le copier. Mais je parlais de quelque chose comme ça dans l'une des conférences précédentes, selon lequel on peut multiplier un tag, n'est-ce pas ? Nous pouvons donc multiplier les paragraphes. Et là aussi, on peut multiplier ce qu'est l'allié. Comme vous pouvez le voir, maintenant, lorsque nous tapons le numéro ici, nous avons de plus en plus d'alliés, n'est-ce pas ? Il nous en fallait donc trois. Donc, tapons simplement comme ça. Et qui plus est, maintenant, c'est cette remarque que nous pouvons appuyer sur la touche Tabulation du clavier et passer au suivant, n'est-ce pas ? C'est donc plutôt cool car bon, nous n'avons pas besoin d'utiliser notre clavier et notre souris pour passer d' un allié à l'autre. Donc ça accélère encore plus les choses, non ? Nous pouvons mettre le contenu de chaque allié instantanément, non ? C'est plutôt cool. D'accord, mais disons que nous avons fait une erreur. Imaginons, par exemple, que nous ayons fait quelque chose comme ça, puis je passe ici. Que devons-nous faire si nous voulons revenir à ce raccourci et le faire fonctionner Comme vous pouvez le constater, je n' ai aucune idée pour le moment. Pour y accéder, nous devons également utiliser le raccourci clavier et l'espace. Comme vous pouvez le voir maintenant, nous pouvons maintenant appuyer sur Entrée et tout fonctionnera correctement. OK. Maintenant, voyons voir et si je voulais, par exemple, en avoir un de plus ici, n'est-ce pas ? Normalement, tu feras quoi. Vous pouvez le copier, comme par exemple, ce select et contra plus C contro plus V. Mais bon, cela prend Nous pouvons utiliser le raccourci qui s'appelle Shift plus l plus flèche. Il copie une ligne donnée vers le haut ou vers le bas. Lorsque j'ai touché ici et que j'utilise les touches Shift plus l. Flèche, comme vous pouvez le voir, je l'ai copié. Si j'utilise la flèche Shift Alp vers le bas, je la copie vers le bas. Plutôt cool, n'est-ce pas ? OK. Supposons que nous ayons des LI vides et que je ne veux pas revenir à l' abréviation. Puis-je modifier en même temps chaque valeur contenue, puis-je ajouter le contenu de chaque élément LI. En même temps ? Oui, tu peux. Vous pouvez utiliser le raccourci plus souris, un clic gauche de la souris Quand je maintiens un bouton enfoncé et que je clique, nous avons plus de curseurs, n'est-ce pas ? Nous pouvons maintenant taper un échantillon, et je le tape partout. Notez que vous pouvez placer le curseur où vous le souhaitez, et vous allez taper à chaque endroit comme ceci. Contrôlez Z pour revenir. Encore une fois, Control Z est un raccourci très important. Si vous faites une erreur, utilisez simplement le Control plus z. Vous savez donc maintenant, ceci, vous savez, maintenant, ceci, ceci, ceci, et voici aussi quelque chose comme ça. Control plus k plus S. Comme vous pouvez le voir, il existe des raccourcis que vous pouvez consulter ici, et vous pouvez également les modifier. Lorsque vous pouvez cliquer avec le bouton droit de la souris ici, vous pouvez les supprimer ou les modifier. Mais il existe également un site Web comme celui-ci. nous sommes ajoutés aux ressources, là où vous les avez un peu groupées, il est plus facile de trouver des informations ici. Notez que vous avez ici, par exemple, une ligne de suppression. Et quand je vais ici , je tape Supprimer. Je peux voir que nous pouvons le trouver et que vous pouvez le modifier, n' est-ce pas ? Ou on peut l'utiliser. Imaginons, par exemple, que nous ne voulons pas cette chose ici. Normalement, vous devez sélectionner et cliquer sur l'espace ou utiliser Shift plus l'espace d' accueil et d'emballage. Mais vous pouvez utiliser exactement la touche Control Plus Sheaf Plus Contrôle plus gerbe plus touche, et vous supprimez simplement la ligne sur laquelle se trouve le curseur Plutôt cool, non ? OK, il y a deux autres raccourcis qui vont améliorer votre vie, les crochets et les crochets Eh bien, remarquez que lorsque nous créons un mensonge, il n'y a aucun contenu à l'intérieur de la ligne, n'est-ce pas ? Disons que je veux avoir du contenu à l'intérieur. Comment fournir du contenu. Le contenu est le texte à l'intérieur, n'est-ce pas ? Vous devez utiliser les crochets. Le contenu se trouve ici, non ? Comme vous pouvez le voir, nous avons mis le contenu dans LI. C' est plutôt cool, non ? Le contenu et l'espace entrent, et nous avons un bon contenu à l'intérieur. Vous pouvez mettre du contenu dans n'importe quel tag, n'est-ce pas ? Donc, le contenu P de P. Comme vous pouvez le voir, c'est le contenu de P. C'est plutôt cool. C'est utile lorsque vous souhaitez le multiplier, car vous pouvez désormais le multiplier par quatre, exemple, et vous avez un échantillon de contenu pour chaque LI. Très utile. Cro plus pase, entrez et nous en avons d'autres. Les crochets sont donc utilisés pour le contenu, mais celui-ci est utilisé pour ajouter l'attribut Ainsi, lorsque je fais quelque chose comme ça, je peux, par exemple, créer un titre de code d'attribut, et je peux dire que voici le titre. Comme vous pouvez le voir, nous avons l'impression que l' attribut va être ajouté à l'élément LI parce que je tiens le curseur ici. Mais quand je saute ici et que j' utilise le contrôle et le rythme, nous avons ajouté le titre à chaque Li plutôt génial, non ? Je peux cliquer sur Enter Counterplus Space Enter et c'est ici. Notez que vous pouvez ajouter l'attribut à n'importe quelle touche de votre choix Si vous souhaitez ajouter le titre à l'UL, vous suffit de mettre les crochets à côté de U. Si vous le faites ainsi, nous aurons un titre à côté de UL La case qui permet d'obtenir le titre de l'attribut entre crochets est celle qui se trouve à côté C'est donc à côté de celui-ci, et bien sûr, c'est à gauche de celui-ci. C'est ça. Il existe également une fonctionnalité très intéressante , la fonctionnalité dollar, et à quoi sert-elle ? Passons à l'IA et disons que nous voulons mettre un échantillon de contenu, par exemple un, et que je veuille le multiplier par quatre. Notez que nous avons ici les numéros un, un, 11, et maintenant nous devrons le faire manuellement comme ceci si nous voulons le numéroter. Mais le truc, c'est que nous pourrions utiliser au lieu d' un, le signe du dollar, et il sera simplement, comme vous pouvez le voir, remplacé par des chiffres, quelque chose d'un, plutôt cool. Exemple de contenu, un, deux, trois, quatre, excellent. Nous avons découvert quelques raccourcis au cours de cette conférence. Comme vous pouvez le constater, il y en a beaucoup d'autres. Je ne les montrerai qu'en cas de besoin. Comme vous pouvez le constater, après la conférence de LI. Ce sont des choses intéressantes qu'il est cool de savoir. Cela va accélérer le processus de création de contenu. Mais apprendre de nouveaux raccourcis prend du temps. Ne vous inquiétez donc pas si vous ne les connaissez pas instantanément. Et pour apprendre les raccourcis, vous devez également sortir de votre zone de confort. Oui, vous êtes dans votre zone de confort lorsque vous utilisez les choses que vous avez apprises il y a longtemps. Vous voudrez peut-être même copier des choses comme ça , copier-coller. C'est bien, mais en fait, il est bon de prêter des raccourcis, car vous allez passer beaucoup de temps à créer des sites Web à l'avenir. Ces choses vont vous faire gagner et le temps c'est de l'argent. Ce n'est pas seulement de l'argent, le temps c'est du bonheur. Si vous avez le temps, vous pouvez jouer à des jeux informatiques, rencontrer des amis, etc. Mais pour gagner du temps, vous devez apprendre les raccourcis. Vous n'avez pas besoin de tous les apprendre, n'est-ce pas ? Parce que, par exemple, dans des situations où vous devez, je ne sais pas, numéroter des choses comme ici. Ils sont assez rares, mais renseignez-vous au moins sur celui-ci, celui-ci et celui-ci, car ils sont assez souvent utilisés. Vous pouvez également essayer de trouver des choses qui vous sont utiles dans la feuille de triche comme celle-ci, n'est-ce pas ? OK. Ce n'est qu' une leçon. Merci beaucoup. 27. dl, dt, dd - Liste de définition: Bonjour, mon ami. Aujourd'hui, nous allons parler de ce qu'est le tag DL et quand devons-nous l'utiliser ? Tag DL signifie liste de définitions. Cette balise décrit donc une liste de définitions. OK ? Voici donc le premier terme appelé terme de définition, qui sera décrit dans une description de définition. Nous avons donc mis en DD ce que vous voulez décrire, puis nous avons ajouté la description, n'est-ce pas ? Et tout ce qui suit est placé dans la liste des définitions. Donc, la différence entre ceci et cela est que nous pouvons relier les termes à la description. Ici, nous n'avons qu'une liste d'articles individuels. Mais ici, nous avons une liste de définitions, non ? Ce terme est donc lié à cela. Ce terme est lié à cela. Mais vous vous demandez peut-être, allez. Pourquoi s'embêter à faire quelque chose comme ça alors que nous le pouvons, écrire comme ceci, par exemple, dessous de P, puis en mettre ici la définition. Ensuite, nous pouvons le mettre dans le paragraphe. Et comme vous pouvez le voir, M Nous l' avons comme ça. Comme vous pouvez le constater, la première différence est que la liste de définitions crée une sorte de formatage. Ici, nous avons une sorte d'indentation pour chaque description, chaque balise DD possède une indentation et le terme de définition se trouve à gauche de la S'agit-il simplement d'un formatage ? Est-ce juste cela qui serait un avantage pour vous ? L'avantage d'utiliser quelque chose comme ça. Tu ne te donnerais pas la peine de l'utiliser si c'était juste ça. Eh bien, la première chose est que Google peut relier cela, la première chose que vous définissez, donc vous décrivez quelque chose, et il sait que cela est décrit ici. Il connaît le terme et la description. Exactement, il le sait. C'est donc la première chose à faire. Mais la deuxième chose, je vais le montrer sur l'exemple présenté sur le site web du développeur mozilla.org C'est un site Web plutôt cool car, eh bien, vous pouvez apprendre ici en HTML si vous le souhaitez. Mais je l'utiliserais principalement pour examiner les exemples qui se trouvent ici, qui sont plutôt bons. Notez qu'ils ont ici un exemple de liste de définitions comme celle-ci où il s'agit d'un script de Cornwall, puis de définitions de chaque élément de ce type Mais voici un résultat, donc à quoi il ressemble lorsqu'il est sur le site Web. Vous pouvez remarquer que chacun de ces termes est en gras. C'est cool. Mais bon, il n'y a pas de tag B ici. Nous devrons faire quoi. Nous devrons faire quelque chose comme ça chacun d'eux afin d' obtenir le terme en gras Mais cela prend du temps, et ils utilisent ce que l'on appelle le CSS, que nous apprendrons plus tard. Le CSS vous permet de choisir, par exemple, dt et de mettre l'épaisseur de police en gras, modifier la police pour la mettre en gras, mais pour chaque élément dT. C'est plutôt cool car ici, si nous avons aimé quelque chose comme ça et que nous allons décrire le tag BR, puis le b Dag et ainsi de suite. Si vous vouliez choisir uniquement cette partie, nous ne serions pas en mesure de le faire, et nous devrions de toute façon procéder manuellement à la mise en gras. Donc, l'avantage du CSS est qu'il peut choisir toutes les balises qui sont, par exemple, DT et les modifier pour les mettre en gras. Nous avons deux avantages. La première est que Google saura ce qui se passe. La seconde est qu'à l'avenir, lorsque vous apprendrez le CSS, vous pourrez choisir cette chose spécifique et lui donner une meilleure apparence, n'est-ce pas ? De plus, lorsque vous utilisez quelque chose comme ça, vous montrez à vous-même et aux autres personnes qui vont lire votre code HTML que vous savez ce que vous faites et qu'ils le sauront. Voici donc quelques définitions. Voici une liste de définitions. Quand ils regardent quelque chose comme ça, ils savent simplement qu' il s'agit d'un paragraphe, et le paragraphe doit être utilisé pour mettre du texte qui parle de. Eh bien, vous pourriez dire que la définition est aussi une sorte de texte, et c'est vrai, mais nous avons une balise spécifique pour ce cas précis qui rend votre code plus propre, n'est-ce pas ? Il est donc préférable de l'utiliser plutôt que cela au cas où vous définiriez certaines choses sur votre site Web. À titre d'exercice, créez trois autres termes de définition, concernant, par exemple, la balise title, la balise head et le type de document HTML. Mettez-les simplement dans le terme de définition et tapez une description de la définition. C'est un bon exercice pour apprendre à créer ce type de taxe, mais vous essaierez également de vous rappeler comment fonctionnent ces taxes. Ça fait partie de la leçon. 28. EMMET : Créer des frères et traiter deux éléments en un seul: Bonjour, mon ami. Lors de la dernière conférence, nous avons appris à créer une liste de définitions. La question est de savoir comment créer une liste de définitions en utilisant Et. Comment utiliser le MET pour le créer. Il y a un petit problème, car remarquez que lorsque nous faisons quelque chose comme ça, DL et que nous voulons insérer, par exemple , DT, nous avons une solution comme celle-ci. Mais comment ajouter maintenant le DD, comment ajouter le DD ici. Comment ajouter quelque chose au même niveau, non dans une autre approche Pour ajouter une étiquette à côté d'une autre, nous devons utiliser le signe plus, qui est utilisé pour les frères et sœurs. Le tag qui est au même niveau que celui-ci, DT est au même niveau que DD, est appelé frère ou sœur Ainsi, lorsque nous faisons quelque chose comme dT plus DD, comme vous pouvez le voir, la solution est DT next two dD. Lorsque nous tapons P plus B, nous avons P à côté de B. Et par exemple, ensuite P, nous avons le suivant P. D'accord, utilisons ce que nous avons appris pour créer ce que nous avons fait ici. Nous avons donc DL à l'intérieur, nous allons donc utiliser ce signe ici. Quel DT, et à côté, DD. OK, c'est ce que nous voudrions, non ? OK. Mais si nous en voulions plus, il faudrait les copier comme ça. Et pour être honnête, cela prend également du temps. Mais nous avons appris que nous pouvons multiplier les choses comme ça, non ? Revenons-y donc et multiplions le résultat par trois. Il y a toujours un problème parce que nous n'avons multiplié qu'un d d. Donc, la multiplication n' affecte qu'une chose à gauche. Si vous souhaitez regrouper dt et DD. Si vous voulez en faire une expression unique, une seule chose. Vous devez utiliser la même chose qu'en mathématiques, les parenthèses Quand vous le faites comme ça, puis quand j'appuie sur Ctrl plus espace, comme vous pouvez le voir, nous avons maintenant multiplié ce chiffre par trois. Une expression entière comme celle-ci est multipliée par trois. Maintenant, nous pouvons même le choisir cinq fois dix fois ce que vous voulez, et c'est cool. Le protéger. Donc, pour résumer. Pour ajouter plusieurs balises au même niveau, appelées « frères et sœurs », nous devons utiliser le signe plus. Il vous suffit donc d'ajouter. C'est pourquoi c'est un signe plus, l'un à côté de l'autre. Pour regrouper quelques citrons et les faire fonctionner comme un citron, vous devez utiliser des parenthèses, comme en mathématiques, Pour créer une punaise dans une autre, vous devez utiliser le signe de la plus grande tanière titre d'exercice, essayez faire la même chose que lors de cette conférence, mais essayez également de mettre à l'intérieur des DT et DD créés, un exemple de texte, mais en utilisant m. La solution devrait ressembler à ceci. Essayez de le faire sous forme d'exercice. Si vous avez des questions, comme toujours, n'hésitez pas à les poser. 29. Créer des liens internes: Bonjour, mon ami. Aujourd'hui, je vais vous expliquer ce que sont les liens, comment les créer et comment créer un lien retour. Donc, lorsque vous avez de nombreux sites Web, ce serait formidable de pouvoir revenir au premier site Web en indexant le code HTML pour permettre à l' utilisateur de le faire, n'est-ce pas ? OK, alors que sont les liens ? Comme son nom l'indique, un lien est simplement quelque chose qui connecte. Deux choses, un lien, des liens, relient deux choses. Par exemple, site Web. Eh bien, on ne peut pas tout avoir d'un côté. Eh bien, nous le pouvons si le site Web est petit, mais si nous avons un grand site ou même lorsque vous avez un forum, forum regorge de subventions. Lorsque vous avez un site, un grand site, nous devons créer des liens. Eh bien, nous avons également besoin de liens pour, par exemple, connecter un autre site créé par une autre personne, nous avons donc besoin de liens pour cela. Comment créer une bague ? Eh bien, nous devons utiliser cette ancre. Quelque chose qu'on appelle une ancre. Le tag A représente l'ancre. Alors, disons que nous voulons créer un lien vers les images amusantes de chats. Images drôles de chats. Supposons que nous voulions créer un lien vers ce côté. Ensuite, je vais taper un nom comme celui-ci. Donc, si nous voulons voir des images plus amusantes de chats, suivez-moi. Quelque chose comme ça. Quand quelqu'un clique dessus, j'aimerais qu'il saute à cet endroit. Nous devons lier cela. Nous devons faire quelque chose comme ça. Nous devons lancer et ancrer en utilisant le point A comme celui-ci. Ou nous pouvons utiliser le raccourci clavier plus **** plus P et l' enrouler avec une abréviation, et simplement mettre A ici. Comme vous pouvez le voir, l'abréviation a ajouté quelque chose comme ceci, la référence d'âge. Retirons-le pendant une seconde. Voyons ce qui se passera lorsque nous mettrons simplement une ancre sur les images des fans, eh bien, je voulais l' avoir sur le texte entier. Comme vous pouvez le constater, rien ne se passe. Ce texte reste un texte simple car nous devons indiquer où nous voulons le lier et c'est ce que nous fournissons en utilisant l'attribut re. Il ref est l'abréviation d' hyper reference. Nous devons donc fournir l'hypertexte. Ce truc rend votre texte hyper, est-à-dire ce super texte qui vous permet de passer à un autre endroit Comme vous pouvez le constater, le style de ce lien est désormais le suivant. Vous pouvez modifier son style à l'avenir, en utilisant, par exemple, le CSS dont nous parlerons dans le futur. Mais pour l'instant, vous pouvez voir, nous l'avons rendu cliquable, non ? Nous sommes maintenant arrivés à ce que la souris soit changée lorsque nous la déplaçons dessus. Ce texte est donc désormais hyper. C'est pourquoi nous disons que c'est une hyperréférence. C'est quelque chose qui vous permet de sauter d'un côté à l'autre. Et c'est hyper parce que normalement, ce n'est pas possible de faire des choses comme ça, non Lorsque vous avez un livre, vous pouvez simplement passer un endroit à un autre dans le livre en appuyant simplement sur le texte qu'il contient. Ce texte est vraiment hyper. Et c'est pourquoi même le HTML est appelé HTML, langage de balisage hypertexte C'est hyperactif parce que cela vous permet de sauter, et ce truc s'appelle hyperréférence, parce qu'il vous permet de passer à des liens, et maintenant vous devez indiquer ici dans ces citations où nous voulons qu'il renvoie, n'est-ce Parce que rien ne se passe ici pour le moment. Nous devons donc utiliser le raccourci contra plus space, comme vous pouvez le voir, maintenant nous pouvons choisir d'accéder aux articles et maintenant à des images amusantes de CAT, par exemple Et maintenant, quand on nous touche et que je clique dessus, comme vous pouvez le voir, nous sautons d'un autre côté, et nous pouvons revenir en arrière en utilisant le bouton de retour en haut. Cela vous permet donc de passer à l'endroit que nous vous proposons ici, n'est-ce pas ? Nous devons fournir le nom du dossier dans lequel vous souhaitez vous rendre et le nom de fd que vous souhaitez sauter. C'est assez simple. Mais ce qui est bien, c'est que vous pouvez le mettre sur n'importe quoi. Supposons donc que nous ayons une image, comme, par exemple, celle que nous avons maintenant en images, comme la guitare basse. Disons que c'est une guitare biaisée, et que nous voulons que l'image entière soit liée, quelque chose sur lequel nous pouvons cliquer et passer à un autre endroit. Mettons-y une abréviation comme ceci. Mettons la référence d'âge. Disons que nous allons simplement passer à des images amusantes de C parce que nous n' avons plus de fichiers HTML. Maintenant, comme vous pouvez le voir, lorsque nous déplaçons la souris ici et que je clique dessus, je saute sur cette plaque. Vous pouvez le mettre sur du texte, vous pouvez également le mettre sur des images. Vous pouvez donc le mettre sur tout ce que vous voulez. Allons-y, et revenons à ce sujet. Remarquez que lorsque je vais ici, il n'y a rien ici. Et si je voulais pouvoir revenir ici, mais en utilisant le lien. Parce que nous devons fournir à l'utilisateur un moyen de revenir en arrière. Comment le faire ? Eh bien, créons un texto en retour. Maintenant, créons un lien. Mettons-y un point d'ancrage, et disons où nous voulons sauter. Et la plupart d'entre vous mettraient ici quelque chose comme ça, en texte HTML à points. Remarquez cela lorsque je clique dessus. Il y a quelque chose que je ne peux pas obtenir d'index des articles. C'est parce que l'index se trouve dans le dossier principal. Il ne se trouve pas dans le dossier appelé articles. Vous devez être capable de sauter d'un endroit à un autre. Pour ce faire, vous devez faire la même chose que nous avons fait lorsque je parlais d'images. Vous pouvez faire quelque chose comme ça et la barre oblique. Cela signifie que nous sommes passés au dossier principal. Maintenant, lorsque nous sommes ici et que je clique sur retour, et pour rafraîchir, comme vous pouvez le voir, cela fonctionne bien. Vous pouvez sauter d' un côté à l'autre. Mais c'est assez long, et pour être honnête, nous pouvons le raccourcir un peu. Pourquoi ? Parce que le dossier principal est toujours sous une barre oblique comme celle-ci Vous pouvez donc simplement mettre la barre oblique puis le nom de la chose à laquelle vous souhaitez faire référence Par exemple, index HTML. Maintenant, comme vous pouvez le voir, nous y retournons toujours. encore plus cool, c'est que vous n'avez pas besoin de fournir un index en HTML ici. Vous pouvez simplement taper la barre oblique, et elle fonctionnera toujours Pourquoi est-ce ainsi ? Parce que je vous ai dit que l'index HTML est toujours la première chose recherchée sur le serveur. Vous pouvez donc mettre l'index HTML, mais vous n'en avez pas besoin, n'est-ce pas ? Vous ne pouvez simplement rien mettre ici car le serveur recherchera toujours ce nom spécial, Index at HTML. Donc, vous pouvez simplement le dire comme ça et cela fonctionnera bien, non ? C'est tellement cool. Je pense que c'est plus facile à lire. À titre d'exercice, je souhaite créer un logo. Comment créer un logo, eh bien, essayez de trouver dans Google ce que l'on appelle un générateur de logo, ou tapez simplement sur YouTube comment créer un logo et créer un logo votre site Web et le mettre sur votre site Web, comme des images amusantes de CD Lorsque quelqu'un clique sur ce logo, pour le rendre cliquable, vous devez en créer un lien Il reviendra à l'index HTML à l'index de la page principale de votre site Web, n'est-ce pas ? Pourquoi est-ce cool et pourquoi est-ce important ? Parce que remarquez que quelqu'un peut accéder à votre site Web ici, n'est-ce pas ? Comme la première chose qu'il voit peut être votre sous-page, peut être l'une de vos pages de l'ensemble de votre site. Vous pouvez avoir des milliers de pages, non ? Et lorsqu'il voit cette page de destination, c'est pourquoi on l'appelle landing car il va atterrir dessus, il doit savoir comment revenir à la page principale. Et il est bien connu que presque toujours, sur tous les sites Web, lorsque quelqu'un clique sur Logo, il revient à l' index DadH TML Le bouton de retour, le texte de retour. Cela ne signifie rien pour la personne qui visite votre sous-page. Ici quand il saute d'ici à ici. Il sait que l'arrière signifie que nous allons revenir ici. Mais pour être honnête, il a le bouton du sac ici. Mais si c'est la page de destination, c'est différent, non ? Il doit savoir comment accéder au premier site où il peut trouver tous les autres liens. Donc, à l'index HTML, non ? C'est pourquoi on l'appelle Index. Vous pouvez y trouver tous les liens vers un autre site. Créez donc un logo, placez-le ici et permettez à l'utilisateur de revenir à la page principale de votre site Web. Ce n'est qu' une leçon, merci. 30. Liens externes | _blank: Bonjour, mon ami aujourd'hui. Je vais vous apprendre à créer un lien vers un site externe. Parce que parfois vous souhaitez recommander quelque chose, ou peut-être que l'utilisateur de votre site Web est sur le forum que vous avez créé et qu'il souhaite recommander quelque chose. C'est donc le moment où il doit être capable créer un lien vers un autre endroit, vers un site externe. Alors, comment le faire. Imaginons que nous voulions créer un lien vers Google. Alors appelons-le Google. Et maintenant, sélectionnons-le, et créons-le comme ancre. Et maintenant, la première chose que vous pensez probablement appropriée est de taper quelque chose comme ça. Google That Come. OK ? Et cliquons dessus. Voyons ce qui va se passer. Comme vous pouvez le voir, eh bien, je ne peux pas obtenir google.com. Que se passe-t-il ? Eh bien, pour être honnête, navigateur Web recherche le fichier google.com dans ce catalogue parce qu'il ne sait pas s'il s'agit d'un texte ou d'un site Web Pour dire qu'il s' agit d'un site Web qu'il doit ouvrir ici, dans le navigateur Web. Il ne s'agit donc pas de déposer un seul fichier. Nous devons ajouter ici un protocole à ce sujet. Maintenant, quand je clique dessus, comme vous pouvez le voir, nous sommes sur Google, et il s'est ouvert dans le même onglet que notre site Web. C'est ainsi que cela fonctionne. Vous devez ajouter ici HTTP, pas comme lorsque vous tapez ici. Ici, nous n'avons pas besoin de le saisir car il est ajouté automatiquement. Cependant, vous avez probablement remarqué que ce site s'ouvre dans le même onglet que votre site Web. Si vous voulez l' ouvrir dans le nouvel onglet, l'onglet vide, ça s'appelle l'onglet vide, vous devez le cibler, d'accord ? Vous devez donc lui fournir la balise d'ancrage avec des informations supplémentaires fournies avec cet attribut appelé target. Par défaut, il est défini sur self. Ainsi, lorsque quelqu'un clique dessus, comme vous pouvez le voir, cela cible l'onglet dans lequel se trouve quelqu'un. Mais lorsque nous tapons ici en blanc, vous remarquerez que lorsque je clique ici, le clic gauche, en utilisant le bouton gauche de la souris, s'ouvre dans le nouvel onglet. Il s'agit d'un comportement qui est enregistré pour quoi, pour le bouton central de la souris. Normalement, nous devrons cliquer sur le bouton central pour l' ouvrir dans le nouvel onglet, comme ceci. Pour être honnête, je pense que tu ne devrais pas l'utiliser. Certaines personnes l'utiliseront parce qu'elles pensent que le site Web du jour est le site le plus important. Mais je pense que cela agace les gens lorsqu'ils savent que le comportement par défaut est d'ouvrir le site dans l'onglet en cours Ils savent que s'ils veulent l'ouvrir dans un autre onglet, ils utiliseront simplement le bouton central de la souris. Conservez le comportement par défaut. Je vous montre que c' est parce que vous allez masquer à 100 % quelque part sur Internet. C'est la première chose à faire. Et bien, il y a des exceptions où quelque chose comme ça est peut-être une bonne idée. C'est une bonne solution. Quand ? Eh bien, imaginez que l'utilisateur de votre site Web ait une sorte de progrès de votre côté. Par exemple, s'il regarde un film ou plus, il prend une forme qu'il a passée toute sa vie, par exemple, 10 minutes à tout taper, il clique mal et il est maintenant d'un autre côté. S'il l'obtient comme ça, il perd tout, tous ses progrès. Quand il est arrivé comme ça et qu'il a mal cliqué avec le bouton gauche de la souris, il est de l'autre côté. C'est une bonne solution pour cela. Eh bien, c'est une solution simple, mais oui, vous pouvez le faire comme ça. Comment savoir si quelqu'un est en train de faire quelque chose ? Eh bien, pour cela, vous devez connaître le script Java. Pour savoir ce que fait l' utilisateur de votre côté, vous devez connaître le script Java. C'est un sujet pour un autre cours. Mais bon, c'est le moment où tu peux l'utiliser. Dans le cas contraire, je ne le recommande pas. Vous pouvez utiliser un raccourci depuis Met, comme vous pouvez le voir, pour créer des liens vers les liens internes, et qu'est-ce que l'école ? Lorsque vous ajoutez ici une colonne comme celle-ci, nous pouvons, comme vous pouvez le voir, créer un lien externe un peu plus rapidement car le protocole HTTPP est ajouté Vous pouvez donc maintenant taper le nom de la page vers laquelle vous créez le lien. Mais il y en a aussi un qui s'appelle vide, et vous vous demandez peut-être pourquoi il y a quelque chose comme celui-ci ici que nous n'avons pas utilisé ici. Pour être honnête, il s'agit d'informations totalement supplémentaires. Si cela ne vous intéresse pas, vous pouvez simplement l'aimer. Si cela vous intéresse, écoutez-moi. L, c'est l'abréviation de relation, non ? Et cet attribut donne des informations supplémentaires, quelles sont les relations entre votre site et le site auquel vous faites référence, non ? Ainsi, par exemple, lorsque vous faites référence à Google, ces valeurs sont ici parce que vous souhaitez protéger l'utilisateur de votre site. Eh bien, regardez. Lorsque quelqu'un clique sur ce lien, imaginez que ce site Web est malveillant. L'utilisateur ne le saurait pas car tout tournerait en arrière-plan, juste en arrière-plan du site. Ce site Web pourrait modifier cet onglet. Imaginez que cet onglet puisse être modifié pendant que l'utilisateur regarde ce site. Et quand il reviendra à cet endroit, il ne le remarquera pas car quelqu'un changera uniquement le Link Pi, par exemple en changeant l'index en point deux, à droite, ou le nom du domaine en quelque chose de très similaire. Et il va aussi, bien sûr, faire croire que c'est pareil. Mais que l'utilisateur sera maintenant sur un autre site Web. Et, vous savez, il peut taper des informations traditionnelles ici. Il peut taper des choses qui ne devraient pas aller sur le site Web malveillant, non ? Bien sûr, lorsque vous recherchez Google, vous n'avez pas à vous soucier de quoi que ce soit, n'est-ce pas ? Mais lorsque vous créez un lien vers un endroit dont vous n'êtes pas sûr à 100 %, c'est une bonne idée de le faire. Pour être honnête, le problème avec cette solution est également qu'elle a été corrigée, comme il y a cinq ans, qu'elle n'est plus possible car les navigateurs Web News l'ajoutent automatiquement. Il n'est donc tout simplement pas nécessaire de le faire car il s'agit d'un comportement par défaut de votre navigateur Web. Mais si vous souhaitez prendre en charge d' anciens navigateurs Web comme celui-ci, comme Internet Explorer, etc., il est conseillé d' ajouter quelque chose comme ça. Surtout lorsque vous créez ce que l'on appelle un forum. Parce que sur le forum, vous avez de bons utilisateurs, et ces utilisateurs peuvent créer des liens vers des sites Web, recommander des choses que vous n'avez aucun moyen de vérifier, car il y a des milliers d' utilisateurs sur le forum et ils peuvent créer des liens vers de nombreux sites vous ne sachiez à quoi ils font référence Cela peut donc poser problème aux utilisateurs de votre forum. Vous avez de nombreux utilisateurs sur votre forum. Et peut-être utilisent-ils l'ancien navigateur Web. Ensuite, ajouter quelque chose comme ça à chaque lien ajouté par l'utilisateur, c'est une bonne idée. Sinon, je pense que nous pouvons l'oublier. Je pense que c'est parce que ce n'est pas vraiment nécessaire. Eh bien, vous savez, lorsque vous utilisez une image, vous pouvez simplement oublier qu'elle est simplement ajoutée automatiquement, vous n'avez pas besoin d' y penser, n'est-ce pas ? Mais lorsque vous le faites manuellement, il faut juste plus de temps pour le taper. Pour le forum, oui, sinon, non. Quoi qu'il en soit, comme je l'ai dit plus tôt, remarquez que nous utilisons toujours le blanc ici, n'est-ce pas ? Eh bien, ce n'est un problème que lorsque vous l'utilisez. J'ai dit que nous devions l'éviter. Donc, n'utilisez pas le blanc. Utilisez-le uniquement dans les situations où quelqu'un a un progrès qui pourrait potentiellement entraîner un problème pour que quelqu'un utilise ce progrès. Et ce n'est qu' une solution simple. Il existe de nombreuses autres façons de le faire, évitant de le faire de cette façon. Ça fait partie de cette leçon. 31. #labels: Bonjour mon ami. Aujourd'hui, vous apprendrez ce que nos travaux et pourquoi même la peine de créer quelque chose comme ça ? Eh bien, les étiquettes vous permettent de sauter de votre côté à l'endroit spécifique sur votre site mort que vous voulez que l'utilisateur saute à. Ok, quand quelque chose est la lumière qui est utile. Allons à Stack Overflow. C' est un excellent site Web où vous pouvez trouver beaucoup de connaissances gratuites d'autres personnes comme vous. Celui qui apprend, celui qui prête quelque chose. Donc les gens partagent ses connaissances gratuitement. Et pour être honnête, c'est l'endroit où vous passez la majeure partie de votre aventure de programmation ou de développement web. Donc, disons ici est un sujet comment centré horizontalement sur l'élément à l'avenir, vous voudrez apprendre cela en utilisant, par exemple, CSS. Et il y a beaucoup de réponses ici, non ? Et imaginons que le colorant veuille partager cette réponse. Et copions-le, et mettons-le ici. Comme vous pouvez le voir, nous sommes en haut du site Web. Donc partager quelque chose comme ça, c'est du jazz, pas bon, non ? Parce que vous devrez envoyer la personne avec qui vous voulez le partager où c'est sympa, non ? Utilisez le numéro de solution baba, marque baba, il a besoin de faire défiler vers la solution qui serait stupide ou utiliser la solution qui a été créée par la personne. Stupide, stupide. Ici, nous avons un bouton Partager. Et quand je le copie et je le colle ici, bam, nous sommes instantanément à cette réponse. Qu' est-ce qui a changé ? Regardez ici le lien. On a quelque chose comme ça. Hash et le numéro. Et ce nombre après le hachage dit que nous devons sauter à cette étiquette spécifique. Alors que cette étiquette que je vois, vous pouvez le faire. Ok, nous allons utiliser le raccourci Contrôle s'il vous plaît. Plus trois plus I. Utilisons l'inspecteur ici. Dans le Chrome, c'est Control plus 3 plus j. OK ? Et nous allons sauter ici. Peut-être être bûcher est la clé. Ici. Comme vous pouvez le voir ici, nous avons ce numéro ici. Donc, afin de créer une étiquette, vous devez taper quoi ? Angkor type, le nom du travail. Et puis quelqu'un dans le navigateur doit taper quelque chose comme ça, ou vous pouvez le taper, non ? Et puis le navigateur Web va sauter à cet endroit spécifique sur votre site. C' est comme ça que ça marche. Ok, faisons-le. Faisons-le. Quand nous sommes de notre côté, nous n'avons pas de parchemin parce que nous n'avons pas de contenu. Nous devons donc faire du contenu ou créer des étiquettes de ligne de pain comme celle-ci, par exemple. Ok, créons quelques-uns d'entre eux. Et donc mettons ici quelque chose comme ça. Va en haut. Alors créons une ancre qui nous permettra d'aller au sommet de notre site. Ok, alors faisons-le. Pas quoi ? Va en haut, quelque chose comme s'ils allaient au sommet. Maintenant, quand nous planons ici, allez en haut, comme vous pouvez le voir, nous ne sommes pas au sommet, Garcia, au bas de notre site. C' est parce que cette chose a été ajoutée ici, mais nous n'avons pas d'ancre que b peut aller, non ? On doit créer la même chose qu'ils l'ont fait ici, non ? Qu' est-ce qu'ils ont fait ? Un nom, droit, donc ancre avec l'attribut name. Donc, créons ça attribut nom et appelons ça va au sommet. Maintenant, on va y aller et je clique dessus. Comme vous pouvez le voir, on peut sauter à la dope. Et c'est plutôt cool, non ? Nous pouvons sauter à n'importe quel endroit que nous voulons pour que nous puissions, eh bien, c'est assez utile à écrire parce que nous pouvons mettre, par exemple, le coin inférieur droit qui vont au dub quand quelqu'un défile très loin et qu'il veut aller à DAPI, peut simplement cliquer dessus et sauter vers le haut. Mais ce serait génial si ces boutons aller en haut se déplaceraient avec le défilement. Mais nous apprendrons des choses comme ça, comment mettre les choses dans le coin inférieur droit et comment les déplacer lorsque quelqu'un fait défiler à l'avenir. Donc ce n'est pas le sujet de cette conférence. Cependant, ces assez utile aussi, droit, parce qu'il rend votre appel, votre site Web un peu mieux pour l'utilisateur. Alors va au dub, ça marche bien. Mais imaginons que nous avons l'arrière quelque part, pas vrai ? Imaginons que nous ayons les sondages sur Knaflic. Et disons qu'on veut sauter dessus, non ? Donc, ce que nous avons besoin pour créer une ancre, et allons poster, par exemple, numéro 45815, non ? Je ne sais pas. Peut-être disons que ce pouls est ce nombre. Alors maintenant, créons une ancre de taux ici, et appelons-le comme ça, n'est-ce pas ? Et comme vous pouvez le voir, ça marche bien. Quand je clique dessus, je dois faire une pause About Nothing. Quand je clique sur, allez en haut, je vais ici. Mais il y a un problème parce que nous utilisons l'ancre pour Walt, pour le texte entier et devrait être utilisé pour les liens, ok, pas pour le texte entier. Ainsi appelé résoudre ce problème par exemple, comme ceci. Comme vous pouvez le voir, cela fonctionne bien. Cependant, disons qu'à l'avenir, vous alors JavaScript et vous voulez, par exemple, extraire le texte ici, n'est-ce pas ? Donc, dans le côté du marquage attaché, voici ce rose. Croyez-moi, ça n'appelle pas ça quelque chose comme ça ici. Alors peut-être mettons-le ici. Voyons ce qui se passe. On a de l'espace ici. Pourquoi en est-il ainsi parce que le paragraphe juste ajouter une certaine marge vers le haut et le bas. Ok, donc cette solution n'est pas non plus bonne. Ce ne sont pas une solution. Oui, nous pouvons utiliser l'ID, l'ID d'attribut, et c'est ce qu'on appelle il irait en haut. Je veux dire, pas bon à environ 450. Comme vous pouvez le voir maintenant, nous sommes là. Vous ne pouvez pas utiliser l'attribut name ici. Ça ne marchera pas. Comme vous pouvez le voir, ça ne marche pas correctement ? Pour aller à la TEM fonctionne parce que c'est sous un nom, ne fonctionne que sur la pile, ok ? Donc, vous devez utiliser ID afin de le faire comme ceci. Et vous vous demandez peut-être pourquoi même prendre la peine d'utiliser ce lien ici. Et nous pourrions juste utiliser l'ID qui peut voir n'importe quoi. Pour être honnête, c'est une très bonne question. Et vous pouvez même trouver une question comme celle-ci sur ce débordement de pile. Si vous voulez, vous pouvez le lire et le trouver. C' est un exercice à réaliser. Alors allez là-bas et essayez de trouver ce sujet parce que, eh bien, vous savez, vous devez connaître ce site Web. Vraiment bonne soirée. C'est l'un des meilleurs sites Web où vous pouvez trouver des solutions. Ok, alors lisez à ce sujet. Mais je dirai aussi quelque chose de moi-même, d'accord ? Et la première chose est que lorsque vous utilisez la balise d'ancrage à l'avenir, vous apprendrez quelque chose avec le CSS et Eve que vous voulez, vous savez, style chaque ancre, donc chaque lien, alors cela peut causer des problèmes, non ? Donc la solution comme celle-ci est meilleure que, n'est-ce pas ? Et surtout, la solution sera la meilleure. Mais il y a toujours du mal, non ? Il peut y avoir une situation où vous voulez mettre deux valeurs ici et une autre valeur, par exemple, pour l'ID. Et le problème est que vous pouvez avoir deux valeurs en ID, ok ? Cela ne fonctionnera tout simplement pas si vous arrêtez de travailler. Quand je clique dessus, ça ne marche tout simplement pas. On ne peut avoir qu'une valeur ici, d'accord ? Et cela provoque des problèmes. Et je pense que c'est pourquoi le débordement de pile a la solution parce que comme vous pouvez le voir, il a été très similaire tack ici. Et vous pouvez voir que je suis sûr qu'ils utilisent quelque chose en arrière-plan. Et ils ne veulent pas se répéter. Donc, il peut y avoir un moment où vous ne pouvez tout simplement pas utiliser ID. La plupart du temps, tu peux. D' accord. Et je préfère utiliser la version ID. Mais IV, il y a un jour où vous vous demandez peut-être hmm, j'ai besoin d'ajouter ici un autre ID. Alors tu dois t'en tenir à cette solution, d'accord ? Ceci est également mieux pris en charge. Mais pour être honnête, cela est pris en charge, je pense que même dans Internet Explorer 6. Donc je ne pense pas que nous devrions nous soucier du soutien en ce moment. Vous pouvez juste finir, plus, plus de tout faire. Donc, la plupart du temps, utilisez la solution. Bon de savoir qu'il existe une solution comme celle-ci parce que vous aurez besoin avec d'autres personnes qui utilisent la solution. Et c'est la différence. Je voudrais également ajouter dans cette conférence que vous pouvez aller au sommet un peu plus vite. Vous n'avez pas besoin de faire quelque chose comme ça. Parce qu'imaginons ça, Hey, disons que nous avons ajouté du contenu ici juste plus tard sur notre site Web. Et notre top est là où il n'est pas au même endroit, ici, en ce moment. Et si vous tapez ici haut, vous sautez toujours au sommet. Vous n'avez pas besoin, vous n'avez même pas besoin de créer l'étiquette. Il fonctionnera toujours sur notre site Web. Vous avez dactylographié, vous êtes au sommet, ok. Vous pouvez également taper le hachage, et ils le comptabilisent également. Donc il y a deux versions, top ou le single de hachage Tosh, ok ? Je préfère celui-là parce que ça dit ce que nous voulons faire ici, non ? Ok, alors envoie quelqu'un en haut, d'accord. Cette chose est un peu moins descriptive, non ? Donc, utilisez cette version, je pense, pour envoyer quelqu'un au sommet. Ce n'est qu'une bonne leçon. Merci beaucoup. 32. Comment créer un lien pour les e-mails ?: Bonjour mon ami. De chaque côté, vous devriez toujours vous fournir une information de contact, n'est-ce pas ? Donc vous devriez fournir au moins un email, numéros de téléphone, des échantillons comme ça, non ? Parce que cela augmente la crédibilité de votre côté. Comment le faire correctement ? Tu pourrais taper quelque chose comme ça. Votre nom de courriel, domain.com. D' accord, ça ressemble à ça. Et le programme est que ce n'est qu'un texte, non ? Je pense que cela fera mieux que lorsque nous cliquons dessus, nous exécutons leur programme qui est installé sur l'ordinateur de l'utilisateur qui lui permet d'envoyer des e-mails. Cela augmenterait ce qui réduirait le temps dont il a besoin pour vous envoyer un courriel pour vous contacter. Et, tu sais, le temps c'est de l'argent, non ? Pour tout le monde. Et ils apprécieront quelque chose comme ça. Comment le faire ? Eh bien, pour le faire, vous devez créer la balise d'ancrage. Et vous pouvez utiliser émit pour cela pour vous aider avec la valeur mâle 2 pour l'attribut d'une référence, n'est-ce pas ? Et ici vous mettez le nom de l'e-mail dans lequel vous voulez lui envoyer. Et puis ici vous faites glisser le texte. Ce doit être que cela devrait être visible comme par exemple, e-mail, quoi que ce soit, n'est-ce pas ? Et maintenant, comme vous pouvez le voir, nous avons quelque chose comme ça ici. Quand je clique dessus, j'ai une tonne là, programme bert installé sur mon ordinateur et maintenant je peux envoyer ici instantanément leur principal. Donc c'est plutôt cool, non ? Parce qu'il exécute le programme qui est installé sur mon ordinateur. Si quelqu'un utilise le téléphone mobile, il exécutera l'application mobile qui lui permet d'envoyer l'e-mail que. Donc c'est plutôt génial, non ? Et c'est tout à cette conférence ? Eh bien, la première chose est que lorsque vous sélectionnez l'image comme celle-ci, c'est cool que lorsque vous ajoutez aggravation en utilisant ici, il remarquera que le texte était e-mail et il mettra l'e-mail instantanément ici. C' est cool, non ? C' est des accélérations, même des choses un peu plus, non ? Comme vous pouvez le voir, cela fonctionne toujours bien. Vous pouvez aussi ajouter le sujet, ok, pour que nous puissions faire quelque chose comme ça. C' est comme par exemple, Question, sujet égale question, question de ce côté. A propos des chats, quelque chose comme ça. C' est donc un sujet par défaut. Maintenant, quand je clique dessus, vous remarquerez qu'ici, dans la carte, les voir en poésie est sujet. Et nous avons avec votre question de ce côté sur GOT, c'est assez cool parce que certaines personnes ne mettent pas des sujets de ceux-ci. Donc, certains d'entre eux ont tiré avec des sujets qui ne se connectent pas au texte. Et cette chose vous permet d' avoir un sujet par défaut qui va au moins connecter le Me Too de, eh bien, il vient de droite ? Donc, vous pouvez mettre ici le sujet par défaut en utilisant la construction comme celle-ci, ok, donc fait le deux-points que le mâle, puis le point d'interrogation que le sujet est égal signe, et puis le contenu du sujet. La valeur par défaut, bien que je recommande fortement de faire ces balançoires, est-elle sur cette conférence ? Remarque, nous pouvons utiliser l'adresse de retour. Ceci est assez utile afin que nous puissions mettre une autre pile comme celle-ci sur ceci. J' aime l'avoir formaté comme ça et y pour même la peine de le faire. Eh bien, vous informez en ajoutant la balise d'adresse que le contenu de celui-ci est juste une adresse. D' accord ? Pourquoi même la peine de faire soi-même nécessaire ? Parce que Google sait maintenant que c'est l'adresse, ok ? Ainsi, vous pourriez lui fournir plus d'informations comme par exemple, votre nom et prénom. Et par exemple, vous pouvez mettre ici, D'où êtes-vous, où votre entreprise prospère ? Ou vous pouvez mettre ce nombre souvent et ainsi de suite, à droite, dans la pile d'adresses. Et puis le Google saura que, ok, ce n'est pas un texte concernant l'article que vous êtes, par exemple, montrant de leur côté ou un Concernant il produit que vous voulez vendre. C' est juste une adresse, ok, c'est une information supplémentaire pour Google. Vous avez également probablement remarqué que le contenu ici est maintenant écrit en utilisant la balise italique juste ici est comme un éthylène défini sur chaque pensée. Rien n'a changé ? Quand je mets le I ou quand ils le retirent. Donc pouvez-vous changer le comportement par défaut ? Oui, vous pouvez le faire. Mais pour le faire, vous devez connaître le CSS dont nous allons parler dans la future leçon. Merci. 33. Lien de téléphone: Bonjour dans l'adresse. Je pense que c'est une bonne idée de vous fournir aussi le numéro de téléphone. Cela augmente également la crédibilité de votre site Web. Il est très important, je pense, d'inclure le numéro de téléphone. Ne vous inquiétez pas, même si votre site est très populaire, vous voulez de bons manacles. Croyez-moi, je donne le numéro de téléphone et beaucoup gens visitent mon site Web et il est rare que quelqu'un appelle. C' est une bonne idée d'avoir un numéro de téléphone professionnel de co, bien sûr, ce n'est pas une bonne idée de fournir au personnel un numéro de téléphone ici, parce que parfois vous pourriez obtenir quelqu'un que vous ne voudriez pas être appelé par des attaques de domaine. De nos jours, vous ne pouvez même pas être des gens, alors ne vous inquiétez pas, juste à condition que cela ait vraiment augmenté la crédibilité. Ok, alors comment le faire ? Eh bien, vous pouvez mettre le numéro, par exemple, ici, comme ça. Il est important d'ajouter les espaces. Je pense que parce que cela augmente la visibilité de votre numéro il est plus facile d'écrire sur papier quand quelqu'un dit que le nombre comme celui-ci, nous avons cette base n'est pas sans eux, non ? C' est plus facile de le lire et de s'en souvenir. Alors c'est comme ça que tu le fais. Mais la chose la plus importante pour nous maintenant est que nous pouvons créer un lien. D'accord ? Donc, acceptons le lien. Et afin de créer un lien vers le nombre, nous ne tapons pas mâle 2, mais nous pourrions taper ce dire. C' est des chemises pour le téléphone, non ? Et puis le côlon, il est important de mettre le côlon ici, puis le signe plus. Et puis vous devez taper ici le code pays que vous pouvez trouver dans Google. Vous pouvez simplement taper des codes de pays. Et par exemple, pour la Pologne, c'est quoi ? C' est 489. Alors quatre à huit et puis le numéro qui est à vous, non ? Et maintenant, comme vous pouvez le voir, quand je clique dessus, il veut choisir une application à exécuter. Eh bien, si vous avez un navigateur Web connecté à votre téléphone, alors vous pouvez envoyer le numéro instantanément à votre smartphone. C' est plutôt cool, non ? C' est le premier, c'est quelqu'un qui visite votre site sur smartphone. Il peut simplement cliquer dessus et vous refroidir instantanément. C' est aussi plutôt cool, non ? Parce qu'il n'a pas besoin de le faire, je l'écrirai sur papier. Il n'a pas besoin de le mémoriser. Il est donc assez cool qu'il puisse être simplement cliqué et ensuite choisir, par exemple, l'application comme ici. Quel genre d'application, vous savez, Skype, tout ce que les gens peuvent avoir une application installée qui leur permet d'appeler en utilisant le microphone sur l'ordinateur aussi, sorte qu'ils peuvent simplement cliquer dessus et l'appel vous depuis l'ordinateur. Donc, il est aussi le rendre plus facile et tout ce qui rend plus facile pour eux sera apprécié par eux. Alors rappelez-vous, c'est cool d'ajouter quelque chose comme ça. Donc pour le faire, vous devez ajuster IPS, dire à Scollon leur code de pays avant le signe plus, non ? Et ton numéro. Et ici, bien sûr, vous pouvez taper ce que vous voulez, écrire n'importe quoi, ou vous pouvez taper la police, par exemple. Mais je pense que c'est une bonne idée de répéter ce que cela ici, parce que bien, peut-être quelqu'un qui ne veut pas utiliser l'application, peut-être quelqu'un veut l'écrire. Alors c'est une bonne idée de le dire comme ça. Vous pouvez également utiliser l'image pour cela si vous ne voulez pas vous en souvenir. Donc, vous pouvez simplement utiliser le deux-points et ensuite téléphoner. Et comme vous pouvez le voir, cette partie du lien vers le téléphone est instantanément mise ici. Il vous suffit de taper votre code pays jour et le numéro qui est sur cette leçon. Merci beaucoup. 34. En-têtes h1 à h6: Bonjour, mon ami. Aujourd'hui, je vais vous apprendre ce que nos en-têtes et quand devriez-vous les utiliser ? Parce que les en-têtes amélioreront leur contenu de votre site Web parce que vous améliorerez l'expérience utilisateur de votre site. Pourquoi est-ce ainsi ? Qu' est-ce qu'un en-tête ? L' en-tête est juste un texte clair. Oui, c'est le cas. Mais c'est grand. Il s'agrandit et est également placé au-dessus de notre texte. D' accord ? Et ce grossissement, cet élargissement, fait demander à l'utilisateur de se concentrer sur ce type de textes plus que ce qui est sous la rubrique. Ok, alors comment pouvons-nous créer des en-têtes en HTML ? Pour le faire, nous utilisons la balise qui est appelée, par exemple H1. Et tout ce que je tape ici va être un en-tête, un en-tête. La plus importante. Voyons voir. Comme vous pouvez le voir, nous avons ici un gros textes, comme je l'ai dit, et il est aussi gras, non ? Et aussi nous pouvons voir que la fusion a augmenté et a bas. Donc c'est un en-tête et ça va presque forcer l'utilisateur à se concentrer dessus, non ? Il va lire que la première chose ne va pas se concentrer sur les choses ici et il va se concentrer sur celle-ci ici. Et c'est pour ça que nous utilisons les gros titres, n'est-ce pas ? Nous les créons afin de concentrer l'attention sur la clé, le message le plus important du texte. Certaines parties des textes peuvent ne pas intéresser saumon et les titres vous permettent de sauter rapidement à la partie spécifique des textes qui intéresse l'utilisateur. Le titre indique brièvement et brièvement à l'utilisateur ce que sera le paragraphe suivant, ce qui rend votre texte plus facile à lire. Et si c'est plus facile à lire, l'utilisateur est quoi ? Plus heureux. C' est des hommes heureux. Maintenant, c'est crucial pour tout bon article. D'accord ? Ainsi, lorsque nos titres utilisent, par exemple, un titre peut être des textes écrits dans une police beaucoup plus grande dans le journal, comme s'il s'agissait des sous-titres de textes individuels. Un tel titre est utilisé pour attirer l'attention ou augmenter la lisibilité des textes, n'est-ce pas ? Ok, donc c'est comme ça que vous créez un titre, un J1. Pourquoi est-ce un J1 ? Eh bien, h est la première lettre de l'en-tête de mot, non ? En-tête. Ok, c'est pour ça que c'est l'âge. Et le truc cool est qu'il y a plus d'un en-tête H. Eh bien, vous pouvez taper a1, a2, a3, 4, 5 et 6. Il existe six versions d'en-têtes. Quelle est la différence ? Eh bien, c'est un peu plus petit qu'un. C' est un peu plus petit que h pour, ici, nous allons le changer pour vieillir sans âge. C' est un peu plus petit que h et ainsi de suite, non ? Ainsi, vous pouvez voir ceci, le plus important, et ils sont de plus en plus petits par défaut. Vous pouvez modifier le comportement par défaut, mais vous ne devriez pas le faire à partir de cet espace, à partir du corps HTML en utilisant CSS dont nous allons parler à l'avenir. Passons à l'article sur la conférence que vous écoutez. Notez que j'ai ici quelques textos que vous avez entendus dans cette conférence. Et notez que j'ai de bons en-têtes ici. Et comme je l'ai dit plus tôt, quand vous voyez l'en-tête, vous pouvez instantanément voir ce qui est sous, non ? Parce que l'AGI, alors pourquoi créons-nous l'en-tête ? Ok, donc cette partie est à propos de ça. Donc, vous n'avez pas besoin de lire l'article entier. Vous pouvez simplement sauter à la partie spécifique de l'article et juste lire la partie qui vous intéresse. Cela augmente donc la lisibilité de votre article et de l'expérience utilisateur et quoi que ce soit, rappelez-vous, quel que soit l'augmentation de l'expérience utilisateur, rend votre site Web plus exigeant. Donc, Google sera classé plus haut, et aussi les gens vont visiter plus. Il est donc assez important d'utiliser des en-têtes. Et l'en-tête qui est H1 ne devrait être utilisé qu'une seule fois. C' est juste quelque chose que vous devriez penser à chaque sous-page de votre côté, Ok, site Web. Donc, c'est comme le message le plus important concernant l'article que vous décrivez de votre côté. D' accord ? Remarquez également ce qui se passerait si je reviens, disons que ce ne sera pas un en-tête et M, d' accord, ça va être ici comme ça. Que va-t-il se passer ? Vous pouvez voir instantanément que ce texte n'est pas aussi facile à lire qu'avant, n'est-ce pas ? C' est toujours mieux si au moins cette chose serait en gras, par exemple, non ? C' est assez important pour créer des en-têtes, ok ? Au-dessus des textes que vous allez avoir sous l'en-tête. Alors revenons à ça. Ainsi, comme vous pouvez le voir, l'en-tête pourrait être stylé différemment. Ici, tout est ici, c'est plus grand. Et il n'est pas en gras même ici, comme vous pouvez le voir, il est en gras et plus grand et ensuite il devient plus petit avec chaque en-tête. Mais vous pouvez changer ce comportement pour en faire ce que vous voulez qu'il soit, mais en utilisant le CSS que vous ne pouvez pas apprendre à l'avenir. Ok, c'est l'heure d'un exercice. Comme vous pouvez le voir ci-dessous, est un texte que nous allons maintenant. Formater le rythme, non ? Parce que tout est en une seule ligne ici. Ce n'est pas fiable du tout, non ? Quand quelqu'un voit un gros morceau de textes, il ne va pas le lire. Souviens-toi. Nous devons donc le formater. Comme vous pouvez le voir, j'ai déjà formaté le beat BAD dans le code Visual Studio. Pour que je puisse le faire comme un exercice. Ok, tu peux faire seul ou on veut dire si tu veux écrire. Et comme vous pouvez le voir ici, nous avons quelque chose comme les bases de la création de page, brève introduction. Je pense que cela semble être la bonne chose pour l'en-tête, non ? C' est comme le sujet principal de tout ce qui suit ici parce que nous ne parlons pas de ce qui est un HTML et CSS. Donc, ces choses, je pense que sont connectées à l'en-tête principal, donc nous ne pouvons pas les appeler H2. Et cette aile que nous allons appeler aussi H2, non ? Et comme vous pouvez le voir, ça va un peu mieux, non ? Parce que nous avons les bases de la création de page. Brève introduction. Qu' est-ce que le HTML ? Ok, si mignons sont des choses concernant HTML ou le CSS. Ok, donc nous allons parler de CSS. C' est de mieux en mieux. Ok, maintenant, par exemple, faire quoi ? Je pense que nous avons ici une question à laquelle la loi répond. Alors, quelle est la taxe ? Ok, donc je pense que ce truc peut être h3, non ? Parce que c'est relié à H 2 ici. Alors passons cela à la trame H. Et aussi ce qui est un sélecteur H libre. Et comment puis-je inclure le fichier CSS pij un arbre. Et maintenant, ça va de mieux en mieux. Comme vous pouvez le voir, toutes ces choses ici. Je pense que ce sont des paragraphes. Nous pouvons donc dire qu'il s'agit d'une sorte de textes, ou nous devrions tous les sélectionner et les mettre dans le paragraphe. Donc, le Google sait que c'est du texte. D' accord. On n'a pas besoin de le faire. Comme vous l'avez remarqué, probablement même afin de voir que ce est du texte sur la page. Donc quand vous regardez ici, mais rappelez-vous toujours ce texte. Si c'est un texte comme un article, c'est une bonne idée de le mettre dans le paragraphe comme ceci. Et vous devrez monter, remarquez que ce n'est pas aussi fiable, aussi bon à lire qu'avant, mais c'est parce que, eh bien, le comportement par défaut pour 3, 2 et 1 dans ce cas n'est pas aussi bon, non ? Probablement pour cela, qu'est-ce que Selector ? Il serait préférable de le faire, par exemple, ici au centre, non ? Centrez-le par exemple. Et vous pouvez le centrer en utilisant une sorte de balise appelée centre. Comme vous pouvez le voir, c'est un DAG rouge en ce moment. Et c'est rouge parce qu'il n'est plus utilisé parce que des choses comme ça devraient être faites via CSS et nous allons en parler à l'avenir. Donc, ce que j'ai triché a été utilisé il y a longtemps en HTML, mais de nos jours, ne l'utilisez pas. Et probablement, eh bien, ça serait un peu plus facile à lire s'il y avait plus de textes, non ? Ce sont des textes très courts. Donc s'il y avait plus de textes ici, ça sera plus facile à lire à chaque fois, non ? Vous pourriez aussi, je ne sais pas, le verbe de nom que quoi que ce soit, ça, ça va être mieux quand le texte sera plus grand, non ? Donc, peut-être que la règle de bord 3 n'est pas nécessaire ici dans ce cas particulier. Mais bien, probablement personne ne pourrait simplement taper quelque chose comme ça pour attacher un pilote de chasse, utiliser la balise de lien dans la section tête. Vous allez ensuite vous donner un exemple comment, comment le faire, n'est-ce pas ? Et cette chose, ça prendrait un peu de place ? On peut même faire quelque chose comme ça en utilisant quelque chose comme Lorem, Ipsum, Emmet raccourci. Comme vous pouvez le voir, ça devient un gros, un peu plus grand en ce moment. Nous pouvons taper Lorem et nous pouvons, exemple, le multiplier par 50, comme vous pouvez le voir maintenant c'est plus grand et correct, comment puis-je voir est cette belle page et maintenant il est grand. Probablement des textes comme ça devraient être divisés de toute façon. Donc, ceux-ci seront également disponibles nuit lorsque vous voulez un texte d'espace réservé. Et bien, le prochain exercice que je veux vous montrer est comment créer les en-têtes de H1 à H6. Essayé de le faire seul avec l'aide de émis dont nous avons parlé auparavant, comment le faire ? Eh bien, h multiplié par 6, comme vous pouvez le voir, maïs nous cherche des piles appelées h, non ? Mais on veut des chiffres là-bas. Alors faisons-le comme ça. Ce sont des nombres comme 1, mais nous voulons 1, 2, 3, 4, 5, 6, 7. Et je vous ai dit que c'est utilisé au lieu du numéro du dollar, on va compter de un jusqu'au nombre qui est ici, écrivain. Donc, nous avons 6 et 12, 34, 56. Ok, c'est plutôt cool. Maintenant, nous avons besoin du contenu. Alors, comment créer un contenu ? Eh bien, quand vous utilisez les supports bouclés et mettez le contour ici. Et comme vous pouvez le voir, ici, nous avons le texte ici. Oh, désolé, c'est au mauvais endroit. Le contenu devrait être ici, non ? Comme vous pouvez le voir, nous avons un texte ici. Et aussi nous voulions numéroter, mais à partir d'un à six. Et comme vous pouvez le voir, ça marche bien. H1 à H6. Vous avez probablement remarqué que j'ai fait une erreur et c'est tout à fait correct parce que je suis humain, non ? Je vous le dis parce que probablement quand vous essayez d'écrire votre code, quand vous essayez d'écrire quelque chose pour Scott serait votre lettrage juste maintenant ? Tu vas faire des erreurs. Et tu dois savoir que je suis prêt avant la conférence, non ? Et je fais moins, moins d'entre eux, moins d'erreurs parce que je suis prêt et aussi j'ai de l'expérience dans ce domaine, non ? Mais nous, les humains, avons tendance à faire des erreurs, ne vous inquiétez pas, et ne vous sentez pas dépassés quand vous ne connaissez pas la réponse instantanément. Quand vous êtes quand quelque chose ne fonctionne pas correctement, c'est assez, assez normal. D' accord ? Vous êtes au début d'un voyage et même si vous êtes à Vance, si vous avez une expérience avancée dans quelque chose, vous allez faire des erreurs, peut-être moins d'entre elles, mais vous allez maintenant les faire et pas de réponses instantanément. Aussi, je vous le dis et je n'ai presque pas corrigé toutes les erreurs dans le droit de post-traitement. Parce que je pourrais juste supprimer la dernière seconde où j'ai fait une erreur comme celle-ci ici et te montrer que je ne fais aucune erreur, mais ça te ferait sentir des guerres, non ? Parce que tu seras comme, Ok, ce gars ne me rend pas malade. Comment diable est-il capable de tout faire correctement, d'accord. Je ne serai jamais comme lui. Pour être honnête. Vous êtes comme moi, mais j'ai un peu plus d'expérience que vous. À l'avenir. Tu feras tout ce que je fais aussi vite que moi. Il y a aussi un raccourci cool dont je n'ai pas parlé. C'est notre classe Z. Quand tu as un texte comme ça. Et ça monte ici. Comme vous pouvez le voir, il est difficile de lire l'orange. Vérifiez, changez quelque chose même dans ce texte. Et pour le changer, vous pouvez envelopper le texte en utilisant le raccourci Al plus Z, comme vous pouvez le voir maintenant tout ici est enveloppé donc quand le texte est juste un peu trop grand à l'écran. Donc quand tu auras besoin de faire défiler, ça va être enveloppé comme ça, non ? Et vous devez savoir que cela change l'apparence du texte ici. Il ne va pas être changé, mais ici il est plus facile de changer quelque chose, d' ajouter un nouveau texte, non ? Donc, je recommande fortement d'utiliser ce mode. Ce n'est que la leçon. Passez une bonne journée et il y a toujours, rappelez-vous que je suis là pour vous soutenir au cas où vous auriez des questions. Passe une bonne journée. 35. Cite vs blockquote - Comment cite d'autres ?: Bonjour tout le monde. Aujourd'hui, je vais vous apprendre la différence entre la file d'attente semble bien et la taxe de site. Aujourd'hui, nous allons apprendre à citer quelqu'un comme Albert Einstein par exemple. Comme vous pouvez le voir, afin d'assigner quelqu'un que nous devrions utiliser le tack sur son nom ou son nom et le livre dans lequel il l'a écrit ou URL du dimanche, non ? Nous devons taper le site comme d'où vient le texte qui est dans blockquote ou la balise q. Ainsi, le contenu sombre du site est, par exemple, le nom de la personne que nous observons. Et puis le contenu est à l'intérieur du blockquote. Dans la balise q. Nous avons également cité quelqu'un qui l'a dit, et nous l'avons fourni ici. Mais on l'a fait à l'intérieur parce qu'il est comme Adam juste ici. Nous avons fait une citation, mieux d'appartenir à certains qu'à 0. Et puis nous avons dit que l'IED a été mis par Angie Sepkoski, qui sont le sang évolue livre. Nous avons donc fourni aussi le livre. C' est assez important de dire d'où ça vient. Eh bien, nous ne savons pas d'où viennent ces textes. Au moins, je ne sais pas. Cette chose a été dit il y a longtemps, longtemps, longtemps, avant Internet, non ? Donc on ne sait pas vraiment si triste de dire que ça vient du livre spécifiquement, comme on peut le dire ici, non ? Quelle est la différence entre le Q et le blockquote ? Eh bien, comme vous pouvez le voir, blockquote est une citation de bloc. Cela signifie que lorsque nous allons ici, c'est un bloc, ce qui signifie que nous avons une marge de haut en bas. Cela signifie que le texte n'est pas à côté de l'autre. Ce n'est pas conforme, comme dans le cas de la citation. À l'arrière. Comme vous pouvez le voir, la balise q, qui est ici, c'est en ligne, non ? Ça n'a pas ajouté la ligne brillante, non ? C' est donc la première différence. La deuxième différence est que, hé, remarquez que nous avons ici, citation, les signes de citation, ils ne sont pas là. C' est donc la principale différence. Et les gens recommandent d'utiliser la balise de code pour des choses qui ne sont que 94 courtes, des choses comme celles-ci vont bien, pour une plus grande. Est-ce parce que ce mot était destiné quand quelqu'un a créé cette obscurité. D'accord. Vous pouvez toujours lire quand quelque chose devrait être utilisé. Lorsque vous déplacez la souris sur la balise, comme vous pouvez le voir, l'élément latéral représente une référence à une œuvre créative. Il doit inclure le titre de l'œuvre ou le nom de l'auteur, ou une référence URL, n'est-ce pas ? Ou, et référence sous forme abrégée et ainsi de suite. Mais vous pouvez voir comment quelque chose devrait être utilisé lorsque vous déplacez la souris dans Visual Studio Code, c'est une chose assez utile. Et aussi lorsque vous cliquez ici sur ce lien ou que vous le copiez directement sur votre navigateur Web, vous pouvez en savoir plus à ce sujet. Je pense que c'est joli, plutôt cool. Alors lisons cette citation parce que je l'aime vraiment. Fin cette conférence. Penser. Il est connu que telle ou telle idée est impossible à mettre en œuvre. Mais il y a des animaux ignorés. Donc quelqu'un qui est ignorant, alors quelqu'un est peut-être stupide, qui ne le sait pas. Et il fait ça aux patients hospitalisés. Alors peut-être qu'il n'était pas si stupide, comme tout le monde l'a dit. C' est très cool, citation, parce que cela montre que nous ne devrions pas regarder les définitions et les croire à 100%. Parce que, eh bien, nous savons ce que nous savons à l'heure actuelle, pas avec nos connaissances actuelles est vrai, mais peut-être, il y a peut-être quelque chose qui nous manque. Donc il peut y avoir un guide comme celui-ci avec des ignorances. Et il est ignorant et il ne portera pas les choses qui ont été dites. Et il va inventer quelque chose. C' est ainsi que l'invention prend vie. J' adore ce truc. Alors n'écoutez pas toujours les choses qui sont disponibles pour nous parce que peut-être, peut-être qu'ils ne sont pas les bons Toujours. Avez-vous probablement remarqué que le code de bloc est ce qui est lié en quelque sorte et peut-être que vous n'aimez pas comment il est style. Peut-être que tu préfères celle-là. Toujours. Vous pouvez modifier le comportement par défaut comme ça, mais à l'avenir en utilisant le CSS. Donc, ne vous inquiétez pas, il est bon d'utiliser les balises comme ça pour informer quel genre de texte est dans votre texte plus grand, non ? Vous informez le tableau Google, informez d'autres personnes quel genre de texte est-ce ? Il est vraiment important de faire des choses comme ça pour rendre votre code un peu plus sémantique. Donc, quand vous lui donnez un sens, sens sémantique, vous pouvez , cependant, nous avons notre CSS aussi ajouter les guillemets en utilisant des entités dont nous avons parlé. Donc, il y a des entités comme les guillemets inférieurs et les guillemets doubles droits. Ensuite, nous allons créer un signe de citation comme celui-ci. Pour que vous puissiez réaliser des choses comme ça. Mais comme vous pouvez le voir, c'est un peu plus difficile et ce n'est pas la meilleure solution. Sss est toujours mieux dans des cas comme celui-ci. C' est une douzaine. Merci. 36. abbr | Dfn: Bonjour mon ami. Aujourd'hui, je vais vous montrer comment définir et utiliser correctement les raccourcis en HTML pour s'assurer que les robots comprennent ce que vous écrivez dans les articles. Donc, afin de définir quelque chose comme nous avons ici, HTML est un langage cible utilisé pour créer des sites Web. On devrait dire ça, Hey, on a défini quelque chose ici. Et pour le faire, nous utilisons une balise appelée HDFN, qui signifie définir le f n, non ? Et comment on le montre ? Nous mettons juste l'attaque définir sur la chose que nous définissons à l'intérieur de la balise. Comme par exemple, paragraphe. D' accord ? Donc, c'est une pile par et parce que ce texte est à l'intérieur du paragraphe, n'est-ce pas ? Et nous devons définir le HTML dans ce paragraphe maintenant parce que la pile est à l'intérieur de ceci, ok ? Donc maintenant, nous pouvons clairement voir que voici une définition, donc nous ne devrions pas la définir plus tard dans votre article. Mais ici à côté de l'endroit où nous avons dit que lorsque nous avons dit exactement où nous précisons que Haidt ici est une définition. D' accord ? Pourquoi on le fait ? Parce que les robots vivent, par exemple, de Google lorsqu'ils voient votre site Web et qu'ils voient que vous définissez HTML. Et quelqu'un, par exemple, veut trouver la définition du HTML et il tape dans Google, qu'est-ce que la définition HTML ? Vous avez une plus grande chance d'être montré, non ? Parce que Google saura que vous le définissez. Vous n'avez pas seulement fait un article concernant HTML. Vous définissez le code HTML. Ok, c'est la différence. Ici, nous avons quelque chose de bon comme ce que nous utilisons est appelé JS dans ce texte ici. Et vous pouvez remarquer que nous avons ici une abréviation de raccourci, chaque abréviation lorsque vous l'utilisez pour le rendre plus facile à comprendre pour les autres parce que tout le monde n'a pas besoin de savoir ce qu'est JS. Vous, alors vous devriez utiliser quelque chose que nous allons jeter, attaquer un cheveu de bébé, dont son abréviation, n'est-ce pas ? Et on le fait comme ça. Comme vous pouvez le voir, nous avons ici ajouté instantanément ce que l'attribut title où vous spécifiez ce que signifie ces raccourcis. Script Java, ok, Cela signifie JavaScript. Voyons ce qui a changé lorsque nous ouvrons le Firefox. Comme vous l'avez remarqué, HTML est écrit par défaut en italique, n'est-ce pas ? Parce que ce ne sont pas des lettres foulées, non ? C' est l'Italie. Essaie maintenant. Et ici js, quand nous déplaçons la souris, ont des informations qui vont bien, donc le raccourci est synonyme de JavaScript et nous avons aussi tué les petites boules juste ici, non ? Donc il s'avère que ça suggère que quelque chose se cache là, non ? Lorsque vous les déplacez partout, vous saurez de quoi consiste ce raccourci ? Et cette très bonne idée de faire de telles choses. Pourquoi ? Parce que, comme je l'ai dit tout à l'heure, vos étudiants, ceux qui lisent des articles n'ont pas besoin de connaître tous les raccourcis. Et quand vous utilisez la balise d'abréviation, vous avez montré le Google, vous souciez-vous des gens, des utilisateurs de votre site Web ? Vous augmentez la lisibilité de vos articles, n'est-ce pas ? Si vous augmentez les chances d'être quelqu'un heureux, et si quelqu'un est heureux, google ces Hapi, ok, C'est, c'est quand les gens vont utiliser les services Google. Et c'est pourquoi utiliser l'abréviation est une bonne idée. Je n'aurai jamais d'abréviation. Vous avez probablement remarqué que HTML est aussi une abréviation. Nous ne l'avons pas seulement défini ici, mais c'est aussi une abréviation, non ? Donc, vous pouvez aussi mettre une étiquette dans une autre balise, n'est-ce pas ? On en parle. C'est comme une balise imbriquée. Donc on peut mettre son abréviation aussi et dire que c'est le langage Hyper Text Markup, non ? Comme ça. Et ici, comme vous pouvez le voir maintenant lorsque nous déplacons la souris, nous avons aussi cette information. Donc, nous utilisons le défini ici parce que nous le définissons et nous utilisons la balise d'abréviation. Parce que, bien, c'est une abréviation, non ? C' est donc une bonne idée de montrer ce qu'il représente. Ici. Nous utilisons juste la balise d'abréviation parce que bien, nous n'avons pas défini ce qui est js, n'est-ce pas ? On dit juste, Hey, on utilise ce cas particulier, JavaScript, ça fait partie. Nous avons montré que c'est JavaScript pour les personnes qui ne savent pas ce que signifie ce raccourci, en concevant la leçon. Merci beaucoup. 37. Balises sémantiques <strong><em>et <b><i>vs</i></b> vs ,</em> , ,</strong>: Bonjour mon ami. Vous pouvez créer des articles de votre côté sans formatage, et ce ne sera qu'un texte brut. Mais quand vous regardez le texte brut sans mise en forme, nous avons donc, par exemple, des textes en gras. Donc, nous avons eu, par exemple, dire à l'utilisateur, hé, vous savez, ici ce C comme dit, est les premières lettres d'ici, par exemple, comme ceci. Donc, quand vos textes sont juste des textes simples, c'est juste plus difficile à lire, surtout quand il s'agit d'un texte plus long, non ? Non est que le recréer, par exemple, en utilisant émit, par exemple, en utilisant l'abréviation du forum. Et quand on le fait comme par exemple, 30 fois le texte comme celui-ci est tout simplement illisible, non ? Vous devez utiliser le formatage comme par exemple, en-tête dont nous avons parlé. Vous devez utiliser tout vu quelque chose. Comment ça s'appelle ? Les choses fortes et audacieuses et d'autres comme ça, mais nous ne parlerons pas dans cette conférence. Donc il y a un tag B, je savais que nous savions pour le premier. Nous ferons cobalt les textes dès qu'on le fera partir. Huit Alec, il y a aussi quelque chose comme souligner et grève sous-jacent juste faire un sous-jacent en dessous du texte et le S signifie grève, et il frappe juste à travers le texte. Ces quatre balises, comme vous l'avez probablement remarqué, sont utilisées que pour le formatage du texte. Donc, ils ont changé la façon dont le texte apparaît et pour changer d'apparence, vous ne devriez pas les utiliser. Oui, ce sont de vieux impôts, très vieux et bien, nos jours, nous utilisons simplement CSS pour réaliser ce que ces balises font. Presque toujours. Bientôt, je vais vous montrer une sorte d'exception. Mais la plupart du temps, vous utiliserez le CSS. Pourquoi c'est ça ? Donc, parce que CSS vous permet de créer phi externe où vous pouvez changer comment les choses apparaissent dans chaque page Web que vous avez. Eh bien, nous avons bien maintenant seulement une seule page. Donc, vous ne le laissez pas changer manuellement être à iOS. Je pense que ce n'est rien. Mais plus tard, quand vous avez, par exemple, 400 pages, n'est-ce pas ? Alors quelque chose comme ça est vraiment cool parce que vous pouvez changer d'un fichier externe comment quelque chose est parti, notre logline, non ? Parce que peut-être plus tard, vous ne voulez pas que quelque chose soit en gras ou peut-être que vous voulez changer de ball2 data lake ou autre chose, non ? Donc, ces choses devraient être faites, ne peut que par CSS. Mais il y a des balises qui sont appelées balises sémantiques, ce qui signifie qu'en partie de la mise en forme, elles ont également une signification supplémentaire. Quel genre de signification peut avoir une balise supplémentaire ? Eh bien, il y a une balise qui est appelée forte, qui par défaut ont un b comme formatage. Donc, comme vous pouvez le voir ci-dessous, avant de le faire, assurez-vous de lire le manuel d'instructions lorsque nous utilisons l'étiquette forte sur cette partie des textes, il est également en gras, non ? Ça changerait pour être, C'est aussi en gras. Alors pourquoi même la peine d'utiliser fort est parce qu'il a une signification supplémentaire. Mais vous pourriez être maintenant, genre, quoi, quel genre de sens supplémentaire ? Ça ne veut rien dire pour toi, non ? Parce que, hé, ce truc boules, ces grosses boules de la même chose, pourquoi même s'embêter ? Eh bien, ce sens n'est pas pour l'utilisateur. Cette signification est pour les appareils, pour les programmes, pour les robots comme le robot Google qui visite votre site Web et analyse le texte que vous avez fourni à l'utilisateur. D' accord. Alors ça pourrait être quelque chose d'utile, non ? Oui, parce que lorsque vous, par exemple, faites ces choses en utilisant la balise forte et par exemple, quand quelqu'un est aveugle et qu'il a un bon appareil qui le lit pour lui, Cela sera accentué, par exemple, il sera lu, lire différemment. Avant de le faire, assurez-vous de lire le manuel d'instructions à droite. Au lieu d'avant de le faire, assurez-vous que vous lisez le manuel d'instructions, ok, Vous pouvez devenir important. Eh bien, pour être honnête, Ce n'est pas demander qui décide comment il va être rouge parce que c'est pour les gars qui créent des programmes que nous allons lire votre texte droit cul. Ça, Maximus, appelez vos textes importants. Et aussi throng est utilisé pour montrer l'utilisateur qui lit votre site Web. Mort. Cette partie des textes est importante quand il lit une sorte de partie du code de textes et il voit ça, ok, c'est important. Et pourquoi est-il important de faire de telles choses ? Eh bien, quand quelqu'un a un texte qui n'a pas de formatage comme celui-ci, il quittera votre site, vérifiera. S' il dit que certaines choses sont en gras, cela lui permettra de sauter dans vos textes d'un endroit à l'autre, plus facile. Il saura ce qui est important pour vous, non ? Parce que vous pouvez dire, Hey, c'est important et vos textes seront plus intéressants à cause de cela. Et cela a une influence sur l'augmentation de votre position dans le classement Google. Pourquoi est-ce ainsi ? Parce que quand quelqu'un ne quitte pas votre site Web instantanément, quand quelqu'un reste bien sur votre site Web, site pendant longtemps, Gooten peut le savoir et ils sauront que, hé, c'est un site assez cool, non ? Et la deuxième chose est cette remarque qu'il y a beaucoup de sites qui n'utilisent pas le formatage correctement et sombre. Eh bien, une grande compétition pour vous quand vous créez un article, n'est-ce pas ? Parce qu'un article qui Gee, que vous ne pouvez pas créer sur, par exemple, HTML peut être trouvé sur Internet sur, je sais, 100 mille pages Web. Pourquoi Google vous recommanderait ? Eh bien, peut augmenter parce que vous utilisez des packs comme ça, n'est-ce pas ? C' est l'un des nombreux facteurs qui peuvent être pris en considération, non ? Butt, hey, ces petits facteurs et chaque facteur, quand vous ajoutez un à un autre facteur, alors vous avez une plus grande chance d'apparaître dans Google pour les utilisateurs d'Internet, n'est-ce pas ? Il est donc important d'ajouter la balise forte sur votre site Web pour montrer à Google que vous savez ce que vous faites, par exemple, directement avec vos textes. Ça veut dire que tu es vraiment et une personne qui, qui veut montrer aux autres une certaine valeur de ton côté, non ? Vous ne l'avez pas fait, vous faites attention à ce que vous créez. Ce n'est pas comme si vous veniez de créer un article et que vous vouliez vendre quelque chose. Hey, j'ai fait attention à tous les endroits que j'ai créés et je sais quelle partie est importante. C' est pourquoi je vais, chaque partie importante de mon texte le rendre fort, par exemple, n'est-ce pas ? C' est pour ça que tu fais, c'est important de savoir pourquoi tu fais quelque chose. Parce que sinon tu oublies juste une valeur, n'est-ce pas ? Donc c'est une grande différence entre la lecture forte et B. Donc nous allons utiliser forte au lieu de b dans le cas où nous voulons faire quelque chose d'important. Il y a aussi quelque chose comme M, qui signifie l'accent. Cela signifie les actes et la pression et le comportement par défaut car c'est, eh bien, l'Italie. Remarquez que je peux lire ce truc comme quoi ? Disons. Je le fais comme ça. J' adore les chats et les chiens. Je ris, chats et chiens. J' adore les chats et les chiens. Ok, donc cette chose, c'est juste utile de montrer comment quelque chose devrait être rouge. Et cela est principalement utilisé par d'autres programmes, non ? Ça ne montre pas d'importance Reich la marque forte, non ? Parce que E, vous pouvez clairement voir que quand quelque chose est en gras sur votre site Web, mais quand quelque chose est utilisé comme ceux-ci quand l'accent est mis sur elle. Donc, quand le formatage du texte est intellectuellement, ce n'est pas aussi facile à repérer, non ? Mais nous montrons simplement que ces choses doivent être lues différemment. Aussi. Utilisez-le quand vous sentez que quelque chose devrait être des accents. Il met l'accent différemment. Et il y a aussi une sorte de quelque chose comme Mark. Et l'utiliser généralement pour marquer des choses qui sont intéressantes et qui méritent d'être notées. Imaginez que vous ayez un livre et un marqueur jaune. Et pensez à quelles parties de textes vous pensez vous aimeriez marquer comme intéressant pour que, vous savez, y jeter ce qui vaut la peine de répéter, n'est-ce pas ? Donc, quand quelqu'un veut répéter quelque chose de vos textes plus tard qu'il devrait être marqué. Et les textes comme ceux-ci ressemblent à ceci. À mon humble avis, devrait être utilisé uniquement dans une sorte de tutoriels où vous voulez montrer que cette partie de la définition est assez cool. D' accord ? Sinon, je ne pense pas qu'il devrait être utilisé. Pourquoi ? Parce que tout le monde peut envisager quelque chose d'autre à noter, non ? Pourquoi devriez-vous décider à ce sujet ? Donc c'est mon opinion à ce sujet. Nous avons aussi ici un exemple comme celui-ci. Css est responsable de l'apparence de votre site Web. Tu veux dire ça. Ce CSS est responsable de l'apparence. Vous êtes comme vous assurer que d'autres personnes savent que c'est important pour vous. D' accord ? Comme vous pouvez le voir, cet exemple ressemble à ceci. Donc, nous avons ici le CSS en gras. Quand je déplace ma souris, on a des informations. Ceci, c'est une feuille de style en cascade et ça signifie et ici nous avons gras les premières lettres pour, vous savez, comme montrer l'utilisateur, a fait. Ces premières lettres viennent d'ici. Il s'appelle parce qu'il est souligné que c'est important, non ? Pour, pour, pour, pour, pour, pour l'utilisateur. Et créons ça par nous-mêmes. quel point il a fait, alors enlevons-le. Et remarquez que lorsque vous voulez supprimer la balise, nous devons la couper ici et ensuite à partir d'ici. Mais nous pouvons le faire des tracés de contour plus rapides Shift plus B et juste taper attaque enlevée. Ok, compteur plus 3 plus p enlevé, il agit critique. Et maintenant faisons ce que nous avions avant. Donc tu veux mettre la marque forte dessus, non ? Parce que je pense que c'est important. Cela devrait se démarquer de tout autre texte. Css signifie Cascading Style Sheets. Eh bien, nous sommes quoi ? Nous sommes en train de définir quelque chose ici bientôt. Donc je pense que c'est une bonne idée d'utiliser le deck de définition, non ? Et c'est aussi une abréviation, non ? Donc, ce sera probablement une bonne idée d'utiliser une abréviation et de taper ici qui signifie feuilles de style en cascade. Ça, d'accord ? Et remarquez que j'avais avant d'utiliser ici la bêta. Et c'est une exception où vous pouvez utiliser la bêta parce que, eh bien, vous les utilisez juste une seule fois dans cette particule, nos textes oeil droit, vous voulez en gras les trois seules lettres. Il serait stupide de créer une sélection spéciale à l'intérieur du fichier CSS juste pour cela, ok, s'il y a une seule utilisation, suffit d'utiliser le pont de boulons. Nous n'utilisons pas la balise forte parce qu'avec la lettre unique n'est pas important, n'est-ce pas ? Donc, il y a des cas où vous pouvez utiliser la BI, vous êtes invité à agir correctement ? Mais ceux-ci sont rares. Mais c'est bon de savoir qu'ils existent comme ça. Et comme vous pouvez le voir, maintenant, ça ressemble à ça. Super. Donc, comme je l'ai dit plus tôt, vous voulez l'utiliser parce que si quelqu'un voit des textes cool, il y a moins de chance qu'ils ferment votre site Web et qu'ils passeront plus de temps dessus, ce qui a un énorme impact direct sur votre Classement Google, OK. 38. Sub vs sup: Bonjour. Parfois, dans votre article, vous voudrez imprimer. Vous voudrez monter la lettre, la lettre unique sous la ligne de toutes les autres lettres. Donc, par exemple, comme dans cette situation, à l'heure actuelle, nous avons ici H2O. Eh bien, les deux devraient être en dessous de la ligne, à droite, de toutes les lettres. Et trois ici devraient être au-dessus de la ligne, non ? Donc il devrait être au-dessus de x comme ça, petite libre elle sera ici. Comment y parvenir ? Eh bien, vous devez utiliser l'indice pour imprimer sous la ligne, ou un exposant pour imprimer une ligne plus audacieuse. Ok, alors mettons le paquet ici, le subduct, et voici celui-là. Et oui, vous pouvez voir ici nous avons en conséquence la chose que nous voulons quand quelque chose comme cette facilité utile aussi, remarquez que sur Wikipédia, quand nous, par exemple, avons ici un droit libre à cela, que ce sont des références, c'est vrai, qui sont utilisées comme ça. Inspectez-le. Comme vous pouvez le voir, ils utilisent ce savon ici, non ? Ne fais pas ça comme si c'était à l'intérieur du texte principal, n'est-ce pas ? C' est juste référencé, non ? Et quand ils cliquent dessus, ils sautent à leur référence, n'est-ce pas ? droite. Et bien, c'est un bon exercice que vous pourriez faire. Créer un article, fait quelques références en utilisant la pile SAP et aussi le type de référence h pour sauter à l'endroit où l'utilisateur veut sauter quand ils cliquent dessus. C' est seulement écouter. Merci beaucoup. 39. Texte préformaté : Preformatted code, var: Bonjour, mes amis. Il y a parfois une situation où vous voulez coller le texte à partir d'un autre endroit. Comme par exemple, vous avez un programme que vous voulez montrer aux autres et que vous voulez garder le formatage n'est pas seulement une institution comme celle-ci, où parfois vous avez, par exemple, une sorte de poème, le verset que vous voulez montrer aux autres et que vous voulez garder la mise en forme, n'est-ce pas ? Le formulaire en formatant, je veux dire, tous les indents qui sont ici, ici nous avons fait alors nous voulons garder les espaces où ils sont. Donc, quand je fais quelque chose comme ça, quand je le copie ici, vous remarquerez que, eh bien, ça n'a pas l'air aussi bon qu'il en a l'air ici. Et dans des cas comme celui-ci, vous devriez utiliser quelque chose d'or est appelé pile préformatée. Nous allons donc sélectionner ceci et taper le TAC prac. Comme vous pouvez le voir, maintenant tout est formaté comme il ressemble ici. Donc c'est une balise que vous utilisez quand vous voulez garder du texte formaté, ok ? Notez que maintenant chaque retrait est Gardé à droite, et bien, il y a trop de retrait. Qu' est-ce que j'ai fait ici ? J' utilise le raccourci qui s'appelle Shift plus Tab, ok ? Il supprime simplement chaque retrait de la sélection une fois. Nous devons donc le faire une fois de plus et une fois de plus. Comme vous pouvez le voir, maintenant c'est de retour à ça. Si vous voulez avoir un retrait ici, non ? Dans tous les endroits, vous pouvez faire confiance à nouveau type top, n'est-ce pas ? Donc, pour le faire, vous appuyez sur l'onglet. Donc Shift Plus haut est de revenir en arrière un retrait, et ici, ajouter un retrait, non ? Et c'est comme ça que vous utilisez l'avant impôt, pas ces morts. La chose que nous avons ici est en fait un code, non ? Donc, c'est une bonne idée de montrer à Google que c'est un cout. Et nous allons montrer que c'est du code en utilisant le manteau arrière. Qu' est-ce que le code ? Faire ? Vous informez Google qu'il s'agit d'un Google culturel ? Ne l'interprétez pas comme un texte, d'accord ? Maintenant, sachez des choses que vous devriez interpréter. Concentrez-vous sur d'autres parties de l'article, d'accord ? Donc cette information pour le robot pour les informer que c'est un flic. Le pré-formaté va juste changer à la façon dont les choses vont apparaître sur votre HTML. Donc, nous combinons simplement ces deux-là pour nous assurer que tout va bien. Et dans le même temps pour informer leur Google que c'est du code. Le code peut être utilisé sur des lignes simples, non ? Comme par exemple, si nous avons seulement cette partie et que nous pourrions la mettre dans le code, nous n'avons pas besoin d'utiliser le discours préformaté ici à ce sujet, n'est-ce pas ? Parce que ce n'est qu'un seul alignement, non ? Mais vous pouvez utiliser le code pour cette seule ligne. Donc c'est la différence. Et il y a aussi quelque chose que ce soit appelé le FAR. Il signifie variable et il est utilisé pour montrer qu'il y a une variable dans le texte. Remarquez que nous avons ici quelque chose comme ça. Le nombre 70, 40% de plus que le nombre C. Donc voici une variable, non ? Nous le savons en tant qu'humains, mais nous dirons que ce n'est pas une lettre comme C. Ou par exemple, comme un, non ? Parce que, eh bien, un est quelque chose qui est utilisé en anglais, non ? Appelons ça un, et Google le ferait. La bonne chose qui a fait est comme une sorte de mot mal orthographié, non ? Et la lettre de mauvaise conduite, ça ne devrait pas être après avoir entendu cet endroit, n'est-ce pas ? Donc on devrait juste les informer que, hé, cette variable, non ? Donc nous allons juste faire quelque chose comme cette variable. Et c'est variable. Notez que j'ai dû le faire deux fois pour informer Google sur les obligations de situation, il y a quelque chose comme des curseurs multiples, et nous pouvons sélectionner ces deux choses en même temps et ajouter la balise en même temps. C' est plutôt cool. Comment le faire ? Eh bien, on utilise le dehors. On tient l'écart, ok, maintenez l'Alt sur le clavier, puis faites la sélection ici et maintenez toujours l'Alt. Et nous pouvons faire deux sélections à la fois. Et maintenant on va frapper la variable Entrée, abréviation, raccourci et type. Et nous venons de taper dans les deux endroits à la fois. Plutôt cool, non ? Notez que cette lettre ici est écrit en Italie oeuf, non ? Donc, la différence entre pour le formatage, mais ils ont également informé Google que c'est variable. Je sais que tu penses peut-être, et bien, je ne veux pas perdre mon temps et des choses comme ça. Pourquoi encore plus audacieux ? Peut-être que cela améliorera la lisibilité pour les robots, mais je m'en fiche vraiment. Ok, c'est un point juste. Mais rappelez-vous qu'à l'avenir, vous apprendrez quelque chose ou ce code css et Eve, vous quatre exemples indiquent en utilisant le tac VR chaque variable de votre côté. Ainsi, lorsque vous ajoutez cette balise sur chaque variable, vous pouvez, à l'avenir, par exemple, les sélectionner toutes à la fois et changer leur apparence. Par exemple, vous pouvez les changer pour être la couleur rouge ou quelque chose comme ça. Et, ou en faire souligner certains. Mais en dessous de la lettre et les gens verraient instantanément cela. Ok, Donc c'est variable et date, humeur rendre votre code, code bien, article entier plus facile à lire l'exercice entier. Lorsque vous même des choses audacieuses comme la croûte, même en gras manuellement comme ça. Vous pouvez facilement voir, ok, Donc, nous sommes à la recherche d'un, droit, mais vous pouvez changer le comportement à quoi il ressemble, pas ici à partir du CSS que nous avons parlé avenir. C' est une autre leçon. Merci beaucoup. 40. Multicursor | Rechercher et Searching le texte dans VSC: Notez que dans la dernière conférence, nous avons collé le code comme ceci. Et certains d'entre vous ont probablement remarqué que certaines choses n'ont pas été interprétées. Comme quoi ? Eh bien, comme des choses ici. Pourquoi ? Parce que HTML pense que c'est un atack. Il ne sait pas quel type c'est. Mauvais ? Eh bien, il pense que c'est un atout, non ? Parce que nous avons ici le support d'ouverture qui ouvre l'attaque. Et le préformaté est juste quatre texte préformaté. Et ça ne veut pas dire que ça va tout interpréter comme du sexe, ok ? Il interpréterait juste les espaces blancs. Donc, par exemple, les indentations et les espaces, et ainsi de suite, n'est-ce pas ? Alors, comment résoudre ce problème ? Eh bien, nous devons utiliser les entités, non ? Le problème est que le bras et c'est de le rejouer pour que nous puissions le faire un peu plus vite. Mais faire ces bots, le rendement, c'est le printemps. Beaucoup d'entre eux à répondre. On peut le faire un peu plus vite. Comment ? Eh bien, nous pouvons utiliser le curseur multiple, toute la fonctionnalité Rechercher et remplacer du code Visual Studio qui est utilisé en premier et multi curseur. Ainsi, nous pouvons sélectionner plus d'un angle en utilisant la droite, la touche Alt sur le clavier. Donc, quand je tiens l'Alt, je peux sélectionner plus d'un endroit, comme par exemple ici, et ensuite je peux les changer en ceci. Maintenant, nous devons faire la même chose pour ces choses. Ici, je peux m'asseoir, comme vous pouvez le voir, il est sujet à des erreurs. Donc on peut le faire comme ça. C' était assez rapide, non ? Nous l'avons fait correctement maintenant tout est interprété. Correct. D' accord. Mais je ne pense pas que ce soit une bonne solution quand il y a beaucoup d'apparences du doigt, voulez-vous changer s'il y a libre ? Ok, ça va être une institution rapide comme ça. Tu pourrais même rater quelque chose, il y en a beaucoup. Alors, comment résoudre ce problème en utilisant le code Visual Studio ? On peut utiliser quelque chose comme le contrôle plus raccourci F ou le contrôle plus h. leraccourci F ou le contrôle plus h. Cela signifie trouver. C' est juste près de f. Donc c'est pour ça que c'est un raccourci comme celui-ci. Lorsque vous cliquez sur ce contrôle plus F, vous pouvez essayer de trouver des choses dans votre code, comme par exemple, ce signe. Le problème est que nous essayons, nous avons trouvé chaque occurrence de voiture de cette chose, n'est-ce pas ? Donc même dans des endroits comme ça, mauvais, on peut changer ce comportement. Donc nouveau, nous trouvons comment vous pouvez utiliser le raccourci Contrôle plus h afin de dire au spectateur doit être ou ce qui devrait être placé dans les endroits où ces doigts est utilisé. Donc nous pouvons mettre ici, il entité. Et maintenant, quand je clique sur cela, je vais remplacer tout dans mon code à mort. Comme vous pouvez le voir, c'est une chose problématique parce que nous ne voulons pas la remplacer dans des endroits comme par exemple, qui parle, qui sont redox. Donc, nous allons utiliser le tracé de contour Z pour revenir à la chose que nous avions avant. Et maintenant, vous voulez sélectionner seulement ce que le Sphinx qui sont ici seulement. Alors. Donc, nous allons le sélectionner. Et avant de cliquer dessus, je vais cliquer ici. Ici, comme vous pouvez le voir, est quelque chose comme trouver dans la sélection. Il y a aussi un raccourci. Mais je pense que c'est plus rapide de cliquer dessus. Quand je clique dessus. Comme vous pouvez le voir, nous n'avons sélectionné que les occurrences de cette parenthèse ici, n'est-ce pas ? Notez l'ensemble loin seulement dans la sélection que nous avions. Comme vous pouvez le voir, il en a trouvé 16. Et quand je clique sur ça, BAM, et c'est cool. Ça ne s'est pas rafraîchi. Rafraîchi correctement. Donc tout fonctionne bien et nous l'avons fait assez vite, plus vite que d'utiliser le curseur multimodal, non ? Parce que maintenant ce n'est qu'un clic. Mais bien sûr, vous utiliserez probablement un curseur multi plus rapide s'il y a juste libre. Les événements sont deux d'entre eux, n'est-ce pas ? Donc c'est plus rapide de juste rapidement grec et vers le bas, non ? Ensuite, en utilisant cette fonctionnalité. Mais quand il y a beaucoup d'occurrences pour les changer et que des choses comme ça sont assez utiles, n'est-ce pas ? Il y a seulement écouté. Merci beaucoup. 41. Qu'est-ce que la forme ? Principes de base des formulaires: Bonjour au NG. Aller vous dire ce qui est un 44 n'est qu'un simple document. Une sorte de feuille de papier, par exemple, dans la vie réelle, qui vous permet de collecter des données auprès de l'utilisateur, n'est-ce pas ? Document qui collecte des données. Et il le fait en utilisant les endroits à remplir qui sont des entrées froides. Donc, document qui rassemble des données en utilisant quelque chose que l'on appelle des entrées. Je suis sûr que vous avez fâché avec des formes dans votre vie, probablement quand vous avez dû entrer diverses données sur vous-même, par exemple, ou où vous deviez vous connecter sur le site, n'est-ce pas ? Il s'agit d'un formulaire, c'est un exemple de formulaire. Les autres exemples, par exemple, le contact, le haut sur les sites Web nécessite un nom d'e-mail et le contenu de l'e-mail, n'est-ce pas ? Le texte à écrire et à poster en tant que message de forum est une ferme. Ainsi, vous pouvez voir que la forme sont largement utilisés. Comment créer un formulaire ? Afin de créer le formulaire, nous tapons formulaire. Ok, donc c'est le formulaire le plus simple créé. Et maintenant, quand nous l'exécutons, vous remarquerez qu'il n'y a rien. Pourquoi en est-il ainsi parce que c'est juste un conteneur pour les entrées. Donc, pour les pensées qui vous permet de mettre à l'intérieur des choses comme les données. Ok, c'est créatif, simple côté d'entrée. Et voyons à quoi ça ressemble. Comme vous pouvez le voir, c'est un endroit où vous pouvez remplir le texte, n'est-ce pas ? Exemple de texte. Tu peux écrire ce que tu veux. Et quand je clique sur Entrée, comme vous pouvez le voir, soit actualise parce qu'il essaie de l'envoyer quelque part, mais eh bien, nous n'avons pas spécifié où. Il s'agit donc d'une entrée par défaut que vous pouvez créer dans la balise form. Appelons ça login. Parce que bien, créons un formulaire de login et mot de passe dans cette conférence. Comme vous pouvez le voir maintenant, nous avons eu la journalisation avant. Alors maintenant, l'utilisateur sait qu'il devrait lier la connexion ici, non ? Donc, c'est un endroit pour taper un login. Ok, maintenant, par exemple, demande un mot de passe, non ? Alors, comment le faire ? Eh bien, on pourrait les taper manuellement à partir de zéro ou on peut les copier comme ça. Ou nous pouvons utiliser la fonctionnalité Code Visual Studio qui vous permet de copier nous avons senti sélection d'une ligne entière où vous avez ces curseur en surbrillance. Ok, donc quand j'appuie sur le bouton Contrôle plus C maintenant, je peux juste contrôler plus V maintenant et vous faire copier la ligne entière. Assez utile, non ? Beaucoup de gens ne le savent pas, même moi n'ai pas commencé. Donc, ici, nous allons taper mot de passe maintenant. Et vous remarquerez que vous avez bien maintenant deux entrées, un login FERPA et mot de passe. Ajoutons ici la ligne lumineuse, donc ils sont dans une autre ligne. Le problème avec cela est, comme vous pouvez le voir, le, eh bien, ce n'est pas aligné correctement, mais des choses comme ça sont faites via CSS. Donc, ne vous inquiétez pas du formatage, façon dont il ressemble, des choses comme ça. Tu les as vendues à l'avenir. D' accord. Donc, voici le login, voici le mot de passe. Et bien, mettons quelque chose dans le login et mettons quelque chose dans le passeport. Comme vous pouvez le voir, tout ce que je tape ici est visible et ce n'est pas ainsi que vous devriez créer un champ de mot de passe. L' entrée. Pourquoi en est-il ainsi parce que si quelqu'un est derrière l'utilisateur derrière son dos, il peut voir son mot de passe et Hamada aimerait ça. Vous devez donc changer le type d'entrée. La chose cool à propos des entrées est que vous pouvez changer le type en utilisant le type d'attribut donné, et vous donnez une information supplémentaire concernant l'entrée en utilisant cet attribut, n'est-ce pas ? Et tu peux le changer en quoi ? Pour, par exemple, le mot de passe. Et qu'est-ce que ça change ? Comme vous pouvez le voir maintenant quand je tape des choses ici, le possible ces cachés. Donc, nous résolvons le problème. Il y a donc beaucoup, beaucoup plus d'entrées. Et comme je l'ai dit plus tôt, la valeur par défaut est le texte. Donc, quand je le change en texte et rien ne changera cette chance au texte entré champ texte que vous pouvez remplir. L' utilisateur peut remplir, n'est-ce pas ? Eh bien, faisons-le, par exemple, comme ça. Donc, il semble mieux dans notre HTML. Et bien qu'il y ait des types minimaux, mais nous les avons appris à l'avenir, ceux-ci comme une conférence de base sur la façon de créer un panneau avec login et mot de passe. D' accord. Et il y a aussi une autre chose que vous pourriez vous demander, non, nous avions de bonnes données maintenant, mais que faisons-nous de ces données ? Des choses comme ça, nous allons résoudre dans les prochaines conférences. Il n'y a qu'une leçon. Merci beaucoup. 42. Formulation de Submitting un formulaire: Bonjour mon ami. Nous avons créé un quatre, mais nous ne pouvons pas le soumettre, nous ne pouvons pas l'envoyer, n'est-ce pas ? Donc, ce formulaire est moins utilisé pour le changer. Nous pouvons créer un bouton que nous autorisons à soumettre tout le contenu comme celui-ci. Alors, comment le faire ? Eh bien, nous pouvons choisir parmi l'émission, la soumission. Et comme vous pouvez le voir, alors nous avons une entrée que le type est un peu, et il vous permet de cliquer dessus. Comme vous pouvez le voir ici est ce bouton. Et par défaut, il n'a plus de texte car il y a aussi un attribut qui définit la valeur à rire à stat. Comme vous pouvez le voir, la valeur par défaut est choeur sous-bande. Je pense que c'est une très mauvaise valeur en tant que valeur par défaut. C' est pourquoi l'émission vous dit de le changer à quoi que ce soit d'autre. Donc, dans notre situation, je pense qu'il serait préférable de l'appeler journalisation, verrouiller, peut-être avec l'espace ici comme ça, non ? Nous avons bon maintenant bouton ici que nous pouvons cliquer. Et comme vous pouvez le voir lorsque nous cliquons dessus, rien ne change. Ok, mais où nous pouvons cliquer et quelque chose se rafraîchit dans l'exécution de burg. Donc, nous essayons d'envoyer quelque chose, mais nous n'avons pas spécifié comment envoyer l'événement, où l'envoyer. Et qu'est-ce qu'on a envoyé ? Faisons ici une cellule BreakLine. Ça ressemble mieux à ça, non ? Et maintenant, nous allons spécifier où envoyer des informations comme celle-ci. Nous faisons une telle chose en utilisant l'attribut action sur la balise formulaire. Il dit que nous devrions fournir ici le fichier ou le chemin d'accès au fichier que nous traitons ces informations. Alors imaginez que vous avez obtenu votre serveur quelque chose comme le point de connexion de processus PHP, n'est-ce pas ? Pourquoi PHP ? Parce que, eh bien, vous devez malheureusement faire telles choses dans les langages côté serveur comme PHP ou Python, n'est-ce pas ? Vous devez donc envoyer vos valeurs au langage de programmation qui le traitera. Donc, malheureusement, oui, vous pouvez le faire en utilisant HTML. Rappelez-vous que HTML est uniquement responsable de la façon dont les choses sont représentées sur votre site Web. Donc, pour le contenu de votre site Web, CSS est responsable de le rendre meilleur. Mais vous devez aussi savoir, par exemple, PHP pour savoir comment traiter les choses. Mais encore, vous devez d'abord apprendre à créer des forums, n'est-ce pas ? Donc ces choses que je vous dirais sont assez utiles. Donc, cette action dit que nous allons envoyer le contenu d'ici à ce phi. Et pour le traiter, vous devez savoir, par exemple, PHP, non ? Mais n'arrêtez pas cette conférence parce que c'est important, même si vous ne connaissez pas le pH étant une personne qui connaît HTML et CSS parce que parfois vous n'avez pas besoin de connaître d'autres langages comme PHP parce que bien, peut-être que vous n'êtes responsable que de HTML et quelqu'un d'autre va le traiter, alors vous devez toujours savoir comment envoyer ces correctement parce que cela ne se termine pas ici. Ecoutez, quand je clique sur Login maintenant, nous sommes envoyés à ce point de journalisation de processus PHP. Et voici un point d'interrogation. Et après ce point d'interrogation, nous devrions avoir des valeurs d'ici. Mais nous ne le faisons pas. Pourquoi en est-il ainsi parce que nous n'avons pas nommé l'entrée, vous devez toujours nommer l'entrée. Sinon, l'ordinateur ne saura pas quelle entrée va envoyer laquelle est qui, parce que, eh bien, nous tapons ici la journalisation, mais ce n'est parce que, eh bien, nous tapons ici la journalisation, pas à l'intérieur de cette balise, n'est-ce pas ? Donc, nous devons le nommer. Et appelons-le la journalisation par exemple. Et ici appelons-le, par exemple, eh bien, mot de passe ou nous pouvons l'appeler PW. Je pense que nous allons l'appeler w, Donc, nous ne sommes pas confus en ayant mot de passe temps libre. Tu peux l'appeler comme tu veux, non ? Mais il devrait être un nom auto-descriptif. Donc, quand vous regardez dedans, vous savez que Ok, ici est possible. Et qu'est-ce qui change maintenant ? Maintenant, quand je tape quelque chose et je clique sur connexion, comme vous pouvez le voir, la première chose est que Firefox, remarquez que nous avons tapé le mot de passe est parce que nous utilisons le mot de passe de type d'entrée et il sait qu'il y a un mot de passe, non ? Donc nous ne pouvons pas nous rendre visite. La deuxième chose est qu'ici, après le point d'interrogation, nous avons quelque chose de bon comme la journalisation que nous tapons ici. Et la valeur que j'ai tapée juste après, nous avons un bon signe qui est utilisé pour connecter plus d'un nom comme celui-ci. Et là, nous avons BW, n'est-ce pas ? La chose que nous tapons ici et la valeur pour cela. Donc PHP nulls maintenant qu'ici est caché la valeur pour ceux-ci et ici, voici la valeur cachée pour ceux-ci. Et l'ETE peut faire ce que vous voulez avec elle. Vous pouvez changer la base de données que s'il y a une connexion comme le, le, le PW est connecté à cette connexion et ainsi de suite. Mais il y a un petit problème que nous avons fait ici, nous utilisons la méthode par défaut, qui est get, qui envoie des valeurs comme celle-ci. À l'intérieur du lien. Le problème est que ce n'est pas sûr, sûr, non ? Et quelqu'un l'a copié et l'a envoyé à différer la main, il pouvait voir le mot de passe de quelqu'un. Donc, pour des situations comme celles-ci, n'utilisez jamais la getMethod, utilisez le post, qui, comme vous pouvez le voir maintenant, quand je fais quelque chose comme ça, il envoie toujours tout au processus qui se connecte point PHP, mais ce n'est pas visible ici. C' est en arrière-plan en ce moment. C' est peut être interprété, alors ne faites pas la guerre, n'est-ce pas ? Donc, vous devriez envoyer en utilisant cette méthode. Notez également que le problème avec l'envoi cette façon est que nous sommes envoyés à un autre site Web. On pourrait nous envoyer le même site. Mais le problème est qu'il y a toujours un rechargement du site Web. Si vous voulez envoyer des choses dans des arrière-plans ou que quelqu'un ne le verra pas, vous devez apprendre la ligne JavaScript et vous devez atterrir l'ajax ou quelque chose. Maintenant que nous devons utiliser cette fonctionnalité qui vous permet d'envoyer des choses en arrière-plan, ok ? Ensuite, vous n'avez pas besoin de le spécifier. Vous n'avez qu'à attraper des choses, puis les envoyer en arrière-plan en utilisant le JavaScript et cette fonctionnalité. Donc c'est peut-être encore mieux, non ? Mais quand même, en tant que personne qui apprend le HTML, vous devez vous rappeler de nommer chaque entrée, ok ? Et bien sûr, faire un type d'entrée soumettre qui permet à quelqu'un de cliquer dessus et d'envoyer des choses. Lentilles. Il a moins que Merci beaucoup. 43. Entrée de type radio: Bonjour, mes amis. Aujourd'hui, je vais vous apprendre à utiliser et quand utiliser l'entrée radio, comment le créer ? Eh bien, nous utilisons l'entrée et nous pouvons utiliser l'Emmett et créé en utilisant ce type de radio, comme vous pouvez le voir ici, nous avons deux attributs supplémentaires. On y va. Maintenant, parlez de bientôt. Alors, comment ça ressemble ? Comme vous pouvez le voir, c'est un point sur lequel vous pouvez cliquer. Donc c'est quelque chose que tu peux choisir, non ? Si on en crée plus, tu as trois points, non ? Et à côté de ces points, vous pouvez taper, par exemple, le type de levier, non ? Vous pouvez demander aux gens quel type de livraison ils veulent avoir sur votre boutique, par exemple, s'ils veulent utiliser la carrière de PCI, veulent récupérer à partir d' un moment donné ou peut-être que frais de casse-tête consommeraient moins cher et ainsi de suite, droit ? L' onglet Corée et ainsi de suite. Donc, vous pouvez l'utiliser dans les magasins. Donc, par exemple, disons ici que la Corée, voici un point culminant et voici un bureau de pouls. Droit ? Maintenant, on a quoi ? Texte à côté de chaque bouton, comme celui-ci, à côté de chaque type de radio, n'est-ce pas ? Le problème est que lorsque je clique sur l'un d'eux, nous pouvons tous les choisir à la fois. Et ce n'est pas ce que nous voulons faire, n'est-ce pas ? Quand quelqu'un va apparaître sur votre site, il peut, il devrait être en mesure de choisir un seul type de levier arrivé. Il peut choisir carrière et choisir. Je pointe en même temps chez papa quand vous devriez utiliser des entrées radio. Mais pour les faire fonctionner comme ça, vous devez indiquer quelles entrées radio sont regroupées ensemble. Ok, donc c'est là que tu devrais créer quelque chose. Qu' est-ce qu'on appelle ça ? L' attribut name, et vous devez avoir tous ces noms définis sur la même valeur. Ainsi, par exemple, le type de livraison comme celui-ci. Notez que lorsque je crée des types de livraison, je n'utilise pas d'espaces ici, n'est-ce pas ? Donc je ne fais pas quelque chose comme ça. J' utilise le trait de soulignement quand je fais un autre prix comme une valeur à l'intérieur de ce nom, non ? Ou vous pourriez faire quelque chose comme ça, mais jamais utiliser d'espaces. Ok, donc maintenant j'ai dit à mon frère que c'est un groupe de boutons radio, non ? Donc nous allons maintenant quand je clique sur Lang d'eux, les autres ne sont pas vérifiés RMN, non ? Et c'est ce que nous voulons réaliser. Nous pouvons donc vous demander, par exemple, quel type de livraison voulez-vous choisir ? Ecris, quelque chose comme ça, ok, pour que je puisse choisir ça, ça ou ça. On pourrait le faire un peu, mais ils cherchent en ajoutant des points d'arrêt, non ? Comme ça. Et comme vous pouvez le voir, ça a l'air mieux. Il y a encore un problème. Notez que je ne peux pas cliquer sur les textes et je pense que ce n'est pas bon pour le bien de votre site Web parce que cette plupart des gens qui juste cliquez sur le texte à côté de ces boutons, n'est-ce pas ? Afin de le faire fonctionner, vous devez connecter en quelque sorte ce texte avec cette entrée spécifique, n'est-ce pas ? Et pour le faire, vous devez utiliser une balise appelée label. Donc, nous disons que cette chose est une étiquette pour, et ici nous spécifions pour quoi. Le problème, c'est que nous n'avons rien à voir dans cette entrée, n'est-ce pas ? Toute cette entrée ressemble à la même. Alors, comment pouvons-nous dire que ces étiquettes sont pour cette entrée ? Pour le faire, nous devons créer l'attribut ID et le rendre unique. On peut mettre ici n'importe quoi, n'est-ce pas ? Donc, par exemple, comme ça. Et maintenant, quand je clique dessus et que je peux y aller en cliquant dessus, ici, ça ne marche pas, non ? Mais ici, je peux aller sur des textes et ça marche bien. Mais, vous savez, taper n'est pas une bonne idée parce que ce n'est pas à quoi votre code devrait ressembler, n'est-ce pas ? Donc, je suggère juste de taper ici aussi la même chose qui est dans le nom, mais ici un nombre comme par exemple, livrer un type 1, non ? Comme ça. Ok, donc on a besoin de plus de ça. Donc, copions ceci comme vous utilisez l'Alt. Et copions ça ici, comme ça. Sélectionnons ceci et en utilisant la réponse comme celle-ci en même temps. Et créons des étiquettes. Et copions ça ici. En ce qui concerne ces raccourcis font une frappe et tout en créant le bit de code plus rapide. Donc, nous avons ceci et maintenant nous pouvons créer sur clic sur des textes et tout fonctionne bien. Mais malheureusement, il n'est pas tout regardé bien et de créer une entrée qui est le livre de soumission. Et nous, par exemple, disons ici sable et bien, mettons-le dans la forme droite ? Et l'action avec un B par exemple, former ce PHP. Notez que lorsque je clique sur Poste et merci cliquez sur Envoyer, nous avons ici quelque chose comme le type de livraison sur le grade lorsque je tape ne cliquera pas sur cool ici nous avons le type de livraison sur. Est-ce que ça aide quelque chose ? On sait juste que le levier à retaper a été choisi ? Et il y a tout, on ne sait pas quel type de carrière a été choisi, non ? Celui-ci, celui-là ou peut-être x1. Et c'est assez important, non ? Parce que nous ne pouvons pas traiter ces informations. Afin de pouvoir traiter ces informations, nous devons montrer quand définir quelque chose comme violet à nouveau. Et bien, on peut les appeler comme ça, non ? Parce que c'est une caldeira comme la même longueur était ici. Et nous devons répéter cela aussi dans ces endroits. Donc, c'est pic up Dash bond. Rappelez-vous que je n'utilise pas cette base ici, non ? Dash Point et le bureau de poste comme ça. Et maintenant pas si mort quand je, par exemple, choisis le point de pick-up dans un sable. Maintenant, nous savons que le type de livraison est égal à choisir un point et je peux le traiter correctement ? Je peux maintenant montrer que le gars pointe vers l'utilisateur, ou je peux dire d'attribuer les prix et ainsi de suite, non ? Donc maintenant, ça fonctionne bien. Donc, comme vous pouvez le voir, nous devons DIBL plein de choses ici afin de le faire fonctionner correctement. Nous pouvons encore améliorer tout cela en mettant tout dans quelque chose qu'on appelle un ensemble de champs. Comme vous pouvez le voir, maintenant, nous avons une sorte de frontière autour de toutes ces choses ici. Et de cette façon, nous pouvons dire que c'est à propos de cette chose spécifique, non ? Ça, ce groupe. Maintenant, quand nous en avons plus, nous avions plus de choses à choisir. Comme vous pouvez le voir, vous pouvez clairement distinguer cela pour ceux formés de ceux-ci, non ? Eh bien, ce jeu de terrain, n'est-ce pas ? Ce groupe de choses, pas parce que nous avons tout obtenu sous une forme unique. C' est pour ça que je me sens triste. C'est plutôt cool. Et nous avons aussi quelque chose qu'on appelle une légende. Et regardez, je n'ai pas besoin d'utiliser le cambriolage. Dan, et je peux faire quelque chose comme ça. Et comme vous pouvez le voir, ce texte est entré dans la frontière. Ça a l'air encore mieux en ce moment. Donc, c'est utilisé pour cette chose. Dans la prochaine conférence, nous allons parler de case à cocher, comment les utiliser et comment les faire correctement pour qu'ils puissent être utilisables. Lorsque vous traitez le contenu plus tard dans la leçon. Merci. 44. Casses: Bonjour, mon ami. Aujourd'hui, vous allez parler de cases à cocher. Eh bien, créons un autre jeu de champs et utilisons l'entrée qui est appelée case à cocher. Donc, le type est case à cocher. Comment ressemble-t-il ? Comme vous pouvez le voir, nous avons ici une case que nous pouvons vérifier et nous pouvons également la décocher. Donc la différence entre ceci et ce qu'ils évoluent ici, c'est cette radio. Quand vous choisissez une des choses ici, comme vous pouvez le voir, je ne peux pas la choisir. Je dois choisir au moins une des options ici. Je peux vérifier et je peux le décocher. Ok, cette grande différence. Et aussi quand vous créez beaucoup de cases à cocher ligne, alors vous pouvez choisir Mad Men d'entre eux à la fois, n'est-ce pas ? Donc, vous pouvez utiliser ces quatre situations comme celles-ci, par exemple, quel est votre passe-temps, n'est-ce pas ? Quelqu' un peut avoir plus d'un saut, non ? Par exemple, quelqu'un aime nager. Il aime les jeux vidéo, et il aime, par exemple, la programmation, non ? Et bien, il pourrait vouloir choisir toutes ces options parce que c'est toutes ses copies, non ? C' est alors que vous utilisez les cases à cocher car ici vous devez en choisir une et vous devez en choisir une. Peut-être que quelqu'un n'aime pas tout ça, non ? Et ce n'est pas le passe-temps, donc il n'a pas besoin de choisir quoi que ce soit. Droit. C' est alors que vous utilisez la case à cocher. Quand pouvez-vous utiliser des chèques ? Aussi, disons que vous demandez à quelqu'un quelque chose comme, voulez-vous émettre une facture, par exemple ? Et il peut alors vérifier et voir s'il y a quelque chose comme ça. Et il montrera le formulaire pour mettre les données concernant la facture, n'est-ce pas ? Si la personne la décoche, les données disparaîtront. Okay, maintenant concentrons-nous sur, bien, faire cette chose ici correctement parce que remarquez que, eh bien, nous devrions mettre l'entrée ici d'abord, parce que c'est entrée pour tout ce qui est comme 14 pneus loin. Et créons des étiquettes, n'est-ce pas ? Quatre. Donc, nous allons créer un label qui sera quatre, rendra moins reconnaissant pour toutes ces choses que les vins. Donc étiquette pour et pour la natation. Ici, nous jeux vidéo et la programmation. Maintenant, quand je clique sur le texte à côté, comme vous pouvez le voir, je peux le choisir. Alors maintenant nous allons nous concentrer sur le nom parce que bien, quand envoyer des données et en quelque sorte les analyser plus tard, n'est-ce pas ? Eh bien, pas demander. Mais peut-être quelqu'un, c'est pour ça qu'on doit savoir comment le nommer correctement. Parce que maintenant, quand je l'envoie, comme vous pouvez le voir, eh bien, livrer le type est ici partie et notre espoir ne l'est pas. Alors comment peut-on l'appeler ? Il y a deux façons d'envoyer des cases à cocher. Eh bien, la première façon est de le nommer comme les identifiants. Notez que lorsque je choisis, par exemple, la programmation et les jeux vidéo. Maintenant, vous voyez que les jeux vidéo sont allumés, la programmation est activée. Maintenant, quelqu'un sur le serveur peut rechercher des choses qui vont bien. S' ils sont allumés, ça veut dire que quelqu'un l'a vérifié, non ? Cependant, bien, analyser quelque chose comme ça n'est pas toujours facile. D' accord. On y va, tu dois savoir exactement quel genre de noms sont là, ok ? Croyez-moi juste que ça rend les choses un peu bizarres et sur la partie données, ok, vous voulez le côté serveur. Donc, Maasai et les gens appellent tout de même comme par exemple, dans ce cas comment BIM. Mais il y a maintenant un problème. Et j'ai eu, quand je clique sur Envoyer, comme vous pouvez le voir, Hobbes et Hobbes sur ça. Nous ne savons pas quelle zone de copie. C' est pourquoi nous devons maintenant créer de la valeur pour chaque guide. Donc, nous devons faire quelque chose d'idées. Donc, pour la natation des jeux vidéo et la programmation. Et maintenant, quand je choisis les gains vidéo dans la programmation, nous pouvons voir ici les jeux vidéo Hobbes et la programmation Hobbes. Et maintenant du côté serveur, nous pouvons juste chercher le HobbyName. Et nous savons que le jeu vidéo et la programmation pour votre échantillon ont été choisis. Cependant, vous devez savoir. Il est bon de savoir où les langages sonores ne pourront pas l'analyser correctement. Si vous n'ajoutez pas de crochets ici, d'accord ? Donc, soit vous utilisez le même nom, rappelez-vous que vous pourriez avoir besoin, ne signifie pas que toujours besoin d'ajouter ces crochets ici. Donc, ce serait comme sur le serveur maintenant, variable ligand Guan. Donc, ce serait une sorte de RA, les valeurs comme celle-ci. Ne vous inquiétez pas si vous ne comprenez pas maintenant parce que vous devriez vous concentrer sur HTML, ok, sur la création de choses comme comment présenter les données, ok ? Mais vous avez juste besoin d'avoir à l'esprit, peut-être un jour quand vous voulez traiter ces données, quand vous allez apprendre le PHP, par exemple, JavaScript. Peut-être que vous avez besoin d'ajouter cela, pas toujours. Peut-être que vous pourriez avoir besoin de l'ajouter, non ? C' est ainsi que vous ajoutez la case à cocher et que vous le faites de cette façon afin que d'autres puissent traiter les données qui ne peuvent pas être envoyées. Ce n'est que la leçon. Merci beaucoup. 45. Attributs les plus fréquemment utilisés dans les formulaires: Bonjour, mes amis. Aujourd'hui, comment vous apprendrez les attributs les plus fréquemment utilisés dans les formulaires d'entrée ? Concentrons-nous sur le vérifié. Notez que lorsque nous sommes ici, nous demandons à quelqu'un quel type de Delhi voulez-vous vraiment choisir ? Et toujours dans des cas comme ceux-ci, nous devrions choisir quelque chose par défaut. Nous devrions vérifier quelque chose par défaut. Pourquoi est-ce ainsi ? Parce qu'imaginez la forme où les gens sont là des choses. Cette forme est assez longue. Et par défaut, par exemple, la plupart des gens choisiront la carrière, n'est-ce pas ? Et sur la base de ça, tu peux montrer autre chose, non ? Si quelqu'un choisit le cochon que je pointe, tu peux lui montrer autre chose. Donc, nous devrions choisir une option par défaut afin qu'il n'ait pas besoin de cliquer dessus ici. Vous pourrez le changer plus tard, ne vous inquiétez pas. Nous pouvons par défaut définir par exemple ici, coché. Donc maintenant, comme vous pouvez le voir, première chose est de vérifier quand je rafraîchis la page. Toujours distinct par défaut est défini, mais bien sûr, nous pouvons changer le à autre chose plus tard, non ? Mais par défaut, nous l'avons réglé sur Kourion. Dans une telle situation, c'est une bonne idée. Mais dans une situation comme Quel est votre passe-temps ? C' est toujours une fosse, non ? Parce que ce qu'on peut faire en utilisant quelque chose comme ça. Mais le problème est que pourquoi choisirons-nous le passe-temps de quelqu'un, n'est-ce pas ? C' est le jour Hub ne soit pas le nôtre. On ne devrait pas le faire. Mais au cas où je vois comme, quel type de livraison voulez-vous choisir ? C' est une bonne idée d'en maximiser l'un aussi. Parce que la plupart du temps, vous choisiriez Courier de toute façon, par exemple, n'est-ce pas ? D'accord. Donc c'est un, utilisez le vérifié. Vous remarquerez probablement que, eh bien, il n'y a pas de valeur pour cet attribut. Comment est-ce possible ? Parce qu'il y a certains attributs que le volume est le même que le nom de l'attribut, comme ceux-ci, coché est égal à vérifié. Et pour être honnête, est-ce assez autodescriptif ? Quand tu le regardes ? Il suffit quand vous voyez que nous venons d'ajouter ces attributs. Et tu n'as pas besoin de mettre ça ici, d'accord ? Navigateurs, nous savons que quand vous le mettez comme ça, C'est vous comme ajouté ce lien ici. D' accord ? Maintenant, quelques autres attributs comme celui-ci dont nous avons parlé. Donc, comme par exemple, requis. Qu' est-ce que ça fait ? Eh bien, imaginez que vous créez une entrée, texte de type entrée. Et vous demandez à quelqu'un le numéro de rue, le numéro de rue, non ? Et par exemple, le nom de la rue comme ça. Et croyez-moi, quand les gens tapent ici le nom de la rue, peu importe, ils ont tendance à oublier de mettre le numéro de rue et plus tard, choses comme ça causent des problèmes parce que quand quelqu'un commande et qu'il paie pour ça, vous devez appeler le gars et Demandez-lui le numéro de rue parce que vous ne pouvez pas lui envoyer une livraison, non ? Parce que tu ne sais pas où envoyer. C' est pourquoi des entrées comme ça devraient être nécessaires, non ? Nous devons ajouter l'attribut requis. Et qu'est-ce que cela change lorsque je clique sur le bouton Envoyer ? Comme vous pouvez le voir, nous avons q maintenant un message, s'il vous plaît remplir ce champ. Plutôt cool, non ? Si on l'enlève. Pour que vous puissiez voir, on peut juste aller envoyer l'ordre, n'est-ce pas ? Cependant, avec elle, nous ne pouvons pas le faire à moins de mettre quelque chose. Q. Donc, c'est assez cool, je pense, de mettre ici nécessaire dans des cas comme celui-ci. La prochaine chose est l'autofocus. point automatique, comme son nom l'indique, se concentre sur l'une des entrées. Quand quelqu'un fait référence au patch. Quelque chose comme ça, c'est Yoast, disons que vous créez un jeu et que vous demandez à une personne, l'utilisateur, de taper combien d'unités, de chevaux, par exemple, il veut acheter, non ? Et vous créez l'entrée pour ce live en harmonie chevaux unité, non ? Et il a besoin de marcher, il doit cliquer dessus pour mettre le numéro ici, non ? Ce n'est pas cool quand il fait ces choses. Par exemple. Chaque fois qu'il vient à ces calmes, c'est vrai, il veut acheter des chevaux. Donc il clique, par exemple, sur le lien Chevaux d'or ou Ebola d'Etat, quelque chose comme ça, non ? Et il clique dessus et il veut acheter des chevaux. Et pourquoi a-t-il besoin de cliquer dessus ? Encore ? Ça prend juste du temps. Vous pouvez vous rappeler et faire quelque chose comme cette mise au point automatique. Et maintenant, quand je rafraîchis cette page, quand je fais quelque chose sur cette page, n'est-ce pas ? Et je le rafraîchis, toujours l'accent ici, non ? Vous pouvez voir qu'il est mis en surbrillance et vous pouvez taper le numéro ici. C' est alors que vous utilisez l'autofocus. Vous voulez mettre l'accent sur l'une des entrées instantanément et vous aider les autres à sentir la forme. Je pense que c'est plutôt cool. La prochaine chose est la taille et la longueur maximale. Remarquez la tête en ce moment, quand nous demandons combien vous avez besoin que quelqu'un veut acheter, nous pouvons mettre ici grand nombre, c'est la première chose et la taille de ces juste pour vk. Nous pouvons donc le changer en ajoutant l'attribut size. Et nous pouvons, par exemple, taper leur formulaire. Et ça peut voir que c'est plus petit nombre, tu peux en mettre deux, c'est encore plus petit, non ? Donc, cela définit simplement la taille de l'entrée. Mais on peut encore mettre un grand nombre ici. Vous pouvez limiter ce nombre en utilisant quelque chose appelé est appelé maxlength. Et comme, comme son nom l'indique, vous mettez ici combien de lettres peuvent être mises dans l'entrée. Donc si je dis un, comme vous pouvez le voir maintenant, je ne peux pas en mettre plus, pas vrai ? Je peux mettre n'importe quel numéro ici. Mais je ne peux pas ou une dernière partie, je ne peux pas en mettre plus. Vous pensez peut-être, d'accord, mais pourquoi il peut mettre les lettres correctement, parce que c'est M, saisie de texte. Si vous voulez valider, si certaines choses qui sont mises ici, comme vous voulez avoir seulement des nombres ici que vous devez utiliser pour le JavaScript de la dette et plus tard, ce sera également une bonne idée d'utiliser une programmation côté serveur comme PHP, parce que bien, choses comme ça peuvent être trichées assez facilement, ok, les gens peuvent taper des choses ici même en utilisant l'inspecteur, donc vous ne pouvez pas croire toutes les informations qui viennent d'ici. Mauvais. Eh bien, pour certains utilisateurs de base, des choses comme ça sont plutôt cool, non ? Il est dit, ils savent maintenant qu'ils peuvent inscrire les chiffres de un à neuf. Et bien, il y a quelque chose qui s'appelle le porte-place satellite où vous pouvez suggérer, par exemple, disons , hey, sommes-nous mis ici 129, autoriser les numéros 1, 2, maintenant, neuf, seulement. Maintenant, comme vous pouvez le voir, nous avons ici les textes de classe 12, 9, et quand je mets le numéro, il disparaît. Donc c'est juste une suggestion de ce qui peut être mis ici ? Et pensez que c'est assez froid dans des cas comme par exemple aussi ici. Donc, je peux, par exemple, créer un espace réservé. Et par exemple, c'est nécessaire, non ? Et il ne fait rien, ok, ceux-ci exigeant qu'il mette le numéro de rue, mais n'en faites pas trop parce que l'espace réservé est peut-être appelé. Mais imaginons que vous créez un mot de passe. Créons des lignes de rupture parce que ça ne semble pas bien en ce moment. Comme ça. Créons un mot de passe. Donc dans le mot de passe du port. Et comme vous pouvez le voir ici, nous avons un mot de passe. Et imaginons que nous mettons en place le support chose glisser un laters, deux signes, majuscules. Trois fois. Partout dans le monde. Vous avez mis ici une sorte d'exigence sur la façon dont cela devrait ressembler et quand quelqu'un le regarde. Ok, donc je peux mettre huit lettres et la chaleur commence à taper et il est genre, combien de lettres était-ce ? Combien devraient être en majuscules ? Combien de signes à travers cette utilisation comme le point d'exclamation ou ainsi de suite, non ? C' est un endroit où les échecs américains pensent comme ça, ok ? Mais n'en faites pas trop quand il y a beaucoup de Fink à écrire. Ne le mets pas à l'endroit appelé les lectures. Mieux vaut le dire comme ça. Ou par exemple, plus tard, vous apprendrez que vous pouvez, par exemple. La souris sur quelque chose et vous pouvez créer une info-bulle où vous pouvez montrer à la personne à quel point cela devrait ressembler, ok, c'est mieux que d'utiliser l'espace réservé dans le cas comme ceci. Et vous avez quelque chose, ce qu'on appelle la valeur est la valeur par défaut pour quelque chose. Eh bien, dans des cas comme ceux-ci avant de l'utiliser pour définir le type de livraison à une valeur que ceux-ci envoyés au serveur plus tard, puis traiter l'écriture. La valeur ici va être visible par l'utilisateur comme valeur par défaut. Donc, par exemple, numéro de rue, Disons que nous avons une bonne valeur 92, d'accord ? Et maintenant, comme vous pouvez le voir, nous avons ici 92 comme valeur par défaut. Ce n'est pas une place. Donc quand je tape quelque chose ici, ça ne disparaît pas ? Ici, il disparaît, mais ici ce n'est pas le cas. Donc je dois le faire. Et vous vous demandez peut-être quand quelque chose comme ça est utilisé dans les cas de textes. Imaginons que vous créez un côté où les gens peuvent créer un compte, n'est-ce pas ? Et ils ont mis une sorte de données comme le numéro de rue, où ils laissent quel est leur nom et ainsi de suite. Et maintenant, imaginez que vous avez un top où vous permettez aux gens de changer leurs données, n'est-ce pas ? Et quand ils vont dans cet onglet, ils peuvent voir un formulaire avec de nombreuses entrées où ils peuvent changer les valeurs, comme le mot qu'ils laissent et ainsi de suite. Et dans le cas comme ça, je pense que c'est une bonne idée de mettre par défaut ce qu'ils avaient écrit avant, non ? Peut-être qu'ils ne veulent pas changer chaque entrée, n'est-ce pas ? Ils ne veulent pas changer toutes les données à leur sujet. Peut-être qu'ils veulent changer sur LET le numéro de téléphone par exemple. Donc, ils ne changeront que le numéro de téléphone par d'autres choses devraient être, vous savez, déjà tapé là. Donc, les valeurs par défaut doivent être définies ici. Et par là. Donc ils ne perdent pas le temps précieux, n'est-ce pas ? Parce qu'ils devront tout retaper à partir de zéro pour changer une seule chose, n'est-ce pas ? C' est donc une bonne idée de faire une telle chose pour que la vie soit meilleure. Ce sont donc les attributs les plus importants qui, à mon avis, sont importants, mais il y en a beaucoup d'autres. Vous pouvez aller sur le côté Mozilla Developer, puis aller dans les éléments HTML référence à l'entrée. Comme vous pouvez le voir, il y a beaucoup plus sont aussi des types d'entrées. Vous pouvez voir les exemples ici, mais il y a aussi beaucoup d'attributs et avec une brève description. Cependant, je vous ai montré la plus importante. C' est juste plein de temps pour apprendre tous les attributs possibles, si vous n'utiliserez probablement jamais certains d'entre eux dans votre vie, n'est-ce pas ? Si vous en avez besoin, alors vous les trouverez sur Laura assez vite parce que vous avez acheté le pape tenant cette étiquette dans le Google. Une question et vous allez entrer dans ce drapeau sur site de workflow et vous trouverez la réponse ici assez rapidement. Par exemple, comme ça. Mais certaines choses ne sont pas seulement liées à la façon dont a fait la guerre, mais quand devriez-vous les utiliser ? Et c'est là qu'il est bon d'avoir des voitures vidéo comme celle-ci, pour voir quand utiliser les choses. Parce que si vous, par exemple, faites trop l'espace réservé, vos formulaires ne seront pas du charbon, n'est-ce pas ? Ce n'est que cette leçon. Merci beaucoup. 46. EXERCICE : Comment créer un formulaire de contact sur votre site ?: Bonjour mes amis, c'est l'heure de la pratique. Je veux que vous créez un formulaire de contact sur votre site Web parce que bien, chaque site devrait avoir quelque chose comme ça. Vous devriez permettre à l'utilisateur de votre site de contacter avec vous, sinon, vous risquez de ne pas avoir l'air crédible. D' accord ? Donc, pour le faire, vous allez maintenant utiliser quelques entrées. Et aussi quelque chose comme ça ici dont nous n'avons pas encore parlé. Si cette chose est appelée zone de texte, vous pouvez lire à ce sujet. Google. Et c'est aussi votre exercice parce que parfois vous ne savez pas tout, Croyez-moi, ok, alors lisez à ce sujet ou même quand vous tapez quelque chose. Mais au lieu de cela, il y a des informations sur des choses comme ça. Ici aussi, regardez et vous pouvez cliquer dessus. Ne vous inquiétez pas, vous pouvez lire à ce sujet, n'est-ce pas ? Bien sûr, nous le ferons. C' est aussi dans cette conférence. Ne vous inquiétez pas si vous ne voulez pas le faire vous-même. Mais c'est une bonne chose que vous pratiquiez vous-même parfois. D' accord. Alors essayez de le faire par vous-même. D' accord. Faites la même chose qui est disponible ici sur le côté droit. Ok, faisons toutes ces choses maintenant à partir de zéro parce que cette loi et de cette façon, nous allons alors beaucoup plus qu'en regardant le SCCOE, croyez-moi. Donc nous devons créer quelle forme, n'est-ce pas ? Et comme vous pouvez le voir, il existe deux types de formulaire. Get and pulse utilisera la méthode post parce que, eh bien, nous ne voulons pas envoyer le contenu de l'e-mail à l'intérieur du lien. Comme je l'ai dit, post rend les données qui sont envoyées cachées, non ? Nous allons donc utiliser la méthode post et les jeux d'actions où nous voulons envoyer le sien. Disons par exemple, que vous avez sur vos serveurs quelque chose appelé comme processus, Envoyer, e-mail comme ça, non ? Et PHP, parce qu'il va traiter le langage PHP. Donc, nous avons maintenant notre formulaire. On devrait pouvoir envoyer un formulaire comme le manger. Donc, nous allons créer un bouton de soumission qui va avoir une valeur de sueur. Mais peut-être que nous allons mettre tout sur le terrain dit, d'accord, parce que, eh bien, ça va être un peu plus gros. Alors faisons-le comme ça. Et maintenant allongeons ici. Et disons, par exemple, que nous contactons, n'est-ce pas ? Donc ça a l'air mieux. Et maintenant, nous devons demander des choses comme, eh bien, pour un email, non ? Donc, créons une entrée que ceux-ci ne peuvent pas être tapés. Quelle est la différence entre un e-mail et un texte ? Comme vous pouvez le voir, quand vous regardez cela, premièrement, vous ne voyez aucune différence, mais il y a beaucoup de choses. C' était la différence. Eh bien, la première chose qu'il a dit, si quelqu'un utilise souvent son email dans les formulaires, il pourrait avoir une suggestion concernant les clés e-mail. Donc c'est un gros avantage, non ? Et la deuxième chose, c'est que nous devons vous taper un email maintenant. Donc cette chose ne va pas être dit s'il vous plaît entrer une adresse e-mail, n'est-ce pas ? Vous devez taper une image. Donc quelque chose qui est, vous avez ce panneau ici à l'intérieur, à droite ? Maintenant. On peut l'envoyer. Sinon, il ne sera pas envoyé. Cependant, vous pouvez envoyer une image vide. Donc ce n'est pas aussi quelque chose que nous voulons avoir parce que nous voulons contacter quelqu'un qui nous envoie un e-mail, n'est-ce pas ? Nous devons répondre qu'il pourrait encore une fois, c'est pourquoi ce champ devrait être nécessaire, n'est-ce pas ? Appelons ça un email. Donc quelqu'un qui ne savait pas quoi taper ici, et le nom va être email. Et nous pouvons également définir l'ID sur e-mail si vous le souhaitez. Plus tard agit comme ce champ vrai, par exemple, CSS. En ce moment, on n'en a pas besoin, mais qui sait ? Peut-être qu'on en aura besoin. Peut-être que vous voulez créer une étiquette pour cela, par exemple, e-mail. Et de cette façon, quand quelqu'un clique dessus, il va sélectionner le formulaire ici, non ? Donc nous pouvons laisser l'identité la même nuit, leur nom et le type cette fois. Ok, donc nous avons un email et maintenant nous devons demander le nom d'utilisateur. Nous allons donc créer un texte typique avec le nom, le nom. C' est parce que quand on demande le nom, on l'appellera le nom. Et bien, cela devrait également être nécessaire. Je pense que plus tard, nous allons maintenant demander le sujet. Alors faisons-le comme ça. Eh bien, je pense qu'on devrait utiliser un peu de pause, pas vrai ? Donc, par exemple, j'ai dû briser des lignes comme ça. Maintenant, nous avons le nom de l'email ici. On pourrait utiliser une ligne de rupture de plus comme ça. Eh bien, nous avons demandé de sujet et nous devrions également demander le contenu de l'e-mail, n'est-ce pas ? Et pour cela, nous allons utiliser l'entrée qui est appelée zone de texte. La différence entre la zone de texte et les textes typiques est que l'air, si je fais quelque chose comme ça. Contenu, contenu. Remarquez que c'est petit, non ? Vous pouvez taper ici beaucoup de choses, non ? Comme le contenu de l'e-mail, n'est-ce pas ? Ou c'est une sorte de post sur le forum. On peut demander à quelqu'un de taper les choses en une seule ligne. C'est la première chose. La deuxième chose est quand je clique sur Entrée, comme vous pouvez le voir, notre formulaire est B va être envoyé. Eh bien, nous n'avons pas tapé ici tout mauvais quand nous tapons tout ce qui est nécessaire et je clique ici, entrez, ça va être raisonnable. L' entrée de texte va appeler l'action d'envoi lorsque quelqu'un appuie sur Entrée. Donc ce n'est pas quelque chose que nous voulons avoir ici, non ? C' est pourquoi vous allez utiliser quelque chose appelé zone de texte disco. Donc, nous allons supprimer ça. Et nous allons maintenant créer une zone de texte. Comme vous pouvez le voir, nous avons ici quelques choses ajoutées. La première chose est le nom, parce que bien, nous devons en quelque sorte interpréter dans le point Envoyer Email PHP. Ainsi, par exemple, dans un contenu, nous l'avons dans mon contenu. Et je n'ai pas identifié Kate ou pendant qu'on peut l'enlever pour l'instant. Et voici quelque chose comme des colonnes et des lignes. Remarquez que ce rose est assez grand, non ? C' est parce que les colonnes sont définies sur 13. Quand je le change à 10, comme vous pouvez le voir, la taille est changée, non ? Donc, cela indique la taille horizontale devrait être notre zone de texte. D' accord. Laissons-le comme avant. Je pense que c'est plutôt bon. Et ils sont tous dit combien de lignes de can, can, can, peut, l'utilisateur peut taper, juste quand j'en utilise un seul, donc il n'y aura qu'un seul mal sans le défilement ici, non ? On a le parchemin ici. Lorsque je tape outil, comme vous pouvez le voir maintenant, nous pouvons prendre deux lignes, mais la troisième ligne sont le défilement ici automatique. Je pense que 10 est un très bon endroit pour commencer. Alors peut-être allons-y un peu mieux en ajoutant la ligne de frein ici. Je pense que nous devrions ajouter ici une ventilation ici aussi pour s'assurer que si quelqu'un le redimensionnait, c'est parti. D' accord. Et la différence entre une zone de texte est aussi ceux qui remarquent que je peux appuyer sur la Entrée ici droite ? Autant de fois que je veux. Et c'est comme ça que ça devrait être, non ? Parce qu'en ce moment nous voulions créer une sorte de texte, vraiment des balises, pas seulement un simple goût des mots, astuce, sujet, écrire quelques mots. C' est ainsi que nous créons la zone de texte. Et remarquez aussi que lorsque je tape l'échantillonnage ici, c'est parti. Réglage du taux de rafraîchissement plus le décalage plus R. Comme vous pouvez le voir, il va être montré ici. C' est donc un texte par défaut, pas ici. Nous ne mettons pas dans la valeur, comme dans les entrées pour devenir des entrées. Mais nous mettons la valeur ici. Pourquoi ? Parce que chaque espace de la zone de texte est interprété. C' est la grande différence, non ? Toujours entrer va également être interprété. D' accord ? Donc, c'est important de savoir que cela fonctionne comme ça. Cependant, je pense que c'est une bonne idée d'adhérer à un détenteur de place et de demander aux utilisateurs quelque chose comme, Comment puis-je vous aider, non ? Je pense que de petites choses comme ça rend votre site Web tandis que le formulaire de contact mieux reçu, ok, les gens penseront mieux de vous quand vous faites de telles choses. Alors comment puis-je avoir aussi, je peux taper ici quelques choses et quelqu'un va me serrer dans mes bras, non ? Je vais juste des petites choses, mais elles ont vraiment de l'importance. Par exemple, dans l'e-mail, vous pouvez également ajouter l'espace réservé. Par exemple, ici, le signe e-mail comme ceci. Donc vous suggérez, ok, voici un endroit pour le courrier électronique. Vous pouvez également ajouter, par exemple, la mise au point automatique. Donc, quand je rafraîchis cette page, comme vous pouvez le voir, quelqu'un n'a pas besoin de cliquer ici. Il chauffe, il commence juste à partir de ce qu' il peut, il peut instantanément plonger l'e-mail, non ? Nous avons donc créé une structure. Ça n'a pas l'air bien parce que des choses comme ça ne s'alignent pas ici. Vous pouvez le changer, Ne vous inquiétez pas, en utilisant CSS plus tard. Aussi, ça ne marche pas bien ? Parce que quand je clique bien dessus, quand je clique dessus et que je mets tout Q parce que c'est nécessaire maintenant, nous sommes envoyés sur le côté comme ça et il n'est pas traité. Mais ne vous inquiétez pas, vous apprendrez à faire de telles choses ou quelqu'un d'autre le fera pour vous. D' accord ? Pour l'instant, vous laissez HTML. Donc, vous apprenez comment mettre correctement tout ce que le contenu sur votre site fait plus de leçon. Et comme toujours, si vous avez des questions, hésitez pas à poser. Passe une bonne journée. 47. Principes de base de la création de tables: Bonjour, mon ami. Aujourd'hui, je vais vous montrer comment créer une table. Mais d'abord, qu'est-ce qu'une table ? Table est une représentation des données dans des colonnes et des lignes. D' accord ? Donc, cela vous permet en tant que développeur web d'organiser les données d'une bonne manière, n'est-ce pas ? Parce que ça semble être fait pour être montré de cette façon, n'est-ce pas ? Ce n'est pas comme si quelqu'un mettait des données dans du texte. Et c'est bon. Ça a l'air bien. Vous savez exactement maintenant, d'accord, donc le nom du cours est ceci, les prix pour ce cours. Et nous savons aussi qu'il s'agit d'un tableau concernant les tutoriels vidéo. Et il a aussi l'air sympa. Et vous vous demandez peut-être pourquoi est beau quand, hey, nous avons ici propre HTML est parce que c'est un aperçu de CSS. Notez que quelque chose peut sembler horrible et vous pouvez changer à quoi il ressemble lorsque vous utilisez CSS assez rapidement, non ? Donc, cette chose est liée au fichier CSS de style que nous allons apprendre à créer dans les prochaines conférences. Donc, pour l'instant, nous saurons seulement comment le faire de cette façon. Je suis désolé. Mais vous pouvez voir à quel point CSS puissant maintenant et vous pouvez voir que c'est une bonne idée d'apprendre de ce cours. Parce que plus tard, tu apprends des choses cool. Ok, alors on va l'enlever. Je suis désolé. Faisons ressembler à ça. Et retirons cette table ici. Et essayons de le créer par nous-mêmes. Alors créons une table. Afin de créer un, créer une table, nous devons utiliser une balise de table, qui est utilisée pour la représentation des données dans les colonnes et les lignes, non ? Et bien, pour créer une ligne de table, nous devons utiliser cette balise appelée ligne de table t, r. Maintenant, nous pouvons mettre à l'intérieur de la ligne de table, qui est quelque chose qui est placé horizontalement à l'intérieur de la table. Une sorte de données. Nous devons le faire en utilisant les données de la table td. pack de données de table est également appelé cellule. D' accord ? Donc, nous allons mettre une donnée de table ici et appelons-le, par exemple, nom. Comme vous pouvez le voir, nous avons ici un nom maintenant. Nous pouvons en mettre autant que nous le voulons. Les données de la table sont là, d'accord, donc on peut en mettre une autre et l'appeler, par exemple, prix en dollars, non ? Et nous pouvons en mettre un autre, un autre, un autre, un autre autant que vous voulez, et tout sera présent dans une rangée. Vous vous demandez peut-être, maintenant la haine grondée, c'est à Rao, maintenant dans une rangée. Mais pourquoi même prendre la peine d'utiliser des tables ? Eh bien, on pourrait écrire tout comme ça, non ? Eh bien, ça a l'air presque, presque le même, non ? Eh bien, nous allons l'enlever. Et notez que vous pouvez ajouter une bordure à la table en utilisant quelque chose appelé Il est appelé bordure d'attribut. Et maintenant comme vous pouvez le voir que chaque texte est à l'intérieur des données de table, qui est une cellule qui a une sorte de frontière ici, non ? Et bien, normalement, vous ne faites pas des choses comme ça à partir de HTML, ok ? Vous le faites à travers CSS, mais nous allons le vivre. Comme vous pouvez le voir, c'est même sur le rouge que vous ne devriez pas l'utiliser. Il y a de meilleures façons de le faire via CSS, mais nous le vivons juste pour apprendre les tables. Ok, ce sera plus facile pour nous de voir que, hé, ce nom est à l'intérieur, ces particules sont des données de table, non ? Vous avez donc ce nom et ce prix. Et Eve nous voulons mettre maintenant quoi ? Le nom du cours. Donc, par exemple, C plus plus, nous ne pouvons pas le mettre dans la même rangée de table, n'est-ce pas ? On doit sauter d'ici à là. Et pour le faire, nous devons créer une autre ligne de table. Nous créons donc une autre ligne de table. Et puis les données de table, qui est C plus, et une autre donnée de table, qui est le prix ou par exemple, 19, 99$ par exemple. Et si vous voulez mettre plus de cours, alors nous devons copier cela quelques fois, par exemple, comme ceci, et juste changer les données. Donc, par exemple ici à Java, le prix, et par exemple ici à pi dix et le prix, non ? Donc, nous avons une bonne, maintenant une table avec des en-têtes de table et des données à l'intérieur. Notez que j'ai dit que ce ne sont pas des données, ce sont des en-têtes de table, n'est-ce pas ? Parce que ces deux titres décrivent ce qui est ci-dessous. Et à cause de ça, tu devrais nommer ces gars en-têtes de table, ok ? Th signifie en-tête de table est également bon d'ajouter quelque chose qui est appelé légende. Légende doit être une balise que ces après, la balise de table à l'intérieur de la balise de table, mais la première balise après elle. Et bien ici, nous pouvons faire une légende pour que nous puissions nommer notre table. Et par exemple, appelons-le un tutoriels vidéo. Alors maintenant, nous présentons les données correctement et plus léger. Lorsque vous apprenez CSS, vous pouvez juste faire quel lien vers le style.css et changer à quoi il ressemble, n'est-ce pas ? Ce qui est maintenant assez bon. On va enlever la frontière si on ne le veut pas d'ici et ça a l'air encore mieux, non ? Donc, malheureusement, ce n'est pas ce que vous faites maintenant. Il faut qu'on s'en tienne. Il est bon de savoir que vous pouvez spécifier quelle partie de votre table est l'en-tête de table ou le corps de la table. Donc tu peux faire des trucs comme ça. C' est l'en-tête de table parce que nous avons de bons en-têtes ici. Et cette partie est chauve de table parce que c'est le contenu de votre table. Et vous pourriez être comme, pourquoi je ferais ça ? Eh bien, vous vous faciliterez la vie si vous voulez traiter ces données en CSR ou JavaScript, d'accord ? Par exemple, juste pour l'ensemble. Mais quoi, ce n'est pas quelque chose qui est requis par HTML et la guerre. Ok, alors peut-on créer une table et maintenant il est temps de faire de l'exercice. Créer manuellement. Et puis en utilisant M à une table avec trois lignes et cinq colonnes. D' accord ? Donc manuellement, vous allez faire une table. Table sont toutes les données de table et vous venez de copier ces cinq fois 1, 2, 3. Cela m'a fait le faire de cette façon parce que sinon, où je suis donc des données de table, des données de table, donc une taupe. Et puis vous copieriez ça comme ça, non ? On a besoin de trois rangées de zéros, donc comme ça, ok, alors on le résoudra. Mais vous pouvez aussi utiliser Emmet, n'est-ce pas ? Donc, à l'intérieur de la table, nous avons une bonne vieille rangée de table. Nous pouvons voir que maintenant nous avons mal de table. Nous avons besoin à l'intérieur de quelles données de table, nous en avons besoin cinq fois et nous devons tout multiplier par trois. Et c'est là qu'on l'a créé un peu plus vite, pas vrai ? Et ça a aussi l'air assez bon, non ? Parce que nous avons une indentation correcte semble ne fait que la leçon, merci beaucoup. Passe une bonne journée. 48. Comment étirer les cellules en utilisant l'envergure ligne, et le colspan ?: Bonjour mon ami. Aujourd'hui, nous allons parler de la façon de faire une cellule pour s'étirer, pour s'étendre. Et quand quelque chose comme ça est nécessaire. Pour comprendre cela, je vais vous montrer un exemple pratique. Ecoutez, nous avons de bons cours gratuits maintenant ici, C plus, plus java et Python. Quel type de cours sont-ils ? Ce sont les cours de programmation. Imaginez que nous avons plus de cours comme, par exemple, disons que nous avons C plus, plus java, Python. Et disons que nous avons un bon HDMI, css, et par exemple, JavaScript, non ? Comme vous pouvez le voir, ce sont des cours de programmation. Et ici, nous avons les cours de développement web. Donc ils ont un type différent, est-ce pas ? Type de cours. Donc nous pouvons en créer un autre ici. En-tête de table. Par exemple, disons le type de cours, non ? Ok, donc nous pouvons spécifier maintenant, donc tous ceux-ci, eh bien, bon 32 et favoriser ce td. Et celui-ci, c'est de la programmation, n'est-ce pas ? Et là, nous avons quoi alors ? Développement web, non ? Disons juste mouillé. Comme vous pouvez le voir, nous nous répétons ici et ça n'a pas l'air bien, non ? Parce que nous les avons triés par type en ce moment. Et répéter comme ça rend votre table tout simplement pas faible or, Il est tout simplement pas préfèrent le shopping. Je pense que la programmation ici devrait s'étendre, devrait s'étendre d'une cellule à la deuxième cellule à la cellule, juste dans ce cas. Et pour cela, nous utilisons l'attribut span. Span signifie s'étire jusqu'à ce que c'est une plage. C' est dans quelle mesure écrire quelque chose étendues. Et bien, dans notre cas, nous voulons s'étendre. Donc, nous voulons étendre le rôle, n'est-ce pas ? Parce que nous voulions avoir comme au lieu d'un rôle, ne devrait prendre 1, 2, 3 lignes, non ? Et c'est pour ça qu'on va supprimer la programmation d'ici. Et nous allons choisir cette cellule ici, cette cellule spécifique, et vous voulez l'étendre deux fois ici. Donc, nous allons taper leur attribut rowspan et taper ici pas deux, parce que deux signifie qu'il va s'étendre à deux cellules, y compris elle-même, mais à libérer. Et maintenant ça a l'air mieux, n'est-ce pas ? Ok, alors faisons la même chose sur le web, non ? Comme ça. Et maintenant la portée de la ligne à l'écriture libre, s'il y avait plus d'entre eux, alors, eh bien, par exemple, disons que nous avons du bien. Maintenant, notez que le js, alors nous allons juste l'étendre à quatre cellules. Une cellule s'étendait à quatre cellules. Ça prend juste tout de l'espace maintenant. Et je pense que ça a l'air mieux, non ? Parce que nous ne répétons pas la même information plusieurs fois. C' est une table qui a l'air professionnelle. Donc, c'est quand nous utilisons la plage de lignes ou nous utilisons le colspan aussi pour quoi ? Pour s'étirer en cas de colonnes colspan, n'est-ce pas ? Parce que ça s'appelle des colonnes. Droit ? Imaginez que vous voulez donner des informations supplémentaires sur ce tableau. Comme par exemple, tous ces cours ont été créés en langue anglaise ou par exemple, qu'ils ont été créés par moi, sont des captures sans poussin. Bon, qu'est-ce que tu ferais ? Eh bien, vous pouvez plonger dans le texte ci-dessous ou vous pouvez inclure cette information dans le tableau. Mais vous aurez besoin de le faire probablement là où il monte pour vous assurer que personne ne pense que c'est comme une donnée à l'intérieur de la table, non ? Cela représente le nom, prix ou le type, n'est-ce pas ? Donc, nous aurons besoin de connecter toutes les, les cellules ici en bas. Et alors que nous aurions besoin de les étirer correctement, alors nous devons faire la portée droite ? Donc, nous allons créer une table de données de table erronées. Et disons que tout ici a été créé par moi, non ? Ainsi créé par Al-Qaïda. Et le problème est le, est que maintenant cette cellule de données de table est étendu tout, non ? Parce que tout devait être à l'intérieur d'une seule cellule. Et nous avons ici un grand écart, non ? Et la deuxième chose, c'est que nous avons un espace vide, dont nous n'avons pas besoin, non ? C' est pourquoi ce serait génial de le réparer. Eh bien, vous pouvez réparer l'espace vide en incluant deux données de table supplémentaires, non ? Mais nous ne comblons pas le plus grand écart que nous ayons ici. Donc, nous devons faire un étirement. Nous devons donc utiliser colspan. Nous devons enjamber notre cellule. Combien de fois ? Pas deux fois. Parce qu'on va l'interdire sur deux cellules, mais trois fois. Donc on l'a sur toute notre table, non ? Donc, c'est comme une information supplémentaire maintenant concernant cette table, spécifique cette table. Ou vous pouvez simplement taper ici que cela a été créé en anglais, peu importe, non ? C' est de l'information gardant toute la table. Et bien, vous pourriez l'aligner comme ce centre pour le rendre centré droit ? Il y a beaucoup d'autres valeurs ici que vous pouvez choisir en ligne. Comme vous pouvez le voir Derman, autre, mais le plus utile est le centre. Et pour être honnête comme vous pouvez le voir, c'est rouge. Ça veut dire que ça ne devrait pas l'utiliser. Et plus il est préférable d'utiliser CSS dans des cas comme ça. Cependant, je pense que pour les petites choses comme celles-ci quand c'est rare, seulement utiliser, ce n'est pas une bonne idée d'aller dans CSS et de créer une règle spécifique dont nous ne pouvons pas parler à l'avenir, ok, pour un seul cas comme celui-ci, Si cette table ne va jamais être répétée, alors peut-être que vous, vous savez, juste que je n'ai pas tout fonctionne bien, non ? C' est ainsi que vous créez colspan, qui étire les colonnes, les cellules de manière horizontale. Donc, de gauche à droite trois fois dans ce cas, comme un exercice, faites la colonne de type sur le côté gauche, pas sur le côté droit, je veux avoir le type, le nom, puis le prix. D' accord ? Il n'y a que la leçon. Merci beaucoup. 49. Qu'est-ce que le CSS ?: Bonjour mon ami. Il est temps pour une conférence super importante car aujourd'hui nous sortons parler de CSS, qui signifie Cascading Style Sheets. Nous allons nous concentrer sur ces deux mots dans cette conférence. Feuilles de style dans la deuxième roue. Concentrez-vous sur celui-ci. Alors, qu'est-ce qu'une feuille de style ? Il s'agit d'un fichier qui décrit un style pour l'ensemble de votre page Web. D' accord ? Et les styles ressemblent, par exemple, ici. Donc, par exemple, nous disons, hey, je veux que chaque table fasse s'écouler la couleur de la bordure pour s'effondrer. Vous voulez qu'il ait une taille de police égale à celle-ci. Nous voulons avoir une largeur minimale égale à cela. Et nous voudrons aussi que la boîte d'ombre soit haute. Ne vous inquiétez pas si vous ne comprenez pas, qu'est-ce que ça fait exactement parce que nous, vous savez, expliquons tout ce genre de choses dans la prochaine conférence. Mais pour l'instant, je veux juste vous montrer qu'il s'agit d'un fichier où vous pouvez changer la façon dont les choses apparaissent sur votre site Web. Comment ils regardent à l'intérieur d'un seul Phi ? Et pourquoi est-ce si important ? Ok, créons quelques paragraphes, d'accord ? Comme par exemple, il s'agit d'un exemple de texte, et copions ces textes quelques fois. Et maintenant, disons que nous avons de bonnes balises. Et voulez-vous faire le texte à l'intérieur en gras ? Alors, comment ferons-nous ? Nous allons à quelque chose comme, par exemple, ce droit ? Il faut donc quelques secondes pour faire une telle chose. On pourrait l'accélérer si on connaissait quelques raccourcis comme ça par exemple. Et j'ai fait une erreur en faisant ça. Donc c'est aussi, comme vous pouvez le voir, sujet aux erreurs. Donc, je ne vais pas supprimer cette partie de la vidéo parce que je veux vous montrer que ce n'est pas bon, bonne idée. Comme vous pouvez le voir, nous l'avons hardi. Nous avons une solution qui fonctionne bien, non ? Ok, donc je veux le faire, ça prendra, et ensuite ce que je vais faire, encore une fois, je vais sélectionner toutes ces choses. D' accord, ça, OK, et maintenant c'est l'heure de quoi ? Pour changer d'avis et dire, je n'aime pas qu'il l'ait, n'est-ce pas ? Ok, je peux utiliser un tracé de contour z, mais disons que vous rouvrez ces 52 jours plus tard et que vous devez l'enlever. Donc, vous devrez le supprimer comme ceci, ou vous pouvez utiliser la F1, puis supprimer l'attaque. Disons que, Hey, nous connaissons quelques raccourcis qui nous aideront un peu. Mais le problème, c'est que ça prend encore beaucoup de temps. Alors enlevons tout d'ici. Ok, maintenant faisons-le comme un pro. Alors, comment le produit-il ? Utilisez CSS. Ok, alors créons un fichier que nous ne pouvons pas mettre le CSS. Supprimons donc le dossier ici parce que nous devons le faire à partir de zéro. Et bien, créons un dossier, non ? Pourquoi créons-nous un dossier ? D' abord ? Nous créons un dossier parce que nous pourrions avoir beaucoup de feuilles de style, pas seulement une, n'est-ce pas ? Alors allons dans le dossier que nous tenons, toutes les feuilles de style comme pour les images, n'est-ce pas ? Nous avons le dossier ici. Nous n'avons qu'un seul dans chaque groupe par la cheville. Peut-être que tu en auras plus. Et il est bon de garder votre projet clair. Ok, Donc nous avons le dossier css, et l'intérieur de celui-ci, nous allons créer un fichier, besoin d'avoir une extension comme ça, CSS, et vous pouvez l'appeler n'importe quoi, non ? Mais allez-vous l'appeler style parce que c'est notre style principal, point css, très bien. D' accord ? Bien sûr que vous pouvez l'appeler comme vous voulez, mais c' est quelque chose que nous sommes habitués en tant que créateurs, OK, appelez que c'est serré. Et maintenant, c'est l'heure de la magie. Il est temps de sélectionner tous ces graphiques à barres d'alimentation. Comment on le fait ? Nous utilisons quelque chose que l'on appelle le sélecteur. D' accord ? Il y a beaucoup de sélecteurs dans cette conférence, vous apprendrez le sélecteur simple que nous appelons simplement select ou attack. Comment ça marche ? Tu as juste tapé le nom de Jack que tu veux sélectionner, Ok, et c'est fini. Et puis vous créez ces crochets bouclés. Je le fais. Vous les créez parce que vous voulez mettre ici propriétés qui affecteront ces particules de crise cardiaque. D' accord ? Eh bien, vous pouvez avoir plus d'une chose sélectionnée, non ? Donc, peut-être que plus tard, vous voudrez sélectionner le BDI, cette table, le DAC, la balise de légende, n'importe quoi, n'est-ce pas ? Et à l'intérieur de ces crochets bouclés, quelque chose qui analyse le CSS. Il sait qu'il doit appliquer toutes les propriétés qui sont ici à ce sélecteur spécifique du Pacifique. Donc la pile dans ce cas. Et donc nous avons choisi le paragraphe et nous voulons quoi ? Pour modifier l'apparence du texte pour le rendre en gras, par exemple. Alors comment on le fait ? Eh bien, nous tapons le nom de la propriété. Que nous trouvons où ce que nous pouvons utiliser Control plus l'espace. Et comme vous pouvez le voir, nous pouvons trouver de nombreuses propriétés ici. Et vous pourriez être comme maintenant, OK, OK, donc vous devez mémoriser toutes ces choses, pas la première chose est que, comme vous pouvez le voir, nous avons ce que vous avez ici, n'est-ce pas ? Donc ce serait stupide de se souvenir de toutes ces choses. C' est bon de connaître les bases, savoir où les chercher, mais vous n'avez pas besoin de mémoriser toutes ces choses. Alors ne vous inquiétez pas. Donc, vous verrez bientôt qu'il est assez facile à utiliser parce qu'imaginez une seconde comment une propriété pourrait être appelée. Si nous voulons changer l'apparence de la police aussi, ça s'appelle police. Tapons la police. Et comme vous pouvez le voir, il y a un fam mili de propriétés de changement de police. Donc, quand je tape tiret, comme vous pouvez le voir, nous avons ici la taille de la police, ce qui change la taille, non ? Donc, c'est assez auto-descriptif dans ce est assez cool à cause de cela. Alors modifions le poids de la police. Le poids de la police change alors. Combien d'encre est à l'intérieur de la police, n'est-ce pas ? Nous pouvons taper le numéro par la présente, nous allons choisir les textes comme boulon ici, ok, et il va juste faire le texte en caractères gras. Vous pouvez voir que rien n'a changé. Pourquoi c'est ça ? C' est parce qu'on n'a pas connecté ce fichier à ces cinq. Html5 est ce qui est ici. Écrire le fichier CSS est dans le dossier CSS. Ce combat n'est pas au courant de celui-là, est-ce pas ? Fais le stupide. Si quelque chose se connectait automatiquement, ça va, eh bien, peut-être que vous ne voudriez pas que ce style particulier soit connecté à ces cinq, n'est-ce pas ? Donc, vous devez dire, vous devez dire que vous voulez lier à elle. Et pour le faire, nous utilisons la balise link, que MME nous aide à faire la liaison en utilisant le CSS, comme vous pouvez le voir ici. Et quand je clique sur Entrée, nous avons ici ce que la relation d'attribut, qui Shays dit que HTML a une relation avec le fichier qui est spécifié ici comme une feuille de style. Alors oui, la feuille de style, non ? C' est de ce nom. Donc, c'est un fichier qui décrit ce type à l'intérieur d'une feuille, ok, Donc la feuille de taille, et voici le lien vers où il est. Notez que cela ne fonctionne toujours pas. Pourquoi c'est tout ce que c'est ? Parce que, eh bien, ce index.HTML est dans le catalogue principal, n'est-ce pas ? Et nous devons en quelque sorte lier à cet endroit spécifique. Et nous le faisons comme quand nous l'avons fait avec des images. Nous devons donc le supprimer et taper ce CSS. Et nous devons aller dans le dossier de CSS et choisir le style.css. Et maintenant, regarde, c'est audacieux. C'est plutôt cool. Et ce qui est plus cool que nous pouvons changer beaucoup plus de choses ici. Donc taille de police comme par exemple, je veux en faire 30 pixels. Faisons le gros. Comme vous pouvez le voir, il est grand maintenant et vous pouvez changer d'avis autant de fois que vous le souhaitez. Et vous faites un changement ici dans un fichier particulier, vous pourriez être comme, Hey, il n'y avait que cinq paragraphes par. Pourquoi est-ce que je m'en soucie ? C' était assez rapide et loin ? J' en aurais besoin pour créer le CSS côté pour la commande. Apprenez une nouvelle langue pour les sélecteurs et les propriétés similaires. Ok, mais nous sommes arrivés ici sur les cinq paragraphes, imaginez que vous avez mis de côté qui se compose, par exemple, de 500 sous-pages. Quand vous le faites, je suis sûr que vous n'êtes pas tous. C' est pourquoi style.css est génial car il vous permet de changer d'un feu singulier, toutes ces choses et quoi de plus ? Notez que ce HTML5 est si clair maintenant, avant que nous avions travaillé en moyenne, sur chaque étiquette, nous avions quelque chose comme ça, non ? Et quand nous l'avons regardé, il était difficile de se concentrer sur le, quel est le texte ici et ce que nous voulions montrer aux autres que nous créons un paragraphe ici, n'est-ce pas ? Donc, cela décrit l'apparence de l'autre côté. Cela décrit quel genre de textes est biaisé, non ? On dit, Hey, c'est un en-tête juste ici, on a une légende. Donc nous n'avons pas cette masse supplémentaire ici en ce moment. C' est pourquoi utiliser le style.css. Notez donc que pour sélectionner quelque chose, vous devez taper le nom de la balise que vous voulez trouver. Ensuite, vous créez les crochets bouclés, puis le nom de la propriété. Il y a beaucoup de noms comme ça et nous apprenons la plupart des plus importants dans les conférences futures, puis la colonne, puis nous ajoutons l'espace. Le bois n'est pas nécessaire. Comme vous pouvez le voir, rien ne s'est passé lit ici, mais nous l'ajoutons pour le rendre meilleur look. Bien sûr, vous pouvez héberger de sorte que vous aurez tout en une seule ligne. Mais ça n'a pas l'air bien, non ? Oui, pour que votre code soit bien. Et puis nous avons obtenu la valeur, la valeur de la propriété, qui peut être trouvé où. Lorsque vous utilisez l'espace des tracés de contour, vous avez toutes les valeurs qui peuvent être mises ici, n'est-ce pas ? Ou peut-être que quand tu oublies quelque chose, tu peux aussi faire quoi ? Taille de la police, puis tapez à partir de la taille de la police scotch. Comme vous pouvez le voir, nous pouvons cliquer ici et nous pouvons facilement lire à ce sujet. Ne vous inquiétez pas, vous n'avez pas besoin de mémoriser tout ça. Je ne me souviens pas de tout, alors ne t'inquiète pas. Le plus important, oui, mais pas tout. Personne ne peut le faire pendant la guerre. Par exemple, pourrait terminer la conférence maintenant, mais je pense que c'est une bonne idée de vous donner quelques idées sur la façon dont CSS pourrait être utilisé autre que jazzy changer l'apparence dans la décharge. Alors qu'est-ce que c'est ? Imaginez que vous avez un site qui semble plutôt bon mais bon pour vous. Il y a beaucoup d'utilisateurs de ce côté et ils utilisent ce site fréquemment. Certains d'entre eux n'aiment pas à quoi ça ressemble. Peut-être qu'ils aimeraient personnaliser à quoi il ressemble. C' est tous les deux mauvais. Oui. Ils, vous pouvez leur permettre de modifier le style.css et d'inclure juste pour eux. Les côtés disent qu'ils veulent inclure, non ? Ils pourraient faire de votre site les différentes couleurs. Plutôt génial, non ? Vous devez également savoir que vous pouvez modifier l'apparence de votre site Web sur les smartphones. Quand quelqu'un a le grand moniteur, vous pouvez gratter tous les éléments sur l'ensemble du moniteur et ils auront l'air assez bien. Mais plus tard, quand quelqu'un ouvre 0 site Web sur smartphone, n'avons-nous pas l'air bien ? Donc, parfois, vous devez même enlever quelque chose ou changer l'apparence de celui-ci et vous pouvez le faire, n'est-ce pas ? Vous pouvez dire que, hé, cette aile va regarder comme ça sur le téléphone intelligent, ok. Bien que vous puissiez même changer l'apparence de votre site Web lorsque quelqu'un l'imprime ? Oui, vous pouvez supprimer chaque logo, chaque image scie, et juste laisser l'article pour l'impression quand quelqu'un utilise le raccourci Control plus trois plus B, ou peut-être le contrôle plus b, ils ne voient que les textes, non ? Pas toutes, toutes les autres choses comme les images et ainsi de suite. Peut-être que quelque chose comme la spécification n'est pas nécessaire, n'est-ce pas ? Donc on peut l'enlever juste pour l'impression pour que quelqu'un ne perde pas son encre. Plutôt génial, non ? Donc, pour vous inscrire, css est quelque chose qui change l'apparence d'une amende. Et vous économisez beaucoup de temps, et le temps est précieux, temps c'est de l'argent, non ? Vous pouvez contrôler votre mise en page. Donc, à quoi ressemble le site à partir de 15, même si vous avez des centaines de sous-site. Et aussi, il est bon de savoir que votre site Web se charge plus rapidement. Parce que lorsque le CSS est chargé, une fois, il va être dans quelque chose qui s'appelle cash. C' est une sorte de mémoire à l'intérieur de votre navigateur Web, à l'intérieur du navigateur Web de l'utilisateur, qui contient le CSS. Donc, quand quelqu'un saute d'un côté à l'autre, ce phi n'a pas besoin de recharger. C' est juste dans la cache. C' est dans cette mémoire où le navigateur Web peut l'utiliser quand il veut l'utiliser, droite, alors chargez-les et utilisez-le simplement. C' est cool. Ce n'est que la leçon. Merci. 50. Placement CSS et priorité CSS (cascade): Bonjour, mes amis. Aujourd'hui, nous allons parler d'une guerre sans fin entre les flèches. Quoi ? Oui. Les règles se battent les unes contre les autres. Les règles que vous essayez d'appliquer en utilisant quelque chose comme celui-ci. Qu' est-ce que ça veut dire ? Eh bien, ajoutons quelques règles supplémentaires. Comme par exemple, modifions la taille pour vivre sur deux pixels. Faisons de gros textes. Et changeons aussi la couleur. Afin de changer la couleur du texte, nous utilisons la propriété de couleur, puis nous pouvons choisir la couleur d'ici, comme par exemple, le bleu. Vous pouvez également le changer en utilisant Cuba. On en parlera plus tard. Nous avons donc un peu changé et comme vous pouvez le voir, nous avons maintenant un gros texte qui est bleu. Le problème est à propos de cette guerre entre les rôles est que vous pouvez créer la taille non seulement ici dans le fichier CSS externe. Non, non, non, non, non, non, non. Vous pouvez les créer en ligne, n'est-ce pas ? Ou vous pouvez les créer ici. À l'intérieur de l'étiquette de tête à l'intérieur. Pack style or, ou bien, il y a des valeurs par défaut, n'est-ce pas ? Notez que le paragraphe a une sorte de marge, n'est-ce pas ? Notez que nous avons une bonne marge entre ce texte et ceci. On n'avait pas besoin d'ajouter la ligne de rupture ici, non ? Pour faire entrer la ligne, n'est-ce pas ? Il y a donc au moins quatre façons de le faire. Donc, ce qui se passera quand je, par exemple, tapez ici paragraphe et je vais changer la couleur en rouge. D' accord ? Ici, nous avons la couleur bleue. Ici, nous avons quoi ? Couleur rouge ? Comme vous pouvez le voir que X est rouge. Mais pourquoi ? Et remarquez aussi, ce qui est très important est que nous avons gardé le poids de la police et la taille de la police, non ? Donc on a gardé ce qui était app, non ? Mais on a changé la couleur en rouge. Et ce Fink s'appelle cascade, d'accord, la façon dont vous choisissez la taille à appliquer, non ? Dans un endroit spécifique est appelé cascade. Qu' est-ce qu'une cascade ? Parce qu'il est très rarement utiliser le mot, non ? Cascade. Cascade lorsque vous tapez dans Google, est une cascade qui a quelque chose comme des étapes, Rock Steps, n'est-ce pas ? Et l'eau coule de haut en bas. Et dans le service CSS, C'est assez similaire. Cascade est une guerre sans fin entre les règles. Vous avez les styles par défaut du navigateur. Imaginez que l'eau coule ici, n'est-ce pas, c'est un pas comme sur la cascade, non ? Et les chutes d'eau vers le bas, boum, boum, et boum, non ? Et il faut comme de l'eau tous les styles qu'il était avant, non ? Donc le navigateur a le style par défaut et il définit la marge droite ? Notez que nous n'avons pas supprimé la marge ou d'autres styles du paragraphe quand il a ajouté ici et d'autres côtés, non ? Nous n'avons pas supprimé le poids de la police et la taille de la police lorsqu'il est ajouté ici, la couleur, n'est-ce pas, nous remplacons juste la colonne, non ? Mauvais, on n'a pas enlevé d'autres trucs. Vous pouvez également créer un style en ligne comme celui-ci lorsque vous tapez le site et que vous changez la couleur en, par exemple, violet, non ? Et on va changer seulement la couleur, non ? Mais on va toujours garder ça. Et nous allons garder ce qui est en place, qui est la marge et d'autres choses comme ça. Donc, comme vous pouvez le voir sur la, la première chose est violet. Donc, la première chose dans la cascade est le navigateur, puis le fichier CSS externe, comme le style.css, qui est ici, non ? Et puis nous avons le style défini dans la balise de style. Donc c'est ici. Et puis nous avons eu le style en ligne, qui est ici. Et ce qui m'a aidé à le comprendre, c'est que le regard, quand je déplace cette boîte ici, je suis comme au-dessus de ça, n'est-ce pas ? Comme ça. qui signifie que lorsque nous tapons, par exemple, dans CSS externe, fichier, style.css, ce que le poids de la police, taille de police gras 40 pixels, et la couleur bleue. On fait juste ça. Donc, nous gardons tout ce qui était dans la taille par défaut du navigateur, non ? Mais nous ajoutons une nouvelle couche, non ? Nous ajoutons donc de nouvelles choses comme la police, la taille et la couleur de la police. Je pourrais changer tout ce qui a été défini par défaut, les actes de droite par exemple, la marge. Je peux le changer. Changons-le à 50 pixels. Tu peux le faire, non ? Ça ne veut pas dire que tu ne peux pas le faire. Donc, comme vous pouvez le voir, nous pourrions le changer pour Kindle et le définir à 100 pixels. C' est à vous de décider. Mais tu n'en as pas besoin. C' est important parce que nous gardons ce qui était en place, non ? C' est pour ça que ça s'appelle cascade. Parce que bien, imaginez que l'eau coule de haut en bas et qu'il faut tout ce qui était avant ça, non ? Donc il faut toutes les règles qui étaient avant, mais si quelque chose est nouveau, il va être remplacé, non ? Alors maintenant, vous savez ce que signifie C dans CSS ? Donc CSS est des feuilles de style. Donc Phi a des règles qui représentent ce serré et ils suivent le rôle en cascade, non ? J' ai simplifié un peu ce sujet. Il doit dire que cela est simplifié parce qu'il y a plus à cela, mais nous allons en parler plus dans les conférences futures quand nous apprendrons plus de types de sélecteurs, oui, il y en a plus. Donc, avec le temps, vous en apprendrez plus sur quel genre de comment commence à prioriser fonctionne, Ok, donc ce qui devrait être priorisé en premier. Maintenant, remarquez que c'est assez logique parce que, eh bien, serait stupide si vous ne pouviez pas changer ce qui est comportement par défaut par le navigateur Web, n'est-ce pas ? Vous pouvez même vérifier le comportement par défaut dans Google Chrome. Vous pouvez utiliser le Control Shift plus j. Et lorsque vous inspectez des textes comme par exemple ici, vous remarquerez que voici un comportement par défaut comme affichage, blog, marge, doc, démarrer un. Suis, je le suis. On va parler de ce que ça fait. Mais comme vous pouvez le voir ici, notre feuille de style agent utilisateur, ce qui a été ajouté par le navigateur Web. D'accord ? Donc on peut changer ce comportement assez facilement, non ? Par exemple, en utilisant le CSS externe. Et aussi IV, vous avez, par exemple, CSS externe. Et vous avez une chose simple que vous voulez ajouter dans HTML5 spécifique. Vous pouvez utiliser ce style à l'intérieur de la balise head. Pourquoi ? Parce que, eh bien, tu n'as pas besoin de le charger dans chaque recoin, non ? Et aussi, si vous avez quelque chose de très, très court et que cela n'arrive qu'une fois, alors peut-être que vous pouvez utiliser l'inline. Cependant la plupart du temps, la façon recommandée est cette chose ici. Donc, en utilisant le CSS externe, parce que, eh bien, cela vous donne le plus d'avantages le plus de temps, non ? Parce que lorsque vous changez ici quelque chose, vous changez chaque fichier HTML qui inclut le fichier CSS. Ok, fait le sur la leçon ouverte. Merci beaucoup. Et comme toujours, rappelez-vous, si vous avez des questions, n'hésitez pas à poser. 51. Cours vs id: Bonjour, mes amis. Aujourd'hui, nous allons parler de classe et attribut ID, cette conférence importante de bruit. Donc concentrez-vous. Qu' est-ce qu'un cours ? La classe est quelque chose qui classe les choses. Est-ce que ça veut dire ? Cela signifie qu'il organise les choses en groupes. D' accord. Groupes. Alex. Et quand quelque chose comme ça est nécessaire. Eh bien, écoutez, nous avons quelques paragraphes. Disons que vous voulez les centrer tous. Donc, vous voulez avoir le texte au milieu de l'écran. En ce moment, le texte est sur le côté gauche de l'écran. Je veux l'avoir au milieu. Ok, alors comment je ferais ça ? J' ai besoin de choisir le paragraphe et j'utiliserai la propriété appelée text align. L' alignement du texte vous permet de changer l'endroit où le texte devrait être, n'est-ce pas ? Ça va être centré en direct, non ? Mettons juste le centre ici. Et ça, vous pouvez voir qu'on l'a fait. Donc, nous résolvons le problème. C' est aussi. Mais disons que nous avons une bonne adresse maintenant. Et l'adresse intérieure nous avons, par exemple, mon nom et le nom de famille. Et imaginez qu'il y a plus de contenu ici. Et je veux centrer ça aussi. Ok, alors peut-être allons le faire comme ça. Adresse et nous allons taper le texte aligner ici. D' accord. Ok, on a résolu le problème. Mais nous avons répété des heures de 2 fois l'imagerie qu'il y avait de la morphine. Comme par exemple, je n'appelle pas notre taille de téléphone, écrire quelque chose comme ça. Nous aurions donc besoin de faire de telles choses. Pas bon, non ? Donc, nous pouvons résoudre cela encore, acheté. Pour le faire, nous devons utiliser le sélecteur de multiplier. Afin de le résoudre, nous utilisons la virgule ici et nous tapons le nom de Jack que nous voulons choisir d'écrire. Donc, cela signifie que nous choisissons des paragraphes et choisissons des adresses et faisons comme si c'était ici. Et d'accord, nous résolvons le problème. Quel E, Si je veux appliquer les choses qui sont ici, faire beaucoup, beaucoup plus droit fiscal ? Il y a beaucoup de taxons. Donc, je devrais aller à CSS ici et ajouter une autre balise, autre balise, un autre deck. Et allez-y, non ? C' est le moment de classer les choses, de les regrouper, non ? Notez que notre principale raison pour laquelle nous l'avons fait était de centrer les choses. Et bien, nous pourrions classer tous les paragraphes dans un groupe et le faire comme ceci en utilisant l'attribut de nom de classe. Et puis les citations. On va taper le nom que nous inventons, non ? Nous avons donc un centre d'exemple de couche. Et nous pouvons faire une telle chose à, eh bien, tous les endroits que nous voulons, comme par exemple ceux-ci. Et maintenant, au lieu d'écrire ceci, nous ne tapons pas le centre de points. Afin de choisir la taxe qui ont une bonne classe, nous avons fait nommé centre, nous devons utiliser le signe point, puis le nom de la classe. Comme vous pouvez le voir, la solution est similaire. Mais maintenant je peux dire, Hey, je ne veux pas de ce type. Il sera centré et ce n'est pas le cas. Donc, vous pouvez décider maintenant quoi centrer sur votre site et vous n'avez pas besoin de vous soucier du nom de la balise maintenant, n'est-ce pas ? C' est ainsi que ça marche. Si vous voulez spécifier, je veux que les paragraphes soient centrés. Vous pouvez dire, à droite, en ajoutant p ici. Donc p point centre est parti, centre sur les paragraphes. Cependant, dans notre cas, nous voulions tout centrer. Remarquez que ce nom peut être ce que vous voulez, d'accord ? Donc tu peux changer ça en ça et ça va aussi marcher, non ? Mais n'ajoutez pas d'espaces ici, comme par exemple ceci, ok ? Parce que maintenant ça ne marche pas parce que nous avons du bien. Maintenant, deux cours, d'accord ? Cette classe et cette classe. Vous pouvez avoir plusieurs valeurs pour la classe. Bientôt, vous verrez pourquoi c'est bon. Parce que peut-être que vous voulez agrandir le texte, par exemple, à droite dessus, le rendre plus grand. Donc, créons une classe que nous appelons plus grande et nous descendons à 79 taille de police Act et faisons, par exemple, 40 pixels. Et maintenant je peux dire, Hey, je veux que celui-ci soit plus grand, et par exemple, celui-ci soit plus grand, non ? Nous ajoutons donc l'espace entre les valeurs. Et comme vous pouvez le voir, c'est plus grand que celui-ci est plus grand. Et nous pouvons utiliser ces cours sur n'importe quel type de haut, non ? Donc la classe est habituée à quoi ? Pour classer les choses. Donc, nous organisons les choses en groupes, catalogues. Ok, maintenant c'est l'heure de la pièce d'identité. Id. Identifie les choses. Donc, vous avez, par exemple, quelque chose de bon est appelé carte d'identité, et il vous identifie que vous écrivez la seule personne unique. Vous pouvez être répliqué. Et comme vous pouvez le voir, nous pouvons utiliser la magnétisation de classe. Cependant, l'ID peut être utilisé de votre côté. Nous avons un nom spécifique, seulement un. D' accord ? Alors quand utilisons-nous quelque chose comme ça ? Disons que nous voulons choisir cette adresse ou peut-être ce paragraphe particulier, n'est-ce pas ? Vous pouvez alors dire que l'identifiant de ce paragraphe est, par exemple, le texte unique sur ceux-ci doit être sélectionné. Et puis vous allez ici et pour le choisir sur ces gars pour le rendre différent, pas les autres. Vous allez utiliser le signe de hachage, puis le nom. Et maintenant, vous pouvez faire ce que vous voulez pour l'écrire et rendre la couleur rouge. Tu peux changer ce que tu veux. Je connais le poids de la police, gras. Il y a beaucoup d'autres choses, mais je ne veux pas montrer toutes ces choses ici maintenant dans cette électrode de particules, non ? Mais tu peux faire ce que tu veux. Ce type spécifique, vous pouvez voir qu'il est maintenant lu. C' est aussi en gras, non ? Les autres n'ont pas été touchés. Donc, vous utilisez ID pour choisir un seul élément spécifique, n'est-ce pas ? Tu veux le rendre un peu différent. Celui-ci l'a identifié et le change. Et rappelez-vous, vous ne pouvez pas avoir deux pièces d'identité de votre côté comme ça. Ok, ça marchera bien. Comme vous pouvez le voir, il est en gras et en ce moment, mais cela va causer beaucoup, beaucoup de problèmes concernant la sélection ID unique en utilisant JavaScript que vous le ferez à l'avenir, je suis sûr d'agneau. Rappelez-vous donc que l'ID n'existe qu'une seule fois avec ces textes uniques. Bien sûr, vous pouvez avoir d'autres idées comme ID, nom différent, non ? Mais seulement ceux qui portent ce nom, d'accord ? C' est assez important pour vous de vous en souvenir. C' est comme toi, tu es unique. Vous avez la carte d'identité qui vous identifie uniquement. Pratiquons cela un peu et créons un formulaire. Un formulaire. Et à l'intérieur de celui-ci, nous allons maintenant créer des entrées gratuites. Et bien, nous avons trois entrées. Et je veux choisir uniquement les entrées sous cette forme. Pas sous cette forme, non ? Parce que normalement, vous pouvez taper l'entrée, non ? Mais vous choisissez maintenant cette entrée et cette entrée quand il est mort. Ok, donc c'est un problème. Disons que nous avons un formulaire que l'ID est, par exemple, panier. Et ici, nous avons un formulaire qui s'appelle ordre. Et vous pouvez maintenant choisir seulement les entrées de cette particule sont quatre. Vous pouvez maintenant taper panier, n'est-ce pas ? Et à l'intérieur du panier, si vous voulez choisir des entrées, vous tapez l'espace, d'accord ? Donc si tu voulais, tu sais, aller dans le noir. Donc tu veux faire quelque chose de l'intérieur. Vous tapez l'espace, puis vous tapez le nom de marquage que vous voulez choisir. Donc entrée. Et maintenant, nous allons avoir, par exemple, changer la couleur en bleu. Et aussi, nous ne pouvons pas changer, par exemple, avec 250 pixels. Comme vous pouvez le voir, le premier formulaire a été affecté. Nous pouvons taper ici en bleu et ils sont plus petits. Le deuxième formulaire n'a pas été affecté, non ? Donc, ID est également assez cool de distinguer l'un de l'autre. Ok, c'est une très bonne leçon. Et comme toujours, vous avez des questions. N'hésitez pas à demander. 52. Extensions CSS pour accélérer votre travail: Bonjour, il est temps d'apprendre à des extensions utiles qui permettraient de gagner votre temps précieux. L' un d'eux est appelé support HTML CSS. Qu'est-ce que ça fait ? Notez que lorsque je suis ici et que je voudrais ajouter, par exemple, un autre nom de classe. Et j'utilise le raccourci Contrôle plus espace. Je pouvais entendre beaucoup de mots différents parce que, eh bien, la version de base de la boîte de sutures est juste pari. Quand je commence à taper plus grand comme vous pouvez le voir, d'accord, c'est là. Mais il essaie également de choisir parmi le texte qui est dans HTML et qui n'est pas, pas, pas, pas bon. Comme vous pouvez le voir, vous ne devriez avoir que des cours qui sont disponibles pour vous à partir d'ici, est-ce pas ? C'est tout. Donc, pour le changer, nous ne pouvons tout simplement pas l'installer. Et maintenant, remarquez que lorsque j'utilise le raccourci Control plus espace, j'ai le centre et plus grand. Donc, n est le style. D' ici. Ça a de la classe, non ? Plutôt génial. Bombe, plus grande, et c'est tout. Ok, donc c'est la solution pour ça et aussi pour l'identification. Ou comme vous pouvez le voir, vous pouvez avoir ici sur les identifiants que vous pouvez choisir parmi le panier et les textes uniques, n'est-ce pas ? Parce que vous êtes allé voir deux pièces d'identité ici. La prochaine chose est appelée CISSP. Comme son nom l'indique, il vous permet de choisir comment votre bien, CSS est écrit sans avoir à entrer dans ce fichier CSS. Donc, c'est assez cool parce que maintenant quand je suis vraiment voulu voir comment, par exemple, des œuvres plus grandes, j'ai besoin d'ouvrir des tranches comme et de le chercher. Ça va peut-être, mais c'est assez rapide, non ? Ok, c'est des fichiers, mais imaginez que votre CSS est un BBB plus grand, non ? Comme ça. Et puis vous cherchez le gaz spécifique. Ce n'est pas cool. Ok, alors revenons à ce que c'était avant, ok ? Et résolvons le problème en utilisant le pic CSS. Donc CSS pic. Et comme vous pouvez le voir quand après l'installation, bon. Maintenant, quand j'utilise le contrôle sur mon clavier et que je déplace la souris dessus, eh bien, nous devons recharger notre code Visual Studio donc je vais le fermer et le rouvrir parce que parfois c'est bon. Boogie après l'installation. Ok, je l'ai fait. Et maintenant, comme vous pouvez le voir, maintenant nous avons une sorte d'information sur l'apparence de quelque chose là-bas. Mais le problème est, comme vous pouvez le voir, nous pouvons juste voir ce qui n'est pas et pas tout, pas vrai ? Le problème est que cette extension spécifique aime avoir tout ingrédient ici comme ça, ok ? Nous devons donc le formater de cette façon. Je préfère le formatage comme celui-ci parce que je peux clairement voir que ces extensions sont ici et j'ai ouvert et fermé un support bouclé, mais parfois comme ça. Et comme vous pouvez le voir maintenant, nous avons ici des informations sur l'apparence du Centre, l'aspect plus grand. Comme vous pouvez le voir, c'est un peu buggy parfois peut-être qu'on le répare ? Mais je l'utilise surtout pas pour maximiser, mais pour aller dans cette cravate CSS pour éditer les choses et comment le faire. Je maintiens le raccourci Contrôle, puis je clique sur la logique et je suis instantanément à l'endroit où je veux le mettre à jour. Donc c'est plutôt cool, non ? Donc, je veux éditer quelque chose. Je tiens juste le contrôle et je peux y aller et édité. C' est très génial. Vous pouvez également l'ajouter, à partir d'ici. Pour le faire, nous allons sélectionner quelque chose, cliquez avec le bouton droit, aller pic, puis Peek Definition. Vous pouvez utiliser les sorties de raccourci à 12 alors que je pense qu'il est difficile de frapper N sur le clavier. Et puis vous pouvez, comme vous pouvez le voir d'ici, éditer un échantillon, n'est-ce pas ? Ainsi, vous pouvez, par exemple, boulon de chemin appelé. Et vous pouvez double-cliquer pour entrer dans le CSS STI comme ceci. Et vous pouvez éditer ici aussi, mais vous pouvez l'éditer à partir de là et changer la taille, comme vous pouvez le voir sont le poids de la police à autre chose. C' est seulement une leçon. Merci beaucoup. 53. div vs span | Inline vs bloc: Nous n'utilisons pas cela signifie l'événement ou un intervalle et le réalisable c'est auto années def je suis sûr que Cassie dovish, il est autosomique eux dans local ou nous en ligne. S' il vous plaît emprunter le vaisseau amiral du vagin Coniacian. Allez Nettoyer sur la prochaine chose. D' accord. Span, reins, le crash technique chacun pour taper Jonathan, E point H attribut. Je vais les décaler beaucoup d'argent. Statut, la pile interdira auto Razumovsky don. Estella, les canards ont été proposés au neutron clé. Vous devriez tous savoir navette sombre, maman à Krishnan et les données attributaires. Maintenant Thomas Shabbat, les adultes doivent attacher maman sont copiés et je copie la vraie taxe nous vision tunnel du tout. Akashic chaque texte Turquie, puisque tous les déclencheurs non évidents pour les pousser leurs textes de syntaxe, l'article d'écho, ne m'a pas appris me demander est bâclée, n' ont pas d'autre choix que d'appeler. Le personnel peut généralement effectuer des recherches. Les socialistes jetés mais je vais extérioriser le Bouddha peut neutron mini notre cible. Donc, le DIA, NumPy Air Act ou ADA contrôle de régime Shift E, Allemands de l' EPA ont choisi et à Titus Martinez à temps et route VDJ que c'est tout simplement stupide, bien qu'il, donc ce n'est pas comme nous faisons habituellement tiret d'appeler texte brut une option appelée fascia, le poêle, le texte. Ce sont des mesures de volume maman pour reprendre la vieille souche. La recherche devrait être de souffler appeler le neutron Washington tac toe mode. Si le décodeur comme la limite 2 est 4 plus 2 neutron et aeruginosa est coincé sur elle, ce qui dit au Nigérian pas appris maman à payer pour aller ensemble, pousser longitudinalement. Contact Bs. Oui. Peut habituellement moment qui a deux Martinez du temps. Mais c'est un chrétien, tu es Martinez. Et un dollar par an encore bloc de sels bloc natron n'a pas appris nous a dit. Elle ne va pas utiliser le Nevada entrer près ont tendance à stocker le texte belle journée, certains aliénant. Attention à cela couvre la même chose que nous sommes à choisir scie purulente sur ceux estampillés sur prime directement. Le dernier chiffre pourrait être l'attitude me paie l'imposture a pris un EBS donner à cela. C' est moi, elle nous a poussées fort. Régime d'Alberto Lepidus du Brésil. Donc bin Dustin, les tumeurs au trésor seront toujours un film de province. La petite attaque des enfants. Eve une géométrique. Ils ne développent pas une dizaine d'heures ou une omission, n'est-ce pas ? Golf, balle de tennis. Donc c'est la couleur minimale. Laver pour laver le seau Grant, Colorado. Quelqu' un nous doit parce que nous avons dans chaque couleur, un comme certains os de l'agro-industrie peu ils ont gras opec est minima à Dinah pas besoin d'être rencontré de dizaines de puzzle sur acouphènes le début conduit et ils ont dit, oui, bien trashed. Il nous dit que comme notre version mesure maman deux ensembles de données est passé sur Amanda proposé pour vestes plates ou peut-être échapper bloc de répertoire à dire essentiellement que nous sommes la dose tympan, geste, semer est jeté l'Internet Dolly, anatomie nous en ligne, éprouvée. C' est un appel de minima ou une travée sur la trigonométrie obtenu des travées minimales et non la couleur de fond de rouge. Ils sont sur Zoom. Nous avons dû aller à eux Pâques dans une masse de raccourci artiste pour faire coïncider pour retourner à Kotler, Kong obtient rien d'autre bloc pour me bloquer. Aujourd'hui, c'est l'angle de température. Vous ne couvrez pas la connexion et je vais entrer bas de manuel d' attaque il est à mais pas maman. Un peu de gestes. Le nouvel élan Martinez, petit point Kovach passé par mais Coupang, choses sournoises comme le neutron et le type, def East Ponto, pas de baggie brun aux poches simulées, osha, span, tags, volume, affichage, en ligne, un def, utilisez taxon et bloc d'affichage pour bloquer ce truc fou. Londres. Il y a un certain partenariat au-dessus de lui tentatives mais cornée. Donc, le Propylaia donne à sa déclaration à la fois le professeur Ananya, nous allons correspondre couleur luttant à celle d'un stego me triste qu'elle région soviétique à type II couleur de fond était Nino et La Nina. Merci de restaurer la loi, taco Bodhi arbre. Si la quantité d'enchère d'un corps prototype, couleur islamique de la danse pose, ces intégrales de l'enzyme. J' ai installé la frénésie Israël et Kalina mis fort à travers la base mais il dit toujours comme d'habitude que les résultats chose est accepter la course fini couleurs jetées après moi, Susan, traumatisme initial assis sur les résidents du moniteur sur son ombre à lèvres, nous utilisons SCADA se tient comme il dit, nombre. Mais ce sont des ions DO tomate. Bloc en ligne au-dessus des machines devrait poubelle est plus de 10 pour les textes met les tirer. Oui. Dish Tax van eux dedans. Donc, les textes liquides proposent à votre touche de persona numérique Oui. ligne. Merci, Jacqueline AGMA sur la carte pro-social maladroit. Donc Kush barre, soit demoiselles tau2 devrait être Santa Maria del dot VNC ticker texte souvent que possible. E, pour attacher ta chaussure. Délicieux démon. Souvent aussi possible. Le Giotto somnolent original, maximum Sherlock, tympan. Un moment pour attacher l'estampage. Trouver Krista, c'est que comme déclaration du DACA Germania, Stan ouais. Zoom sur le bord. Pas une option. Renommez Ivana et faites-leur confiance. L' option de bloc est que vous avez Sania voyage ou déclencheurs moteur collant il ya Yad Vashem. Nous avons les gigawatts les plus longs. Metope montre laiton fissure tactique après le redémarrage aquatique, une dist élevée de la douille E, énorme matrilocale pour conduire à Caltech pour résonner. Dorian m'a décalé afin d'arborer un peu de votre pinceau pour mettre une balise div. Événements, pas Dhamma insulte, cluster quand vous mesurez avec le Star Wars moi et les participants pour aller à Caltech tourisme béton près de moi. Donc, pour commencer un message texte à ce jour. Donc le texte, dit Jack, il a une très grande classe de pierre avec un contexte de culture ischémique. Il fait, oui, Minimum dans l'ombre a provoqué une option appelée Paramètre de sélection Statista. Ce sont la méthode de lavage donc elle Jia signifie juste la gestion ou ceux tentés de taper option transposer. Test d'un texte est polymérase jeter un dé qui a énorme besoin de leurs symptômes d'asthme. première année, les mini-siestes de la division deux, chimpanzés qui vendent le vaste ouvert les deux ans COMMENT commencer, j'étais encore sur un arbre à expédier. Nous avons je souhaite faire défiler vers le haut. Nous avons une option pour faire défiler la magie. C' est moi, Sean, aussi l'érosion côtière ou les conduits ou chimpanzés qui pixel. Cosmologiquement dix ans a été fait sur ceux iMovie et impopulaire, estampillé sur Cellco Vicent à la douleur. Chicago, Washington, manuel. Maintenant le tronc central vertèbre bourgeois registre. Mamta peut vasoconstriction ou le texte aligner le toit. Maintenant, vous obtenez un centre officiel de démence ou de Benji. Le Nirvana n'a pas l'étiquette de laver votre ombre au tuteur. Oui. Il a parlé, rationnement est en fait pas encore il ya coloniale. Qu' ils ont obtenu auto BWM livre, qui était en fait le fils des affluents nationaux correspond à Ravana Zaption, l'ego. Oui. Appelle-moi la question de l'ombre de maman. Washington gluco véhicule élémentaire. Garçon, ouais. Natalie, total Diego de VO2, temps de la Memoriam et les applications coupées et que l'ID de connaissance. Des policiers. Diamond gérera un échantillon unique. Autorisations dans votre DAW est seulement appel pas se précipiter vers cosinus 2 pourrait nous prendre. Ça nous dit l'illusion. Un peu de lavage de dynamo. Il envoie des données à l'alignement du texte, au centre. Palo verde mesurer cette voyelle centrale non totale nom de timbre populace au battage. Ii. Ions, pile de bus de navette, pas un Bengio proposé à voyelle centrale. Dr. Va voir maman, timbre, Tegel, Lisa. Ok, chef dense possible. Washington, Java, le toit, Nil, dos texte aligner. L' outre-mer, elle est un partenaire pour payer beaucoup. Vision animale sioniste fait l'ombre du tympan coût par viralité beaucoup Italie Shara à prendre à eux. Elle est bonne tagging, Aikido, Mishnah, regarde TiVo cisaillement Guo signifie au milieu près de la frontière. Tu vois encore Hexagon et Martina. Martina est méchante n'est pas 0. La frontière. Pour faire un génie automatique qui étudient sur un autre et choisir les données de travail Jackie Martinez Austin, que comme un bon plat, le timbre d'or Kanyama Envato à Samhita ensemble de algébriques pour réduire beaucoup TOC. Et il dit généralement espagnol résultant colonial, pas tous garçon vertèbre, aussi lancer la question est laisser un spray fort. Michelle Martinez comme le jamovi moi, certains d'entre vous font Giotto est les valeurs sociales Kotok entre x1 et Barbade puis les afficher qu'ils vont Washington, US, détection automatique. Oui, les problèmes sont coincés égoïques, inline-block sont l'automobile de Benjamin n'est pas simplement cette chose. Maintenant, à mes acteurs d'Etat, le gouvernement serait complémentaire à Soviétique. Il nous a enfermés tous les deux. Span, Sudo Nano triangle tour. C' est ce que Vietnam Illini dynamique diagonale. Peuvent-ils visuellement prendre juste aller non-spam à la mesure du volume maman du tout, juste le calcul du temps d'antenne modèle linéaire Domingo. Et si elle est COVID-19, East Chicago passe en revue le geste, Tasha Prakash à l'heure. Et ce sont des étoiles octet d'Anna. Romantique, contacts touristiques, van, en ligne, belle, minuscule minute. Vous devriez avoir une feuille de coût écrite. Donc CAUTI pour les pros à mon visa ON taco délivré ou yak. Yak arrive Stan. Un autre élément non ambitieux, irrésistible de ne pas être machine de temps de père Noël qui nous emmène à un épisode de intima Takashi Murakami, élément de la culture de la cornée Revlon. C' est l'élan de masse. Les Espagnols ne diva pas. Nouveau projet. Vous avez avalanche tactique, opcode, Chautauqua, UV. Alors entraînés Albo, le Golem et visuellement balles sur puis aller à la veille de la particule à aléser Borden. Notre budget est populaire. Les costumes sont nauséeux. 39 Internet des avians. Tag est Domitien ici et le musulman est méchant chaque navette à Washington prendre plusieurs yak tabou, bloc de la Vierge. Maintenant dans la paire TAC, bloc touchable d'attaque à l'attaque de routine, bloc d'érosion attaque l'inline. Bien que les établissements Ashish mauvais. Pas tous potentiellement coincé tag inline maintenant, mais vous avez toujours penché tour pour payer tout système de renseignement irakien ne traite pas les points sont en fait Domitien son via def est une pièce clé stego savoir Salam. Donc oui pièce Montessori option de version quoi que ce soit sur dégustateur sur Internet ou au moins élément en ligne risqué ou trop de whisky, élémentaire, local, véritable pavillon question trich pris. Pas vraiment plus brillant. Mais j'espère que bientôt, l'identité est navire malhonnête moins cher plus deux des côtés du quiz de navire sur regex partagé ou bancs ou survol. Une partie du quoi pour est d'utiliser bloke over pour inline, tag. Ceux qui troquent pour manger. J'ai vu une chance pour vous les gars que j'ai transférée pour faire ou pas, ceux qui font même Vick, dont les familles ne sont pas individuelles. Yellowstone nous dicte une transfusion. Je voulais proposer d'ancrer cela en ligne diagonale. Mais un garçon sensé. Et l'éditeur de liens fait cela dans il est vu et machines automatiques, VGG, sociologie de Washington, Dr. Gautam, texte clignotant ne coupe pas le centre Vanuatu est central. Je veux faire triangle et d'autres technologies son intérieur. Donc, images textuelles, vidéo, donc xi j, il y a une bonne discussion commence une option pour le panel d'aujourd'hui, le proximal, pas les années centrales. Et même si vous n'avez pas déclenché Chautauqua, vous avez les soi-disant totaux de cognac pile. Et nous devrions prendre le texte et réactiver central vital à notre Elle ne modèle brin, même proposer à Anita, Anita miel. Java. dadaïstes sont d'autres points. N' importe quel Java. Java jusqu'à est vulnérable, dit que je devrais traduire social VFB, suédois, elle a juste fait doux en Java. Puis, comme d'habitude, le béton supérieur a maintenant changé en Java. Ok, la direction de gauche. 54. CSS : Affichage de la propriété: Bonjour, mes amis. Aujourd'hui, nous allons parler de la propriété d'affichage, qui change à mesure que le nom suggère comment quelque chose est affiché. Donc, comment la balise est affichée sur votre site Web. Par défaut, la balise div a un bon bloc d'affichage. Donc parce que nous avons du bien ici maintenant, seulement des div avec des textes différents. Cela ne signifie pas qu'il sera montré différemment, non ? Puis le bloc. Donc, quand je l'ouvre ici, une vue pour que vous puissiez voir tout ici est affichée comme bloc, non ? Il y a un texte différent ici qui suggère que nous avons peut-être l'air différent, mais cela n'a pas d'importance. chose la plus importante est quel est l'affichage par défaut défini par navigateur Web ? Et nous pouvons le remplacer juste plus tard par, par exemple, en accédant au type 1 ou au type 2 ou en tapant gratuitement en utilisant CSS. Changeons l'affichage pour bloquer partout. Ok, comme ça. Donc, nous allons faire le même affichage dans chaque cas, qui est bloc, serait juste des valeurs par défaut. Vous voyez que rien n'a changé, non ? Parce qu'on a fait la même chose. Qu' est-ce que le navigateur Web. Mais quand nous changerons de type 2 en ligne, que se passe-t-il ? Comme vous pouvez le voir maintenant, tout ici est affiché en ligne, donc l'un après l'autre, non ? vert est l'arrière-plan et le texte est dans ces arrière-plan et ce qu'il ne prend pas tout l'espace comme en cas de bloc. Aussi, il n'y a pas d'entrée supplémentaire après chaque div, non ? Parce que nous changeons le comportement par défaut. Maintenant, nous l'affichons comme inline. Réfléchissez. D' accord ? Mais il y a encore une chose comme display inline-block. Que va-t-il se passer ? Au premier coup d'œil, quand vous le regardez, vous pourriez être comme un K. Ça fonctionne cette même lumière en ligne, non ? Parce que tout est après l'autre. n'y a pas d'entrée et de volonté supplémentaire. Il a un bon fond, comme dans l'élément en ligne, non ? Et c'est vrai que cela fonctionne de la même manière qu'en ligne, mais il a également une fonctionnalité du bloc. Quel genre de fonctionnalités ? Eh bien, je t'ai dit dans la dernière conférence que tu ne peux pas changer la taille des éléments en ligne, non ? Eh bien, quand nous faisons un vol avec 300 pixels, alors il restera libre 100 pixels. Cependant, dans le cas de inline-block, ces changements, nous pouvons envoyer l'ensemble de la largeur et nous pouvons les changer, par exemple, cacher assez facile à autre chose, non ? Notez que maintenant nous avons des blocs en ligne qui prennent de l'espace, mais ils sont affichés en ligne car ils sont les uns après les autres. n'y a pas d'entrée après chaque bloc, non ? Vous pouvez voir qu'ils sautent quand il n'y a pas assez d'espace. C' est comme ça que ça marche. Ok, parce que c'est comme ça que les éléments en ligne fonctionnent. Aussi, si j'avais ici un peu plus d'entre eux, comme par exemple, si nous frappons moral que comme ça. Vous remarquerez aussi que quand il n'y a pas assez d'espace que nous avons sauté à une autre ligne, non ? Donc, pour arrêter de montrer tout en ligne comme dans le cas où nous voulons briser la ligne. On devrait utiliser la balise break. C' est pour ça qu'on utilise la ligne de rupture, la ligne de rupture qui D, notre conversation droite. Maintenant, comme vous pouvez le voir, que nous arrêtons le processus de mise en conformité d'ici à ici. Et lorsque nous définissons la taille à, par exemple, 250 pixels, vous remarquerez que nous avons trois blocs qui sont affichés en ligne. C' est pourquoi cela est appelé inline-block car il a de bonnes fonctionnalités en ligne parce que les choses sont affichées en ligne. Et il a une bonne fonctionnalité de blog comme vous permettant de changer la largeur et la hauteur, non ? Mais il ne s'applique pas et n'entre pas à la fin, n'est-ce pas ? Par le bloc par défaut fait. 55. EMMET | TRKS Créer des étiquettes avec l'identifiant et le cours: Bonjour, mon ami. Aujourd'hui, nous allons parler de boissons MHC que nous vous permettons de créer, taxe, y compris l'attribut de classe sans avoir à écrire des choses comme div, alors nous aurions besoin d'ajouter l'attribut iCloud, alors le nom de la classe il y aura horrible créer des choses comme ça, de cette façon, non ? C' est pourquoi il y a une façon spéciale de le faire. Et vous avez besoin de jazz tour nom de verre. Super. C' est un peu plus rapide, non ? Donc, de la même manière, comme vous sélectionnez des lunettes, vous pouvez créer le bon. Donc, utilisez aussi point, puis le nom de la classe. Et vous ne l'avez probablement pas fait. Cette dette insère l'attribut class dans la balise div. Pourquoi est-ce que c'est parce qu'il le devine. Il y a quelque chose que Dieu est appelé, comme des noms de balises implicites. Emma peut deviner. Il est intelligent que lorsque vous créez une classe et que vous n'avez pas spécifié de nom, vous êtes pro voudrez probablement la créer dans div, ok ? Donc on peut l'écrire comme ce nom de verre, non ? Mais tu n'en as pas besoin. Vous pouvez simplement taper le dapp. Bien sûr, si vous voulez ajouter une classe aux gens, par exemple, paragraphe, alors vous devez taper le nom de la balise, puis le nom de la classe, non ? Donc, ce n'est que pour les situations où vous voulez juste créer un div. Mais si vous voulez le mettre dans le paragraphe, alors vous devez taper manuellement 2 quel type de balise vous voulez ajouter l'attribut de classe, ok ? C' est ainsi que vous créez une classe et devinez ce que, pour créer l'ID, vous tapez, que faire si vous voulez créer à l'intérieur du paragraphe, par exemple, vous utilisez le hachage. Alors le nom de la pièce d'identité, non ? Donc, la même chose comme ici, à droite, pour sélectionner, vous utilisez le hachage. Ok, assez facile à retenir. Cependant, est la dominante de cette conférence ? Non. Et si je veux ajouter plus d'un nom de classe, ce que vous pouvez faire de cette façon, n'est-ce pas ? Je pense que c'est plus facile de le faire de cette façon parce que vous avez de bonnes suggestions ici, non ? Vous pouvez tous acheter, peut choisir Taiwan, je peux choisir Type 2, non ? Si j'utilise les raccourcis d'espace de la barre de contrôle. Donc je pense que c'est mieux que de le faire comme ça. Tapez un et tapez deux et tapez trois, non ? Je n'ai pas aimé comme ça. Je pense que c'est mieux. Cependant, si vous voulez en créer plusieurs à la fois, alors, vous savez, choses comme ça peuvent vous faire gagner du temps parce que vous pouvez taper deux, taper trois, et le multiplier par 10, alors vous gagnez du temps. Mais voulez-vous créer un seul élément ? Je ne m'embêterais pas à taper le nom de la classe ici, non ? Je voudrais juste utiliser les données pour créer une attaque. Et il y a des noms de balises plus implicites façon de créer en utilisant Emmet. Parce que remarquez que nous avons ici, par exemple, liste non ordonnée. Et toujours à l'intérieur de la liste non ordonnée, vous aurez list-item, non ? Parce que c'est comme ça que ça marche. Vous avez bien que vous êtes liste non ordonnée et à l'intérieur de celui-ci, vous tapez des éléments de liste l'un après l'autre, n'est-ce pas ? Donc tu fais quelque chose comme ça. C' est pourquoi lorsque vous faites quelque chose comme U, L et que vous voulez créer une classe pour chaque LI. Alors tu tapes ça. Vous n'avez pas besoin de taper LI dot name of glass, non ? Ouais, Oh, Jazz ça et ça marchera pareil. Et vous pouvez le multiplier par cinq fois et vous avez le nom de la classe pour chaque allié. Et ce qu'est l'école. Vous pouvez, par exemple, utiliser d'autres fonctionnalités. Maintenant, nous avons le genre. Quand nous tapons 1 ici, vous remarquerez si vous regardez le type 1, mais nous pouvons utiliser le signe dollar comme nous l'avons déjà dit, et comme vous pouvez le voir, nous avons de bons Now Type 1, Type 2, Type 3, Type 4, type cinq, quelque chose comme ça, est utile la plupart du temps pas pour le bien de CSS, mais quand vous apprenez le script Java, quelque chose comme ça vous aidera à choisir l'allié spécifique et les informations que cela peut être utilisé ici dans JavaScript, par exemple. D' accord ? Parce que vous vous demandez peut-être pourquoi je vous embêterais à créer quelque chose comme ça ? Il y a une situation comme celle-ci est allé quelque chose comme ça est nécessaire. Ok, donc vous et nous pourrions aussi table rangée. Remarquez que nous table de perspicacité, nous avons des rôles de table, n'est-ce pas ? Donc, vous n'avez pas besoin de lier les données de la table de ligne de table quand vous l'êtes, je vais créer la classe pour l'agneau, n'est-ce pas ? Donc, nous pouvons simplement taper un rôle par exemple et une colonne, n'est-ce pas ? Et comme vous pouvez le voir, nous créons une table avec une ligne de table et une donnée de table. Si nous voulons avoir plus de colonnes, nous pouvons simplement multiplier, par exemple, la colonne par cinq. Et ce que vous pouvez voir maintenant nous avons 1, 2, 3, 4, 5 données de table. Si vous voulez plus de lignes, alors vous pouvez le multiplier par 10, par exemple, maintenant nous avons dix lignes de table avec chacune d'elles ayant cinq colonnes, n'est-ce pas ? Plutôt rapide. Et aussi ils sont nommés et bien sûr, vous pouvez, vous savez, utiliser le signe du dollar afin d'avoir chaque ligne ayant une valeur différente. génial, n'est-ce pas ? Alors c'est tout. Et il y a aussi quelque chose comme ça. Nous pouvons savoir si vous voulez ajouter un élément en ligne à l'intérieur de l'élément en ligne, car E m est l'élément en ligne. Et à l'intérieur. Et vous ne pouvez pas mettre le bloc correctement, comme def, le droit va avec ça ne fonctionnerait pas correctement. C' est pourquoi vous pouvez faire quelque chose comme am EM, et par exemple, nom du verre. Et il mettra juste la portée à l'intérieur de dire va par exemple, la bêta, non ? Parce que c'est aussi en Irlande et tout autre élément en ligne, ok ? Vous n'avez pas besoin de spécifier que vous voulez mettre ce chemin, si vous voulez savoir mettre dans B, m, alors bien sûr vous devez le nommer, mais sinon vous n'avez pas besoin de taper cette pompe car ce sera la valeur par défaut ce sera le cas, il devinera quel genre de repli il devrait inclure. Ok, ce n'est que cette leçon. Merci. 56. Règles de sélection des tags en fonction de l'importance de la règle CSS: Bonjour mon ami. La laiterie va être une situation où on dirait que la guerre est en cours. Pourquoi cette règle ne fonctionne pas, pourquoi je fais tout correctement et je ne trouve pas un moyen de faire fonctionner cette règle. Et ça arrive parce que, eh bien, vous ne savez pas ce dont nous allons parler dans cette conférence l'importance prioritaire des règles quand vous choisissez des choses, d'accord ? Et c'est assez similaire à la façon dont fonctionne la cascade, mais c'est comme, vous savez, une chose un peu plus précise parce ce que nous savons maintenant que quand vous créez un style ici, non ? Et quand vous accédez au type 1 et quand vous changez l'arrière-plan ici, cela signifie que c'est plus important que cette chose à partir de la source externe, n'est-ce pas ? C' est tout. C'est juste plus important, d'accord ? Mais si je fais des choses similaires ici, non ? Que se passe-t-il lorsque je fais auto-diagnostic créé type 1 ? Et maintenant, j'ai changé la couleur de fond en bleu, par exemple. Lequel devrait être choisi jours un sur celui-ci. Et comme vous pouvez le voir, ceux-ci à y 0, faisons-le peut-être de cette façon. Maintenant, il sera lu. Pourquoi est-ce ainsi parce que lorsque vous regardez ici, si l'importance prioritaire est égale, alors qu'est-ce que nous avons le sélecteur qui fait la même chose, n'est-ce pas ? Et cela s'appelle le sélecteur de classe et c'est la même chose. Il a la même importance. Ensuite, les propriétés sont combinées et celles qui se produisent plus tard remplacent la précédente plus tard. Donc, cela signifie que, hey, celui-ci est plus tard dans le fichier styles.css, alors cela signifie que la couleur de fond va être rouge. D' accord. Et bien, sinon, ce n'est pas l'ordre qui compte, mais l'importance ou est-ce que ça veut dire, eh bien, si nous avions un sélecteur d'ID ici, donc par exemple, je vais dire, Hey, vous savez ce qui n'ajoutera pas ceux-ci va être joli gars important. Donc je vais l'appeler comme ça et je veux que ce soit définitivement, par exemple, du chocolat, non ? Et c'est du chocolat. Celui-ci est du chocolat et peu importe où ces doigts jouent, je peux le placer ici, va être du chocolat. Je peux le placer ici, ça va être du chocolat. Pourquoi ? Parce que c'est le sélecteur d'id et l'ADC dans la cascade. Quelle chose plus importante plus tard, il y a CSS en ligne et plus léger il y a des fonctionnalités importantes. Donc si je fais quelque chose comme ça, tu sais, j'ai lancé ce gars pour faire, par exemple, avoir la couleur de fond pour être, je ne sais pas, console. Tu verras que le signal de réduction, d'accord ? Et parce que c'est la chose la plus importante, mais s'ils ont parfois des situations où vous pourriez être confus et même ceux-ci ne changeront pas la couleur, alors il est temps d'utiliser quelque chose appelé un mot clé important, ok, le point d'exclamation important et il devrait être placé avant le point-virgule, d'accord ? Et c'est encore plus important, mais ne le fais pas, ne l'utilise pas. Si vous le voyez, vous saurez pourquoi quelque chose ne fonctionne pas. C' est pour ça que je te le montre. D' accord ? Parce que parfois tu peux tout faire correctement ici, non ? Et quelque chose. Et cette règle n'est pas appliquée à la balise de votre côté. Et puis vous êtes comme ce qui se passe, alors il est probablement temps de regarder HTML5 et de chercher la personne qui a fait cela et, et, et corriger soit un indice, chercher le, chercher les doigts comme ça, et corriger en l'enlevant et en faisant tout bien. Le fichier externe ne tue personne. Je plaisantais. D' accord. Donc, il y a multivarié ce qui est plus à elle ? Parce que, eh bien, on a l'étiquette du corps, non ? Et remarquez que voici quelque chose comme l'héritage. Qu'est-ce que ça veut dire ? Cela signifie que certaines règles qui sont comme, par exemple, le charbon ou la totalité de la police sont héritées. Donc, par exemple, quand je tape ici et que je change de couleur ou deux, quelque chose comme ça, cela signifie que cette couleur va être héritée dans chaque balise qui se trouve à l'intérieur du corps. C' est comme quand on a un père, maman, on peut porter la couleur de l'œil ou les grandes portes pour toi. Mais, vous savez, nous héritons des choses des parents et diff est un enfant pour corps. Donc boda est évident pour les choses profondes et dv héritent du corps. Cela ne signifie pas qu'il va hériter de toutes les règles parce que certaines règles ne le font pas. S' ils étaient hérités, ce serait stupide, non ? Mais des choses comme le charbon ou de ça, de la police. C' est plutôt une bonne idée, non ? Parce que ce serait stupide si je devais changer la couleur pour chaque fois que possible. droite ? Je ne me souviens donc pas lequel est hérité. Je pense juste dans mon esprit, ce qui serait une bonne idée de l'hériter, non ? Donc la couleur est une bonne idée d'hériter VD par le nœud, par exemple, la frontière autour du corps serait stupide d'hériter dans div, non ? Parce que tout briquet aurait une frontière autour de la, ce serait stupide, non ? C' est comme ça que vous vous souvenez de ce qui est hérité ou non. Et comme vous pouvez le voir, c'est la chose la plus élevée ici. Et cela signifie aussi parce que c'est la cascade, c'est la liste la moins importante, ce n'est pas important, non ? Donc ça veut dire que si vous utilisez l'attaque de sélecteur, n'est-ce pas ? Donc, si vous utilisez le Type 1 par exemple, et que vous changez l'écrivain érudit pour quelque chose de gars comme, par exemple, la brique de feu. Vous remarquerez que le savant pour le type 1, la police a été modifiée, non ? Vous pouvez le changer pour tout ce que vous voulez parce que peut-être nous l'avons hérité. Mais c'est plus important ce que je dis dans le deck, le sélecteur de classe, ok ? C' est plus important. Le sélecteur de classe. Ensuite, j'ai désélectionné et en ligne CSS, puis l'important, Donc c'est comme ça que cela fonctionne. Je veux aussi te montrer quelque chose d'assez génial. Remarquez que nous pourrions faire quelque chose comme ça, tapez un et tapez deux ans. Donc, il est, il est assez correctement remboursement parce que nous allons classe peut avoir deux valeurs libres 45 jours à vous. Et maintenant, il y a un problème. Comme vous pouvez le voir, nous avons le type 1 et le type correct, parce que nous avons eu le type 1, le type 1 et le type 2. Donc, la première chose qui se passe est que nous relions ce qui est la combinaison, ce qui n'est pas présent dans chacun d'entre eux, n'est-ce pas ? Donc Kohler va être comme, tu sais, dans ça et ça en ce moment. Donc nous avons la couleur indigo, c'est sûr. Ensuite, nous pouvons voir que nous avons un bon type un, qui a obtenu la couleur de fond bleu, puis nous avons la couleur rouge, et puis nous avons vert, qui est le gars, qui est la couleur de fond que ces derniers dans ce CSS serré, c'est celui-là, non ? C' est pourquoi, comme vous pouvez le voir, la couleur de fond est vert Jasmin. On a dit que ça allait être éblouissant. Si nous changeons l'ordre comme ça, alors cela signifie que c'est le dernier et nous avons lu ici, ok, dans le type 1 et le type 2. Donc, l'ordre est ce qui compte quand nous avons la même priorité, juste, une, parce que nous utilisons le sélecteur de classe dans les deux cas. C' est comme ça que ça marche. Et vous vous demandez peut-être, comment puis-je me souvenir de tout ça ? Eh bien, imaginez que vous êtes un processeur programmé en ce moment. C' est une sorte de programme d'analyse. Tu es un programme, d'accord ? Donc si vous êtes un ordinateur et que vous analysez les choses qui sont écrites ici, vous lisez des choses de haut en bas à droite ? Et tu es genre, ok, donc je dois changer la couleur de fond en bleu. Ok, j'ai changé la couleur de fond du tableau de conception. Quoi plus tard, j'ai besoin de changer la couleur de la police en indigo, OK, et le faire. Et puis, oh, il y a un ou des doigts comme ça et je dois changer la couleur de fond en rouge maintenant. Ok, donc je change de bleu en rouge. Ok, alors j'ai le type de classe 2. Ok, donc je dois changer la couleur de fond en vert, d'accord, alors je vais la changer en vert parce que c'est plus tard, non ? C' est comme ça que vous vous en souvenez parce que c'est l'ordinateur analyse tout de haut en bas. D' accord ? Donc, la dernière chose est toujours la plus importante, mais seulement si nous avons le même sélecteur. Je vous dis qu'on l'a fait encore parce que soit vous utilisez, par exemple ici, un échantillon IID, non ? Et je le choisis par échantillon. Cette chose est la chose la plus importante en ce moment. On peut changer la couleur de fond en un léger coup de ciel, non ? Et comme vous pouvez le voir, c'est bleu ciel clair. Mais je peux le mettre en haut de votre style.css, Il va toujours être bleu ciel clair est parce que, comme je l'ai dit, si la priorité est égale seulement, alors les propriétés sont combinées et celles qui se produisent plus tard écrasent le précédent. Sinon, ce n'est pas l'ordre que les boîtes, mais l'importance. Et voici juste un indice. Plus le choix est précis, plus sa valeur est élevée, non ? Notez que l'héritage est quelque chose que vous pouvez changer plus tard dans votre vie. Si vous êtes stupide, alors vous pouvez si vous êtes para pire, vous pouvez physiquement devenir intelligent. Tu sais, certaines choses ne peuvent pas être changées. Par exemple, la couleur des yeux, non ? Mais certaines choses peuvent être réparées. Donc plus tard, quand on aura le sélecteur, c'est plus précis, non ? sélecteur de classe est plus précis, sélecteur d' id est encore plus précis. CSS en ligne plus précis, important, ceux-ci plus précis. Donc, plus quelque chose est précis, plus important, plus sa valeur est élevée. Et la chose que la règle qui va être appliquée est celle qui est plus précise. Ce n'est que cette leçon. J' espère que vous comprenez maintenant les problèmes de chaque créateur CSS. Merci beaucoup. 57. Exercice du sélecteur: Bonjour tout le monde. Il est temps de s'entraîner. Rappelez-vous que le DV veut être quelqu'un qui crée des sites Web. Vous ne pouvez pas regarder les vidéos, comme sur le pilote automatique. Vous venez de dépouiller les regarder et ne pratiquez pas. Vous devez pratiquer ce que vous voyez parce que sinon vous ne vous souviendrez pas de toutes ces choses. Il y a beaucoup, beaucoup de nouvelles choses à venir cours d'âge et vous devez les pratiquer. Faites au moins ce que je fais dans la conférence. Jouez avec les sélecteurs, jouez avec la taxe, rappelez-vous à ce sujet. Donc c'est une sorte de conférence de rappel. D' accord ? Je veux que tu crées une table que j'ai faite ici. Ok, faites-le manuellement, aussi seul. Et vous pouvez copier la partie sélecteurs à partir d'ici en essayant de créer une description de chaque sélecteur par vous-même. Ok, donc vous pouvez comparer à ce qui est ici et voir si vous comprenez, ok, le premier gratuit est assez simple. Lorsque vous tapez le P ici, vous allez simplement sélectionner ce que chaque paragraphe. Donc, chaque paragraphe, qui est, par exemple, à l'intérieur de cette div ou à l'intérieur, par exemple, tag body, non ? Chaque fois que c'est le cas, vous allez le sélectionner et vous pouvez changer la couleur des paragraphes. Faites par exemple le rouge. Et comme vous pouvez le voir, nous nous référons au n. Ceux-ci sont rouges parce que ce sont des paragraphes, non ? Nous pouvons clairement le voir aussi quand vous utilisez l'inspecteur. Et nous pouvons voir que ce paragraphe est ce paragraphe ce n'est pas paragraphe, ce paragraphe. D'accord. Maintenant, allons sélectionner tous les éléments. Cette classe est f2. Donc, pour ne sélectionner que les gars pour qui est la classe, nous devons utiliser le point, non ? Et cela signifie que nous allons sélectionner ce pour quoi la classe, et nous ne nous soucions pas si cette classe Foo est à l'intérieur du paragraphe ou D. Ça n'a pas d'importance. On vient de dire : « Salut  », c'est tout. Et comme vous pouvez le voir, ça marche comme ça. Si nous voulons sélectionner uniquement des paragraphes, oubliez pas que vous devez le spécifier avant les données. Donc vous devez taper la puissance de notre graphique ici, à droite, la balise p ici. Et maintenant, comme vous pouvez le voir, nous n'avons sélectionné que les paragraphes. Retirez-le. Nous allons sélectionner le div et les paragraphes, ok, parce que c'est un div avec la classe foo. D'accord ? Si vous voulez sélectionner tous les alignements, cet ID est égal à, vous, utilisez juste le hachage, ok ? C' est assez simple, donc nous ne le ferons pas. Et voici quelque chose qui vous permet de sélectionner tous les éléments qui sont profonds et être en même temps. Donc, si vous prenez la douleur, comme vous pouvez le voir, nous allons sélectionner tous les éléments parce que, eh bien, la vérité est que P est à l'intérieur de div, mais ça n'a pas d'importance, non ? Parce que nous allons sélectionner D et P chaque fois que c'est, en ce moment. Cependant, si nous supprimons la virgule, vous remarquerez que nous avons sélectionné uniquement les paragraphes qui sont à l'intérieur, qui sont à l'intérieur de la, c'est important. La grande différence. Cela vous permet donc de sélectionner la fin B et d'appliquer la règle ici. Cependant, lorsque vous le faites comme ceci, cela signifie sélectionner tous les p qui sont à l'intérieur du if et seulement à l'intérieur du div. D' accord ? Donc celui-là, celui-là, celui-là du tout. Ce n'est pas à l'intérieur du si ce paragraphe à l'intérieur du corps, n'est-ce pas ? C' est comme ça que ça marche. Et si nous le changeons à, par exemple, point foo, vous ne sélectionnez que des éléments. Cette classe est égale à 4, mais ils sont à l'intérieur de la mort. Ils doivent être à l'intérieur de la droite. Donc, si j'ajoute ici la classe foo, ceux-ci ne seront pas sélectionnés, mais ceci, ceci, ceci, et ceci sera sélectionné. Comme vous pouvez le voir, c'est fini. D' accord. Qu'est-ce qu'on a d'autre ? Comme vous pouvez le voir, nous pouvons le spécifier. Nous pouvons dire que, hé, je veux seulement des paragraphes à l'intérieur de la div qui a la classe foo. Donc, cela signifie que cela ne sera pas sélectionné maintenant, mais ceci et cette roue, comme vous pouvez le voir, c'est fini. C' est ainsi que fonctionnent ces sélecteurs de base. Mais nous avons ici aussi quelque chose comme sélectionner tous les éléments sur le côté, qui est le signe d'astérisque, ok, le signe de multiplication. Utilisons-le. Donc, quand vous faites des trucs comme ça et que vous dites couleur rouge, vous remarquerez que tout est rouge en ce moment. Et bien, pour être honnête, ce n'est pas seulement l'endroit où il est utilisé. Remarquez que quand on fait quelque chose comme ça. Donc, nous sélectionnons seulement la classe foo à l'intérieur de la droite. Donc, nous sélectionnons sur ceci, ceci et ceci. Pour être honnête, voici quelque chose comme l'astérisque. Cela signifie sélectionner tous les éléments. Cette classe est égale à foo. Et c'est, vous pouvez voir que rien n'a changé, non ? Cela fonctionne de la même façon, comme si c'était là ou non. Mais bien, parce que c'est une opération si fréquente lorsque vous utilisez le CSS que les gens ont décidé qu'il peut être omis. D'accord ? Donc tu n'as pas besoin de le mettre ici, n'est-ce pas ? Mais si quelqu'un l'utilise, c'est bon de savoir ce qui se passe, d'accord. Parce que si tu avais vu quelque chose comme ça et que je ne l'avais pas dit, quelque chose comme ça existe. Vous serez surpris que vous ne sachiez pas comment ça marche, n'est-ce pas ? Donc maintenant tu sais que cette chose sélectionne tous les alignements possibles, non ? Et quand vous l'utilisez avec la classe va dire tous les éléments possibles, mais il doit être égal à cette classe. Et aussi dans ce cas, il doit être à l'intérieur de la div, non ? Mais on n'a pas besoin de l'utiliser, non ? Il peut être omis. C' est tout dans cette leçon. Merci. 58. Bordures autour d'éléments: Bonjour, mon ami. Aujourd'hui, je vais vous montrer comment ajouter une bordure sur des éléments de votre côté, comme par exemple, div ou table que nous ajouterons bordure faire à l'avenir. Donc, afin d'ajouter une bordure, vous devez spécifier son type. Dharma ligne qui pointillé, pointillé, solide double rainure, crête ins et outs à et ainsi de suite. Lorsque vous utilisez l'espace Control plus, bien sûr, vous allez dans et obtenez quelques conseils sur ce que vous pouvez choisir, n'est-ce pas ? Donc, vous n'avez pas besoin de les mémoriser, mais il est bon de les voir au moins une fois tous en un seul endroit, car cela vous permettra de choisir l'un d'eux quand vous avez besoin du droit. C' est donc bon de les voir tous en même temps. Le problème est que parce que nous supprimons la marge ici, nous devrions ajouter une marge à l'intérieur de nos éléments qui sont diff. Donc, nous allons ajouter un espace qui sera égal à 10 pixels entre chaque div et notre corps entier. Et comme vous pouvez le voir, nous avons ajouté une marge en utilisant cette règle et maintenant il est plus facile de l'analyser. Donc, comme vous pouvez le voir, quand nous ajoutons le salé, nous avons ici un fer solide. Lorsque nous utilisons le pointillé, nous avons des points juste autour ou une bordure pointillée. Nous avons des tirets, double ligne, nous aurons le graphique à double ligne ressemble à cet inverse du groupe s'appelle la portée. Et il ressemble à ce début de l'encartement. Et bien sûr, vous pouvez mélanger les choses, ce qui n'a pas fonctionné parce que je n'ai pas ajouté ici le style. Comme vous pouvez le voir. Maintenant, nous avons ici, les tirets ici, nous avons la croissance inférieure pour que vous puissiez mélanger les choses, ok ? Mais ce n'est pas tout ce que vous pouvez faire avec les frontières parce que, eh bien, vous pouvez définir une bordure spécifique, vous obtenez et définissez, par exemple, gauche de la bordure à lire. Et vous pouvez, vous ne pouvez tout simplement pas définir une autre frontière. Comme vous pouvez le voir, il n'y a que bordure sur le côté gauche. Et nous l'utilisons comme une décoration qui montre qu'il s'agit de messages texte importants, comme par exemple, une définition, non ? Donc, voici une bordure que nous changeons également la couleur. Alors, comment faire de telles choses ? Supprimons, par exemple, cette chose d'ici. Et remarquez que lorsque je tape bordure, nous avons ici beaucoup d'indices. Et nous pouvons choisir ici quelque chose comme le haut, gauche, la droite, et le bouton. Et il vous permet de changer la frontière spécifique à droite, vers le haut, vers la droite, vers le bas et vers la gauche. Donc, nous pouvons définir, par exemple, bordure inférieure deux As et bien sûr, le style à quelque chose comme, par exemple, insérer. Et vous remarquerez que maintenant ici, donc ici, nous avons seulement la frontière en bas, à droite, pas partout. Si nous supprimons le mot du bas, vous remarquerez que nous avons du bien partout en haut, droite, en bas et à gauche. Mais nous pouvons spécifier le style que vous voulez définir. C' est la première chose. Vous pouvez également définir la couleur pour cela. Donc vous pouvez dire quelque chose comme la bordure, tiret et le bas et bien, et nous ne voulons pas rester assis cette fois maintenant, mais nous pouvons définir la colonne et nous pouvons définir ici, par exemple, la couleur comme le chocolat. Et comme vous pouvez le voir, nous avons bien ici, le changement de couleur. Nous pouvons également changer la largeur de la bordure Bolton. Nous pouvons donc changer la taille de leur frontière. Ainsi, par exemple, nous pouvons le définir à 10 pixels. Et comme vous pouvez le voir, c'est 10 pixels, c'est un peu plus Vk, non ? Le WAF a changé. Le problème à propos de la solution comme celle-ci est que nous avons vraiment tapé beaucoup de choses pour simplement spécifier le bas de la frontière de cette classe, non ? Il y en a quatre. Bon pour nous, quelque chose comme une propriété de chasse courte pour fixer la frontière. Comme vous pouvez le voir, vous devez d'abord taper la largeur, puis le signe, puis la colonne. Donc on utilise juste la couleur ici. Et puis nous devons taper la largeur, donc 10 pixels. Ensuite, nous devons taper quelle étoile ça va être. Donc, dans notre cas, c'est incrusté. Et puis nous devons taper la couleur. Donc, dans notre situation est le chocolat. Donc maintenant, nous pouvons juste supprimer cela, et c'est vraiment, c'est égal à cette chose ici. Mais remarquez que je n'ai pas ajouté de bouton ici. Et à cause de cela, nous allons définir toutes ces valeurs à chaque bordure en haut, à droite, en bas et à gauche. Donc, si tu veux dire, hey, Island, ne choisir que le fond, et ensuite je vais dire un fond de frontière. Et maintenant, comme vous pouvez le voir, nous avons changé seulement le bas de la chose ici, comme vous pouvez le voir, je l'utilise ici pour définir la bordure gauche à 50 pixels, puis je change la couleur de fond. Et à cause de ça, on dirait que ce sont des textes plus importants, non ? Il y a ces choses rouges ici sur la gauche, qui est une frontière, non ? Donc, ceci est, cela peut être assez utile. Notez aussi que vous pouvez changer la largeur de nos blocs comme ça, n'est-ce pas ? Et ça va être mieux quand tu le feras. La plupart du temps quand il n'y a pas assez de texte, n'est-ce pas ? C' est donc une bonne idée de s'en souvenir. Vous pouvez faire de telles choses. Il est également bon de savoir que, eh bien, remarquez que lorsque nous définissons la frontière comme ceci, donc à tout, nous pouvons supprimer , par exemple, ceux-ci et celui-ci en utilisant quelle bordure. Et nous voulons choisir le haut, puis le style, et nous pouvons le mettre à zéro. Comme vous pouvez le voir, nous enlevons la bordure supérieure. Maintenant. Nous pouvons supprimer le style de bordure. Bordure, style droit à aucun. Et comme vous pouvez le voir, je retire aussi le côté droit. Rappelez-vous qu'il est très, très important quel ordre vous tapez toutes ces choses parce qu'Eve, nous commençons à partir de cela et ensuite nous ajoutons la frontière. Vous remarquerez que nous n'avons rien retiré. Pourquoi c'est ça ? Donc, c'est parce que le CSS est monté, être interprété de haut en bas à droite. Donc, quand nous sommes dans ce sélecteur spécifiquement, ordinateur le lira. Il doit enlever la bordure en haut à droite. Et puis il le lira. Il doit ajouter la bordure en haut à droite, en bas à gauche, à droite. Donc on n'a rien fait de ce qu'on voulait faire. Donc, cette conférence est également importante non seulement parce que vous avez appris ce qui est la frontière, mais vous devez vous rappeler dans quel ordre vous mettez les choses parce que parfois vous pourriez être comme, pourquoi cela ne fonctionne-t-il pas ? Ça ne marche pas parce que vous mettez les choses hors de l'ordre. C' est joli, assez important. C' est aussi bon à nul. Eh bien, nous allons commenter que lorsque vous définissez le style de bordure, vous pouvez mettre ici la valeur un et la valeur deux. D' accord ? Donc ça veut dire que, eh bien, tu pourrais taper quelque chose comme, merci, c'est génial. Une autre définition, la définition deux. Et remarquez que lorsque je tape un style de bordure , par exemple, solide, nous allons avoir peur de tout solide. Mais quand je fais solide. Et puis par exemple, mec, comme vous pouvez le voir, nous avons bien sur la frontière en haut et en bas. Pourquoi en est-il ainsi ? Parce que si vous mettez seulement, si vous mettez plus d'une valeur, alors la valeur une est montée, appliquez le haut et le bas. Et la valeur 2 va affecter la gauche et la droite. D' accord ? Donc, si nous tapons ici peut être quelque chose de différent comme une rainure solide, alors il va avoir solide ici et rainure sur le côté gauche. Donc tu peux mélanger les choses, non ? Mais aussi, il est assez utile de simplement supprimer, par exemple, gauche et droite. Remarquez que lorsque nous faisons des choses comme maintenant, nous, par exemple, 500 pixels, puis avec le texte aligné, donc nous centrons le texte à l'intérieur, si cela aura l'air assez cool, non ? Parce que vous avez un message important et il a de bonnes frontières sur le haut et le bas mort, comme SAS qui est important, non ? Parce que sans eux, vous ne remarqueriez même pas ces bureaux, n'est-ce pas ? Mais maintenant c'est plus facile de le remarquer, n'est-ce pas ? Ainsi, les bordures peuvent être utilisées pour la décoration, mais aussi pour s'assurer que la personne qui lit les textes voit le texte, n'est-ce pas ? On est juste important pour lui. Il y a aussi une chose de plus que les gronder. Horloge ou rôle. Notez que nous pouvons lui mettre plus de valeurs comme la valeur libre et la valeur quatre. Et puis la valeur on est responsable du sommet. Value 2 est responsable du droit. Comme si l'horloge allait droit à la, elle va de haut en droite, non ? Il va dans la bonne direction. Donc, il va d'abord en haut, à droite, puis la valeur f3 est égale au bas, puis la valeur quatre est égale à la gauche. Donc on pourrait mettre quelque chose comme solide, aucun, aucun, pas vrai ? Donc ça veut dire que nous n'aurons que le solide au sommet. D' autres choses vont être enlevées par Kiel, non ? Et nous pouvons, par exemple, mettre, disons que nous voulons avoir manger à gauche et en bas à droite. Alors, comment ferais-je ça ? On a besoin de solides ici et ici, non ? Dans d'autres endroits, nous voulons en avoir aucun. Donc c'est comme ça maintenant. Donc, vous pouvez décider quel style va être présenté ou qui ne sera pas présent, n'est-ce pas ? Vous pouvez aussi dire maintenant quelque chose comme, changeons la frontière. Gauche, charbon ou deux, par exemple, pourpre, non ? Et comme vous pouvez le voir, on a changé la couleur de tous ces gars ici. Et rappelez-vous aussi que l'ordre compte bien ? Quand on le fera comme ça, ça marchera cette fois parce qu'on n'a pas changé de couleur plus tard, non ? Mais si vous avez fait des choses comme la couleur de la bordure et que vous changez la couleur , par exemple, noir, non ? Remarquez que parce que nous changeons tout en noir, puis les deux reines de gauche, et puis la gauche va être crèmes en mauvais quand nous le mettrons ici, n'est-ce pas ? Comme vous pouvez le voir, rien ne s'est passé parce que nous avons changé la frontière gauche pour Crimson, mais plus tard nous changeons chaque frontière pour bloquer. Souviens-toi de l'ordre, ok, c'est assez, assez important. C' est tout dans cette leçon. Comme un exercice, essayez de jouer avec toutes ces choses que vous avez appris dans cette conférence est une bonne idée de jouer avec elle parce que alors vous vous souviendrez mieux. Alors essayez de créer une définition que ce type a, par exemple, une couleur différente sur le côté gauche. Et peut-être faire un bouton de bordure un peu plus étroit. Écrivez-le pour qu'il ne soit pas aussi grand que celui-ci. Alors peut-être différent, non ? C' est sur la leçon. Merci beaucoup. 59. Angulaires arrondis, coins: Bonjour tout le monde. Chaque coin, qui ressemble à ceci, qui est carré vers le bas, peut être arrondi. Pour ce faire, nous devons utiliser la règle appelée rayon de bordure. Donc, nous aimons juste le rayon frontière et ensuite nous tapons, par exemple, 10 %, ce qui veut dire que nous voulons le faire autour de 10 %. Et comme vous pouvez le voir, tous les coins sont arrondis de 10 %. Mais je pense que dans ce cas, il est préférable d'utiliser, par exemple, des pixels. Et puis vous remarquerez que, ok, nous exécutons le DEM de 10 pixels et comme vous pouvez le voir, ils sont plutôt meilleurs. La première chose que vous remarquerez probablement est que ce rayon de frontière n'est pas collecté connecté à la frontière gauche, droite. Notez que nous pouvons supprimer la bordure et que cette boîte va toujours être arrondie de sorte que vous n'avez pas besoin d'utiliser des bordures, n'est-ce pas ? Même la boîte entière ou comme ça afin de l'avoir arrondie. D' accord ? C' est assez important, qui signifie que vous pouvez, par exemple, créer des entrées libres, puis obtenir deux entrées. Et puis, par exemple, définissez le rayon de bordereau pour eux. On a juste 10 pixels. Par défaut. Voyons à quoi ça ressemble. Comme vous pouvez le voir, c'est à quoi ressemble l'entrée. Mais quand j'ajoute border-rayon, ils ont un aspect différent, plutôt cool. Vous pouvez créer votre propre entrée. Comment, à quoi vont-ils ressembler ? C' est une bonne idée d'ajouter une certaine marge. Il y a donc une sorte d'espace entre eux, non ? Comme vous pouvez le voir, nous avons exécuté les entrées sont suffisantes. Quand peut-on aussi utiliser quelque chose comme ça ? Créons une classe qui sera appelée, par exemple, conseil. Et disons ici est un indice important comme celui-ci. Et agissons comme un indice. Et maintenant remarquez le week-end faire quelque chose comme, par exemple, la couleur de fond. Changeons la couleur de l'indice. Donc ça a l'air très mauvais. Maintenant, faisons-le 300 pixels comme ça. Ensuite, nous allons, par exemple, des textes alignés au centre. Et comme vous pouvez le voir, il est maintenant centré. Et maintenant, nous allons faire la longueur du rayon de bordure Deb, par exemple, 10 pixels. Comme vous pouvez le voir, ça a l'air mieux. Mais quand même. Faisons quelque chose que nous apprendrons à l'avenir, qui s'appelle le rembourrage. Et définissons bourgeonnement à, par exemple, 20 pixels. Comme vous pouvez le voir, rembourrage ajouté. L' arrière-plan en haut et en bas est ajouté l'espace qui est égal à 20 pixels en ce moment. Et puis ça ressemble vraiment à un indice important, non ? Il dit sol nu et aussi il a coincé les coins arrondis, non ? Quand j'enlève le rayon de la frontière, ça a l'air bizarre. ce moment. Ça a l'air mieux. Cependant, nous pouvons le rendre encore meilleur. Un regard, encore mieux. Ecoutez, vous pouvez mettre ici la valeur comme 10 pixels, mais ce qui va se passer sur notre annonce ici, la deuxième valeur comme 15 pixels, nous avons la banane. Que s'est-il passé ? Notez que 10 pixels ont affecté quoi ? Coin supérieur gauche et à droite, coin inférieur, à droite. Et 50 pixels ont affecté leur coin supérieur droit et coin inférieur gauche. Ok, donc c'est comme ça que ça marche. Nous pouvons dire ici que lorsque vous tapez quelque chose comme ça, cela signifie que la première valeur va affecter le coin supérieur gauche et le coin inférieur droit, à droite. Lorsque vous plongez la valeur deux, vous allez affecter le coin supérieur droit et le coin inférieur gauche. D'accord ? Ce n'est pas tout. Vous pouvez aussi faire quelque chose comme ça. Donc, si je tape quelque chose comme ça, c'est égal à ceci. Encore une fois, c'est égal à la symphonie. Cette date est égale, ok, c'est la même. Ce qui signifie que lorsque vous tapez quelque chose comme ça, le volume numéro un est dans le coin supérieur gauche, juste ici. C' est le coin supérieur droit ? Comment je me souviens de ça ? Suis-je si bon ? Tellement bien. Les prix, des choses comme ça. Ai-je un texte en dessous de moi ? J' utilise juste l'ordre de l'horloge dans le sens des aiguilles d'une montre, non ? Parce que remarquez que c'est le coin supérieur gauche, puis le coin supérieur droit, alors quoi ? Dans le coin inférieur droit, à droite. Ensuite, la valeur de la force est égale au coin inférieur gauche. C' est comme ça que fonctionne l'horloge, non ? 0, 0, 0, 0. Et le truc cool à ce sujet est que nous pouvons, par exemple, définir l'une des valeurs deux, par exemple, 0, 0 pixels. Et maintenant, remarquez qu'on a quelque chose comme ça, n'est-ce pas ? Donc, c'est un peu arrondi, c'est beaucoup arrondi. Ceux-ci ont un peu arrondi. Et là, on a du jazz au coin carré, non ? Et nous avons créé notre indice personnalisé. Ça a l'air cool, non ? C' est ainsi que vous pouvez changer le rayon de la bordure. Il n'y a que cette leçon. Merci beaucoup. 60. Tables et rembourrage: Bonjour mon ami. Cette table ici a l'air horrible en ce moment. Améliorez-le en utilisant le CSS. Afin de sélectionner la table, nous avons juste besoin de plonger dans des heures ici cette table. Ou si tu voulais le nommer, tu pourrais utiliser l'intraveineuse, non ? Et donc je fais un tour comme ça. Mais nous voulons sélectionner n'importe quelle table que nous avons de notre côté, donc nous n'allons pas ajouter l'ID. Nous avons donc une table de sélection et maintenant il est temps d'ajouter, par exemple, une bordure comme cette bordure blanche qui est juste un pixel. Et comme vous pouvez le voir, vous avez une frontière autour de notre table. Ok, tout fonctionne bien. Mais le premier problème est que nous n'avons pas l'espace entre notre page web sur le côté gauche et ces particules, notre table. Donc, pour le changer, nous allons ajouter la marge de dix pixels. Donc ça a l'air mieux, non ? Nous pouvons voir clairement que nous avons une frontière ici. Maintenant, ajoutons, par exemple, une bordure à l'intérieur de chaque donnée de table. Alors faisons-le comme ça. Un pixel noir solide. Et vous remarquerez qu'il y a un problème parce que chaque donnée de table a sa propre frontière, n'est-ce pas ? Et pour être honnête, ça n'a pas l'air bien, non ? Ce serait génial si cette frontière sur le côté droit relié à cette frontière à l'extérieur. Si elle, si elle pouvait se connecter en quelque sorte, s'effondrer les uns dans les autres, ce serait génial. Et il y a une règle qui s'appelle l'effondrement de la bordure, qui par défaut est défini pour séparer, ce qui signifie qu'ils ne sont pas connectés. Mais quand vous le modifiez pour s'effondrer, comme vous pouvez le voir, nous avons connecté la bordure des données de table à n'importe quelle autre bordure et maintenant elle semble mieux, non ? Certainement mieux, mais toujours pas bon. Il est maintenant temps d'ajouter un espace entre ce qui, entre le texte, le contenu de chaque donnée de table et la bordure qui l'entoure. Et cet espace entre le contenu et la bordure est appelé rembourrage. Rembourrage. Il existe donc une règle appelée remplissage et vous pouvez ajouter, par exemple, 10 pixels sont par exemple, 15 pixels entre le contenu et la bordure de ces données de table. Et comme vous pouvez le voir, maintenant il semble certainement mieux. On peut le changer à 100%. Vous pouvez voir ici nous avons besoin de réinitialiser le Zoom. Donc, il ressemble maintenant à ceci ou ceci semble définitivement mieux que quand nous n'avons pas de rembourrage, non ? Notez que lorsque vous utilisez les outils Web Developer et lorsque j'utilise Control Shift plus I ou j dans le navigateur Web, je peux sélectionner chaque élément. Et comme vous pouvez le voir ici sur la couleur pourpre, nous avons un bon rembourrage. Et comme vous pouvez le voir, le repérage est autour de ce que le contenu, non ? Le contenu est en ce moment sélectionner tous les éléments nommés b. Et c'est ce texte, non ? Et quand je déplace la souris ici, comme vous pouvez le voir, nous l'avons sélectionnée. Quand je déménage ici, on a un rembourrage, non ? C' est juste une sorte d'espace supplémentaire entre le texte et la bordure. Et c'est assez nécessaire parce que sinon, ça a juste l'air mauvais. Maintenant, il est temps de le changer un peu plus en, par exemple, en supprimant, en supprimant la bordure de tous. Remarquez que, hé, on vient de pardonner, ça a l'air plutôt bien. Mais il y en avait, ce serait bien s'il y avait une sorte de séparation entre chaque rangée, non ? Alors choisissons simplement la table ou tout. Et ajoutons la bordure au bas de chaque ligne de table, non ? Comme un bloc solide pixel. Et maintenant, vous remarquerez que ça a l'air assez bien, non ? Nous avons séparé chaque rangée de table et il n'y a pas juste de frais généraux ici, non ? Comme par exemple, la bordure gauche, la bordure droite. Je pense que c'est mieux maintenant. Et c'est assez important de savoir que vous devez utiliser l'effondrement de la frontière ici. Notez que lorsque je l'enlève, Nous ne travaillons pas. Quand j'ai ajouté par, cela fonctionne bien. N' oubliez pas d'ajouter un effondrement de bordure afin pouvoir même créer une bordure à l'intérieur des lignes de tableau. Ok, donc c'est comme ça que ça marche. Je pense que nous devrions également choisir, par exemple, la légende. Choisissons la table th. Donc, nous sélectionnons l'en-tête de la table. Et rendons-les un peu plus gros, non ? Comme par exemple, taille de police 24 pixels. Comme vous pouvez le voir, ils sont plus grands maintenant. Donc, nous pouvons clairement voir que ce sont des en-têtes. Nous pourrions définir pour les deux, le poids de la police trop gras, donc ils sont en gras. Non seulement ces paquets, donc celui d'en haut ici, eh bien, peut-être pas, peut-être que c'est mieux. C' est ainsi que vous pouvez le changer assez vite. Vous pouvez changer les couleurs ici, vous pouvez changer la couleur de fond aussi, par exemple, je ne coupe pas le bleu et la couleur des choses qui lui sont écrites à Crimson. Et comme vous pouvez le voir, il semble maintenant très mauvais. Rappelez-vous que lorsque vous voulez choisir des couleurs, vous devriez essayer de les choisir dans l'intrigue. Il est donc préférable d'utiliser la taille comme celle-ci, non ? Ils ont des schémas de couleurs et choisissent les couleurs en conséquence d'ici, non ? Parce que comme vous pouvez le voir, par exemple, sur orange. Donc, dans la couleur de fond comme ça, il est bon d'avoir la couleur comme ça, par exemple, non ? Donc je ne peux pas le dire comme ça. Et ça va paraître un peu mieux maintenant. Ça n'a toujours pas l'air très bien. C' est parce que pour être honnête, vous devriez changer la couleur des rôles de table pairs, non ? Alors changez la couleur de ceux-ci sur celui-ci, celui-ci. Et celui-ci devrait être de couleur différente ou il devrait y avoir différence entre eux afin de le faire le bon, afin de le faire, vous devez en apprendre davantage sur les choses qui sont appelées pseudo-sélecteurs, mais nous allons apprendre à leur sujet à l'avenir. Donc, par exemple, remarquez que je vais juste vous donner un échantillon quand j'aurai votre table, les données de table, disons que je veux rendre tous ces gars en gras, mais seulement pour les données de table qui sont en premier, non ? Pas celle-là. Seulement celui-là. Comment le choisir ? Nous avons une table, 2 D, donc nous allons dans la table, puis nous allons en 2D. Et nous les avons tous les deux. Je veux juste celle-là. Afin d'avoir juste ceux-ci sont vous utilisez le deux-points ici , puis utilisez le premier pseudo alignement enfant. Et de cette façon, on ne change que le premier gars. D' accord ? Alors faisons des trucs comme la table pour le premier enfant TD. Parce qu'on change juste le rembourrage, non ? Donc, euh, mais nous voulons avoir un rembourrage pour les deux comme la même chose. Mais nous voulons avoir le poids de la police en gras sur le premier graphique. Donc vous pouvez voir maintenant ces gars sont audacieux, mais c'est aussi serait mieux. Il a continué même dans les données de la table du premier enfant serait en gras, non ? Ce sera beaucoup mieux, mais nous apprendrons des choses comme ça dans les conférences futures. Il n'y en a qu'une douzaine. Merci. 61. Comment créer un menu horizontal ? États des liens : Lien, visité, hover, actif: Bonjour mon ami. Aujourd'hui, il est temps de quoi, à, comment améliorer l'apparence de nos ancres. Donc, les liens, ok, nous allons créer un menu en utilisant quelque chose appelé états des éléments de votre côté. D' accord ? Donc, nous allons d'abord utiliser l'ancre et nous allons accéder, par exemple, à ces images qui tombent, n'est-ce pas ? Et par défaut, le lien ressemble à ceci. Et c'est bleu. Pourquoi c'est ça ? C' est parce qu'il est côté non visité. Cependant, quand je clique dessus et puis je retourne en arrière, c'est maintenant violet est parce que l'état a changé en visité. Ok, donc on a deux états. L' un est le lien, le second est visité. Lien est juste une façon par défaut non visitée à quoi ressemble le lien. Et on peut accéder à l'état. Comment y accéder ? Pour y accéder, nous tapons le nom de l'ancre, puis nous tapons la visite. D' accord ? Et aussi nous plongons le lien de la même façon. Et maintenant, nous pouvons changer leur apparence quand quelque chose est visité ou non. Alors, changeons. Tout d'abord, la chose visitée parce que où nous avons bien maintenant seulement visité en Q. Donc, nous allons changer la couleur à vivre. Par exemple, marron. Comme vous pouvez le voir, il est maintenant brun, non ? Donc, nous changeons le comportement par défaut. Créons un autre lien. Et nous allons, par exemple, l' envoyer pour financer une pierre de coupe médius. Nous n'avons pas un payant comme ça, mais il n'est pas visité dans notre navigateur Web en ce moment parce que personne n'a cliqué dessus. Et comme vous pouvez le voir, c'est bleu. Et nous pouvons changer aussi l'état d'équilibre non visité à gogo, par exemple, je connais l'aqua, comme vous pouvez le voir, c'est maintenant de l'aqua. D' accord ? Donc c'est comme ça que vous changez la façon dont ils ressemblent quand quelque chose est visité ou pas, n'est-ce pas ? Il y a aussi quelque chose appelé est appelé un, puis le hover. Et c'est plutôt cool parce que cet état est vraiment un état que vous pouvez mettre sur presque n'importe quelle attaque. Et c'est pour la main. Donc, quand vous bougez votre main pour déplacer la souris sur quelque chose, cette chose devrait arriver. C' est plutôt cool. Pourquoi est-ce ainsi parce que l'état invoque lorsque vous déplacez votre souris sur le lien. Donc, nous pouvons créer une sorte d'animation que cette instance. Donc ça va juste se montrer instantanément, non ? Et disons que nous allons juste changer la couleur pour, par exemple, disons comme ça. Et comme vous pouvez le voir maintenant lorsque nous déplacons notre souris sur le lien, quelque chose se passe comme ça, par exemple. Et tu peux vraiment faire ce que tu veux. Vous pouvez modifier l'appel au sol de la barre ou écrire. Et nous utiliserons bientôt les vieilles, les plus vieilles, pour rendre ça meilleur look. D' accord ? Cependant, il y a un autre état dont je veux parler qui est actif. Et comme son nom l'indique, il va invoquer quand le lien est actif. Mais quand le lien est vraiment actif. Quand on fait quelque chose comme on va changer la couleur en bleu violet. Donc c'est facile à remarquer. Lorsque je déplace votre souris, le lien n'est pas actif, écoute est active lorsque je clique dessus, comme vous pouvez le voir. Et ce n'est que le moment où vous cliquez dessus. Ok, donc c'est dur à repérer. Peut-être qu'ils savent quelque chose, crèmes et nous allons changer la couleur de fond à louer. Comme vous pouvez le voir, cela ne se produit que lorsque je clique, cliquez avec le bouton gauche et vous savez, je déplace la souris ici. Donc, c'est toujours en mode actif, mais ce n'est que pas désactivé. Comme vous pouvez le voir, seulement quatre millisecondes lorsque vous cliquez sur quelque chose, n'est-ce pas ? Donc, c'est quand le lien est actif. Il y a donc quatre états comme celui-ci. Et nous pouvons utiliser ces connaissances maintenant pour faire une sorte de manuel. D' accord ? Comment allons-nous le faire ? La première chose est que nous devrions supprimer ces textes déclaration ci-dessous. Link, ce soulignement ici n'a vraiment pas l'air bien, non ? Donc, nous allons accéder à quelque chose ou simplement appelé le rôle de décoration de texte. Et on doit le changer en zéro. On ne veut pas le voir. Comme vous pouvez le voir. On clique sur des images drôles, non ? Alors pourquoi il a disparu aussi dans l'état non visité ? C' est parce que la décoration de texte est héritée dans ces états ici, ok ? Cependant, ce n'est pas à toutes les autres choses. Quand je change, par exemple ici à la couleur aqua. Seul le visa sur le lien non visité va changer, n'est-ce pas ? Donc, pour être honnête, je veux continuer à ajouter, ressembler à un visité. Alors, comment ferais-je ça ? Alors quand normalement j'aurais besoin de faire quelque chose comme ça, non ? Mais si je m'arrêtais, je commencerai à taper quelque chose ici. Je dois aussi le faire ici. Ce n'est pas bon. C'est pourquoi nous allons utiliser le multiple select ou comme ça, n'est-ce pas ? Et maintenant, quand on tape quelque chose ici, ça va affecter cet état et cet état en même temps. Maintenant, on n'a pas besoin de s'inquiéter de quoi que ce soit. Donc, ok, par exemple, changeons la couleur en blanc. Ok, comme ça. Mais nous devons également changer la couleur de fond donc c'est un peu visible et je vais utiliser le deux-points 059555. C' est une couleur verte comme ça. D' accord ? Et vous pouvez choisir, bien sûr, la couleur d'ici. J' ai choisi ça avant, donc ça a l'air bien. D' accord ? Et maintenant, quand nous avons une couleur de fond, vous remarquerez que ce que les liens sont vraiment un élément en ligne, non ? Donc, quand je ne peux pas changer la largeur, je peux changer la hauteur de l'élément. Et aussi il fera le rembourrage aboyé une perle. Notez que lorsque j'utilise le popping afin de créer un espace entre la bordure et le texte. Nous avons le polygone gauche, droit et inférieur, mais il n'y a pas de rembourrage en haut. Et quel petit. Remarquez que quand on fait quelque chose comme ça, alors je mets tout dans la div et quand je le copie encore une fois, on va avoir des choses drôles. C' est parce que, eh bien, nous avons ici par défaut l'affichage en ligne, et c'est ainsi que cela fonctionne avec le rembourrage. C' est un peu négociateur. Mais quand on le changera en blog, ça va mieux paraître, mais on ne veut pas avoir de liens sur tout le côté. Nous voulons que quelque chose affiche inline-block, n'est-ce pas ? Ils sont donc en ligne, mais ils sont bloqués. Et maintenant tout empocher fonctionne bien, non ? Si je copie encore une fois ici, ça va bien marcher. Donc, ok, donc on change le bloc d'affichage en ligne. Et aussi, nous allons définir, par exemple, le dôme de la frontière, par exemple, large. Comme vous pouvez le voir. Un pixel solide, un pixel blanc solide. Quelque chose comme ça. Comme vous pouvez le voir, maintenant nous avons une bonne bordure autour d'elle, qui est blanche. Et maintenant, il est temps de trouver le meilleur ajustement. Faisons la même chose avec le a actif ici. Pour l'effet de vol stationnaire parce que c'est la chose la plus importante. Donc, quand je déplace la souris ici, je veux d'abord changer la couleur de l'arrière-plan. Changons donc la couleur d'arrière-plan en blanc par exemple. Et comme vous pouvez le voir, ce n'est pas large, mais le problème est que nos textes ont disparu. Donc, nous devons changer la couleur de notre texte à ce que faire, par exemple, quelle était la couleur de l'arrière-plan avant ? Et maintenant c'est plutôt cool, non ? Parce que nous avons changé la couleur d'arrière-plan et la couleur du texte en même temps. Nous pourrions également faire de même, par exemple, à la frontière. Donc on peut, copions-le. Et on va juste mettre ici la couleur comme ça. Et comme vous pouvez le voir maintenant, c'est encore mieux, non ? Donc, nous créons une sorte de manière ici. Nous pouvons envoyer des personnes vers d'autres sites Web. Il n'a pas besoin d'être le site SAP de votre côté. Vous avez juste besoin de changer les droits du schéma de texte. Mais nous avons créé un homme. Et remarquez maintenant qu'il y a une sorte de problème. Que faire si vous aviez une sorte de textes comme, Hey place clique, s'il vous plaît cliquer ici et abonnez-vous par exemple. Et tu veux que cette chose soit un lien, par exemple ? Le problème est que ce comportement est maintenant partout sur votre site et ce n'est probablement pas le cas. Qu' est-ce que vous vouliez tous réaliser, n'est-ce pas ? C' est donc une bonne idée d'utiliser l'ID, par exemple et de dire que c'est le menu, non ? Et maintenant, nous allons changer le comportement des liens seulement à l'intérieur du manuel. Ok, donc on va faire quelque chose comme ça, comme ça, comme ça. Et comme vous pouvez le voir, maintenant cette chose n'est pas affectée par ça. A l'intérieur du manuel sont affectés. Rappelez-vous que le VE voulait avoir plus d'un manuel. Vous ne devriez pas utiliser l'ID, vous devriez manger, utiliser à la place la classe puis, et changer ici dans chaque protéase, le hachage dans les données, non ? Comme ça. Cependant, la plupart du temps, il n'y a qu'un seul homme, non ? Donc, nous pouvons revenir en arrière en utilisant les tracés de contour z. C'est ainsi que vous pouvez changer la façon dont les liens ressemblent. Ce n'est que la leçon. Merci. 62. Modification de icônes de liste par défaut | | : : Avant le sélecteur: Bonjour, mon ami. Aujourd'hui, je vais vous montrer comment changer l'apparence des marqueurs sur le côté gauche de la liste. Et nous le ferons de deux façons. Donc vous voulez changer ça en quelque chose qui a l'air bien, ok, donc pour quelque chose qui ressemble, par exemple, comme ça, c'est certainement mieux. Ok, alors comment on fait des choses comme ça ? Tout d'abord, nous devons sélectionner les listes non ordonnées, par exemple, n'est-ce pas ? Et à l'intérieur de notre liste non ordonnée, il y a quelque chose comme le style Elise. Et comme vous pouvez le voir, nous avons ici des règles libres. L' un d'eux est le type qui vous permet de changer le type de votre version à des choses qui sont disponibles ici. Par exemple, pour la liste non ordonnée, la plus populaire est carrée. Donc, nous ne pouvons pas changer le marqueur par défaut qui est sur le côté gauche ici au carré. Comme vous pouvez le voir, nous le changeons de quelque chose qui s'appelle le SQL, ok ? Il y a aussi quelque chose qui s'appelle cercle. Et il y en a quelques autres, comme vous pouvez le voir disponible ici. Cependant, la plupart du temps, ceux-ci sont ceux qui sont utilisés le plus souvent. Cependant, il y a aussi un autre que vous devriez savoir à ce sujet est appelé non supprime simplement le marqueur. C' est assez important parfois parce que vous voulez l'obtenir ici, un personnalisé, ou vous ne voulez tout simplement pas avoir de liste. Nous avons le marché sur le côté gauche. Donc, c'est quand vous utilisez Sony. Vous verrez un exemple pratique quand quelque chose comme ça est que vous remarquez que c'est une liste non ordonnée, ce qui signifie que nous ne nous soucions pas de quel genre d'ordre est à l'intérieur d'un citrons ici. Mais on pourrait facilement changer ça dans la liste OrderedList, n'est-ce pas ? Les commandes par défaut sont le nombre. Cependant, nous pouvons également changer le style de liste, taper quelque chose comme par exemple, alpha supérieur, qui le changera en a, B, C, D, E, F, G, et ainsi de suite, non ? Ou nous pouvons les utiliser, pas le haut du corps, il y a aussi l'Alpha inférieur. Écrivez quelque chose comme ça et ça va être des lettres plus petites. Il y a aussi quelque chose qui s'appelle la loi, comme le roman inférieur. Donc nous allons utiliser le roman, le nombre, les chiffres et la ressource, ou le grec inférieur, qui ressemble aux choses de la bouche. Il y a du latin inférieur, écrivez quelque chose comme ça, donc vous pouvez l'utiliser aussi ici. Mais le problème est que je ne connais pas le recommandé parce que c'est orderlies et vous devriez utiliser des types qui sont connectés à la numérotation des choses ici, n'est-ce pas ? L' ordre compte ici. Il y a un sous cela, donc nous pourrions utiliser des icônes, choses qui ne sont pas connectées à IBC, le gagnant-gagnant, quelque chose quand vous voyez l'ordre, n'est-ce pas ? Revenons donc à la liste non ordonnée, et revenons à la création de ce qu'est une image. Par exemple, celui que j'ai mis ici. Donc, ici, nous avons une tique, qui est l'extension de tick est PNG. Et c'est assez important parce qu'il n'y a pas, comme vous pouvez le voir, de fond ici. Et parce qu'il n'y a pas d'arrière-plan et que PNG vous permet de le faire, ça va bien paraître sur tous les terrains de bar, non ? Parce qu'il va juste prendre le fond de la chose à laquelle il apparaît, non ? Donc, c'est assez important d'utiliser le fichier PNG et vous pouvez redimensionner à quelque chose glisser 12 pixels par exemple. Et pour le redimensionner, je recommande fortement le programme qui s'appelle Pine dotnet. Vous pouvez trouver une image sur Internet, qui est le, qui a l'extension PNG et le redimensionner à quelque chose de petit comme celui-ci. Briquet. Vous pouvez le choisir en faisant quelque chose comme le moins, stylisez cette image. Et ici, nous pouvons utiliser quelque chose qui est appelé URL. Ici, vous mettez dans les guillemets ce chemin vers l'endroit où se trouve l'image. Comme vous pouvez le voir, notre image est où est ici. Donc, nous devons d'abord sauter du dossier CSS à ce que font la page principale 1 ligne droite vers le dossier principal, puis aller dans les images. Donc, pour le faire, nous devons utiliser quoi pour cela et ensuite la boue. Et comme vous pouvez le voir maintenant, nous pouvons aller aux images, puis la tique PNG. Donc notre chemin ressemble à ceci. Et maintenant, comme vous pouvez le voir, nous avons un beau marquage sur le côté gauche qui ressemble à ceci. Et on peut mettre ici une image que tu veux, non ? Mais rappelez-vous que ce devrait être PNG, sinon il ne sera pas bon sur chaque Bagua, n'est-ce pas ? C' est ainsi que vous ajoutez l'image. Mais il y a aussi une autre façon, qui est je pense pour la plupart Stein, encore mieux parce que vous n'avez pas besoin de chercher l'image. Ok, alors comment utiliser cette méthode quand on fait quelque chose comme toi et Ally. Donc, nous choisissons ce que le LI à l'intérieur de l'URL. On peut changer, par exemple, la couleur en jaune, non ? Et comme vous pouvez le voir, nous avons changé la couleur du texte ici, n'est-ce pas ? Mais il y a aussi quelque chose qui est appelé le avant sélectionné. Et qu'est-ce que ça fait ? Comme vous pouvez le voir, presque comme si rien ne s'était passé, non ? Parce que lorsque vous les ajoutez avant d'entrer dans une sorte de mode, le mode qui vous permet d'insérer, à, insérer du contenu à E, Mais avant. D' accord ? Alors, où est ça ? Avant ? C' est là, ok, on veut mettre le contenu ici. Et, mais comment mettre le contenu ici ? Nous devons utiliser quelque chose appelé est appelé le contenu. D' accord ? Ainsi, le contenu vous permet d'ajouter quelque chose file d'attente et vous mettez le contenu dans les guillemets, à l'intérieur des guillemets. Et ici, nous mettons le contenu correctement, pour que nous puissions même voir chanter le, le, le, le, le, le, le. Donc ce truc va arriver ici, ok. Comme vous pouvez le voir, nous avons vu et ce qui est de plus est jaune. Donc quelque chose que tu fais pour te sentir bien ? Ainsi, par exemple, nous voulons changer le poids de la police pour, par exemple, balle. Tu ne vas pas te changer ici maintenant, non ? Donc nous n'affectons que le contenu avec les règles ici, ok ? C' est aussi assez important. Donc ça veut dire qu'on peut mettre tout ce qu'on veut. Mais c'est là que pouvons-nous trouver des choses politiques pour eux ? qui est cool, c'est que les entités vous permettent, quand vous allez sur un site Web comme celui-ci, mettre vraiment beaucoup de sentiments, n'est-ce pas ? Il y a des flèches que vous pourriez trouver intéressantes, comme par exemple, celle-ci ou celle-ci. Et pour l'utiliser, nous devons utiliser la valeur hexadécimale d'ici, ok ? Pas alors TT, mais la valeur x d'ici. Donc, par exemple, j'aime cette flèche ici. Et pour l'utiliser, je vais utiliser la barre oblique inverse, pas la boue mais la barre oblique inverse. Et puis le numéro du côté que je t'ai montré. Et maintenant vous verrez que nous avons une flèche jaune qui ressemble à ceci, mais nous avons aussi le style par défaut ici, non ? Donc, nous allons le supprimer, style de liste, tapez, Mettons-le à aucun, à droite, Donc nous voulons supprimer je l'ai fait dans le supprimer. Ok, parce qu'on doit faire quelque chose comme ça, non ? C' est donc l'URL, l'URL. Donc, quand on fait des choses comme ça, on a ça. Quand nous faisons comme ça, nous avons ceci et nous voulons juste l'enlever, d'accord. Donc nous allons East Side en haut sont morts. Aucun. Donc il n'y a rien de tel ici. Et nous n'avons que des flèches d'un an. Nous pouvons utiliser même toutes les icônes emoji ou hey, je veux avoir cette chose, alors je vais l'avoir ici. Comme vous pouvez le voir. C' est à ça que ça ressemble. Donc c'est à vous de décider ce que vous allez utiliser, non ? Tu veux avoir un teck qui ressemble à ça, alors tu vas avoir une tique qui ressemble à ça. Il y a toutes sortes de choses. La loi, vraiment, vous n'aurez même pas le temps de vérifier tous les possibles d'ici. C' est une grande quantité et la conception de l'emoji droit ? Image Smyth, tout ce que vous pouvez mettre, ce que vous voulez avant le contrat. Et de plus, rappelez-vous qu'avant, cette chose fonctionne sur n'importe quel élément, n'est-ce pas ? Non seulement avoir ici n élément, mais c'est un exemple pratique comment l'utiliser. Il y a des choses qui sont Ward souvenir, parce que la plupart du temps, nous utilisons le signe des tiques et tick est réservé sous ce numéro. Comme vous pouvez le voir, nous avons une tique ici, et le dQ en gras est en dessous de 27, 14, comme vous pouvez le voir maintenant, il est en gras est encore plus visible, non ? Alors rappelez-vous lorsque vous utilisez la taxe avant, avant le sélecteur, vous devez ajouter le contenu. Et le contenu va être modifié selon les règles ci-dessous, n'est-ce pas ? Donc je veux qu'il soit en dessous. Ça va être bleu, non ? On a un type bleu ici. Et notez qu'il sera classé. Il y aura une sorte d'espace ici, non ? Et tu peux mettre le DSpace ici en utilisant les 000, ok ? Maintenant, comme vous pouvez le voir, il y a un espace entre cette nouvelle coche et le contenu, non ? Ça a l'air un peu mieux maintenant, je pense que cette liste, mais c'est à toi de décider, non ? Nous voulons donc avoir plus d'espaces. Tu peux faire quelque chose comme ça, non ? Si vous ne voulez pas et alors n'en doutez pas. Mais c'est l'espace et c'est là qu'il est caché. Il y a aussi quelque chose comme 000 BBM, que je recommande d'utiliser, qui est assez génial, non ? C' est comme, hé, c'est le premier élément qui perd, le second est le troisième, non ? Sur dans la liste non ordonnée est assez cool. Donc, disons que moins de 2713 est épais. 2714 est en gras, tick écrire 000 BB est quoi ? C' est juste quelque chose comme ça, très similaire à ça. Et 000 000 000 a, un 0 est juste dépensé, non ? 63. Faire des éléments en matière de transparence: Bonjour, mon ami. Aujourd'hui, vous apprendrez à faire quelque chose de transparent. Cela signifie que l'arrière-plan sera un peu floue, non ? Il sera flouté. Pour que vous puissiez voir à travers le fond, n'est-ce pas ? Et nous allons utiliser pour cette opacité et la ligne RGBA, je vais vous dire la différence entre ceci et ceci. Mais avant de le faire, pratiquons un peu. C' est une bonne idée de faire ce que je fais maintenant. Manuellement. Alors ne téléchargez pas le code source, essayez de faire ce que je fais. Ok, C'est une bonne pratique parce que nous allons ajouter des images pour faire un exemple pratique manuellement ici, maintenant, mais en utilisant Emmet. Alors, comment ajouter des images ? On peut taper l'image, non ? Et puis le, mettez les valeurs pour les attributs. Mais hé, nous avons besoin d'images, donc l'image multipliée par quatre. Et maintenant, nous allons aller dans les images et ensuite nous choisissons le fichier que nous voulions avoir. Ensuite, nous devons mettre le cours vidéo C forte, la version qui utilise le raccourci de sortie Z pour rendre tout visible sur un écran. Et nous allons appuyer sur le bouton F1 et taper votre taille d'image de mise à jour. Donc nous avons la taille de l'image, ok, puis appuyez sur le bouton de tabulation et nous devons aller dans un autre cours. Donc, comme ça et cours vidéo, cours vidéo C plus. Et puis quoi ? Mettre à jour l'image F1, Onglet. Et encore, des images. Je peux utiliser l'espace afin que je vais obtenir les conseils, Foster et cours vidéo Java. Je crois que j'ai tapé sur le mauvais bouton. Je dois le faire manuellement. Donc la vidéo se produit. Java et images. Discours être vidéo, bien sûr, PHP. Et nous devons mettre à jour la taille de l'image. Et c'est une bonne idée à l'art ici, entrez, alors il regarde ça comme ça. Donc, nous avons quatre images et imaginons que vous avez le côté où vous permettez de cliquer sur chaque image comme celle-ci pour amener l'utilisateur à un site spécifique où il peut acheter le cours comme celui-ci. Et pour le faire, nous devons mettre ça dans la cheville, non ? Alors utilisons l'ancre sur bien, tous ces gars, alors utilisons la touche de sortie, et c'est l'angle. Et ici, nous devons, je pense que le HTML5 devrait être appelé très similaire comme ici, non ? Parce que, pour cette raison, il sera plus facile de rendre votre site plus élevé dans Google comme ceci. Nous avons donc maintenant des liens. Donc, quand je déplace la souris sur les choses ici et que je clique dessus, nous allons être envoyés à la page comme ceci. La page n'existe pas. Eh bien, vous pouvez le créer manuellement, mais nous ne le ferons pas parce que ce n'est pas le répertoire n'est pas sur la mort. Imaginez l'utilisateur sur le côté, comme ici, et comment pourrais-je lui suggérer qu'il puisse cliquer sur quelque chose comme ça ? On a changé le curseur du parcours en pointeur à droite ? De la comme ça à la chasse. Mais ce n'est pas suffisant. Je pense que nous devrions changer l'opacité, donc nous devrions faire en sorte que la façon de le faire soit transparente. Nous allons sélectionner un et à l'intérieur. S' il y a à l'intérieur d'un EMG, on va changer l'opacité. Et comme vous pouvez le voir, les valeurs de l'opacité de 0 à 11 signifie que rien n'a changé. Cependant, vous mettez, par exemple, un point zéro. Vous remarquerez qu'elle est assez transparente, non ? Vous pouvez voir à travers eux. Mettons ici, par exemple, 0,7, ok ? Et maintenant c'est un peu transparent, non ? Je veux le changer pour ne pas être transparent et plus quand quelqu'un déplace la souris sur les choses ici. Ok, alors comment on va ? On va utiliser le vol stationnaire. D' accord. Donc, le vol stationnaire est remis. On en a parlé quand on l'utilise sur les chevilles, non ? Donc, quand quelqu'un déplace la souris, elle, mange, elle, applique les règles qui sont à l'intérieur où vous placez le vol stationnaire, n'est-ce pas ? Donc, quand vous faites quelque chose comme un EMG et quand quelqu'un déplace la souris, droite le transfert, alors l'opacité va revenir à un. Et comme vous pouvez le voir maintenant, cela suggère que, hé, c'est un lien, non ? Parce que quand quelqu'un déplace la souris, il dit clairement que quelque chose change ici. Ok, donc Islands, je vais juste cliquer dessus. Et c'est une bonne suggestion pour notre utilisateur. Donc, c'est quand vous utilisez, par exemple, ou le passez. Chaque fois que nous avons ici quelque chose comme RGBA, regardez, disons que nous voulons avertir quelqu'un de quelque chose sur notre site Web. Donc, disons que nous allons créer un avertissement d'identification. Et disons que c'est un avertissement. Attention, message très important. D' accord ? Et faisons ce portail de messagerie. Alors mettons-nous en avertissement et rendons les choses audacieuses. Par exemple, nous allons, par exemple, augmenter la taille de celui-ci. Ajoutons, par exemple, le rembourrage pour le rendre meilleur. Tout de suite, c'est un gris chaud. Faisons la couleur de fond, par exemple, brun. Faisons quelque chose comme ça. C' est avertissement, attention, message très important. Réglons la largeur à, par exemple, 5000, 500 pixels. Et centrons ça, n'est-ce pas ? Donc ça ressemble à ça. Génial chaud, non ? Et maintenant, je vais utiliser quelque chose qu'on appelle l'opacité dessus. Donc, je vais utiliser l'opacité pour, par exemple, 0,6. Ce qui se passera, comme vous pouvez le voir, le problème à propos de ce message est que changer la transparence de anti ou penser avec le contenu, y compris le contenu et pas quelque chose que nous ne serons probablement pas parce que nous voulons garder le texte pour être en gras, pour être facile à voir, non ? Et afin de simplement changer la transparence de l'arrière-plan, nous utilisons le RGBA, ok, Donc, nous ne l'utilisons pas. On va utiliser Hill Air GBA. Cependant, nous pouvons aussi simplement cliquer ici, ok, déplacer la souris ici et choisir la couleur que nous voulons. Et ici, nous pouvons, comme vous pouvez le voir, envoyer le quatrième argument, droite, les quatre valeurs ici que nous définissons comment quelque chose de transparent devrait être. Et vous pouvez voir la plus petite valeur signifie qu'il est plus transparent. Le plus grand nombre à rien, c'est que ce n'est pas transparent. Donc disons que nous voulons le mettre à quelque chose comme ça. Et comme vous pouvez le voir, je vais supprimer ça. Le texte est toujours en gras, il est noir. On n'a pas changé la transparence de tout ça, non ? Cependant, nous modifions la transparence des négociations. Et vous vous demandez peut-être pourquoi je ferais même le transport d'avertissement ? Ok, c'est une bonne question, c'est une très bonne question. Parce que la plupart des avertissements de temps comme ceux-ci devraient être, par exemple, au milieu et ici devrait être beaucoup de textes. Et probablement avertissement serait sur d'autres textes, non ? Et simulons ça, mais je suis désolé, mais je ne vais pas vous expliquer tout ce que je ferais maintenant parce que nous allons en parler à l'avenir. On va utiliser la position absolue. On va déplacer l'objet vers le milieu. Et nous y allons maintenant assurez-vous qu'il a l'air bien. Faire quelque chose comme ça, cette chose. En haut gauche. Traduire. Je devrais utiliser ici traduire comme ceci. Comme vous pouvez le voir, ce rose fait votre texte au milieu, toujours au milieu. Même moi, j'ai changé la taille de notre navigateur web. C' est toujours au milieu. Donc, à l'avenir, je vais vous dire comment cela fonctionne correctement. Mais pour l'instant, vous savez juste que vous devriez juste fixer ces règles. Tu feras quelque chose pour être au milieu, non ? Et comme vous pouvez le voir quand je déplace cela, par exemple, des images ici. Maintenant, je peux voir ces images, non ? Je pense que quand vous mettez un avertissement de votre côté et que vous faites quelque chose comme ça, c'est une mauvaise idée parce que l'utilisateur est comme, il ne sait pas ce qu'il y a derrière, non ? Il est comme s'il avait perdu tout le contenu de votre site. Je pense que vous devriez toujours au moins appliquer l'Alpha à 0,9, quelque chose comme des jours, non ? Donc il est comme, ok, c'est un message d'avertissement, mais je peux toujours voir clairement ce qu'il y a derrière, derrière l'écran, non ? Je vais aussi vous montrer une chose de plus maintenant parce que je pense que certaines choses que vous pourriez apprendre en ce moment sont ennuyeuses, non ? Mais malheureusement, pour créer des choses à partir de zéro, vous devez alors parfois des trucs ennuyeux, mais je ne lie pas les choses maintenant, un peu plus cool. Ecoutez, créons des textes ici. Pour créer des textes, on va utiliser le M chez Lorem, d'accord, ça crée des textes, mais quand on le multiplie par 50, on crée encore plus de textes. Et le problème est ici, comme vous pouvez le voir, nous avons ce message au milieu, mais quand on fait défiler, il n'a pas l'air correct. Et nous pouvons changer la position de l'absolu à quelque chose que l'on appelle fixe. Et maintenant ces mesures telles que le déménagement avec nous, c'est cool, non ? Donc nous pouvons, par exemple, créer ici le x. Quand quelqu'un clique sur le x, il a disparu, par exemple, mais seulement quand il l'a lu et il sait ce qu'il fait correctement quand il accepte tout ce qui est ici. Donc, comme vous pouvez le voir ici, même mettre un peu plus gros, non ? Par exemple, 200 pixels, non ? C' est joli, assez important. Et on le change en un. Vous remarquerez que l'utilisateur est leucine, non ? Tout de cette page, n'est-ce pas ? Donc c'est une bonne idée de mettre quelque chose comme ça. Ok, c'est tout dans la leçon. Merci beaucoup. 64. Change, curseur | Créer une boîte d'insigne: Bonjour. Aujourd'hui, je vais vous montrer comment changer le curseur, le pointeur vers autre chose. Comme par exemple, nous avons maintenant ici un pointeur par défaut, je déplace la souris. Ici, nous avons un pointeur avec le point d'interrogation qui suggère qu'il y a des informations supplémentaires, comme celle qui est apparue avec le cours vidéo, les barres de bus, il est sur les promotions et dire que quoi que ce soit ici quand nous déplacer la souris sur certains textes, nous avons des informations qui se passaient afin que nous puissions mettre n'importe quoi dans la boîte comme ça. Donc, nous vous montrons comment créer une boîte comme ça aussi dans ces extra, donc ça va être une conférence très intéressante, non ? Ok, alors continuons à la façon de le faire. Tout d'abord, nous enlevons tout ce que j'ai fait. Pourquoi je l'ai fait ? De grands objectifs. Quand vous regardez comment je fais quelque chose à partir de zéro, vous apprenez beaucoup, beaucoup de plus plutôt que d'analyser le code, ok, Donc cela signifie aussi que vous devriez essayer faire tout ce que je fais dans cette conférence manuellement plus tard, après l'avoir acheté. Alors griffes la conférence après que vous l'ayez regardée et faites tout ce que j'ai fait dans cette conférence par vous-même, essayez de ne pas regarder comment je l'ai fait, droit de répéter ce que j'ai fait, mais ne regardez pas la solution. Ok, alors commençons par, par exemple, aider. Donc, si vous voulez changer le curseur d'abord, nous devons le mettre dans une sorte de tout m et écrire que nous pouvons choisir parmi le CSF. Je suggère de commencer ici une classe qui appellera, par exemple de l'aide. Donc, quand nous avons plus d'informations, comme par exemple, ici, je voudrais être en mesure de changer le curseur sur tous d'entre eux. Alors, comment changer le curseur ? Nous ne pouvons pas choisir le hub et nous allons utiliser la règle qui s'appelle curseur. Assez droit, non ? Et maintenant, nous avons un homme bon, un curseur que nous pouvons choisir. Celui que nous allons choisir est appelé Hub, qui suggère est utilisé quand nous le voulons et donner aide supplémentaire à quelqu'un directement dans le texte, par exemple. Il y en a beaucoup d'autres. Le plus utile que j'utilise le plus de temps est appelé pointeur. Donc, le pointeur change en pointeur qui a une bonne main sur le texte. Et il suggère que vous pouvez cliquer sur l'échantillonnage droit ? Le prochain que j'utilise le plus souvent est le poids. C' est assez cool car lorsque vous faites une sorte de chargement en arrière-plan, vous pouvez faire ce chargement à l'utilisateur. Pensez à son écran et il saura qu'il a besoin d'attendre quelque chose, non ? Ce doigt, un sphinx sont utilisés la plupart du temps quand vous connaissez JavaScript, lorsque vous chargez quelque chose que Bergen certains, des données ou quelque chose comme ça. Donc ces assez avancés. Et il y en a beaucoup, beaucoup plus. Et pour être honnête, ce n'est pas comme si je me souvenais de tous parce que plupart du temps vous ne les utilisez pas dans votre projet, mais il est bon de savoir au moins qu'ils existent. Alors essayez de jouer avec eux. Ok, alors passez par L d'entre eux comme par exemple, je ne sais pas. Allons en copie et vous déplacez la souris ici. Ok, donc la copie ressemble à ça ou c'est aussi une bonne idée parce que comme je l'ai dit, tu ne te souviens pas de tout. Dactylographie habituelle source de voiture Google et CSS. D' accord. Et vous y trouverez, vous savez, chaque curseur, comment il ressemble quelque part sur le GPU. Rappelez-vous la lumière du soleil, vous allez regarder ma vidéo entière chaque fois que vous avez besoin de trouver le curseur spécifique, vous aurez toujours, vous regardez ma vidéo parce que je vous montre comment faire les choses, n'est-ce pas ? Je ne montre pas tous les ne peuvent pas vous montrer tous les curseurs possibles parce que c'est juste votre lâche de votre temps quand vous me regardez, je vais vous montrer comment utiliser certaines choses et vous dire qu'elles existent. Alors maintenant je vais vous montrer très bonne chose qui est difficile à trouver, comme par exemple, comment créer un TPP, non ? Disons que nous avons un titre ici. Et disons qu'il y a plus d'informations, non ? Et maintenant, copions-le et mettons-le ici et ici, et ici, par exemple, se passait. Et ici, nous allons taper autre chose. Par défaut, il y a une sorte de boîte qui apparaît comme vous pouvez le voir, ce qui se passe. Voici plus d'informations, mais il semble horrible. Vous aimeriez que ça paraisse mieux, non ? Rechangeons ça pour aider. Et comment on le fait ? Eh bien, d'abord, nous devons choisir le hub. Alors nous devons faire les changements quand quelqu'un déplace la souris sur le hub, non ? Parce que sinon, nous ajouterions tout. Tout. Nous ajouterions la boîte toujours droite ? Pas seulement après le, quelqu'un déplace la main sur l'élément d'aide, non ? Nous voulons donc ajouter le contenu. Et la question est, quel genre de contenu ? Disons échantillon. Et vous pouvez voir maintenant quand je déplace la souris ici, et rien ne se passe parce que nous n'avons pas dit où nous voulons mettre ce contenu. Et il y a deux endroits où nous pouvons les mettre avant le texte ou après le texte. S' il vous plaît noter que nous utilisons ici la seule colonne et ici nous utilisons les deux colonnes. Ok, c'est très, très important. Le, sinon cela ne fonctionnera pas. Et aussi cela devrait être d'abord, comment planer, puis l'après. Donc, après le texte qui a une bonne aide, classe. Je voudrais ajouter l'exemple de contenu. Comme vous pouvez le voir, il apparaît. Le problème est que nous voulons, nous ne voulons pas qu'il soit échantillonné, nous voulons qu'il soit vaincu, n'est-ce pas ? Exactement le truc ici. Est-il possible de le prendre ? Oui, c'est possible. Et c'est plutôt cool. Nous pouvons taper des choses comme un TTR, qui signifie attribut, non ? Donc, vous mettez ici le nom de l'attribut et le titre est à un attribut. Et c'est tout. Vous venez de prendre ce texte et de le mettre après le texte qui est ici. C' est vrai ? Parce que tu l'as dit quand quelqu'un a déplacé la bombe, il se passait quelque chose d'autre. Voici plus d'informations, assez génial. Maintenant, il est temps de changer l'apparence de cette chose, non ? Alors, d'abord, que devrions-nous faire ? Je suggère que nous devrions d'abord sécréter une sorte de couleur de fond, ok ? Comme par exemple, Aqua. Disons quelque chose comme ça, ok, la deuxième chose que je pense qu'on devrait faire est d'ajouter une sorte de rembourrage. Donc ça a l'air un peu mieux. D' accord ? C' est mieux maintenant. Deuxièmement, je pense que le rayon de la frontière serait génial ici. Il aura l'air mieux quand il y a un rayon de frontière dessus. Ok, c'est encore mieux maintenant. Et la seconde, la troisième chose est que l'avis que quand je déplace la souris et je pense qu'il déplace tout vers l'avant, non ? Le problème est que ce contenu est ajouté dans le flux de tous les éléments. Si vous vouliez faire quelque chose d'absolu, sorte que vous voulez le sortir du flux de tous les éléments. L' utilisation devrait utiliser quelque chose appelé le grond, la règle appelée position et le mettre à absolu, ok ? Cela signifie que vous le retirez du flux et comme vous pouvez le voir maintenant, il est partout sur tous les autres doigts de votre côté. Le problème est que ce contexte est maintenant quoi ? Cachant tout derrière. Et je pense que c'est une bonne idée de le rendre un peu transparent. Donc, je déplace la souris ici et je la rend un peu transparente en faisant quelque chose comme ça. Et comme vous pouvez le voir, la couleur change de Aqua à RGBA, et c'est aqua, mais il a un réglage ici qui est réglé sur 0.7 par exemple. Et maintenant, il est allé être quoi ? Transparent. Vous pouvez voir les informations en arrière-plan. Je pense que c'est un peu trop transparent en ce moment. Mais disons que par exemple, 0,9, ok ? Voici donc plus d'informations. Donc, nous avons créé cela assez facile. Il y a cependant un problème. Le problème est que disons que vous avez une bonne image, et que vous allez accéder aux malades ou blessés. Dites que vous voulez accéder au cours vidéo C plus plus VD0 voiture C plus plus. Et disons que vous allez maintenant ajouté la classe comme ça. Et ici, vous dites aujourd'hui, c'est la promotion. C' est toujours dit L. Et quoi que ce soit, tu donnes des informations supplémentaires comme ça, et quand tu bouges la souris ici, rien ne se passe, non ? Et nous pouvons le résoudre en le mettant dans la travée et en mettant cette classe et le titre dans la travée. Comme vous pouvez le voir, maintenant nous pouvons voir aujourd'hui est une promotion. C' est dangereux. Pourquoi ? Cela n'a pas fonctionné auparavant, car l'image n'est pas un texte. Et cette chose, l'après, ne fonctionne que sur la plage de texte. Donc, comme il y a un texto à l'intérieur, ok ? Et on joue juste avec le navigateur web, d'accord ? On le répare juste en l'ajoutant au citron qui peut avoir une image texte, ne peut pas avoir de texte, n'est-ce pas ? Si le plus amusant est que si vous supprimez la balise source, cela fonctionnera car nous avons le message natif externe sur la plupart des navigateurs Web. Ok, on travaille ? C' est une sorte de correctif que vous devez savoir que si vous voulez ajouter et faire l'effet après ou le travail avant d'affecter, vous devez utiliser la plage ou un élément qui peut être appelé texte. L' image n'est pas un texte. Ils peuvent voir que tout ici est en ligne en ce moment parce que bien, nous avons de bons endroits ici. Donc, nous pouvons faire par exemple, BreakLine. Et maintenant ça ressemble à ça, n'est-ce pas ? Donc nous avons créé une boîte, mais il y a toujours un problème, un problème que nous pouvons résoudre. Tout ce que nous savons comment créer des attributs personnalisés, comment jouer avec eux. Notez que nous avons toujours besoin d'utiliser la classe ne serait même pas mieux si elle prend le titre d'ici automatiquement. Et aussi, ce sera Grade IV. Quand vous déplacez la souris, vous n'avez pas deux boîtes maintenant, n'est-ce pas ? Nous avons une boîte qui est créée par nous. On est tout simplement beaux. Eh bien, peut-être que tu peux le rendre encore plus beau, non ? Si tu joues avec. Mais il y a une autre boîte, mais en dessous du curseur, aujourd'hui est Promotionnel dans son propre site. Comme vous pouvez le voir après quelques secondes, nous avons de bonnes boîtes à outils et ce n'est pas bon. Nous voulons le résoudre, mais comment le faire ? Nous apprendrons à la prochaine conférence. Merci. 65. sélecteur d'attributs | Attributs personnalisés en HTML: Bonjour, mon ami. Aujourd'hui, vous avez appris comment créer des attributs nommés personnalisés et comment sélectionner à partir de CSS en fonction du nom de l'attribut. C' est plutôt bon. Ok, Donc la première chose est savoir comment créer des attributs nommés personnalisés et pourquoi voudrait-il même les créer ? Notez que dans la dernière conférence, nous utilisons le titre pour, pour utiliser la valeur d'ici, non ? Le problème est que le titre est vraiment réservé à quelque chose d'autre pour montrer une boîte. Le large, à droite, le petit ici. Et trois secondes promotions d'aujourd'hui sur cellulaire, mais ces petits, pas celui que nous avons rencontré le client. Droit ? Et nous aimerions le faire supprimer, mais nous ne voulons pas perdre le contenu d'ici. Et c'est à ce moment que vous pouvez utiliser des attributs de nom personnalisés. Cela signifie que vous pouvez créer votre propre nom d'attribut, mais vous ne le créez pas comme ceci, par exemple, ok ? Mais vous avez créé des idées. Vous tapez le mot de données, puis le tiret, d'accord ? Et tu pourras l'appeler comme tu veux, même comme on l'a fait ici, non ? Donc on peut faire quelque chose comme ça maintenant. Et comme vous pouvez le voir, cela fonctionne, mais nous n'avons pas ces comportements par défaut de base maintenant. Donc, nous avons pris les informations de ces données d'attribut a comme le F. Bien sûr, ce n'est pas la façon dont vous devriez l'appeler. Ce que je t'ai montré que tu peux inventer ici. Ils, quel que soit le nom que vous voulez, nous pouvons l'appeler, par exemple, aide aux données, n'est-ce pas ? Appelons ça l'aide aux données. Et maintenant, bien sûr, nous devons le prendre à partir de l'aide de données, n'est-ce pas ? Et ça marche bien. Donc, nous avons bien maintenant les attributs de nom personnalisé, Il n'est pas seulement en utilisant des endroits comme ça est également utilisé pour une sorte de scripts faits en JavaScript. Mais ces choses ne pensent pas que vous allez apprendre dans ce cours parce que ce HTML et CSS va. Et ce que nous avons aussi quelque chose de bois est appelé sélecteurs d'attributs. Et dans ce cas, ça va être génial. Pourquoi c'est ça ? Donc nous allons ce qu'il faut ajouter chaque fois que cette classe a pour faire fonctionner cette chose, non ? Et je pense que ce serait mieux si nous venons d'ajouter les données, aider avec les textes. Et ces choses devraient fonctionner automatiquement, non ? Comme vous pouvez le voir, ça ne marche pas. Alors, comment le faire fonctionner ? Nous devons choisir par le nom des attributs. Ok, c'est bien. Ecoute, on doit mettre entre crochets le nom de l'attribut. Et cela va choisir NLM et cela a bien le nom de l'attribut comme celui-ci. Et comme vous pouvez le voir, maintenant, nous changeons le curseur de la souris à celui-ci avec le point d'interrogation. Nous allons aussi faire la même chose ici. Donc maintenant, quand quelqu'un déplace la souris, nous allons montrer ce texte, le contenu comme celui-ci. Et nous allons modifier ce contenu en fonction des règles, mais ci-dessous. Et comme vous pouvez le voir, ça marche maintenant bien. Et c'est cool vraiment parce que tu sais, cette chose appelée être une sorte, par exemple, alimenter notre graphique. Il pourrait y avoir refroidi à l'air, il y a plus de textes ici. Et par exemple, qu'est-ce que c'est ? Et vous allez déchiffrer cette étendue et les données satellite aident. C' est vraiment quelque chose qui est juste. Et maintenant c'est le cosinus. On peut voir ici que c'est quelque chose, vraiment quelque chose d'autre. Mais ici, nous utilisons la ligne de rupture, faire en sorte que ça ressemble mieux à ça. D' accord ? Jolie y aller. Et il montre seulement sur ce en ce moment sur ce, mais sur ce, ce que nous appelons à le changer pour, par exemple, avoir un fond de bordure, un pixel, solide, rouge oméga d v vaincu plus, non ? Donc ça suggère que lorsque vous déplacez des miles offre des choses comme ça, vous allez obtenir des informations, des données qui suggèrent encore plus, d'accord ? Donc vous pouvez voir que ça suggère de les déplacer ici parce qu'il y a plus d'informations ici, d'accord ? Ici qu'il y a, il n'y a pas ici nous avons des informations et maintenant c'est assez rapide, non ? Parce que nous pouvons ajouter des informations afin que nous puissions créer du contenu sur le site HTML. Mais ce Fink s'occupe de ce qu'il a l'air politique. Ce n'est qu'une bonne leçon. Merci beaucoup. 66. Formatage et décoration du texte: Bonjour, mes amis. Aujourd'hui, nous allons parler de quelques règles qui vous permettront d'influer sur la façon dont le texte ressemble. Tout d'abord, nous allons parler de décoration de texte. On a ajouté ici la bordure en bas de chaque texte. Mais est-ce qu'on l'a vraiment fait ? Notez qu'il s'agit d'une bordure et que la bordure est autour de la boîte du contenu. Donc, le problème est que si nous ajoutons ici, par exemple, un remplissage de 10 pixels, notez que notre bordure est maintenant vraiment loin du texte parce que c'est une bordure de boîte entière ici, non ? Donc, cette solution n'est pas si bonne. Cependant, il y a quelque chose appelé cette décoration de texte qui peut nous aider. Ok, créons ici une sorte de texte. Appelons ça l'exemple de classe. Choisissons ça. Et disons que voici un texte sur rien. Et maintenant, mettons-le peut-être gêné ici parce que je veux être rafraîchi, encensée. Et maintenant, faisons peut-être quelque chose comme le rembourrage de 10 pixels. Commençons par ici. Couleur d'arrière-plan, par exemple, ceci. Et maintenant, nous pouvons travailler avec ça. Notez que nous pouvons utiliser quelque chose appelé une ligne de décoration de texte. Et il vous permet d'ajouter une ligne. Comme quel genre de ligne ? Comme toute notre ligne qui va être au-dessus et pneus textes. Mais c'est au-dessus du texte, pas au-dessus. Ce n'est pas ça. Au-dessus du contenu de la boîte, n'est-ce pas ? N' est pas là, n'est-ce pas ? Il est au-dessus du texte parce que ces décorations de texte soulignent, il ne peut pas être sous le texte, n'est-ce pas ? Quand je dis que la ligne est vraie, elle va être alignée sur le texte. Le truc cool ici, c'est qu'on puisse le connecter. Donc, par exemple, vous voulez avoir notre ligne et vous voulez avoir souligné. Ça va être souligné par voie terrestre. Vous pouvez même ajouter la ligne par ici, mais ça n'a pas l'air bien, non ? Mais vous pouvez vous connecter c'est. Donc c'est une grande différence parce que, eh bien, quand je fais bordure en bas, un pixel solide, le noir, par exemple, vous remarquerez que cette bordure est ici juste sur toute la boîte. Et cette chose va nous aider bientôt ici à résoudre ce problème avec ça ici, non ? Et, mais avant d'aller à mort, remarquez qu'il y a des règles morales concernant la décoration du texte. Comme par exemple, côté décoration de texte, non ? Et nous pouvons utiliser ici, par exemple, la version en pointillés, non ? Donc nous voulons avoir des points ou nous pouvons utiliser, je sais que le double, donc ce sera des lignes doubles. Vous pouvez utiliser le ondulé. Donc ça va être vague, non ? Comme ça. Et donc c'est à vous de décider quelles études peuvent être des rendements, non ? Le pointillé ou pointillé. C' est à vous de décider. Cela ressemble à celui qui sont disponibles sur les frontières, n'est-ce pas ? Donc on va rester avec, par exemple, les données, n'est-ce pas ? Et aussi vous pouvez changer la couleur de la décoration de texte à y. Et aussi je me sens comme orange par exemple. Donc, il va être orange sont faites. C' est à vous de décider quel type de couleur vous allez utiliser. Et bien, le truc cool à propos la décoration de texte, c'est qu'il y a une sorte de raccourci pour ce Fink. Notez que vous pouvez mettre après la virgule, après la colonne, première ligne, puis le style que la colonne. Et cela signifie que vous pouvez faire quelque chose comme, par exemple, je veux sous la ligne, pointillés et par exemple, la couleur qui est ici, non ? cool, c'est qu'il faut moins d'espace. Je pense que c'est plus facile à lire et nous prendrons ce bayésien ou CSS va être plus petit. Si quelque chose est plus petit va beaucoup plus vite. Donc, je recommande fortement d'utiliser cette version abrégée, n'est-ce pas ? Et maintenant, nous pouvons utiliser ces connaissances et les copier ici, non ? Et la chose cool que nous remplacons cette bordure maintenant est que lorsque vous ajoutez le rembourrage ici, par exemple, 10 pixels, nous avons de l'acier quoi ? Le soulignement sous le texte. D' accord ? C' est donc la première règle. La deuxième règle dont nous allons parler aujourd'hui est la transformation du texte. Regarde. Nous pouvons transformer afin que nous puissions changer le texte en utilisant CSS. C' est plutôt cool. Lorsque je choisis un exemple et que j'utilise cette transformation de texte. Nous ne pouvions pas nébuleux, mais ici, vous pouvez choisir quelque chose que nous allons discuter. Par exemple, en minuscules, Que fait-il ? Vous avez probablement remarqué que la première lettre ici change en minuscules, donc ce n'est pas la majuscule, ce n'est pas la grande lettre, non ? Si je mets ici les grosses lettres remarquent maintenant que toutes sont tapées en minuscules. Si vous utilisez les majuscules, tout sera en majuscules. Mais la chose la plus cool ici est quelque chose qui s'appelle, ça s'appelle capitalisé. Il va changer chaque première lettre de chaque mot en majuscules. J' ai vraiment aimé pourquoi ? Quand quelque chose comme ça pourrait être utile. Notez que j'ai créé une entrée ici. Et disons, Eh bien, ce ne sont que quelques lignes parce que nous voulons avoir du contenu ici. Et disons que je veux demander le nom de quelqu'un. Remarqué que lorsque quelqu'un tape le nom, le nom est tapé à partir de la minuscule ou s'il tape l'iodixanol, le nom de la rue, et il commence à partir de la minuscule. Et tu n'as pas imprimé la commande comme ça. Ça n'a pas l'air bien, n'est-ce pas ? Est-ce que ce sera génial. Si toutes les façons il y a une lettre majuscule, la première lettre de chaque mot sera majuscule. Et nous pouvons facilement le changer en choisissant simplement l'entrée, puis faire la transformation de texte en majuscule. Et maintenant, remarquez celle-ci que je tape. La première lettre est grande, non ? Je ne peux pas m'asseoir quand j'ajoute des espaces toujours la première lettre est grande, non ? Je ne peux pas changer de changement de poste en poste jusqu'à présent j'ai un savon. Je ne mens pas, n'est-ce pas ? Alors maintenant, quelqu'un a tapé le nom, c'est toujours en majuscules. Quelqu' un qui vit le nom de rue est toujours en majuscules. Plutôt génial, non ? Il s'agit donc d'une transformation de texte. La prochaine chose dont nous allons parler, c'est qu'ils alignent le texte. Copions ceci quelques fois ici. Peut-être qu'on va le faire même. Donc je pense que c'est le cas. Comme vous pouvez le voir, nous avons du bien. Maintenant, voici quelques textes. Supprimons la décoration de texte de transformation. Et jouons avec le texte. Ligne. Prend une ligne, vous permet d'aligner afin de déplacer le texte vers, par exemple, le côté gauche. Et c'est le comportement par défaut, mais vous pouvez le déplacer aussi vers le côté droit, comme vous pouvez le voir maintenant, tout le texte est sur le côté droit. Et ici, nous avons aussi l'espace, mais nous pouvons aussi centrer quelque chose. Et c'est la chose que nous avons utilisée jusqu'à présent. Mais rappelez-vous que lorsque vous êtes centré, quelque chose est toujours centré sur la boîte que ceux-ci autour du texte, n'est-ce pas ? Ainsi, par exemple, 400 pixels. Ça va être centré autour de cette boîte. Alors rappelez-vous que c'est toujours comme ça parce que, eh bien, exemple, par défaut, le PE, affichage P de B est le bloc d'affichage. Que ces jeux s'appelle bloc. Cela signifie qu'il prend tout l'espace du navigateur Web. Donc, à droite et à gauche, à droite. Donc, le centre signifie qu'il va centrer le texte autour de ces livres. Ces livres ne sont pas Malin, pas visibles, non ? Nous pouvons supprimer l'arrière-plan et il n'est pas visible. Et vous vous demandez peut-être pourquoi quelque chose ressemble à ça. Cependant, il y a très, très, très cool fonction alignée de texte, qui est appelé justification. Je recommande fortement de l'utiliser parce que ce n'est pas cela. Copions la div et longtemps comme ça. Remarquez ce qui se passe ici. Nous avons maintenant ici des balises qui n'aiment pas le connecter sur le côté droit du navigateur Web. Mauvais lorsque nous utilisons le comportement par défaut. Comme vous pouvez le voir, vous avez ici de l'espace, juste ici est un peu d'espace, voici un peu d'espace. Et toujours, quand on le déplace comme ça, comme vous pouvez le voir, il y a de l'espace ici. Et il ne semble pas bon d'être honnête lorsque vous utilisez les textes de fonctionnalité de justification que nous aimons toujours se connecter au navigateur Web et je pense que cela semble mieux, définitivement mieux. Ok, Donc justifier une recommandation fortement en utilisant des armes à feu, sorte d'articles, fonctionnalité assez impressionnante. Et il y a aussi quelque chose qui s'appelle, Il s'appelle des espaces. règle des espaces, comme son nom l'indique, fonctionne sur les espaces blancs. Qu' est-ce que ça veut dire ? Cela signifie que cela fonctionne sur des caractères blancs, comme par exemple, des espaces comme des anthères, comme, qui sont de nouvelles lignes, non ? Ou une sorte de robinets, non ? Alors, qu'est-ce que ça fait ? Notez que nous avons ici maintenant texte et nous avons bien ici. Par exemple, si vous avez des espaces et que tout est propre saut de ligne. Et même si c'est le cas, tout est visible ici en une seule ligne, non ? On n'est pas toujours quelque chose que tu veux avoir. Peut-être que vous avez, vous avez une sorte de poème de vers que vous voulez coller dans votre code et vous ne voulez pas, vous savez, la ligne de pain partout. Ensuite, vous pouvez faire quelque chose comme des espaces et vous pouvez utiliser la pré-ligne. Comme vous pouvez le voir maintenant, chaque ligne est là quand elle est là, n'est-ce pas ? Donc, quand j'ajoute quelques entrées, ils vont être interprétés juste ? Donc chaque ligne est prédéfinie, n'est-ce pas ? C' est pour ça que c'est le mot pré ici. Cela signifie que cela va être pris en considération, mais seulement sur les lignes. Donc, quand il y a quelque chose comme ça, ça ne va pas être interprété. Et c'est plutôt cool quand vous collez une sorte de poème. Et vous avez aussi quelque chose qui s'appelle pré wrap. Et cette chose va interpréter chaque espace et jamais entrer. Le problème à propos de cette solution est dans des textes comme ceux-ci, vous devez ensuite faire quelque chose comme par exemple, ceci, d'accord ? Donc, c'est en une ligne. Il faut du temps pour se préformer sur quelque chose comme ça dans votre HTML. Cependant, cela est toujours utile lorsque quelque chose comme celui-ci est utile lorsque vous avez le côté F sur, par exemple, le codage. Notez que voici une sorte de définition de la fonction et les indentations comme celle-ci, n'est-ce pas ? Donc, les espaces ici sont très importants dans des langues comme celle-ci. Donc, si vous utilisez la pré-ligne, tout va être juste en une seule ligne. Donc ce n'est pas bon, n'est-ce pas ? Donc, si vous collez le code, je pense que c'est une bonne idée d'utiliser la version arabe. Ok, il n'y a pas de Rob, vous voulez dire que je veux tout avoir en une seule ligne. Donc, j'ai changé cela en une ligne, bien sûr parce que le code n'est pas quelque chose. Mais il y a une caractéristique comme celle-ci. Je vous recommande fortement de jouer avec toutes ces fonctionnalités. Ok, donc fais la même chose que j'ai fait dans la conférence. C' est une bonne idée de pratiquer car alors vous aurez quelque part dans votre tête qui, hé, quelque chose comme ça existe et quand c'est nécessaire, vous allez l'utiliser. Sinon, tu l'oublies. Alors essayez de jouer avec. Ce n'est que la leçon. Merci beaucoup. 67. indentation du paragraphe et sélecteur : ::first-letter: Bonjour. Aujourd'hui, nous allons parler du texte, du retrait et du premier sélecteur de lettres. Ecoute, on a ici quelques exemples de texte, ok ? Ce sont des blocs de texte, et chacun de ces blocs de textes a quelques lignes à l'intérieur, non ? Mais la première ligne est affectée par quelque chose sera ces appelées retrait de texte. Retrait est juste une marge pour sourds première ligne de bloc de texte. D' accord ? Donc, nous voulons dire que nous pouvons, par exemple, sélectionner l'échantillon et nous pouvons faire quoi ? Retrait de texte. Et puis par exemple, définissez-le sur 30, 40 pixels. Et comme vous pouvez le voir, maintenant, seule la première ligne du bloc H de texte droit, a une sorte de marge ici sur la gauche. Donc ça te rend la vie plus facile de lire un bloc de texte si c'est grand, non ? Ce n'est qu'une façon d'ajouter des paragraphes à votre site Web. Certaines personnes aiment ça, d'autres pas. Donc c'est comme ça que vous y parvenez. Mais il y a une chose que j'aime vraiment. C' est le sélecteur, la première lettre de rejet. Et cela fonctionne très similaire à la précédente parce que vous pouvez ajuster, sélectionnez seulement la première lettre de chaque, par exemple, échantillon de classe. Donc, quand je fais quelque chose comme ça, et que je sélectionne maintenant la première lettre, je suis maintenant à l'intérieur comme la première lettre de chaque paragraphe, ok. Et ça exige que, eh bien, je puisse faire des choses comme le changer, non ? Donc, je peux, par exemple, dire un poids de police deux volts, non ? Et maintenant, la première lettre de chaque paragraphe est en caractères gras. Je peux aussi le rendre plus grand. Donc, je peux, par exemple, faire une taille de police de 24 pixels, n'est-ce pas ? Et c'est plus grand, non ? Seule la première lettre de chaque paragraphe. C' est plutôt cool. Ce que je l'aime parce que ça fait que chaque entrée de paragraphe est un peu différente, non ? Alors rappelez-vous que l'indentation de texte affecte la première ligne, n'est-ce pas ? Vous pouvez toujours ajouter, par exemple, sur chaque échantillon de pauvreté dans la vie, par exemple, 10 pixels, non ? C' est toujours disponible, mais ça n'affectera que ces gars ici. Bien sûr, celui-ci est également affecté par, mais il n'est pas visible ici, n'est-ce pas ? Parce que quand je tape, par exemple, 100, ce sera un peu plus facile à voir, n'est-ce pas ? Nous avons donc 100 pixels pour chaque ligne, mais le retrait de texte n'affecte que la première ligne de chaque parc, non ? De cette façon. D' accord. Ce n'est que cette leçon. Merci beaucoup. 68. Unités CSS : em vs px vs %.: Bonjour, mon ami. Aujourd'hui, nous allons parler des syndicats, ce Px, qui signifie pixels, que EM et le signe de pourcentage et quand l'utiliser. D' abord, concentrez-vous sur les pixels. Nous l'avons utilisé jusqu'à présent, n'est-ce pas ? Nous l'utilisons pour, par exemple, mettre l'image de votre côté, non ? Lorsque nous utilisons l'image, nous pouvons définir cette vague et la hauteur de l'image en utilisant les pixels. Nous ne plongons pas le Px là parce que c'est juste une unité par défaut pour presque n'importe quoi sur votre ordinateur, n'est-ce pas ? C' est quelque chose que nous sommes habitués parce que nous avons quelque chose de bon. Nous discuterons de la résolution sur notre ordinateur, non ? J' utilise raw et en ce moment la résolution comme celle-ci sur mon moniteur. D' accord. Mais bien, je viens de voir que je viens d'utiliser cette partie de ma matinée pour l'enregistrer parce que c'est une résolution plus prise en charge. Et c'est ce que vous voyez ici. Et j'ai quoi, 19020 pixels de gauche pour écrire. Et j'ai 180 pixels de haut en bas, à droite. Et c'est l'espace disponible ici, celui pour le double enregistrement. Quand j'ouvre le navigateur web, nous avons du bien, un peu moins de l'espace parce que bien, si vous avez bien ici, l'adresse que nous avons ici, le nom supérieur de l'onglet et ainsi de suite, n'est-ce pas ? Et on peut même le diminuer quand on ne l'était pas, quand on fait des choses comme ça, n'est-ce pas ? Nous diminuons donc la quantité d'espace que nous avons ici. Bien sûr, je simplifie ceux-ci en ce moment, mais pour apprendre à l'utiliser, je pense que cela suffit. Il va, vous pouvez avoir des appareils à haute densité de pixels qui ont des pixels plus denses, plus de pixels sur un pouce alors normalement, non ? Mais pas le sujet de cette conférence la plupart du temps, le problème ressemble à ceci, ok ? Et bien, vous, donc nous avons cet espace précieux que nous pouvons utiliser. Et par exemple, quand nous avons bon ici l'échantillon par défaut parce que ces paragraphes ou son affichage est facile, bloc de facilité. La largeur est définie sur 100% pour cent du navigateur Web. D' accord ? Donc ça change. Quand j'irai dans l'inspecteur, vous verrez que la taille est comme ça. Et quand je change la taille de notre navigateur Web, est-ce que cette valeur est ici, non ? Modifie la taille du navigateur Web. Parce qu'il est réglé sur 100 % de l'espace disponible pour la pièce. Le corps a aussi 100% et HTML est le parent pour le corps, et il a aussi 100%, non ? Donc, nous avons num, juste la taille de notre contenu entier en utilisant le signe de pourcentage. On peut le changer pour, par exemple, 50 pour cent comme ça. Et maintenant, nous prenons toujours 50 pour cent du contenu de notre navigateur Web. Et c'est cool parce que lorsque vous envoyez, par exemple, à quel 100 pixels libres, le problème est que, eh bien, il ressemble toujours le même. Parfois, vous pourriez vouloir réaliser quelque chose comme ça, mais ce n'est pas quelque chose que vous voulez toujours avoir, n'est-ce pas ? Parce que les gens peuvent avoir différentes tailles de moniteur et quelque chose comme ça peut sembler petit. Cependant, en ce moment, les gens peuvent également utiliser le zoom, n'est-ce pas ? Et ils peuvent tout augmenter selon ce qu'ils veulent voir. Mais par défaut, il sera mais préférable de montrer quelque chose qui semble bon partout. Donc je pense que pendant une semaine c'est bon d'utiliser le signe de pourcentage. D' accord. Mais ce n'est pas bon à utiliser, je pense que le signe de pourcentage pour tout. Regardez, voici quelque chose qui s'appelle EM. C'est quoi le n ? Notez que lorsque nous avons ici la taille de la police, 24 pixels. Nous avons compté ces volumes en sachant que la balise body a une bonne taille de police par défaut définie sur 16 pixels. Et c'est une valeur par défaut pour les navigateurs Web. Comme vous pouvez le voir, rien n'a changé ici, non ? Et bien, quand nous changeons cette taille de police, donc quelque chose se passe comme, par exemple, 80 pixels, que se passe-t-il ? Remarquez que notre première lettre de bec n'est pas une grosse RMN, non ? Donc, cette lettre ne change pas sa taille en fonction de ce qui se passe de l'autre côté avec la taille de police que l'ensemble dans l'obscurité. Parce que l'étiquette du corps. Lorsque vous définissez la taille de la police dans la balise body, tout fait ou alors la balise p. Et il y avait une balise à l'intérieur de la balise p hériterait de la taille, non ? Donc ça veut dire qu'on aime faire quelque chose comme ça et quelque chose comme ça et quelque chose comme ça, non ? On l'a compilé ici. Qu' est-ce ici ? On l'a fait. Pourquoi ? Parce qu'on remplace, n'est-ce pas ? Parce que quoi ? C' est comme, la cascade, non ? Nous disons que c'est plus important. Nous envoyons la taille de police à 24 pixels à partir de 80. Bien sûr, si je l'enlève, il sera réglé à 80, non ? On le change à 24, mais on ne veut pas qu'il soit si petit en ce moment, n'est-ce pas ? Nous aurions donc besoin de le compter à nouveau. Ainsi, 80 pixels multiplient par 1,5 est 120 pixels. Le problème est que, ai-je besoin de toujours bonbons comme ça ? Ce serait stupide. Il est préférable d'utiliser entendre quelque chose ou cela appelé ENM. Em peut être réglé sur, par exemple, un E m. Et ce qui se passera, comme vous pouvez le voir, c'est la taille du doigt ici, tout sur le côté droit. C' est 80 pixels en ce moment, parce qu'un em est vraiment quelque chose comme ça. C' est vraiment un multiplié par 80, ok ? Y multiplié par 80 parce que voici 80. Donc, quand je fais quelque chose, 1,5 est 1,5 multiplié par 80, et maintenant c'est quoi ? 120. Donc, la chose cool à propos de l'utilisation de EM est que quand vous changez ici la taille 2, et je pense que cela va toujours avoir l'air bien, non ? La première lettre sera toujours 1,5 plus grande. Vous pouvez en faire un sur Phi fois plus grand si vous voulez. C' est à toi de décider, non ? Donc c'est comme 50 pixels maintenant, non ? Parce qu'il est 5 multiplié par 10, parce que 10 est défini ici. Donc c'est vraiment 50. D'accord ? Donc c'est comme unité relative. Donc, il change en fonction de la taille de la police est définie en parent. D' accord ? Donc, je pense que dans des cas comme celui-ci, c'est vraiment une bonne idée d'utiliser EM parce que votre taille a augmenté, changer en fonction de ce qui se passe avec la taille de la police ici. Et vous pensez peut-être, mais quand quelque chose comme ça changerait à l'avenir, vous apprendrez comment, par exemple, changer en fonction de la taille du navigateur Web, de l'utilisateur, de la taille de la police. Et puis vous pouvez simplement le changer au même endroit, pas dans tous les endroits possibles. Vous n'auriez pas besoin de le changer dans tous les endroits possibles, la taille de la police, il va juste changer l'index chez Baldi, n'est-ce pas ? Et tout dans d'autres endroits sera changé automatiquement parce que ce Fink, nous le calculerions, non ? Ainsi, vous pouvez, par exemple, sur de petits appareils comme les smartphones, vous pouvez changer la taille de la police à 10 pixels. Mais pour les personnes qui ont un très grand appareil par défaut, effacer et dit, Je ne sais pas la taille de la police à 24 pixels, non ? Et ce lien sera automatiquement modifié et vous n'aurez pas besoin d'entrer dans la première lettre de l'échantillon , puis ne changez pas la taille de la police. Ça prend juste du temps. Donc je pense que c'est une bonne idée d'utiliser du yen. Donc, nous utilisons le M dans des cas comme celui-ci. Nous utilisons des pixels lorsque vous voulez avoir une valeur absolue, n'est-ce pas ? Nous, nous voulons juste être comme pour les images par exemple. Et nous utilisons le signe de pourcentage lorsque nous voulons nous assurer que quelque chose comme, par exemple, l'échantillon prendra beaucoup trop territoire pour cent de 40 ou 50 pour cent de l'ensemble du navigateur Web. Et ça prend toujours ça, paie comme ça. Donc, nous en sommes sûrs maintenant. Et rappelez-vous que le signe de pourcentage a augmenté, prendre 40 pour cent du parent et le parent dans ce cas est en gras, non ? Le corps. Si on change de parent, disons qu'on s'amuse. Je l'ai fait. Et j'ai dit ici la carte d'identité aux nouveaux parents. Maintenant, rien n'a changé. C' est seulement parce que vous allez dans un nouveau parent et nous faisons quelque chose comme la couleur de fond rouge, vous remarquerez que le DFF est vraiment un blog. Par défaut, 100 % de la vague, n'est-ce pas ? Bot, écoute, maintenant, quand on fait quelque chose comme avec, disons 700 pixels, que se passe-t-il  ? Comme vous pouvez le voir, cette chose à l'intérieur, qui est ce paragraphe, ne prend que 40% de cette valeur ici, ok ? Disons à 50%. Donc cela signifie que cette chose prend quoi, point zéro 85 multiplié par sept cent trois cent cinquante pixels ici, parce qu'il prend 50 pour cent du pair et de la taille. D' accord ? Donc maintenant, il faut 50 pour cent de ce bloc rouge autour. Toujours quand tu ne sais pas ce qui se passe. Rappelez-vous ce que cette couleur de fond, ça aide beaucoup, OK ? Vous vous perdrez plusieurs fois lorsque vous créez quelque chose en CSS et HTML, utilisez la couleur de fond pour vous assurer que ce qui se passe avec les éléments ici, à droite. Ou utilisez l'inspecteur pour voir, d'accord, donc ce parent ici, je pense que la div est de 700 pixels, non ? C' est sur la leçon. Merci beaucoup. 69. Jouer avec des polices: Bonjour, mon ami. Aujourd'hui, vous allez parler de téléphones. Tout d'abord, réfléchissons une seconde. Qu' est-ce qu'une police ? La police est quelque chose qui décrit comment chaque lettre d' alphabet ou un caractère que vous voulez utiliser devrait ressembler, n'est-ce pas ? Et il est décrit dans une sorte de jeux dans votre ordinateur. Vous avez le dossier sur votre ordinateur, par exemple, sur Windows, nous venons d'appeler des téléphones. Et à l'intérieur de la DMV, vous avez de bons Fives qui décrivent chaque lettre. A l'intérieur d'un cinq, par exemple, Times New Roman. Et il dit à quoi cela devrait ressembler lorsque vous utilisez cette police particulière. Oh, quand vous utilisez celui-ci ou celui-ci, peu importe, non ? Donc la police change. Lorsque vous modifiez la famille de polices. Comment on le change ? Disons, tout d'abord, nous allons dans le style.css et nous tapons quelque chose comme la famille de tirets de police. Et ici, comme vous pouvez le voir, nous avons une bonne suggestion. Vous pouvez utiliser ces suggestions comme vous le souhaitez. Ainsi, par exemple, celui-ci et vous voyez des différences. Mais d'abord, nous devons savoir, Voyons voir pourquoi ils ont même la peine de taper autant de type de police de ski, non ? Et lequel va être choisi ? Quelle est la différence ? Pourquoi ça s'appelle même la famille ? Vous voyez, il y a beaucoup de types de téléphones, mais ils sont un peu semblables les uns aux autres. Parfois, ils ont des similitudes et des dissimilitudes sont connectées dans la famille de polices. Ainsi, par exemple, voici une police monospace. Et la police monospace a quelque chose comme l'espace. Ces modèles entre chaque personnage, non ? Et quiconque veut créer une police dans cette particule ou cette famille appelée monospace devrait suivre ces règles, d'accord ? Pour faire cet espace entre, ils peuvent faire quelques différences dans, dans chaque personnage, non ? Comment la logline qu'ils doivent suivre ces règles ? C' est pourquoi ça s'appelle font-family parce que, eh bien, il y a beaucoup de familles, bots et ils suivent une sorte de règle qui leur ressemble. Et, et ils sont nommés d'une manière ou d'une autre, non ? Par exemple, vous avez REI, a Verde, doit la maison et d'autres choses comme ça. Donc, afin de choisir une police, il suffit de taper le nom de la police par défaut. Le premier financé est que ceux-ci ici, par défaut, qui est chargé par le navigateur Web, est appelé Times New Roman. C' est le plus populaire. Comme vous pouvez le voir, rien n'a changé. Et notez aussi que j'utilise les apostrophes ici. Parce que lorsque vous utilisez plus d'un mot, vous devez les connecter d'une manière ou d'une autre pour dire qu'il s'agit d'une seule police. Non, ne libère pas différentes polices, n'est-ce pas ? Lorsque je tape quelque chose comme ça, ordinateur va penser que ce sont trois polices différentes. Cela ne fonctionne que parce que lorsque rien ne correspond aux polices disponibles sur votre ordinateur, la version par défaut va être choisie. Donc par défaut va être Times New Roman. Mais si vous tapez ici aura toujours comme ça. Toutes ces polices n'existent pas, non ? n'y a pas de téléphones sont appelés comme ça et Times New Roman va être choisi. Donc, quand vous tapez ici quelque chose comme, par exemple, Helvetica, vous remarquerez que je pense que je l'ai mal tapé. D' accord. Comme vous pouvez le voir, ça change, non ? Et le truc cool à ce sujet est que vous pouvez taper ici beaucoup de polices à la fois. Et vous faites ça parce que parfois quelqu'un n'a pas un de ces plis. Ce sont des polices sûres. Celui que je vous ai montré ici, disons police, cela signifie que la plupart du temps presque tout le monde les fera écrire. Cependant, il y a des téléphones. Je ne sais pas quand j'utilise, par exemple, cet ensemble de polices, comme celles-ci ici, il ne sera pas disponible partout, où que ce soit. La plupart du temps, quelqu'un l'aura et vous pouvez l'utiliser. Droit ? Et si ce fonds ne sera pas disponible, celui-ci sera utilisé. Si le vertige ne sera pas disponible. Celui-ci sera utile. Sinon, alors ceci, sinon, alors ça, ok. Et celui-ci est juste appelé sans-empattement, signifie que c'est comme la famille. C' est connecté à toutes ces polices ici à gauche. Et quand quelqu'un, quand, quand, quand, quand l'ordinateur voit cela, il doit charger le san-serif par défaut. Police, ok, donc c'est comme une version de sauvegarde et vous le tapez ici au cas où tous les autres ne fonctionneraient pas. D' accord ? Essayez de jouer avec les polices disponibles ici. Ok, tu vois comment ils ont l'air ? Moi, ou peut-être s'ils se présentent du tout. Parce que comme je l'ai dit, quand vous faites une erreur ici, comme vous pouvez le voir, maintenant nous utilisons le poinçon. Maintenant, nous utilisons la Genève. Maintenant, utilisez le Verdana. Et puis on utilise le san-serif. Ok, Donc quand il y a une erreur d'orthographe, alors vous utilisez celui qui est similaire à celui-ci, non ? C' est pourquoi nous en utilisons quelques-uns ici parce que si quelqu'un ne l'a pas, faisons en sorte que ça ait l'air un peu bon. Tout est semblable à celui que vous voulez qu'il ressemble, non ? C' est pourquoi vous choisissez toujours les téléphones qui sont d'une formule parce que ce serait stupide, vous savez, d'utiliser l'espace mono, par exemple ici, non ? Parce que ça a l'air définitivement, non ? C' est pourquoi vous utilisez les téléphones similaires sur une ligne d'une. Très bien. C'est pour ça que ça s'appelle la famille. Ok, nous avons aussi quelque chose que nous allons appeler la taille de la police. Nous l'avons déjà utilisé plusieurs fois. Cependant, il y a aussi, vous savez, des choses comme, par exemple, plus grandes. Vous faites donc la taille de la police plus grande qu'elle ne l'est maintenant. Vous pouvez devenir encore plus grand. Je n'aime pas ça, ne l'utilise jamais. Je recommande fortement d'utiliser 1.5 AM ou quelque chose comme ça parce que vous savez ce que vous les faites et quand vous le lisez, vous savez ce qui se passe. D' accord ? Il y a aussi quelque chose appelé variante de police. J' aimais vraiment celle-là. Notez qu'il y a quelques options ici, mais pour être honnête, l'option héritée est juste vu ces monde héritant est dans les parents. Donc, ce qui est incarné le, la réponse signifie qu'il n'y a rien. Le narval est juste flottant normal. Donc rien n'a changé. Et au départ, c'est la valeur par défaut du navigateur Web, n'est-ce pas ? Et c'est juste la seule chose que nous pouvons choisir ici. On va juste appeler des petites capitalisations, et j'adore ça. Remarquez que cela ressemble à la raison pour laquelle nous avons créé un livre maintenant, n'est-ce pas ? Parce que les livres sont écrits comme ça. Nous avons ici la première lettre comme celle-ci, et plus tard, chaque personnage est en majuscule. D' accord ? C'est pourquoi ça s'appelle petites tasses, c' est parce qu'il est capitalisé, mais ça fait C'est une petite lettre en majuscules. Avis. Notez que quand je ne l'utilise pas, par exemple, l'œil a un bon point ici, non ? Donc la version plus grande ne l'a pas, n'est-ce pas ? Donc, pour être honnête, cette chose met toutes les polices en majuscules, mais elle change sa taille de police dans la plus petite. Et c'est pour ça que nous avons un effet cool comme celui-ci. J' adore vraiment faire une page. Quand tu fais une page avec des histoires, c'est plutôt cool d'aimer ça, non ? Et de plus, on a ajouté l'effet pour la première lettre, non ? Et ça l'a rendu encore meilleur. On peut l'enlever. Et notez toujours que le premier caractère que nous utilisons comme ici est un peu plus grand. C' est pour ça que ça s'appelle Small Cap, petite lettre en majuscules, non ? Alors revenons à ici. Cet effet se connecte vraiment très bien avec cela. D'accord ? Il y a aussi quelque chose qui est appelé friand humide et nous avons déjà appris à propos de DID, mais il y a plus à cela. Notez que nous avons un poids de police et nous pouvons le définir non seulement à boulon, mais il y a quelques valeurs ici de 100 à neuf cents. Cent signifie que quelque chose devrait être aussi mince que possible. 900 signifie qu'il devrait être plus audacieux que possible. Le problème est que pas toutes les polices où la particule de formé prend en charge chaque nombre d'ici. Surtout créé ici en bas, quelques classes où j'ai dit le poids de la police de 100 à 900. Et ici, je crée cette heure que je n'ai pas créée, alors créons-la très vite. Alors créons un div. On peut juste faire des trucs comme ça, ça appelle ça du poids, non ? Et puis le numéro que nous numérotons pour ne pas utiliser le signe du dollar. Et nous avons besoin de combien d'entre eux ? Nous avons besoin de neuf d'entre eux. Et nous avons du contenu, non ? Donc contenu, texte. Alors maintenant, nous l'avons. Et comme vous pouvez le voir. Nous avons changé juste le texte ici au bas de cent cent deux cent trois cent quatre cent cinq cents six cents. Donc ça veut dire que ça pesait six. Ok, on a appliqué du texte en gras ici. Mais le problème est que nous utilisons dans notre DFF, pas la famille de polices qui est ici. Nous utiliserons la valeur par défaut, qui est le Times New Roman, n'est-ce pas ? Lorsque nous accédons à la div, c'est une valeur par défaut. Donc, quand nous allons dans la police, la famille de polices, et nous l'avons dit deux fois, Times, New Roman, vous remarquerez que rien n'a changé. Cependant, si vous utilisez celui qui est ici, ok, Copions-le. Notez que maintenant il y a une différence dans beaucoup plus de niveaux. Juste ici. Nous ne voyons pas de différence, mais ici c'est un peu plus audacieux. Voici encore plus, et voici encore plus audacieux. Et ici, c'est assez audacieux, non ? Donc celui-ci le supporte. Enlevez-le une seconde. Remarquez que ce n'est pas le cas, non ? Il y a donc une grande différence entre cette police et cette police, même s'il n'y a pas de grande différence dans la façon dont elles apparaissent. Le premier, non ? Parce que celui-ci supporte de nombreux niveaux gras. Et pour être honnête, parfois vous ne voulez pas avoir de texte pour être en gras comme le sien, n'est-ce pas ? C' est vraiment rude. Vous voulez avoir un texte comme celui-ci, par exemple, n'est-ce pas ? Juste un peu audacieux. D' accord. Donc, c'est le poids de la police. Et nous avons aussi quelque chose dont nous discuterons. Ancien style de police. Le style de police vous permet de définir la police à écrire comme huit. Donc, il est un peu incliné, non ? Et nous avons aussi entendu quelque chose que nous allons discuter oblique. Et pour être honnête, c'est très similaire, non ? Presque comme rien n'a changé, mais il y a peu de différence que vous n'avez peut-être pas besoin de vous rappeler, mais cela vaut la peine de savoir. Quand on voit que quelqu'un utilise Oblique. Eat like est juste la version qui a été créée à l'intérieur de cette police. Ok, il y a un fichier qui a bon tous les personnages, comment il est représenté, non ? Et c'est aussi, il a aussi un cinq où il montre comment il devrait ressembler quand quelqu'un utilise le style de police Italy. Mais tu sais, parfois il n'y a pas de Phi comme ça. Notez qu'il existe un fichier comme celui-ci pour chaque police. Et vous pouvez utiliser l'oblique pour juste faire chaque lettre pour ressembler à ça, ok ? Et tu n'as pas à quoi ça ressemble. Vous dites juste, Hey, je veux l'écrire comme l'Italie, mais ce n'est pas, n'a pas besoin d'être implémenté, n'a pas besoin d'être créé comme le créateur voulait le faire. Faites-le ressembler. Ok, c'est la différence. Ok, Donc nous avons le style de police et pour être honnête, comme en cas de frontière, par exemple. Tu te souviens qu'on avait un plus audacieux et qu'on pouvait faire une version courte comme ça de la frontière, non ? Nous pourrions utiliser le vernis, cette règle spécifique pour cela, pour cela et cela, mais nous pouvons le faire en ligne dans le cas des polices, il y a aussi la même chose ici. On peut copier ça ici. Et maintenant, nous savons que d'abord, nous devons envoyer le style de police et nous ne le modifions pas pour pouvoir l'envoyer à la normale. Ensuite, nous allons mettre les petites casquettes parce que nous voulons garder ces petites casquettes. Et puis nous pouvons envoyer le poids de la police à, par exemple, 600. Et puis nous pouvons changer la taille de la police, qui est par exemple un M. Donc nous ne la modifions pas du tout. Et puis je ne l'ai pas copié quelque part ici. D' accord. Alors on a quoi ? Le nom de la famille de police pour qu'on puisse la copier d'ici, comme ça. Et comme vous pouvez le voir, nous avons mis toutes ces choses. On peut retirer ça d'ici en une seule ligne. Cependant, prenons le dans les commentaires afin que vous puissiez vous référer à cela. Je n'aime pas cette version parce que c'est long et pour être honnête, il est difficile de se rappeler lequel, qui est le blé, n'est-ce pas ? Eh bien, on peut déplacer la souris ici et voir lequel est lequel. Mais encore, D'une certaine manière, je préfère en cas de polices parce que, eh bien, vous ne les envoyez pas très souvent pour avoir toutes ces valeurs séparées. Eh bien, si vous déplacez votre code de votre ordinateur vers le serveur, alors cinéaste, par exemple. Je trouve un peu plus, un peu plus petit, non ? Donc pour le rendre plus petit, désolé. Alors ça prend moins d'espace, non ? Style.css charge plus vite que peut-être il est bon de l'avoir en une ligne. Mais il y a des programmes qui rendront votre voiture ou votre CSS plus petit pour vous. Je recommande fortement d'utiliser ce champ. Cependant, le sport de savoir que quelque chose comme ça existe parce que quand vous voyez quelque chose comme ça, vous ne savez pas ce qu'il fait. Il est bon de savoir aussi que vous pouvez envoyer la taille de la police, la hauteur de la ligne ici. Alors ici, quand c'est un que je suis. Et quand vous définissez la taille du téléphone, à droite, vous pouvez également définir la grande hauteur de ligne. Alors, quelle est la taille que l'espace entre chaque ligne ? Donc, 1 par exemple, 17h. Pourquoi ça ? Ça marche bien ici. Ou 150 %, c'est à vous de décider quel genre de valeur vous allez l'utiliser. C' est une bonne leçon. Merci beaucoup. 70. Polices personnalisées - Polices Goofle: Bonjour, mes amis. Aujourd'hui, vous allez apprendre à associer des polices personnalisées à votre site Web. Parce que supposons que vous n'aimez pas les formulaires par défaut que vous avez installés sur votre ordinateur, n'est-ce pas ? Vous devez donc autoriser d'une manière ou d'une autre l'utilisateur de votre site Web à télécharger de nouveaux téléphones. Comment s'y prendre ? Le moyen le plus simple est d'utiliser le côté appelé fonts.google.com. C'est assez génial car les polices ici sont gratuites. Ils sont très faciles à configurer et se chargent plus rapidement car une bonne technique s'appelle la technique de pré-connexion dont nous ne pouvons pas parler. OK, alors que faisons-nous ? Tout d'abord, tapez quelque chose ici parce que vous voulez voir à quoi ressemblera la police. Est-ce que c'est le texte que vous voulez vérifier. Donc, par exemple, il s'agit d'un exemple de texte, non ? Mais n'oubliez pas que voici les lettres typiques qui existent dans presque tous les alphabets, n'est-ce pas ? C'est donc une bonne idée. Si vous venez de Pologne, par exemple, pour taper les lettres polonaises comme vous pouvez le voir, celui-ci ne le prend pas en charge. Ou vous voulez voir à quoi ils ressemblent. Et bien sûr, de nombreux autres pays ont leurs propres caractères spéciaux, alors vérifiez-les avant appliquer la police, car vous pourriez être surpris de constater qu' elle ne fonctionne pas correctement pour chaque caractère. La deuxième chose est que vous pouvez vérifier la taille, la taille de chaque forme, son apparence. Parce que vous voulez peut-être l'utiliser pour l'en-tête sur la droite. Peut-être que c'est mieux pour Heather, mais c'est aussi mauvais, par exemple quand c'est petit, non ? Alors tu décides de cette façon. Vous pouvez également entendre passer au thème sombre pour voir à quoi il ressemble dans l'obscurité en fonction du type de site Web. Et ici, vous pouvez choisir les catégories des éléments que vous souhaitez rechercher, par exemple, vous souhaitez rechercher uniquement l'écriture manuscrite. C'est plutôt cool, non ? Vous voulez rechercher les textes dessinés à la main et écrits à la main. Par exemple, j' adore vraiment celui-ci, disons le Pacifique. Oui, c'est ce que je veux utiliser de mon côté parce que j'écris des poèmes de mon côté et ouah, ça va être génial. Alors, comment l'utiliser ? Eh bien, tu vas cliquer dessus. Ensuite, vous pouvez télécharger la famille, puis vous pouvez l'extraire et ainsi de suite, etc. Mais ne le faites pas de cette façon. À cause de la police, nous chargeons plus lentement de cette façon. Je ne vais donc même pas expliquer comment procéder de cette façon. Parce que la façon de procéder est d'utiliser le signe plus ici. Et puis, comme vous pouvez le voir, nous avons ici un moyen élargi de l'importer de votre côté. Il vous indique donc que vous devez intégrer une police dans le chapeau à l' aide de ce code. Nous allons donc simplement le copier en cliquant sur ce bouton ici. Et nous allons passer à Visual Studio Code. Et nous pouvons l'ajuster, le placer avant le CSS. Pourquoi avant le CSS ? Parce que, eh bien, nous ne voulons pas charger la police par défaut, n'est-ce pas ? Avant de le charger. Alors mettons-le ici. Et après cela, de quoi avons-nous besoin pour appliquer la police, n'est-ce pas ? Et l'ordre pour l'appliquer, nous devons taper le nom de la police en première ligne ici. Nous ne pouvons pas le faire comme ça et simplement le mettre ici, n'est-ce pas ? Famille de polices, nous voulons que ce soit Pacifica. Et voyons si cela fonctionne sur notre site. Comme vous pouvez le constater, oui, cela fonctionne bien. Nous avons utilisé le Pacific Go en ce moment. Si vous souhaitez utiliser un autre formulaire Google, vous devez accéder aux Google Fonts et, par exemple disons que nous voulons quelque chose de différent. Maintenant. Réinitialisons tout. Disons que j'aime vraiment celui-ci. Je peux maintenant l'ajouter ici. Et comme vous pouvez le constater, nous pouvons maintenant utiliser les deux à la fois. Comme vous pouvez le voir ici, nous avons écrit ce que les Bruno A's et aussi le Pacific. Et pour l'utiliser, je vais simplement le copier dans notre code Visual Studio ici. Hein ? Maintenant, si je veux utiliser le Bruno comme C, je me réunirais pour utiliser quoi ici ? Cette famille de polices. Donc comme ça. Et maintenant, je vais utiliser les Bruno A. Comme tu peux le voir. Maintenant, Bruno, si je veux utiliser l' appel Pasiphae à un autre endroit, ou peut-être voulez-vous l' utiliser pour autre chose. Disons que vous voulez avoir quelque chose d'autre ici, non ? Je veux juste accéder à celui-ci. Je ferais donc autre chose. Et je vais juste changer celui-ci aussi. Parce que ce sera par exemple l'en-tête, n'est-ce pas ? C'est celui de Bruno A. Alors peut-être que ce serait encore mieux si je tape quelque chose comme un en-tête. Et ici, je vais faire quelque chose comme un chat, non ? Donc, pour les en-têtes, je veux utiliser. Ça, après l'école, pour les impôts, je veux m'en servir. Et si vous voulez arrêter d' utiliser l'un d'entre eux, est-ce pas, vous devez simplement supprimer cette partie, n'est-ce pas ? Je ne veux pas celui-ci. Ou vous pouvez simplement vous rendre sur ce site Web et il générera le code pour vous. Vous voulez, par exemple, arrêter d'utiliser le noyau Pasiphae, je vais simplement le supprimer. Et comme vous pouvez le voir, ce code est mis à jour. L'installation est plutôt cool. Et cette partie de code que nous avons ajoutée ici, de quoi est-elle responsable ? Ici, nous avons quelque chose, mon message est comme la pré-connexion. Qu'est-ce que cela signifie que quelque chose est pré-connecté ? Cela signifie qu'il va être chargé. Donc avant la connexion, avant de télécharger le contenu D. Donc, avant de télécharger le téléphone, cela accélère le processus de chargement de votre site Web. Et si quelqu'un accélère, toute l'encre de votre site Web vous sera profitable , car votre site Web sera visité plus souvent, car c' est ainsi que fonctionne Google notre rapidité est très, très importante. Mais comment fonctionne-t-il ? Si vous voulez comprendre le clavier et sinon, continuez. Vous devez juste l'ajouter et ne le faites pas, ne vous en souciez pas. Mais si tu veux le comprendre , continue d'écouter. Ainsi, lorsqu'un navigateur charge votre page Web, il doit récupérer de nombreuses ressources différentes, telles que des fichiers CSS, fichiers JavaScript, vos images sur votre site, votre police, comme celle-ci, et bien d'autres encore. Et tout cela prend du temps. Il peut y avoir, par exemple, 100 ressources de votre part. De plus, trop gros. chacune de ces ressources, le navigateur doit établir une connexion avec le serveur sur lequel se trouvent ces ressources. Et cela prend également du temps. Ils peuvent être situés sur de nombreux serveurs différents. Et il faut du temps pour simplement se connecter au serveur. La technique de pré-connexion implique le navigateur établisse donc que le navigateur établisse une première connexion avec le serveur avant qu'il ne commence à récupérer des ressources spécifiques. OK, donc il va juste établir connexion avant de commencer à récupérer des ressources spécifiques. Alors pourquoi le navigateur est occupé à charger, par exemple une image de votre côté, d'accord ? La connexion à la police que nous avons ici a déjà été établie à l' aide de Reconnect. Cela signifie que lorsque le navigateur commence à récupérer le fichier de police spécifique, la connexion au serveur est déjà établie et prête à être utilisée. Vous n'avez donc pas besoin de vous connecter puis de l'alimenter, vous y êtes déjà connecté. Cela réduit donc le temps nécessaire au téléchargement du fichier. Et comme il n' est tout simplement pas nécessaire d' établir une connexion soudaine avec le serveur, le navigateur n'a qu'à effectuer lui-même le téléchargement des données, accord. Donc, sans avoir à me reconnecter au serveur, je répète car cette action a déjà été effectuée par le prokinétique. Donc, dans l'ensemble, cela ne fait que réduire la charge dans le réservoir d'une page Web. C'est pourquoi c'est la façon d'utiliser la taille de police personnalisée. Vous pouvez bien sûr télécharger lorsque d'autres personnes que vous achetez achètent certaines d'entre elles. Ne le fais pas. Regardez combien de familles de téléphones se trouvent ici. Pourquoi s'embêter à chercher ailleurs ? Vous devez conserver du contenu gratuit, beaucoup d'entre eux. Vous trouverez certainement quelque chose qui conviendra à votre site Web si vous n'aimez pas la police par défaut. De cette façon, le chargement sera rapide et votre site sera visité plus souvent. Il n'y a que moins que Merci beaucoup.