Je n'ai pas peur du code (ou des zombies) : Plus de HTML et CSS pour les écrivains, les rédacteurs et les débutants

1. Introduction: Que vous écriviez pour votre vie ou simplement un blog ici et là, connaître du HTML et CSS vous aidera à vous démarquer dans le paysage post-apocalyptique que nous appelons Internet. Ce cours va élargir vos connaissances en HTML et CSS, et devrait vous aider à tuer vraiment les zombies où qu'ils apparaissent. Si vous n'avez jamais eu de HTML ou CSS auparavant, je vous recommande de revenir en arrière et de jeter un oeil à mon cours, Code n'est pas aussi effrayant que les zombies, c'est HTML et CSS pour les écrivains, les éditeurs et les débutants. Cela va vraiment vous commencer sur la façon d'écrire des balises, comment écrire CSS, ces choses. Si vous le savez déjà ou si vous avez une idée, alors vous pouvez aller de l'avant sur ce cours et apprendre loin. m'appelle John Ray et je suis un développeur web et professeur d' université qui construit des sites web depuis le dernier millénaire. Apprenons quelques compétences et battons quelques zombies. 2. Outils Zombie (sautez-vous si vous avez pris « Le code n'est pas aussi effleurant que les zombies »).: Bonjour. Dans cet épisode, nous allons parler des 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, vous pouvez obtenir ceci soit de, si vous êtes sur 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 dans son mode texte brut. Tout cela dit, alors que vous pouvez 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 en outre 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 obtiennent dans une couleur différente puis 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 ces erreurs ponctuelles heureuses, Notepad ++ je crois est disponible sur toute la plate-forme, mais il est certainement disponible sur Windows. Atom est certainement disponible sur toute la plate-forme, un autre, les crochets et puis Sublime Text est probablement un peu au-delà du niveau de compétence. 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. Vraiment n' importe quoi d'autre que vous utilisez, tout autre outil de codage pour HTML et CSS devrait fonctionner correctement, à peu près n'importe quoi, vraiment. L' autre que je vais recommander cependant est CodePen.io. C' est un site qui est disponible, gratuit à utiliser, facile à utiliser, met automatiquement à jour à mesure que vous tapez, ce qui est super utile que vous apprenez, et il prend soin de toutes les choses fidèlement avec juste comment construire une page et ce qu'il faut faire pour ces choses. Cela 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. Toute démo de classe aussi être 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. C' est le site Web du stylo de code. En bas, en bas à gauche, vous allez vous inscrire. Vous cliquez dessus, inscrivez-vous avec un e-mail. Ce processus est assez typique. Je vais me connecter juste parce que j'ai déjà un compte, je me connecte. Maintenant, une fois que vous êtes connecté, je l'ai déjà fait, ce sont des stylos qui pourraient vous intéresser. Mais ce que nous allons faire, c'est aller explorer, nous allons créer dans un stylo. Dans CodePen, un stylo est juste ceci. Il s'agit d'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. Ce que je vais faire, c'est minimiser ça. 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 une petite chose ici, Bonjour monde. La façon 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. Marche mordes: Dans cette vidéo, nous allons parler des façons de marquer le contenu pour l'affichage, communication, les indices et les exposants, définitions et abréviations, l'élément temporel ou l'étiquette temporelle, contenu et le code préformatés, et la puissante petite balise. La première chose dont nous voulons parler est la balise secondaire ou l'indice, et il fait simplement ce que vous attendez d'un indice à faire, déplace la ligne de base vers le bas de 25 % et utilise un texte plus petit que le texte qui l'entoure. Il est mieux utilisé pour les notes de bas de page, car je suis sûr que vous êtes bien habitué. Aussi pour les formules chimiques comme H2O etc. Ou pour la numérotation des variables mathématiques telles que Z1 à Z horde etc. Experscript crée du texte en exposant, peu comme vous vous attendez avec les exposants. Juste la ligne de base jusqu'à 50 pour cent, utilise une taille de texte plus petite, et il est mieux utilisé pour les exposants. Z cubes par exemple. Aussi quelque chose appelé lettrage supérieur, qui est un style d'abréviation commun en français et langues possibles. C' est techniquement une chose différente de l'exposant, mais si vous l'implémentez en HTML c'est généralement fait avec la balise sup ou la balise sub. Aussi des nombres ordinaux, le 106e ou le troisième ou le cinquième ou autre. Parfois, vous aurez besoin d'un balisage, d'une définition ou d'une abréviation, quelque chose que vous verrez, généralement. La balise dfn est le balisage d'une balise de définition. Avec le fn, vous pouvez également utiliser un attribut title qui définit la chose exacte définie. Vous pouvez également ajouter un lien de la balise dfn directement à une définition qui peut être plus bas sur la page. J' utilise quelque chose appelé fragments de page ou balises d'ancrage. On en parlera dans un peu. Avec la balise abbr, vous pouvez configurer des abréviations. Oui, abbr est une abréviation pour les abréviations. Vous pouvez également faire des acronymes et une grande variété de ceux aussi. Similaire à la définition, vous pouvez également utiliser un attribut title. Mais la chose à propos des attributs de titre pour abbr et dfn, c'est qu'ils ne sont utiles qu'aux utilisateurs de la souris car personne d'autre ne peut voir l'info-bulle. Ils ne sont utiles que pour le sous-ensemble d' entre eux qui savent passer le curseur sur l'abréviation avec la souris, ou savent que l'abréviation est utilisée, ils pourraient même planer avec la souris. Eh bien, je recommande d'ajouter l'attribut title à vos deux dfns et abbrs, sauf si vous les utilisez conjointement, alors vous n'en avez besoin que dans abbr qui est dans un dfn. Je ferais attention non seulement de l'utiliser, mais de m'assurer que vous, comme c'est particulièrement la bonne pratique, définissez l'acronyme de l'abréviation lorsque vous l'utilisez pour la première fois juste pour vous assurer que tout le monde est sur la même page et tout le monde sait ce qui se passe. L' élément temporel, qui est utilisé pour marquer des dates et des heures spécifiques ou des durées de temps. Par exemple, heure du 23 août, durée de 12 heures et 37 minutes. Pour le rendre un peu plus facile pour référencement et un peu plus facile si le son est debout pour les lecteurs d'écran, il y a quelque chose appelé l'attribut datetime. formatage de ceci est très important car il doit être lisible par machine. Il doit venir dans un format que la machine attend ou que l'ordinateur attend. Par exemple, nous avons c'est le 23 août 2025 à 17h00, 52 minutes et 42 secondes. Généralement, si vous supprimez n'importe quelle partie de cette chaîne, vous pouvez créer une chaîne valide telle que 2025-08-23 ou 2025-08 ou 1752, etc. Ce sont toutes des valeurs datetime valides. La balise pré, nous utilisons pour le code ou pour d'autres textes préformatés. Il est formaté dans une police monospace, généralement nouveau courrier, et les espaces sont conservés intacts et il n'est pas réduit en un seul espace comme il est normalement en HTML. Si vous avez deux espaces en place, il affichera deux espaces au lieu de simplement montrer un espace. La petite balise à l'origine est utilisée pour simplement rendre le texte plus petit est maintenant en HTML 5, utilisé pour des choses comme les mentions légales, avis de copyright et les commentaires secondaires. utilisation de ce code est beaucoup plus sémantique signifiant qu'il fournit plus d'informations au navigateur et [inaudible], etc. Ensuite, juste avoir un div générique ou un intervalle générique qui rend le texte plus petit. Regardons un code en direct. Ici, nous commençons par l'indice, vous pouvez voir la contagion zombie peut être effacée. Indice d'un ici en utilisant le sous-tag ou ici l'eau H20 porte également la brûlure zombie ou la somme de Z1 à Z horde. Exposant, nous avons le Z, 3 ou Z cubes. C'était la peur des morts-vivants. Le lettrage supérieur pour les hommes était O. Mademoiselle zombie signifie Mademoiselle zombie ou les nombres ordinaux pour la 106e infanterie. En outre, nous avons la définition et l'abréviation. Ici, nous avons le dfn du titre de zombie. Ici, si je survole, cela me montre ce qui est dans l'attribut title. Alors j'ai juste l'information au-delà, ce que tu veux mettre. Nous avons une abréviation sous zombie, qui est juste ici, cette information ici. Ensuite, dans la résistance humaine, j'ai mis une abréviation dans un dfn et ensuite seulement fait un titre sur l'abréviation, pas seulement la définition. Encore une fois, mettez-le juste après cela pour vous assurer que tout le monde était sur la même page. La valeur temporelle, la balise temporelle est ici, elle s'enroule juste ici, n'apporte aucune modification réelle au texte sous-jacent, ne modifie pas la mise en forme ou quoi que ce soit du genre. Cela le rend juste plus lisible par la machine. Nous avons la datetime ici du 23 août 2025 à 1752 42. Vous pouvez inclure plus spécifique ou j'aurais pu aussi le laisser à la première partie ici. Ensuite, nous avons aussi la durée. Si je fais une durée, je n'ai pas besoin de rencard. J' ai juste la quantité de temps comme 12 heures 37 minutes, datetime etc Juste à côté, nous avons du texte préformaté, et pour cela j'ai joué un peu avec le formatage. J' ai attrapé l'abréviation juste pour avoir du texte là-dedans. Puis j'ai joué avec l'espacement, de sorte que j'ai toutes ces choses supplémentaires et que les espaces restent intacts. C' est un miroir direct de ce qui est montré dans le code. Quant à tout ici, nous avons une petite étiquette. Il s'agit du texte de taille normale. Ensuite, j'ai fait une petite étiquette, qui est celle-ci ici, qui est juste un peu plus petite. Ensuite, j'ai ajouté une deuxième petite étiquette dans la petite étiquette juste pour le plaisir. C'est bizarre. C' est une petite balise dans une petite balise, et qui l'a rendue encore plus petite, un niveau plus bas. Ensuite, bien sûr, en bas, nous avons notre note de bas de page. C' est tout pour notre marque de morts-vivants. Maintenant, nous allons parler de montage. 4. Éditer des moans Zombie Moans: Cette vidéo, nous allons parler de montage. Nous parlons de moyens de baliser le contenu, afficher le matériel modifié, nous allons parler de la balise de suppression pour supprimer le contenu, des attributs de site et de date-heure pour aider à expliquer quand les choses se sont passées et comment elles se sont produites . Une balise d'insertion, qui va être lorsque vous ajoutez du contenu. Encore une fois, citez et les attributs date-heure, allez également travailler avec eux et une balise de repère qui met en évidence les choses, puis vous montrer comment vous pouvez ajouter une section no group ou question juste à une façon de le faire. Très bien, c'est l'édition de Zombie. Parfois, vous devez afficher les marques d'édition. Je vous recommande de le faire seulement si les modifications doivent être publiques avec comme une loi ou avec des règlements ou quelque chose, quelque chose où il est vraiment important que vous puissiez voir l'historique édité de celui-ci. Pour documenter les différences entre deux documents et vous assurer que vous êtes transparent. La balise del place une ligne dans le texte, tout comme barrée. L' attribut Cite vous permet de référencer une URL pour savoir pourquoi des modifications ont été apportées pour les procès-verbaux de réunion ou éventuellement un document juridique, etc. L'attribut Date-heure prend une chaîne de date correctement formatée et donne simplement l'heure ou la date où cette des changements particuliers ont été apportés. Ensuite, il y a aussi quelque chose appelé la balise S, qui est pour frapper. Visuellement, ceux-ci font la même chose, la différence est vraiment que Del est utilisé plus pour signifier l'édition, alors que S est un peu plus pour le contenu n'est plus valide. L' INS ou ins indique où le texte a été inséré. Encore une fois, vous êtes l'attribut cite, le même que le del, c'est une URL référençant la raison de la modification. L' attribut date-heure, encore une fois, identique à del, identique à la chaîne temporelle, ne quitte pas la date et l'heure de la modification. Ensuite, il y a la balise mark qui est un surlignement, mark met en surbrillance le texte , met un fond jaune derrière elle, doit être utilisé pour le contenu pertinent, pas pour le contenu d'importance. Strong devrait être utilisé pour le contenu important. Mais je pense que Mark pourrait être utilisé beaucoup avec l'édition juste pour s'assurer que vous êtes ou pour souligner des choses que peut-être quelqu'un veut regarder, assurez-vous qu'elles sont correctes. Encore une fois, par souci d'importance, vous voulez utiliser la balise B plus forte de préférence la balise forte. Marquer l'instruction ne doit pas être utilisée lorsque le même contenu en même temps, et le contexte d'édition peut être du contenu qui nécessite un second regard ou une attention particulière. Peut-être que l'éditeur ne savait pas comment récompenser cette phrase, etc. Je voulais aussi trouver un moyen d' écrire des notes parce que parfois ce n'est pas suffisant pour commercialiser, vous voulez aussi écrire une note d'une sorte, donc il y a pas une façon standard de le faire, mais je vais vous donner un exemple. Quel est le CSS pour le rendre joli ? Ensuite, vous aurez la possibilité de le faire de cette façon ou si vous trouvez un meilleur moyen, vous êtes invités à le faire aussi. La note est assez grande, vous pouvez la mettre dans un élément de côté, mais c'est un élément de niveau bloc. Cela ne fonctionne pas très bien pour les notes en ligne, donc la méthode que j'utilise est une balise span et peu CSS pour le rendre un peu différent du reste du contenu. J' utilise juste une classe de note et juste envelopper la note dans cette classe particulière avec la balise span. Bon, alors regardons un peu de code. Ici, j'ai la lettre du Président aux New-Yorkais après l'invasion des Zombies, un peu de montage, espérons-le avant qu'elle ne s'éteigne. Ce sont quelques tags del, comme vous le verrez ici. J' ai également ajouté une opération de citation et une date-heure à ce del particulier. Je n'ai pas fait des citations tout au long de ce contenu juste parce qu'il serait vraiment écrasant. Je l'ai fait ici et je l'ai fait pour l'insert ici, et vous devriez probablement le faire pour chaque endroit où vous faites des changements, mais dans ce cas, je ne l'ai pas fait pour rendre les choses un peu plus propres. Mais j'ai ajouté la date-heure à peu près tout parce qu'en théorie, la date-heure changerait un peu chaque fois qu'elle , en supposant que vous utilisez des secondes, etc. est changée, en supposant que vous utilisez des secondes, etc. votre situation. Nous avons une suppression ici, nous avons un insert, nous avons une marque. Un peu plus d'insertion, d'autres plus de suppression. Maintenant, une chose qui se passe ici, et j'ai ajouté quelques notes ici. Tu ne les vois pas encore parce que je ne les ai pas montrés parce que c'est déroutant. Si vous ne savez pas ce qu'ils sont, ils apparaissent juste comme du texte normal, et une chose que je n'aime pas à propos de la balise Insertion est qu'elle souligne les choses. La raison pour laquelle je n'aime pas cela est parce que c'est beaucoup plus souvent utilisé pour les liens que pour le texte inséré, cela pourrait confondre certaines personnes, donc j'ai juste fait du CSS pour aider à rendre les choses plus claires. Très bien, donc si nous ajoutons ces, je l'ai mis en place de sorte que les suppressions soient de fond rouge, insertions ont un fond de vert, les marques sont toujours jaunes, puis j'ai ajouté un fond de bleu aux notes. Vous pouvez voir qu'il y a des notes ajoutées ici. Il y a beaucoup de choses supprimées, probablement pour aider à sauver le Président de face, face. Mais ce ne sont que quelques choses que vous pourriez faire pour vous assurer que la communication est correcte et que vous faites ce que vous devez faire pour l'expliquer aux gens. Très bien, c'est tout pour l'édition. Passons maintenant aux symboles HTML. 5. Apocalypse symbolique: Dans cette vidéo, nous allons parler des symboles HTML. Les crochets d'angle ou les esperluettes sont tous les deux utilisés pour désigner le code. Donc, quand vous avez vraiment besoin de les montrer, vous pouvez faire une chose légèrement différente et dire, nous allons parler ici. Nous parlerons des espaces ininterrompus, marques de propriété intellectuelle, des devises, guillemets, des tirets et des tirets et des tirets. Quel est le symbole ? Beaucoup de fois, vous aurez besoin d'afficher un crochet d'angle ou un autre caractère qui désigne le code. Donc, vous devez avoir un moyen de montrer que ce n'est pas du code. La façon dont vous le faites est par le biais d'un symbole HTML. Les symboles commencent par une esperluette et par un point-virgule. Beaucoup de ceux communs ont reçu un nom plus mémorable et sont appelés entités HTML. Il y a beaucoup plus de symboles que ceux qui sont des noms mémorables et ils ont un code numérique avec eux. Par exemple, ici, nous avons moins de et plus de. Donc ça va vers esperluette LT point-virgule. Donc LT pour moins de et plus grand que, ce sera l'esperluette GT pour plus grand que le point-virgule. L' esperluette. Puisque l'esperluette signifie maintenant le symbole HTML, nous devons faire quelque chose de différent avec elle. Donc esperluette est en fait quand un point-virgule AMP esperluette. Maintenant, certains, vous verrez parfois qu'une esperluette juste elle-même sera également ramassée comme une esperluette plutôt que comme code. Pour une meilleure compatibilité, je recommande d'avoir le point-virgule AMP complet de l'esperluette. Mais il y a des contextes où cela pourrait être correct ou pourrait fonctionner pour simplement avoir l'esperluette. Espace ininterrompu. Ceci est utilisé beaucoup pour juste si vous êtes l'une de ces personnes qui doivent avoir deux espaces après une ligne. La seule façon de le faire en HTML est d'avoir un espace régulier et un espace non-cassant. Donc, deux mots qui sont joints par un espace ininterrompu ne briseront pas un saut de ligne. Ainsi, vous pouvez garder ces deux mots ensemble, peu importe où le texte tombe. Il empêche également l'effondrement des espaces blancs en un seul caractère. Donc, typiquement, si vous ajoutez comme six espaces à l'espace, deux choses dehors, le meilleur espacement devrait être fait avec CSS au lieu d'avec HTML. Mais pour une raison quelconque besoin de quelques espaces supplémentaires, vous pouvez faire l'espace non-rupture quelques fois, et cela sortira comme ce nombre d'espaces plutôt que de les effondrer tous dans un seul espace. Il ressemble à une esperluette, NBSP est pour l'espace ininterrompu. Donc, dans le domaine de la propriété intellectuelle, et nous avons le droit d'auteur. Nous avons le symbole de copyright, qui est la copie esperluette. Il y a aussi un signe enregistré, qui est esperluette crête, et le symbole de la marque, qui est commerce esperluette. L'euro va être un euro esperluette, cent va être cent, livre, livre esperluette, yen, esperluette yens. Assez explicite dans ces cas. Parfois, lorsque vous travaillez avec des systèmes de gestion de contenu, certains champs ne traitent pas très bien les guillemets. La principale raison pour laquelle cela se produit est que le guillemet peut confondre le code et le faire finir avant qu'il ne soit supposé le faire. Donc, la façon de contourner cela est si vous pouvez toujours accéder au back-end de la page, vous pouvez ajouter des guillemets via des symboles HTML. Donc esperluette quot, Q-U-O-T fonctionnera pour vider les guillemets doubles. Vous pouvez également utiliser ces codes numériques pour ajouter des guillemets intelligents ou pour gauche et droite et smart single et smart double.Donc, c'est smart single quote gauche. C' est la citation simple intelligente, c'est ça. Cette citation double intelligente gauche, et le guillemet intelligent double droit. Il existe trois types de tirets en HTML. Le premier est le trait d'union, c'est celui de votre clavier. C' est le plus court des trois, et il est utilisé connecter deux mots liés. On est assez familiers avec ça. Pour le mettre dans le HTML, il suffit d'utiliser la touche clavier pour les tirets et tirets juste un peu plus long qu' un trait d'union avec la lettre n. Il est utilisé pour une plage de nombres ou une connexion entre deux mots. Voici quelques exemples. En HTML, vous allez utiliser esperluette En tiret, ou le nombre est 8211. Em tirets similaires à En tiret, c'est la largeur de la lettre m, et c'est le plus long des trois. Il est utilisé pour séparer deux clauses connexes mais séparées ou pour configurer une clause de la phrase. Donc être un zombie a dit non chaque fois. En mettant un HTML, vous utilisez le tiret esperluette Em ou 8212. Bon, jetons un coup d'oeil à un code. Donc, j'ai juste des exemples ici pour vous montrer comment tout cela fonctionne. Donc, nous avons moins de, se montrant ici correctement avec plus de, esperluette GT, esperluette qui apparaît ici. Nous avons l'espace ininterrompu est montré comme un espace. Vous pouvez voir qu'il y a en fait deux espaces là-bas. Le second étant l'espace ininterrompu. Nous avons le symbole de copyright, nous avons la marque déposée, et nous avons la marque déposée. Nous avons Euro, cent, Livre, Yen, stupide, double citation, smart single quote gauche smart single quote droite, smart double citation gauche, smart double citation droite. Maintenant, nous avons nos trois tirets. Nous avons un trait d'union, le tiret en et le tiret em. C' est tout pour chacun des symboles. Maintenant, nous allons passer sur des fragments et d'autres types de liens. 6. Fragments zombie et autres liens: Dans cette vidéo, nous allons parler de liens vers des fragments de page, des liens e-mail, des liens téléphoniques et des liens SMS. Les fragments vous permettent de créer un lien vers une partie d'une page ou un fragment d'une page. Les utilisations possibles comprennent certaines sous-navigation et des termes connectés à leurs définitions, reliant les questions à leurs réponses, lien tout en bas de la page, retour vers le haut de la page. Il y a deux parties à cela. L' un est le fragment auquel vous liez, et l'autre est le lien vers ce fragment. Fragment est défini par un attribut ID sur l'élément HTML. Quel que soit l'élément HTML que vous voulez utiliser, puis le lien que vous utilisez doit avoir un hashtag, puis le nom de l'ID. Si c'est un lien dans la page et que l'ID est morts-vivants, vous pouvez simplement faire hashtag morts-vivants, revenir à morts-vivants, etc. Vous pouvez également l'ajouter à la fin de n'importe quelle URL, en supposant que l'ID existe dans la page, le fera défiler vers le bas jusqu'à l'endroit où vous êtes. Par exemple, si nous regardons ici va probablement pas vraiment fonctionner parce que je ne pense pas avoir une pièce d'identité comme ça sur la page de l'institut des morts-vivants, mais s'il y en avait, ce serait là. C' est comme ça que vous feriez la liaison à un fragment. Si nous avons besoin de créer un lien vers une adresse e-mail, nous utiliserons la balise d'ancrage comme nous l'avons fait auparavant, mais au lieu d'une URL, nous utilisons le courrier à deux-points, puis l'adresse e-mail que nous essayons d'envoyer par e-mail. Nous ferons également un lien vers des numéros de téléphone, ce qui est particulièrement utile sur mobile, où vous pouvez taper un numéro et l'appeler. Par exemple, dans ce cas, vous auriez tel, deux-points, puis le numéro de téléphone. Je crois qu'il n'a pas besoin d'être dans ce format particulier de trois chiffres tiret trois chiffres tiret quatre chiffres. Pour un appel américain, bien sûr, si vous faites à l'international, probablement vous voudrez faire un plus un, puis le reste du numéro. Tout comme une liaison téléphonique, vous pouvez également faire un lien SMS et cela fonctionne essentiellement exactement la même chose sauf pour SMS deux-points au lieu de tel, et il enverra un texte plutôt qu'un appel. Regardons cela dans le code. Ici, nous avons le courrier à et puis l'institut zombiekilla @undead. Vous avez également une liaison téléphonique de 855-555. Maintenant, le vrai numéro de téléphone juste [inaudible] Ici, nous avons le lien SMS que je suis alors pour démontrer le fragment, ce que j'ai est une question ici et en théorie ce serait plus de questions. Si je veux cliquer dessus, cela me mènera plus bas sur la page à l'endroit où se trouve la réponse. Ça me prend tout le chemin et il y a un peu plus d'espace là-bas. Mais alors je peux faire défiler tout le chemin en arrière et voir la page à nouveau. Si je clique dessus, je vais à nouveau, bien sûr, aller tout le chemin vers le bas et faire défiler vers le haut. C' est tout pour les fragments. Ensuite, nous allons parler du multimédia. 7. Hordes multimédia: Tout d'abord, nous devons parler de l'élément source, qui est la base de certains de ces autres éléments. L' élément image, qui est une balise fantaisie ou image. On en parlera dans une seconde. Il y a des codecs audio et vidéo, ou comment l'audio et la vidéo peuvent être stockés et quels algorithmes sont utilisés pour les compresser, puis nous avons l'élément audio et l'élément vidéo, et enfin, l'élément iframe. HTML5 a apporté avec elle la prise en charge d'une variété de médias. Les dorsales de ces supports prennent en charge comme balise source. Indique au navigateur où chercher le fichier et offre plusieurs options basées sur ce qu'un navigateur particulier prend en charge. D'accord. L' élément image vous permet de définir différentes images pour différentes tailles de l'écran. Il vous donne également un repli si le navigateur ne prend pas en charge l'élément image. Dans ce cas, l'élément source utilise un attribut de jeu de sources, mais audio et vidéo utilise uniquement l'attribut source. Il y a aussi une autre façon de le faire en utilisant un attribut de jeu de sources sur la balise image elle-même, mais je trouve cela un peu plus difficile à envelopper votre esprit et les avantages sont relativement faibles à ce stade. Il peut être un peu plus efficace. Donnez au navigateur un peu plus de marge de manœuvre dans le choix de la bonne image. Mais l'élément image vous permet également de faire différentes images de différentes tailles et de faire ce qu'on appelle Art Directing, qui vous permet de mettre dans différentes parties d'une image que vous pourriez être intéressé à montrer à différentes tailles. L' élément image ressemble à ceci. Nous avons la source définie ici avec le fichier réel que nous allons utiliser. Votre requête immédiate ici avec min-width 40em. Comme vous vous en souvenez peut-être de la dernière classe ou d'autres classes que vous avez prises peut-être, 1em est égal à la taille de police par défaut pour le site Web. La raison pour laquelle j'associe la requête multimédia à la taille de la police est que certaines personnes vont agrandir leur police. Si nous l'accrochons dans une sorte de taille de police, alors nos requêtes média fonctionneront toujours et elles fonctionneront également correctement lorsque nous aurons la bonne taille de pixel. C' est juste un moyen un peu plus robuste de définir notre requête multimédia. Maintenant, notre défaut va être cette autre image. Maintenant, dans la première image, le zombie n'a pas de chapeau haut de gamme. Dans la deuxième image, cette image de repli, le zombie a un chapeau haut de gamme. C' est ainsi que nous verrons la différence entre les deux images. Et enfin, nous avons la barre oblique. Maintenant, si le navigateur ne comprenait pas l'élément image ou l'élément source, il ignorerait simplement ces deux et il montrerait simplement l'élément image là. Un codec est un moyen d'enregistrer un algorithme de compression de fichiers audio ou vidéo. Il y a aussi des fichiers de conteneur, qui est l'extension du fichier et peut contenir une variété de codecs différents. Tous les navigateurs ne prennent pas en charge tous les codec ou même tous les fichiers de conteneur. Certains codecs sont open source, mais pas bien pris en charge. Certains sont largement pris en charge, mais ne sont pas aussi efficaces pour compresser le fichier, ou maintenir la qualité vidéo élevée, etc. Il existe différents codecs qui sont utilisés à des fins différentes à des moments différents. D'accord. Parlons de l'audio. La balise audio vous permet de lire l'audio directement sur la page. Vous devez inclure l'attribut controls pour afficher les contrôles audio à l'utilisateur. Sinon, rien ne sera réellement affiché sur la page elle-même. L' attribut controls est également un attribut booléen, ce qui signifie que vous n'avez pas à dire que les contrôles sont égaux à true, ou que les contrôles sont égaux à des contrôles, vous pouvez simplement y ajouter le mot « Controls » et cela fonctionnera pour ajouter des contrôles. Ensuite, nous avons aussi quelques éléments sources. Par exemple, ici nous avons trois éléments sources différents, .oog est un fichier Ogg Vorbis. Il est généralement assez petit, mais pas toujours bien supporté. Car A est probablement quelque chose que vous êtes un peu plus familier avec. C' est le suivant, la spécification MPEG4, qui est assez haute qualité, et nous avons aussi le MP3, qui est probablement un peu moins de qualité, mais a un très large soutien. Enfin, nous avions ce lien vers le fichier MP3, il suffit de fournir ce repli au cas où quelqu' un utilise un navigateur qui ne supporte pas l'élément audio ou source. Il y a aussi la balise vidéo, qui fonctionne très similaire à la balise audio. Il a également besoin de l'attribut controls. Contrôles vidéo, et puis nous avons quelques sources. WebM est un format de fichier qui rend la vidéo très petite, mais à partir de cet enregistrement, il ne fonctionne vraiment que dans Chrome. Oggv est l'Ogg Theora, qui est le composant vidéo d'Ogg Vorbis, ou la spécification Ogg, la spécification open-source. Ensuite, nous avons le MP4, et enfin nous avons un lien pour les navigateurs qui ne supportent pas la vidéo ou la source. Enfin, nous allons parler de l'élément iframe, qui est le plus souvent utilisé pour intégrer des vidéos. Techniquement, un iframe affiche une page Web dans une autre. Lorsque vous intégrez une vidéo dans votre page, vous dites essentiellement : « Prenez la page YouTube et collez-la dans cette autre page ici. » Voici un exemple d'iframe. Nous avons un ensemble de largeur et de hauteur, nous avons un ensemble de sources, qui est la vidéo YouTube, nous avons bordure de cadre et permettre, permet un tas d'options différentes et permettent plein écran, puis la fermeture de l'iframe. D' accord. Jetons un coup d'oeil à ceux-ci dans le code. D' abord, nous avons un élément d'image. C' est le même élément que je t'ai montré plus tôt, et si on change la taille ici, on finira par avoir un chapeau haut de gamme. Comme nous sommes tombés à moins de 40em, la taille de la page étant à moins de 40em, ce haut était apparu. Si je vais encore au-dessus de ça, ça tombe. C' est juste une façon de montrer différentes images. Maintenant, ce HR ici est juste une règle horizontale et je l'utilise juste comme un séparateur. Il s'agit ici de la règle horizontale. Ici, nous avons l'audio. (AUDIO JOUÉ) Nous avons un son agréable , parce qu'il montre des contrôles, il montre ici, et il montre n'importe lequel de ces fichiers est le plus facile à comprendre par le navigateur, ou le premier qui est compris par le navigateur, il utilisera cela. Dans Chrome, je pense, M4A et MP3 sont tous les deux pris en charge. Je ne crois pas que Ogg l'est, mais il est supporté dans Firefox et peut-être un autre navigateur. Ensuite, nous avons eu la vidéo. C' est la balise vidéo droite, et il y a la vidéo en lecture. C' est juste une vidéo rapide de ces gars qui dansent. Comme vous pouvez le voir ici, il y a des contrôles sont inclus. Nous avons notre source, nous avons des contrôles, des sources différentes, et puis un recul si nous en avons besoin, ce qui n'est pas le cas dans ce cas. Puis voici un iframe, le même iframe que nous avons montré dans les diapositives. Ici, il est juste de le lire sur YouTube, ce qui prend un peu plus de temps à penser et ensuite il montre d'autres vidéos. D' accord. C'est tout pour les pantoues multimédia. Suivant est les tableaux HTML. 8. Ébaucher les zombies avec un tableau (HTML): Dans cette vidéo, nous parlons de tableaux HTML. Nous parlons de l'élément de table, de l'élément de légende, de l'élément de ligne de tableau et de l'élément de données de table ou des cellules de tableau. Tu devrais être prudent avec les tables. Ils font un excellent travail de mise en page des données. Ils ont tendance à être orientés horizontalement, et dans un monde de design réactif où votre site Web fonctionne à la fois sur un bureau géant et sur une minuscule montre ou téléphone, être orienté horizontalement peut rendre vraiment difficile pour les tables de s'affichent correctement dans les deux contextes. juste attention avec eux et assurez-vous de ne mettre que les choses dont vous avez besoin là-dedans, pas vraiment utiliser des tableaux pour la mise en page des éléments de page réels, mais vraiment, seulement pour les données réelles. Les tableaux utilisent de nombreuses balises comme vous l'avez probablement vu en haut de cette vidéo. Tout d'abord, nous devons avoir l'élément de table. Ensuite, il y a aussi une description de la table, qui est la légende, la ligne de la table, puis les données de la table ou la cellule. Il y a aussi la cellule d'en-tête de table, qui est th. Voici une table, étiquette de table d'ouverture et nous avons une légende, A Tableau Zombies. Ensuite, nous avons commencé une ligne de table. Ensuite, nous avons des données de table. Première ligne, Zombie 1, données du tableau 2. Notre première rangée pour Zombie 2, puis nous fermons la rangée de table. C' est la première rangée de notre table. Ensuite, nous avons notre deuxième rangée. Deuxième rangée pour Zombie 3, deuxième rangée, Zombie 4, ligne de la table de fermeture. Ensuite, nous fermons la table et un peu nous entrerons dans le code et je vais vous montrer à quoi cela ressemble réellement. Avec des en-têtes, genre de chose similaire. Nous avons la table d'ouverture, nous re la légende, commençons par la ligne de la table, puis nous allons faire la première ligne des en-têtes de table. Nous avons laissé des zombies colonne et re colonne zombies, fermeture d'une ligne de table, puis nous avons notre deuxième ligne, qui est notre première ligne de données réelles, données table première ligne Zombie 1, première ligne Zombie 2, fermer la ligne de table, Fermez la table. Regardons ce code et voyons à quoi ils ressemblent réellement. J' ai fait un peu de CSS juste pour m'assurer que les choses allaient bien. J' ai juste effondré les frontières pour qu'ils n'aient pas d'espace entre eux. Ensuite, j'ai mis une bordure solide autour des tds et des ths. Nous avons notre table, h2 désignant juste où se trouve la table. Nous avons notre étiquette de table d'ouverture, et nous avons notre légende, qui est ce qui apparaît ici. Nous avons notre première ligne de table, donc nous avons notre premier élément ici. Première rangée Zombie 1 Ensuite, nous avons nos données de la deuxième table, Zombie 2 juste ici, et puis nous avons notre deuxième rangée. Voici la deuxième rangée. Ensuite, nous avons la deuxième rangée Zombie 3 juste ici. Deuxième rangée Zombie 3, deuxième rangée Zombie sur 4, deuxième rangée Zombie 4. Fermer la ligne de la table, fermer la table. Maintenant, avec les en-têtes, il aura l'air à peu près le même, sauf que ces titres ou titres de table vont par défaut afficher en gras. Nous avons la table d'ouverture, notre légende. Nous avons commencé avec la ligne de table, en-tête de table, Zombies colonne gauche, Zombies colonne gauche. Nous avons la table droite Colonne Zombies, Zombies Colonne Droite. Trop loin. Colonne droite Zombies et puis nous avons la deuxième ligne et a été notre première ligne de données. Première rangée Zombie 1, et nos données de la deuxième table ici. Première rangée Zombie 2, fermez le tr, fermez la table. C' est ça pour les tables. Ensuite, nous passons aux sélections et à quelques CSS. Bonté. 9. Sélection zombie: Dans cette vidéo, nous allons regarder les sélecteurs de descendants, les pseudo-classes et autres, les pseudo-classes, le premier enfant, le dernier enfant et le nième enfant, puis nous allons parler de zèbre strier une table. sélecteurs descendant, parfois ils sont aussi appelés sélecteurs contextuels et ils sont fondamentalement une combinaison d'un id, d' une fin de classe ou de sélecteurs d'éléments séparés par un espace. Par exemple, vous pourriez avoir cet identifiant de horde ou avec une classe de zombie avec un élément de b, ils n'ont pas besoin d'être un identifiant, une classe, un élément. Il peut s'agir de deux éléments, il peut s'agir de deux classes sur un ID, peut être un ID et un élément. Il peut être la combinaison que vous voulez, nombreux que vous voulez et dans ce contexte, celui-ci signifie seulement b balises qui sont dans un élément avec une classe de zombie et qui est aussi un élément avec un ID de horde. Compte tenu de la horde zombie b, nous avons un identifiant de horde ici. Nous avons une classe de zombie et b, donc ceci est sélectionné car il n'y a pas de b, ce n'est pas sélectionné car ce n'est pas dans une classe de zombie, ce n'est pas sélectionné. Bien que ce soit un zombie classique avec un b, il n'est pas sélectionné car il n'est pas dans l'ID de la horde. pseudo-classes sont des moyens de sélectionner des éléments basés sur des aspects les concernant. premier enfant va sélectionner le premier enfant d'un autre élément et les pseudo-classes sont écrites avec un deux-points entre le sélecteur et la pseudo-classe. Donc ul li : premier enfant étant un exemple. Étant donné ul li : premier enfant, nous avons une horde ul li:premier enfant. Nous avons un ul ici, nous avons un li, donc c'est le premier enfant de l'ul. Celui-ci est sélectionné, c'est un li dans un ul, mais ce n'est pas le premier enfant, donc il n'est pas sélectionné. Ici, nous avons un autre ul, le premier enfant, cependant, est une balise b, donc il n'est pas sélectionné, n'est pas un li et ceci comme un li n'est pas le premier enfant, donc il n'est pas sélectionné. Nous allons jeter un autre coup d'oeil à cela dans le code 2 pour nous assurer que c'est clair. dernier enfant va travailler de la même façon que le premier enfant, ils ne sont pas allés de la direction opposée. Étant donné ul li : dernier enfant, nous avons un ul, nous avons li. C' est le premier enfant, ce n'est pas le dernier enfant, donc il n'est pas sélectionné. Mais ce li, est sélectionné parce que c'est le dernier enfant. Maintenant, si vous aviez seulement un élément li ici, ce serait à la fois le premier et le dernier enfant, donc il sera sélectionné comme le seul enfant, il serait sélectionné pour le premier enfant, dernier enfant et ici nous avons un autre ul. Le b est le premier enfant, li, est le dernier enfant donc il est sélectionné et la balise b bien sûr ne l'est pas. Ensuite, il y a nth-child et c'est une fonction qui peut prendre un nombre, un mot-clé ou une formule. Par exemple, si nous mettons juste un sept, il va sélectionner le septième enfant de ul, mais seulement si c'est un li, vous pouvez mettre même ce qui va sélectionner tous les enfants même par exemple 2, 4, 6, 8. Qui apprécions-nous ? Zombies zombies. Ici, nous avons une fonction 3n moins 2. Lorsque n est 1, 3 fois 1 est 3, moins 2 est 1. Lorsque n est 2, nous avons 6 moins 2 qui est 4, puis 7 et 10, etc. Ce serait une fonction qui sélectionnerait ces éléments particuliers. Maintenant, l'entrelacement de zèbre est lorsque vous créez des rangées de table couleurs alternatives afin de faciliter le suivi de la ligne. Vous pouvez utiliser nth-child pour cela avec par exemple, tr : nth-child (impair) définir la couleur d'arrière-plan sur un gris clair serait un excellent moyen de le faire. Regardons un certain code a les mêmes exemples d'avant. Nous avons ici, compte tenu de la horde hashtag. zombie b. Ce que j'ai fait ici est juste définir des couleurs sur ceux qui sont sélectionnés pour aider à faire clairement qu'ils sont sélectionnés ou non. Il devrait être la couleur bleue de b tag dans un zombie au sein d'une horde. Ici, nous avons une balise b, qui dit qu'elle est sélectionnée, mais c'est une balise b dans un zombie au sein d'une horde, donc c'est bleu et aucun de ces autres n'est sélectionné, comme nous l'avons déjà dit. Celui-ci n'est pas sélectionné, car il n'y a pas de balise b, celle-ci n'est pas sélectionnée parce qu'il n'y a pas de balise zombie et celle-ci n'est pas sélectionnée parce qu'il n'y a pas de balise horde. premier enfant n'est pas les mêmes codes que nous avons vus auparavant et ici je suis juste en train de changer la couleur en vert pour ceux qui sont sélectionnés. Première horde, nous avons dû ajouter un ID juste pour le rendre clair, donc première horde ul li:first child. Nous sommes dans la première horde ul li:premier enfant, celui-ci est sélectionné, et celui-ci est le vert. C' est le deuxième enfant, il n'est donc pas sélectionné. C' est un ul encore dans la première horde, mais le premier enfant n'est pas une balise li, donc il n'est pas sélectionné, c'est juste gras. Ensuite, nous avons le dernier enfant, donc le dernier enfant ici. Dernier sélecteur d'enfant, nous avons #last -horde ul li:last-child, tout est dans la div id last-horde. Nous avons l'ul et li c'est le premier enfant, ce n'est pas le dernier enfant, donc il n'est pas sélectionné. Ensuite, nous avons une classe li de zombie qu'il est sélectionné parce que c'est le dernier enfant, donc il est devenu rouge. Nous avons un autre ul le premier enfant est une balise b, le dernier enfant est une balise li, donc il est également sélectionné et il est donc rouge. Puis enfin, nous avons une table qui était zèbre striping, donc nous allons juste définir la rangée de table avec un nième enfant de bizarre. Choisissez premier, troisième, cinquième, septième, etc.couleur de fond d'un, juste un léger gris et ici nous avons la table d'ouverture, nous avons la légende, nous avons la première ligne, zombie 1, zombie 2, deuxième rangée zombie 3, zombie 4 . Troisième rangée zombie 5, zombie 6. Quatrième rangée, zombie 7, zombie 8. Cinquième rangée, zombie 9 zombie 10. Sixième rangée zombie 11, zombie 12, etc, tout le chemin vers le zombie 16. Comme vous pouvez le voir, les lignes impaires ont un fond qui est gris, donc nous avons ces première, troisième, cinquième, septième. C' est tout pour la sélection de zombies, où ensuite nous allons parler du zombie Polka, ou plutôt des menus d'accordéon. 10. Zombie Polka: Très bien, dans cette vidéo, nous parlons de l'élément de détails et de l'élément de résumé et de la façon dont vous pouvez créer vos propres menus Accordéon. Tout d'abord, nous avons la balise details, qui est un élément de niveau bloc, et vous allez mettre la plupart du contenu dans cet élément et nous avons la balise summary qui va dans la balise details, devrait être aussi courte que cela a du sens. Lorsqu' il est rendu, l'élément récapitulatif s'affiche avec un triangle à gauche. Ensuite, vous cliquez dessus et le triangle s'ouvre et affiche le contenu à l'intérieur. Voyons à quoi ça ressemble. Encore une fois, nous avons ici des détails. Ensuite, nous avons le résumé comme le premier tableau des détails est la meilleure pratique. Il devrait également avoir une seule balise de résumé si vous avez plusieurs peut confondre le navigateur et puis nous fermons la balise de détails ici après tout ce Cher Diary. Si nous venons ici, nous voyons que la balise sommaire juste ici, est ce qui est montré ici et si je clique dessus et puis il me montre tout le contenu ici. Si je clique à nouveau dessus, il se ferme. Je peux cliquer directement sur le triangle, ou je peux cliquer sur le texte lui-même et là vous avez vos menus Accordéon. Voyons ce qui se passe si on met un deuxième ici et 3,2. Si nous en mettons un deuxième, cela va simplement supposer qu'il fait partie du contenu. C' est tout pour les menus Accordéon. 11. Conclusion: Merci d'être venu dans l'aventure de tueur Zombie, c'était génial de vous avoir avec vous. J' adorerais voir n'importe quel projet que vous avez fait. N' hésitez pas à les partager avec moi et avec vos camarades de classe. J' adorerais voir ce que vous avez fait et ce que vous avez appris. Merci et je te verrai le prochain cours. Au revoir