Créer votre premier site Web (et tuer des zombies avec HTML et CSS)

1. Introduction - Ce que nous allons créer: Bonjour. Je m'appelle John Ray. Je vais vous aider à créer votre premier site Web et Flax Zombies avec HTML et CSS Dans ce cours, nous allons créer un site Web simple de deux pages basé sur un essai écrit par le docteur Alexander Boople Nous allons créer cette page Shamel de l'étude indicielle ici, qui contient l'essai complet Ensuite, nous allons également créer une page de biographie, qui inclut certaines de ses choses préférées pour une raison ou une autre et une photo de l'estime du docteur Boople. C'est bon. Allons-y. 2. Manipuler les dossiers de morts-vivants: Avant de parler de la création d'un site Web, lorsque vous devez commencer à parler de fichiers. Dites bonjour à Zombie Bob. Maintenant, Bob, en tant que zombie, sait certaines choses. Il sait que les cerveaux sont bons. Il sait qu'il a tous ses membres. Il sait qu'il est un acteur à part entière de l'apocalypse. Il sait dans quel nid de zombies il se trouve, et il y a d'autres zombies dans son nid comme Sally, Jamal et Carlos. Voici un dossier. Désormais, un fichier possède des connaissances similaires. File Bob sait par hasard qu'il possède toutes ses données. Il se trouve qu' il sait qu'il est une donnée ou une information individuelle autonome. Il sait dans quel dossier il se trouve. Il connaît d'autres fichiers de ce dossier comme Sally point MP Three, Jamal point CSS et Carlos point JS Maintenant, Bob est dans son nid et il connaît tous les zombies qui s'y trouvent. De même, File Bob peut voir tous les différents fichiers qui se trouvent dans le même dossier que lui. Un fichier est une unité de données et un ordinateur désignés par un nom de fichier et une extension de fichier. Les dossiers sont comme des compartiments dans lesquels vous pouvez placer des fichiers et d'autres dossiers, et les sites Web sont souvent composés de plusieurs fichiers et dossiers. fichier HML typique peut être associé à de nombreux fichiers, notamment du CSS, du JavaScript, des images, vidéo, de l'audio, etc. Ces fichiers ne se trouvent peut-être pas dans le même dossier que le fichier HTML. Parfois, les nids ont des sous-nids et parfois les dossiers ont des sous-dossiers Cependant, lorsque vous avez un sous-dossier ou un sous-nid, Zombie Bob ou File Bob peuvent réellement voir le contenu de ces sous-parties Ils ne peuvent savoir ce qu'il y a dedans que si on le leur dit. Et nous pouvons leur dire ce qu'il y a dedans par un chemin. Le chemin consiste essentiellement à passer d'un fichier à un autre ou d'un zombie à un autre dans différents dossiers. Les chemins peuvent être placés dans un sous-dossier, dans un dossier parental ou ancestral, ou dans les deux Il y a plusieurs personnages différents que nous utilisons dans les chemins. Le premier est le point, c'est-à-dire le répertoire en cours. que soit le fichier d'où nous venons, deux points indiquent le répertoire parent, ce qui signifie que nous montons d'un niveau. Et Slash sépare les dossiers ou dit de regarder dans le dossier suivant Une fois qu'on aura dit à Zombie Bob où se trouve Evite et où se trouve le sous-marin, il pourra la voir Avec File Bob, une fois que nous lui avons donné un chemin ici, point, barre oblique, sous-dossier, barre oblique et gif, il peut trouver Event gif et l'utiliser sur son site Web Slash représente le dossier dans son ensemble. Dans Slash, nous avons un certain nombre de fichiers. Dans Slash, nous avons toujours Zombie , un autre dossier contenant des fichiers Nous avons apocalypse, un autre dossier contenant quelques fichiers. Resistance, qui est un sous-dossier d'apocalypse, qui est un sous-dossier de la racine Et nous avons LeRoy, qui est un sous-dossier de résistance, un sous-dossier d' apocalypse, etc. Comment sortir de Slash ? Nous allons être dans ce répertoire pour, dans ce cas, parler de point HTM. Comme nous sommes dans le même dossier de barres obliques, vous pouvez simplement écrire sur le HTML à points Il n'a pas besoin d' examiner quoi que ce soit. Vous pouvez également écrire point slash A point HTML. permettrait simplement de s'assurer que nous sommes dans le répertoire actuel, puis de passer à ce code HTML, mais la barre oblique est supposée, donc ce n'est pas obligatoire Jeux HTML. Le code HTML des jeux est ici. C'est le même genre de chose. Jeux en HTML ou en HTML de jeux. Maintenant, Bob point HTML. Bob point HTML se trouve en fait dans le dossier Zombie. Nous pouvons faire du HTML à points Zombie Bob. Ou nous pourrions également faire du point slash Zombie slash Bob point HTML. Maintenant, à partir de maintenant, je ne vais pas inclure la barre oblique, c'est juste supposé. C'est bon. Point rouge HTML. Le code HTML à points rouges est ici. Nous allons donc passer à l'apocalypse. Slash HT M. Ensuite, nous allons passer à Juan, qui est en résistance Nous allons donc passer à l'apocalypse. Résistance aux éclaboussures. Slash an.tm. Pour le numéro six, nous allons utiliser Index DHTL dans la barre oblique Donc ça va être une apocalypse. Résistance aux éclaboussures. Slash Leroy. Et slash. Désormais, Index point HTML est le fichier par défaut. Si une page Web cherche simplement quelque chose, l'Index IHL est généralement donné Cependant, il est également bon d'inclure le nom du fichier. Vous pouvez donc simplement utiliser Apocalypse Slash Resistance Slash Slash Slash Slash Leroy, mais vous pouvez également utiliser Slash Index point HTML pour vous assurer qu'il arrive au bon endroit. C'est bon. Enfin, nous allons passer du HTML à un point, qui se trouve ici, au HTML à points zombies, qui se trouve ici. Pour ce faire, nous devons monter dans le dossier, nous allons donc passer au point dans une barre oblique. Donc, si nous sommes dans l'un d'eux, nous montons d'un niveau, nous sommes maintenant dans l'apocalypse. Nous devons monter d'un niveau supplémentaire. Point et barre oblique Cela signifie monter d'un niveau, puis monter d'un autre niveau, puis nous avons besoin du HTML à points zombies, et c'est le chemin à suivre. 3. Utiliser des éditeurs de code pour arrêter l'apocalypse: Il est important de discuter des éditeurs de code. Dans ce cours, j' utiliserai le code VS, et vous êtes invités à l'utiliser, mais vous voudrez peut-être utiliser autre chose. Éditeurs de texte brut. Sur Windows, vous avez le bloc-notes, qui est un cours de travail standard, vous pouvez certainement créer du HTML et CSS dans le bloc-notes. Ce n'est pas un problème. Sur MAC, il y a l'édition de texte, vous devez vous assurer que c'est en mode texte brut. S'il s'agit du mode texte enrichi, il n'enregistrera pas le fichier correctement et ne fonctionnera pas de la même manière, car il enregistrera tout un tas d'autres informations impliquées. Assurez-vous donc qu'il s'agit du mode texte brut. Maintenant, ces deux éditeurs fonctionneront bien, mais ils ne sont pas recommandés. La raison en est qu'il existe de meilleures options. Une chose que font beaucoup de ces options que je vais passer en revue est le code couleur, le code. Cela signifie que certains types d' éléments, vos éléments HTML, vos sélecteurs CSS auront tous des couleurs différentes L'avantage est que si un élément est censé être un sélecteur, mais que la couleur est incorrecte, vous pouvez vous rendre compte qu'il s'agit d'une erreur, que vous avez mal saisi quelque chose ou que quelque chose ne va pas tout à fait correctement. Cela peut donc vraiment vous aider à détecter les erreurs quelque chose ou que quelque chose ne va pas tout à fait correctement Cela peut donc vraiment vous aider à Quelques options gratuites ou NoPed plus plus. Ceci est uniquement pour Windows, mais fonctionne bien. Il y a des crochets, qui devraient fonctionner pour n'importe quelle plateforme. Le code VS, encore une fois, c'est celui que j'utilise dans ce cours, mais il n'est pas obligatoire pour que vous l'utilisiez. N'importe lequel d'entre eux fonctionnera bien. Mais tous les trois sont gratuits. Il y a aussi des fournitures et textes que beaucoup de gens aiment vraiment, bien que cela ait un coût. Vraiment, tout autre outil de codage supportant le HTML et le CSS conviendrait. N'importe lequel d'entre eux fonctionnera pendant que vous codez à la maison. 4. Les bases du HTML: Il parlera de ce qu'est le HTML et de son fonctionnement. Qu'est-ce que le HTML ? Il est l'abréviation de Hypertext Markup Language. Il s'agit de la structure ou du squelette d'une page Web. C'est un moyen de baliser le contenu d'une page Web. Un élément HTML comporte quatre parties. Nous avons d'abord la balise d'ouverture, puis les attributs, le contenu et la balise de fermeture. Pour ouvrir les étiquettes, commencez par un signe inférieur à ou un crochet à angle gauche. Ils sont ensuite suivis du nom de la balise, P pour paragraphe, par exemple. Il existe de nombreuses balises différentes, puis je terminerai par un signe supérieur ou un crochet à angle droit. Par exemple, nous avons une balise P qui s'ouvre. Nous avons une balise B ouvrante pour le gras, dont nous parlerons un peu plus tard, et une balise DIV ouvrante, dont nous parlerons également un peu plus tard. Mais ce ne sont là que quelques exemples d'ouverture de balises. Ensuite, nous avons quelques attributs. Un attribut est une ou plusieurs paires de nom et de valeur appliquées à un élément HTML. Et les attributs font généralement l'une des trois choses suivantes. Ils vont identifier un élément. Nous l'utiliserons beaucoup avec le CSS, où nous extrayons quelque chose de la page, puis nous le modifierons. Les attributs modifieront le comportement d'un élément, exemple en changeant la couleur, la police, tout un tas de choses différentes, ou ils définiront du contenu externe. Cela se produit avec des images, des liens vers un autre fichier ou une autre page, et les attributs apparaîtront entre la balise d'ouverture et le signe supérieur ou le crochet à angle droit. Et quelques exemples seraient de définir une classe, qui est un attribut d'identification de date ars sur le P ou un ID d'avertissement de zombie, autre attribut d'identification sur l'élément dI ou la balise di. Ensuite, nous avons le contenu, généralement du texte ou d'autres éléments HTML Il va apparaître entre les balises d'ouverture et de fermeture ou à l'intérieur de l'élément. Certains éléments ont des limites quant aux types d'éléments qu'ils peuvent contenir, et certains éléments ne peuvent apparaître qu' à l'intérieur de certains autres éléments. Quelques exemples peuvent être que ce paragraphe a le goût d'un cerveau ou qu'il semble y avoir un zombie qui rampe Nous avons l' étiquette de fermeture, qui reflétera l'étiquette d'ouverture, sauf qu'elle inclura une barre oblique après le signe « lentille an Pour refléter nos balises d'ouverture d'avant, nous avons une barre oblique P, une barre oblique B ou une barre oblique Tous les éléments HTML ne nécessitent pas de balise de fermeture. C'est ce que l'on appelle des balises nulles ou à fermeture automatique. Généralement, si un attribut contient du contenu tel que des éléments d' image ou si l'élément n'a pas contenu tel que des sauts de ligne, ils ne possèdent pas de balise de fermeture. Nous avons ici un tag P qui s'ouvre avec des zombies, puis nous avons un tag qui s' ouvre, non, un tag ferme, une famille, un tag P qui ferme, puis nous avons un autre zombie P qui s'ouvre. Ensuite, nous avons une plaque oculaire qui s'ouvre, un trésor B qui s'ouvre, qui ferme B, qui ferme e, ferme P. C'est ce que nous appelons la nidification Si vous ouvrez un élément au format HTML, vous devez le fermer avant fermer son élément parent ou l'élément situé au-dessus. Nous regardons cela en couleur. Nous avons, par exemple, ici, celui-ci est entièrement encapsulé dans le P, dit qu' il est un enfant de l'élément P. Nous avons alors ici le B entièrement entouré par le i, et le I est entièrement entouré par le P. B est dit enfant de I, I est dit enfant de P, et B est dit petit-fils de P. Vous pouvez également le faire dans l'autre sens et dire que P est le parent de I, I est le parent de B, et P est le grand-parent de B. Maintenant, il s'agit d' une page HTML standard La plus petite quantité de code que vous puissiez avoir commence par un type de document, qui n'est pas techniquement du HTML, mais il est là pour indiquer au navigateur ce qu'est ce document. Ensuite, nous avons notre élément HTML d'ouverture. Cela définit simplement où se trouve le code HTML. L'en-tête sera composé d' informations sur la page, puis le corps de tout ce qui va s' afficher sur la page. Jetons un coup d'œil à cela et faisons du live coding. 5. Codage en direct HTML - Page d'accueil: Nous avons juste les tags que vous avez vus plus tôt, les éléments. Nous avons notre type de document d'ouverture, qui indique au navigateur qu'il s'agit d'une page HTML. Nous avons un élément HTML. J'ai ajouté un attribut ang ici pour montrer qu' il est en anglais. Cela peut être utile pour de nombreuses choses, mais les navigateurs, les lecteurs d'écran et les moteurs de recherche les aident à savoir dans quelle langue il s'agit, moteurs de recherche les aident à savoir dans quelle langue ce qui leur permet de préparer plus facilement des traductions choses du genre ou de savoir de quoi traduire. Nous avons également un élément principal, qui sera une information sur la page. Nous n'en avons pas encore, mais nous le modifierons plus tard. Nous avons un élément corporel. Ce qui va afficher tout ce qui se trouve sur la page. Maintenant, j'ai configuré cela pour que lorsque j'enregistre quelque chose ici, il apparaisse ici. Si, par exemple, j'ajoute Just a hello world. Ça aide si tu l'épelles correctement. Bonjour tout le monde, et je le sauvegarde. Il apparaît ensuite ici. L'élément P apparaît ici. La prochaine chose que nous allons faire est d'ajouter ce que l'on appelle un H ou un titre de niveau 1. Il s'agit du titre de premier niveau, vous avez également H un, H deux, H trois, h4h5 et H six, titre de niveau un étant le niveau supérieur, puis généralement vous divisez votre contenu avec des sous-titres et d'autres éléments avec H deux, puis H trois, et ainsi Laissez-moi vous dire ceci et nous verrons à quoi cela ressemble. Un titre est donc par défaut beaucoup plus grand que le texte normal, et également en gras. Alors aidez-le à se démarquer en tant que titre. en-têtes sont en fait des éléments au niveau des blocs, où ils créent de l'espace au-dessus et en dessous d'eux-mêmes. La prochaine chose que nous allons examiner est en fait un élément span, qui est techniquement un élément en ligne Je vais simplement l' utiliser pour afficher la signature de notre docteur Buble, qui a écrit l'essai sur lequel nous travaillons Ou la page ESA sur laquelle nous travaillons. Techniquement, il s'agit d'un élément en ligne, ce qui signifie qu'il ne créerait pas d' espace au-dessus et en dessous de lui-même , mais comme ce H est au-dessus, le H va créer de l'espace, puis la prochaine chose que nous allons utiliser sera également un élément au niveau du bloc. Mais si je clique sur Enregistrer, cela indiquera le nom du docteur Poples La prochaine chose que nous allons ajouter est du texte. En fait, je l'ai ici dans le texte du contenu. Fermez ce tiroir, et nous avons ici tout un tas de textes que nous pouvons utiliser. Je vais copier ce texte ici. Ce ne sont que des paragraphes. C'est pour la page d'index. Une partie de ces informations sera utilisée pour la page à propos ou la page de biographie. Je vais coller ce contenu indirectement. Si je clique sur Enregistrer, vous pouvez voir que tout cela ressemble à un paragraphe géant. Il n'y a pas de continuité entre les paragraphes ici. Cela ne respecte pas nécessairement l'espacement de nos paragraphes Pour ce faire, nous devons ajouter des éléments p autour de nos paragraphes. Si je clique sur Enregistrer, vous pouvez voir que notre premier paragraphe prend forme. Ne vous inquiétez pas pour cet espacement ici. C'est juste à cause du rédacteur en chef. Ensuite, je vais ajouter quelques paragraphes supplémentaires. Comme vous pouvez le constater, nous allons continuer à ajouter des paragraphes. Encore une fois, ne vous inquiétez pas de cet espacement. C'est bizarre, et comme vous pouvez le constater, cela n'apparaît pas ici. Maintenant, je vais zoomer pour ajouter le reste des paragraphes. Ouais. C'est bon, et nous sommes de retour. OK. La prochaine chose que nous allons faire est parcourir et de trouver où j'ai étiqueté certaines choses qui devraient être mises en gras Tout ce qui porte ces astérisques, je vais le remplacer par un tag en gras Il existe en fait deux balises en gras ou deux balises qui créeront du gras. L'un est le tag B , que nous avons vu tout le monde ajouter ici autour du. Si je dis cela, vous pouvez voir que c'est maintenant en gras. L'autre étiquette est l'étiquette forte, qui représente une emphase forte. La raison pour laquelle il y en a deux, c' est parce qu'au départ, c'est en fait solide et non une corde. Laisse-moi régler ça là. Au départ, lorsque le langage a été créé, le tag Bol B était tout ce que nous avions. Et certains craignaient que cela ne fournisse pas suffisamment d'informations sur le contenu. Ce n'était pas assez sémantique. Ils ont donc ajouté le tag Strom afin de le rendre un peu plus spécifique et un peu plus sémantique Cependant, Strom a beaucoup plus de lettres à taper, et les développeurs n'ont donc pas vraiment fini par utiliser stro plus souvent C'est ainsi que le tag Bol a survécu. Maintenant, avec le HMO 5, les deux sont acceptables, vous pouvez donc utiliser celui que vous voulez Nous allons maintenant examiner les éléments I et M, où j'ai fait ces soulignements, nous allons ajouter des italiques, I pour les italiques Tout comme le gras, l'italique comporte deux éléments. La première est celle qui ressemble ici à ceci, nous avons déjà vue un peu plus tôt. Si je dis cela, vous pouvez voir que cela devient alors en italique. Tout comme Bold and Strong, B et Strong voulaient que l'élément soit plus sémantique, ou voulaient une version plus sémantique de l'élément, et ils ont donc ajouté l'EM pour mettre ou voulaient une version plus sémantique de l'élément, l'accent Mais encore une fois, l'une ou l'autre est acceptable, utilisez celle qui vous convient le mieux. Si je le répète ici, c'est également en italique C'est bon. Maintenant que notre contenu est sur notre page, ajoutons un peu de navigation. Juste en dessous de la balise body ici, juste en dessous de la balise body qui s'ouvre, je vais ajouter Et c'est donc le début. Nous avons un élément A, qui signifie à l'origine ancre, mais il s'agit de notre balise de lien. Tout ce vers quoi nous renvoyons se trouvera dans cet attribut ARF. Et puis le texte du lien sera ce texte ici. Je vais donc simplement le lier à Index DHTO, qui est ce même fichier Je vais appuyer sur Enregistrer, puis vous verrez qu'il y a un lien ici. Si j'ai cliqué dessus, cela ouvrira simplement le même index HTL Nous n'avons pas à nous inquiéter à ce sujet pour le moment. Mais nous allons finir par avoir deux pages sur ce site. Je vais donc ajouter un lien vers ce lien dès maintenant, même si nous n'avons pas encore créé cette page, ce sera la bio point HTML du docteur Gopal Ensuite, je vais passer à la biographie. Sauvegardez ça. Nous avons maintenant deux éléments là-haut, deux éléments A là-haut. Généralement, la navigation est placée dans une liste non ordonnée car il s'agit d'éléments connexes Il s'agit donc plutôt d'une manière sémantique de les associer Et nous allons également utiliser une balise structurelle appelée NAV pour la navigation. Je vais donc d'abord ajouter NAV ici. C'est un élément structurel. Nous n' apporterons donc aucune modification. Donc, si je l'enregistre, il n'y aura aucune modification sur le front-end pour le moment, mais nous l' utiliserons beaucoup plus tard pour le CSS et nous assurerons également que la structure de la page est appropriée. Je vais maintenant ajouter cette liste non ordonnée. Une liste non ordonnée commence donc par UL. Et puis chaque élément aura un élément LI pour élément de liste. Ensuite, nous allons fermer l'UL. Une fois que je l'aurai sauvegardé. Ensuite, vous pouvez voir qu'il se trouve maintenant dans une liste non ordonnée ou une liste à puces. Nous allons jouer avec cela un peu plus tard lorsque nous passerons au CSS, mais maintenant il est correctement structuré. Maintenant, avec ici, nous avons notre structure NAB ici, mais il y a plus de structure dans une page que cela Il existe plusieurs éléments structuraux différents. Par exemple, nous avons un en-tête, qui peut contourner l'en-tête. Maintenant, permettez-moi également de souligner que l'en-tête et les titres sont très différents Ainsi, un en-tête sert à afficher le haut de la page, tandis qu'un en-tête contient des informations sur la page. en-têtes sont également du contenu qui s'affichera sur la page, il figurera donc dans l'en-tête Ensuite, nous avons le principal, qui est le contenu principal de la page, qui dans ce cas est l'essai du docteur Buble Je vais fermer le principal d'ici. Je vais également ajouter un élément de pied de page contenant du contenu Collez ça ici. Nous avons donc un pied. Nous avons une RH. HR est l'abréviation de Horizontal Rule. Il s'agit d'une étiquette vide, elle n'a donc pas besoin d'étiquette de fermeture. Il va juste tracer une ligne sur la page. Ensuite, nous avons un élément p ici, balise P avec quelques informations. Et puis fermer P, fermer le pied de page. Je vais l'enregistrer pour que nous puissions le voir en action ici, et nous avons ici tout notre contenu. Vous remarquerez ici que cela a réduit l'espace. Ce chiffre inférieur à celui indiqué en rouge. En effet, pendant que le navigateur le découvre, il ne se rend pas compte que ce n'est pas du code On ne sait toujours pas ce que c'est. Be less than sin déclenche généralement le code. Ce sera quelque chose qui ne devrait pas être affiché sur le front-end. Le navigateur le trouve, comprend ce que nous voulons ici, mais la meilleure chose à faire est de le régler sur l'esperluette LT point-virgule, ce qui signifie Perluette LT. Cticon va nous montrer le même support à angle gauche. Si je clique sur Enregistrer. Notez qu'il n'y a pas eu de changement, et c'est parce que c' est le même symbole. Nous pouvons aussi Oups. Définissez le symbole supérieur à. Ici, je vais ajouter un espace, qui sera le plus grand que le signe San. Et parce que l'esperluette désigne désormais un caractère spécial ou indique que nous allons afficher un L'esperluette que nous voulons afficher doit maintenant être réglée sur esperluette AMP, sauvegarde sémique Rien de tout cela ne devrait changer. Cela n'honore pas l'espace qui s'y trouve. Mais nous ne pouvons pas nous contenter de ces symboles. Nous pouvons également utiliser le symbole du copyright. Et le symbole du copyright est Ampersand Copy. ALS, et vous pouvez voir que c' est maintenant le symbole du copyright. Ce sont ce que l' on appelle des entités HTML, nous permettent d'écrire page des caractères qui ne figurent pas sur nos claviers Maintenant que nous avons mis en place notre contenu et notre structure principale pour notre code HTML à points d'index, nous allons maintenant l' enregistrer et créer notre deuxième page, notre bio HTL. 6. Codage en direct HTML - Page bio: Le moyen le plus simple de créer un bio Dot HTL est de partir de zéro Nous pouvons prendre le HTML à points d'index et l'enregistrer Bio Dot HTML afin pouvoir prendre une longueur d'avance avec une structure et ce genre de choses Je vais aller dans File Save As, et le changer en bio DH TML J'économise. Nous avons maintenant Biodi TML, mais vous remarquerez qu' ici, nous avons également du HTML à points d'index Il s'agit désormais de deux copies l'une de l'autre. Je vais également ouvrir le texte à points du contenu, afin que nous y ayons toujours accès également. C'est bon. Maintenant, bio, nous savons avec certitude que ce contenu n'est pas correct. Allons-y et supprimons ce contenu ici. Si nous l'enregistrons maintenant, il ne sera pas mis à jour ici, mais c'est parce que nous examinons toujours l' index au format HTL ici Je devrais pouvoir cliquer sur la biographie, et nous voilà avec le point HTML de la biographie. Je vais récupérer le contenu de H one et le placer ici. Ensuite, je vais appuyer sur Enregistrer et nous pouvons voir si c'est le bon ou le contenu, et maintenant nous pouvons plus facilement distinguer une partie de deux pages. Maintenant, je vais prendre le contenu d'ici. Je vais le copier. Pas la biographie de l'index. Je vais le coller dedans. Encore une fois, nous allons avoir du pain sur la planche. Je vais commencer à ajouter des balises P. Nous avons maintenant plusieurs rubriques différentes ici. Je vais ajouter deux balises H à ses articles préférés, et je vais ajouter un espace autour de cette petite note ici afin que nous puissions la styliser séparément. Maintenant, je vais mettre une liste UL ou non ordonnée de ses objets préférés LI LI autour de chaque article. Et fermez l'UL. Ce sera un H deux. Maintenant, ce sera une liste ordonnée. Une liste ordonnée est juste un OL par rapport à un UL. Je vais ajouter LI, utiliser le même élément LI autour la fermeture, et maintenant tout est là. Permettez-moi d'appuyer sur Enregistrer et nous verrons le nouveau contenu ici. Nous avons notre paragraphe. Nous avons un H deux, nous avons notre envergure. Nous avons une liste non ordonnée. Nous avons deux autres H, nous avons notre liste ordonnée, puis, bien sûr, nous avons le pied de page et les ressources humaines, etc. Maintenant, comme vous l'avez peut-être remarqué, pendant que je travaillais, il y a aussi des endroits où ajouter de l'italique et du gras Passons en revue et faisons-le maintenant. C'est bon. Nous avons modifié les italiques et les caractères gras Nous allons maintenant ajouter un signe de marque après cela parce que le docteur Bob a choisi de le faire. Et c'est le commerce d'esperluette, et c'est là que cela apparaît La dernière chose que nous allons faire avec le HTML est d'ajouter une image. Je vais donc revenir ici et directement à l'intérieur de cet élément P. Je vais ajouter des éléments d'image. Maintenant, une image est en fait une étiquette à fermeture automatique ou nulle. Alors, passez à l'image, puis elle utilise ce qu'on appelle un SRC comme source pour trouver l'image Et c'est le PNG. Je vais appuyer sur Enregistrer, et vous pouvez voir qu'il est là dans toute sa splendeur. Une autre chose que nous voulons ajouter aux images est ce que l' on appelle le texte alternatif. Et c'est un moyen pour les moteurs de recherche et les lecteurs d' écran d' accéder au contenu de l'image. Je vais le chercher d'ici. Utilisez un attribut. Utilise un attribut l. J'ai ce contenu. Je te jure, laisse-moi le prendre. C'est bon. Et c'est là qu'il apparaît. Appuyez sur Enregistrer. Notez qu'il n'y a aucun changement sur l'image car l' attribut ne le fait pas Je ne montrerai donc que deux lecteurs d'écran et moteurs qui lisent le code ou tout autre programme qui lit le code. Nous avons maintenant notre HTL en place. Regardons le CSS. 7. Bases des CSS: CSS est l'abréviation de feuilles de style en cascade. Si le HTML est le squelette, CSS en est la chair et les vêtements. Il vous permet de définir les couleurs, les polices et toutes sortes de choses différentes. La cascade du CSS. Les styles n'affectent pas un seul élément. Ils parcourent le document en cascade du parent à l'enfant. Par exemple, si vous définissez une couleur de texte sur l'élément du corps, elle se répercutera sur tous les éléments enfants. Une règle CSS comporte trois parties. Il y a d'abord le sélecteur, ensuite la propriété, puis la valeur La partie entre crochets est généralement appelée bloc de déclaration, et le tout dans son ensemble est appelé règle Le sélecteur va sélectionner les éléments auxquels appliquer les propriétés Il peut s'agir d'un élément, comme P, di ou main, qui sont tous des éléments que nous venons d'examiner, et vous pouvez sélectionner tous ces éléments dans une page à l'aide du sélecteur d' éléments peut s'agir d'une classe qui utilise l'attribut de classe HTML, nommez-la comme vous voulez, de sorte que la classe soit égale à zombies, morts-vivants, politicien, Vous avez également un ID, qui est une valeur de l'attribut ID du HTML, et pour cela, vous allez utiliser un hashtag. Pour les cours, vous allez utiliser un point pour indiquer qu'il s'agit d'un cours. Pour les identifiants, vous allez utiliser une balise de hachage pour indiquer qu'il s'agit d'un identifiant, et vous pouvez également utiliser une combinaison Par exemple, cela sélectionne tout élément P qui se trouve dans un autre élément avec un identifiant d'apocalypse, ne doit pas nécessairement être un enfant direct, il peut s'agir d'un petit-fils, descendant bien plus éloigné, etc. Cela sélectionnera n'importe quel div qui est un élément avec une classe de zombie, et cela sélectionnera tout élément avec une classe de politicien qui se trouve à l'intérieur d'un div. Propriété. C'est cet aspect que vous souhaitez modifier. Et il existe de nombreux exemples, mais des choses comme la couleur, la couleur d' arrière-plan, style de police, la famille de polices, bien d'autres encore. Et puis la valeur. Les valeurs sont les valeurs que vous remplacez par la valeur par défaut de la propriété valeur par défaut de ou par une autre valeur que vous avez indiquée précédemment. Le type de données autorisé dépend de la propriété. Certaines propriétés n'utilisent que des mots clés spécifiques, tandis que d'autres n'acceptent que des nombres ou des nombres avec des unités spécifiques. Certains prennent les deux. Regardons maintenant un peu de CSS. 8. Codage en direct CSS - Ajouter du style: Nous allons donc prendre nos pages HTML ici, et je vais revenir à notre index afin que nous puissions le voir fonctionner à partir d'ici. Et je dois ajouter un élément de style à nos boucles. J'y suis toujours dans la biographie. Laisse-moi y retourner. Indice. Je vais ajouter un élément de style. Et dans cet élément de style, je peux mettre notre CSS. La première chose que je vais faire est sélectionner toutes les balises H one, et je vais changer leur couleur en rouge orangé. Rouge-orange. Il existe de nombreuses manières de configurer la couleur. Le rouge orange est un mot clé qui fonctionne pour la couleur. Je vais enregistrer ça, et maintenant notre H est rouge orangé. Nous voulons également agrandir un peu notre H one. Je vais définir la taille de police. Alors, quelle est sa taille pour 50 pixels ? La valeur par défaut est 16, donc définir une taille de police de 50 pixels l' agrandira beaucoup. Comme vous pouvez le voir ici. La prochaine chose que je veux faire est de modifier cette signature. Je vais lui fixer une durée. Je vais définir un style de police qui change l'italique en italique et lui donner une couleur grise Si je dis cela, vous pouvez voir que cela le sous-estime un peu et qu'il l'a mis en italique Je veux donc me débarrasser de ces balles là-haut. ce faire, il suffit de fléchir l'UL et de définir le type de style ou le type de style de liste sur aucun Enregistrer. Maintenant ils sont partis. Le seul problème, c'est que nous avons une URL sur notre biographie qui va également la supprimer. Pour contourner ce problème, le moyen de ne le modifier que sur cette URL et non sur d'autres UL est localiser ou de définir un sélecteur de descendants Donc NAV UL. Toutes les UL d'une NAV sont les seules à être touchées. La prochaine chose que nous voulons faire, c'est au lieu de les avoir comme ça, nous voulons les afficher en ligne afin qu'ils soient les uns après les autres Je vais donc changer dans ce cas, encore une fois, je ne veux pas affecter tous les LI. Je veux juste affecter les LI au sein d'un NAF, et je vais configurer l'affichage en ligne Ensuite, je veux ajouter un peu de rembourrage pour qu'ils aient un peu d' espace entre eux Cela va ajouter dix pixels de rembourrage. Cela ne fait qu'ajouter de l'espace autour d'eux. Maintenant, vous pouvez voir qu' il y a un grand écart ici , mais il n'en sera pas vraiment un. Tous les éléments ont un rembourrage et une marge par défaut. Cette UL a donc par défaut un tas de rembourrage et marge à cause de ces puces Je vais donc régler son rembourrage à zéro, et sa marge à zéro Cela permet d'économiser, et maintenant c'est tout ce qu'il faut. Il reste encore un peu de chemin, et cela est dû au rembourrage de dix pixels qui l'entoure Dix pixels tout autour. Maintenant, une autre chose que j'aimerais faire, c'est qu' au lieu d'avoir la navigation ici, je veuille la faire voler au-dessus d'ici. Vous pouvez donc facilement le faire en réglant l'alignement du texte à droite, cela alignera le texte à droite. Si je sauvegarde, il survole ici car il est maintenant aligné à droite au lieu d'être aligné à gauche comme c'est le cas par défaut. Maintenant, c'est un peu trop près du haut, donc je veux ajouter un peu d' espacement ci-dessus. Je souhaite également ajouter un peu d' espacement entre les deux. Je vais prendre uniquement la nef je ne vais pas changer les éléments qu'elle contient Je vais dire marge supérieure à 100 pixels. J'économise. Et voilà, puis marge en bas. 50 pixels, et j'ai cliqué sur Enregistrer, et maintenant il y a un peu plus d' espace entre les deux. Maintenant, j'aime bien ce rouge orangé, donc je veux étendre son utilisation. Je vais également mettre ces deux liens en orange. Je vais donc dire N A Je ne veux sélectionner que les éléments A. Je veux faire de la couleur rouge orangé, la même couleur qu'avant. Enregistrer. Maintenant, ils sont rouge orangé. Maintenant qu'ils sont d'une couleur différente, il est beaucoup plus clair qu'il s'agit peut-être d'un lien. Je vais donc supprimer cette décoration de texte soulignée. Non Enregistrez, et maintenant il n'y a plus de ligne en dessous. Et une autre chose que nous voulons faire est marquer la page sur laquelle nous nous trouvons. Le moyen le plus simple de le faire est d'ajouter une classe à la page sur laquelle nous nous trouvons. Actuellement, c' est indexé dH TL, je vais ajouter une classe à L ici. classe est égale à la page actuelle. Maintenant, si je l'enregistre, ce que je vais faire maintenant, rien ne change car nous n'avons écrit aucun style pour le modifier. Mais avant d'aller plus loin, et donc je n'oublie pas, je vais le copier, et je vais le coller ici et là, mais le mettre sur le lien de la biographie, puisque c' est le lien qui correspond à la page actuelle ici. Sauvegardez-le juste pour ne pas l'oublier. C'est bon. Maintenant, je vais écrire un style pour cela. Comme il s'agit d'une classe, je vais choisir une page en cours. S. Ensuite, je vais mettre la bordure en bas, parce que je veux qu'elle soit juste en bas. Ensuite, je vais passer au rouge orangé. Les bordures prennent alors en fait trois valeurs différentes. Je vais définir solide, puis la largeur est de deux pixels. Solide, c'est le style. Vous pouvez avoir un point ou un tas d'autres éléments, mais je règle la couleur, le style et la largeur. J'économise. Maintenant, il met en évidence la page sur laquelle nous nous trouvons. C'est bon. Eh bien, regardons davantage vers le pied de page. Ce pied de page est sympa J'aime bien la ligne ici, mais je pense qu'elle serait plus nette si nous pouvions également la faire de cette couleur, cette couleur rouge-orange, un peu de bas de page HR Je vais mettre la bordure en haut cette fois parce que c'est ce qui gère la bordure pour les HR ou ce qui gère la couleur d'un HR Je vais lui redéfinir deux pixels, solide, et la couleur orange-rouge Comme vous pouvez le constater, l' ordre exact n'a pas d'importance car il est assez clair de quoi il s'agit. Je vais appuyer sur Enregistrer, et ici nous avons un rouge orangé. Maintenant, une autre chose qui serait cool, c'est ne pas l'étendre complètement, mais peut-être un pourcentage, parce que si nous l' agrandissons ou le réduisons, nous ne voulons pas nécessairement que ce soit 100 %. Si je le définis sur une valeur spécifique, il se peut qu'il soit trop grand à certains moments et trop petit à d'autres. Je vais définir une largeur de 60 %. Et cela signifie qu' il fera 60 % de la largeur de son parent. Maintenant, travaillons un peu plus sur le pied de page. Je veux aligner le texte au centre, sorte que le texte soit centré. Ensuite, je veux aussi ajouter un peu d'espace ici pour qu' il soit clair où cela commence et où cela se termine. J'économise. Laissez-moi le faire défiler un peu Maintenant, vous pouvez voir qu'il est maintenant centré, qu'il est un peu plus beau. Il y a de l'espace ici pour les différencier . C'est donc une bonne chose. Une autre chose qui se produit, c'est que si nous allons jusqu'au bout, cela continue à s'étendre le plus possible, qui n'est probablement pas ce que nous voulons. En général, il est beaucoup plus difficile de lire une ligne qui traverse toute la page. Nous allons donc définir une taille x. Je vais donc configurer Nav. Vous pouvez faire plusieurs choses, plusieurs sélecteurs dans une même déclaration si vous les séparez par une virgule Ici, je suis en train de définir tous ces en-têtes et pieds de page principaux de Nav. Je vais leur fixer une largeur maximale de 1 000 pixels et une marge automatique afin de m' assurer qu'ils sont centrés lors de leur enregistrement. Il économise. Je l'ouvre ensuite, et maintenant il est centré. Une chose que nous avons perdue ici, c'est que lorsque j'ai défini la marge automatique sur le Nav, cela m'a permis de supprimer la marge supplémentaire que nous avions ajoutée au-dessus et en dessous. Et je m'en suis aussi débarrassé sur les pieds de page, et maintenant c'est juste à côté de ça Il existe donc un moyen simple de résoudre ce problème. Ce que je vais faire, c'est qu'au lieu de le mettre sur chacun de ces éléments, je vais créer un div, lui donner une classe de wrapper. Et je vais l'intégrer à tous les éléments. C'est bon. Maintenant, disons que cela n' a rien fait parce que je n'ai pas encore changé le CSS. Donc, au lieu de sélectionner toutes ces choses, je vais maintenant sélectionner uniquement le wrapper. Je vais appuyer sur Enregistrer. Maintenant, le NAV a retrouvé sa marge, le pied de page a retrouvé sa marge, et si je l'ouvre, il ne passe qu'à 100 pixels Si nous allons à la bio, nous remarquerons qu'il ne possède plus aucune de ces fonctionnalités. Il existe un moyen simple de le faire. Vous pouvez cliquer sur ce style ou le copier dans son intégralité. Ensuite, je vais le coller ici. Je vais appuyer sur Enregistrer, et maintenant nous avons le même style à notre disposition. Nous avons le pied de page ici, le titre, toutes ces choses Si nous devenons trop grands. Oh, si nous devenons trop grands, cela ne l'arrêtera pas. La raison en est que nous n'avons pas ajouté l'emballage. Ajoutons donc le wrapper div ici. Faites défiler l'écran vers le bas. Cela permet d'économiser. Maintenant, si nous allons trop loin, cela l'empêche toujours d'aller trop loin. Maintenant, nous sommes de retour sur place ici. OK. Il y a encore quelques choses que nous voulons faire à ce sujet. Je veux dire, cette image est jolie. Nous aimons la photo du docteur B, mais elle ne semble tout simplement pas exactement là où elle se trouve, texte ne circule pas vraiment autour d'elle. Nous pouvons faire ce que l'on appelle un flotteur. Il en va de même pour l'image. Et ensuite je vais flotter. Le flottement fait sortir l' élément du flux normal et l' envoie vers la droite, ou vous pouvez également l'envoyer vers la gauche, puis permettre au contenu de circuler autour de lui. Je vais donc appuyer sur Enregistrer, et maintenant vous pouvez voir que le contenu circule désormais autour de lui. C'est mieux. Cette image est encore assez grande. Nous avons encore des choses qui s'en rapprochent. Ce que je vais faire, c'est apporter d'autres modifications ici. Définissons une marge gauche de cinq pixels et une marge inférieure. De cinq pixels également. Enregistrer. Cela nous a un peu aidés. Nous avons un peu d'espace là-bas. Ensuite, je veux aussi changer sa largeur d'une valeur de 300 pixels, et changeons sa hauteur. J'économise, ça l' a un peu écrasé. Et c'est parce que nous n'avons pas conservé le rapport hauteur/largeur. Nous l'avons forcé à un carré alors que ce n'est pas le cas. Alors laissez-moi simplement le supprimer, je l'enregistre, et maintenant il est automatiquement beaucoup plus beau. L'autre chose que vous pouvez faire est de régler votre hauteur sur automatique, afin de vous assurer que, quel que soit le paramètre que vous définissez ici, le rapport hauteur/largeur restera le bon. 9. À plus tard, Zombigator: Pour avoir suivi ce cours ? Si vous l'avez aimé, veuillez laisser un commentaire. Cela aide vraiment à faire passer le message. Et vous pouvez également consulter mes autres cours sur Skillshare Si vous voulez plus de contenu, j'en ai encore plus à l'Institut und point, où vous trouverez des livres, des jeux, des ressources et même des programmes. Merci. Passe une bonne journée.