Fondamentaux du développement Web : HTML et CSS

1. Introduction: Bonjour et bienvenue à Web Development Fundamentals, HTML et CSS. Je suis Chris, je auto-enseigné développeur web et le créateur de deux cours réussis ici sur Skillshare, comprendre le développement web et comment construire efficacement des sites WordPress avec Divi. Dans cette classe, nous allons couvrir quelque chose qui est très fondamental pour construire pour le web et c'est l'utilisation du HTML et du CSS. HTML est le langage de balisage qui donne de la structure aux pages Web et aux applications sur le Web, tandis que CSS est le langage de feuille de style utilisé pour décrire la présentation du HTML. HTML et CSS ont travaillé en étroite collaboration pour créer l'aspect visuel et la mise en page de votre site Web ou application Web. Dans ce cours, on va les couvrir ensemble. Quel que soit le chemin spécifique que vous choisissez de suivre en tant que développeur web, une chose est sûre que vous aurez besoin d'une certaine connaissance du HTML et du CSS. Si vous êtes prêt à plonger dans et apprendre les fondamentaux du HTML et CSS rester à regarder et je vous verrai dans la prochaine vidéo. 2. Ce dont vous aurez besoin: Avant de commencer, vous aurez besoin de quelques outils nécessaires pour le développement web, car nous ne faisons que le développement web frontal, juste avec HTML et CSS. Tout ce dont nous aurons besoin, ce sont deux choses, les deux sont disponibles gratuitement. Le premier est un navigateur web. J' utilise Google Chrome. Votre navigateur Web pour ceux d'entre vous qui n'ont pas entendu le terme auparavant, c'est juste la chose que vous utilisez pour naviguer sur Internet, mais vous pouvez également l'utiliser pour ouvrir n'importe quelle page Web, même si c'est juste sur votre ordinateur écrit dans un fichier texte. Il interprète essentiellement ce que nous construisons aujourd'hui, HTML et CSS, et l'affiche. C' est très important pour ce que nous sommes sur le point de faire. La deuxième chose est un éditeur de code, et j'utilise un atome de code. Il est développé par GitHub, et est l'un des plus populaires, mais vous pouvez utiliser ce que vous voulez pour EVA. En termes de navigateurs, la plupart des gens utiliseront Firefox, Safari, Internet Explorer, ou Edge, qui couvre en fait 90 pour cent des utilisateurs d'Internet. Firefox et Chrome, qui est celui que j'utilise sont disponibles sur Windows, et Safari est disponible sur Mac, et je suis à peu près sûr Internet Explorer ou Edge, qui est une version plus récente, est juste Microsoft Je pense que c'est seulement PC, mais je recommanderais Chrome, Safari ou Firefox. J' ai tous ces derniers installés sur mon ordinateur aussi. Laissez-moi ouvrir Firefox aussi. La raison pour laquelle je recommande ces trois est qu'ils sont tous livrés avec des outils de développement. Ce que je veux dire par cela est si je vais dans Google Chrome, qui est mon navigateur préféré, et j'appuie sur la commande Alt I. Cela fera apparaître ma console de développeur, et vous ne pouvez pas comprendre ce qui se passe dans tous ces différents ici, mais c'est très puissant d'avoir ceci. Cela rend beaucoup plus facile à déboguer. Nous pouvons éditer notre site Web ou n'importe quelle page web à la volée pour tester de nouvelles choses, nous pouvons voir les styles qui s'appliquent. Il est très bon d'avoir ces outils lorsque vous développez pour le web. Safari, je crois que c'est, appelé Inspecteur Web. Afficher l'Inspecteur Web. Je pense que nous devons d'abord aller à une page réelle. Allons juste sur Google.com.au, montrer Web Inspector, et comme vous pouvez le voir ici, nous avons une interface similaire, et sur Firefox, comment appelent-ils ça ? Console. J'utilise juste du chrome. Je ne sais pas comment ils appellent ça, mais nous le découvrirons dans une seconde. Ils l'appellent juste l'inspecteur. Donc, vous pouvez aller dans, Outils, développeur web, et cliquez sur l'un de ces pour obtenir une interface similaire. Vous verrez l'inspecteur où vous pouvez inspecter les éléments console, débogueur. Encore une fois, ne vous laissez pas submerger par tout ça. Je vous le fais savoir en termes de choix de votre navigateur. Si vous vous en tenez à Chrome, Firefox ou Safari, vous serez plus que d'accord. Si vous voulez suivre le plus près possible, Chrome est certainement une bonne option. La deuxième chose dont vous aurez besoin est un éditeur de code. J' utilise Atom depuis un moment maintenant et je l'aime vraiment, mais il y a d'autres options d'une option libre comme Sublime Text, vous pourriez utiliser Vim, ou vous pourriez utiliser un autre appelé parenthèses. Tous ces éléments, je suis sûr, sont gratuits, et ils fonctionnent tous de la même manière. Encore une fois, si vous voulez suivre le plus près possible avec ce que je fais et que vous n'avez pas de préférence vers un éditeur de code, vous pouvez simplement choisir atom. Une chose que je devrais dire est techniquement, si vous êtes sur un PC, vous pouvez utiliser le Bloc-notes pour développer des pages web aussi. Je suis à peu près sûr sur Mac, je pourrais utiliser TextEdit théoriquement pour créer des documents web, mais vous n'obtiendrez pas toutes les fonctionnalités spéciales qui le rendent plus facile à développer pour le web comme vous le feriez sur un éditeur de code comme Atom, Vim ou texte sublime. Je recommande fortement de choisir un éditeur de code approprié, et de ne pas développer via le Bloc-notes ou TextEdit. Encore une fois, si vous ne savez pas de quoi je parle, téléchargez Atom ou Sublime Text ou Vim, et vous serez gentil. Si vous avez un éditeur de code et un navigateur Web, vous êtes prêt à partir. Ce sont les deux choses dont vous avez vraiment besoin. Mais en termes de connaissances, si vous commencez à partir de zéro, si c'est votre première fois en apprenant sur le développement web, je vous recommande certainement d'aller voir l'un de mes cours précédents, donc vous pouvez simplement vous rendre à mon profil, et mon cours précédent, comprendre le développement web, un guide pour les débutants sur le web. Cela vous donnera un aperçu de l'ensemble du développement web, et donc je recommande fortement à tous ceux qui viennent à mes cours après celui-ci de revenir en arrière et de se référer à celui-ci. Nous parlons de concepts, comme HTML et CSS, mais aussi de la façon dont cela s'intègre dans la programmation back-end. La différence entre front-end et back-end, comment déployer vos sites Web, obtenir un serveur, toutes ces choses différentes. Je donne juste un aperçu du développement web dans ce cours, et donc je recommande fortement que celui-ci d'abord. Juste pour que vous sachiez, où HTML et CSS s' intègrent dans l'image globale du développement web. Sinon, si vous pensez avoir une bonne compréhension du développement web ou si vous avez déjà suivi ce cours. Nous sommes à peu près prêts à plonger directement et à commencer avec du HTML. Je suis vraiment excité de commencer et je te verrai dans la prochaine vidéo. 3. Qu'est-ce que le HTML et la CSS: Dans cette vidéo, nous allons couvrir ce qui est HTML et CSS. Nous avons en fait discuté comment HTML et CSS dans l'une de mes classes précédentes, comprendre le développement web, donc si vous avez pris celui-ci, vous avez probablement déjà une assez bonne compréhension de ce que HTML et CSS sont. Mais dans cette vidéo et dans cette classe en général, nous allons y plonger un peu plus profondément. Un bon endroit pour commencer à comprendre HTML est l'introduction sur w3schools.com. Si je vais à w3schools.com, je clique sur « Apprendre HTML », puis je clique sur « HTML Introduction », il parle de ce qui est HTML et nous donne un document HTML simple. Je pense qu'ils font un assez bon travail de synthèse HTML, cela signifie Hyper Text Markup Language, et il décrit la structure des pages Web en utilisant des balises. Vous avez des éléments qui font les blocs de construction des pages HTML, les éléments sont représentés par des balises et les balises internes sont des morceaux de contenu. Une chose importante à noter est que les navigateurs n'affichent pas le code HTML, mais ils les utilisent pour afficher le contenu de la page. Donc, fondamentalement, ce que nous voyons ici est le code qui est interprété par notre navigateur afin de construire la page et voir ce que vous voyez dans votre navigateur. C' est un peu méta, mais nous sommes sur une page web en ce moment. Ce que nous examinons, c'est les résultats de HTML et CSS réunis dans notre navigateur pour créer un site Web. Mais comment nous arrivons à ce point est à travers HTML. Juste pour forer cette maison, nous pouvons aller à n'importe quelle page Web, disons par exemple, cette page Web, et faites un clic droit dessus et cliquez sur « Afficher la source de la page », puis vous verrez ce qui est réellement alimenté au navigateur pour vous donner ce résultat ici. C' est un exemple assez compliqué, je suppose, vous avez au début, beaucoup de CSS ici qui est intégré dans la page. Vous pouvez faire défiler vers le bas et voir quelques JavaScripts là-bas. Je ne serais pas trop confus par cela, mais vous pouvez commencer à voir ici beaucoup de HTML avec des classes et d'autres attributs. Je ne m'attends pas à ce que vous compreniez bien ce qui se passe ici, c'est de ça que ce cours est à propos. Mais je voulais juste faire les points, tout ce que vous voyez dans votre navigateur est HTML et entre autres choses comme CSS et JavaScript. Comment pouvez-vous penser au HTML ? J' aime le considérer comme une structure, mais aussi comme des éléments définissant. Comme vous pouvez le voir dans notre document ci-dessous, une fois que nous avons créé une balise, nous la définissons, mais là où nous la plaçons à l'intérieur du document, définit également la structure. Comme vous pouvez le voir, cette balise de paragraphe est après cette étiquette de titre donc si nous devions changer l'ordre, cela changerait la structure, et comme vous le verrez au cours, nous pouvons imbriquer des balises dans des balises et créer, Je suppose, un arbre d'éléments qui est connu comme le modèle d'objet de document ou le DOM. Encore une fois, ne vous inquiétez pas trop à ce sujet, nous allons couvrir le Document Object Model pendant très longtemps. C' est un peu sur la façon dont HTML, qu'est-ce que CSS ? Eh bien, nous pouvons aller à l'élément de menu CSS sur w3schools.com et aller à la page d'introduction de cela et nous obtenons un peu d'aperçu. Fondamentalement, CSS décrit comment les éléments HTML doivent être affichés sur votre écran, sur papier ou sur d'autres supports, comme il est dit ici. Il signifie feuilles de style en cascade, et nous pouvons stocker notre CSS à différents endroits, réutiliser différents styles, il rend tout plus organisé lorsque nous stockons CSS dans des fichiers séparés ou définissons des règles dans le même document que le HTML. Encore une fois, nous allons couvrir tout ça, donc vous verrez que ça se passe juste en face de vous. Mais si nous revenons à la source de la page d'un site Web, faisons simplement ce site parce qu'il est juste en face de nous, nous avons CSS juste ici, et c'est en fait des règles CSS intégrées dans le document. Mais si nous descendons à n'importe quel élément, nous pouvons peut-être commencer à voir, et je ne vois pas quelque chose venir tout de suite, mais nous pouvons rechercher le style, et nous pouvons commencer à voir un élément HTML avec un attribut de style, où nous pouvons également définir certains CSS. Vous pouvez aller à n'importe quelle page Web et vous pouvez voir CSS et vous pouvez voir HTML. Mais souvent, le code CSS est stocké dans un autre document référencé par ce document. Nous le verrons très bientôt aussi. En attendant, pour forer la différence entre CSS et HTML, je veux vous montrer une page web qui n'a aucun CSS. Pour cela, je vais avoir besoin d'une certaine extension. Vous n'avez pas besoin de télécharger cette extension, je l'ai seulement téléchargée pour cette démonstration afin que vous puissiez simplement suivre. Mais si nous allons sur n'importe quel site, allons simplement sur Google.com, et j'ai cette extension ici qui me permet de désactiver tous les styles. Je peux aller dans le menu CSS de ceci, appuyez sur « Désactiver tous les styles », et vous pouvez voir à quoi ressemble la page d'accueil de Google sans CSS. Je suis actuellement connecté, donc il y a certaines de mes informations là-bas. Mais essentiellement, vous pouvez voir que la boîte de recherche là, est là , vous obtenez les suggestions, je suppose, cela apparaît et vous obtenez les boutons et les images, mais c'est partout et ce n'est pas bien stylé. Si nous le réactivons, vous commencerez à voir tout est disposé, et vous pouvez commencer à voir l'importance d'avoir CSS parce que ce site Web ici est à peu près inutilisable. Mais pour être juste, Internet repose aujourd'hui fortement sur le CSS et le style. Il y a des exemples que je pourrais montrer des années 90 ou quelque chose, où il n'y a pas de CSS impliqué quoi que ce soit. En fait, j'ai un exemple à vous montrer. Si je vais à www-cs, j'ai trouvé cette page web qui est apparemment créée sans aucun CSS. J' ai pu entrer et trouver qu'il chargeait une feuille de style, mais nous pouvons simplement entrer et supprimer ce lien. C' est à peu près à quoi ressemble un site Web sans CSS. Comme vous pouvez le voir, les liens ici sont soit de couleur violet ou brun foncé, je suppose, vous pourriez appeler cela violet foncé, bleu, ou si vous cliquez sur eux, vous pouvez devenir rouge. Vous verrez que les éléments sont comme empilés les uns sur les autres, il n'y a pas de colonnes, ce sont essentiellement des images, des textes. Vous pouvez mettre du texte en gras, c'est à ce sujet, vous pouvez mettre des caractères chinois qui ressemblent, vous pouvez mettre des liens, vous pouvez mettre dans cette règle horizontale, et vous pouvez empiler des liens les uns sur les autres, mais vous êtes assez limité. Je veux dire, dans les années 90, vous pourriez être capable de sortir avec un site Web comme celui-ci sans CSS, mais à nos jours, vous avez absolument besoin de CSS et c'est si vital pour faire n'importe quel type de document web. J' espère que cela vous communique à quel point il est important d'avoir CSS à côté de votre HTML, et comment ensemble ils sont fondamentaux et complémentaires. Une chose que je vais mentionner à propos du HTML et du CSS est que lorsque vous commencez à faire des recherches sur le web ou à consulter d'autres cours, vous pourriez entendre des gens ou lire des gens se référant au HTML et au HTML5 comme s'ils étaient des choses différentes. Comme si je recherche HTML5 sur Google, je reçois un tas d'articles avec HTML5 en eux évidemment, et si je recherche HTML, je reçois juste du HTML. C' est de type similaire, les sites Web comme w3schools.com, les deux ont une page sur HTML et HTML5. Il peut être assez déroutant de savoir, eh bien, qu'est-ce que vous apprenez en HTML ou HTML5 ? Comme vous pouvez le voir, HTML5 est la dernière version de HTML, et il est sorti depuis près de trois ans ou environ trois ans maintenant. C' est certainement la nouvelle version de HTML qui existe depuis un certain temps. Je vais juste faire référence dans cette classe au HTML et HTML5 comme fondamentalement la même chose parce que nous devrions développer en HTML5, pas HTML4 si nous apprenons le développement web aujourd'hui en 2018, ou pour toujours si vous écoutez dans les années à venir. Même chose avec CSS et CSS3. Si nous tapons CSS, nous verrons tous ces liens, CSS3 et vous avez des pages web similaires qui diffèrent de CSS à CSS3. Encore une fois, CSS3 est juste la dernière version de CSS et je pense que comme HTML, il est sorti depuis très longtemps. Je vais juste me référer à CSS, et CSS3 comme fondamentalement la même chose dans ce cours. C' est assez de théorie pour l'instant. Je ne sais pas si j'avais besoin de parler de CSS et CSS3 mais c'est quelque chose qui m'a aussi embrouillé parce que j'ai vu HTML ici et HTML5. Les gens les désignent souvent comme des choses distinctes, mais en fin de compte, nous apprenons HTML et CSS en 2018 ou au-delà. Nous pouvons juste penser au HTML et HTML5 comme la même chose. C' est assez de théorie pour l'instant. Dans la vidéo suivante, nous allons arrêter de parler de HTML et CSS et commencer à développer certains. Je te vois dans la prochaine vidéo. 4. Commencer avec HTML: D' abord, nous allons ouvrir notre éditeur de code. Pour moi, c'est Atom. Pendant que c'est le chargement, je vais retourner dans notre navigateur et revisiter cette page par les écoles W3. Alors je vais y aller. Cliquez sur « Apprendre HTML », cliquez sur « Introduction HTML ». Donc, je veux que vous faites défiler vers le bas jusqu'à l'endroit où il vous montre ce document HTML simple. Jetons un coup d'oeil à ce qui se passe ici. Il y a deux parties, et l'une est les étiquettes. Vous pouvez voir les balises de ces signes moins de signe et plus grand que de signe avec un peu de texte entre les deux. Ensuite, il y a du contenu, qui est juste du texte dans ce cas. Vous avez le titre de la page, mon premier titre, mon premier paragraphe. Il est en fait assez bien formaté ici et votre éditeur de code devrait faire la même chose. Vous pouvez voir ces différentes parties codées par couleur. Ainsi, vous pouvez dire qu'il s'agit d'une balise et vous pouvez dire que ce texte fait partie de cette balise à partir de la couleur. Donc, avec les balises, vous avez des balises d'ouverture et de fermeture et des balises sans contenu. Donc ici, par exemple, c'est une balise qui n'a pas d'ouverture ou de fermeture. Vous n'avez besoin de mettre ça qu'une fois. Mais si vous regardez à la balise suivante, nous avons HTML. Mais là, nous avons encore une fois, mais avec une barre oblique à l'avant, et cela indique la balise de fermeture. Fondamentalement, tout ce qui se trouve entre la balise d'ouverture et de fermeture constitue ce qui définit cette balise. Cela semble abstrait, mais si nous regardons un exemple plus concret ici avec le titre, cela indique que le titre commence. Ensuite, nous mettons le titre et ensuite nous utilisons la balise de clôture pour dire que nous avons fini de mettre le titre. Le titre entre dans ce qu'on appelle la section de tête de votre document HTML, mais il y a aussi une section de corps qui est ouverte et fermée ici. Nous allons entrer dans la tête et le corps dans une minute, mais ce que je veux dire ici, c'est qu'on a des étiquettes. C' est la base du HTML et ce qui se entre les balises et ce qui est dans la balise définit ici l'élément. Dans cet exemple, nous avons juste du texte, mais nous pouvons mettre n'importe quoi là-dedans, nous pouvons mettre d'autres balises là-dedans. Nous pouvons mettre des images entre les deux, et fondamentalement, c'est HTML. C' est notre balisage, ce sera un exemple très simple. Maintenant, ce que je veux faire est de prendre cet exemple entier et de le déplacer dans notre éditeur de code. Donc, je vais tout sélectionner. Appuyez sur « Commande C » sur un Mac pour copier. Je vais me débarrasser de ces messages de bienvenue de l'atome. Je vais cliquer sur « Nouveau fichier », et on nous donne un fichier vide. Maintenant, il n'y a pas encore de mise en forme parce qu'il ne sait pas quel type de document il s'agit. Donc, ce que je vais faire, c'est que je vais cliquer sur « Fichier » et enregistrer ceci tout de suite. Donc, ce que vous devez faire maintenant est de naviguer vers l'endroit où vous voulez le stocker. fur et à mesure que nous avançons tout au long du cours, nous allons ajouter plus de fichiers, donc nous devrions vraiment mettre en place un répertoire de projet. Je vais juste aller sur le bureau et créer un projet HTML et Css. Je vais juste appeler ça comme ça. Maintenant, nous avons un dossier dans lequel loger notre projet. Ce que je vais nommer ceci est index.html. Vous n'avez pas à appeler le vôtre index.html. La partie importante est que vous avez le point HTML à la fin, car cela dira à votre ordinateur et à tout ce qui essaie d'interpréter ce qu'est ce fichier, vous lui dites spécifiquement qu'il s'agit d'un document HTML. Index est un mot ou un nom courant pour donner un document HTML qui se trouve au centre de votre projet. Donc, je pense que l'index dans ce cas, point HTML est un nom vraiment approprié. Nous allons cliquer sur « enregistrer » et soudainement vous commencerez à voir les couleurs venir dans la même nature que ce que nous avions ici. Nous verrons donc une mise en forme ici et nous pouvons voir clairement ce qu'est une balise et ce qu'est un morceau de texte ou de contenu dans la balise. L' autre grande chose à propos d'avoir un éditeur de code qui est, je peux cliquer sur l'ouverture et il mettra en évidence la fermeture afin que vous puissiez commencer à voir où il se ferme. Si je devais simplement le faire et me débarrasser de la clôture, ça casserait mon document. Peut-être qu'il apparaîtra encore dans ce cas. Mais une fois que vous avez un document complet, vous voulez certainement fermer à tout moment. Maintenant, juste pour le rendre un peu plus facile de montrer l'imbrication, je veux indenter le titre afin que vous puissiez voir qu'il se trouve dans la tête, et je veux indenter cela parce qu'il se trouve dans le corps. Si nous devions créer une autre balise et la mettre en dessous, je m'attendrais à l'onglet aussi. Vous verrez cela beaucoup dans le développement web pour montrer l'imbrication, mais nous allons couvrir l'imbrication dans une prochaine vidéo. En ce moment, je voulais juste passer en revue les étiquettes que nous avions ici. J' ai mentionné que nous avons des balises vides, donc il n'y a pas besoin d'une balise de fermeture, mais ensuite nous avons ces balises d'ouverture et de fermeture. Tout en haut, nous avons HTML, qui définit qu'il s'agit d'un document HTML. n'y a pas grand-chose à dire à propos de cette balise sauf qu'essayer de tout garder entre ces deux-là. On a la section de la tête. La section tête est l'endroit où vous placez vos métadonnées. Nous allons faire une vidéo complète sur la tête HTML plus tard dans cette classe. Mais pour l'instant, l'une des choses dont vous aurez besoin sur votre page Web est un titre. Pour que nous puissions mettre le titre entre les étiquettes de tête. Donc, lorsque vous affichez votre document dans un navigateur, peut-être allons-y tout de suite. Ce que je peux faire est de cliquer sur « finder » nouvelle fenêtre du Finder. Je peux naviguer jusqu'à l'endroit où se trouve mon projet et je peux littéralement faire glisser cette écriture index.html dans mon navigateur. Comme vous le voyez ici, ce n'est pas une adresse sur Internet, mais ont toujours pu l'interpréter via notre navigateur car il est simplement HTML et Css et JavaScript lorsque nous l'ajoutons à ce projet. Comme vous pouvez le voir, le titre de la page se trouve ici. Si je devais retourner dans l'éditeur de code et changer le titre de la page en document HTML et cliquez sur « Enregistrer » puis rechargez ce fichier. Vous verrez que le titre de cette page est maintenant document HTML. Donc, vous pouvez commencer à voir que juste ici tout à l'intérieur de la fenêtre de votre document est le corps. Alors tout ce qui est en tête, si on y retourne, c' est des trucs qui le soutiennent. Donc, vous avez le titre qui entre dans, lorsque vous regardez un onglet sur Google Chrome ou vous ouvrez une fenêtre qui apparaîtra sur la fenêtre elle-même. Vous pouvez mettre dans d'autres choses ici liées à SEO, vous pouvez lier des feuilles de style externes ici. Encore une fois, nous allons nous pencher plus en détail plus tard, mais c'est essentiellement la différence entre la tête et le corps, qui est ce que vous voyez ici. J' ai dit que nous couvririons l'imbrication dans une vidéo ultérieure, mais c'est un concept simple, donc je vais juste le couvrir en ce moment. Je vais vous jeter quelques éléments dans lesquels vous ne connaissez peut-être pas déjà. Ne vous inquiétez pas, nous les couvrirons plus tard. Mais juste pour démontrer l'imbrication, si je devais saisir cette balise de paragraphe, mettez-la ici, appelez ce deuxième paragraphe. Ensuite, ici, il y a une autre balise div. divs sont fondamentalement juste des blocs en HTML. Ensuite, je peux mettre dans mon troisième paragraphe, vous pouvez commencer à voir l'imbrication se produire ici. Donc, comme vous pouvez le voir, nous avons corps et dans le corps nous avons h1, P et div. Dans ce div, nous avons P plus un autre div, et dans ce div nous avons un P, qui est essentiellement imbriqué. En ce moment, cela n'aura pas trop de sens tant que nous n'aurons plus d'éléments présentés logiquement sur la page. Mais essentiellement, vous avez cette balise h1, une balise P, puis une div qui va juste après. Si nous devions définir certains styles sur cette balise div, cela affecterait tout ce qu'elle contient. Ceux-ci sont appelés enfants de cette balise et ceci s'appelle un parent. Mais encore une fois, je deviens un peu technique ici. On n'a pas besoin d'entrer autant de détails pour l'instant. Mais essentiellement, vous allez voir cela beaucoup en HTML et c'est appelé imbrication. Je vais juste inverser ces changements en appuyant sur Control Z. Cela couvre à peu près le document de base que vous avez trouvé dans l'exemple ici. Donc, dans cette vidéo, nous avons fait connaissance avec le titre, nous avons fait connaissance avec h1 et P. Mais il y a beaucoup plus d'éléments à utiliser en HTML. Donc, dans les prochaines vidéos, nous allons couvrir certains des autres éléments qui peuvent constituer votre document HTML. Alors je te verrai dans la prochaine vidéo. 5. Titres et paragraphes: Dans cette vidéo, nous allons couvrir les en-têtes et les paragraphes. Nous avons déjà un titre et un paragraphe dans notre document, mais nous n'avons pas vraiment expliqué comment chacun de ces éléments fonctionne. Avec les balises de titre, nous pouvons retourner à W3schools et commencer à creuser dans les en-têtes un peu plus. Mais comme vous pouvez le voir, ils ont un excellent exemple ici où ils créent six titres différents dans six tailles différentes. Mais en réalité, les rubriques sont plus importantes que la taille. Les moteurs de recherche utilisent effectivement des en-têtes pour indexer la structure et le contenu de votre page Web. Il y a deux points importants à mentionner ici au sujet des rubriques. Revenons à notre document ici et voyons que nous avons une étiquette h1, pourquoi avons-nous une étiquette h1 ? Eh bien, h1 est censé être la tête de niveau supérieur. Si je retourne à notre document, je vais ouvrir un nouvel onglet et juste le faire glisser à nouveau pour que je puisse ouvrir à la fois, et si c' était dire, un billet de blog ou un document sur la page ou autre, disons juste que c'est une page à propos, vous utiliseriez h1 pour dire « À propos de nous ». Juste pour des raisons de cohérence, nous allons créer ici un titre qui dit : « À propos de nous » aussi. Assurez-vous que vous économisez toujours. J' utilise juste Control S mais vous pouvez aussi aller « File Save » là et revenir à votre document et comme vous pouvez le voir, le titre est à propos de nous et l'en-tête de niveau supérieur, qui est défini par h1 est là. Peut-être que si vous faisiez un document, un post sur nous, vous auriez sur nous, un premier paragraphe, mais peut-être que vous voulez aussi des sous-titres. L' en-tête de niveau suivant serait h2. A propos de notre histoire, peut-être que si c'est comme une entreprise ou un duo, peut-être que vous voulez avoir un titre de sous-niveau, et ensuite vous mettrez une autre balise de paragraphe peut-être et alors nous pourrions avoir plusieurs h2 à ce niveau, si cela a du sens. Notre histoire, nos valeurs, disons qu'on y trouve, et je pourrais jeter plus de texte dans ces paragraphes, mais ce n'est que des fins de démonstration, évidemment. Si je retourne dans notre navigateur et actualise, vous pouvez voir que notre titre de premier niveau est à propos de nous et notre histoire et nos valeurs tombe sous cela. Maintenant, en HTML, vous avez jusqu'à six niveaux, sorte que vous pouvez aller de plus en plus profond, peut-être qu'il y a deux titres dans notre histoire. Donc, vous allez utiliser le numéro suivant h3 pour aller plus loin et avoir un autre titre de sous-niveau, mais comme nous l'avons mentionné juste avant, il est également important de savoir quels titres vous utilisez pour le référencement. Ne pensez pas seulement aux h1 comme la grande aversion de h2 et pensez simplement à la taille lorsque vous écrivez votre document HTML, vous voulez certainement suivre la structure où vous avez votre titre de premier niveau, qui est h1, puis tout sous les chiffres diminuent. Il ne s'agit pas seulement de la taille du titre, il s'agit aussi de le rendre plus lisible pour l'utilisateur, mais aussi de dire aux moteurs de recherche comme Google, la structure de votre page et c'est un outil que Google utilise pour comprendre comment indexer votre page , mais aussi pour comprendre à quel point elle est lisible. structure est importante pour le lecteur, elle est également importante pour les moteurs de recherche et tout ce que vous devez savoir, c'est que vous devez avoir le cap un comme titre de premier niveau et ensuite travailler vers le bas. Si nous allons avoir un cap en dessous de la tête un, ce sera h2 et puis se diriger en dessous de h2 serait h3 et ainsi de suite et ainsi de suite. L' autre chose que vous pouvez faire, qui n'est pas vraiment un titre, est une règle horizontale. Il est défini avec le h aussi. Mais fondamentalement, si nous voulions avoir une séparation entre ces deux titres, nous pouvons mettre une étiquette h. Ce n'est pas un désolé, une balise hr, c'est une balise auto-fermante, donc vous n'avez pas besoin de mettre de contenu dedans. Vous n'avez pas besoin de le faire, par exemple, vous pouvez simplement mettre le signe moins que, hr, plus grand que signe. Revenir à notre page et vous pouvez voir qu'il y a une règle horizontale là-dedans. La prochaine chose est les paragraphes et je vais également faire référence à W3Schools. La chose importante à noter sur HTML et faire des paragraphes est que vous ne pouvez pas modifier la sortie en ajoutant des espaces supplémentaires ou des lignes supplémentaires dans votre code HTML. Cela devrait être défini en utilisant des paragraphes en disant spécifiquement que vous voulez avoir un saut de ligne, et vous devrez mettre des entités HTML et autres pour obtenir plus d'espace blanc. Encore une fois, ne vous inquiétez pas trop à ce sujet, nous allons le couvrir dans une future leçon, mais pour l'instant, allons simplement le démontrer. Notre premier paragraphe, puis nous allons faire de l'espace et dire bonjour, au revoir. Revenons en arrière et vous pouvez voir l'espace blanc le plus ancien que nous avons créé et le contour briser, il ne tombe pas sur. Paragraphe, si vous vouliez avoir une séparation des lignes, une façon de le faire est de le placer dans une autre balise p et qui indique à votre navigateur qu'il s'agit d'un nouveau paragraphe, donc avoir un espacement entre les deux. Si je veux remettre ça à la façon dont c'était, mets bonjour, adieu. Maintenant, vous verrez qu'il est sur une nouvelle ligne car il s'agit d'un nouveau paragraphe. C' est dans cette nouvelle balise de paragraphe, mais encore une fois, l'espace blanc entre les deux, n'est pas là. Un moyen de contourner cela est en utilisant la balise pré. Si vous utilisez la balise pré, elle s'affichera avec une police fixe et elle préservera les espaces et les sauts de ligne. Si je retourne ici et qu'on crée un pré. En fait, modifions juste ce que nous avons déjà, je vais ajouter et re dedans. Maintenant, cet élément de paragraphe, cette balise de paragraphe est maintenant pré-balise, et comme vous pouvez le voir, nous avons cette police bizarre mais nous avons notre interligne. Je ne connais pas une situation dans laquelle vous auriez besoin d'utiliser pré. Parfois, en tant que développeur, il peut être utile d'afficher du code parce que le code que vous voulez afficher l'indentation et un peu de formatage, mais souvent il est préférable d'utiliser pré si vous le souhaitez. Quantité étrange d'espace blanc entre les mots, il y a des moyens que vous pouvez faire cela, mais si vous vouliez une séparation entre avoir de nouvelles lignes, vous pouvez avoir une nouvelle balise p comme celle-ci. Une autre façon d'avoir de nouvelles lignes est également d'utiliser un autre code de balise vide, br. Si je vais juste entre ces deux mots et mettre un br, assez sûr que cela signifie pause et vous pouvez aller ici et voir qu'il y a maintenant un saut de ligne. C' est un peu séparé parce qu'il n'y a pas de remplissage ou de marge entre ces deux lignes. Si vous vouliez juste briser la ligne, vous pouvez le faire, mais si vous écrivez beaucoup de paragraphes, vous le feriez peut-être une fois que vous les mettez dans différentes balises de paragraphe et que vous l'ayez structuré comme ça le fera plus facile de styliser le long de la piste, car vous pouvez définir la taille de l'écart entre les différents paragraphes. La même chose vaut ici avec le titre un dans vos styles, que nous allons entrer dans CSS, nous pouvons définir la taille de cette marge entre ici et notre premier paragraphe. C' est à peu près des en-têtes et des paragraphes. Ce sont les blocs de construction les plus simples de votre document, mais dans la vidéo suivante, nous allons aller dans trois éléments très courants que vous verrez tout le temps dans les documents HTML. Je te verrai dans la prochaine vidéo. Continuons à construire notre document HTML dans la prochaine vidéo. 6. Liens, images et boutons: Comme je l'ai mentionné dans la vidéo précédente, les liens, les images et les boutons sont assez communs en HTML, et c'est ce que nous allons couvrir ensuite. Ce que chacun d'entre eux fait est assez explicite. Je vais juste sauter directement et mettre des liens, des boutons et des images dans nos projets tout de suite. Je vais d'abord avoir besoin d'une image, et je dois admettre que je n'en ai pas préparé plus tôt, donc je vais juste en trouver une maintenant, et forcer l'avant. J' ai cette image aléatoire ici, et ce que nous allons faire est de la mettre dans le répertoire du projet à côté de mon document HTML. C' est un nom fou. Je vais juste appeler cette photo juste pour la simplicité du pieu. Là, nous avons une photo que nous pouvons référencer et apporter dans notre projet. Je vais revenir à mon éditeur de code et je vais aller après la balise headfirst headfirst, la balise H1, et je vais créer une image, ce qui est assez simple. On fait juste une image comme ça. Maintenant, bien sûr, si j'appuie simplement sur une étiquette d'image, rien ne va vraiment se passer parce que nous ne disons pas vraiment au document d'où vient l'image. Il doit y avoir un attribut. Ce sera notre premier regard sur les attributs, mais nous allons y approfondir plus tard. Si nous faisons un espace après le nom de la balise et mettons du texte, nous verrons cela en brun dans mon cas particulier parce que j'utilise Adam. Ce que nous faisons ici, c'est attribuer un attribut. Je vais appuyer sur « Equals » et puis je vais ouvrir et fermer les crochets. Parce que ce que nous mettons ici s'appelle une chaîne. Une chaîne est juste un terme technique pour un texte. Mais les guillemets disent essentiellement, prenez ce mot pour mot. Encore une fois, ne vous inquiétez pas trop de toute la syntaxe ici. Sachez juste que vous devez mettre du texte, égal, puis du texte de l'autre côté est égal entre guillemets. Vous pouvez également faire des guillemets simples si vous préférez. Cela, nous verrons les implications de cela plus tard. Tout ce que je dois mettre ici, c'est si on retourne ici, le nom du fichier et l'endroit où il est stocké. semblant que c'est dans le même dossier que notre document HTML, je peux juste le mettre là-dedans. Je vais appuyer sur « Enregistrer ». Revenez à notre document HTML et soudainement vous voyez l'image là. Mais ce qu'il va faire, c'est qu'il va faire exploser ça dans toute la hauteur et la largeur de la photo originale. Ce que nous pouvons faire est de mettre dans d'autres attributs ici, la largeur et la hauteur. Vous pouvez également définir la largeur et la hauteur en CSS. Mais comme les images existent depuis les débuts du HTML, nous sommes en mesure de définir les largeurs et les hauteurs de celles-ci. Ce que je vais faire ici, c'est le contraindre à 100 pixels, et l'unité pour les pixels est px. Ne mettez pas un espace entre les deux. Assurez-vous de l'avoir juste à côté du chiffre. Alors ce que je vais faire, c'est appuyer sur « Enregistrer ». Je vais retourner ici. Ensuite, vous verrez que c'est 100 par 100, mais malheureusement, l'image n'était pas quadrillée pour commencer, donc vous avez quelques étirements ici. Si je vais, désolé, je l'ai fait un peu trop vite, en utilisant Chrome, je peux faire un clic droit ici, cliquez sur « Inspecter ». Je peux voir notre document HTML de manière interactive à l'intérieur de notre navigateur. Ce que j'ai fait juste alors, c'est que je suis allé inspecter cet élément particulier et cela me montrera la balise qui crée cet élément. Alors ce que j'ai fait, c'est que j'ai survolé la photo. JPEG. Je peux voir ici le genre naturel de rapport d'aspect et de pixels qu'il était à l'origine. Vous pouvez voir ici que ces deux numéros sont les mêmes. Si je fais un carré, ça va avoir l'air un peu bizarre. Permettez-moi de faire quelques calculs rapides pour comprendre comment nous pouvons garder ces proportions. Nous voulons qu'il soit 9,6 fois plus petit qu'il ne l'est à l'origine. On peut mettre la hauteur à 75. Je vais retourner ici, mettre la hauteur à 75. Cela devrait nous donner à peu près les mêmes dimensions, voilà. Voilà notre image. Nous pouvons également mettre dans un lien. Nous pouvons le faire en utilisant ce qu'on appelle une balise d'ancrage, et c'est très simple. C' est juste un, et puis vous fermez avec une balise, puis tout ce qui se trouve entre ces balises est le texte qui est lié. Je vais juste mettre, c'est un lien, et si on économise, retournez ici. On peut voir qu'il y a un lien là-bas, mais c'est incomplet. C' est parce que nous ne lui avons pas donné un attribut important appelé href. Si j'espace pour ajouter un attribut et que je mets href, et que j'utilise la même convention, égal, puis double guillemets. Je peux le relier quelque part. Maintenant, nous n'avons pas réellement une autre page vers laquelle lier. Ce que je vais juste faire est de mettre un espace réservé ici et un espace réservé commun est juste un hachage ou un signe de livre si vous êtes d'Amérique. Je vais appuyer sur « Sauver », et je vais revenir ici. Puis soudain, nous pouvons voir le lien est formaté comme un lien. Non seulement il est bleu, et si je clique dessus, il devient rouge. Puis après avoir cliqué dessus, il se tournera vers cette couleur pourpre. C' est aussi, vous pouvez voir mon curseur changer quand je passe dessus. Ici, j'ai ces textes, outil de mise en évidence. Puis ici, j'ai un curseur pour indiquer que je peux cliquer dessus. Encore une fois, ça ne va rien faire parce que nous ne l'avons lié à rien. Disons juste que nous avions une page qui s'appelait blog. Alors on y retourne. Si je devais cliquer dessus, vous obtiendrez un fichier introuvable parce que nous n'avons pas cela. En fait, j'ai fait une faute de frappe là-bas. Je veux juste le dire comme ça. Si nous appuyons sur ce bouton, nous obtiendrons un blog. Mais nous n'avons rien sur les blogs, donc nous ne verrons rien. Bon espace réservé pour l'instant, est juste d'avoir le hachage ou la livre, et nous obtenons toujours le formatage d'un lien et le comportement d'un lien, il ne va pas nulle part. Maintenant, la dernière chose était un bouton. Je suppose qu'un bouton fonctionne similaire, mais il vient avec certains attributs ou propriétés stylistiques qui viennent juste standard. Nous pouvons définir un bouton comme celui-ci. Ensuite, entre les balises d'ouverture et de fermeture, nous pouvons mettre dans le texte qui va apparaître dans le bouton. On peut dire que c'est un bouton. Je vais sauver ça, retournez en arrière, et vous pouvez voir ici, c'est un bouton. Nous pouvons obtenir un look similaire, un style, une balise de lien. Mais un bouton vous donne juste un bouton directement sur la porte. Si vous voulez juste éteindre un bouton, il peut être assigné du JavaScript à lui. Vous pouvez l'avoir de sorte que lorsque vous cliquez sur ce « Bouton », allons le démontrer avec une propriété supplémentaire appelée on-click. Nous pouvons simplement faire alerte de base, Bouton cliqué. Ne vous inquiétez pas trop à ce sujet. C' est tout JavaScript que nous ne couvrons pas dans ce cours. Mais si je clique sur ce maintenant, la page dit bouton cliqué. C' est comme ça qu'on peut avoir une interaction avec les boutons. Mais essentiellement, souvent, je vais me retrouver styliser une balise de lien pour qu'elle ressemble plus à un bouton. Vous pouvez obtenir un aspect similaire et un comportement similaire à partir d'un bouton, comme vous le pouvez à partir d'une balise de lien. Là, vous l'avez, les blocs de construction du HTML de base. Nous avons une image, nous avons un lien qui ne relie pas vraiment nulle part, et nous avons juste un bouton aléatoire qui nous donnera une alerte. Comme vous l'avez remarqué, nous avons un peu abordé les attributs dans cette vidéo. Nous avons développé uniquement les noms de balises, juste le contenu, mais maintenant aussi l'attribution d'attributs. Dans la vidéo suivante, nous allons plonger plus profondément dans les attributs afin que nous puissions comprendre que plus d'attributs sont très importants en HTML. Je te verrai dans la prochaine vidéo. 7. Les attributs HTML: Dans cette brève vidéo, je voulais juste parler un peu plus des attributs. Comme vous l'avez vu dans la dernière vidéo, nous avons utilisé certains d'entre eux, mais je voulais juste obtenir un peu plus théorique ici, afin que vous compreniez mieux les attributs et que nous puissions passer autre chose et les utiliser plus souvent sans qu'il y ait de confusion. Si nous revenons à W3Schools et que nous cliquons sur l'élément de menu pour les attributs, voici quelques-uns vraiment communs. L' attribut href que nous venons d'utiliser. Nous donnons l'adresse de lien d'une balise avec href. Encore une fois, vous verrez ce format continuer. Nous avons le nom de l'attribut, nous avons le signe égal pour l'affectation, puis nous avons un morceau de texte entre guillemets doubles ou guillemets simples. Encore une fois, nous avons fait src dans la dernière vidéo, sorte que nous pouvons donner une étiquette d'image, l'adresse réelle de l'image dans laquelle nous voulons afficher. Nous pouvons définir la largeur et la hauteur. Un autre attribut important est la balise alt. La balise alt est un attribut qui spécifie le texte alternatif à utiliser lorsqu'une image ne peut pas être affichée. C' est fondamentalement une façon de décrire l'image parce que peut-être le titre de cette image n'est pas aussi descriptif ou on ne sait pas vraiment ce qu'est l'image, surtout quand quelqu'un écoute une page Web, c'est-à-dire une personne aveugle. Il existe certains lecteurs d'écran qui peuvent réellement lire des images, mais seulement si vous définissez une balise alt. Si vous avez une photo d'une fille avec une veste, vous devriez mettre un attribut alt là pour partager avec le lecteur d'écran ce que l'image est réellement. L' autre chose à noter à propos de alt est que c'est une bonne idée à des fins de référencement. Pour que votre site Web apparaisse plus régulièrement dans Google, pour avoir une balise alt, car alors vous donnez plus d'informations à Google pour savoir si votre article est pertinent. Si vous écrivez un article sur les filles portant des tenues différentes et que vous aviez chacune de vos étiquettes d'image avec une fille avec une veste, fille avec une robe, ainsi de suite, ainsi de suite, vous montrez à Google que ces images sont en fait pertinentes par rapport au contenu de votre page. Nous descendons et nous voyons un autre attribut vraiment important, et cela est en bordure de CSS ici, est l'attribut de style. Nous n'avons pas besoin de créer un document CSS séparé pour définir des styles sur un élément. Nous pouvons aller directement dans un élément, donc je vais vous montrer ici et nous pouvons définir un style. Même convention, le style est égal aux devis ouverts et de clôture. On peut mettre de la couleur dans l'orthographe américaine. Disons vert. Vous mettez le point-virgule là pour dire que c'est la fin de ce style et nous cliquons sur « Enregistrer », revenons ici et nous pouvons voir que ce paragraphe est vert et nous pouvons voir qu'il se passe dans nos outils de développement. Celle-ci est vraiment importante, nous y reviendrons dans les vidéos ultérieures. Attribut de titre, nous pouvons ajouter à p balises pour afficher une info-bulle. C' est une petite fonctionnalité cool. Jamais vraiment utilisé cela cependant, et nous avons ici quelques recommandations de W3Schools qui, je pense, sont assez bonnes recommandations. Il ne nécessite pas de noms d'attributs en minuscules, mais ils vous recommandent fortement de les utiliser. c' est tout simplement bien d'avoir une convention. On pourrait faire du style comme ça, mais il n'y a vraiment pas besoin. Il suffit de garder les choses propres et de l'avoir en minuscules. est également important de vous assurer d'utiliser des guillemets. Apparemment, vous pouvez contourner ça. Apparemment, HTML5 ne nécessite pas de guillemets mais c'est toujours une très bonne idée de les avoir et s'il y a un espace entre les deux comme dans cet exemple, cela va casser car il ne sait pas où l'attribut et son est en cours de fin. Si vous mettez juste un espace là-dedans, cela pourrait être un nouvel attribut. On ne sait pas. Utilisez toujours des guillemets. Mais nous n'avons pas à faire des guillemets doubles, nous pourrions aussi faire des guillemets simples. Nous pourrions simplement entrer ici, par exemple et au lieu de guillemets doubles, mettre une seule citation, sauver cela, retourner à la page, nous obtenons le même résultat. Cela n'a pas d'importance de toute façon, nous pouvons utiliser des guillemets simples ou des guillemets doubles. Si nous devions faire cet exemple ici et mettre un titre sur l'un des p, nous pourrions, voyons. Allons dans le titre ici et disons que c'est le deuxième paragraphe appelé, puis nous mettons un autre double guillemets, le deuxième paragraphe. Voyez comment on l'a cassé maintenant. Nous avons ces guillemets doubles pour commencer et terminer la valeur d'attribut. Comme vous pouvez le voir à partir de la coloration ici, il ressemble à l'éditeur de code et au navigateur que nous avons terminé cette chaîne. Je ne sais pas ce qui va se passer. Si nous actualisons la page et nous passons à notre deuxième paragraphe, nous verrons qu'il se termine après appel parce que nous mettons un nouveau guillemet. Si nous regardons l'élément dans nos outils de développement, nous pouvons voir que le deuxième et le paragraphe sont apparus et qu'ils sont dans une couleur différente et c'est juste un gâchis. Ce que nous pouvons faire pour contourner cela est simplement en changeant le type de guillemets. Nous pouvons utiliser des guillemets simples maintenant à la place et ensuite nous pouvons appuyer sur « Enregistrer » et puis lorsque nous survolons, nous pouvons avoir une partie du texte qui apparaît entre guillemets. Mais si vous le vouliez des guillemets doubles par exemple, nous avons juste besoin de changer le positionnement de ceux-ci. Nous pourrions avoir, en commençant par des guillemets simples et se terminant par des guillemets simples, puis ce morceau de texte particulier a des guillemets doubles l'entourant. Si nous survolons, nous pouvons voir ça. Il est juste important que si vous voulez des guillemets dans votre texte réel dans votre attribut, vous devez utiliser le contraire de ce que vous utilisez, l'alternative. Si vous l'avez ouvert avec des guillemets doubles, vous devrez utiliser des guillemets simples à l'intérieur, et si vous l'avez ouvert avec des guillemets simples, vous devrez faire vice versa. C' est un dernier mot sur les attributs. Si vous voulez obtenir plus nerdy et geeky à ce sujet, consultez certainement cette page sur w3schools.com. Mais ce sont essentiellement les choses que je voulais mentionner sur les attributs. Maintenant, j'ai l'impression que nous pouvons aller de l'avant et utiliser des attributs tout au long de notre projet. Dans la vidéo suivante, nous allons couvrir trois autres éléments importants en HTML. On va couvrir les tables, les listes et les blocs. Je te verrai dans la prochaine. 8. Tables, listes et blocs: Dans cette vidéo, nous allons couvrir les tables, les listes et les blocs. Encore une fois, un excellent endroit pour commencer est sur w3schools.com Ils ont une bonne référence pour les listes, les tables et les blocs ici. En commençant par les listes, il existe deux types de listes. Fondamentalement dans HTML, une liste non ordonnée, qui est comme des points, et une liste ordonnée qui est des points qui ont un ordre, donc à 1, 2, 3, 4. Vous commencez ces listes de deux manières différentes. UL, pour une liste non ordonnée ainsi et ol pour une liste ordonnée. Je pense que si je fais défiler ici, on est là, Ol. Ça marque l'ouverture d'une liste. Ça marque la clôture d'une liste. Ensuite, entre les deux, vous mettrez vos éléments de liste, qui utilise les balises li. Faisons ça maintenant dans notre projet. Revenons à notre page, naviguons jusqu'à notre éditeur de code. Au lieu d'avoir un paragraphe ici, nous pouvons avoir une liste non ordonnée. Je vais ouvrir une liste non ordonnée, puis la fermer immédiatement afin que je n' oublie pas et puis je vais à l'intérieur de cela, mettre quelques éléments de liste. Disons l'intégrité, disons l'honnêteté. Je suis juste en train d'inventer des trucs ici, l'autonomisation. Si j'appuie sur Enregistrer, retournez dans le document, vous pouvez voir ici nous avons une liste non ordonnée. Pour changer cela en une liste ordonnée, tout ce que je dois faire est d'aller à u et ul et de changer cela en o pour la liste ordonnée. Je peux revenir en arrière et maintenant il aura un nombre incrémentant pour chacun d'eux. Maintenant, vous pouvez aller plus loin les listes en ayant des types. Vous pouvez les décrire de différentes manières. Vous pouvez faire une liste de description. Honnêtement, je ne fais presque jamais ce truc avancé avec des listes. Souvent, c'est juste une liste non ordonnée ou une liste ordonnée, puis quelques points points. Encore une fois, vous pouvez imbriquer dans ces aussi. Si vous vouliez avoir un ensemble de points à l'intérieur d'un point, vous pouvez également le faire. Je peux mettre une liste non ordonnée ici et mettre dans un point subdot, l'intégrité pour les clients, l'intégrité pour nos affaires. Sauve ça. Retourne à ici. Maintenant, vous pouvez voir que c'est un sous-point de ce point. Vous pouvez imbriquer des listes ordonnées et des listes non ordonnées. Je peux changer ça en ordre et maintenant vous pouvez voir que vous pouvez échanger les deux. Si vous voulez obtenir plus de détails avec les listes. Certainement vérifier cela dans la référence. Mais je pense que cela couvre à peu près les listes d'une manière basique. Je n'ai pas à faire beaucoup de choses avancées pour être honnête. Cela couvre à peu près beaucoup de ce que vous devez faire avec les listes. La suivante, je l'ai dit, c'est des tables. Je vais cliquer sur les tableaux HTML ici et vous pouvez définir une table de base avec la balise de table. Ensuite, vous pouvez définir une ligne de tr. Vous pouvez faire la première ligne un th, ce qui signifie qu'il y a une ligne d'en-tête, puis chaque cellule sera définie avec un td. Voyons ce qui a du sens ici, peut être mis dans une chronologie ici en utilisant le tableau. Je vais y retourner, et je vais créer une table. Pour la première ligne, ce sera une ligne d'en-tête donc au lieu de cellules de table régulières comme ici avec td, nous allons donner la première ligne th. Je vais appeler ça, janvier 2016. Alors j'en ai été un autre. Encore une fois, je suis juste en train d'inventer tout ça à des fins de démonstration. Sauvons ça et voyons ce que nous avons jusqu'à présent. D' accord. En ce moment, nous n'avons pas de bordure de table, donc vous ne verrez pas vraiment le contour de la table, mais nous y arriverons en une seconde. Nous pouvons ajouter une nouvelle ligne et mettre dans quelques cellules de tableau maintenant, qui, parce que ce n'est pas la première ligne, parce que ce n'est pas un en-tête, utilisera juste td. Ensuite, nous avons créé notre entreprise. revenir en arrière, vous pouvez maintenant voir qu'il est aligné dans les colonnes, mais vous ne pouvez pas réellement voir le contour de la table. Si vous vouliez faire cela, nous pouvons ajouter un attribut à la table pour la bordure. Jetons un coup d'oeil à la façon dont nous faisons ça. Si je fais la frontière. Je vois que je peux appliquer certains styles, mais nous ne le ferons pas encore parce que nous n'avons pas encore abordé cette partie du cours. Ensuite, une façon à la vieille école de donner une frontière à notre table est d' entrer ici et de taper la frontière 1. Si nous gardons ça, retournez ici. Maintenant, nous avons ces anciennes frontières de l'école juste pour voir qu'on a une table. Pensez que la façon moderne de le faire ces jours-ci est de formater une table en utilisant CSS. Mais nous ne sommes pas encore arrivés à CSS, donc je vais enregistrer cela pour un peu plus tard. Mais ici, vous pouvez voir que nous avons une table. Maintenant, si nous voulions ajouter une autre ligne, nous pourrions facilement le faire en ajoutant une autre balise tr, puis en mettant des cellules de tableau. Peut-être pourrions-nous faire quelques commentaires sur ces différents points de chronologie. Enregistrez ce déplacement et vous pouvez voir que nous avons ajouté une nouvelle ligne. Maintenant, si vous voulez que ces lignes et colonnes s'étendent sur plusieurs colonnes et lignes, montrons simplement que maintenant je vais supprimer une des cellules du tableau, donc nous n'en avons qu'une ici et voyons ce que cela fait. Tu as toute cette table, mais on peut voir qu'il nous manque une cellule ici. Que se passe-t-il si nous voulons que cette cellule s'étend à travers la table ? Eh bien, nous pouvons le faire en donnant un attribut à cette cellule de table appelée colspan. Je dirai 2 parce que je veux qu'il couvre deux colonnes au lieu d'une seule et là vous allez. Nous pouvons faire tout l'alignement et la mise en forme dans ces tables, mais nous y arriverons essentiellement dans CSS si vous vouliez faire la même chose avec des lignes. Peut-être qu'on en ajoute un autre ici, ce n'est probablement pas logique, mais je le montrerai quand même. On peut mettre en face de cette rangée de trois. Je vais appuyer sur Enregistrer. Vous pouvez voir que nous avons une colonne qui traverse trois lignes. C' est essentiellement des tables. Cela n'a pas tout à fait de sens donc je vais me débarrasser de ces rangées maintenant. Je vais me débarrasser de cette troisième rangée parce qu'elle n'ajoute rien. On y va. Nous avons un peu d'histoire dans laquelle nous pourrions entrer, créer une autre ligne, une autre colonne en mettant dans une nouvelle cellule dans chacune de ces lignes. Voilà, il y a des tables. Une chose que je vais dire à propos des tables est de ne pas compter sur elles pour structurer votre document HTML. Les tables doivent être utilisées uniquement pour les tables. Si je voulais présenter une chronologie ou peut-être un calendrier ou quelque chose qui aurait besoin d'une table. J' utiliserais une table, mais pour avoir des colonnes sur une page et avoir un design responsive. Les tables ne sont pas les meilleures et pour cela ce qui est génial, c'est des blocs. Je vais retourner à w3schools.com et cliquer sur les blocs HTML. L' élément de niveau bloc le plus commun que vous verrez en HTML est de loin la balise div. Vous verrez des divs absolument partout et un div par défaut commencera toujours sur une nouvelle ligne et prendra toute la largeur disponible. Plutôt que d'en parler, je vais juste le jeter en ce moment et vous montrer ce qui est un bon endroit pour le mettre. Notre projet est un peu gâché en ce moment, mais ce que je vais faire, c'est mettre dans une autre ligne horizontale, mettre dans une autre rubrique et disons simplement Nos services. Je vais mettre dans notre tag div et à l'intérieur de la balise div, je vais avoir un peu de texte. Laisse-moi aller à Lorem Ipsum. Ceci est un site Web où vous pouvez obtenir Lorem Ipsum. C' est juste un texte factice. Je vais mettre ça là-dedans et puis je vais créer un autre div dessous et mettre ce Lorem Ipsum à nouveau. Je vais sauver ça, aller jusqu'ici et vous verrez qu'il se brise en une nouvelle ligne. Mais contrairement aux paragraphes, il n'y a pas d'espacement entre eux. En ce moment, je suppose que ça n'a pas vraiment de sens pourquoi vous auriez un div. Mais au fur et à mesure que nous passons dans le style et la structuration de notre document avec CSS, vous verrez à quel point un div est flexible. Par exemple, si je voulais juste modifier cela à la volée en ce moment, je peux voir cette div ici. Je peux restreindre la largeur de la div. Je vais le limiter à 100 pixels, et maintenant il n'apparaîtra qu'avec une largeur de 100 pixels. Ce que je peux faire est de changer l'affichage pour afficher en ligne. Encore une fois, nous allons aborder ça plus tard. Mais si je l'ai dit pour les deux divs, largeur, 100px et affichage inline-block. Vous verrez maintenant qu'ils apparaissent l'un à côté de l'autre. n'est qu'un des exemples de la façon dont nous pouvons modifier de quelle façon nous voulons le contenu dans un div. Mais encore une fois, je prends de l'avance sur moi-même ou nous devons savoir pour l'instant, c'est que les divs sont de bons blocs de construction de HTML et vous les verrez beaucoup lorsque vous développez HTML et CSS. J' ai un élément de niveau de bloc en HTML inclure ceux-ci. Alors bien sûr, vous avez des éléments en ligne. Ceux-ci ne démarrent pas une nouvelle ligne et ne prennent que la largeur nécessaire. L' un des courants que vous verrez est une travée. Une travée vous aide à modifier exactement ce qui se trouve à l'intérieur. Il ne crée aucun nouveau rembourrage ou espacement. Encore une fois, il vaut mieux juste te montrer ce que je veux dire quand je dis ça. Si nous devions retourner dans notre document et que je devais mettre une travée avant le mannequin et fermer la travée par la suite. Ça me donne le contrôle sur ce mannequin d'un mot. Je peux aller style et je peux y ajouter quelques styles. Je pourrais rendre la taille de la police beaucoup plus grande que tout le reste dans ce paragraphe. Je peux en faire une taille de police 50 pour cent plus grande et maintenant vous pouvez voir ce mot est 50 pour cent plus grand que tout le reste dans cette div. Je peux l'utiliser pour d'autres formatages. Je peux auditer différentes parties. Je peux cibler différentes parties, mettre un cours dessus. Chaque fois que vous voulez cibler ou changer, juste un mot ou une phrase, span est une bonne option. Encore une fois, si vous faites référence au document et à w3schools.com, il y a beaucoup de bonnes informations là-dedans. Comme il est dit ici, l'élément div est souvent utilisé comme conteneur pour d'autres éléments HTML. Il n'a pas d'attributs obligatoires, mais vous verrez souvent qu'il y aura un style, une classe ou un ID. Ces méthodes pour être en mesure de cibler et de styliser le contenu. Vous pouvez presque afficher div comme un groupe de contenu, mais vous pouvez également faire ce que vous voulez avec. C' est essentiellement un bloc de HTML que vous pouvez cibler individuellement et le transformer en colonnes, transformer en un carré, transformer en ce que vous voulez. Très extensible. Beaucoup de choses que vous pouvez faire avec div et je pense que plutôt que d'en parler plus, je pense que vous commencerez à comprendre pourquoi div est puissant au fur et à mesure que nous traversons. Surtout une fois que nous entrons dans la section CSS, nous allons styliser beaucoup de divs. Pour l'instant, c'est tout ce que vous devez savoir sur les divs. Nous allons y aller plus profondément. Dans la vidéo suivante, nous allons couvrir comment les éléments de mise en page HTML. J' ai hâte de vous voir sur le prochain. 9. Éléments de la mise en page: Très bien, donc dans cette courte vidéo, je voulais passer brièvement sur les éléments sémantiques HTML5. Si nous allons à la page de mise en page HTML sur w3schools.com, nous pouvons faire défiler ici et voir que HTML5 offre nouveaux éléments sémantiques qui définissent différentes parties de la page Web. Juste pour le démontrer, il y a un exemple ici. Au lieu d'étiqueter les différentes sections comme des divs ou d'autres éléments de niveau bloc, ils l'étiquettent avec ces nouvelles balises, en-tête, nav, section, article, côté, pied de page, détails, résumé. Fondamentalement, la seule chose qui se passe vraiment qui est différente ici est le nom, donc ceux-ci fonctionnent à peu près la même chose qu'un div, c'est juste plus facile à comprendre lorsque vous créez un document HTML que vous serez en mesure de comprendre la structure et voir que cette balise est un en-tête, cette balise est une section, cette balise est un pied de page. Juste pour apporter cette fois, ce que je veux faire est de créer un nouveau fichier, donc je vais retourner à mon éditeur de code, où j'ai ouvert le index.html. Je vais créer un nouveau fichier, et je vais l'enregistrer immédiatement afin que nous sachions que nous travaillons avec un document HTML. Je vais aller dans notre répertoire de projet et je vais appeler celui-ci layout.html. Rappelez-vous que la première partie de cette mise en page, n' est pas trop importante. Vous pouvez l'étiqueter comme vous voulez, mais vous avez besoin de l'extension HTML point pour que votre programme sache que c'est HTML. Ce que je vais faire, c'est mettre ces fenêtres côte à côte. En fait, avant de faire cela, je vais « Cliquez avec le bouton droit de la souris » sur cet exemple et je vais juste copier leur exemple. J' utilise l'inspecteur ici dans Google Chrome. C' est une fonction similaire, je suis sûr dans Safari et Firefox, mais fondamentalement, vous n'avez pas nécessairement besoin de suivre ici. Je vais juste copier ce qui est là et le mettre dans notre propre document. Ce que je vais faire, c'est trouver cet élément qui capture tout cela, et je peux le voir à partir de ce qu'il met en évidence. Nous allons « Cliquer avec le bouton droit », cliquez sur « Modifier en tant que HTML ». Appuyez sur « Commande A » sur une carte pour copier tout ce HTML, onglet sur mon layout.html, et maintenant nous avons tout ce code. Peu de choses que je vais me débarrasser sont les classes, toutes les classes parce que ça va tirer dans une feuille de style que nous n'avons pas. C' est seulement sur le site de la W3School. On a aussi ces cours, mais on peut les laisser une seconde. Ce que je veux vous montrer dans cet exemple, c'est que si nous devons ouvrir un nouvel onglet ici, et que nous tirons sur layout.html, cela ne ressemble pas à ceci. C' est le point que je veux traverser ici est que juste en utilisant ces éléments sémantiques, nous ne donnons pas le style de page. Nous devons toujours utiliser CSS pour obtenir cette mise en page. Mais ce que nous faisons, c'est quand nous lisons le code, nous pouvons voir, « Oh, c'est un en-tête, c'est une section, c'est un article, c'est un pied de page. » Ensuite, nous pouvons aussi plutôt que cibler en fonction de la classe, qui est ce que nous avons ici, nous pouvons cibler uniquement sur le nom de l'élément. Mais encore une fois, je vais un peu dans CSS, que nous n'avons pas encore plongé profondément dans. Vous commencerez à voir cela une fois que nous entrerons dans la section CSS. Mais dans cette vidéo, je voulais juste partager avec vous ces éléments sémantiques parce que vous pouvez les voir souvent en HTML, et juste pour vous dire qu'ils sont peu près la même chose qu'un élément de niveau bloc comme div, ils sont juste un peu plus descriptifs. Dans la vidéo suivante, nous allons passer aux formulaires HTML. Les formulaires sont quelque chose, vous allez probablement rencontrer beaucoup de sites en développement ainsi. Je te vois dans la prochaine vidéo. 10. Formulaires Html: D' accord. Dans cette vidéo sur les formulaires HTML, nous allons encore une fois une référence w3schools.com. Si vous faites défiler ce menu ici, vous trouverez des formulaires HTML. Un formulaire pour ceux d'entre vous qui ne le savent pas, je pense que vous devriez les rencontrer beaucoup en ligne. Cela devrait être assez évident, mais fondamentalement c'est juste là où vous avez entrée et puis vous avez un bouton pour envoyer ces données quelque part et puis vous obtenez un certain résultat. Très vague, je sais, mais une fois que vous envoyez ces données quelque part, vous pouvez les interpréter comme vous le souhaitez. Mais comme nous parlons juste de HTML et CSS dans ce cours particulier. Je vais juste vous montrer comment mettre en place un formulaire à l'avant. Cette ressource sur W3Schools est assez bonne pour l'expliquer. Tout d'abord, vous allez avoir besoin d'un élément de formulaire , puis à l'intérieur de ce que vous allez mettre dans diverses entrées. Ensuite, le type d'entrée est déterminé par cet attribut appelé type. Vous avez eu quelques exemples ici. Vous pouvez faire des boutons radio. Vous pouvez faire un bouton de soumission qui va réellement soumettre votre formulaire et donc ce que fait l'envoi de votre formulaire est qu'il prend les données et envoie à une page particulière ou à une adresse particulière. Cela est déterminé par l'action sur le formulaire. Nous pouvons également définir d'autres attributs dans lesquels nous allons entrer en une seconde. Il devient un peu technique ici avec GET et post. Ce sont deux façons d'envoyer des données. Cela devient un peu plus dans le back-end, mais vous ne devriez pas trop vous inquiéter à ce sujet. C' est plus sur la façon de configurer un formulaire en HTML. Ce que je vais faire est en fait de construire un formulaire dans notre petit exemple de site Web. C' est la page À propos de nous et c'est assez désordonné pour le moment. Je vais me débarrasser de ce layout.html et je vais faire est de créer une page Contactez-nous. Je vais appuyer sur « Nouveau fichier » et puis je vais l'enregistrer tout de suite donc je sais que c'est un fichier HTML et ensuite je vais dans les projets, nous allons l'appeler contact.html. Maintenant ce que je peux faire est juste de mettre en place, en fait je vais copier certaines de ces choses d'ici, je vais copier cette première partie. Je vais copier cette dernière partie. J' ai juste fait ça pour gagner du temps, je savais que j'allais avoir besoin d'un titre et d'un titre de premier niveau. Je vais juste copier ça à travers. Ce que je vais faire est de le faire glisser directement dans, ouvrir un nouvel onglet d'abord, puis le faire glisser directement dans notre navigateur afin que nous puissions commencer à travailler avec. Ce n'est plus la page A propos de nous, donc je vais changer cela pour nous contacter, et ensuite ce que je vais faire est de mettre dans un div et ensuite mettre dans un formulaire. Voici que je commence un formulaire et c'est très simple, c'est juste de la forme. Si je mets ça, je suis sûr qu'on ne verra rien du formulaire. n'y a pas encore d'entrées réelles dedans. Ce que nous pouvons faire, c'est simplement mettre quelques entrées de texte. Nous avons couvert ce jeu dans une balise de formulaire et maintenant nous pouvons mettre dans le texte de type d'entrée. Alors ce que je vais faire est de dupliquer trois fois, appuyer sur « Enregistrer » et retourner à la page et je vais vous montrer ce que nous avons. J' ai ces trois boîtes de texte. n'y a pas d'étiquettes. n'y a aucune indication de ce que c'est. C' est plutôt non descriptif, mais au moins on peut voir des trucs dans notre formulaire. Ce que nous devons faire est de lui donner un formatage, donner des étiquettes, puis aussi nommer ces entrées afin qu'elles ne soient pas seulement pour la même chose. Le nom est très important parce que lorsque nous envoyons les données à la page suivante ou à l'adresse, va jumeler la valeur avec le nom de ce champ. Vous pouvez réellement dire quelle valeur vient d'où. Ce que je vais faire maintenant, c'est donner un nom à tout ça. Le premier, je vais faire le prénom. Deuxième, nom de famille. Troisième, email, et en fait je vais en faire un de plus pour le message. Bien sûr, si nous gardons juste que ce n'est qu'un attribut. Il ne va pas vraiment apparaître sur la page réelle. Ce que nous allons faire, c'est juste mettre du texte brut. Je fais pour faire le prénom, le nom, e-mail, l'adresse et votre message. L' autre chose que vous remarquerez, c'est que tout est sur la même ligne. Donc si on vient de mettre ces étiquettes va être tout sur la même ligne. Je vais mettre des étiquettes de rupture. À l'avenir, nous allons formater ceci avec CSS et ce sera beaucoup plus agréable. Mais pour l'instant, nous pouvons simplement utiliser des balises de rupture pour les briser. Nous allons appuyer sur « Enregistrer » et maintenant vous avez une forme très basique, assez laide. Mais au moins nous avons un formulaire sur notre page. Maintenant ce formulaire ne fera rien, bien sûr, nous n'avons pas encore de bouton pour soumettre quoi que ce soit. C' est la prochaine étape importante et ce que je vais faire pour cela, c'est simplement copier ceci. Assurez-vous que c'est à l'intérieur des balises de formulaire, tout pour votre formulaire doit être à l'intérieur de ceux pour ouvrir et fermer les balises de formulaire. La valeur ici représente ce qui va être sur le bouton. Si nous sauvegardons cela, retournez en arrière, il dira, « soumettre sur le bouton ». On peut dire à la place de ça ce qu'on veut, peut-être que tu envoies un message. Sauvegardez, déplacez-vous et vous verrez qu'il est maintenant changé. La chose importante est que vous mettez le type soumettre plutôt que de taper le texte évidemment. Mais en dehors de cela, vous avez presque une forme et ce que je veux dire par là, c'est que vous avez besoin d'un autre attribut et c'est de mettre une action sur le formulaire. ce moment, nous n'avons pas de back-end. Mais si nous avions un back-end, nous enverrions ces données de formulaire à une page, une page PHP ou quelque soit notre back-end. Ce back-end prendra ces données, validées, puis les mettra dans une base de données ou lancera le processus. Une fois que le formulaire a été soumis, il faut des programmes que nous n'allons pas aborder dans ce cours. Mais en termes de HTML, c'est fondamentalement à quoi ressemble un formulaire. Je vais juste vous donner un exemple ici. Si nous donnons une action à ce formulaire et qu'il s'agit copier exactement ce qu'ils ont ici parce que nous n'avons pas à page n'importe où. Nous allons juste copier ça, sauvegardez ça. On retournera dans Contact Us, on va se développer complètement, et je vais juste mettre des trucs ici. Votre message, bonjour, puis je vais appuyer sur « Envoyer un message » et voir ce qui se passe. Vous verrez ici et sera donc un peu déroutant pour les personnes qui sont nouvelles dans le développement web. Vous verrez ici que la première partie est action_page.php. Si vous vous souvenez, nous avons mis en action, et ce qu'il est fait est un point d'interrogation, puis envoyé les paires de valeurs clés. Souviens-toi en gros quand j'ai dit, c'est important quand tu nommes tes champs. Vous pouvez voir ici que c'est notre champ prénom parce que nous l'avons nommé, et ensuite nous avons des égaux et l'entrée que nous avons mis dans. Il s'agit du nom, puis de la valeur. Ensuite, nous avons une fin, et puis ça recommence. Nous avons un nom égal à Dodd, email égal, et ainsi de suite, ainsi de suite. Ceux-ci sont appelés paramètres get et par défaut, nous envoyons une demande get. Encore une fois, il devient assez technique mais ici nous pouvons également envoyer une demande de poste. Parfois, vous ne voulez pas utiliser une requête get car elle envoie cette inflammation dans l'URL. Ce qui est un peu un risque pour la sécurité peut-être. Si vous envoyez des informations sensibles ou personnelles vous souhaitez probablement utiliser la méthode post et utiliser post, vous êtes en mesure d'envoyer ces données et elles ne se retrouvent pas réellement dans l'URL. Vous pouvez également utiliser le champ défini ici pour regrouper les données associées dans un formulaire utile lorsque vous souhaitez créer un style. Vous pouvez également utiliser une balise appelée légende qui définira une légende pour ce jeu de champs. Mais nous irons dans les formes de style plus tard dans cette classe. Pour l'instant, nous avons notre page Contactez-nous, c'est très basique et moche, je l'avoue, mais au moins nous avons un formulaire là-dessus. Espérons que cela ramène des formulaires à la maison un peu pour vous. Dans la vidéo suivante, nous allons passer en revue les actifs, les symboles et les entités [inaudibles] . Je te verrai alors. 11. Jeux de caractères, entités et symboles: Dans cette vidéo, nous allons couvrir les entités, les symboles et le jeu de caractères. Ce sera probablement un autre bref parce que ceux-ci ne viennent pas souvent lors du développement en HTML, moins pour moi, mais il est important de savoir ce que c'est et comment les utiliser quand vous en avez besoin. En utilisant W3Schools, je vais cliquer sur Entités HTML. Vous verrez ici qu'il y a quelques caractères réservés en HTML. Maintenant, qu'est-ce que tout ça veut dire ? Eh bien, regardons notre code ici. Certains de ces caractères que nous utilisons, nous utilisons un signe inférieur et un signe supérieur à, assez souvent, nous utilisons des guillemets, nous utilisons un signe égal. Ceux-ci sont utilisés pour constituer le HTML. Le problème que vous pouvez rencontrer lorsque vous développez HTML est parfois que vous voulez juste le signe inférieur à, supérieur à affiché sur votre écran. Mais bien sûr, lorsque vous le mettez ici, votre logiciel et le navigateur, peuvent l'interpréter comme HTML, ou que vous essayez de créer du HTML. Le moins de, plus grand que l'exemple est probablement le plus commun. Comme vous pouvez le voir ici, le navigateur peut les mélanger avec des balises. Si vous vouliez écrire un signe inférieur à, nous devons utiliser une entité HTML. Ici, ils vous disent lesquels vous pouvez utiliser. Si nous revenons à la page À propos de nous et peut-être que nous voulons mettre dans notre lien, deux flèches arrière. On peut mettre, je crois qu'on doit mettre un point-virgule après ça, puis on appuie sur Sauvegarder. Maintenant, nous pouvons voir que nous avons deux flèches ou deux de moins que des signes. À cette fin, du côté HTML, vous avez ces entités HTML bizarres, mais quand il arrive au navigateur, vous pouvez voir que c'est parfaitement ce dont nous avons besoin, deux de moins que des signes. C' est une entité HTML commune là. Si on descend dans un espace ininterrompu. En HTML, si vous écrivez 10 espaces dans votre texte, votre navigateur les supprimera tous sauf un. Pour obtenir la séparation entre les mots, cela en autorisera un, mais si vous deviez mettre plus d'espaces, ça va juste le réduire. Nous allons vous montrer un exemple de cela. En fait, nous avons l'exemple juste ici. Bonjour, au revoir. Si on se débarrasse de cette balise br, c'est sur la même ligne. Vous pouvez voir qu'il est réduit à un seul espace. Peu importe combien de fois nous espacons ici et créons des espaces blancs, cela réduit à un caractère d'espace blanc. Comment on contourne ça ? On peut utiliser un espace ininterrompu. Je peux copier cette petite entité HTML et au lieu d'avoir tout cet espace, vous allez avoir des espaces non-cassants. Évidemment, si vous voulez une tonne d'espace blanc, ça va devenir assez moche, mais peut-être que vous vouliez juste un peu d'espace entre les deux. mettre à quelques reprises n'est probablement pas si important. Voilà, tu y vas. Nous avons quelques entités HTML pour remplacer ce comportement et dire à notre navigateur, hey, nous voulons un espace blanc ici ne pas le réduire à un seul espace. Si je retourne à la page, cela nous dira d'autres entités de caractères HTML utiles. Fondamentalement, chaque fois que vous voulez mettre un de ces caractères dans votre projet et que vous constatez que cela ne fonctionne tout simplement pas, vous devez probablement mettre une entité de caractère HTML. J' ai certainement référencé cette page ou d'autres pages sur Internet pour savoir quelle est l'entité appropriée. Mais essentiellement, les principaux sont l'espace non-cassant et les symboles qui sont déjà en HTML, le plus souvent inférieur et supérieur à. Juste brièvement maintenant, nous allons aller dans les symboles, et les symboles qui sont similaires dans le sens où nous utilisons ces codes bizarres pour mettre un symbole, mais n'est pas en conflit avec les caractères que nous utilisons pour créer du HTML. Autrement dit, si nous voulions afficher un signe euro, nous pourrions utiliser une entité HTML. Il semble que vous pouvez utiliser un nom, vous pouvez utiliser un numéro d'entité, une décimale ou une référence hexadécimale ici. n'y a pas besoin de se souvenir de tout ça. C' est juste si vous voulez mettre un signe euro ou un signe de livre sterling ou un symbole bizarre, vous aurez juste à chercher quel est le nombre, l' entité ou le nom et juste comment l'affichage cela. Habituellement, ces entités et symboles commencent par un signe &. Si vous voyez un &, puis un nom, ou un code comme celui-ci, vous êtes probablement à la recherche d'un symbole ou d'une entité. Oui, si vous avez besoin de mettre un panneau de copyright ou quoi que ce soit, n'importe quel symbole, recherchez ces références pour les symboles. Enfin, charset. Charset est quelque chose que vous mettez dans votre balise meta. Comme vous pouvez le voir lorsque vous faites défiler vers le bas, il y a quelques différences entre les différents jeux de caractères. Parfois, vous pouvez vouloir définir le jeu de caractères spécifiquement, puis déterminer quelle différence d'entité ferait ce jeu de caractères. Si vous regardez ici, beaucoup d'entre eux sont à peu près les mêmes. Disons ici que moins de signe, c'est la même chose. Plus grand que le signe est la même chose sur tous. C' est un peu difficile de repérer les différences en fait, mais il y a quelques différences. Fondamentalement, parfois vous devrez choisir votre jeu de caractères. Ce n'est pas quelque chose que vous devez faire souvent, mais il se lie bien avec des entités et des symboles. Charset sera l'ensemble de caractères, puis les entités et les symboles sont ce que vous utiliseriez pour créer ces symboles et caractères tout au long de votre projet. J' espère que cela vous a donné une certaine clarté car quand vous voyez quelque chose comme ça en HTML, vous saurez que c'est probablement un symbole ou une entité, et vous pouvez rechercher ce que c'est ou essayer vous-même et l'incorporer dans vos projets. Cela couvre le jeu de caractères, les entités et les symboles. Dans la vidéo suivante, nous allons terminer en parlant du corps HTML, et nous allons couvrir quelques autres éléments que vous pouvez utiliser dans votre projet. Je te verrai dans la prochaine. 12. Autres éléments de corps HTML: C' est la dernière vidéo que je vais faire sur la couverture des éléments du corps de HTML. Nous avons couvert beaucoup d'éléments de corps que vous utiliseriez en HTML. Au moins les plus courants comme les en-têtes, les paragraphes, les boutons, les images, les liens, les tableaux. Tous ces éléments sont assez communs et représentent probablement plus de la moitié de quand vous allez développer HTML, bien sûr Dibs aussi bien, ici et des éléments de niveau bloc. Mais dans cette vidéo, je voulais juste en couvrir d'autres que vous pourriez rencontrer. Encore une fois, s'il y a quelque chose que nous n'avons pas couvert, HTML est assez vaste, alors n'hésitez pas à revenir sur ce site Web ou sur un autre site Web et de référence. Je ne vais pas aller expliquer chaque élément HTML qui est disponible parce que cela rendrait le cours très grand et donc je me concentre juste sur les plus importants ici. Dans cette vidéo, je voulais juste vous en montrer quelques autres. L' un est HTML Iframe. Donc, comme vous pouvez le voir ici, nous avons à peu près une fenêtre dans notre page Web. Si vous voyez cette balise, « iframe », vous pouvez simplement prendre n'importe quel site Web que vous voulez, mettre l'URL dans les champs SRC, et alors certainement vous avez un site Web dans votre site Web. Ce n'est pas si commun parce qu'il n'y a pas beaucoup de raison de placer un site Web dans un site Web, mais vous pouvez toujours le voir. C' est un truc de vieille école, je crois. Une autre chose qui est nouvelle dans HTML5 est les médias. Vous avez donc vu l'intégration d'images, mais maintenant vous pouvez intégrer de la vidéo. Avant la sortie de HTML5, beaucoup de navigateurs s'appuyaient sur flash, mais maintenant si vous intégrez une vidéo YouTube et creusez assez profondément dedans, vous verrez qu'il utilise la vidéo HTML5. Vous pouvez voir une balise qui dit vidéo et vous pouvez définir la largeur et la hauteur et les contrôles, en mettant ces attributs pour obtenir la source. Des trucs plutôt cool. C' est la nouvelle version du web, charge toutes sortes de médias et vous pouvez également intégrer l'audio aussi. Ici, vous pouvez voir une balise audio, fonctionne assez similaire à la balise vidéo et ensuite si vous voulez descendre à cette référence sur YouTube, vous pouvez voir que vous pouvez lire une vidéo YouTube avec un iFrame. Certains trucs avancés que vous avez en HTML, vous pouvez dessiner des graphiques sur votre écran en utilisant HTML, vous pouvez géo-localiser, de sorte que vous pouvez déterminer l'emplacement de la personne utilisant votre site Web en fonction de leur navigateur. Vous pouvez glisser-déposer des éléments, du stockage Web, des travailleurs Web et cela va un peu dans le côté plus compliqué du HTML, et puis vous avez toute cette référence ici. Je voulais juste le laisser là avec le corps HTML. Encore une fois, il y a beaucoup de profondeur avec vous dans cela et si vous voyez une balise que vous ne comprenez pas, si vous voyez quelque chose comme ça et que vous ne savez pas ce qu'est un Iframe, il suffit de regarder, juste aller dans Google et être comme Iframe, par exemple élément HTML, puis vous commencerez à obtenir toutes ces informations. Dans la vidéo suivante, je voulais couvrir l'autre section de HTML, qui est la section tête. Je te verrai dans celui-là. 13. Tête HTML: Dans cette vidéo, nous allons couvrir la partie principale de notre document HTML. Encore une fois, nous allons faire référence à W3Schools.com parce qu'ils ont un assez bon article sur les différents éléments que nous pouvons inclure dans une section de tête. Il est juste accessible via ce menu ici, vous pouvez cliquer sur la tête HTML et ensuite vous pouvez vérifier les différents éléments que nous pouvons mettre dans notre section tête. Bien sûr, il y a un tittle que nous avons déjà inclus dans notre projet ici. Si nous devions supprimer complètement le titre et cliquer sur « Enregistrer » dessus, retournez à cette page, regardez ce qui arrive au titre ici. Ce qui se passe, c'est qu'il change au nom de fichier qui ne sera pas le nom le plus approprié le plus souvent. Il va avoir l'extension dessus, index HTML n'est pas un titre ou un titre très convivial pour la page. Je vais appuyer sur « Enregistrer » pour le ramener à About Us. La section suivante est la balise de style et au fur et à mesure que nous passons dans CSS, nous allons utiliser la balise de style pour intégrer le style sur une page Web particulière, mais pour l'instant je vais juste vous montrer comment nous pourrions l'utiliser tout de suite. Je vais copier cet exemple ici, aller sur notre page, puis aller dans notre éditeur de code. Je vais ouvrir un peu d'espace ici dans notre section tête et je vais mettre dans notre style. retrait, appuyez sur « Enregistrer », actualiser et nous pouvons voir que notre titre de niveau supérieur est rouge et, que définit-il d'autre ? Le titre de niveau supérieur est rouge, notre couleur de fond est bleu poudre et notre couleur de paragraphe est bleue. Ceci est utile lorsque vous avez juste une page à laquelle vous voulez appliquer des styles, mais par exemple, vous avez un site Web avec plusieurs pages que vous voulez placer vos styles dans un fichier séparé qui est référencé par les pages qui en ont besoin. En fait, si nous regardons l'exemple suivant dans ce document, nous pouvons voir l'élément lien qui est exactement ce que je viens de décrire. Il extrait un document externe avec vos styles dans votre projet. Nous allons le faire dans la section sur CSS donc je veux créer un fichier entier maintenant et vous montrer cela comme un exemple. Mais fondamentalement juste pour voir à quoi cela ressemble au lieu d'avoir tous ces styles, vous auriez juste un lien vers une feuille de style externe et il importerait essentiellement tous ces styles. Je vais me débarrasser des deux pour ceux-là, le suivant est meta. La méta-description est principalement utilisée par les moteurs de recherche, elle est utilisée par les navigateurs ainsi que sur la façon d'afficher du contenu et d'autres services web, mais la principale raison d'utiliser des méta-mots-clés, des descriptions et des titres est pour les moteurs de recherche. Parce que les moteurs de recherche, si vous tapez quelque chose de aléatoire dans Google comme disons cours HTML, ce qui arrive ici dans ces résultats est déterminé par votre méta information donc SEO est très important et vous voulez que cela optimisé. Comme vous pouvez le voir ici, nous pouvons mettre dans une méta-description, vous pouvez mettre quelques mots clés que j'ai entendu dire n'est pas trop pertinent dans les jours et l'âge d'aujourd'hui avec le SEO parce que Google est beaucoup plus sophistiqué que de simplement lui donner des mots clés, mais vous pouvez définir l'auteur et vous pouvez définir des choses aléatoires comme rafraîchir la page toutes les 30 secondes Je ne suis pas sûr pourquoi vous voudriez faire cela, mais c'est une option aussi. Un bon exemple ici est de donner à une page une description, des mots-clés et de l'auteur. Une autre chose que vous pouvez faire est de définir la fenêtre d'affichage. HTML 5 a introduit une nouvelle méthode pour permettre aux concepteurs Web de prendre le contrôle de la fenêtre à travers la balise meta. Fondamentalement ce que cela signifie est que si vous commencez à créer ce design responsive mobile sur l'une de ces pages, cela peut ne pas fonctionner sans mettre dans cette petite balise. C' est juste un peu un pré-requis pour la conception web responsive, mais nous allons y entrer lorsque nous parlons de design responsive dans la section CSS. L' autre chose que vous pouvez inclure dans la tête est une balise de script. Tout comme nous l'avons montré dans l'exemple précédent, nous pouvons intégrer certains styles mais nous pouvons aussi intégrer des scripts. Au lieu de faire cela, je peux saisir ceci et cela ne va pas réellement fonctionner parce que nous n'avons pas d'élément par l'ID de la démo qui est ce qu'il essaie de cibler, mais nous pouvons mettre en HTML tout de même et je pense nous aurons probablement une erreur de JavaScript ici, nous envoyons une fonction. En fait, tout ce qui fait est d'envoyer une fonction, mais encore une fois nous ne couvrons pas JavaScript dans ce cours particulier, sachez juste que vous pouvez inclure JavaScript la même manière que vous incluriez une feuille de style donc comme ceci, vous pouvez lier un document JavaScript externe, mais vous pouvez également l'intégrer comme nous l'avons fait ici pour que leurs scripts s'exécutent juste sur cette page. Celui-ci est quelque chose que je n'utilise pas vraiment souvent mais vous pouvez spécifier un élément de base et il donne une cible de base pour toutes les URL relatives sur la page. Vous pouvez également voir ici que vous pouvez effectivement omettre la tête et le corps HTML, mais je ne le recommanderais vraiment pas et W3Schools ne le recommande pas non plus alors assurez-vous d'inclure ces éléments. Voilà, voici un petit résumé. Vous pouvez mettre un titre, lien de base vers un document ou une ressource externe, mettre des métadonnées sur ce document, inclure du JavaScript et inclure des informations de style dans la tête. Cela couvre à peu près la tête, nous allons commencer à voir que nous développons avec CSS, nous allons lier et mettre quelques styles ici afin que cela viendra éternellement longtemps mais pour l'instant, titre est suffisant pour nous mettre dans la tête. Dans la prochaine vidéo, je vais finir par parler de HTML en parlant de la façon dont nous pouvons formater HTML sans CSS. Cela fournira une bonne suite dans le style de notre document avec le sujet suivant et vraiment important, CSS. Je te vois dans la prochaine vidéo. 14. Formatage HTML: Pour finir notre section sur HTML, je vais couvrir le formatage HTML. La raison pour laquelle j'ai laissé cela jusqu'à la fin est parce que je pensais que cela fournirait une belle segue dans CSS et vous pouvez commencer à voir quelles sont les options de formatage disponibles en HTML, quel point elles sont limitées, et combien plus vous pouvez obtenir en utilisant CSS. Revenons à notre bon ami w3schools.com et allons au formatage HTML. Les principales choses que vous pouvez faire est de texte en gras, en italique, accentuant, en le rendant plus petit et en indice et en exposant. Probablement les principaux sont audacieux et italique. Vous pouvez descendre ici et voir que si nous voulons gras n'importe quel texte, nous pouvons juste utiliser un B, mais B est une étiquette ancienne à utiliser. Souvent ces jours-ci, si vous voulez audacieusement quelque chose ou souligner quelque chose, vous utiliseriez fort. Allons-y et montrons fort dans l'action en ce moment. Dans notre page « À propos de nous », faisons simplement ce « bonjour » en gras. Tout ce qu'on a à faire, c'est d'enrouler quelques tags autour d'elle et ensuite, on est fort. Des trucs très basiques. Une fois que nous allons à HTML italic et EM, c'est une chose similaire. Nous pouvons utiliser I en italique ou nous pouvons utiliser EM pour souligné, et encore une fois, il a ajouté de l'importance sémantique et il est plus fréquent dans HTML moderne d'utiliser EM autre que I. Je ne vois plus jamais je ces jours-ci. Je recommanderais certainement si vous faites de l'italique, choisissez EM. Nous pouvons envelopper au revoir dans EM et ensuite nous avons certainement un texte en gras et en italique. Vous pouvez également utiliser small pour lorsque vous voulez un texte plus petit dans un élément d'en-tête. Si nous avons à propos de nous, et peut-être que nous voulions mettre dans un texte plus petit, notre histoire et nos valeurs. Juste pour préfacer ce qui est sur le point de venir. Si je garde cela, vous verrez que ce que nous avons enveloppé dans les petites étiquettes est plus petit, légèrement plus petit. Encore une fois, si vous n'aimez pas la façon dont cela est stylé, nous sommes en mesure de cibler tout dans ces balises. On peut dire que je veux que des éléments forts agissent comme ça ou ressemblent à ça. Je veux que les éléments mis en évidence par EM ressemblent à ceci. Je veux que les petits éléments ressemblent à ça. C' est tout ce que nous pouvons faire avec CSS. Si ce n'est pas assez petit pour votre manque, utilisez-le toujours parce qu'il vous donnera un bon ciblage puis suivez dans la section CSS, car nous allons vous montrer comment styliser les choses comme vous le souhaitez. C' est un autre pour Mac, que je ne pense pas avoir utilisé auparavant. Mais vous pouvez mettre en surbrillance des parties du texte. J' irai ici et je mettrai une marque là. Des trucs très basiques. Nous mettons juste du texte et nous mettons des balises l' entourant pour lui donner un style. Il y en a plein d'autres ici. Je ne vais pas les mettre tous dans un projet. Ils sont assez explicatifs. Mais oui, vous pouvez le référencer ici et voir ce que vous pouvez faire en HTML avec le formatage HTML. Ce que je vais dire sur le formatage HTML, c'est qu'il est assez limité et c'est pourquoi nous avons certainement besoin de CSS pour faire ces belles pages Web. Cela semble actuellement terrible et nous ne pouvons pas vraiment rendre cela agréable sans CSS. Mais ces éléments, vous verrez toujours tout au long de votre temps en regardant HTML, car ils définissent l'importance sémantique. Si je devais mettre un texte et ensuite le définir comme fort, cela me donne une cible à parcourir et dans ma feuille de style, dire que tout le texte fort devrait avoir un style ou un comportement particulier. Vous voyez cela dans la section CSS, mais pour structurer et être capable de cibler différentes parties de votre page. Si vous voulez quelque chose de gras, vous devriez toujours utiliser le formatage HTML comme fort puis si vous voulez changer ce style particulier, nous pouvons le faire avec CSS. C' est tout ce que je voulais couvrir sur HTML. Une fois que vous comprenez les balises, une fois que vous comprenez la différence entre la tête et le corps et que vous comprenez les attributs, vous êtes assez défini avec HTML qui couvre la majeure partie de ce que vous devez savoir du HTML. Dans la prochaine vidéo, nous allons sauter dans CSS et commencer à apprendre du CSS. Ce sera le deuxième sujet de notre cours ici. Je te vois dans la prochaine vidéo. 15. Commencer avec CSS: Dans cette vidéo, nous allons commencer avec CSS et pour cette section de la classe, nous allons à nouveau référencer les écoles W3. passant au menu CSS maintenant et en cliquant sur « Introduction », nous sommes ramenés à l'endroit où nous avons commencé quand nous avons introduit CSS pour la première fois. Maintenant, pour introduire CSS dans notre projet, je vais passer à notre éditeur de code. Si vous voyez ici, nous avons déjà un exemple de CSS dans notre projet. Ici, nous avons une balise P et nous avons un attribut dessus, le style de code. Le style est un attribut qui nous permet d'appliquer CSS à n'importe quel élément particulier. Vous pouvez voir sur cette balise P particulière, nous avons un attribut de style, et à l'intérieur de cet attribut, nous avons une règle CSS qui définit la couleur verte. Donc, si je reviens au document que nous avons ouvert, vous pouvez voir que le premier paragraphe est vert, juste là où nous l'avons mis ici. C' est ce qu'on appelle un style en ligne. Mais peut-être que nous voulions avoir un style qui s'appliquerait à toutes les personnes. Donc, ce que je pourrais faire ici, si je devais le faire des styles en ligne est de simplement copier et coller cela, puis mon deuxième paragraphe serait aussi la couleur verte. Voyons juste ça. Maintenant, une fois que nous avons beaucoup plus de paragraphes et peut-être que nous voulions mettre styles sur un titre aussi. Sur nos divs. Cela peut commencer à devenir assez désordonné et nous pouvons commencer à nous répéter un tas de fois. Si nous avions comme 10 P différents et nous les avions tous avec style, couleur verte. Il vaut mieux juste définir une règle que tous les p ont la couleur verte. C' est alors que nous pouvons commencer à utiliser des sélecteurs CSS. Maintenant, nous allons dans la syntaxe dans la prochaine vidéo. Mais pour l'instant, je vous montre la deuxième façon dont nous pouvons inclure des styles dans notre projet et nous l'avons réellement vu dans la leçon précédente sur la tête HTML. Je vais aller à ma section tête ici, créer une ligne après titre et ouvrir des balises de style. Donc, une fois que nous avons ces balises de style d'ouverture et de fermeture, nous pouvons commencer à mettre du CSS pur et nous allons faire la syntaxe dans la prochaine vidéo. Alors ne vous inquiétez pas trop de ce qui se passe ici. Mais au lieu d'avoir une couleur verte appliquée à chaque P en utilisant un attribut de style, je vais m'en débarrasser et mettre cette règle ici. Comment je ferais cela est d'appuyer sur « P » pour cibler tous les p Ouvrez quelques crochets bouclés pour définir une règle qui irait juste à ce sélecteur et puis je vais mettre dans le même style qu'avant, la couleur verte. Lorsque nous enregistrons cela, nous devrions espérer voir tous les paragraphes ou les balises P être la couleur verte. Vous voyez, il y a un deuxième paragraphe ici pour « Bonjour, au revoir ». Celle-ci est également touchée. Nous lui avons donc donné un sélecteur et lui avons donné une règle. Nous allons entrer dans la syntaxe dans la prochaine vidéo. Que se passe-t-il si nous voulons appliquer la couleur verte à chaque P ? Ce n'est pas seulement dans cette page Web particulière, mais sur toutes nos pages Web de notre site Web. Eh bien, la meilleure façon de le faire serait de créer une feuille de style externe, mettre les règles dans la feuille de style externe, et ils les lient simplement à nos documents HTML. Donc encore une fois, nous avons couvert cela dans la section tête HTML, mais je vais juste revenir en arrière et vous montrer. Retournons dans les écoles du W3. Je vais ouvrir HTML dans une nouvelle section et descendre à « HTML Head ». Nous faisons défiler vers le bas, vous pouvez voir, oui, nous pouvons insérer des styles pour une seule page HTML ou nous pouvons lier à une feuille de style externe, puis copier ces styles à travers toutes nos pages. Je vais copier cet exemple, mettre là où nous avions nos tags de style et parlons de ce qui se passe ici. Donc, cette balise de lien est une balise de fermeture automatique, nous n'avons pas besoin de mettre une balise de fermeture à la fin. Nous avons deux attributs dessus. Le premier est REL, et il définit quel type de fichier il s'agit. C' est une feuille de style. Tout ce que vous avez à faire est simplement appeler une feuille de style dans l'attribut REL, puis le deuxième attribut définit où se trouve la feuille de style réelle. Je veux appeler le mien style.css, pas mon style.css, et je vais l'enregistrer. Revenons à notre page. Vous ne remarqueriez rien de différent à part évidemment les styles que nous venons d'enlever. Il ne va pas faire exploser votre page Web ou quoi que ce soit, mais si je vais dans ma console, vous pouvez voir que cela dit qu'il y a fichier era introuvable et c'est parce que nous n'avons pas encore créé le fichier. Donc, ce que je vais faire, est d'aller dans « Atom », créer un nouveau fichier, et d'enregistrer ceci tout de suite comme style.css. Donc, allons-y dans style.css. même règle s'applique ici avec HTML. Nous avons certainement besoin du pot HTML point, mais pour la première partie, nous pouvons essentiellement l'appeler ce que vous voulez. Je vais cliquer sur « Enregistrer » sur cela et maintenant si nous revenons en arrière et rechargeons la page, puis je vérifie à nouveau ma console, il n'y a pas d'erreurs. Mais bien sûr, il n'y a rien qui se passe parce que nous n'avons pas encore établi de règles. Donc je vais définir la même règle que nous avions avant, couleur P vert. Retournons en arrière. [ inaudible], tous les paragraphes sont maintenant verts, car nous avons lié cette feuille de style externe à ce projet. Nous pouvons référencer cette feuille de style, c'est une feuille de style sur toutes nos pages web de notre projet. Si nous voulions entrer en contact ici, nous pourrions mettre exactement le même lien et nous n'avons pas à réécrire nos styles à chaque fois. Alors, voilà. Cela couvre les trois façons de mettre en CSS dans un document. Nous pouvons le faire en ligne à travers un tag de style comme nous l'avons montré auparavant. Comme ça, si nous voulions juste cibler un style qui n'a pas de sens pour créer une règle, nous pouvons créer une balise de style dans une tête ici, et simplement définir tous les P avec la couleur du vert. Ou nous pouvons simplement nous en débarrasser et mettre tous ces styles dans une feuille de style, ce qui est la façon la plus propre de le faire le plus souvent, surtout lorsque votre projet devient plus grand, vous allez réutiliser beaucoup les styles. Certainement une bonne idée d'avoir une feuille de style et à partir de maintenant nous allons nous concentrer sur mettre nos styles dans ses propres feuilles de style. Dans la prochaine vidéo, nous allons entrer dans la syntaxe. Comment écrire toutes ces règles et comment cela fonctionne-t-il ? Oui. Je te verrai sur la prochaine vidéo. 16. Syntaxe de base et sélecteurs: Donc, dans la dernière vidéo, nous avons inclus CSS dans notre projet et nous avons commencé avec notre règle de style individuelle appliquée ici en ligne sur la balise p, mais ensuite nous avons défini une règle sur la section head ainsi et maintenant nous avons une feuille de style externe pour travailler avec. Donc, pour commencer avec Syntaxe, encore une fois, je vais revenir pour fermer cet onglet, puis revenir à la page Syntaxe sur w3schools. Ici vous pouvez voir une belle représentation visuelle d'un CSS. Donc, la première partie que nous avons est un sélecteur, et ensuite nous avons le bloc de déclaration. Donc c'est simple en ce sens qu'il n'y a que deux parties. Nous avons ce sélecteur et le bloc de déclaration. Dans le bloc de déclaration, nous avons ces différentes options définies. Donc, la première partie est la propriété et la deuxième partie est la valeur. Donc, lorsque nous avons défini la couleur sur vert, nous avons défini la propriété de la couleur sur la valeur du vert. On peut séparer les règles par un point-virgule ici. En fait, nous devrions, et chaque règle d'un point-virgule juste pour l'exhaustivité. Cela nous sauvera de quand nous en mettrons un nouveau, nous n'oublierons pas de mettre le point-virgule et il ne se cassera pas. Donc, ici, dans l'exemple, vous pouvez voir cela va définir tous les éléments p sur aligné au centre avec une couleur de texte rouge. C' est donc un autre attribut que vous pouvez utiliser pour centrer le texte. Vous pouvez également aligner à gauche ou à droite en fonction de ce que vous modifiez cette valeur. Mais vous pouvez voir ici avec ce sélecteur, c'est juste p, qui signifie que tous les éléments avec ce nom seront changés en couleur rouge avec le texte aligné au centre. Donc, la première partie est le sélecteur, bien sûr, et il y a différents sélecteurs que nous pouvons utiliser pour trouver ou sélectionner des éléments HTML basés sur le nom de l'élément, id, classe, attribut, et à peu près tout. Aussi longtemps que vous pouvez différencier les attributs par l'une de ces pièces, vous serez en mesure de cibler des éléments ou des groupes d'éléments spécifiques. Donc, le premier est le sélecteur d'élément. Donc, il sélectionne tous les éléments en fonction du nom de l'élément. Nous avons encore le même exemple. Nous sélectionnons toutes les balises p. Le suivant est le sélecteur d'ID. Donc, c'est si nous voulions sélectionner un élément particulier. Donc, je pense que la meilleure façon de montrer cela est de plonger directement dans le code. Mais la façon dont nous faisons cela est avec un hachage. Donc ce que je vais faire, il y a deux parties à ça. Je vais dans mon éditeur, allez dans mon HTML. Disons simplement que cette rubrique particulière que nous voulions mettre en œuvre. Donc, ce que je fais est de lui donner l'attribut d'id. Donc, je vais lui donner l'id du deuxième titre, disons. Donc maintenant, ce que j'ai fait, c'est que je viens de lui donner un identifiant unique que nous pouvons utiliser pour le cibler. Donc, si je retourne dans style.css, je peux utiliser le hachage. Rappelez-vous le hachage avec les identifiants et je peux faire deuxième titre, puis j'ouvrirai un crochets bouclés et quel style devrait être appliqué ici ? Voyons voir. Nous avons déjà fait des couleurs, alors peut-être faisons le soulignement de la décoration de texte. Donc maintenant, il dit quoi que ce soit avec l'identifiant du deuxième titre, nous ne devrions être qu'un parce que id ne devrait s'appliquer qu'à un seul élément sur la page. Nous allons lui donner un soulignement. Revenons dans notre page et jetons un coup d'oeil et voilà. Notre titre que nous avons défini avec l'identifiant du deuxième titre a la décoration de texte maintenant de soulignement. Se déplacer à travers les sélecteurs. Le suivant est le sélecteur de classe, et le sélecteur de classe fonctionne très similaire au sélecteur d'id, sauf que cela est utilisé pour sélectionner plusieurs éléments. Donc, par exemple, si nous allons dans notre document ici et peut-être cette div, et nous allons avoir quelques uns de ces div-s. Nous voulions lui donner une certaine classe, sur laquelle nous allons changer les styles. Donc je vais juste sauter et le faire comme on l'a fait avec Id. Je vais faire la classe au lieu d'ID, et je vais appeler cette div spéciale. Donc, je vais sauver cela, aller dans style.css et comment nous pouvons cibler une classe est au lieu d'utiliser un hachage ou un signe de livre, nous allons utiliser un point. Donc, je vais entrer avec un point et dire div spécial-div. Maintenant, que devrions-nous faire avec un div spécial ? Utilisons cet exemple text-align et nous l'alignerons vers la droite. Alors appuyez sur « Enregistrer » dessus. Maintenant, nous avons la règle basée sur ce sélecteur. Nous avons également défini la classe sur l'élément HTML réel. Alors maintenant, quand nous appuyons sur ceci, nous devrions voir que le premier paragraphe ou ceci, mais premier div ici, tous les textes à l'intérieur sont alignés à droite. Maintenant, si nous voulions le faire à nouveau, tout ce que nous ferions est d'avoir un autre div avec la classe de div spécial. Rappelez-vous que les classes sont destinées à être placées sur plusieurs éléments, tandis que les id ne sont que pour un élément sur la page. Donc maintenant, si nous revenons ici, nous verrons que chaque div avec la classe de div spécial va avoir la règle de texte aligner directement dessus. Alors que celui-ci est juste un div et il n'a pas de classe ou div spécial. Donc, il a le comportement par défaut. Pour revenir au document ici, nous pouvons également utiliser une combinaison d'éléments et de sélection de classe. Comme vous pouvez le voir ici, on a le P et on a un centre de points. Donc, cela dit fondamentalement que si vous avez un p avec la classe de centre, appliquez cette règle. Donc, vous devez avoir deux choses : vous devez avoir la classe sur cet élément que vous voulez cibler, et il doit également être de cet élément particulier. Donc, je vais copier et coller ça maintenant en fait, et le démontrer. Donc, j'ai copié cela là-dedans, et maintenant je vais trouver un paragraphe. Faisons mon premier paragraphe et donnons-lui la classe de ce qui était la classe à nouveau ? Au centre. Donc nous lui donnons cette classe. Retournez ici, et maintenant on peut voir qu'il est rouge et centré. Nous pouvons également combiner avec id. Donc peut-être que nous voulions seulement cibler le titre 2 avec un identifiant de deuxième titre. Peut-être que nous avons mis le deuxième titre sur un autre élément qui n'était pas un h2. Nous pouvons le rendre vraiment spécifique et dire que seuls les h2 avec un identifiant de deuxième titre, le style s'appliquera. Donc je vais juste retourner ici et mettre h2 en face et nous verrons le même résultat. Donc, si je sauve et croise, vous verrez le même résultat si je mets le deuxième titre sur quelque chose qui n'était pas un h2. Alors peut-être que je vais mettre le deuxième cap ici. Ce qui, en passant, n'est pas une bonne idée parce que nous enfreignons déjà la règle d'avoir un seul identifiant pour chaque élément. Mais juste à titre d'exemple, si je reviens ici, vous verrez que la décoration de texte de soulignement ne s'applique pas à ce titre particulier parce qu'elle ne partage pas les mêmes éléments et la règle id. Donc si on a enlevé cette partie d'élément et qu'on y retourne, tu verras que ça souligne. Donc, j'espère que cela a du sens. Je vais supprimer cet identifiant de l'en-tête un parce que nous ne sommes censés utiliser un identifiant particulier qu'une fois dans un document. Alors oui, essaie de le garder. Si vous avez un identifiant particulier qui est censé définir un élément, si vous voulez affecter plusieurs éléments que vous définissez, vous pouvez utiliser la classe. Pour revenir à la syntaxe et aux sélecteurs, vous pouvez également regrouper les sélecteurs afin que vous n'ayez pas à vous répéter encore et encore. Donc, dans cet exemple, vous voyez h1, h2 et p ont tous les mêmes règles CSS. Donc, ce que nous pouvons faire est de minimiser cela en mettant simplement des virgules. Donc, au lieu de cela, nous pouvons le faire. Une autre chose est un commentaire, et ceci est utilisé pour expliquer le code et nous pouvons faire en ouvrant avec une barre oblique, puis l'astérisque, puis en fermant avec un astérisque et une barre oblique. Donc, les commentaires vous donnent juste la possibilité d'annoter votre code pour le rendre plus facile à comprendre pour quelqu'un de le lire, mettons juste un commentaire arbitraire ici, et je dirai souligner tous les deuxième titres. Vous pouvez voir mon logiciel d'édition de code sait que c'est un commentaire et l'a fané. Ce sont donc les sélecteurs de syntaxe de base. Il y en a des plus avancés que nous allons voir dans une vidéo plus tard. Mais essentiellement ce que vous avez est votre sélecteur d'élément, vous avez des sélecteurs d'ID, vous avez de la classe, et vous pouvez également les combiner. En fait, vous pouvez combiner les trois en un seul. Dites par exemple, vous aviez un p avec l'identifiant du deuxième titre et la classe de div spécial, vous pourriez écrire quelque chose comme ça. Donc, vous pourriez faire Special-div, second titre. Mais maintenant, tu deviens un peu trop fou avec les sélecteurs. n'y a pas souvent de raison pour laquelle vous auriez besoin de faire quelque chose comme ça. Très bien, donc ça couvre la syntaxe de base. Dans la vidéo suivante, nous allons couvrir la hiérarchie CSS, et c'est ce qui donne à CSS le nom de feuilles de style en cascade parce que, comme vous le verrez dans la vidéo suivante, il y a une hiérarchie de spécificité qui détermine quelles règles remplacent les autres règles. C' est la partie délicate de CSS et nous allons y plonger dans la prochaine vidéo. 17. Hiérarchie CSS: Dans cette vidéo, nous allons couvrir la hiérarchie des règles CSS. Pour ça, j'ai deux documents ouverts. Je vais juste passer à une nouvelle fenêtre. Il y a ces deux documents sur les écoles du W3 qui parlent de ça. L' un est le mode d'emploi général et l'autre est sur la spécificité. Dans cette procédure, nous avons déjà vu les trois façons d'insérer CSS. Nous avons fait en ligne style et feuille de style interne, et une feuille de style externe. Donc, vous avez vu une feuille de style externe ici. Vous avez vu une feuille de style interne, juste mettre une étiquette de style dans votre tête et vous avez vu un style en ligne. Mais il y a aussi la question des feuilles de style multiples. Par exemple, certaines propriétés ont été définies pour le même sélecteur dans différentes feuilles de style, laquelle a réellement priorité ? Jetons un coup d'oeil à cet exemple. Disons que nous avons une feuille de style qui a une règle pour h1 de couleur marine, mais alors il y a une autre feuille de style qui a une règle pour h1 de couleur orange. Que se passe-t-il ici ? De quelle couleur est-ce que ce h1 va être ? Ici, vous pouvez voir que la réponse est la valeur de la dernière feuille de style de lecture sera utilisée. Si nous descendons ici et nous avons une balise de lien référençant une feuille de style externe, puis nous avons une feuille de style interne. La feuille de style interne est définie après, donc elle vient après ce lien. Par conséquent, ce style remplacera tous les styles h1 de cette feuille de style particulière. Mais malheureusement, ce n'est pas seulement plusieurs feuilles de style que vous devez vous inquiéter, il y a plusieurs façons de vous chevaucher avec CSS, et c'est là que l'ordre en cascade entre en jeu. Il demande ici, quel style sera utilisé quand il y a plus d'un style spécifié pour l'élément HTML ? Ce qu'il dit ici, c'est que nous pouvons dire que tous les styles vont en cascade dans une nouvelle feuille de style virtuelle par les règles suivantes, où le numéro un a la priorité la plus élevée. Si nous avons un style en ligne, cela remplacera une feuille de style externe et interne. Je vais juste le démontrer maintenant. Nous avons cette règle pour tous les paragraphes sont verts, mais que se passe-t-il s'il n'y a qu'un seul paragraphe que vous ne voulez pas vert ? Eh bien, nous pouvons entrer et nous pouvons aller à ce paragraphe et nous pouvons lui donner un style en ligne, appeler couleur noire. Maintenant, si je garde cela et ouvre cette page, nous pouvons voir que ce paragraphe est maintenant noir. C' est parce que si nous mettons un style en ligne, il va remplacer la règle générale. Cela est lié à la spécificité. Pour plus de spécificité, allons dans cet article maintenant sur les écoles W3. Qu' est-ce que la spécificité ? Eh bien, s'il y a deux ou plusieurs règles CSS conflictuelles qui pointent vers le même élément, le navigateur suit quelques règles pour déterminer laquelle est la plus spécifique et donc gagne. Vous pouvez considérer la spécificité comme un score qui détermine quelles déclarations de style sont finalement appliquées à un élément. Dans notre cas particulier, il s'agit d'une règle assez générale. Nous disons que toutes les étiquettes p sont vertes. C' est plutôt général. Ils disent, cette balise p particulière sur cette page particulière que nous voulons noir est très spécifique. Donc, il est supposé par votre navigateur que vous voulez que ce soit spécifiquement noir et que vous ne voulez pas qu'une règle générale comme celle-ci la remplace. Assomption assez sûre que je dirais. Mais le problème n'est pas seulement avec les styles en ligne, mais aussi avec des règles comme celle-ci. Donc, si nous revenons au document et en lisons plus sur la spécificité, nous pouvons regarder la hiérarchie ici. Les styles en ligne vont toujours remplacer ce qui est dans vos règles, dans les règles générales, que ce soit sa classe ou son ID. Il y a une exception à cela, que nous aborderons un peu plus tard dans cette vidéo. Mais les styles en ligne sont les plus spécifiques. Ensuite, nous avons une pièce d'identité. ID est bien sûr, un identifiant unique pour un élément de page sur une page particulière. Ensuite, nous allons dans les classes, les attributs et les pseudo-classes. Nous ne sommes pas allés dans le ciblage via des attributs ou des pseudo-classes. Mais tout cela est plus général que le simple ciblage d'un élément spécifique. Ensuite, le plus général est le ciblage par un certain type d'élément HTML ou de pseudo-éléments. Dans l'exemple de p, nous ciblons tous un élément particulier. C' est la règle la plus générale que vous pouvez avoir. Si vous voulez quantifier la spécificité, vous pouvez également le faire. Voici un petit guide à ce sujet. Une autre règle de spécificité et similaire à celle que nous avions ici avec les multiples feuilles de style, la dernière règle compte. Peut-être que nous n'aurions pas ces règles côte à côte parce qu'il est assez évident de voir qu'elles ciblent la même chose, mais peut-être plus bas dans une grande feuille de style, vous avez un autre sélecteur ciblant h1. Celui qui est écrit en dernier sera appliqué et remplacera celui-ci. Une autre chose à noter est que les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs d'attribut. Ceci est un sélecteur d'attribut et nous n'avons pas encore passé sur les sélecteurs d'attribut, alors ne vous attendez pas à ce que vous compreniez cela. Mais les sélecteurs d'ID, comme vous vous y attendez, étant le deuxième niveau de spécificité, ont plus d'un poids que des attributs. Défilant vers le bas pour voir plus de règles de spécificité, il dit ici que les sélecteurs contextuels sont plus spécifiques qu'un sélecteur d'élément unique. Supposons, par exemple, que si vous aviez une feuille de style externe et une feuille de style interne, la feuille de style interne est plus proche du document que la feuille externe, ce qui aurait donc priorité sur ce style dans ce cas. Le dernier exemple qui donne ici est qu' un sélecteur de classe bat un nombre quelconque de sélecteurs d'éléments. Comme il est dit ici, les classes sont plus spécifiques que de cibler uniquement tous les éléments d'un type particulier. Dites par exemple, vous aviez un h1 avec la classe d'intro qui prendrait la couleur jaune et remplacerait cela parce que ce n'est qu'un sélecteur d'élément. J' espère que cela aide un peu avec la spécificité. Encore une fois, il y a beaucoup à prendre ici. C' est l'un des domaines les plus délicats de CSS, donc je ne m'attends pas à ce que vous l'ayez maîtrisé après cette leçon particulière. Mais vous verrez que nous allons plus loin dans CSS, plus sur la raison pour laquelle il est appelé feuilles de style en cascade, et nous verrons cette hiérarchie fonctionner devant nos yeux. Il y a en fait plus de sélecteurs que nous pouvons utiliser, mais nous allons couvrir les sélecteurs avancés dans une vidéo ultérieure. Une chose que je vais mentionner avant de terminer ici est que nous pouvons remplacer ce comportement de spécificité. Nous le faisons en utilisant un peu d'un code de triche important. Disons par exemple, avec ce deuxième titre, je veux vraiment le changer pour avoir un souligné, mais peut-être qu'il y a un style spécifique ici où il est dit décoration de texte. Quelles sont les options qui s'offrent à nous ? Disons qu'aucun. Si je vais cliquer sur « Enregistrer » et puis je retourne à cette page, il va remplacer notre règle d'ID ici de soulignement parce que c'est un style en ligne. Rappelez-vous, en ligne est plus spécifique que de créer une règle d'ID ici. Que se passe-t-il si nous sommes dans une situation particulière où nous ne sommes pas en mesure de modifier ce document particulier, peut-être qu'il est HTML verrouillé. Il y a certaines situations dans lesquelles nous n'avons pas réellement accès pour changer le HTML ou il est généré par un backend, et il a ce style fixe. Eh bien, il y a un triche que nous pouvons utiliser et ce n'est pas exactement la meilleure solution, la meilleure solution serait de se débarrasser de cette étiquette de style. Mais en supposant que nous ne pouvons pas le faire littéralement, un hack que nous pouvons faire est de donner à ce style quelque chose qu'on appelle de l'importance. Nous allons commencer par un point d'exclamation et ensuite mettre important. Vous pouvez voir mon éditeur de code sait que c'est un mot-clé important, il met en évidence cela en violet. Maintenant, quand je reviendrai ici, vous verrez que cela est maintenant souligné, même s'il y a un style ici. Cette règle est plus spécifique qu'une règle d'ID. Mais je suis capable de faire apparaître ça en mettant en important. Le truc important, c'est que tu ne veux pas l'utiliser tout le temps. Donc, nous allons simplement taper dans Google. Risque d'utiliser important. Vous verrez, même si vous faites des recherches sur Google, vous découvrirez pourquoi important est une mauvaise pratique dans certaines situations. Il est donc susceptible de provoquer des effets indésirables plus bas. Si vous avez vraiment besoin de l'utiliser, vous pouvez, mais cela remplace le comportement habituel de CSS. Le défi vient vraiment quand, disons par exemple, je voulais écraser cela. Eh bien, il n'y a pas d'occasion d'écraser ça maintenant parce que j'ai mis de l'importance là-dessus. Donc, disons par exemple, nous avons la situation inverse d'avant où nous n'avions pas accès à ce fichier HTML. Peut-être que nous avons eu accès à ce fichier HTML et que nous n'avons pas eu accès à ce fichier. Si quelqu'un est important ici, il n'y a aucun moyen de le remplacer. Nous pouvons mettre dans un style et c'est super spécifique, mais il ne va toujours pas battre important. C' est, je suppose que l'un des risques de l'utilisation importante. Vous le verrez plusieurs fois si vous entrez profondément dans CSS, cela provoque des problèmes importants, donc il ne devrait être utilisé que comme un dernier scénario de cas. Ce n'est peut-être pas tout à fait logique pour l'instant pourquoi c'est, mais faites-moi confiance quand je dis que vous voulez d'abord utiliser cette hiérarchie de spécificité. Donc, si vous voulez obtenir spécifique sur un élément particulier, donnez-lui un style en ligne, ciblez son ID, et ne le donnez pas nécessairement important à moins que vous ne le deviez vraiment et que vous ayez l'impression que c'est la seule option. Mais au fur et à mesure que nous approfondissons CSS, vous apprendrez quand il est important d'utiliser important, et c'est là que je vais laisser de l'importance pour l'instant. Maintenant, nous avons couvert la spécificité et nous avons couvert la syntaxe. Il y a un concept, concept général que je veux couvrir appelé le modèle de boîte dans la vidéo suivante. Ensuite, nous allons entrer dans toutes les différentes options disponibles pour nous. Probablement pas tous d'entre eux, mais la majeure partie d'entre eux, et vous montrer ce que vous pouvez faire en CSS. Je vous verrai dans la prochaine vidéo pour parler du modèle Box. 18. Le modèle de boîte: Avant de plonger dans les différentes options de style, je voulais couvrir une autre chose, qui s'appelle le modèle de la boîte. Donc, si vous voulez aller dans W3Schools, et sélectionner CSS le modèle de boîte, nous pouvons commencer à en apprendre un peu à ce sujet. Je vais fermer l'onglet de la leçon précédente, et regardons le modèle de boîte. Au début, comment les éléments HTML peuvent ressembler à quelque chose d'un peu abstrait. Mais une façon d'y penser, c'est comme des boîtes. Dans CSS, ce modèle de boîte de terme est utilisé lorsque vous parlez de conception et de mise en page. Le modèle de boîte CSS est essentiellement une boîte qui entoure chaque élément HTML. Il se compose des marges, des bordures, du remplissage et du contenu réel. Vous pouvez voir dans cette image ci-dessous une illustration du modèle de boîte. Ce que nous avons dans les différentes parties est le contenu, remplissage, la bordure et la marge. Encore une fois, je pense que la meilleure façon de vous montrer cela est dans la pratique réelle. Nous avons un exemple ici, mais ils ne vous montrent pas d'exemple HTML. Revenons dans notre document. Je vais fermer quelques onglets ici pour le nettoyer, et voici une page claire encore. Je vais aller ici, basculer sur le index.html, et ce que je veux faire est juste de créer une boîte aléatoire. Ce que je vais faire est de mettre dans une règle horizontale, encore une fois pour créer une division, et je vais mettre dans une div. Ensuite, dans ce div, mettez dans un autre div, et ce div va être notre boîte. Afin de style ce div particulier, je vais lui donner une classe de boîte. Lorsque nous allons à nouveau dans notre document HTML, vous pouvez voir que la ligne horizontale est apparue, mais vous ne pouvez pas vraiment voir quoi que ce soit en dessous. moment, c'est parce que nous avons une div qui est à peu près juste un morceau vide de rien fondamentalement. Si je vais voir l'inspecteur ici et que je regarde ce qui se passe. Vous pouvez voir ici qu'il y a le div défini dans le HTML, mais il n'a pas de hauteur. Le div parent et div avec la boîte de classe dessus n'est fondamentalement rien en ce moment. Maintenant, la façon dont nous pouvons réellement voir le div et réellement créé dans quelque chose est d'aller dans notre style.css et de créer un style pour la boîte. Je vais cibler tous les éléments avec la classe de box en faisant .box, et je vais copier les styles de l'exemple ici. Je vais lui donner une largeur de 300, une bordure de 25, un vert solide, rembourrage de 25, et une marge de 25, donc je vais sauver ça. Alors, si nous allons dans notre document, nous pouvons commencer à voir cette boîte verte. Maintenant, ce qui est génial avec Google Chrome et je pense que dans d'autres navigateurs, c'est que vous pouvez faire clic droit sur cet élément et vous pouvez réellement voir le modèle de boîte. Ici, j'ai une représentation réelle du modèle de boîte ici. Maintenant, vous verrez que la partie de contenu réelle n'a pas de hauteur. Vous verrez 300, qui est la largeur que nous avons définie, mais pas de hauteur là-bas. Mais vous pouvez réellement voir qu'un a une certaine hauteur et c'est parce que nous avons beaucoup de rembourrage, beaucoup de bordure et une certaine marge. Je vais juste lui donner un peu de hauteur aussi. Je vais lui donner une hauteur de 200 pixels. Sauve ça, retourne en arrière. Maintenant, nous avons aussi une boîte avec une hauteur, et vous pouvez voir dans notre représentation visuelle du modèle de boîte ici que nous avons 300 par 200. Nous pouvons effectivement voir une certaine partie de la boîte être mise en évidence lorsque nous faisons cela. Souviens-toi avant, je vais juste commenter ça. Ce que j'ai fait là-bas est transformé en commentaire, de sorte qu'il ne s'applique pas réellement, si quelqu'un se demande. Si je retourne ici et que je vais essayer de passer la souris sur le contenu, la section du milieu, rien ne met en évidence ici. Tu vois comment j'ai plané dessus. Rien n'est là-bas parce qu'il n'a pas de hauteur. Si donne la hauteur de retour, et maintenant vous pouvez voir qu'il a une zone de contenu. Maintenant, il y a une couche en dehors de ce qu'on appelle le rembourrage. Maintenant, le rembourrage est je suppose juste la zone entre le contenu et la bordure. Si vous voyez le vert clair, je ne peux pas survoler les deux en même temps. Mais si vous pouvez voir ce vert clair qui apparaît maintenant, c'est la zone de rembourrage. Ensuite, bien sûr, la bordure, nous avons réglé la bordure sur un vert solide, et donné à 25 pixels de sorte que vous pouvez voir clairement la bordure, ce qui lui donne un supplément de 25. Ensuite, à l'extérieur de la frontière est la marge. Si je devais mettre deux de ces boîtes ensemble, faisons-le tout de suite. Je dois faire est de copier et coller. Maintenant, j'ai deux de ces boîtes, maintenant vous pouvez voir la marge, parce que si je n'avais pas de marge, je peux vraiment l'éteindre ici. Les boîtes se connecteraient simplement les unes aux autres parce qu'il n'y a pas de marge entre elles. Encore une fois, la marge est ce qui se trouve à l'extérieur de la frontière. Une autre chose que je peux faire pour ramener cette maison est de mettre du contenu dans une de ces boîtes. Je vais mettre la boîte 1 et la boîte 2. On va sauver ça, retournez en arrière. Ici, vous pouvez voir que nous avons du contenu là-dedans, et ce n'est pas juste contre les frontières parce que nous avons 25 pixels de remplissage, que nous pouvons voir clairement en planant là-bas. Nous pourrions également faire plus de style pour aligner le texte au centre. Mais si nous n'avions pas ce rembourrage, le contenu se mettrait à la frontière. J' espère que le modèle de boîte commence à avoir un peu de sens pour vous. Si nous revenons au contenu ici, vous verrez juste un avertissement sur la façon de calculer toute la largeur et la hauteur d'une boîte. Vous devez reconnaître que ce n'est pas seulement le contenu, c'est aussi le remplissage, la bordure et la marge, qui constitue la totalité de la superficie de ce contenu ou de cet élément particulier. Si nous devions nous débarrasser de tout cela, rappelez-vous, c'est fondamentalement un div vide qui est seulement aussi grand que le contenu à l'intérieur. Rappelez-vous qu'il n'y avait pas de contenu avant, donc nous n'avons rien vu. Maintenant, nous voyons réellement le contenu, mais il n'y a pas de modèle de boîte autour d'elle. En ce moment, si nous devions juste lui donner une bordure d'un pixel juste pour que nous puissions voir les bords de celui-ci. Il va étendre toute la largeur. n'y a pas de marge entre eux, et il n'y a que la hauteur nécessaire pour avoir le texte. Avec tous ces autres attributs que nous appliquons, nous pouvons avoir un div stylé. Vous verrez dans une vidéo ultérieure, nous pouvons les afficher à côté de l'autre. C' est là que nous pouvons commencer à voir des colonnes et un design beaucoup plus agréable et plus réactif. C' est juste un peu sur le modèle de la boîte. Juste un peu de théorie supplémentaire que j'ai pensé partager avec vous avant d'entrer dans les options de style. J' espère que cela aide à visualiser ce qui se passe vraiment lorsque vous créez un div ou un élément. Dans la vidéo suivante, nous allons sauter directement dans quelques options de style. Nous allons commencer par les couleurs, les arrière-plans et l'opacité. 19. Couleurs, fond et opacité: Dans cette vidéo, nous allons commencer à courir à travers différentes options que vous avez pour le style en CSS. Nous allons commencer par les couleurs, les arrière-plans et l'opacité. Si je vais aux couleurs CSS, nous avons déjà défini les couleurs dans notre document. Nous avons la couleur ici, nous avons la couleur là-bas, nous utilisons la couleur dans des endroits assez aléatoires. Comme vous pouvez le voir dans nos documents, nous avons juste un décalage de couleurs ici. Dans tous ces exemples, ce que nous avons fait est juste d'utiliser un mot pour définir la couleur. Si nous utilisons des couleurs unies comme le noir, rouge et le vert, nous pouvons simplement les jeter et CSS saura quoi faire. Mais il y a en fait d'autres façons de définir les couleurs aussi bien. Si je vais ici aux valeurs de couleur, si je tape simplement en rouge, j'obtiendrai une couleur très particulière. Mais ce que je peux faire est de définir n'importe quelle couleur particulière basée sur des valeurs RVB, valeurs hexadécimales, des valeurs HSL, RGBA et des valeurs HSLA. Ne sois pas trop débordée par ça. La plupart du temps, j'utilise des valeurs HEX. Juste ici est une valeur RVB, et juste ici est une valeur HEX. Vous avez peut-être vu cela avant, en fait, ils ont un hachage, et puis il y a quelques caractères hexadécimaux. Ce peut être les caractères anglais de l'alphabet romain ici, et quelques chiffres aussi bien. On peut le voir sur n'importe quelle page web. En fait, nous pouvons vérifier cela sur cette page web particulière. Nous pouvons cliquer avec le bouton droit de la souris et utiliser notre Inspecteur ici si vous êtes sur Google Chrome, et nous pouvons voir ici que nous avons un code couleur juste ici. Nous pouvons en fait, dans Chrome, voir la valeur hexadécimale de cette couleur et où elle tient sur le spectre de couleurs. Nous pouvons cliquer sur ceci et le changer en une valeur RGBA. Nous pouvons changer cela et le changer en une valeur HSLA, puis revenir à HEX. Comme nous changeons cela, nous pouvons commencer à voir à la fois le changement là-bas, mais aussi la valeur hexadécimale ici change. Je vais juste m'échapper pour inverser ça. Nous pourrions facilement mettre au lieu d'une valeur hexadécimale, donc je vais juste revenir à cet élément particulier à nouveau. Au lieu d'avoir une valeur hexadécimale, nous pourrions avoir juste le mot vert, mais ensuite nous obtenons un vert générique. C' est fondamentalement la même chose que cette valeur hexadécimale. Si vous voulez un mélange particulier, vous pouvez obtenir n'importe quel mélange en utilisant des valeurs hexadécimales ou HSL ou toutes les autres valeurs. J' ai juste Control Z et je l'ai ramené à cette couleur particulière qui est représentée avec cette valeur hexadécimale. Une autre chose que vous pouvez faire avec RGBA et HSLA, est de donner un peu de transparence ainsi qu'une couleur particulière. Encore une fois, si je suis retourné à changer la couleur de ce bouton et que je voulais le rendre un peu plus transparent, je peux cliquer dessus, convertir ceci en RGBA, et vous verrez que sur la propriété finale, nous en avons un, qui est essentiellement une opacité de 100 pour cent. Si je suis allé ici et que je l'ai changé à 50 pour cent, vous pouvez voir qu'il est un peu fané dans son arrière-plan, qui est une couleur grise. Je peux changer cela à 0,1 pour vous montrer 10 % d'opacité ou 0,9 pour montrer 90 % d'opacité. Mais oui, vous pouvez changer l'opacité et la couleur sorte que vous pouvez la faire fondre dans son arrière-plan. C' est plutôt cool. Nous avons parlé de RGB, nous avons parlé de valeurs HEX, nous avons parlé de HSL. Une chose que je n'ai pas mentionnée est que si vous voulez qu'il soit complètement transparent, vous pouvez mettre une valeur zéro. Essentiellement, vous pouvez mettre ce que vous voulez dans ces trois premières valeurs car il va être complètement transparent de toute façon. Mais bien sûr, vous pouvez travailler votre chemin jusqu'à 20 pour cent d'opacité, 40 pour cent comme je l'ai montré dans l'exemple. Défilant vers le haut de la page, il y a quelques endroits où nous pouvons mettre une couleur et ce n'est pas particulièrement évident lorsque nous regardons un élément HTML et que nous voyons le mot couleur, quelle couleur affecte réellement, et la couleur, en fait, si nous utilisons simplement le mot couleur sans dire couleur de fond , par exemple, cela va affecter le texte. Vous pouvez penser à la couleur comme la couleur du texte, et vous pouvez voir ici hash ffffff, qui est fondamentalement blanc, donc nous pourrions facilement mettre en blanc ici et nous obtiendrions le même résultat. Lorsque vous définissez la couleur, n'oubliez pas qu'il s'agit de la couleur du texte. Mais alors aussi sur ce lien particulier, nous pouvons définir une couleur d'arrière-plan, et c'est donc l'arrière-plan de ce lien particulier sera cette nuance de vert. revenant à la page, nous pouvons le voir maintenant, nous pouvons définir la couleur d'arrière-plan pour n'importe quel élément HTML en utilisant cette propriété particulière, et c'est l'arrière-plan, la couleur de tiret. Comme je l'ai dit, la couleur du texte est juste de la couleur. Nous n'avons pas à dire la couleur de la police, la couleur du texte, juste la couleur du mot lui-même est la propriété de la couleur du texte. La troisième couleur que je n'ai pas encore montrée est la couleur de bordure. Il y a plusieurs façons de le faire. Vous pouvez utiliser la propriété de bordure dans laquelle vous pouvez définir une largeur de la bordure, qu'elle soit solide ou pointillée ou pointillée, puis la couleur de cette bordure. La deuxième façon de le faire est d'utiliser un attribut appelé couleur de tiret de bordure. Par exemple, si je voulais ironiquement faire la couleur de la bordure du titre, donnez-lui en fait une bordure avec une couleur. Je pourrais aller ici sur le style de l'élément et faire la couleur de bordure bleue. Mais bien sûr, il n'y a pas encore de frontière, donc je dois en définir une, et je vais juste faire un px solide. Vous pouvez séparer la couleur en un attribut différent à l'aide de la couleur de tiret de bordure. Mais je pourrais aussi, si je désactive cela et je veux mettre cela sur la même ligne, je pourrais faire bleu juste après le mot solide, et voilà nous y allons. On couvrira la frontière dans la prochaine vidéo. Quand il s'agit de taille solide et pointillés ou pointillés, nous en parlerons dans la prochaine vidéo. J' ai déjà passé beaucoup de temps sur la couleur. Mais pour finir, nous pouvons affecter plusieurs choses sur l'arrière-plan, pas seulement la couleur. Nous pouvons lui donner une image et aussi contrôler la position de cette image. Ici, nous pouvons voir un exemple de couleur de fond, mais nous pouvons également lier en utilisant cette propriété, et la valeur pour cela doit suivre cette convention d'URL, crochets ouverts, open, double-guillemets, papier gif point ou autre le nom du fichier est celui que vous référencez. Tout comme quand nous faisions de la SRC, nous avons commencé avec des images. Comme ici, si tu voulais que ça soit une image de fond, on pourrait. Faisons-le maintenant. Allez dans notre boîte ici. Donnez-lui un style et donnez-lui une URL d'image d'arrière-plan, et mettons dans le photo.jpg. Essayons ça pour la taille et voyons à quoi ça ressemble. Il y a la boîte et ce que nous pouvons faire est de changer le positionnement aussi, donc la position x, nous pouvons le centrer. Nous pouvons l'aligner à gauche, aligner à droite parce que l'image est en fait plus grande que la boîte. Nous recevons ici une récolte que nous pouvons également positionner. Nous pouvons définir l'arrière-plan à répéter, en utilisant cela, nous pouvons répéter sur l'axe des y ou l'axe des x. Vous ne verrez rien parce que c'est déjà beaucoup plus grand que la boîte elle-même. Mais peut-être que si on faisait cette boîte vraiment grande. Ne faisons pas la largeur, faisons des hauteurs de 1000 px. Vous commencerez à voir qu'il se répète sur un axe y. Si nous devions faire le contraire et le faire avec la largeur, nous pourrions obtenir que cela soit 1000 pixels, et si je ferme ceci, vous verrez que sur l'axe horizontal, ça commence à se répéter. C' est une façon de mettre une image de fond dans notre document. Encore une fois, si vous souhaitez en savoir plus sur la mise en arrière-plan en CSS, il y a beaucoup d'informations ici dans ce document. Cette vidéo est un peu longue, donc je vais la laisser là. C' est essentiellement des couleurs et des arrière-plans et en termes d'opacité, nous l'avons couvert ici avec la valeur finale de HSLA, et RGBA. On peut régler l'opacité comme ça. C' est donc des couleurs et des arrière-plans. Dans la prochaine vidéo, nous allons aller un peu plus loin dans certaines des options que nous avons couvertes dans le modèle de boîte. Je parle de frontières, marges, de rembourrage, de hauteur et de largeur. Je te vois dans la prochaine vidéo. 21. Formatage du texte, polices et icônes: Dans cette vidéo, nous allons parler des polices et icônes de mise en forme de texte. Pour cela, nous avons juste besoin d'aller un pas vers le bas dans le menu et cliquez sur le texte CSS. La première propriété avec laquelle nous avons déjà travaillé est la couleur. Je vais juste briller sur ça. Nous avons appris à définir la couleur en utilisant la propriété color. La prochaine chose est l'alignement du texte. La propriété text align est utilisée pour définir l'alignement horizontal du texte. Je l'ai utilisé dans une des vidéos précédentes, si vous vous en souvenez. On l'a utilisé en deux occasions distinctes. Je l'ai utilisé pour centrer aligner cette boîte quand il est sur inline-block. Je l'ai également utilisé ici sur div spécial pour centrer aligner à droite. Nous pouvons également aligner le texte et ce que cela fait est de rendre chaque ligne étirée de sorte que chaque ligne a une largeur égale et que les marges gauche et droite soient droites. Vous l'avez peut-être vu dans des magazines, des journaux ou des livres. Je vais juste la démo maintenant pour toi. Si nous devions changer div spécial pour justifier, appuyez sur Enregistrer et maintenant vous verrez que le texte finit toujours sur le bord. Cool. En revenant à ici, une autre chose est la décoration de texte. Rappelez-vous, j'utilise la décoration de texte pour donner un soulignement sur le deuxième titre. Nous l'avons déjà vu ici, mais il a été remplacé. Je vais juste me débarrasser de ce style qui le remplace. Appuyez sur Sauvegarder, on y va. Il y a un exemple de décoration de texte, mais le soulignement n'est pas la seule chose que nous pouvons faire. Nous pouvons mettre une ligne à travers elle, nous pouvons aussi faire une ligne au-dessus. Nous pouvons également transformer le texte. Avec la propriété de transformation de tiret de texte, nous pouvons spécifier des lettres majuscules et minuscules dans le texte. Il transforme tout en majuscules ou en minuscules, ou il mettra en majuscule la première lettre de chaque mot. Ici, nous voyons le retrait de texte, donc nous pouvons retirer la première ligne de texte d'un paragraphe. Démonstrons ça très vite. Dans mes règles pour la balise p, je vais lui donner un retrait de texte de 10 pixels. Appuyez sur Enregistrer à ce sujet, et vous verrez qu'il s'agit en fait de paragraphes ici. Mais vous verrez qu'il y a un retrait ici. Si nous devions mettre quelques paragraphes appropriés dans ces paragraphes, au lieu de simplement un texte aléatoire. Tu verras ça. Tout d'abord, le premier est la ligne centrale, donc je vais juste me débarrasser de ça. Mais vous verrez ici la première ligne est indentée d'environ 10 pixels. C'est celle-là. Nous pouvons également modifier l'espacement des lettres. Jetons un coup d'oeil à ça. Je vais à la page 1 ici. Plutôt que de changer les règles, je vais juste mettre un style en ligne et définir l'espacement des lettres. Espacement à 10 pixels et voir ce que cela fait. Voilà, tu y vas. Vous avez un espacement très sauvage des lettres là-bas. Quelles sont les autres options ? Hauteur de la ligne. La hauteur de ligne permet de spécifier l'espace entre les lignes. Direction des textes, nous pouvons changer la direction du texte pour inverser. Je n'ai jamais fait ça pour être honnête. Comme nous avons beaucoup d'options ici que vous pouvez aller dans la liste et en fonction de ce que vous voulez avec votre mise en forme de texte, sont toutes les différentes choses que vous pouvez faire pour le modifier. Là à peu près, vous pouvez faire presque n'importe quoi en CSS. Vous pouvez également modifier l'espacement entre les mots. Si vous voulez voir tout ce que vous pouvez faire, certainement venir à cette page et vérifier certains des attributs. Continuons, regardons les polices. L' une des choses les plus courantes que vous verrez est la propriété de la famille de polices. Dans cette propriété particulière, nous pouvons définir la famille de polices Times New Roman, Arial, Courier New, cette chose. Ce que nous pouvons faire est d'ajouter une virgule, puis de mettre les polices de secours AVA ici. Ce que vous devriez faire est de commencer avec la police que vous voulez vraiment. Mais si le navigateur que l'utilisateur utilise, n'a pas cette police, il reviendra à cela et il reviendra à cela. Souvent, vous aurez une police très spécifique à l'avant, puis à l'arrière, vous définirez simplement si c'est Serif ou Sans-Serif. Vous pouvez lire sur la différence entre Sans-Serif et Serif ici. Voici quelques exemples de polices Serif et Sans-Serif et Monospace. Le style de police vous permet de mettre en italique votre texte et de le rendre oblique, ce qui est comme l'italique. Jamais vraiment utilisé oblique avant, donc je ne pense pas que ça vaut la peine de passer beaucoup de temps sur. La taille de la police est courante. Encore une fois, vous pouvez utiliser des pixels comme unité, mais vous pouvez également utiliser quelque chose appelé EM. Un EM est égal à la taille de police actuelle. Si vous voulez utiliser EM, voici les calculs approximatifs ici. Il est basé sur une taille de police standard de 16 pixels. Si, par exemple, vous vouliez qu'un texte soit 50 % plus grand que le texte qui l'entoure, vous pouvez modifier la taille de la police en utilisant une unité relative ici, c'est-à-dire un signe de pourcentage. Revenons à ici et disons, par exemple, je voulais que le texte factice soit 50 % plus grand que le reste du texte qui l'entoure. Eh bien, je l'ai déjà fait ici. Vous pouvez voir ici une taille de police relative. Je peux aller et faire le contraire et le rendre plus petit que l'autre texte qui l'entoure. Vous pouvez y voir qu'il représente les trois quarts de la taille du texte environnant. Je vais le ramener à 150. Vous pouvez également modifier le poids de la police. Le poids de la police est fondamentalement le caractère gras de la police. Une autre chose que vous pouvez faire est de régler l'unité sur VW. Je ne l'ai pas fait avant, mais vous pouvez voir ici, où est-il passé ? La taille de la police change en fonction de la taille de l'écran. C'est plutôt cool. L' unité VW représente un pour cent de la largeur de votre voie d'affichage. Si le port de visualisation mesure 50 centimètres de large, qui est le port de visualisation est essentiellement l'écran sur lequel vous le visualisez, une VW sera d'environ 0,5 centimètres. Ensuite, une variante de police spécifie si le texte doit être affiché en petites majuscules. Encore une fois, je n'utilise pas vraiment celui-ci souvent, mais encore une fois, c'est une autre option disponible dans les polices. Je vais ramener ça à toute la largeur. Voici toutes les propriétés de police CSS que vous pouvez utiliser. Certainement, revenez à cela pour référence. Mais pour l'instant, nous allons passer rapidement aux icônes. Si je fais apparaître la page pour les icônes, ce que nous pouvons faire est d'utiliser une police d'icônes pour pouvoir mettre certaines icônes et traiter ces icônes comme s'il s'agissait d'une police ou d'un texte en eux-mêmes. Maintenant peut-être, vous devez le voir en action. Une bibliothèque de polices d'icônes commune est la police Awesome. Vous pouvez rechercher la police Awesome ici. C' est l'un des plus célèbres que vous pouvez utiliser. Il a un tas de polices sur lesquelles ils sont constamment en expansion, et ici vous pouvez voir tout un tas de logos et de symboles différents et ils ont même des logos qui représentent différentes applications et services. Si nous revenons ici, nous pouvons voir que nous pouvons inclure la police Awesome dans notre projet en le liant à l'aide de la feuille de style rel. Ce que je vais faire est de copier cela, mettre dans notre projet afin que nous puissions voir comment nous pouvons utiliser les polices d'icônes. Nous avons le lien et cela signifie que nous pouvons commencer à l'utiliser. Ce que vous pouvez faire ici est de créer une balise I. Je vais échanger ici. Peut-être qu'avant d'entrer, nous avons commencé notre entreprise. Nous allons mettre une balise I et la classe sur la balise I dira notre document quelle icône utiliser réellement. Je vais juste sauver ça, mettre ça et vous verrez qu'on a un nuage devant chacune de ces lignes. La raison pour laquelle nous avons un nuage est que nous utilisons le code FA cloud. Pour utiliser n'importe quel nombre de ces icônes, nous avons le nom de la classe ici. Défilons simplement vers le bas, et disons que nous voulions utiliser un symbole de pomme. Nous pourrions entrer dans notre code et au lieu de FA cloud, nous pouvons mettre FA apple. Assurez-vous de placer la classe FA en premier, puis la classe FA spécifique pour l'icône réelle que vous souhaitez utiliser. En revenant à ici, nous voyons maintenant que l'icône est pomme. Dans ce cas, l'icône pour apple n'a aucun sens. Donc, je vais charger un autre exemple. Disons que nous voulons flèche, cercle à droite. Encore une fois, je vais ouvrir mon éditeur de code et changer pomme en cercle flèche à droite. Rappelez-vous avec le tableau de bord FA là-bas. On y va. Maintenant, nous avons inclus la police d'icône et nous référençons cette police d'icône en utilisant un élément I, et nous sommes en mesure de dire à notre document quelle icône nous voulons utiliser en utilisant des classes. Très cool. Si nous revenons à notre page ici par les écoles W-3, nous pouvons voir que nous pouvons également utiliser des icônes Bootstrap. Bootstrap est un framework front-end que nous apprendrons vers la fin de cette classe de partage de compétences. Ils ont également leurs propres polices d'icônes, de sorte que vous pouvez obtenir certaines de ces icônes également. Google a leur propre police d'icône, vous pouvez trouver une gamme de polices d'icône en ligne. Mais essentiellement, comment fonctionnent les icônes est que vous devez les charger presque comme une police. Que vous utilisiez une police qui vous donne des caractères anglais ou une police qui vous donne des icônes est essentiellement traitée de la même manière en HTML. Permettez-moi de le démontrer rapidement avant de terminer cette leçon et de passer à la suivante. Je vais définir un paragraphe particulier. Choisissons celui-ci à la famille de polices. En fait, définissons notre document entier. Une façon de le faire est d'ajouter une règle de style de niveau d'élément et d'utiliser tout le corps comme élément à cibler, puis nous pouvons choisir le style de police ou la famille de polices de l'ensemble du corps du document. Je n'ai aucune préférence avec la police, donc je vais revenir à la leçon sur les polices ici, et juste copier cet exemple. Aller plus loin, copiez ça, puis vous verrez ici que la police a légèrement changé pour Times New Roman. Changeons ça en Arial. Je veux que ce soit un peu plus différent. Maintenant, nous avons la famille de polices Arial. Ce que je vais faire maintenant, c'est ouvrir mon inspecteur, et vous pouvez voir ici qu'il est par défaut corps et je peux voir ma famille de polices d'Arial là-bas. Si je le supprime, il revient à la police par défaut. Si je descends là où se trouve l'icône, vous verrez qu'elle tire dans une police elle-même. En utilisant cette classe FA, il lui donne une police de la police Awesome, qui est la police de l'icône. Si je devais enlever ça, tu verras qu'il s'agit d'une boîte carrée. Mais maintenant, quand je l'allume, vous verrez que nous faisons essentiellement la même chose que nous faisons ici. Nous utilisons une police pour donner l'apparence du texte et nous utilisons également une police ici pour prendre cette balise d'icône et la transformer en un élément spécifique en utilisant nos noms de classe. Si vous faites défiler ici, vous pouvez voir ici un pseudo élément, ce contenu et ce petit code ici qui indique police Awesome lequel charger. Mais pour vous, vous avez juste besoin d'utiliser le nom de la classe, en utilisant ce nom descriptif pour cibler ce contenu particulier. C' est tout ce qui fonctionne sur le back-end de la police Awesome. Mais essentiellement, la météo que vous chargez, Times New Roman ou police Awesome. Vous chargez une police. Cela couvre à peu près la mise en forme du texte, les polices et les icônes. Dans la vidéo suivante, nous allons voir comment styliser trois des éléments HTML les plus courants dont nous avons parlé dans la section HTML, les images, les liens, les listes et les tableaux. Je te verrai dans la prochaine. 22. Styliser les images, les liens, les listes et les tableaux: Dans cette vidéo, nous allons expliquer comment styliser certains éléments HTML courants, comme les images, les listes, les liens et les tableaux. Nous avons déjà fait un peu d'images, mais si nous faisons défiler ici jusqu'à ce lien particulier dans w3schools.com, nous pouvons commencer à voir que nous avons quelques options de style à notre disposition en CSS pour styliser les images. Nous pouvons également rendre l'image réactive et évoluer vers le haut et vers le bas avec CSS. Essayons cela maintenant avec l'image que nous avons déjà dans notre document. Je vais basculer, c'est notre image. Alors ce que je vais faire est de passer à notre éditeur de code et je vais mettre une règle pour toutes les images. J' utilise un sélecteur de niveau d'élément et je vais suivre l'exemple ici. Je vais lui donner une largeur de 100 et une hauteur d'auto. Pour revenir à mon éditeur de code, je vais enregistrer ça. Maintenant, vous verrez qu'il étend toute la largeur de l'écran. Donc, si devait fermer cela, il étend la pleine largeur absolue de l'écran et le rapport d'aspect est le même quelle que soit la taille de l'écran. C' est la hauteur de l'auto qui fonctionne pour nous là-bas. La largeur 100 pour cent signifie que nous voulons l'image soit 100 pour cent de l'élément parent. Dans ce cas, si nous regardons le document, l'élément parent est corps. Donc ça va être à 100% du corps du document, la fenêtre dans ce cas. Il y a un peu de code que nous pouvons facilement obtenir nos proportions dans l'ordre et l'avoir réactif. Pour revenir à la page web maintenant, nous pouvons également définir une largeur maximale, comme je l'ai déjà démontré, mais sur un élément différent. L' autre façon d'inclure des images est de l'utiliser comme arrière-plan. Parfois, vous voudrez inclure une image comme arrière-plan plutôt qu'un fichier image réel comme celui-ci. Par exemple, si vous souhaitez qu'une image soit étirée comme celle-ci sur toute la largeur d' une zone de contenu ou recadrer l'image d'une manière plus réactive en fonction de la taille du contenu pour lequel elle est l'arrière-plan. Ce que vous pouvez également faire est de modifier l'image d'arrière-plan en fonction de différentes tailles d'écran. Ici, nous voyons une requête média, et nous n'avons pas encore abordé les requêtes média, mais les requêtes média nous permettent de définir des styles sur des écrans de largeurs particulières. On en parlera dans une vidéo plus tard. Mais pour l'instant, sachez simplement que nous pouvons changer l'image en fonction de la taille de l'écran. Il y a aussi un nouvel élément en HTML5 appelé l'élément image. Je n'ai jamais eu à utiliser l'élément picture, mais vous permet de définir plus d'une image. J' ai l'impression que nous pourrions passer beaucoup de temps ici sur les images, mais il y a d'autres choses que nous devons couvrir. Si vous avez besoin d'en savoir plus sur les images, revenez certainement à cette page dès maintenant, passons aux liens, listes et tableaux. liens et les listes doivent être assez simples, mais comme vous le verrez dans les tableaux, il existe quelques options de style différentes en fonction des différentes parties du tableau. Dans la section des liens CSS sur w3schools, nous pouvons voir que nous pouvons changer la couleur d'un lien, nous pouvons également changer la propriété text-decoration et qui est principalement utilisé pour supprimer les soulignements des liens. Le comportement standard avec le lien est d'avoir ce soulignement et ces différentes couleurs et cela a été le cas depuis le tout début du HTML. Ce n'est pas le plus beau et c'est désuet maintenant. Vous verrez souvent cela où le soulignement est supprimé en utilisant text-decoration none. Vous pouvez bien sûr également définir la couleur de fond. Ce que vous devriez remarquer en regardant à travers ce document, c'est que vous pouvez commencer à voir quelque chose d'un peu différent, et c'est ces deux-points avec un autre mot. Ce sont des pseudo-classes, et cela nous permet styliser le lien en fonction de l'état dans lequel il se trouve. Par exemple, nous avons ce sélecteur a:link qui nous permettra de cibler un lien normal non visité, mais si le lien a été visité, nous pouvons changer le style de celui-ci. Un commun que nous allons utiliser vraiment souvent est le vol stationnaire. Si votre souris se déplace sur un lien, alors nous pouvons changer le style et actif est le moment où un lien est cliqué. Si nous cliquons ici pour « Try it Yourself », nous pouvons voir ici que notre lien sera rouge, mais une fois visité, il sera vert et si je survole, il sera rose vif, et quand il sera actif, il sera bleu. Essayons ça. Vous pouvez voir maintenant que mon curseur passe sur le lien, il devient rose vif. C' est basé sur cette pseudo-classe ici qui dit que si l'état est survolé sur ce lien, puis coloriez-le rose vif. Voyons ce qui se passe lorsque je clique dessus. Vous pouvez voir brièvement qu'il est devenu bleu et c'est parce qu'il était actif, mais puis bien sûr, nous avons chargé la nouvelle page de sorte qu'il a disparu. Maintenant qu'elle a été visitée, elle est verte. Vous pouvez commencer à voir ici l'étendue complète des différents états et ce lien passant par différents styles. Encore une fois, je n'utilise pas vraiment actif, visité et lien très souvent, mais un très commun est survolant, parce que souvent vous voulez que le lien se démarque et en le faisant changer de couleur ou de style chaque fois que vous passez le curseur sur un lien, c'est quelque chose qui est assez courant. Pour revenir à notre référence w3schools ici, je vais passer aux listes. Si vous vous souvenez de notre section sur les listes HTML5, nous avons deux types non commandés et commandés. Une commande signifie simplement une liste numérotée. Si nous faisons défiler vers le bas, nous pouvons voir la première propriété list-style et qui spécifie le type d'un marqueur d'élément de liste. Nous pouvons le changer d'ici de quoi que ce soit à un cercle, un carré, et d'autres types de liste différents. Si vous cliquez sur « Essayez-le vous-même » ici, nous pouvons commencer à le voir. Ici, nous pouvons voir cette première liste non ordonnée. Nous sommes allés dans une classe de a et ici la liste non ordonnée avec une classe de a va avoir le type de liste du cercle. Ici, dans cette liste, nous l'avons donné b, et pour cela nous avons des carrés, ces romains supérieurs et inférieurs alpha. Vous pouvez modifier la chose qui vient en face des différents éléments de la liste. Pour revenir à la référence, vous pouvez également définir le marqueur d'élément de liste sur une image que vous choisissez vous-même. Dans ce cas, nous avons cette image gif carré-pourpre, et nous pouvons définir cela comme marqueur de liste. Vous pouvez définir tout ce que vous voulez être ce marqueur de liste si vous l'avez comme image. faisant défiler vers le bas, vous pouvez également modifier la liste-style-position. Ainsi, vous pouvez faire pointer la puce en dehors du contenu ou à l'intérieur. Encore une fois, je suis juste en train de briser à travers cela parce qu'il y a beaucoup d'options différentes. Beaucoup de ceux-ci que je n'utilise pas nécessairement sur une base régulière, donc si c'est quelque chose que vous voulez faire, certainement revenir et revoir ceci. Pour l'amour du temps, je vais briser le reste de tout ça. faisant défiler vers le bas, vous avez le résumé des différentes propriétés auxquelles vous pouvez accéder avec la liste. Passons aux tables. Tables est quelque chose qui peut être grandement amélioré avec CSS tout à fait évidemment. Allons faire défiler et regarder notre table ici, c'est très vieille école. Les tables peuvent certainement faire avec un meilleur look avec CSS, et comme vous pouvez le voir ici, c'est un peu un exemple de la vieille école qui est similaire au nôtre. Nous définissons la bordure en HTML, donc si vous revenez à notre document et trouvez notre table ici, nous avons pu mettre un attribut sur cet élément par le nom de la bordure et lui donner une valeur d'un. Si nous devions changer cette valeur à deux, revenez en arrière, alors il devient légèrement plus grand, mais nous n'avons pas besoin de donner la bordure sur l'élément réel en utilisant cet attribut, nous pouvons le faire en CSS. Ce que je vais faire est d'appuyer sur Enregistrer, maintenant il n'y a pas de frontières, mais je vais les ajouter en utilisant CSS. Ce que vous devez faire est de revenir ici, et nous devons spécifier des bordures sur la table, les en-têtes de table et les cellules de tableau. Je vais juste prendre tout ça un code. En fait, par souci de cohérence, je vais mettre tous mes sélecteurs d'éléments en haut. Je vais appuyer sur « Sauver » dessus, revenir ici et on a la même chose. La différence est que nous avons beaucoup plus de flexibilité dans CSS et que nous pouvons copier ce style sur plusieurs tables. Pour revenir à la référence ici, une chose qui est vieille école dans ce design est qu'il a deux lignes pour la frontière. Souvent, nous voulons juste une seule bordure, donc nous pouvons définir cette bordure à l'effondrement en mettant ce style sur toute la table elle-même. Je vais juste mettre ça au-dessus de ce que nous avons là, et maintenant nous avons peut-être un comportement plus attendu de notre table. Vous pouvez également définir la bordure autour de la table par lui-même, donc c'est la différence entre définir la bordure sur la table et les cellules, la définir sur la table va la placer autour de la table entière, puis définir une bordure sur les cellules est autour des cellules. En descendant, nous pouvons définir la table pour avoir une pleine largeur, et nous pouvons définir les en-têtes pour avoir une hauteur fixe de 50 pixels. Ce que je vais faire, c'est parcourir ce document et ensuite nous pouvons appliquer certains de ceux-ci à notre table parce qu'il a besoin d'un meilleur style à coup sûr. En descendant à l'alignement horizontal, nous pouvons aligner le texte dans les cellules vers la gauche, la droite ou le milieu. Nous pouvons également modifier l'alignement vertical. Dans ce cas, nous avons défini le contenu des cellules pour être en bas. Nous pouvons également le mettre en place en haut. Nous pouvons créer un remplissage, entre le contenu et les bords de la cellule. Nous pouvons également créer des bordures basées sur le bas, haut, la gauche et la droite. C' est un joli design, nous avons juste des bordures en bas pour cette jolie petite liste. Nous pouvons également changer le style d'une ligne en utilisant cette pseudo-classe que nous avons vu auparavant lorsque nous travaillions avec des liens, appelant hover. Lorsque la souris survolera ces différentes lignes, nous allons changer la couleur de fond pour cette couleur particulière. Peut faire des tables rayées en utilisant une autre pseudo-classe appelée, nth-child. C' est un peu plus avancé, mais fondamentalement ce qu'il fait est chaque ligne pair que nous lui donnons une couleur d'arrière-plan de ceci. Bien sûr, un commun serait de changer la couleur de lignes particulières et de cellules particulières, et alors vous pouvez obtenir un beau design comme celui-ci. La partie la plus délicate avec les tables, je suppose, c'est de le rendre réactif. Si nous regardons cet exemple, et que nous changeons notre taille de fenêtre, nous pouvons voir que la table répond, mais même elle arrive à un certain point où vous devez toujours faire défiler vers la gauche et la droite pour voir tous les contenu. C' est le problème souvent avec les tables et pourquoi vous ne devriez pas les utiliser pour structurer votre page Web, comme nous l'avons mentionné précédemment, c'est parce que ces tables ont un élément de mise en page fixe, mais bien sûr, il y a façons de les rendre réactifs, et nous allons en parler plus à ce sujet peut-être dans les vidéos sur le design responsive. Voici quelques-unes de nos options ici pour une table CSS. Ce que je vais faire maintenant, ramener tout ça à la maison, c'est coiffer notre table ici. En utilisant certaines des choses que nous avons apprises dans ce document particulier, ce que je vais faire, c'est que je veux aligner horizontalement et verticalement le contenu de ma table. Je vais ouvrir mon éditeur de code et mon document, et ce que je vais faire est de créer un style ciblant mes cellules d'en-tête et mes cellules régulières, et je vais donner un alignement vertical de milieu et un alignement horizontal de centre. Maintenant, il est assis juste contre la frontière, donc nous pourrions ne pas le voir. Ce que je vais faire aussi bien que lui donner un peu de rembourrage. Je vais faire 20 pixels de rembourrage. Voyons juste à quoi ça ressemble maintenant. Là, vous pouvez voir avec un peu de rembourrage et un peu d'alignement, vous pouvez voir que nous avons un peu plus agréable d'une table. Je voudrais faire de la ligne d'en-tête un style différent, donc je vais cibler les styles d'en-tête séparément, et je vais lui donner une couleur d'arrière-plan de, laissez-moi voir, vert clair. Appuyez sur « Enregistrer » sur cela et maintenant vous pouvez voir que la rangée supérieure est un vert clair. Que pouvons-nous faire d'autre ici ? On a fait du rembourrage. On a fait rayé. Peut-être que nous voulons utiliser celui-ci ici et nous pouvons faire, je suppose que nous n'avons pas autant de lignes ici, mais si nous devions commencer une nouvelle ligne, nous pourrions mettre ce style dans chaque enfant pair aurait une couleur de fond de ce couleur particulière. Si nous devons dupliquer cette ligne juste à titre d'exemple, copiez et collez cela, vous verrez que le premier est gris en utilisant couleur d'arrière-plan que nous avons spécifiée pour même les enfants, et celui-ci n'est pas parce que ce n'est pas un enfant pair, donc si nous mettons un troisième, vous verrez qu'il alterne entre les deux. Dupliquons encore ça, et vous voyez là. Il y a beaucoup d'options de style disponibles dans les tables, certainement, je vous encourage à aller expérimenter avec eux. Nous allons utiliser des frameworks CSS qui font beaucoup de cela pour nous dans une future vidéo, donc vous n'avez pas besoin de tout savoir sur les tables de style, mais c'est aussi une bonne chose à savoir. Cela couvre essentiellement les liens de style, les tableaux, les listes et les images. J' admets que nous nous sommes précipités un peu parce qu'il y a juste autant de contenu à couvrir, mais bien sûr, vous pouvez toujours revenir à ces pages pour référence et la meilleure façon d'apprendre est de faire, donc mettez définitivement un tableau dans votre document, puis commencez à googler si vous ne savez pas comment faire quelque chose. Cette référence est assez bonne et cela couvre beaucoup des options que vous voudriez faire, mais peut-être que vous voudriez faire quelque chose de plus avec votre table. Il y a tellement d'options disponibles en CSS et nous pourrions y dépenser éternellement, mais il y a beaucoup plus de contenu à couvrir. Dans la vidéo suivante, nous allons couvrir les propriétés d'affichage. Je vous ai montré un peu d'affichage dans une vidéo précédente, mais nous allons aller plus loin dans ces propriétés de mise en page, très fondamentales dans CSS, mais un peu difficile donc j'ai hâte de vous voir sur la prochaine vidéo. 23. Disposition CSS - Propriété d'affichage: Dans cette vidéo, nous allons couvrir une mise en page CSS et nous allons nous concentrer sur la propriété d'affichage dans CSS. Je veux dire, ce n'est qu'une propriété, mais c'est si important et fondamental en CSS et peut-être un peu difficile à comprendre. On va creuser tout de suite. C' est le prochain lien dans notre menu ici. Comme vous le voyez, la propriété display est la propriété CSS la plus importante pour contrôler la mise en page. La propriété display spécifie si et comment un élément est affiché. Chaque élément HTML a une valeur d'affichage par défaut en fonction du type d'élément. La valeur d'affichage par défaut pour la plupart des éléments est block ou in-line. Rappelez-vous quand nous avions ces éléments de niveau bloc, donc cette div ici, sont des éléments de niveau bloc et par défaut ils ont une valeur d'affichage de bloc. Mais ici avec une boîte de classe, nous avons pu changer ce div particulier en un affichage de bloc en ligne. C' était un petit aperçu de ce que nous allons couvrir dans cette vidéo. Si nous faisons défiler vers le bas pour en savoir plus sur les éléments de niveau bloc, un élément de niveau bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible. Rappelez-vous quand nous avions ce bloc ici, si nous supprimons le bloc inline-block, je vais juste le faire en faisant un commentaire afin qu'il ne s'applique plus. Je rafraîchis ça. C' est maintenant un élément de niveau bloc, donc il va juste prendre toute la largeur de la page. Ici vous pouvez voir quelques exemples d'éléments de niveau bloc. Il s'agit essentiellement d'un bloc d'affichage par défaut, donc div, vous avez les balises d'en-tête, forme p, l'en-tête, le pied de page et la section. Il y a aussi des éléments en ligne qui s'affichent en ligne par défaut. Un élément en ligne ne démarre pas sur une nouvelle ligne et ne prend que la largeur nécessaire. Un exemple commun de ceci est l'élément span, que nous avons utilisé, pas sûr si nous l'avons encore dans notre projet. Si je vais chercher span. Oui, nous le faisons toujours. Rappelez-vous ici, nous avons changé un mot particulier dans notre paragraphe et l'avons fait 50 pour cent plus grand que les autres mots. Si nous entrons ici, ce changement se fera en ligne. Ce morceau de contenu, ce mot n'est pas divisé en une nouvelle ligne ou prendre toute la largeur de la page comme un élément de bloc le ferait. C' est fait en ligne. Ce sont les deux types principaux différents. L' autre que nous pouvons utiliser est display : none. Si nous voulions que cela ne s'affiche pas du tout, nous pourrions entrer et faire « display : none ». Si j'économise sur cela, il ne s'affichera pas. Mais si nous inspectons sur notre page Web et descendons, nous pouvons réellement voir que la div est toujours là. Il n'est tout simplement pas affiché et nous pouvons réellement activer et désactiver cette propriété d'affichage. Voilà, tu y vas. Je coche cette case et elle s'affiche. Maintenant, pourquoi voudriez-vous avoir un élément sur la page mais ne pas afficher ? Eh bien, nous pouvons réellement basculer la propriété d'affichage comme nous le faisons ici mais en utilisant JavaScript. C' est un concept plus avancé et qui passe en JavaScript, nous ne traitons pas dans ce cours. Mais sachez simplement que si vous voyez un élément qui est affiché : aucun, les chances sont, il y aura quelque chose dans le code qui permettra à cet élément d'apparaître dans certaines situations. Avoir affichage : aucun sur un élément lorsque la page se charge lui permet de démarrer caché et ensuite nous pouvons l'afficher plus tard. C' est l'affichage : aucun. Je vais me rafraîchir pour supprimer ces modifications et me débarrasser de notre affichage : aucun ici, sauf cela et nous revenons là où nous étions avant. Pour revenir à la référence, nous pouvons remplacer la valeur d'affichage par défaut en utilisant cette propriété appelée display, qui est exactement ce que nous avons fait ici en faisant l'affichage de la boîte en ligne plutôt que bloc d'affichage. Retournez à la référence. Nous pouvons réellement changer le comportement par défaut d'un élément en ligne en bloc, ce que nous pouvons faire dans les deux sens ; nous pouvons changer un élément de niveau bloc pour afficher en ligne, mais nous pouvons également changer un élément en ligne pour afficher dans un bloc. Ici, nous pouvons faire cette étendue et devenir un élément de niveau bloc. Ce que cela fait est de créer un saut de ligne. Si je devais supprimer ce style, puis l'exécuter, il devient un élément en ligne et puis si je dois le remettre, il va les diviser parce que rappelez-vous au niveau du bloc élément prend toute la largeur de la page. Si nous faisons défiler vers le bas, nous verrons un petit point de confusion avec l'affichage : aucun. Il existe une autre propriété appelée visibilité. Quelle est la différence entre l'affichage : none et la visibilité : caché ? Eh bien, la grande différence est que l'élément prendra toujours la même place qu'avant. Il sera caché, mais cela affectera toujours la mise en page. Essayons ça maintenant. Rendons cette image invisible, donc pas d'affichage : nul mais invisible. Visibilité ; nous pouvons définir sur invisible. Je pense que caché est le terme non invisible. Je vais mettre ça là, visibilité : cachée. Vous verrez qu'il occupe toujours l'espace sur la page qu'il allait voir s'il était visible, mais maintenant il est juste caché. Contraster cela avec l'affichage : none, si j'ai affiché : none, soudainement l'élément ne s'affiche pas et il ne prend pas de place sur la page non plus. Aucun de ces deux ne sont pratiques, donc je vais m'en débarrasser, appuyer sur « Enregistrer » et revenir à ce qu'il était avant. Cool. Une chose qui n'était pas vraiment couverte dans cette référence particulière est display inline-block. Comme vous le voyez, nous l'avons ici, mais sur W3Schools est en fait une leçon séparée. Je vais cliquer sur display inline-block ici. Apprenons un peu plus à ce sujet. Ici, nous pouvons en savoir plus sur l'affichage inline-block. Il y a quelques différences que vous pouvez lire ici, mais la principale différence est que si nous voulions afficher une liste d'éléments horizontalement au lieu de verticalement, nous devrions utiliser inline-block. Par exemple, dans le cas de la création de liens de navigation comme ici, nous aurions besoin d'inline-block parce que le comportement par défaut des éléments HTML est de simplement empiler les uns sur les autres comme nous l'avons démontré auparavant quand nous n'avions même pas obtenu ce CSS. Je vais cliquer sur « Essayez-le Yourself » ici. Vous pouvez voir qu'ils affichent inline-block. Si était de supprimer ce style et exécuter, vous verrez qu'ils s'empilent les uns sur les autres. C' est le comportement par défaut, mais si nous avons display inline-block ici, ils s'afficheront dans une ligne. Inline-block est un très commun que vous verrez en particulier avec les liens de navigation comme dans cet exemple. Si vous voulez en savoir plus sur les différences spécifiques, vous pouvez lire à ce sujet ici, mais vous verrez inline-block venir beaucoup. Je me méfie un peu de cette vidéo qui traîne, donc je vais y mettre fin. C' est un concept très important à comprendre, la propriété d'affichage et c'est essentiellement un moyen que nous pouvons avoir des éléments d'affichage au niveau du bloc, donc empilés l'un après l'autre en ligne ou une combinaison qui tire parti des deux. C' est la propriété display. Dans la vidéo suivante, nous allons passer en revue le positionnement. Je te verrai dans la prochaine. 24. Propriété de positionnement CSS: Dans cette vidéo, nous allons passer en revue la propriété position dans CSS. Ceci est un roman, implique tout à fait la propriété en CSS, donc il mérite sa propre leçon. Je vais aller à la position CSS sur W3Schools. Ici, nous pouvons voir les cinq valeurs de position différentes : statique, relative, fixe, absolue et collante. Donc, en utilisant certains d'entre eux, vous êtes capable de positionner des éléments absolument n'importe où sur la page à un endroit spécifique. Vous pouvez les positionner en haut, en bas à gauche et à droite d'éléments particuliers par rapport à eux, mais cela ne fonctionnera pas moins que vous n'utilisiez la propriété position et que vous définissiez cela en premier. Donc, couvrir le premier est la position statique. Les éléments HTML sont en fait statiques par défaut. Donc, si vous mettez dans une propriété de top, bottom, left et right, cela ne fonctionnera pas réellement, il ne sera pas affecté du tout par ces propriétés. Comme il est dit ici, un élément avec position statique n'est pas positionné de manière spéciale, il est toujours positionné en fonction du flux normal de la page. Donc, c'est juste le comportement par défaut. Faire défiler vers le bas la suivante est la position relative. Un élément avec position relative est positionné par rapport à sa position normale. Maintenant, vous pouvez avec la position relative aux propriétés définies de haut, droit, bas et gauche pour positionner relativement un élément ajusté à l'écart de sa position normale. Maintenant, je sais que cela n'a probablement aucun sens, juste en parler, alors jetons un coup d'oeil à un exemple réel. Je vais cliquer sur « Essayez-le vous-même ». Vous pouvez voir ici, si nous devions supprimer la position relative, ce qui nous permet de le positionner pour commencer et nous avons déplacé la propriété gauche et cliquez sur Exécuter. moment, c'est le comportement par défaut de cette div particulière et vous pouvez voir la bordure de la div parce que nous lui avons donné une bordure ici. Si je mets en position relative, je suis maintenant capable de faire apparaître cet élément 30 pixels à gauche de l'endroit où il allait être positionné à l'origine. Donc on peut en ajouter un autre ici et on peut en faire le top 50. Maintenant, il est de 30 pixels à gauche et de 50 pixels à partir du haut dans une position différente de l'endroit où il serait autrement. On peut faire le contraire ici. Nous pouvons utiliser juste à la place, et nous pouvons le positionner 100 pixels à droite de l'endroit où il était censé être. Maintenant, vous pouvez voir qu'il va maintenant à l'extérieur de la limite gauche de la fenêtre. Donc pas très pratique, mais parfois vous pourriez avoir besoin de le faire. Je vais fermer cet exemple et le précédent et aussi ces icônes parce que nous n'en avons plus besoin. Une autre option sur la position est fixe. Un élément avec une position fixe est positionné par rapport à la fenêtre, ce qui signifie qu'il restera toujours au même endroit même si la page est défilée. Donc, chaque fois que vous voyez ces menus ou ces choses comme celle-ci qui collent sur une partie particulière de la fenêtre et ne bougent jamais, c'est stylé avec la position fixe. Jetons juste un coup d'oeil à notre exemple. Nous ne pouvons pas faire défiler ici car il n'y a pas assez de contenu, mais ici vous pouvez voir un élément qui est fixé en bas à droite. Il est probablement préférable de regarder sur cette page parce que nous pouvons réellement voir que nous faisons défiler, qui semble s'asseoir au-dessus du contenu car il est fixé peu importe où vous vous déplacez dans le document. Ainsi, vous pouvez définir la position sur fixe. Comme vous le voyez ici, c'est 0 pixels du bas et 0 pixels de la droite, ce qui signifie qu'il est dans le coin inférieur droit. Nous avons défini une largeur et une bordure pour lui donner ce style et cela va rester là sauf si nous devions changer cette propriété positionnée. descendant, nous pouvons regarder la position absolue et la position absolue est positionnée par rapport à l'ancêtre positionné le plus proche au lieu de par rapport à la fenêtre comme fixe. Donc, cela n'avait probablement aucun sens, mais regardons un exemple ici. Je vais cliquer sur « Essayez-le Yourself » et vous pouvez voir ici que nous avons une combinaison ici. L' un est un div qui est relatif, M1 est un div qui est positionné absolument. Donc, en regardant le div absolu ici, si nous devions supprimer cet attribut ou cette propriété et l'exécuter, il revient au comportement par défaut du HTML qui est des éléments empilés les uns sur les autres. Mais si nous voulons lui donner une position absolue, nous pouvons choisir sa position dans cette boîte. Donc maintenant, il va rester 80 pixels en haut de cette boîte et 0 pixels à droite de cette boîte. Donc vous pouvez voir que c'est juste contre le bord ici. C' est parce que nous sommes sur 0 ici et c'est 80 pixels du haut. Nous pouvons toujours changer cela, nous pouvons le faire venir un peu de droite, donc je peux lui donner 10 pixels là. Soudain, il est un peu sorti du bord. Je peux aussi au lieu de droite, affecter la gauche et le faire sortir du bord autant qu'il était avant, mais sur le côté gauche. Voilà, tu y vas. C'est la position absolue. La suivante est la position collante et elle est basée sur la position de défilement des utilisateurs. Donc, il bascule réellement entre relatif et fixe en fonction la position de défilement et est positionné relatif jusqu'à ce qu'une position de décalage donnée soit atteinte dans la fenêtre. Encore une fois, sonne probablement comme du charabia technique, mais pour vous donner un exemple, cette div particulière se déplace réellement lorsque je fais défiler, mais une fois que je l'ai frappé, il devient soudainement collant. Donc encore une fois, je vais aller à Essayer Yourself ici et vous pouvez voir que nous faisons défiler, il reste là-haut. Alors que le comportement par défaut, si nous devions supprimer la position collante, serait de rester avec la page mais si je mets collant là-dedans, une fois qu'il aura atteint cette position, il ira en position supérieure 0. Donc, il va coller au sommet. Je peux changer cela pour quand il va fixe et peut-être la position à 10 pixels du haut. Jetons un coup d'oeil à ça. Maintenant, vous pouvez voir qu'il y a un écart de 10 pixels entre le haut de la fenêtre ou le cadre ici et la div réelle. Donc, en revenant en arrière, nous pouvons également avoir des éléments qui se chevauchent en utilisant absolu. Alors jetons un coup d'oeil à ça. Nous avons une image et un titre qui se chevauchent et nous sommes en mesure d'y parvenir en ayant l'image absolue. Encore une fois, si nous supprimons la position absolue, c'est à quoi cela ressemblerait. L' image serait placée sous le titre, comme le comportement par défaut en HTML. En passant, nous pouvons voir comment nous pouvons positionner le texte sur une image et il y a beaucoup d'exemples ici. Vous pouvez vous tester avec des exercices. C' est probablement une autre bonne chose à mentionner. Mais vous pouvez voir le résumé des propriétés de positionnement ici. Je sais que c'est beaucoup à couvrir et peut ne pas avoir un sens parfait en ce moment, mais encore une fois, fur et à mesure que vous commencez à développer en utilisant la propriété position, vous commencerez à mieux comprendre les différences. Mais je suppose que les exemples vraiment communs que vous verrez avec l'utilisation de la propriété position est ; numéro 1, cette position fixe, comment cet élément reste avec vous indépendamment de l'endroit où vous faites défiler. C' est quelque chose que nous pouvons voir ici avec ce menu. Le menu atteint un certain niveau de défilement. Ça reste là-haut et on va vérifier ça maintenant. Examinons, essayons de trouver les éléments et est en fait en train de se passer de relatif à fixe. Donc, ce n'est pas en fait utiliser collant. Mais vous pouvez voir ici la position pendant que nous défilons est fixe et ici est relative. Donc collant et la position fixe sont bons pour créer des menus fixes qui vous suivent pendant que vous faites défiler. Cela pourrait également être corrigé, ou tout simplement dans un cadre différent. Absolu, nous sommes capables de positionner les choses n'importe où sur la page, et relatif, nous sommes capables de pousser différents éléments autour en fonction de la position qu'ils étaient censés être à l'origine. J' espère que cela vous a donné un bon aperçu de la propriété de position. Encore une fois, au fur et à mesure que nous développons davantage, vous commencerez à voir la propriété et l'action de la position et commencerez à l'internaliser davantage. Dans la vidéo suivante, nous allons couvrir le débordement et le flotteur. 25. Débordement et flottement de CSS: Dans cette vidéo, nous allons couvrir le débordement et le flotteur. Cela va finir en parlant des différentes propriétés en CSS, et ensuite nous allons couvrir des choses plus avancées. Plongons juste dans et caisse débordement. La propriété CSS overflow contrôle ce qui arrive au contenu trop volumineux pour s'insérer dans une zone. Comme vous pouvez le voir ici, ce bloc de contenu a probablement seulement une hauteur fixe, mais il a plus de textes que ce qui pourrait réellement entrer dans ce bloc. Nous pouvons contrôler comment le contenu à l'intérieur se comportera en utilisant la propriété de débordement CSS. La propriété overflow spécifie essentiellement s'il faut découper le contenu ou ajouter des barres de défilement lorsque le contenu d'un élément est trop grand pour s'adapter à une zone spécifiée. Le premier que vous verrez est le débordement visible. Cela signifie que le contenu de débordement n'est pas découpé et qu'il est rendu en dehors de la boîte de l'élément. Comme vous pouvez le voir ici, nous avons un div d'une largeur et d'une hauteur fixes, mais nous avons simplement trop de texte pour réellement tenir dans cette boîte. Une façon de résoudre cela est d'avoir la taille de la police plus petite, mais peut-être que nous avions besoin de cette taille de police particulière ou nous n'avons pas le contrôle de celle-ci, donc une chose que nous pouvons faire est de permettre le dépassement d'être visible. C' est en fait le comportement par défaut, et si nous cliquons sur, essayez-le, nous pouvons effectivement supprimer le dépassement visible clic « Exécuter », et nous verrons exactement la même chose. Vous n'allez probablement pas utiliser overflow visible étant donné que c'est le comportement par défaut. Une chose que vous pourriez utiliser est le débordement caché. Avec le débordement caché, c'est évident ce qu'il fait, il va juste cacher tout le débordement. Il va en fait découper le reste du contenu et s'assurer que le contenu respecte les dimensions que nous avons spécifiées. Si nous cliquons sur « Essayez-le Yourself », nous verrons que nous avons spécifié que nous voulons que la div soit de 200 pixels de large et de 50 pixels de haut, et s'il y a des textes qui vont le dépasser, nous allons juste le découper. Si nous devions supprimer cela et l'exécuter, il reviendrait à débordement visible. Ensuite, il y a aussi le défilement de débordement, ce qui est ce que nous avons vu ici, il nous permet de garder la taille de la boîte, mais juste avoir une barre de défilement apparaître afin que nous puissions faire défiler le contenu de cette div particulière. La suivante est le débordement automatique, et il est similaire au défilement, mais il ajoute des barres de défilement uniquement lorsque nécessaire. Dans ce cas, c'est nécessaire, mais si nous allons dans Essayer Yourself et que nous avons rendu cela un peu plus grand, alors nous n'avons pas vraiment besoin des barres de défilement. Retour au document, nous pouvons affecter le débordement sur des axes particuliers ainsi que partout où nous le voulons sur horizontal ou verticalement. Overflow x spécifiera ce qu'il faut faire si les bords gauche et droit du contenu et le débordement y spécifient ce qu'il faut faire avec les bords supérieurs et inférieurs du contenu. C' est un débordement, fondamentalement pas trop compliqué. Si vous avez du contenu, il déborde en dehors d'un div particulier, vous aurez juste à décider ce que vous voulez faire si elle. Ce n'est probablement pas idéal, peut-être que vous voulez le cacher ou peut-être que vous voulez le faire défiler. Sinon, vous pourriez avoir une situation dans laquelle vous modifiez la taille de la police de sorte qu'elle s'adapte réellement à différentes tailles d'écran, mais ce sont les différentes options disponibles en débordement. La prochaine que je voulais couvrir dans cette vidéo est float. Flotteur est très commun. Vous verrez en CSS, il y a deux propriétés ici. L' un est flottant, et l'autre est clair. La propriété de flux est utilisée pour le positionnement et la mise en page sur une page Web, et la propriété de flux peut avoir l'une des valeurs suivantes. Gauche, si flotte à gauche, droite, il flotte à droite, aucun, il ne flotte tout simplement pas et hérite signifie qu'il héritera de la valeur flottante de son parent. Dans son utilisation la plus simple, la propriété float peut être utilisée pour envelopper du texte autour des images. Si nous regardons cela et que nous faisons flotter l'image à droite, elle flottera à droite du texte. C' est l'avantage de float, il s'enroulera autour de votre contenu existant. Essayons nous-mêmes. Vous pouvez voir ici que nous avons l'image flottante droite. Si je devais supprimer cela, nous lançons cela, nous verrons que l'image apparaît juste où elle est positionnée dans le HTML. Vous pouvez voir ce paragraphe, qui se terminera, cette image va commencer, et il formera le début de ce paragraphe. Si on retourne et qu'on le fait flotter vers la droite, et ça va tourner autour du texte. Nous pouvons aussi le flotter vers la gauche, comme tel, et il va flotter vers la gauche. Nous pouvons également ajouter de la marge pour le rendre un peu plus agréable, donc cela ne va pas directement contre le texte, donc cela nous permet de créer une mise en page plus fluide, ce qui est vraiment important. Nous avons vu float à gauche, aucun flotteur ne fera que le faire se produire comme avant, avec l'image apparaissant juste en ligne avec le texte, et ce que nous avons est la propriété claire. La propriété clear spécifie quels éléments peuvent flotter à côté de l'élément effacé et de quel côté. La propriété effacée peut avoir à peu près les mêmes valeurs, sauf qu'elle a aussi un code, buff. façon la plus courante d'utiliser la propriété clear est une fois que vous avez utilisé propriété float sur un élément et que vous voulez effacer le flotteur. Voici un exemple ici qui, espérons-le, partagera avec nous comment cela fonctionne. Comme vous pouvez le voir, avoir flottant peut causer certains problèmes. Vous pouvez voir ici que les deux divis sont en concurrence pour l'espace, alors qu'ici ils sont effacés, c'est dû à la propriété claire. Je pense que la meilleure façon pour vous de comprendre clairement est de replonger dans notre projet et de le démontrer. Prenons juste notre image ici, et faisons 25 pour cent pour qu'elle ne prenne pas autant de place, et ensuite je vais mettre l'image juste dans le paragraphe. Je vais saisir ceci et le mettre dans ce premier paragraphe ici. En ce moment, il va juste s'afficher en ligne avec le texte, mais si je lui donne une propriété de flotteurs à gauche et enregistrer, alors il va flotter avec le contenu sur la page. Nous allons lui donner une marge vers la droite et le bas qu'il ne vienne pas directement contre ce texte, et ensuite vous avez cette image. Maintenant, en termes de propriété claire, il est principalement utilisé pour effacer la fonctionnalité flottante lorsque vous avez plusieurs choses qui flottent autour. Je vais copier l'image et la mettre côte à côte ici. Nous avons deux images flottantes et peut-être que nous voulons que la deuxième image soit claire, donc je vais la mettre en ligne ici. Je cible juste le seul élément, et je vais mettre en clair les deux. Maintenant, vous pouvez voir que ces empilement sur l'autre parce qu' il efface tous les éléments flottants à sa gauche et à sa droite. Si nous voulions effacer à gauche, il aurait probablement le même comportement, si nous avons créé à droite, vous verrez qu'il est de retour à l'endroit où nous étions avant parce qu'il n'y a pas d'éléments flottants à sa droite. Juste pour éclaircir cela à nouveau, pas de jeu de mots prévu, je vais me débarrasser de ce style, et regardons le comportement par défaut. Ce que nous avons, c'est deux images qui flottent à gauche, mais peut-être que nous voulons que cela arrive sur une nouvelle ligne. Nous devons l'effacer à gauche de son élément flottant afin que nous mettions clairement à gauche ou clairement les deux fonctionneraient également dans ce cas. Là, vous l'avez. Si nous devions donner à cela un flotteur de droite, nous pouvons à la fois dégager à gauche et flotter à droite. Ensuite, vous avez quelques variations avec le flottement des images. C' est ainsi que vous pouvez obtenir des éléments flottants pour apparaître les uns sur les autres ou sur de nouvelles lignes plutôt que de les avoir à côté de l'autre, même s'ils ont la même propriété flottante de gauche ou de droite. Pour revenir au document, il y a une autre chose à couvrir ici, et c'est le Clear-Fix Hack. Que se passe-t-il si un élément est plus grand que l'élément qui le contient et qu'il est flotté ? Ce qui va se passer, c'est qu'il va déborder à l'extérieur du conteneur comme ça. Une chose que nous pouvons faire est d'utiliser l'ordre de débordement pour résoudre ce problème et qui se lie bien dans ce que nous avons couvert juste avant avec débordement. Pour le démontrer, je vais revenir dans notre projet. Je vais faire apparaître la page, aller dans notre éditeur de code. Je vais faire ce plein écran parce que nous avons beaucoup plus de contenu sur la page maintenant. La première chose que je vais devoir faire est de déplacer cette balise d'image dans le paragraphe qui est à côté de. Comme vous pouvez le voir ici, il semble que cette image soit probablement plus dans ce paragraphe que ce paragraphe, mais en fait elle est assise juste ici. Je vais le déplacer vers le paragraphe, appuyez sur « Enregistrer », et maintenant vous pouvez voir que le texte enveloppe un peu plus autour d'elle mais ce que je vais faire est de se débarrasser de ces hauteurs et largeurs fixes que j'ai définies comme attributs HTML et mis dans une hauteur de 200 pixels afin qu'il soit plus grand que le contenu de la balise de paragraphe. Alors tu y vas, tu peux voir qu'il s'étire. Pour voir les contraintes réelles de cette balise de paragraphe, je vais lui donner une bordure afin que nous puissions réellement voir les bords de cet élément. Je vais lui donner une solide bordure noire, sauf ça. Maintenant, vous pouvez voir l'exemple que nous avons eu sur les écoles W-3. L' image est située en dehors des contraintes de l'élément parent. Je vais revenir ici, et ce que je peux faire est comme dans l'exemple, définir ce paragraphe sur l'ordre de débordement. Sauve ça. Et maintenant soudainement le contenu de cette balise de paragraphe et maintenant conforme à cette balise d'image. Encore une fois, la différence est entre ceci et ceci. C' est une opportunité là lorsque vous utilisez clear et float pour résoudre ce petit problème que vous pourriez rencontrer. Dans notre cas, l'image ne mesure pas en fait 200 pixels de hauteur, donc elle n'a pas besoin d'être aussi grande, mais juste au cas où vous auriez cette option disponible et que vous pouvez voir ici même à une hauteur plus petite, elle déborde toujours. Donc, nous pouvons aller à nouveau débordement automatique et voir que maintenant nous pouvons l'avoir pour qu'il fasse toujours partie de ces éléments particuliers qui dans ce cas est une balise de paragraphe. Cela couvre le débordement et le flotteur, il y a d'autres choses ici que vous pouvez en apprendre plus sur et plus sur la façon dont le flotteur est utilisé dans le monde réel. Je vais juste jeter sur cela et vous emmener vers toutes les propriétés de vol CSS pour référence, et dans la vidéo suivante, nous allons couvrir plus de sélecteurs CSS avant de terminer cette section CSS et de vous obtenir a commencé avec implémentation de Bootstrap et vous faire démarrer sur votre projet de classe. Nous arrivons à la fin maintenant, moments très excitants, j'espère vous voir sur la prochaine vidéo. 26. Syntaxe avancée et sélecteurs: Dans cette vidéo, nous allons couvrir les sélecteurs avancés. Si vous vous souvenez de retour dans l'épisode sur Syntaxe et Sélecteurs, nous avons couvert certains de base, y compris l'ID d'élément et le sélecteur de classe. Maintenant, j'ai quelques onglets ouverts de w3schools afin que nous puissions aller dans certaines des options de sélection les plus avancées. Le premier est CSS Combinators et vous pouvez le trouver dans le menu ici. Un combinateur CSS est quelque chose qui explique la relation entre les sélecteurs. Il y a quatre différents que nous pouvons utiliser. La première est un sélecteur de descendant, un sélecteur d'enfant et un sélecteur de frère adjacent et un sélecteur de frère général. Cela n'a probablement pas de sens tant qu'on n'y va pas et qu'on les voit en action. Le plus commun est un sélecteur de Descendant. Le sélecteur Descendant correspond à tous les éléments qui sont descendants d'un élément spécifique. L' exemple suivant que nous voyons ici sélectionnera tous, p, éléments à l'intérieur, div, éléments. Maintenant, c'est assez large, mais essayons de donner un exemple dans notre projet actuel. J' ai le projet ici dans notre navigateur, et j'ai le code à mon droit ici. Disons que par exemple, nous avons ces paragraphes, et à l'intérieur du paragraphe, nous avons des images. Ce que nous pouvons faire est de sélectionner toutes les images dans les paragraphes en insérant une règle comme celle-ci. Commencez par p, puis nous mettons un espace et nous mettons l'image. Maintenant, chaque règle que nous mettons ici sera appliquée aux images qui sont dans p. Elle couvre tous les descendants, même si nous avions un p et puis à l'intérieur que nous avions un div, puis à l'intérieur que nous avions une image, elle serait toujours sélectionnée. Toute image avec un parent, que ce soit immédiat ou non, n'importe quelle image avec un parent de p. Flottons à droite. Je vais sauver ça. Je vais déplacer le code vers la droite. Ouvrez ceci et vous verrez que nos images flottent vers la droite. Maintenant, vous pensez peut-être que nous avons flottant à gauche affectant déjà toutes les images, mais souvenez-vous de la spécificité et de la hiérarchie. Nous sommes plus précis ici pour dire que toute image dans un paragraphe, flottera à droite. C' est la spécificité qui travaille pour nous là-bas. Si vous n'êtes pas clair sur ce que je veux dire par là, peut-être revenir en arrière et revoir la leçon sur la hiérarchie. Mais voici une façon d'utiliser le sélecteur Descendant en utilisant deux sélecteurs d'éléments. Nous pouvons également combiner des sélecteurs d'éléments et des sélecteurs d'ID et des sélecteurs div. Si je fais défiler vers le bas pour essayer de trouver un exemple, disons par exemple, que nous voulions sélectionner toutes les dépenses dans n'importe quel élément qui avait div spécial comme classe. Nous pourrions le faire en allant dans notre feuille de style ici et sous div spéciale, je vais créer un sélecteur de Descendant. Je vais avoir div spécial comme première partie du sélecteur, et puis je vais mettre span. Maintenant, cela sélectionne chaque plage dans un élément parent qui a cette classe. Que pouvons-nous faire avec ces travées ? Changeons peut-être la couleur. On va changer la couleur en vert. Maintenant, chaque travée dans un élément parent qui a div spécial, dans ce cas, ce seront ces divs juste ici et nous devrions commencer à voir la span changer en vert. Voilà, tu y vas. Si nous devions mettre cela dans cette div particulière sans la classe dessus, appuyez sur Enregistrer et regardez cela. Nous verrons que ce mannequin de texte n'est pas vert car il n'a pas d'élément parent qui a cette classe dessus. Si vous voyez ici, nous avons une travée, si vous allez à son parent, il a une classe de div spéciale. Si vous allez ici et regardez son parent, il n'a pas une classe de div spéciale. C' est quelques façons que nous pouvons créer une classe, puis cibler des éléments dans l'élément qui a cette classe. Continuons, nous avons le sélecteur d'enfant. Le sélecteur enfant est assez similaire au sélecteur Descendant, sauf qu'il sélectionne tous les enfants immédiats d'un élément spécifié. Rappelez-vous que j'ai dit ici que cela va sélectionner n'importe quelle image qui a un parent de p et qu'il n'a pas besoin d'être le parent immédiat, il peut être plus haut de la chaîne. Pour revenir à notre feuille de style, nous n'avons pas vraiment d'exemple clair, mais ce que je vais vous montrer ici, c'est que je vais mettre en place une autre section. Prenons un div ici, puis à l'intérieur de ce div, nous aurons un autre div et puis à l'intérieur de ce div nous aurons une image de src, photo point jpg. Maintenant, nous avons une image qui a un parent et un parent immédiat de div, puis un autre parent plus haut de la chaîne. Ce que nous pourrions faire pour cibler celui-ci en utilisant un sélecteur de Descendant et cela nous permettra de voir la différence entre descendant et enfant est en mettant dans une règle ici, image div. Chaque image qui a un div, en tant que parent, nous devrions lui donner une bordure de deux pixels, vert solide. Maintenant, si nous actualisons la page, ces images n'ont pas de parent de div, mais si nous faisons défiler vers le bas, nous pouvons voir que cette image, qui a un parent de div, apparaît maintenant avec un vert solide de deux pixels frontière. Ici, nous avons notre image dans une boîte, mais c'est, si vous vous souvenez, juste un div avec une image de fond. Par exemple, si je supprimerais cette bordure ici pour ce div particulier, nous n'aurions pas de bordure verte car c'est en fait un élément div avec une image d'arrière-plan, pas un élément d'image réel. Je vais inverser ça et retourner ici. Ce que je vais faire est un peu plus spécifique ici parce que cette image a un parent de div ici, mais aussi un parent de div plus bas de la ligne. Je veux être plus spécifique ici et faire ce div parent au lieu du sélecteur d'élément pour div. Si nous actualisons la page, vous verrez le même résultat. Maintenant, regardons ce qui se passerait si nous utilisions un sélecteur d'enfant. Rappelez-vous que le sélecteur Enfant sélectionne tous les éléments qui sont des enfants immédiats de l'élément spécifié. Je vais retourner à mon éditeur de code et afficher mon document dans le navigateur. Je vais mettre un signe plus important entre ces deux-là. Cela signifie que nous ne voulons cibler que les enfants immédiats. Je vais appuyer sur Enregistrer, puis actualiser la page. Soudain, la frontière a disparu de notre image, et la raison pour laquelle est parce que si nous regardons les enfants immédiats de ce div parent, les seuls enfants immédiats qu'il a, il n'a qu'un enfant et c'est un autre div. Nous ne ciblons plus cette balise d'image car ce n'est pas un enfant immédiat de cette div parent. Si nous allions, par exemple, les empiler, ce que nous pouvons faire en CSS, maintenant cela devrait fonctionner parce que nous ciblons une image qui est contenue par une balise div, qui est contenue par un élément avec un parent de classe div. Nous pouvons également combiner ces différents combinateurs. Je vais remettre ça à ce qu'il était avant. Passons au sélecteur suivant. Le suivant est le sélecteur de frères adjacents. Comme son nom l'indique, le sélecteur de frères adjacents sélectionne tous les éléments qui sont les frères adjacents d'un élément spécifié. Quels moyens adjacents suit immédiatement. Par exemple, l'exemple suivant sélectionnera tous les éléments p placés immédiatement après les éléments div. Plutôt que de le mettre dans notre code, je vais juste exécuter l'exemple ici. ce moment, nous ciblons tous les éléments p qui viennent après un div et nous leur donnons une couleur de fond jaune. Comme vous pouvez le voir ici, nous avons un div avec deux enfants, un est un p et le second est aussi un p. Mais ceux-ci ne viennent pas réellement après un div, ils sont en fait des enfants de cette div donc ils ne sont pas ciblés dans cette règle CSS. Une fois que nous allons ici, ce p vient après cette div, sorte que cela est réellement déclenché par cette règle. Si nous devions changer cela en un sélecteur Enfant, par exemple, soudainement ces enfants apparaissent avec une couleur de fond jaune. C' est juste cibler les enfants immédiats de div. Par exemple, si je voulais mettre un autre type d'élément ici, peut-être une section, et j'ai commencé cette section et à l'intérieur j'avais un paragraphe. Maintenant, je vais diriger ça et voir ce qui se passe. Seul le premier paragraphe aura la couleur d'arrière-plan jaune. C' est parce que ce p n'est plus un enfant immédiat de div, c'est un enfant immédiat de section, et la section est un enfant immédiat de div. Mais ce p n'est pas un enfant immédiat de la div. Si je change cela et me suis débarrassé du sélecteur d'enfant immédiat et que je l'ai changé en un sélecteur de descendant et cliquez sur « Exécuter ». Maintenant, il revient à mettre en évidence ces deux parce que p a un parent de div même si c'est parent immédiat. Je combine trois exemples là-bas. J' espère que cela a du sens pour vous maintenant ou commence à avoir du sens. Encore une fois, à mesure que vous gagnez plus d'expérience avec cela, il commencera à se solidifier un peu plus. Le dernier dans la section des combinateurs CSS est le sélecteur général de frère. Le sélecteur général de frère sélectionne tous les éléments qui sont des frères et sœurs d'un élément spécifié. Les parents et les enfants sont probablement un nouveau concept pour vous dans cette classe. Mais essentiellement, si vous comprenez les parents et les enfants, vous devriez comprendre ce qu'est un frère et une sœur. Ce sont les autres enfants d'un parent en particulier. Plutôt que de créer une nouvelle section dans notre document, je vais simplement cliquer sur « Essayer vous-même ». Comme vous pouvez le voir ici, nous avons un sélecteur général juste ici. Ce que cela nous dit est que, chaque p suivant div sur le même niveau, nous voulons appliquer ce style particulier aussi, qui est background-color-jaune. Une des choses confuses à propos de cette règle particulière est, oui, elle cible les frères et sœurs, mais seulement les frères et sœurs qui viennent après cette première partie du sélecteur, donc dans ce cas la div. Ce paragraphe 1 par exemple, n'est pas sélectionné car il ne vient pas après cette div. Si je devais couper ça et mettre ça ici, ça serait mis en évidence. C' est l'une des petites astuces de ce sélecteur particulier. Mais comme vous pouvez le voir ce deuxième paragraphe, qui est en fait un enfant de cette div n'obtient pas le style de background-couleur-jaune. C' est parce que ce n'est pas un frère, c'est en fait un enfant. Cela couvre ces combinateurs sélecteurs. Bien sûr, j'ai mentionné que ce sont quelques-uns des sélecteurs les plus avancés. Donc je ne m'attends pas à ce que vous les maîtrisiez dans cette vidéo, mais certainement les essayer, expérimenter et vous commencerez à les comprendre beaucoup mieux. Un autre sélecteur avancé est une pseudo-classe. Rappelez-vous que nous avons utilisé un exemple de pseudo-classe. Nous avons utilisé l'état de vol stationnaire sur un lien. Vous pouvez voir ici que c'est le premier exemple. C' est probablement l'exemple le plus commun d'une pseudo-classe. Mais vous pouvez jeter un oeil ici de la syntaxe. Nous avons fondamentalement n'importe quel sélecteur que nous allons avoir de toute façon, mais pour cibler l'état sur ce sélecteur particulier, nous pouvons avoir un deux-points et ensuite mettre la pseudo-classe. Nous avons vu ceux pour les balises de lien plus tôt dans cette classe. Comme vous pouvez le voir ici, ces rôles, pseudo-classes. pseudo-classes viennent le plus souvent sur les liens car il y a différents états aux liens et les liens sont bien sûr un élément commun en HTML. Mais vous pouvez voir quelques exemples ici de la façon dont nous pourrions faire un état de survol sur un div ou un autre élément. C' est probablement l'utilisation la plus courante de pseudo-classes à l'état cible. Mais nous pouvons également l'utiliser pour trouver le premier enfant ou n'importe quel nombre d'enfants à partir d'un élément spécifié. Ici, nous pouvons prendre le premier enfant d'un p, donc il correspondra à n'importe quel élément p qui est le premier enfant de n'importe quel élément et ici, nous pouvons également combiner un sélecteur descendant ou n'importe quel nombre de sélecteurs avec ce pseudo-- classe du premier enfant. Comme vous pouvez le voir, ça devient un peu compliqué maintenant. Nous utilisons certains des sélecteurs de combinaison que nous avons appris juste avant, et maintenant nous le combinons avec une pseudo-classe, sorte que vous pouvez enchaîner un sélecteur assez long en CSS. Vous pouvez également les utiliser dans un ordre différent, sorte que vous pouvez cibler toutes les balises d'icônes dont un parent est le premier enfant d'un autre élément. Vous pouvez faire n'importe quel nombre de combinaisons. Vous pouvez également utiliser la pseudo-classe de lang, avec laquelle je n'ai aucune expérience, donc je vais juste briser dessus. Il y a beaucoup d'exemples de pseudo-classes ici, donc si vous voulez utiliser ceci comme référence. Les principaux sont ceux que vous avez utilisés pour déterminer l'état d'un lien ou déterminer si vous êtes survolé ou non, et les autres communs sont de sélectionner un enfant ou une position d'un enfant. Par exemple, ce nième enfant, cela sélectionnera tous les ps qui sont le deuxième enfant de leurs parents. Vous pouvez cibler un enfant spécifique dans un élément parent. En continuant, nous irons dans des pseudo-éléments. pseudo-éléments sont comme les pseudo-classes acceptent, nous utilisons un autre deux-points. Pour être honnête, je ne me retrouve pas à utiliser autant de pseudo-éléments. Mais quelques choses que nous pouvons faire avec des pseudo-éléments sont de cibler la première ligne d'un paragraphe, et nous pouvons cibler la première lettre d'un mot ou d'un paragraphe. Nous pouvons combiner cela avec des classes comme nous l'avons vu dans la leçon de pseudo-classe, et nous pouvons cibler la première lettre et la première ligne de ps dans le même document CSS. Probablement le pseudo-élément le plus commun est avant ou après. En utilisant avant que nous soyons en mesure d'insérer du contenu avant le contenu réel de l'élément. Dans cet exemple, nous pouvons insérer une image juste avant un élément particulier. Alors voici le contraire, nous pouvons insérer du contenu après le contenu de h1s. Il y a aussi le pseudo-élément de sélection qui correspond la partie de l'élément qui est sélectionné par l'utilisateur. Je n'ai pas utilisé celui-ci avant, mais nous pouvons jeter un oeil à l'exemple ici. Si nous sélectionnons un contenu sur la page, nous pouvons voir que notre sélection est maintenant stylisée à l'aide de ce pseudo-élément. C' est un truc plutôt cool. Je ne savais même pas que tu pouvais faire ça avant de commencer à préparer ce cours. Voici une liste complète des pseudo-éléments et aussi une liste complète des pseudo-classes à utiliser. Enfin, et cela devient une assez grande leçon, alors peut-être que vous pourriez vouloir rafraîchir après cela en revenant en arrière et en vérifiant. Mais le sélecteur final dont je voulais parler est un sélecteur d'attribut. Le sélecteur d'attribut nous permet de sélectionner des éléments avec un attribut spécifique. Ici, si nous avions un attribut et la valeur de la cible égale soulignement vide, nous appliquerions un style à cet élément spécifique qui a cet attribut et cette valeur spécifiques. Cliquez simplement sur le premier « Essayez-le vous-même » et jetez un oeil à cela. Fondamentalement, cela va s'appliquer à toute balise de lien qui a un attribut de cible quelle que soit la valeur de cet attribut. Vous pouvez voir ici, ces deux ont un attribut cible et ne se soucient pas de la valeur de cet attribut cible, il se soucie juste de savoir si cet attribut existe. Mais nous pouvons être plus spécifiques et dire que nous voulons seulement cibler les balises de lien qui ont cet attribut et ont une valeur spécifiée. Nous pouvons entrer et dire que nous voulons seulement cibler les balises de lien qui ont un attribut de cible avec la valeur de vide. Si je lance cela, alors vous verrez que seul celui-ci est sélectionné. revenant ici à celui-ci qui utilise un titre, ce sélecteur particulier est utilisé pour sélectionner des éléments avec une valeur d'attribut contenant un mot spécifié. Nous pouvons rechercher dans la valeur d'attribut ce mot particulier, et s'il correspond à une partie de la valeur, ce style particulier sera déclenché. Je vais fermer celui-ci et recommencer avec cet exemple. Vous pouvez voir ici que le titre a une fleur dans ces deux bénins, celui-ci. Vous pouvez voir que ces deux ont le style spécifié, qui est bordure, 5px jaune massif. Une autre façon d'utiliser ces sélecteurs avec un tuyau égal, et qui sera utilisé pour sélectionner des éléments avec un attribut spécifié, commençant par une valeur spécifiée. Plongons juste dans l'exemple. Vous verrez ici que tout ce qui commence par le mot que nous avons spécifié ici puis est cassé par un tiret sera sélectionné, mais pas celui-ci en particulier. C' est juste une règle ici que vous pouvez voir une note, elle ne ciblera qu'un mot entier, soit seul comme ça, soit avec un trait d'union. C' est un peu étrange sélecteur. Je ne pense pas avoir déjà utilisé celui-ci avant, mais c'est un truc avancé. Il y a tous ces différents opérateurs spéciaux que vous pouvez utiliser. Je ne vais pas y passer trop de temps. Si vous voulez obtenir cette créativité avec vos sélecteurs, certainement revenir et voir ceci. Mais essentiellement, les principales choses que je voulais traverser dans cette vidéo sont les sélecteurs avancés comme les combinateurs et les pseudo-classes, et beaucoup des exemples les plus courants que j'ai déjà mis dans notre projet. Nous avons le sélecteur d'enfant immédiat, et je pense que nous avons utilisé ici, le sélecteur de descendant. Ce sont les plus courantes. Ne vous inquiétez pas si vous n'avez pas saisi complètement les sélecteurs d'attributs de niveau les plus avancés ici. Certainement, vous voulez comprendre celui-ci afin que vous puissiez cibler des éléments avec un attribut et une valeur spécifiques que je trouve très pratique. Mais ceux-là que je n'ai jamais eu à utiliser auparavant, alors ne vous inquiétez pas trop. Les principaux que je veux vraiment que vous sachiez sont ceux-là, les combinateurs, parce que vous allez certainement avoir besoin de les utiliser à un moment donné. Vous verrez certainement celui-ci, le sélecteur d'enfant aussi. Pseudo-classes aussi pour l'état, en particulier sur un lien, et surtout pour le vol stationnaire, mais alors bien sûr, vous avez tous ces pseudo-éléments fous pour cibler la première ligne, première lettre, beaucoup d'options disponibles en CSS, mais il n'est pas nécessaire de tout savoir. Vous avez toujours ce site Web à titre de référence. J' espère que cette vidéo n'a pas été trop longue et que vous n'êtes pas complètement débordée. Dans la vidéo suivante, nous allons envelopper les options avancées en CSS. Ensuite, nous allons commencer à partager avec vous un framework qui va rendre tout cela beaucoup plus facile et vous faire gagner tant de temps. Je te vois dans la prochaine vidéo. 27. CSS avancé - Requêtes multimédias: Dans la dernière vidéo, j'ai dit que nous allons couvrir certains des sujets les plus avancés en CSS, mais si nous regardons ce menu ici, il y a une tonne d'options différentes à notre disposition. Nous pouvons regarder les options avancées disponibles pour les coins arrondis. Nous pouvons utiliser des images comme frontières. Nous pouvons créer des arrière-plans dégradés. Nous pouvons donner différentes parties de notre ombre de document. Nous pouvons appliquer des ombres pour ajouter des DIV ou à nos éléments de texte. Il y a tellement de choses que nous pouvons faire en CSS et c'est trop à couvrir dans ce cours, c'est probablement déjà assez long. Si vous voulez que je crée un cours CSS plus avancé, je suis définitivement ouvert, mais pour l'instant, je veux parler de quelque chose qui est très important dans CSS et c'est Media Query. Dans CSS2, les requêtes média ont été introduites et ce qu'elles ont fait a permis de définir différentes règles de style pour différents types de médias. Mais maintenant dans CSS3, ils ont le plus souvent utilisé pour examiner la capacité de l'appareil. Où que l'on regarde la largeur et la hauteur de la clôture ou de l'appareil, l'orientation, qu'il s'agisse de paysage ou de portrait, et la résolution. requêtes médias, comme il est dit ici, sont des techniques populaires pour fournir une feuille de style sur mesure pour les ordinateurs de bureau, ordinateurs portables, les tablettes et les téléphones mobiles. Requêtes de médias super importantes pour la conception et le développement Web réactif. Si nous faisons défiler vers le bas, nous pouvons voir la syntaxe de requête multimédia et cela pourrait ne pas avoir beaucoup de sens ici dans ce genre de vue d'ensemble, mais si nous descendons ici, nous pouvons commencer à voir quelques exemples. La façon dont vous démarrez une requête multimédia est avec @media alors la première petite valeur ici est screen. écran, comme vous pouvez le voir ici, est utilisé pour les écrans d'ordinateur, tablettes, smartphones, etc. Lorsque nous faisons un design web responsive, l' écran est celui que nous voulons utiliser. Ensuite, nous mettons fin à dire que nous définissons une nouvelle condition et ensuite nous mettons en min-width ou max-width ou les deux. Nous pouvons limiter ces styles particuliers que nous définissons dans les crochets bouclés de cette requête multimédia à une taille d'écran de plus de 480 pixels. Les exemples ici manquent un peu, donc je vais passer à la leçon suivante ici et regarder d'autres exemples. Un bon exemple ici, si je fais défiler vers le bas, est cet exemple ici, je pense est assez simple pour comprendre. Ici, nous avons nos styles standard pour chaque taille d'écran, puis nous avons nos requêtes média. Celui-ci dit, appliquez tous ces styles lorsque la largeur de l'écran est d'un minimum de 600 pixels. Cela signifie que toute DIV avec la classe d'exemple, nous voulons définir la taille de la police à 80 pixels. Maintenant, celui-ci parle du contraire. Lorsque la taille de l'écran est inférieure à 600 pixels, nous voulons que chaque DIV avec la classe d'exemple ait une taille de police de 30. Maintenant, nous pouvons voir l'effet de cela si nous commençons à redimensionner la fenêtre du navigateur. Ici, il nous dira à quel point cette fenêtre est large. Si nous faisons glisser notre propre fenêtre vers le bas jusqu'à ce qu'elle atteigne moins de 600, nous commencerons à voir un changement. Ici, nous sommes juste au-dessus de 600 et puis dès que nous croisons 600, la taille de police de ceci diminue. C' est parce que nous l'avons spécifié comme ça. Mais on peut aller ici et préciser ce que tu veux. On pourrait changer la couleur en vert. On pourrait changer la famille de polices. Je vais cliquer sur Exécuter dessus et vous montrer ça maintenant. Voyez quand il atteint moins de 600 pixels, nous avons la taille de police 30 pixels et la couleur verte. Une autre chose que je veux vous montrer ici que cela ne vous montre pas est vous pouvez combiner max-width, max-height. Dites par exemple, je voulais créer un autre niveau à l'intérieur de cela, je vais garder cette largeur maximale en fait. Ce que je vais faire en est un autre et, et ici, je vais mettre dans une largeur minimale. Entre les largeurs de 400 pixels et 600 pixels, faisons la taille de police 10. Ça n'aura pas fière allure, mais j'appuie sur Sauvegarder juste par habitude. Cela ne va pas avoir fière allure, mais au moins cela va démontrer dans cet exemple. Je vais mettre pour ici, une largeur maximale de 400 et le rendre encore plus petit. Ce qui va se passer maintenant est par défaut, notre taille d'écran est 825, ce qui est plus grand que 600 donc nous allons avoir une taille de police de 80. Mais une fois que nous la réduisons entre 600 et 400 pixels, nous allons obtenir une taille de police de 10 pixels et une couleur de rouge. Puis moins de 400, nous allons avoir une taille de police de cinq et une couleur de vert. Voyons si ça marche. Maintenant, on descend, maintenant on est en dessous de 600 mais au-dessus de 400. On a une marée rouge de 10 pixels ici. Maintenant, si nous allons plus loin et que nous allons au-dessous de 400, voyons ce qui se passe. Soudain, nous avons un texte encore plus petit et la couleur est verte. Encore une fois, pas l'exemple le plus pratique, mais vous pouvez voir que nous pouvons définir différentes, je suppose, feuilles de style ou c'est vraiment la même feuille de style mais différentes sections de la feuille de style et définir des styles pour des largeurs d'écran particulières. C' est très important dans CSS et vous pouvez vérifier ici pour des exemples supplémentaires. Nous pouvons également cibler l'orientation. Nous pouvons cibler si c'est en paysage ou portrait, puis l'exemple ici utilise max-width et min-width afin que nous puissions cibler entre des largeurs d'écran particulières pour faire des styles particuliers. La requête multimédia et la conception Web réactive sont quelque chose que nous verrons un peu plus tard maintenant que nous allons commencer à implémenter Bootstrap dans notre projet. Nous allons transformer ce gâchis géant en quelque chose d'un peu plus agréable et construire quelques pages de plus. Ensuite, nous vous mettrons en route avec votre projet de classe. Merci de porter avec moi à travers cette classe très impliquée sur HTML et CSS. Dans les prochaines vidéos, nous allons commencer à construire quelque chose qui, espérons-le, sera assez agréable. Je te vois dans la prochaine vidéo. 29. Reconstruire notre page Web avec Bootstrap: moment, si vous êtes un peu un auto-débutant, vous pouvez utiliser les connaissances que vous avez apprises dans cette classe avec HTML et CSS et la documentation ici sur bootstrap et commencer à créer votre page Web ou site Web. Mais pour ceux d'entre vous qui ont besoin d'un peu plus de conseils, restez autour parce que dans cette vidéo, je vais reconstruire notre page en utilisant Bootstrap. Il y a beaucoup de travail qui doit continuer avec notre page web actuelle est assez horrible que je ne vais pas mentir. C' est parce que nous avons essayé d'inclure tous ces exemples et éléments différents. Ce que je vais faire en premier, c'est complètement le dépouiller et le reconstruire avec Bootstrap. Les choses que je vais me débarrasser pour être prêt, c'est que je n'ai pas besoin de certains de ces styles, donc je vais les supprimer. Je vais me débarrasser de ces liens et boutons aléatoires. Je vais lui laisser ce premier paragraphe avec la photo. Je vais avoir notre histoire est le deuxième titre, mais je n'ai plus besoin de la carte d'identité. Je vais me débarrasser de ce deuxième paragraphe. Je vais garder la table comme une ligne de temps. Je vais garder nos valeurs comme un point sombre et nos services, je vais partir comme un div sans aucune classe particulière dessus. Je vais m'assurer que je n'ai pas supprimé trop de div. Non, on dirait qu'on est bons. Voyons où nous en sommes maintenant. Je dis. Cool. Je vais également supprimer les styles dans mon styles.css. Vous n'avez pas à le faire vous-même si vous avez passé beaucoup de temps dessus et que vous aimez réellement ces styles, c'est juste un gâchis complet aussi. Je vais supprimer tous mes styles et commencer complètement à partir de zéro. Ici, tu y vas. Vous avez une page web avec un tas d'éléments et peu près pas de style en dehors de ce que je vais me débarrasser, nous n'avons pas vraiment besoin et les styles qui sont automatiquement appliqués par bootstrap. La première chose que nous voulons faire est de mettre tout cela dans un conteneur. Si nous voulons en savoir plus sur les conteneurs, je pense qu'il est ici dans la mise en page. Je vais chercher des conteneurs. Vous pouvez voir dans la mise en page, nous pouvons utiliser des conteneurs pour créer le système de grille. Ce qu'il fait également, c'est qu'il crée une largeur maximale à différents points d'arrêt. Quels points d'arrêt, pour ceux d'entre vous qui ne sont pas familiers avec l'idée d'un point de rupture, c'est ce que nous avions avant quand nous faisions les requêtes médiatiques que nous mettions et les fouets maximaux. Ensuite, quand il a atteint ce point de rupture, c'est à ce moment que nous avons commencé à modifier le contenu de la page. Mais vous le verrez maintenant si je retourne ici et que je crée un div, donnez-lui une classe de conteneur proche que je vais mettre tout cela dans un peu et ensuite mettre la balise div de fermeture. Maintenant, nous devrions commencer à voir ce nettoyage assez bien. Je vais rafraîchir la page. Maintenant, à une plus grande largeur d'écran, nous pouvons voir qu'il n'en prend que assez pour le rendre plus lisible. Mais si nous voulons réduire la taille de celui-ci, la largeur maximale du conteneur change. Si on est très serrés, ça ira en pleine largeur. Vous pouvez voir les points d'arrêt ici. Vous voyez comment cela change la largeur du conteneur en fonction des différentes tailles d'écran. C' est vraiment une fonctionnalité puissante de Bootstrap et nous obtenons un design web réactif directement à la porte. Implémenter le conteneur est l'un des gains les plus faciles que nous pouvons avoir dans Bootstrap. Regardons ce que nous pouvons réparer d'autre dans Bootstrap. Une occasion que je peux voir ici, à part que je dois me débarrasser de ce titre. Laisse-moi juste réparer ça. Une chose qu'on peut réparer ici, c'est cette table. Si je veux revenir à la documentation Bootstrap, tapez des tables, et regardons comment nous pouvons styler les tables d'une manière agréable en utilisant Bootstrap. La première chose que nous devons faire est de donner à la table une classe de table. Encore une fois, en tirant parti des classes dans bootstrap, nous pouvons simplement mettre dans une classe et obtenir des styles tout de suite. Donnons juste à la table une classe de table. Puis soudain, nous avons une table de style. C'est génial. Nous avons quelques autres options ici. On peut faire de la tête une couleur différente. Peut-être qu'on utilise une section de tête de thé sur notre table pour aller sur le dessus de la tête. Nous avons une classe de thead, un doc de nourriture. Ensuite, on mettait ça et on mettait la balise de fermeture. Sauvons ça et jetons un coup d'oeil à ce que ça ressemble. Oui, donc maintenant nous avons une ligne d'en-tête de dock, et maintenant la police a été changée en couleur blanche. Peut-être que pour nos services, nous voulons des cartes. Allons-y et tapons des cartes. Je me souviens que j'ai déjà mis un code à titre d'exemple. Je vais juste sélectionner ça. Je vais créer une section ici où je mets quelques cartes. C' est la première carte. Je peux mettre une deuxième carte. Je vais appuyer sur « Enregistrer » et voir ce qui se passe. Ceux-ci s'affichent les uns sur les autres. Bloc d'affichage, si vous vous en souvenez. Ce que nous pouvons faire est d'aller dans notre style.css et de l'avoir pour que nos cartes s'affichent en ligne. Nous pouvons modifier le style qui existe déjà dans Bootstrap. Nous pouvons afficher le bloc en ligne, appuyez sur Enregistrer, puis soudainement ils s'affichent en ligne. Maintenant, je veux lui donner une certaine marge, donc je vais lui donner une marge comme celle-ci. Je vais en faire 10 pixels. Puis soudain, nous avons une carte avec une certaine marge. Je vais dupliquer ça. Ce que vous pouvez voir ici, c'est que nous profitons de Bootstrap, mais nous sommes également en mesure d'ajouter des urnes et des styles et de les modifier en plus. Bootstrap en retire beaucoup de travail de base. Ensuite, nous pouvons entrer et utiliser nos propres styles et simplement référencer les classes qu'ils créent, mais aussi modifier les classes qu'ils créent pour obtenir quelque chose que nous voulons. Pour nos services, peut-être que nous mettons des affaires, peut-être que nous mettons le design. Je suis juste en train d'inventer ça ici. L' impression et le conseil, la conception, l'impression d'un conseil mal orthographié là-bas. Ensuite, nous trouverons une image pour chacune de ces cartes. Je ne pense pas que cela vaut la peine d'aller et de trouver une nouvelle image juste pour cet exemple. Je vais juste utiliser pour le SRC de chaque étiquette d'image, je vais juste mettre en photo. Appuyez sur « Enregistrer ». Maintenant, vous pouvez voir que nous avons trois cartes et dire par exemple, c'était notre page à propos. Tu es allé aux services. Vous pouvez cliquer sur ces boutons et soudainement être amené à cette page. ce moment, nous avons juste à hacher pour un espace réservé, mais vous pouvez juste mettre à jour ceci ici. Tout cela est juste une balise de lien, mais il est stylé en utilisant Bootstrap pour ressembler à un bouton. Nous pouvons également modifier le texte sur ceux-ci, donc nous pourrions dire des services de consultation. Ensuite, mettez à jour cela pour la conception ici. Consultez nos services de conception. Nous avons déjà mis en place ces modèles et nous pouvons simplement y aller et le modifier. C' est le pouvoir de Bootstrap. J' espère que vous en avez assez pour continuer un. Dans la prochaine vidéo, je vais partager avec vous votre projet de classe. 30. Bonus : stylisation de la page de contact et de mise en page: La dernière vidéo était censée être la dernière vidéo de partage d'écran dans cette classe, mais je viens de me rappeler que je vous avais promis de créer un formulaire, donc j'incluais cette vidéo comme une vidéo bonus, et nous avons l'occasion ici de styliser les deux autres pages HTML que nous avons dans notre projet. Je parle de contact.html et layout.html, et à l'intérieur contact.html, nous avons un formulaire, donc c'est une bonne occasion de vous montrer comment nous pouvons styler un formulaire en utilisant bootstrap. Je vais ouvrir un nouvel onglet pour que nous puissions garder la documentation de bootstrap ouverte, et comme avant, je vais faire glisser contact.html pour que ce soit ouvert dans notre navigateur. Voici notre forme mal stylée. Mais ce que je vais faire est de modifier cela en utilisant Bootstrap et j'espère que cela aura l'air beaucoup plus agréable. Pour revenir à la documentation, je vais cliquer sur « Formulaires » et comme nous pouvons le voir ici, c'est à quoi notre formulaire va commencer à ressembler. Avoir de belles étiquettes et rembourrage, et de beaux boutons ainsi, et juste ici, nous pouvons voir le code qui va générer ce formulaire ici. Mais tout d'abord dans notre nouveau document, nous devons réellement inclure Bootstrap, donc ce que je vais faire est d'ouvrir mon éditeur de code, et vous pouvez voir ici dans index.html, la balise que nous utilisons pour inclure Bootstrap dans l'index. html. Nous allons devoir copier cela dans contact.html afin d'inclure Bootstrap dans ce document également. Tout ce que je vais faire est de copier cela, passer à contact.html, et en dessous de la balise title juste coller cela dans. Je vais appuyer sur « Enregistrer » dessus et ensuite aller par ici, et maintenant nous devrions commencer à voir notre formulaire changer un peu juste en incluant bootstrap. Voilà, tu y vas. Le bouton a changé, la marge a changé, la police a changé, mais elle n'a toujours pas l'air si belle. Ce que je vais faire, c'est revenir ici, et référencer ce qui est ici dans Bootstrap. Je vais déplacer ça d'un côté de l'écran, et pour que nous puissions travailler exclusivement avec ça. Maintenant, la première chose que vous remarquerez est qu'il y a un élément de formulaire évidemment, que nous avons, et puis il y a différents divs avec la classe de form-group, et à l'intérieur de ces divs, vous avez toutes les choses différentes qui constituent cette partie du formulaire. Vous avez l'étiquette, l'entrée et du texte au cas où il y aurait une erreur de validation. Ici, vous avez la même chose, étiquette et l'entrée, ici, l'entrée de l'étiquette. En fait, vous avez l'étiquette sous l'entrée dans ce cas. Ensuite, enfin, vous avez un bouton de type submit au lieu d'une entrée de type submit, chose très similaire, mais juste un élément différent. La première chose que nous devons faire est d'envelopper chaque partie du formulaire dans un groupe de formulaires, et cela nous donnera le style qui va le diviser sur plusieurs lignes, donc ce que nous pouvons faire est de se débarrasser de ces balises br, nous n'en avons plus besoin, et maintenant une fois que c'est fait, je vais ouvrir un div, lui donner la classe du groupe de formulaires, et puis je vais mettre ceci en retrait, fermer la balise div, et je vais le faire pour le reste des champs, donc je vais vite courir à travers ça. Nous avons chacun d'eux enveloppé dans un groupe de formulaires, mais l'autre chose que vous remarquerez est que notre étiquette est juste assise là sans balises html qui l'entoure. Ce que nous pouvons utiliser est cet élément HTML appelé label pour rendre cet affichage un peu plus agréable, donc ce que je vais faire est d'envelopper tout sur les étiquettes avec l'élément de label. Faisons ça maintenant. Maintenant, vous remarquerez qu'il y a un attribut que nous n'avons pas encore, il s'appelle l'attribut for, et ce que cela fait est après avoir défini un ID sur l'entrée, vous pouvez mettre cet ID dans l'attribut avant, et cela indiquent que cette étiquette est avant cette entrée particulière. Pas un 100 pour cent nécessaire, mais suivons comme un exemple, et mettons dans un attribut avant. Maintenant, la deuxième partie de cela donne le même ID à l'entrée. Mais avant cela, il y a une autre chose que nous devons mettre sur notre entrée, et c'est la classe de contrôle de formulaire. Tout comme ici, je vais déplacer cette entrée sur une autre ligne, et je vais le faire avant le nom. En fait, peu importe où il se trouve dans la position de l'entrée. Je vais juste le mettre le contrôle de formulaire de classe de fin. Maintenant, je peux mettre dans l'ID du champ prénom, et cela devrait compléter l'un des groupes de formulaires. Je vais passer par là et faire ces changements pour le reste des groupes de formulaires. C' est presque tout ce dont nous avons besoin pour obtenir ce formulaire le plus pointu, la dernière chose est de changer cette entrée de type submit to button of type submit, et les principales différences entre une entrée de type submit est la valeur, qui est ce apparaîtra sur le bouton va dans le champ de valeur sur une entrée, mais sur un bouton, il va entre ces deux balises de bouton. Tout d'abord, je vais changer cela en bouton, et au lieu de la valeur ici, je vais créer le début de la balise, puis mettre dans la balise de fermeture. La dernière étape pour cela est de mettre dans la classe, donc il va ramasser tous les styles d'un bouton dans Bootstrap, donc btn et ensuite btn primaire. Sauvegardez cela, et maintenant, quand nous allons à notre formulaire de contact, il devrait apparaître un peu différemment. Espérons que ça a l'air beaucoup mieux. On y va, on peut voir que tout est cassé sur deux lignes différentes maintenant, et le bouton a l'air un peu différent. Mais le plus gros problème avec cela est bien sûr le rembourrage et la marge, donc nous allons juste pour une certaine marge sur en ce moment. Enregistrez cela, et maintenant vous avez un formulaire plus agréable formaté. Je vais le laisser là pour les formulaires. Il y a beaucoup plus que vous pouvez faire pour que votre formulaire soit différent. Vous pouvez ajouter différentes entrées, donc certainement vérifier la référence ici pour les formulaires de style. Je vais passer maintenant dans layout.html et vous montrer comment nous pouvons obtenir une mise en page similaire à ce que nous avons vu dans cet exemple que nous avons copié. Ce que je vais faire est de saisir notre layout.html, le déposer ici et puis je vais retourner aux écoles W3, et rappelez-vous que nous avons trouvé cela dans la page de mise en page HTML. Ce que je vais faire, c'est, comme vous pouvez le voir, ce premier en-tête de section étend toute la largeur et ensuite vous avez des sections et des asides, je crois. Mais allons juste en fait entrer et ouvrir ce fichier, donc je vais aller dans html et ouvrir layout.html. Comme vous pouvez le voir ici, nous avons un élément d'en-tête avec une classe d'en-tête, un élément de section avec une classe de section, et un élément d'article avec une classe d'article, et enfin un élément de pied de page avec une classe de pied de page. Nous avons tous les éléments à cibler et tous les styles là pour créer un certain style, donc ce que je vais faire est de créer une toute nouvelle feuille de style, je vais juste inclure une balise de style afin que nous puissions intégrer certains styles. Étiquette d'ouverture de style, balise de fermeture de style, et une chose qui n'a pas été vraiment mentionnée dans le cours est que nous pouvons inclure des balises de style n'importe où dans notre document, il n'a pas besoin d'être dans la tête, mais il est recommandé de mettre en tête, si vous avez une section en tête, ce document particulier, nous n'avons pas réellement de section en tête, et pour cet exemple particulier, nous n'avons vraiment pas besoin d'en créer une. Mais d'habitude, bien sûr, vous auriez une section de tête. Tout d'abord, je vais faire référence à ceci, donner à l'en-tête une couleur de fond de gris et une couleur de texte de blanc. Je vais ensuite au centre de l'alignement du texte, et voyons ce que nous obtenons maintenant. Cool. Ici, nous avons beaucoup de rembourrage, donc je vais ajouter un peu de rembourrage maintenant, j'ai un rembourrage de 30 pixels. On y va. Bon, donc c'est notre en-tête. La section suivante est cette section de navigation ici. Je ne devrais pas utiliser la section mot parce que vous pourriez être confondu avec cet élément de section réel. Mais l'élément de niveau bloc suivant que nous pouvons styliser est cet élément nav ici. Ce que je vais faire est d'aller dans ici nav, lui donner une couleur de fond de gris clair. Je vais lui donner un peu de rembourrage et voyons ce qui se passe. Il est là, mais bien sûr, il prend toute la largeur parce que c'est un élément de niveau bloc. Ce que je vais faire est pour nav et l'élément adjacent, qui est l'article, définissez ceux-ci sur inline-block. Je vais afficher le bloc en ligne. Vous pouvez voir ici qu'il est en train de passer à une nouvelle ligne. Mais si nous élargissons l'écran, vous verrez qu'il apparaît ensemble. Ce que nous devons corriger cela, est juste de restreindre la largeur de la section de l'article. Je vais le limiter à une largeur de 500 pixels, revenir ici, et maintenant vous pouvez voir le côté de l'autre. Comme vous pouvez le voir ici, cette section n'est pas alignée verticale vers le haut, donc je vais fixer la prochaine ligne verticale, en haut. Sauvegardez ça. Maintenant, c'est là-haut. Je vais donner une certaine marge à l'article, sorte que ce n'est pas si loin contre cette frontière. H_1 était un peu plus grand dans cet exemple. Je vais donner l'article en utilisant un sélecteur de descendant ici, Article H_1. Cela sélectionnera tous les articles à l'intérieur de H_1, et je vais faire la taille de la police deux fois plus grande. On y va. La dernière section est le pied de page et il a un style similaire à l'en-tête, donc je vais juste copier l'en-tête mot pour mot. Je vais le mettre ici et changer ça en pied de page. Comme vous pouvez le voir ici, nous utilisons des sélecteurs de niveau d'élément tout au long, mais nous avons des classes ici aussi. Nous pourrions cibler via les classes aussi. Au lieu d'en-tête, nous pourrions utiliser l'en-tête point car nous avons une classe d'en-tête. Nous pourrions utiliser une classe de nav au lieu du sélecteur d'élément nav. Cela nous permettrait de créer un autre nav qui n'a pas nécessairement cette classe et n'a pas ces règles affectées. Je vais sauver ça, voir à quoi ça ressemble et maintenant nous avons ce pied de page. La prochaine chose que vous remarquerez est que cet élément ne s'étend pas jusqu'au pied de page. Ce que nous devons faire pour cela est de donner à la section une certaine hauteur et ensuite avoir ces deux éléments conformes à une hauteur de 100 pour cent de son élément parent. Ce que je vais faire, c'est juste ici, je vais mettre une règle pour cibler la section. Je vais donner à la section une hauteur de 500 pixels. Ce que je vais faire, c'est les définir pour avoir une hauteur de 100 pour cent. Ça va être 100 pour cent de l'élément apparent, qui est la section. Enregistrez et rechargez la page. Malheureusement, nous avons un peu de chevauchement ici, et c'est parce que nous avons un rembourrage. Donc, pour réparer cela, je vais enlever le rembourrage du nav lui-même. Maintenant, vous pouvez voir que c'est la queue, mais il n'y a pas de rembourrage là-dessus. Ce que je peux faire est de donner le rembourrage ul, pas le nav. Je vais nav ul rembourrage dix pixels. Vous pouvez voir que commencer à apparaître un peu plus gentil. Les points de points vont de côté, mais nous ne les utiliserons pas de toute façon parce que nous créons l'exemple ici. En fait, si on lui donne plus de rembourrage, il revient. Nous pouvons facilement y parvenir en mettant dans un style de liste, type de none pour se débarrasser de ces points points points. D' accord, donc maintenant ça ressemble beaucoup à ce que nous avons ici. Si nous élargissons la fenêtre, nous pouvons voir que ces sections seront sensibles à un certain point. Puis quand il atteint ici, il s'arrête. Nous aurons besoin de styles plus réactifs. Donc, pour corriger ce style sur une taille d'écran plus petite, vous l'avez deviné, je vais utiliser une balise multimédia, donc je vais le mettre en haut. La raison pour laquelle je le mets en haut c'est que c'est une petite chose. Mais essentiellement si je devais charger cette page sur un réseau lent sur mobile, les styles se chargent de haut en bas. Ceux-ci seraient tous chargés en premier. Ensuite, si j'avais des médias en bas, il chargerait les styles mobiles en dernier. Il peut y avoir ce genre de retard où il affiche les styles de bureau et puis comme il charge les styles mobiles, c'est une très petite chose dont je ne m'inquiéterais pas, mais c'est pourquoi je le mets en haut et je vais définir le point d'arrêt ici. Si nous ouvrons cette pleine largeur et ouvrons l'inspecteur, l'inspecteur nous donne la largeur de la fenêtre. Je vais traîner ça jusqu'à ce qu'il se casse. Il y a un peu de retard, mais le point d'arrêt semble être autour de 640. Ce que je vais faire, fermer ça, retourner ici et dire largeur max, 640 pixels. Voyons ce qui se passe ici. Si je réduit la largeur de la fenêtre, comme vous pouvez le voir ici, c'est cette section de l'article qui frappe en bas. Maintenant, ce que j'aime vraiment faire quand je débogue du code est d'utiliser l'inspecteur. Je recommande certainement si vous êtes à l'aise avec l'utiliser, certainement l'utiliser. Je vais appuyer sur la commande Alt I sur Mac en utilisant chrome. Ce que je peux faire est un clic droit sur ce texte qui est descendu sur la page et inspecter l'élément. J' inspecte l'article ici et je peux voir qu'une largeur de 500 pixels s'applique. Nous avons actuellement une taille d'écran de moins de 500 pixels. Cela va causer des problèmes à cette taille d'écran. Ce que je vais faire est au lieu de 500 pixels, changez ceci à 250 pixels. Voyez si cela fonctionne même si vous ajoutez une taille d'écran plus petite aller vers le bas. Il se casse toujours à une taille d'écran plus petite. Peut-être que je vais en faire un 150 pixels. Tout cela se passe juste dans notre navigateur. Donc, si je rafraîchis la page, ces modifications ne sont pas permanentes. Mais si je vais ici et créer une règle pour l'article, donc en dessous de la largeur de 640 pixels, la largeur des articles va maintenant être de 150 pixels. Maintenant, vous voulez probablement utiliser plus de termes relatifs ici. Mais dans cet exemple de base, je vais juste mettre une valeur fixe. Une autre chose que nous devons nous assurer que cela remplace ce qui est ici dans cette décoration de règle est l'étiquette importante. Dans ce cas, il est correct d'utiliser important. Rappelez-vous, vous devez être prudent avec important, mais nous voulons vraiment que la largeur descende. L' alternative serait de changer cela et de faire de ce terme un terme plus relatif. Mais pour cet exemple, je vais juste jeter dans important. Je vais rafraîchir la page et vous verrez qu'il n'y a pas encore de différence. Mais si je réduit la largeur de la fenêtre et qu'elle arrive à ce point de rupture de 640 pixels, le texte devient plus petit. Là, vous pouvez voir même à une petite taille d'écran, il apparaît toujours bien. Maintenant, ça me dérange un peu qu'une fois qu'il arrive ici, il est tout simplement trop petit. Donc, je vais essayer de créer cela avec une largeur relative. Je vais remettre ça, et je vais changer ça à une largeur relative de 55 %. Sauvegardez cela et une fois de plus, vous ne verrez aucun changement jusqu'à ce que nous atteignions réellement ce point d'arrêt de 640 pixels. Mais si je vais plus loin, vous verrez qu'il atteint ce point d'arrêt et a ensuite une largeur relative. Si on descend jusqu'au bout, ça marchera toujours. Très bien, donc c'est à peu près autant que je voulais aller dans cette vidéo bonus, vous pouvez maintenant me voir travailler à travers un défi de style en utilisant CSS. J' espère que cela va montrer qu'il y a des défis en cours de route avec CSS, vous lancez quelques styles, vous réalisez qu'il affecte d'autres éléments sur la page. Ensuite, vous modifiez différents attributs, changez parfois aussi la structure du HTML, pour créer l'aspect que vous recherchez et vous assurer qu'il fonctionne sur toutes les tailles d'écran. J' espère que cette vidéo a été un bon complément à votre apprentissage dans cette classe. Dans la prochaine vidéo, nous allons tout mettre en avant et vous lancer dans votre projet de classe. Alors je te verrai dans le prochain. 31. Conclusion et projet de classe: Très bien, donc j'espère maintenant que vous êtes prêt à finir de construire le reste de votre site Web statique basé sur le contenu HTML et CSS. Rappelez-vous les gars, si vous avez besoin de conseils ou de conseils, assurez-vous de laisser votre commentaire dans la boîte de discussion ci-dessous, et je ferai de mon mieux pour vous orienter dans la bonne direction. En ce qui concerne le déploiement de votre site Web, qui est de le mettre en ligne sur Internet, j'ai déjà couvert cela dans ma classe, en comprenant le développement web. Alors dirigez-vous vers la première vidéo sur le déploiement de cette classe et vous aurez votre site Web opérationnel en un rien de temps si c'est ce que vous voulez. Donc, cela conclut cette classe sur HTML et CSS. Évidemment, malgré l'approfondissement de ces deux langues, il y a beaucoup plus sur le web que la structure et le style. Alors restez à l'écoute. J' ai l'intention de publier d'autres cours pour vous permettre de développer vos connaissances sur le développement web au cours des prochains mois. Merci d'avoir regardé et j'espère vous voir dans mes autres cours.