Le code n'est pas aussi effrayant que les zombies : le HTML et le CSS pour les auteurs, les éditeurs et les débutants

1. Introduction: Bonjour et bienvenue au code n'est pas aussi effrayant zombies. HTML et CSS pour les rédacteurs et les éditeurs. Ce cours va vous parler du code et de la façon dont il est non-effrayant. Vous allez travailler avec HTML et CSS d'une manière qui est favorable et vous permet de comprendre ce que vous faites sans en avoir si peur. Nous allons parler du HTML, ce qu'il est, comment est la structure du web, et comment vous pouvez créer vos propres balises ou au moins écrire vos propres balises plutôt et les inclure dans vos différents projets. Nous allons également parler de CSS, qui est plus sur le design et comment le rendre joli et vous aider à l'utiliser pour améliorer davantage vos projets et vous permettre de ne pas avoir peur du code. En chemin, nous allons essayer de tuer des zombies et vous aider à vous amuser un peu. 2. Vos outils pour combattre les zombies: Bonjour. Dans cet épisode, nous allons parler du type d'outils dont vous aurez besoin pour travailler avec ce cours. La vérité, c'est que tu n'as pas besoin de beaucoup. Il y a beaucoup de choses différentes que vous pouvez utiliser, mais voici quelques recommandations. Tout d'abord, éditeur de texte brut. Si vous êtes sous Windows, vous pouvez utiliser le Bloc-notes ou si vous êtes sur un Mac, vous pouvez également utiliser l'édition de texte, bien que vous devriez l'utiliser en mode texte brut. Tout cela dit, eh bien, vous ne pouvez pas utiliser un éditeur de texte brut, ce n'est probablement pas le plus idéal juste parce que cela ne vous donne pas autant d'aide que possible. Pour cela, je recommande toujours un éditeur de codage couleur. Ce qu'il fait, il va coder le code de couleur afin que vous puissiez réellement voir quels types de code ou de morceaux de code, comment ils interagissent les uns avec les autres et les balises et obtenir une couleur différente de dire, contenu et certaines de ces choses. Il est beaucoup plus facile de déboguer et de déterminer si vous avez une erreur de syntaxe ou quelque chose qui se passe ou un autre type d'erreur. Pour ceux-ci, ils vous aident à repérer les erreurs. Notepad ++, je crois qu'il est disponible sur toute la plate-forme, mais il est certainement disponible sur Windows. Atom est certainement disponible sur toute la plateforme. Un autre, Brackets et puis Sublime Text est probablement un peu au-delà du niveau de l'école. C' est un excellent éditeur de texte et un éditeur de texte très puissant et probablement plus que vous n'avez besoin. Je ne l'achèterais pas si tu n'en as pas besoin. Notepad ++, Atom et Brackets sont tous gratuits à télécharger et vraiment tout ce que vous utilisez, tout autre outil de codage pour HTML et CSS devrait fonctionner correctement. Juste à peu près n'importe quoi vraiment. La chose que je vais recommander cependant est codepen.io. Il s'agit d'un site Web qui est disponible gratuitement. C'est facile à utiliser. Il se met à jour automatiquement au fur et à mesure que vous tapez, qui est super utile lorsque vous apprenez. Il prend soin de tous les trucs fidèlement avec juste comment construire une page et ce qu'il faut faire pour ces choses. Il vous permettra juste de vous concentrer sur le code sur lequel vous voulez vous concentrer plutôt que d'avoir à traiter tout le code autour de ce code dont vous auriez besoin si vous utilisez juste un éditeur de texte de base et toutes les démos de classe seront dans codepen.io. Jetons un coup d'oeil à ça. Nous allons chercher à se mettre en place, comment créer un compte gratuit. Il est important de sauvegarder votre travail principalement afin que vous puissiez y revenir et le réparer et aussi jouer avec. Lorsque vous commencez à travailler sur votre projet, il est bon de l'avoir en place où vous pouvez l'enregistrer au fil temps à mesure que vous suivez le cours et que vous êtes en mesure de le publier pour que d'autres personnes puissent voir et regarder ce que vous avez fait. Allons-y et frappons les zombies dans la gorge. Ceci est le site Web de CodePen. En bas, en bas à gauche, vous allez vous inscrire. Vous cliquez sur cela, inscrivez-vous avec e-mail. Ce processus est assez typique. Je vais me connecter juste parce que j'ai déjà un compte. Se connecter. Ce sont des stylos qui pourraient vous intéresser. Mais ce que nous allons faire, c'est d'aller à Explorer, nous allons créer et un stylo. Dans CodePen, un stylet est une partie HTML, CSS et JavaScript d'une page que vous pouvez jouer avec elle. La partie JavaScript n'est pas quelque chose dont nous avons besoin, donc ce que je vais faire est de minimiser cela. En fait, nous ne allons pas traiter avec CSS en ce moment. On y arrivera un peu plus tard dans le cours. Je vais minimiser ça aussi. Nous avons juste du HTML. Je vais juste écrire un petit truc ici. Bonjour le monde. C' est un moyen par défaut de commencer à apprendre un langage de programmation est de taper hello world et de le sortir à l'écran. Comme vous pouvez le dire, comme je l'ai tapé, il est sorti. Codepen.io est juste un outil vraiment génial à utiliser, vraiment facile et, espérons-le, rendra votre vie beaucoup plus simple que vous essayez de suivre le long. Ce sont les outils. Merci. Allons à la section suivante. 3. Pourquoi les zombies détestent le HTML: Bienvenue à Code n'est pas aussi effrayant que les zombies. Nous allons jeter un oeil à ce qu'est HTML et pourquoi les zombies le détestent tant. Tout d'abord, qu'est-ce que le HTML ? C' est un langage de programmation, mais en réalité, plutôt que de fournir tant de programmation ou de traitement, il fournit de la structure aux documents. J' aime le considérer comme le squelette de votre page ou le squelette de votre page de site Web. Il vous permet de construire la page et d'avoir différents types de flash et différents types de couleurs et toutes ces sortes de choses qui vont dans une page de site Web, mais il doit accrocher à quelque chose, et HTML est que la suspension point. Il fournit des informations sur le contenu du document. Maintenant, il y a environ quatre parties à un élément HTML, c'est une seule unité de HTML, quatre pièces : balise d'ouverture, attributs, contenu, et une balise de fermeture. La balise d'ouverture de portefeuille utilise les crochets d'angle, inférieurs et supérieurs aux signes pour déclencher la balise, sorte qu'elle commence par un signe inférieur à, et la balise elle-même se termine par un signe supérieur à. Par exemple, le paragraphe de la balise d'ouverture ressemble à ceci, c' est-à-dire une balise de paragraphe d'ouverture. Vous avez probablement déjà vu cela dans la dernière vidéo quand je démontrais CodePen.io, mais c'est une balise de paragraphe d'ouverture. Ensuite, nous avons des attributs. C' est quelque chose que nous en arriverons un peu plus tard, mais je veux juste le présenter ici. Ce sont des choses à propos des étiquettes. Ils viennent juste après le nom de la balise d'ouverture et avant son crochet d'angle de fermeture, donc ils sont utilisés pour des informations supplémentaires, identification ou les options, donne d'autres façons d'utiliser balises ou aide le navigateur à savoir comment cette balise particulière est utilisée. L' attribut class nous aide, en particulier quand nous arrivons à CSS, il définit un groupe d'éléments, type de contenu HTML. Il ne doit pas nécessairement être le même élément en particulier, mais il pourrait s'agir d'une classe d'éléments qui agissent la même manière, font la même chose ou ont le même aspect. Pourrait être tous ces ont lu du texte ou tous ceux-ci ont un certain réglage de marge entre eux, quelque chose comme ça. Cela pourrait vraiment être à peu près n'importe quoi, mais quand vous ajoutez une classe à un élément, c'est ainsi que cela se passe. C' est la balise d'ouverture de la balise p. Ensuite, avant le crochet d'angle de fermeture, nous avons des égaux de classe, puis « apprentissage ». Espérons que vous n'apprenez pas en «  guillemets  », mais la classe a une valeur d'apprentissage, et il pourrait y avoir plusieurs éléments HTML sur la page qui avait cette classe. Il y a beaucoup d'autres attributs que nous pouvons utiliser, et nous en parlerons un peu plus tard. Maintenant, la troisième chose ou la troisième partie d'un élément HTML est probablement le plus important, c'est le contenu réel. C' est l'information qui va à l'intérieur. C' est entre les étiquettes d'ouverture et de fermeture. Souvent, il s'agit d'un texte, mais il pourrait aussi s'agir d'autres éléments. Souvent, ce sont aussi d'autres éléments. Certains éléments auront des limites qu'ils ne peuvent pas être à l'intérieur d'autres éléments, dépend du travail particulier que l'élément fait et de ce qui est approprié pour lui. Certains éléments ne peuvent tout simplement pas exister dans d'autres éléments. D' autres éléments n'existent que dans d'autres éléments. Cela dépend vraiment de l'élément particulier avec lequel vous travaillez. HTML est aussi assez indulgent. Même si vous le gâchez totalement, le navigateur essaie juste de son mieux pour faire ce qu'il pense qu'il devrait. Souvent, ça fait du bon travail. Parfois c'est bon et qu'il n'échouera pas lamentablement. C' est mauvais si un navigateur ne lui permet pas d'échouer, mais l'autre le fait, et vous ne testez pas dans ce navigateur. Avoir un bon code est la meilleure option pour des aperçus cohérents des pages sur plusieurs navigateurs. Balise de fermeture, elle ressemble beaucoup à la balise d'ouverture, sauf qu'elle a une barre oblique en face de lui. La balise de paragraphe a une barre oblique p. Certaines balises sont ce qu' on appelle des balises de vide et n'ont pas de balise de fermeture. Notamment, il s'agit de rupture d'image, et HR ou règle horizontale, donc IMG, BR et HR. Ce sont les principaux dont nous parlerons probablement dans le cadre de ce cours. Mais il y en a quelques autres, mais la plupart des balises ont une balise de fermeture. Habituellement, la seule raison pour laquelle ils n'ont pas de balise de fermeture est que le contenu du serveur de balises réside dans la balise d'ouverture, plutôt que d'avoir quelque chose entre elle. Par exemple, une image finira par arriver, mais vous aurez un attribut source qui vous indiquera où l'image peut être trouvée et l'image la montre simplement, donc il n'est pas logique d'avoir nécessairement une balise d'ouverture et de fermeture pour images. Voici un exemple de balise de paragraphe. Apporter un attribut ainsi que les balises d'ouverture, de fermeture et de contenu, donc nous avons commencé avec une balise p avec une classe d'apprentissage où tuer des zombies est amusant. C' est notre contenu, puis slash p est notre balise de fermeture. Imbrication. Une autre chose importante à propos des balises HTML est de vous assurer que vous avez des balises d'ouverture et de fermeture imbriquées correctement. Par exemple, cela est incorrect. Vous avez la balise 1 et la balise 2, toutes deux ouvertes, puis la balise 1, sorte que la balise 1 est fermée avant la fermeture de la balise 2. C' est incorrect. La bonne façon de le faire ou de l'imbriquer correctement, devrait ouvrir la balise 1, puis la balise 2, fermer la balise 2 et fermer la balise 1. Ce ne sont, bien sûr, pas des balises HTML réelles, sont qu'un exemple pour montrer l'imbrication facilement. familles de zombies. L' une des choses importantes à propos de la nidification, c'est que nous allons l'appeler familles. Si l'élément A est complètement enfermé par l'élément B, alors A est dit être un enfant de B, et B est un parent de A, de sorte que vous pouvez avoir des enfants et des petits-enfants. Beaucoup de fois, surtout quand nous arrivons à CSS, nous parlerons beaucoup de ces relations. Mais si un élément en cause un autre, le premier élément est le parent et l'élément enfermé est l'enfant. Par exemple, nous avons des zombies n'ont pas de famille. Moi, la balise italique, à laquelle nous allons bientôt, est un enfant de la balise p. 4. Blocs de contenu zombie - partie 1: Bonjour et bienvenue à Code n'est pas aussi effrayant que les zombies. ce moment, nous allons regarder les blocs de zombies et d'autres blocs de contenu. Tout d'abord, nous avons des balises de paragraphe, parlé de ceux dans la dernière section. Tous les paragraphes devraient, aussi surprenant soit-il, figurer dans les balises de paragraphe. C' est l'unité de texte la plus élémentaire et 90 pour cent du texte sera dans les balises de paragraphe, mais pas tous, bien sûr, 10 pour cent. Il est clair que ce ne sera pas le cas. Mais ceux-ci peuvent être stylés avec du texte indenté ou pour avoir un retour chariot ou à la ligne entre les deux, selon ce que vous voulez faire avec votre site. Probablement plus généralement sur le web, il a tendance à être une ligne vide entre les paragraphes, mais il y a quelques exceptions à cela. Une autre balise dont nous pouvons parler est la balise break. Maintenant, la plupart du temps, vous ne voulez pas envelopper le texte en dur, vous voulez qu'il coule dans son conteneur. Parce qu'en particulier avec le design réactif, vous ne saurez pas exactement quelle est la largeur ou la hauteur ou quel que soit le conteneur pour le texte particulier. Si vous faites quelques retours difficiles, alors il va sembler funky si quelqu'un regarde sur un écran qui se trouve être d'une taille différente de la vôtre, ce qui est presque certainement probable en raison de la prolifération des appareils qui ont un écran différent tailles et ordinateurs de bureau, et qui sait quelle taille la largeur va être sur le bureau, etc. Il y aura des moments, cependant, où vous aurez besoin de formater une adresse ou contenu similaire où vous ne voulez pas de lignes entre eux. Par exemple, si vous avez fait une ligne vide entre les paragraphes, si vous créez un autre paragraphe, il continuera à créer des lignes vides entre les éléments. Cela n'a pas l'air génial, en particulier sur une adresse ou d'autres types de contenu comme celui-ci. Ce que vous pouvez faire est d'utiliser une balise de saut, et plutôt que de sauter une ligne, vous pouvez simplement aller directement à la ligne suivante. Maintenant, il y a souvent des moments où nous avons besoin d' aller hardiment là où aucun combattant de résistance zombie n'a jamais été auparavant, ce qui est ici l'étiquette audacieuse. HTML principalement structurel, la plupart des aspects esthétiques vont avec CSS, mais vous pouvez également désigner ce qui devrait être en gras ou fortement souligné. Par exemple, nous avons la balise b, qui est la balise bold, c'est ce que nous avions c'est à propos de HTML4 quand il est venu avec XHTML. Lorsque HTML et XHTML se sont réunis, ils voulaient être très stricts quant à la façon dont ils utilisaient les balises. Ils ont apporté la balise forte, qui est fondamentalement la balise en gras, mais marquée forte. En théorie, vous donne un peu plus d'informations que la lettre b seulement sur le contenu qui y est. Mais forte prend plus de temps à taper. Je suis dans le plus court dactylographie est meilleur camp. Finalement, ils ont essentiellement dit que b et fort sont équivalents et pouvez-vous les utiliser de cette façon comme vous le souhaitez. A la fois b et fort rendront le contenu gras. Il y a une lutte similaire avec i. Je serais le tag italique. À un moment donné, ils voulaient faire quelque chose mieux et donc ils sont venus avec la balise em pour l'accent, ce qui n'a pas vraiment de sens pour moi parce que c'est à peu près le même niveau cryptique que moi et peut être confondu avec l'unité de taille CSS. On y arrivera bientôt. Mais oui, ça ne semble pas vraiment aider. Finalement, ils ont juste fait les mêmes, en particulier HTML5. Les balises i et m rendront le contenu italique. Regardons un peu de code. D' accord. Cela vous montre les balises de paragraphe, les balises italiques et les balises en gras. On a une étiquette p ici. Se termine par une balise p de fermeture. Ici, nous avons une étiquette em. Vous pouvez également faire une balise i. Voici un exemple. Voici les exemples ici. Non pas parce que les zombies ne sont pas câlin-wuddly surprenant que cela puisse être. Il y a l'italique. La rigueur-mortis affecte vraiment la flexibilité. Si ça vous surprend, il y a un zombie sur la tête. C' est audacieux ou fort. C' est un audacieux. Ensuite, nous avons ici un exemple de ce qu'il ne faut pas faire. C' est essentiellement à la fois une imbrication incorrecte et des balises de fin inappropriées. Nous avons mis en correspondance le tag em et le tag i ensemble, mais bien qu'ils fassent la même chose, ils n'interagissent pas nécessairement correctement. Cette barre oblique je ne ferme pas ce m, donc c'est pourquoi zombie est encore italique. La barre oblique forte ne ferme pas vraiment la balise p, mais c'est plus difficile à voir car c'est là que la page se termine aussi. Mais oui, c'est le code là pour les paragraphes, les italiques et les caractères gras. 5. Blocs de contenu zombie - partie 2: Ensuite, nous devons parler de liens. La balise a ou ancre est ce qui est utilisé pour créer des liens hypertexte, attribut href est ce qui contient l'URL de destination et le contenu ou le texte du lien est le texte entre les balises d'ouverture et de fermeture. Ici, nous avons une balise d'ouverture, puis nous avons un attribut href liant à https://undead.institute, qui est mon site Web pour les livres de développement Web sur le thème Zombie, si jamais vous voulez aller plus loin, il y a un endroit où aller. Ensuite, nous avons le texte du lien, qui est plus Zombie Web Development, et la fermeture d'une balise. Une chose que vous voulez faire attention est les liens absolus par rapport aux liens relatifs. liens avec http ://ou https ://sont généralement des liens absolus, et tant que la page fonctionne, le navigateur devrait y arriver. Si vous n'incluez pas les liens http ://ou https ://, il s'agit de liens relatifs, le navigateur suppose qu'ils seront dans le même chemin d'accès au dossier ou sur le même serveur que cette page en cours. Si vous allez à https://google.com, il va aller sur une autre page Web, obtenir google.com et vous le rapporter. Si vous tapez simplement google.com, il recherchera un fichier nommé google.com, qui n'est pas tout à fait aussi utile en général. Faisons un peu plus de CODING LIVE, ici nous avons notre tag avec href, undyinglove.org, amour indéfectible. Nous avons quelques tags de rupture juste pour le briser, et ici nous avons un lien e-mail. Les liens e-mail fonctionnent assez similaires aux liens texte réguliers, mais ici vous commencez simplement par mailto : au lieu de http ://ne permet jamais. Ensuite, quand quelqu'un clique dessus, il ouvrira le client de messagerie par défaut sur cet ordinateur. Vous pouvez également mettre en place des liens téléphoniques, donc des liens télé et sms, ces deux derniers particulièrement utiles sur les téléphones mais peuvent également être utilisés partout aussi bien. C' est ainsi que vous faites quelques liens. Souvent, lorsque nous créons du texte pour le Web, il est important de le rendre écrémable ou de le rendre facile pour les gens de simplement le parcourir, une des meilleures façons de le faire est de passer les en-têtes et les sous-titres. HTML commence par <h1> travers <h6>. Il est important d'éviter les balises de titre vierges, tout comme quiconque est un utilisateur voyageant va parcourir une page avec les yeux sautant d' titre à l'autre, essayer de trouver le contenu qu'ils recherchent. En outre, les utilisateurs de lecteurs d'écran vont scanner avec leurs oreilles et sauter entre les en-têtes pour essayer de trouver ce qu'ils recherchent, en-têtes vides peuvent particulièrement les jeter, même s'ils ne rejettent pas autant les utilisateurs cités. Les titres, chacun sera généralement votre titre le plus important, mais il contient généralement le titre de la page de sorte que vous sautez, ne voulez pas utiliser souvent Sauf si vous savez que ce n'est pas le titre de la page. Le suivant est, et vous devriez commencer à briser votre contenu là-bas, , et continuer,,, plus de sous-titres,, souvent si vous arrivez ici, vous avez généralement des problèmes de contenu, vous pourriez vouloir pour vraiment regarder cela et si vous y arrivez vous avez presque certainement des problèmes de contenu. Ici, nous avons des en-têtes HTML, vous pouvez voir que vous montez dans hs, est le plus grand ici, puis, 3, 4, 5 et 6, ou PFC Wiggins doit signaler à un chipmunk aléatoire apparemment et comme vous pouvez le voir ; & lt ; h1> </h1> Une dernière section que nous allons couvrir ici concerne les citations. Il existe deux balises différentes que vous pouvez utiliser pour les guillemets en HTML. Les guillemets en ligne, nous le gérons avec un, vous pouvez également utiliser des guillemets. Mais si vous êtes dans une culture qui n'utilise pas guillemets comme les Américains ont tendance à, par exemple, langue française utilise un type différent de guillemets, mais si vous utilisez une balise, elle a deux grandes l'un est qu'il existe un attribut cite qui peut vous permettre de placer une URL d'où vous avez obtenu le devis afin que les utilisateurs puissent accéder à ce contenu. Il vous permet également de polyvalence dans le style des citations, surtout si vous avez besoin des guillemets doubles flèches ou guillemet, je pense qu'il s'appelle, qui sont utilisés en français. Vous pouvez effectuer ces modifications avec CSS plutôt que d'avoir à réécrire la page ou modifier la page. Il y a aussi des guillemets de bloc, qui a sa propre étiquette de <blockquote>, assez surprenante. C' est pour de très longues citations qui vont prévaloir contre les zombies puants, bien sûr, et par défaut, il mettra la citation hors d'autres textes, indentant et en lui donnant un peu d'espace au-dessus et au-dessous du texte environnant. Vous pouvez également utiliser l'attribut cite sur un blockquote, mais il y a aussi l'élément cite est que, avec un blockquote, fait référence à une œuvre créative et doit inclure soit le titre, l'auteur, ou l'URL de cette œuvre. Cela dit, une autre agence de normes Web dit que vous ne devriez jamais utiliser l'auteur dans l'élément cite, utiliser votre meilleur jugement. Enfin, nous avons ici deux exemples de citations, Alice in Zombieland, en utilisant l'élément cite, en utilisant le et c'est ainsi que vous pouvez jouer avec des citations et vraiment commencer à marquer les types de contenu dans votre site Web. 6. Énumérer les faiblesses des morts-vivants: Bon, bienvenue au Code n'est pas aussi effrayant que les zombies. Ici, nous parlons de listes et d'énumérer les faiblesses des morts-vivants, et tout ce que vous voulez énumérer. D' abord, organiser des zombies. Les listes sont donc un excellent moyen de continuer à rendre votre contenu plus écrémable. Ils vous permettent de mettre en place certaines choses, tout en facilitant la sortie du contenu qui est important. HTML lui-même a trois types de listes. Il y a une liste ordonnée, et une liste non ordonnée, ainsi qu'une description ou une forme de la liste de définitions. Tous sont constitués de deux éléments ou plus. La liste de description est composée de trois tandis que ordonnés et non ordonnés sont constitués de deux éléments distincts. Par exemple, si nous faisons une liste ordonnée, nous commençons par un ol. Ensuite, nous avons notre premier élément de liste, notre deuxième élément de liste, troisième, cependant beaucoup que nous avons, et enfin, nous finissons par un ol de clôture. Avec la liste des ordres, vous pouvez réellement changer les chiffres utilisés, les décimales sont les valeurs par défaut, mais vous pouvez aussi faire des minuscules alphabétiques comme a, b, c, d. Vous pouvez faire des chiffres romains, i, ii, iii, iv, etc. les décimales sont les valeurs par défaut, mais vous pouvez aussi faire des minuscules alphabétiques comme a, b, c, d. Vous pouvez faire des chiffres romains, i, ii, iii, iv, etc. mettent également en majuscule les versions de ceux-ci. Donc, un majuscule A pour le type est un alphabétique majuscule, et le majuscule I est des chiffres romains majuscules. Vous modifiez également le début des nombres en utilisant l'attribut start, et en définissant simplement la valeur numérique par laquelle la liste commence. Pour commencer la liste à sept, il suffit de commencer par guillemets sept. Vous pouvez également faire des listes non ordonnées, et elles sont très similaires à la liste ordonnée sauf qu'elles utilisent un ul au lieu d'un ol, mais elles utilisent toujours tous les deux le même li. Par exemple, nous commençons par un ul ici, nous avons notre élément li, tout comme nous le faisons avec un ol, et nous en avons autant que nous en avons besoin, puis nous le fermons avec un ul. Les listes de description sont un peu différentes. Ils ont une liste de termes et de descriptions, sorte que vous aurez deux choses différentes que vous écoutez. Avant HTML 5, il était appelé la liste des définitions, mais ils l'ont changée en liste de description pour élargir sa portée et vous l'utilisez pour plus de choses. L' élément externe est dl pour la liste de description, le terme désigné ou l'élément pour le terme est dt, et l'élément pour la description est dd. Cela fonctionne de la même manière. Nous commençons par un dl, nous avons un dt, nous avons un dd pour quelle que soit la description. Ensuite, nous pouvons faire un autre dt, dd, dt, dd, etc et ensuite fermer avec notre dl de fermeture. Jetons un coup d'oeil comment cela fonctionnerait. Tout d'abord, nous allons regarder les Ol. Donc, ici encore, nous avons notre ol, nous avons nos li. Si nous voulions dire commencer par sept, nous pouvons le faire. Devrait être entre guillemets qui pourraient également fonctionner sans eux, sorte que vous pouvez voir qu'il commence par sept là. Je pourrais aussi taper égal i, et vous pouvez voir que je commence à sept ans et ça commence par le septième chiffre romain, ou juste là. Donc, nous avons l'ol et nous avons un début et un type, vous pouvez jouer avec ça. Ensuite, nous avons notre liste non ordonnée, qui a à nouveau un ul et li. Vous pouvez également changer le type ul. Par exemple, je peux mettre un carré et ça fait des carrés. disque est la puce normale, et vous pouvez le modifier au besoin. Passant aux listes de définition ou aux listes de description, donc nous avons ici encore, notre dl, dt d'un marcheur, dd du zombie marchent toujours, shuffle. Si crawler, sa définition ou sa description et bien sûr PFC Wiggins, notre ami intrépide, et c'est à ce sujet pour les listes. 7. Une image vaut un millier de grognements: Une des choses que vous allez probablement vouloir mettre dans vos articles et telles sont des images. Tout d'abord, les images sont ajoutées à l'aide de la balise HTML image. C' est une étiquette vide donc il n'y a pas de balise de fermeture. Vous utiliseriez l'attribut source pour indiquer au navigateur d'où charger l'image. Ensuite, il ya aussi attribut Alt qui est utilisé pour donner une description du contenu, est particulièrement grand pour les lecteurs d'écran et moteurs de recherche parce qu'ils ne peuvent tout simplement pas accéder au contenu de l'image autrement. Mais il est important d'ajouter tout le texte pour aider à le rendre accessible à toute personne qui a une vision faible ou nulle. Vous avez votre balise image, votre attribut source, dans ce cas est zombie.png. S' il se trouvait dans un autre dossier, vous commencerez par n'importe quel dossier ou le chemin d'accès à ce dossier, puis zombie.png. Mais si c'est dans le même dossier, alors vous pouvez simplement l'utiliser. Vous pouvez également extraire quelque chose d'ailleurs en utilisant l'URL complète si vous aviez cela aussi, le texte alt va juste être du texte sur l'image. Dans ce cas, une recherche de zombie solitaire pour sa horde. Il est également important de savoir que vous ne voulez pas dire comme image de ou graphique de parce que c'est déjà inhérent à ce qu'il s'agit d'une image. Un lecteur d'écran va dire que c'est une image avant de lire tout le texte. Vous faites beaucoup de choses avec la taille sur les images. Il existe des attributs de hauteur et de largeur que vous pouvez définir pour déterminer la taille. Il est généralement préférable de le faire en CSS, ce que nous obtiendrons éventuellement, mais vous pouvez le faire dans votre HTML aussi. Si vous essayez d'agrandir une image l'aide de l'attribut height width, vous allez dégrader la qualité car vous étalez les informations sur une plus grande surface. C' est comme si vous avez une résistance donnée, donc pour ces zombies et vous les étalez trop minces ou contre la horde de zombies, ils ne seront pas aussi efficaces. Ils ne vont pas faire aussi bien parce qu'ils sont dispersés trop minces. Vous pouvez rendre l'image plus petite et nous laisserons la qualité intacte. Le problème va toujours être la même taille de fichier. Si vous avez une image de 10 meg et que vous réduisez de sorte que ce n'est que comme un 100 pixels par 100 pixels, cela va avoir l'air très petit, mais il va quand même prendre les 10 megs entiers à télécharger pour avoir l'air droit. Il est souvent préférable d'avoir la hauteur et la largeur exactes de l'image que vous utilisez afin d'éviter tout téléchargement excessif ou une qualité inférieure. Si vous changez la hauteur et la largeur juste au hasard, sans préserver le rapport d'aspect ou sans le faire proportionnellement, cela va écraser ou étirer l'image, et cela ne semble tout simplement pas bon. Sauf si c'est un zombie, alors vous pouvez écraser et les étirer tout ce que vous voulez. Comme je l'ai déjà dit, idéalement, l'image devrait être sa taille naturelle pour obtenir le meilleur équilibre entre la plus petite taille de fichier et la meilleure qualité. Parlons donc des différents types d'images que vous pouvez utiliser sur les sites Web. Tout d'abord, il y a GIF, c'est pour Graphic Interchange Format. Je le prononce GIF. Beaucoup de gens sur Internet diraient que je me trompe, mais je dirais que ce n'est pas jraphic. Donc ce n'est pas JIF c'est GIF, mais c'est à vous quel côté vous voulez tomber dans ce combat. Les GIF fonctionnent dans tous les navigateurs. Ils permettent l'animation, ce qui est l'une des raisons pour lesquelles ils sont toujours là. Beaucoup d'animations que vous voyez sur le web sont souvent en GIF particulièrement jusqu'à récemment. Bien qu'il y ait beaucoup de nouvelles choses en cours avec CSS et animation qui permettent de les faire nativement par opposition à juste dans les GIF. Les GIF permettent également la transparence, ce qui est utile, mais la transparence n'est pas toujours aussi bonne. Parfois, il est un peu croustillant ou montre plus de bord que vous voulez. Il s'agit d'un format avec perte, ce qui signifie que lorsque vous enregistrez en tant que GIF, vous perdez des informations. Donc ça ne garde pas toutes les informations. Donc tu dégrade un peu la qualité. Mais l'avantage que vous obtenez est que vous obtenez une taille de fichier plus petite, ce qui prend moins de temps à télécharger. Il est donc équilibré entre la qualité ou la qualité de l'image et la taille de l'image. GIF fonctionne particulièrement bien avec de grandes nuances de couleur, telles que des logos ou des lignes. JPEG signifie Joint Photographic Experts Group. Il fonctionne dans tous les navigateurs, ne permet pas l'animation, n' a pas de transparence autorisée pour cela. C' est aussi une compression avec perte. Mais c'est super génial pour les photos et fait un bien meilleur travail de compression qu'un GIF, et donc il brille vraiment dans les photographies et autres images complexes. PNG, signifie Portable Network Graphics. Il est le plus récent des normes, mais fonctionne toujours et à peu près tous les navigateurs. Vous devez aller assez loin pour trouver un navigateur qui ne fonctionne pas dans. Il ne permet pas l'animation, mais il permet une transparence de haute qualité. Si vous avez besoin de transparence derrière une image, vous voulez utiliser un PNG. C' est une compression sans perte, au moins au PNG-24, le PNG-8 perdant. Ce qui est génial, c'est que vous conservez toutes les informations. Il suffit de le compresser dans une boîte plus petite au lieu de se débarrasser de certaines informations pour qu'il rentre dans des boîtes plus petites pour ainsi dire. Les algorithmes [inaudibles] sont particulièrement bons sur la même chose que les GIF sont bons. Des choses avec de grandes étendues de couleur, de logos, d'art au trait, ces choses, mais il peut être utilisé sur n'importe quoi. SVG est probablement la plus récente de ces normes, ou du moins celles qui veulent être standardisées. Supporte des graphiques vectoriels évolutifs. Il fonctionne nativement dans la plupart des navigateurs, mais vous pouvez également l'utiliser dans une balise image, dans les anciens navigateurs, donc il fonctionne toujours là aussi. Vous pouvez également l'utiliser comme uncheck dans les navigateurs plus modernes, mais nativement a parfois des avantages intégrés comme l'accès à CSS et des choses comme ça. Il prend en charge l'animation et l'animation via CSS. Il prend également en charge la transparence, et il évolue de haut en bas sans aucune perte de qualité. Les graphiques SVG sont ce qu'on appelle vecteur. Ils sont de même encore une fois, plus d'art de ligne et de logo choses. Mais vous pouvez les mettre à l'échelle de haut en bas sans aucune perte de qualité car ils sont basés sur des mathématiques plutôt que sur des pixels. Généralement une très petite taille de fichier, il utilise des balises comme HTML, ce qui est quand je parlais d'être natif. Je parle d'utiliser les balises directement dans votre HTML plutôt que d' importer un fichier SVG via une balise image ou quelque chose comme ça. Encore une fois, mieux avec l'art au trait, les logos, les icônes, ces choses. Maintenant, il y a une autre balise que nous utilisons parfois pour les images, pas directement pour les images, mais généralement pour les images environnantes. Ça s'appelle la figure tag. C' est principalement un élément conteneur pour les graphiques, tableaux, les graphiques, toutes ces choses. Il devrait être autonome, mais se rapporter au contenu principal. Je veux dire, c'est particulièrement ce que vous verriez avec différents documents et choses où vous auriez un chiffre qui supporte les données, montre les données ou soutient les conclusions, et cetera. L' élément figure le permet. Il est mieux utilisé pour des informations descriptives, prend en charge le texte qui l'entoure. Un autre élément, la légende de la figure, vous permet d'ajouter une légende à la figure. Voici une balise d'image en direct. Donc nous avons l'image, nous avons notre source. C' est de là qu'on le trouve. Nous avons tous des textes. Si nous voulions mettre ceci dans une figure, nous ajouterions simplement la balise de figure, fermant avec la figure. Ensuite, si nous voulions dire, ajouter une légende, nous pouvons faire vieux Zombie dans un chapeau haut, et ensuite nous avons un chiffre. Passons à la vidéo suivante. 8. Habiller les zombies avec les feuilles de style en cascade (CSS): Maintenant, nous arrivons à CSS. CSS signifie Cascading Style Sheets. Dans notre Zombie [inaudible] HTML va être le squelette et CSS est la chair et les vêtements. HTML est la structure et CSS est le look and feel, ses couleurs, ses polices, c'est la façon dont les choses sont présentées. Il stylise le texte, prévoit des changements esthétiques. Il cascades à travers les documents. Feuilles de style en cascade permettant aux éléments enfants d'hériter certaines des propriétés de leurs éléments parents, sorte que vous pouvez hériter des couleurs et des tailles, et certaines de ces choses. CSS vient dans une liste de règles. Une règle se compose d'un sélecteur et d'un bloc de déclaration. sélecteurs choisissent les éléments auxquels les déclarations s'appliquent et les blocs de déclaration exposent les changements ou parlent de ce qui devrait se passer. Par exemple, ce n'est pas un vrai sélecteur CSS, mais c'est à quoi cela ressemblera. Vous avez d'abord votre sélecteur, puis vous avez un support bouclé d'ouverture, puis vous avez la déclaration, puis une valeur, puis un crochet bouclé de fermeture. Le deux-points et le point-virgule sont importants, alors assurez-vous de les inclure. Parlons plus de la sélection. sélecteurs sont disponibles en trois saveurs principales. Vous avez des classes, des ID, des éléments. Vous pouvez les combiner pour créer ce qu'on appelle des sélecteurs de descendants. Ce sont des descendants de la même manière qu'un enfant est l'enfant ou le descendant d'un élément parent. Pour les classes, vous allez utiliser un attribut de classe, pour les éléments HTML, et en CSS, vous devez avoir une période en face de lui, par exemple la période zombie-school. ID ; vous allez utiliser l'attribut ID et n'apparaît qu'une fois par page et en CSS, vous avez besoin d'un hashtag devant eux. Hashtag unique-zombie. déclarations CSS sont généralement des mots clés ou des paires de valeurs séparées par deux-points et utilisent un point-virgule pour désigner la fin. Vous pouvez avoir plusieurs déclarations par règle et des crochets bouclés enveloppent le bloc de déclaration pour afficher le début et la fin du bloc. Par exemple, avec la balise p, nous pouvons définir la couleur sur jaune-vert, puis cela changera tout le texte du paragraphe en un jaune-vert maladroit. Ici, nous avons du HTML sur les côtés, nous avons juste des balises de paragraphe. Le suivant a une classe. C' est classe est, hoity-toity, puis ID, ce qui est unique. Par exemple, ici, nous avons la couleur de bleu clair pour le paragraphe. Si on change ça pour dire rouge, ça devrait se mettre à jour ici. La couleur est rouge, hoity-toity sélectionne le milieu. Si on change ça en vert normal, ça va. La raison pour laquelle il est devenu rouge un peu avant de devenir vert était qu'un p-tag s'applique également à l'hoity-toity, p-tag, mais hoity-toity étant une classe va réellement remplacer le p-tag parce qu'il est plus spécifique parce que ce n'est pas tous balise p. Ce sont seulement ceux qui ont une classe d'hoity-toity, puis si nous changeons, dites l'unique et ajoutez-le. Changons-le en bleu, puis il devient bleu là-bas. Comment mettre ensuite CSS et HTML ensemble ? Il y a quatre façons de le faire. Attribut de style, balise de style, qui sont les deux principaux dont nous parlerons, puis il y a une feuille de style externe et l'importation d'une feuille de style. Encore une fois, ils sont plus complexes que ce dont nous avons vraiment besoin. On parlera des deux premiers. L' attribut style va sur n'importe quel élément HTML. Il ressemble à une classe ou à d'autres attributs dont nous avons parlé. Vous avez seulement besoin de la déclaration, puisque vous êtes déjà sur l'élément spécifique où nous sélectionnons cet élément, donc vous n'avez pas besoin d'un sélecteur, juste la déclaration. L' avantage est que vous pouvez être très précis dans la façon dont vous appliquez les règles. L' inconvénient est si vous définissez cela sur un certain nombre d'éléments, disons de changer tous les textes de paragraphe en bleu, mais alors votre patron veut le changer en rouge ou vous devez changer quelque chose plus tard, alors vous devez modifier chacun des eux. Pour voir à quoi ressemble l'attribut de style, ici nous l'avons, sorte de p-tag, nous avons un attribut de style avec une couleur verte et le paragraphe aura du texte vert. Style élémentaire ; il y a un élément de style qui fait partie de l'élément HTML, juste le style et vous pouvez mettre CSS entre les balises de style d'ouverture et de fermeture. Dans ce cas, vous pouvez définir tous les paragraphes en bleu, puis si vous changez cela, il changera partout. Avec la balise de style, le p, puisque nous avons un sélecteur, s' appliquera à toutes les balises de paragraphe dans cette page particulière et nous pouvons changer la couleur en violet ou rouge ou tout ce que nous voulons changer simplement en changeant c' est un endroit plutôt que d'aller à chaque attribut de style et de les changer là. Il y a quelques mises en garde ici. Utilisez vos nouveaux pouvoirs à bon escient. couleurs de la marque et les polices sont là pour une raison de créer de la cohérence sur de nombreuses pages. Si vous allez contre eux, faites-le à vos risques et périls. Ce n'est pas ma faute. Vous faites ce choix. Je te dis juste comment le faire quand c'est logique de le faire. Utilisez vos nouveaux pouvoirs à bon escient. Si vous essayez de faire un nouveau design et look and feel par page, c'est vraiment le choix sage qui peut confondre les utilisateurs. Il y a des moments où vous voulez faire cela, peut-être, par exemple, si vous avez une figure que vous vouliez alors styler un peu différemment que le reste du site qui pourrait être logique de le faire. La cohérence est vraiment importante. Cela aide les utilisateurs à savoir qu'ils sont sur le même site, qu'ils traitent avec la même institution et si vous changez constamment les polices ou les couleurs constamment modifiées, cela n'aura aucun sens et ils vont partir. Ils vont aller sur un autre site. Il y a des moments où vous pouvez et devriez aller à l'encontre des couleurs de la marque et des polices. Ils sont rares et si vous le faites, vous devriez avoir une très bonne raison de le faire. Cela devrait être des raisons comme la façon dont vous affichiez le contenu nécessaire pour avoir une police et une couleur différentes, afin que vous puissiez fournir un contraste avec la marque, les polices et les couleurs ou quelque chose comme ça. Cela devrait être une très bonne raison et il devrait être une que vous pouvez articuler. Encore une fois, allez à l'encontre de la marque, des couleurs et des polices à vos risques et périls. Tout cela dit cependant, soyez créatif et repoussez les limites. Le web est un endroit où jouer et s'amuser et si nous ne continuons pas à repousser les limites, nous ne saurons jamais ce que nous pouvons faire. 9. Les polices des zombies: D' accord. Parlons des polices. Vous pouvez utiliser n'importe quelle police de votre choix pour votre page Web. Ça aura fière allure sur votre ordinateur, mais si d'autres personnes ne l'ont pas, ça ressemblera à du vomi de morts-vivants. Aussi, vous devez faire attention à ce que changer la police sans une bonne raison augmente l'horreur, n' est pas une bonne idée de le faire à moins que vous ne sachiez ce que vous faites ou que vous le modifiez de quelque chose d'autre au type de police désiré qui est utilisé ailleurs. Étant donné que les polices ne sont pas disponibles sur tous les systèmes, vous devez généralement choisir plusieurs polices qui ressembleront si aucune n'est disponible. Par exemple, ici, j'ai une classe de contenu et la règle de font-family est que choisir la police que nous voulons utiliser. Le premier qui sera disponible est Helvetica ou que nous espérons être disponible est Helvetica. Si ce n'est pas disponible, alors je vais aller avec Verdana, et si ce n'est pas disponible alors, vous pouvez également changer la taille de la police. Vous pouvez utiliser quelques types différents d'unités, pixels, pourcentages, ems, et même quelques autres. J' ai tendance à préférer EMS parce qu'ils sont une unité relative. Un em est égal à la taille de police par défaut, généralement il y a 16 pixels. Em sont des unités relatives, ce qui signifie que les balises enfants hériteront de la taille de police de leurs parents, et que la taille de police du parent devient la nouvelle taille de police par défaut de l'enfant. Leur seul em est basé sur la taille de police du parent. Par exemple, si la taille de la police d'un parent est définie sur deux em, et que l'enfant est également réglé sur deux em, si l'on suppose que 16 pixels est la base, alors la taille de la police des parents sera de 32 pixels, mais la taille de la police de l'enfant sera de 64 pixels car il construit deux fois la taille par défaut de son parent. L' avantage ici est que les choses deviennent de plus en plus petites proportionnellement. Si, par exemple, un utilisateur décide de changer sa taille de police par défaut de 16 pixels à 24 pixels, ou même s'il passe de 16 pixels à 10 pixels ou quelque chose du genre, alors toutes les tailles de police vont changer en conséquence. Si nous descendons à 10 pixels par exemple, la taille de la police du parent serait alors de 20 pixels, et la taille de la police de l'enfant serait alors de 40 pixels. Ils vont toujours rester proportionnés à ce qui a été fixé à l'origine. Si vous les définissez avec des nombres de pixels spécifiques, ils ne changeraient pas, et ce n'est pas vraiment bon pour l'utilisateur car parfois les concepteurs peuvent faire des choses très petites, ce qui peut être difficile à lire. Voici un exemple de changement de taille de police. Dans ce cas, nous changeons la taille de la police à 1,25 em, donc nous augmentons un peu à environ 20 pixels, supposant que 16 pixels étaient la valeur par défaut. Ici, nous avons la version pixel, taille de police de 20 pixels, et vous pouvez également utiliser des pourcentages, taille de police d'un 125 pour cent. Poids des polices. Vous êtes probablement familier avec le gras, un poids plus lourd, que la police normale. Mais il y a beaucoup d'autres poids que vous pouvez utiliser. Les polices sont disponibles dans de nombreuses tailles et épaisseurs. La propriété Font-weight vous permet de modifier cela. Vous pouvez passer de 100-900, les incréments d'un 100, 400 est normal et 700 est gras. La plupart des polices n'ont pas les neuf poids. Je dirais que c'est un nombre rare de polices qui ont les neuf. La plupart auront au moins 400 et 700, mais il peut y avoir parfois une lumière et certaines de ces choses. Vous pouvez également utiliser les mots-clés normaux et gras pour les définir également sans avoir à se souvenir de la chose 400 et 700. Quel est le poids des zombies ? Ici, nous avons le contenu font-weight gras, vous pouvez également définir le poids de la police à la normale, et l'équivalent en nombres. Ici, nous avons le poids de la police envoyé 100, puis finalement à 400. Style. Font-style est la façon dont vous mettez en italique ou unitalicisez le contenu à partir de CSS. Nous avons juste le style de police italique définit le style de police en italique, et normal le redonne à la normale. Par défaut, comme je suis sûr que vous l'avez vu, les liens sont soulignés en bleu. Parfois, vous voudrez supprimer le soulignement ou même l'ajouter à nouveau. C' est utilisé text-décoration. Text-décoration, aucun n'a été supprimé. Le texte de soulignement ou la création de soulignement l'ajoutera à nouveau. Vous pouvez également changer la couleur de la police, et comme changer la famille de polices, vous voulez également vous assurer que vous l'utilisez bon escient et choisissez des couleurs qui sont agréables à l'œil, et non le vert jaune malade que vous vont probablement me voir choisir ici. Il y a beaucoup de façons de définir la couleur en CSS. Nous pouvons utiliser des mots-clés comme nous l'avons vu dans le dernier chapitre, comme bleu et vert, pêche, bouffée, etc. Il y a aussi une notation hexadécimale qui ressemble à ceci. Je ne sais même pas de quelle couleur c'est. Ne vous inquiétez pas. Tu n'as pas besoin de savoir. Mais si vous savez qu'il s'agit d'une couleur, le hashtag avant qu'il ne vous montre qu'il s'agit d'une couleur, alors vous pouvez obtenir la couleur que vous voulez et un programme graphique, puis copier cette valeur hexadécimale dans votre HTML afin de changer la couleur. Bien que les mots-clés soient utiles, ils n'ont pas presque autant de couleurs que les nombres hexadécimaux le permettent, et encore une fois comme je l'ai dit, tout programme graphique devrait être en mesure de vous aider à obtenir la valeur hexadécimale que vous peut alors simplement brancher. Voici un exemple de définition de la couleur sur jaune vert, voici un autre exemple utilisant la notation hexadécimale. Notez que le hashtag est là, et est nécessaire pour faire des nombres hexadécimaux. Jetons un coup d'oeil à un code. Ici, j'ai juste un petit paragraphe auquel j'ai ajouté tout un tas de choses différentes à. Ici, nous avons la famille de polices, tueur de zombies étant une police qui n'existe pas réellement. Il ne va pas le trouver. Donc, comme un Raleway existe sur mon ordinateur, ça va me montrer ça à Raleway. Si raleway n'existe pas car il peut ne pas être sur votre ordinateur, il choisira helvetica, et si helvetica n'est pas disponible, alors il choisira une police san-serif, probablement ariel, mais cela dépend vraiment de votre ordinateur et de ce que vous faites. Ici, nous devons le rendre audacieux. Donc j'ai fait cette petite chose audacieuse pour juste mettre la police un peu gras, texte mince ici, Zombie. Si vous n'avez pas raleway sur votre ordinateur, vous ne verrez pas cela entrer dans votre texte, car raleway est une police qui a plusieurs versions ou plusieurs poids. Donc, j'ai été en mesure de montrer cela comme le poids de zombie. Ensuite, nous avons un texte normal. Donc le poids de la police est normal, texte incroyablement grand est ce petit truc de type. Je le change à six em. Vous pouvez également changer les choses en très petites. Donc, dans ce cas, j'ai changé le mot site Web à seulement six pixels ou en fait oui, je suis désolé. Cela garantit que nous avons Raleway. Donc, vous devriez toujours voir Raleway sur votre ordinateur même si vous ne l'avez pas à cause de la façon dont je l'ai configuré. Revenons à la police, si italique, alors j'ai mis tout ça en italique, et au milieu ici j'ai juste ce mot zombie que je fais ennuyeux. Donc, je change le style de police et normal, et il n'est plus en italique. D' accord. C'est tout pour cette section. Passons à la suivante. 10. Mettre les morts-vivants en boîte : le modèle des boîtes CSS: La prochaine chose dont nous allons parler est le modèle de boîte CSS. Le modèle de boîte CSS détermine comment les éléments sont disposés, comment ils interagissent les uns avec les autres. On dirait quelque chose comme ça. Vous avez une marge tout autour des bords. Vous avez une frontière. A l'intérieur, tu avais du rembourrage. Ensuite, au centre même se trouve le contenu. En général, dans le modèle de boîte, la largeur est égale à la largeur du contenu, non à la largeur de la bordure comme on le pense plus généralement. Il y a un moyen de changer cela en utilisant ce qu'on appelle border-box, un peu au-delà de ce cours. Mais la largeur du contenu est généralement la largeur de celui-ci, puis vous pouvez ajouter un remplissage et une bordure et une marge pour pousser les choses et ajouter un espacement, etc Width définit la largeur de l'élément par défaut à la largeur du contenu. Hauteur définit la hauteur de l'élément. Rembourrage est l'espace entre le contenu dans son bord extérieur. Border est le bord extérieur de l'élément. Marge est l'espace entre les éléments. Vous pouvez également utiliser ems pour ces valeurs. Vous n'avez pas à utiliser simplement des pixels, des pourcentages ou autre ; vous pouvez également utiliser ems. Boxer les zombies. La marge et le remplissage peuvent chacun avoir des valeurs définies. Une valeur pour mettre tous les côtés, comme nous le faisons ici. Marge de 2em va mettre, en supposant que 16 pixels sont la base, 32 pixels autour de chaque côté du contenu, et puis un autre 16 pixels de remplissage y seront également disponibles. Mais vous définissez également les côtés individuellement en utilisant quelque chose appelé notation de trouble, sorte que T, R , B, L est important. C' est l'ordre dans lequel tu mets les côtés. Donc en haut, à droite, en bas, à gauche. C' est le mot « problème », c'est comme ça que je me souviens. En haut, à droite, en bas, à gauche parce qu'ils sont dans le même ordre dans le mot trouble. Marge, nous mettons 1em en haut, 16 pixels à droite, zéro pixels en bas, et cinq pour cent à gauche. Le rembourrage, nous mettons 20 pixels en haut, zéro à droite, 10% en bas, et 2em à gauche. Les bordures nécessitent trois valeurs pour être définies. La première est la largeur de la bordure. Quelle est la largeur de la bordure, généralement en pixels, ems, l'une de ces unités. Style de bordure, c'est généralement solide, pointillé, pointillé, tous ces types de choses, et il y a plus de styles disponibles aussi. Neuf fois sur 10 j'utilise solide et non pointillé ou pointillé. Mais il est à votre disposition si vous avez besoin de l'utiliser. Puis aussi la couleur de la bordure. La couleur que vous voulez que la bordure soit. Vous pouvez utiliser des mots-clés, hexadécimal, etc. Voici un exemple. Nous avons une bordure avec un deux-points, puis la largeur est d'un pixel, solide est le style, et #47D2F3 est la couleur. Beaucoup de fois, si vous voulez ajouter une image à un ensemble de textes, il se démarque souvent comme un humain dans une horde de zombies. On l'appelait flotter. Vous pouvez le flotter à gauche ou à droite pour l'envoyer au bord gauche ou droit de l'élément. Comme vous pouvez le voir ici, l'image du haut est flottante à gauche, et l'image du bas est flottante à droite. Lorsque vous faites cela, vous pouvez utiliser la marge ou le remplissage pour ajouter un espacement autour celui-ci afin que le texte ne s'affiche pas directement sur l'image. Ici, nous avons flotteur, d'accord. C' est juste du côlon flottant à droite. Ensuite, marge, nous définissons cinq pixels en haut, zéro à droite, cinq pixels en bas et cinq pixels à gauche. Nous faisons ce zéro pixels sur la droite afin qu'il puisse être affleuré vers le bord droit du contenu plutôt que de coller en cinq pixels. Nous ne voulons pas que le texte soit juste en face de l'image, donc nous le poussons à cinq pixels. De même, avec le flotteur, à gauche, une marge de cinq pixels sur le haut, cinq sur la droite, cinq sur le bas, zéro sur la gauche, encore une fois, afin que nous puissions le mettre à affleurer à gauche comme nous le flottons à gauche, et cinq pixels partout ailleurs pour empêcher le texte de s'y opposer directement. Nous faisons également des arrière-plans ou modifions la couleur d'arrière-plan d'un élément avec la propriété background-color. Donc quelque chose de couleur de fond de rouge. Si vous le faites sur un élément qui contient du texte, assurez-vous d'ajouter un remplissage afin que la couleur ne soit pas directement sur le bord du texte. Une chose importante à noter, une des grandes différences entre le remplissage et la marge est que la couleur d'arrière-plan d'un élément apparaîtra à travers le remplissage mais pas la marge. Ici, nous avons une grande variété de façons différentes de faire le rembourrage. Nous avons un rembourrage d'oreiller, espace personnel, espace personnel dans le métro, individuellement, groupe, mur droit. Nous allons les regarder directement. Tout d'abord, nous avons comme un oreiller est cet élément ici. Nous avons un rembourrage de 2em tout autour. Je pourrais colorer le fond rouge juste pour que ce soit facile à voir. Ensuite, nous avons un rembourrage humain, que j'ai donné rembourrage sur le dessus était zéro, rembourrage sur la droite était de 1em, rembourrage sur le fond était de 12.375 em. Peut-être que votre rembourrage est différent, mais le rembourrage sur la gauche était aussi 1em. Ici, nous avons un rembourrage avec fondamentalement aucun sur le dessus et tout un tas sur le fond. Ensuite, nous avons un espace personnel où nous voulons faire autant d'espace personnel que possible. Nous avons une marge de 5em, mais comme vous pouvez le voir ici, il n'y a pas de pagaies, donc le texte va jusqu'au bord des éléments, ce qui n'a pas l'air très bon et est difficile à lire. Alors, si vous êtes au métro ou au métro ou autre, vous n'avez presque pas d'espace personnel. Vous avez un peu au-dessus de votre tête, peut-être un peu à votre droite. Vous êtes assis sur un siège, donc il n'y a pas de marge là-bas, et peut-être un peu à votre gauche. C' est là que se trouve cette marge. Ensuite, nous avons un rembourrage humain. C' est la même chose que ci-dessus. C' est juste en utilisant une déclaration pour définir toutes les règles. Espace personnel dans le métro. La même chose ici. Mêmes nombres que ci-dessus, mais étant utilisé dans une déclaration. Avec les bordures, vous pouvez avoir défini individuellement. Donc, vous avez une bordure d'un pixel, solide, couleur de bordure de vert, et il est, la couleur de bordure de vert. Une note, juste cette ligne ici provient de cet élément hr, qui signifie règle horizontale comme un élément HTML que vous pouvez utiliser pour séparer les choses si nécessaire. Ensuite, nous avons regroupé. La bordure est regroupée ici avec un pixel, solide et bleu. Ensuite, le mur de droite, nous avons une bordure juste à droite, 50 pixels, solide, et noir. C' est une autre façon de faire les frontières, etc. 11. Taper du code depuis Word en plein dans son visage de zombie: Parfois, lorsque vous travaillez et que vous avez construit votre contenu dans Word, une façon parfaitement normale de créer du code, Word essaie d'être utile et d'inclure la police exacte que vous utilisez, l' espacement exact que vous utilisez, et toutes ces béquilles que Tu ne t'en fous vraiment pas. Vous voulez juste qu'il ait juste votre contenu, peut-être avec l'gras et l'italique et ces choses intactes, il y a quelques façons de résoudre ça. À un moment donné, j'ai eu ce texte fou. Je ne sais même pas par où commencer avec beaucoup de ça. C' est juste bizarre. L' une des meilleures choses que vous pouvez faire est de le mettre dans un éditeur de code. Dans ce cas, je l'ai mis ici dans CodePen. Mais vous pouvez utiliser n'importe quel éditeur de codage couleur que vous voulez. Cela vous donne beaucoup d'informations ou aide vraiment à clarifier ce qui se passe. Maintenant, vous pouvez voir que tout cela provient juste d'une balise span et il y a une section en italique gras ici, sans raison, il semble. Il y a beaucoup de choses bizarres qui se passent ici. Maintenant que vous pouvez voir le codage couleur, bien sûr, vous pouvez simplement supprimer la balise span. N' oubliez pas de supprimer l'autre plage ou la plage opposée. Beaucoup de ce contenu, en fait, nous n'avons même pas besoin parce que c'est juste pour ce gars ici est ce qu'on appelle un espace ininterrompu. C' est équivalent à juste un espace, mais a l'avantage de ne pas rompre la ligne. Parfois, il est utilisé comme porte-place pour les choses. Mais là, nous avons de l'espace et nous pouvons en fait simplement supprimer toute cette section ici. On y va. Maintenant, nous avons juste le code que nous voulions et pas de toute la folie. C' est une excellente façon de le faire. Certains systèmes de gestion de contenu sont meilleurs à supprimer que d'autres. Parfois, dans Drupal, ils auraient une pâte de Word qui supprimera beaucoup de cette cruft que vous ne voulez pas tout en laissant le contenu que vous faites et le style que vous faites. Une autre façon de s'en débarrasser est de le coller en texte brut, alors copiez le contenu dans un éditeur de texte brut. Cela devrait généralement supprimer tout formatage, ce qui n'est pas toujours idéal. C' est une autre façon de le faire. Aussi, si vous avez une copie de WordPress pratique, WordPress a tendance à faire un assez bon travail de supprimer beaucoup de cette cruft et excès de code tout en laissant les choses que vous voulez garder si vous le collez dans l'éditeur visuel. C' est une autre excellente façon de contourner le problème. Peut-être que si vous utilisez WordPress d'un côté et Drupal autre quelque chose que vous pouvez toujours coller dans WordPress, puis copier à partir de là et coller dans l'autre application ou l'autre chose que vous faites. Il y a beaucoup de façons différentes de contourner cela, mais le mettre dans un éditeur de code que les codes de couleur est probablement le meilleur moyen de garder le contenu que vous voulez et de se débarrasser de ce que vous ne faites pas. 12. Extraire les cerveaux : les citations: Donc quelque chose que vous pourriez vouloir faire est de créer des guillemets, et je pense que vous avez assez d'outils maintenant pour être en mesure de le faire. Donc, ce que nous allons faire, c'est que je vais prendre une citation de ce morceau particulier qui est une vieille histoire de Lloyd Arthur Eshbach sur les zombies, et je vais juste tirer quelques mots et créer une citation à tirer. J' ai donc trouvé le contenu que je veux retirer. C' est cette petite section ici, « Du drap de brouillard dans le clair de lune a glissé un étrange métier. » Bon, donc je vais le copier, et ensuite je vais le coller à nouveau. En fait, ce que je veux faire, c'est que je veux aller un peu plus loin, je vais ajouter blockquote, classe égale bonne classe avec citation pull, et je vais aller de l'avant et fermer ce blockquote juste pour ne pas oublier de le faire. Je vois que j'ai mal tapé quelque chose là-bas. Alors je vais l'ajouter encore ici. Donc, si nous faisons défiler vers le bas, nous devrions voir ici est cette section à nouveau comme une citation séparée. Donc maintenant, je vais aller à mon CSS, et je vais tout d'abord faire, mettre la classe et ajouter du contenu ici. Donc quelques choses que je veux faire ici. Je veux définir une largeur de dire 200 pixels, et peut-être que c'est un peu petit. Essayons 300 pixels, et je veux augmenter la taille, qu'il se démarque. Donc je vais faire une taille de police de deux em donc c'est un peu plus grand. C' est peut-être trop. Allons dire 1.5. Encore un peu gros. Faisons 1,25. D' accord, donc c'est encore un peu plus grand, mais pas tout à fait fou grand. Je vais le flotter à droite. Comme vous pouvez le voir, faites défiler un peu vers le bas pour que nous puissions continuer à le voir. Je vais ajouter une bordure juste sur le côté gauche. Disons cinq pixels. Que diriez-vous de rouge et solide. C' est beaucoup trop proche du texte lui-même, donc nous voulons faire un peu de remplissage, plutôt. Laisse-moi juste faire le rembourrage à gauche, et je ne sais pas, peut-être un em. Voyons à quoi ça ressemble. C'est probablement bon. Il s'avère que ce rouge est un peu plus léger que je veux, donc je vais à la couleur que j'ai choisie un peu plus tôt. Je vais juste changer de couleur. C' est plus un rouge profond qui, je pense, correspond mieux à ce que nous regardons ici. Maintenant, je n'ai ajouté que du rembourrage à gauche, mais je pense que ce serait bien si nous ajoutons un rembourrage à tous les côtés, et ce qui va aider avec ça, ça va faire sortir la bordure un peu plus haut aussi. Donc je change juste le rembourrage à un em et la frontière est un peu plus. Tu sais quoi ? Je pense que je veux faire un em, donc en haut et en bas, je pense que je veux le faire .5 em, puis à gauche et à droite, je vais faire un seul em, et cela va ensuite le mettre comme ça. On peut aussi changer la couleur ici, peut-être qu'on le grise un peu. Alors faisons pour le faire sortir un peu, et là nous avons une citation à tirer. On peut aussi avancer un peu ce qui, je pense, pourrait être une bonne idée. Donc je vais juste le couper et le coller, et être dans ce précédent. Donc une autre chose que nous devons penser est qu'avec blockquote vient quelques styles par défaut. Donc, si nous avons trop d'espace autour, ce que je pense que nous sommes, nous pouvons supprimer une certaine marge et nous assurer que nous n'avons pas trop de choses en haut et en bas. Mais ce que cela a fait, c'est qu'il a rapporté cette information ici trop près, à mon avis, de la frontière. Donnons-lui un peu plus de marge. Au lieu de zéro, faisons 0,5 em. Ce n'est pas tout à fait suffisant. Faisons un em. On y va. Il y a un peu plus d'espacement. Je pense aussi que nous rendons cela plus petit, ça va paraître un peu mieux parce que nous avons du texte qui ne continue pas ici. Oui, je crois que j'ai déménagé un peu trop loin. Voyons à quoi ça ressemble si je le mets là-dedans. D'accord, ouais. Ça a l'air assez bien, et là vous avez votre citation. Vous allez certainement faire des variations là-dessus. Nous pourrions ajouter une couleur de fond pour dire rouge très foncé, disons comme ça. C' est peut-être un peu trop sombre. Allons le dire comme ça. C' est trop lumineux. Il y a à peu près droit. Donc, nous pouvons faire quelque chose avec des choses comme ça, nous pouvons agrandir la frontière un peu si nous le voulions. Pensez à la façon dont nous voulions que la chose ressemble et comment nous voulions qu'elle interagisse avec l'autre contenu. Si nous utilisons cette couleur d'arrière-plan, je pense que je vais changer la couleur du texte en blanc. Peut-être trop. Essayons quelque chose d'un peu blanc cassé donc je pense un peu moins prononcé. Mais oui, tu l'as là. Vous pouvez jouer avec vos blockquotes et simplement les ajouter vous-même sans avoir besoin d'embaucher un concepteur ou faire autre chose que simplement ajouter un peu de texte et un peu de CSS. 13. Merci pour les souvenirs: Eh bien, on a passé de bons moments ensemble. Vous avez appris du HTML, du CSS. Vous avez appris ce qu'est une balise, un élément. Règles et déclarations. [ inaudible] Mais maintenant je dois dire au revoir. Merci d'avoir regardé mon cours. J' espère que vous avez beaucoup appris et que vous pourrez l'appliquer tout au long de votre vie. N' oubliez pas d'inclure vos projets d'annuaire, et de les mettre en place pour que je puisse les voir, afin que les autres étudiants puissent les voir et simplement montrer ce que vous avez appris. Merci encore d'avoir suivi ce cours. J' espère que vous avez pu tuer des zombies et vous amuser le long du chemin. À la prochaine fois. 14. Leçon bonus 1 : créer une page bunker: Dans cette vidéo, nous allons parler de la façon de construire une page HTML à partir de zéro. Nous allons parler des doctypes, éléments de tête et de corps HTML, et des éléments à l'intérieur de la tête. Tout d'abord, il y a quatre parties principales à une page HTML. Le premier est le DOCTYPE. Cela va dire au navigateur quel type de document il fonctionne. Il y a l'élément HTML, qui va juste envelopper tous les autres éléments. Il y a l'élément head qui va donner informations sur la page et comment rendre la page, comment afficher la page plutôt, puis l'élément body, qui va contenir toutes les informations que vous voyez réellement sur le page. Le doctype, encore une fois, indique au navigateur quel type de document il s'agit. Quand nous travaillions avec XHTML, nous avions quelque chose comme ça, ce qui est super beau. Je suis sûr que vous l'avez tous mémorisé maintenant. Malheureusement, avec HTML5, ils sont allés dans l'autre sens. Non, c'est vraiment chanceux parce que je me souviens de ça. DOCTYPE HTML indique au navigateur qu'il s'agit d'un document HTML5. L' élément HTML. Il va envelopper toutes les autres balises ou tous les autres éléments. Il a une balise HTML d'ouverture qui ressemble à une balise HTML et une balise HTML de fermeture. Pour une meilleure accessibilité et une meilleure optimisation des moteurs de recherche, l' une des meilleures choses que vous pouvez faire est d'ajouter du langage à l'élément HTML, la balise d'ouverture. Cela permet de s'assurer que non seulement le navigateur sait quel langage informatique nous utilisons, qui est ce que le doctype lui dit, mais aussi quel langage humain il utilise. On dirait quelque chose comme ça. Vous avez juste la balise d'ouverture HTML, vous ajoutez un attribut lang et fr, dans ce cas c'est anglais, mais vous pouvez utiliser es, pour Espanol et il y a beaucoup d' autres codes pays et codes de langue que vous peut utiliser. L' élément tête va contenir tout sur la page. Aucun d'entre eux n'est réellement rendu dans la page ou ne s'affiche dans la page. C' est toutes les informations sur la façon de créer la page, comment la mettre ensemble, sorte que vous avez des choses comme les fichiers CSS qui sont en cours d'utilisation, tous les fichiers JavaScript qui pourraient être utilisés, méta info sur la page, le titre qui apparaît dans le nom de la fenêtre ou de l'onglet, ainsi que toutes les autres informations sur la page. Ce ne sont pas des informations qui s'affichent sur la page, mais des informations qui concernent la page. Maintenant aussi, je souligne que partiellement, parce que la tête est similaire à quelques autres balises, en-tête et en-têtes. Nous parlerons des différences plus tard, mais l' en-tête et les en-têtes vont dans le corps tandis que la tête est une chose distincte, est un enfant direct de l'élément HTML. Encore une fois, rien dans la tête ne montrera directement sur la page Web et il ressemble exactement à ceci, ouverture de la balise tête, la fermeture de la balise. Le corps. Cela va contenir toutes les informations qui sont visibles sur la page. Tout ce qui est réellement affiché, tout ce que vous voyez dans la fenêtre du navigateur sera dans le corps. Tous les textes, couleurs, images, quoi que ce soit d'autre, il va directement et strictement dans le corps. Nous avons notre élément de corps d'ouverture, ou plutôt l'étiquette de corps d'ouverture et notre étiquette de corps de fermeture. Maintenant, rassemblons tout ce que nous avons appris. Nous avons d'abord le DOCTYPE. Heureusement, c'est HTML5 DOCTYPE, donc mes doigts n'ont pas de crampe qui écrit tout le DOCTYPE. Voici la balise HTML d'ouverture, avec un attribut lang pour l'anglais puisque la page que nous construisons ici est en anglais. Ensuite, nous avons la balise tête d'ouverture, la balise tête de fermeture, la balise corps d'ouverture, la balise de fermeture, la balise HTML de fermeture. Il est important de noter que la tête et le corps sont les deux seuls éléments qui sont directement dans l'élément HTML. Tout le reste dans le document HTML doit aller dans l'élément head ou dans l'élément body. Rien d'autre n'est directement un enfant, pour ainsi dire, de l'élément HTML. Maintenant, je veux juste préciser à nouveau que la tête, l'en-tête et les titres sont des choses différentes. La tête n'est pas un titre ou un en-tête, mais c'est la tête, c'est l'information sur la page. En-tête et h1 à h6, ou les en-têtes sont différents. Celles-ci vont dans le corps, pas dans la tête. Head est pour des informations sur la page. En-tête et en-tête ou h1 à h6 tous apparaissent ou sont affichés dans la page, tandis que head est info sur la page et il ne s'affiche pas directement. Dans la tête, nous avons un certain nombre d'éléments différents. Tout d'abord, c'est le titre. C' est encore une fois, le titre de la page, ne s'affiche pas directement dans la fenêtre du document ou dans la fenêtre du navigateur. Il s'affiche toutefois sur le nom de l'onglet ou en haut de la fenêtre. Les textes que vous verrez dans le nom de l'onglet ou en haut de la fenêtre, c'est l'élément title. Il n'est cependant pas important d' optimiser les moteurs de recherche car il donne des informations sur la page et c'est aussi des informations que vous verrez sur un nom d'onglet, etc, donc avec un milliard d'onglets ouverts, cela peut être important pour y avoir de bons textes. Peut-être que vous avez moins d'onglets ouverts que moi, mais j'en ai probablement plus d'un milliard. Vous voulez utiliser des mots-clés descriptifs lors de l'écriture de votre titre n'est que pour aider à optimiser votre moteur de recherche et à préciser ce qu'est la page. Voici un exemple d'élément title. Meta est des informations sur la page. Comme étant des informations sur la page, vous penseriez qu'il va dans la tête et il le fait. C' est une balise void, ce qui signifie qu'elle n'a pas de balise de fermeture, donc c'est juste une balise d'ouverture. La plupart du temps, il se compose d'un attribut name et d'un attribut content. On parlera de ce que c'est dans un instant. Mais il y a aussi un attribut de jeu de caractères. Il s'agit de l'ensemble des caractères utilisés par le site Web. Ceci est important pour l'internationalisation et pour s'assurer que le navigateur qui regarde cette page codage correctement ou comprend correctement les caractères utilisés. C' est une bonne chose d'avoir sinon le navigateur devine, il va souvent deviner juste, mais il pourrait ne pas, donc l'avoir est utile. Dans la plupart des cas, la valeur du jeu de caractères doit être UTF-8 et ressemblera à ceci. Meta charset UTF-8. Ensuite, nous avons la balise Meta viewport. Ceci est important, en particulier pour la conception réactive. On y reviendra un peu plus tard. Mais il dit au navigateur de ne pas zoomer, mais de montrer le site à sa taille naturelle. Que se passe-t-il souvent avec les appareils mobiles si vous n'avez pas cette balise Meta viewport en place, il va zoomer et essayer de vous montrer toute la page à la fois. Pendant longtemps, c'était vraiment bon parce que sinon vous étiez coincé dans une page que vous pouviez à peine lire et qui ne fonctionnait probablement pas sur votre appareil mobile, mais avec un design réactif, lequel nous allons entrer dans un peu, avoir cette balise Meta Viewport vous permet d'avoir un plus grand contrôle en tant que développeur web et vous permet créer un site Web qui sera plus facilement visible par les utilisateurs sur leurs appareils mobiles. Ne vous inquiétez pas si ça n'a pas de sens en ce moment, nous en reparlerons. Le nom de l'élément Meta Viewport est défini sur Viewport et le contenu est défini sur une largeur égale à la largeur de l'appareil et à l'échelle initiale égale à 1,0. En général, ce que j'avais là pour le contenu est tout ce dont vous aurez besoin. Il y a des moments où vous pouvez apporter quelques légères modifications à cela, mais en général, il s' agit de la valeur du contenu que vous souhaitez utiliser. La balise meta description est également disponible pour l'optimisation des moteurs de recherche. Il va être quelques phrases que certaines de votre site. De nombreux moteurs de recherche afficheront cette description comme étant la description que vous voyez dans les résultats de recherche, alors assurez-vous qu'elle est claire, concise, riche en mots-clés et qu'elle représente bien votre site. L' attribut name ici va être description, et le contenu sera n' importe quelle phrase ou deux à propos de votre site que vous voulez mettre dans. Ce contenu est probablement trop court, il devrait probablement être d'environ 30-50 mots. Pas trop long, mais pas trop court non plus. L' élément lien est un moyen pour vous de lier d'autres types de fichiers avec votre HTML. Parfois, ce sont les fichiers CSS et parfois d'autres documents connexes. Ça va ressembler à ça. Vous avez l'élément lien ici. Chaque attribut ref sera le chemin d'accès au type particulier de fichier. Dans ce cas, c'est un fichier CSS et rel va être la relation pour ce que c'est que vous vous connectez à l'élément lien. Dans ce cas, c'est la feuille de style. Maintenant, regardons un codage en direct. Ici, nous avons tous les éléments dont nous venons de parler tous réunis en un seul endroit. Sur la gauche ici, j'ai le code, sur la main droite ici est un rendu direct de celui-ci. La plupart de ce dont nous avons parlé étaient des choses dans la tête, qui encore une fois ne s'affiche pas directement sur la page, mais j'ai inclus un en-tête et un H1 ici pour vous aider à voir la différence entre l'en-tête de tête et le titre. C' est la tête, c'est un en-tête, c'est un titre. Prenons ça par le haut. Nous avons notre DOCTYPE. Cela indique à nouveau le navigateur qui est une page HTML, dans ce cas, HTML5 par page ultérieure. Nous avons notre balise d'ouverture HTML avec un attribut lang et l'anglais défini comme notre langue. Nous avons notre étiquette de tête d'ouverture, et ici nous avons une étiquette de titre qui s'affichera dans la fenêtre du navigateur. Ensuite, nous avons le jeu de caractères, encore une fois, UTF-8. Assurez-vous que nous sommes tous sur la même page ici. Ensuite, nous avons la balise meta viewport. Ce sera tout ce que vous devez faire. Vous pouvez à peu près copier et coller cela dans vos pages. Vous n'avez pas forcément besoin d'en savoir plus. Il y a quelques autres options, mais elles sont rarement utilisées. Nous avons notre description meta tag, nous avons un contenu défini, nous avons notre lien vers un fichier CSS zombie, et la relation est la feuille de style, nous avons notre tête de fermeture. Encore une fois, toutes les informations sur la page, informations qui ne vont pas rendre sur le côté droit ici, mais qui indiqueront comment cette page se rend, en particulier avec zombie.css, mais aussi des informations sur la page comme les mots-clés et la description de la clôture. Nous avons notre étiquette de corps d'ouverture, puis nous avons notre en-tête, qui est un élément structurel dont nous parlerons plus en détail un peu plus tard. Nous avons notre rubrique H1, qui est des informations qui seront affichées sur la droite ici comme vous pouvez le voir juste là. Ensuite, nous avons notre H1 de fermeture, en-tête de fermeture. Nous avons une balise de navigation qui ne devrait pas être là. On y arrivera dans un peu. Nous avons notre corps de fermeture et nous avons notre HTML de fermeture. C' est la fin de cette leçon sur la création de votre toute première page HTML. 15. Leçon bonus 2 : cerveaaaux, corps et éléments de structure: Dans cette vidéo, nous allons parler de la construction du corps du document HTML. L' en-tête, encore une fois différent de la tête et des en-têtes, est un élément structurel qui peut contenir vos en-têtes. Peut être un en-tête d'une page, d'une section ou d'un article, et nous en parlerons dans une seconde. Ça ressemble à ça. Nous avons notre étiquette d'en-tête d'ouverture et nous avons notre ouverture h1. Ensuite, nous avons notre tête de fermeture h1 et de fermeture. C' est l'en-tête le plus basique. Vous pouvez également inclure d'autres balises, d'autres éléments, si nécessaire. Mais ce serait la version la plus basique d'un en-tête. Nav, principal, et de côté sont trois autres éléments structurels. Le nav va, bien sûr, envelopper votre navigation. Il peut être utilisé seul ou il peut apparaître dans un en-tête ou à côté, dépend de si vous voulez que la navigation soit à travers le haut comme il le serait si elle est dans l'en-tête ou le long du côté comme il le serait si c'est un côté. Il peut aussi être seul. Vous pourriez avoir un en-tête, puis avoir un nav en dessous et de côté d'un côté et un nav de l'autre. Mais ils ont tendance à travailler beaucoup avec en-tête et de côté. C' est le contenu principal de la page, et c'est à peu près tout. L' exception concerne le contenu lié, mais tangentiel, le plus souvent la barre latérale, mais pourrait être utilisé pour des commentaires ou du contenu similaire. Oui, typiquement une barre latérale et c'est pourquoi parfois le nav va dedans. Pied de page, se trouve à la fin de la page ou à la fin d'une section ou d'un article. Il contient souvent des informations sur les droits d'auteur et des liens vers d'autres pages, articles ou sections connexes. Article, est contenu qui peut se tenir seul. Il va généralement envelopper des billets de blog ou des articles de nouvelles, choses qui peuvent être retirées et seraient toujours en mesure de prendre du sens et être en mesure de se tenir seul. Section d'autre part, n'est qu'une partie d'une page. Il ne se tient pas seul. Il s'agit d'une partie d'un objet plus grand. Regardons un code. Ici, j'ai tout préparé pour nous. Nous avons la tête et le corps de la dernière section. Ici encore, nous avons l'en-tête et le h1, ci-dessous que nous avons un nav. Dans le nav, nous avons une liste non ordonnée de trois liens. Dans ce cas, je relie à trois endroits dans la page elle-même. Ensuite, nous avons notre élément principal. Encore une fois, le nav est debout seul, dans ce cas, séparé de l'en-tête et séparé de l'écart, qui est ici. Dans notre principal, nous avons trois articles. Dans l'article, nous avons deux sections de chaque article. Nous avons un h2 qui est le titre de l'article, et h3 pour le titre de la section, puis un peu de contenu là-bas. De même, dans l'article suivant, nous avons un h2 pour le titre de cet article, nous avons une section avec un h3 pour la rubrique là et encore pour l'article final. Voici notre étiquette principale de fermeture, alors nous avons notre côté. En dehors, nous avons juste un peu plus de contenu. J' ai utilisé un h3 là pour le rendre plus cohérent avec cette section. Enfin, nous avons notre pied de page, qui contient nos informations sur les droits d'auteur. Fermer le pied de page, fermer le corps, fermer le HTML. Clôture de cette vidéo. 16. Leçon bonus 3 : répondre à la lutte des zombies: Dans cette vidéo, nous allons parler du design réactif, ce qu'il est et pourquoi. Nous discuterons un peu plus de la balise Meta Viewport, et nous parlerons des requêtes des médias. Tout d'abord, le design réactif. Il permet au site de s'adapter ou de répondre au contexte dans lequel il est placé. Que ce soit sur un appareil mobile tel qu'un téléphone ou une tablette ou un écran géant vers un ordinateur de bureau. Le site est capable de s'adapter à tous ces appareils. Les requêtes média vous permettent de modifier ce que CSS est utilisé fonction d'une grande variété de conditions, souvent la taille de l'écran ou la largeur de l'écran, c'est-à-dire mobile contre bureau, ou parfois lié aux médias comme l'impression par rapport à l'écran, etc., mais il existe de nombreux types de requêtes multimédias. Pourquoi avons-nous besoin d'un design réactif ou que se passe-t-il ? Il y a longtemps, téléphones et les petits appareils ont fait terrible avec les sites Web. Ils vous montreraient essentiellement juste une partie du site de taille de bureau, et ils étaient très difficiles à naviguer, très difficiles à trouver des informations sur, très difficiles à regarder quoi que ce soit. Une innovation apportée par Apple quand ils ont créé l'iPhone, était que Safari rétrécirait automatiquement un site Web vers le bas, s'adapter à l'intérieur de l'écran. Bien que cela rendait souvent difficile à lire dans de petites tailles, vous pourriez alors beaucoup plus facilement pincer et zoomer pour trouver la partie du site qui vous intéresse. Cela rendait les sites Web beaucoup plus utilisables parce que vous pouviez voir tout à la fois, puis zoomer sur la partie que vous vouliez ou faire défiler vers le bas pour trouver la partie qui vous intéresse. Mais quand le design responsive est venu autour, nous avions besoin d'un drapeau ou d'un moyen pour le navigateur savoir s'ils devraient zoomer ou s'ils devraient le laisser tel quel. Dans vient la balise meta Viewport. Apple est également venu avec cela. Tag donne une tête jusqu'au navigateur pour ne pas zoomer comme nous l'avons discuté précédemment. Il a une valeur de nom de Viewport et le contenu est largeur égale à la largeur de l'appareil, échelle initiale de un. Requêtes des médias. Qu' est-ce qu'ils font ? Ils testent une caractéristique, si cette caractéristique est vraie, elle exécute le CSS à l'intérieur des crochets. Par exemple, nous avons, il s'agit de notre requête média, donc au média, si nous sommes sur un écran ou sur une impression, et que la largeur maximale de cet écran est de 900 pixels, ce qui signifie la taille actuelle de l'écran ou taille du navigateur est inférieure à 900 pixels, alors nous exécuterions n'importe quel CSS était ici. Ce sont bien sûr les commentaires CSS, donc il ne va pas être exécuté mais vous pouvez alors changer de mise en page, faire toutes sortes de choses différentes lorsque cette requête multimédia est vraie. Il existe de nombreux types de requêtes multimédias. Nous venons d'en voir un qui était max-width, la valeur par défaut était le cas du bureau et ensuite, comme vous êtes devenu plus petit, il a apporté des modifications. Le reste est de commencer le mobile en premier, ce qui signifie que vous commencez avec la plus petite version de l'écran, puis ajoutez ou modifiez éléments et CSS au fur et à mesure que le site devient plus grand ou que la taille de l'écran devient plus grande. L' un des avantages de Mobile-first est qu'il y a beaucoup moins d'artisanat, vous n'avez pas besoin de le supprimer du site de bureau. Vous pouvez modifier au fur et à mesure. Ne pas avoir toutes ces choses supplémentaires est vraiment utile lorsque vous avez une connexion lente ou avec mobile, il peut être lent, il peut être intermittent. Il y a beaucoup de façons différentes qui pourraient être problématiques. Donc, avoir un design d'abord mobile est une bonne idée. Vous pouvez également faire des requêtes média pour imprimer, c'est-à-dire cette page est destinée à être imprimée, alors faites ces différentes choses. Par exemple, vous pouvez supprimer les images d'arrière-plan, les couleurs d'arrière-plan, supprimer la navigation parce que vous ne pouvez pas cliquer sur la navigation sur papier, ou du moins pas encore. Mais oui, il y a beaucoup de choses que les requêtes des médias peuvent faire. Les points d'arrêt sont chaque fois que la requête média s'applique. Par exemple, dans le dernier exemple, nous avions une largeur minimale de 900 pixels, le point d'arrêt serait à ce 900 pixels. Combien de points d'arrêt devriez-vous avoir ? Combien de fois devriez-vous effectuer des mises à jour sur le site en fonction de la taille de l'appareil sur lequel vous le regardez ? Il se résume vraiment à autant que vous avez besoin. Vous voulez vous assurer que le contenu est clair et qu'il est à son meilleur. Cependant, de nombreuses requêtes média qu'il faut pour le faire sont le nombre dont vous avez besoin, mais pas plus que cela. Plus de points d'arrêt signifie une maintenance plus compliquée et peut être difficile d'ajouter de nouvelles choses et de nouvelles fonctionnalités. Utilisez-en autant que vous en avez besoin et pas un de plus que cela. Quand devriez-vous définir un point d'arrêt ? Il est préférable de le faire lorsque le design l'exige. Si vous le faites en fonction de la taille des écrans communs, alors vous serez toujours à la poursuite des tailles d'écran et ne jamais réussir. Il y a une nouvelle taille d'écran en cours de création à peu près tous les jours. Comme de nouveaux appareils sont créés de nouvelles façons de les regarder, il ne sert à rien de poursuivre cela. Si vous avez basé vos points d'arrêt sur la conception que vous implémentez, vous avez beaucoup plus de chances d'avoir des points d'arrêt lisses et appropriés. Regardons un peu de code. Voici ma requête média. Quand je suis au-dessus de 600 pixels, c'est alors que ceux-ci s'appliqueront, donc une fois que je suis au-dessus de 600 pixels, le principal flottera à gauche et aura une largeur de 70 pour cent, et l'écart flottera à droite à une largeur de 28 pour cent. Regardons cet un côté, montons un peu plus haut, il est là. Maintenant, j'ai flotté et 70 pour cent, flotté à droite et 28 pour cent.