Faites le codage manuel de votre premier site internet : HTML + bases du CSS

1. 0 Intro: Bonjour, je m'appelle Rich Armstrong de Tap Tap Kaboom. Et je conçois et crée des sites Web depuis 2007. Et dans ce cours, je vais vous montrer comment coder manuellement votre premier site Web à partir de zéro en utilisant HTML et CSS. Pour moi, être capable d'écrire mon propre code HTML et CSS, c'est bien plus que du codage. C'est une façon moderne de créer et m' exprimer de manière numérique. Un site Web est un objet réel que des centaines de personnes peuvent visiter, utiliser et avec lequel elles peuvent interagir. fait de pouvoir le coder vous-même vous donne un avantage incroyable. Vous n'avez pas à vous fier à d'autres personnes, à pirater des modèles, espérer que l'IA fasse les choses correctement ou à essayer d' utiliser des applications complexes pour donner vie à vos idées. Savoir coder est très amusant et gratifiant. Et lorsque vous utilisez des modèles, des systèmes de gestion de contenu et des systèmes de gestion de contenu et intelligence artificielle pour vous aider à créer votre site Web, savoir coder facilitera la compréhension des choses. C'est comme une superpuissance. Pendant le cours, je vous guiderai étape par étape dans création d'un site Web simple pour votre personnage de dessin animé, héros ou film préféré . J'explique tout d'une manière accessible et laisse de côté les choses que vous n'avez pas besoin de savoir À la fin du cours, vous aurez créé votre premier site Web que vous pourrez partager avec le monde entier. Vous connaîtrez les bases du HTML et du CSS. Tes amis seront jaloux. Votre maman sera très fière et vous aurez une base solide sur laquelle vous appuyer. Donc, que vous soyez un novice absolu ou que vous ayez déjà essayé la conception et le développement de sites Web , venez suivre le cours Tout ce dont vous avez besoin, c'est d'un ordinateur et d'une connexion Internet. OK. Je vous verrai dans la prochaine vidéo. 2. 1 Bienvenue: Bonjour Je m'appelle Rich de Tap Tap Kaboom Au cours de ce cours, je vais vous guider étape par étape dans la création d'un site Web simple pour votre héros de dessin animé, personnage de film ou personnage de série préféré . J'explique tout d'une manière accessible, et je laisse de côté les choses que vous n'avez pas besoin de savoir À la fin du cours, vous aurez créé votre premier site Web que vous pourrez partager avec le monde entier. Vous connaîtrez les bases du HTML et du CSS. Tes amis seront super jaloux. Votre maman sera très fière. Et vous serez prêt à apprendre encore un tas de choses parce que vous aurez une base solide sur laquelle vous appuyer. Nous allons commencer par vous proposer toutes les bonnes applications pour coder. Ensuite, nous commencerons à coder, par exemple en sautant directement dedans. Ensuite, j'ajouterai de la théorie et plus de pratique. Enfin, nous en saurons assez pour créer un site Web pour notre héros de dessin animé ou personnage de film préféré . Alors, allons-y. 3. 2 Que télécharger: Pour faciliter le codage, vous devez télécharger et installer quelques éléments. Un éditeur de code, un navigateur de développement et un moyen de sauvegarder votre code et de publier votre site Web. La première chose dont vous aurez besoin est un éditeur de code. Ils font des suggestions, complètent votre code et adaptent certaines parties de votre code à des couleurs différentes afin qu' il soit facile à lire. En gros, ils vous aident à coder plus rapidement et avec moins d'erreurs, ce qui est tout simplement génial. L'un des éditeurs de code les plus populaires s' appelle Visual Studio Code, ou VS code en abrégé. Il est fabriqué par Microsoft et c'est gratuit, ce qui est parfait. Vous pouvez le télécharger à partir de cette URL. La deuxième chose dont vous avez besoin est un bon navigateur de développement. Chaque navigateur dispose d'un ensemble d' outils qui vous aideront à créer des sites Web. Mais Google Chrome est le meilleur, à mon avis. Grâce à lui, nous pouvons détecter les erreurs, comprendre pourquoi certaines choses se produisent ou ne se produisent pas, et nous pouvons modifier notre code pour mises à jour instantanées dans le navigateur Vous pouvez le télécharger à partir de cette URL. Si vous avez déjà Google Chrome, vous pouvez simplement sauter l'étape. La troisième chose dont vous avez besoin est un moyen de sauvegarder votre code afin que, si votre chat croise votre clavier, vous puissiez facilement restaurer une version précédente. C'est là qu'intervient quelque chose appelé Git. Git garde une trace de toutes les modifications que vous apportez à vos fichiers. C'est puissant. Et avec Git Hub, nous pouvons sauvegarder toutes ces modifications en ligne afin que, si votre chat décide de pousser votre ordinateur par la fenêtre, tout ne soit pas perdu. GitHub vous permet également de publier des sites Web simples en utilisant le code que vous leur envoyez, ce qui vous sera très utile plus tard J'aime utiliser une application appelée Git Hub Desktop pour travailler avec Git et GitHub plutôt qu'avec le terminal Cela rend l'ensemble de la sauvegarde beaucoup plus facile et beaucoup plus visuel. Créez donc un compte sur github.com et téléchargez GitHub Desktop à partir de Une fois que vous aurez téléchargé, installé et connecté à VS Code, Google Chrome, Gitub et Github desktop, vous aurez tout ce dont vous avez besoin pour développer comme Vous pouvez alors simplement passer à la leçon suivante et commencer à créer votre premier site Web. Si vous avez besoin d'instructions supplémentaires étape par étape, je passerai le reste de cette leçon à vous montrer comment télécharger, installer et vous connecter à VS Code, Google Chrome, GetSub et Gitub OK, donc la première chose dont j'ai besoin est le code Visual Studio. Je vais donc ouvrir un Safari. Vous pouvez ouvrir le navigateur de votre choix et rechercher VS code ou Visual Studio Code. Siri suggère celui-ci, le code Visual Studio. Nous voilà donc sur code.visualstudio.com. Téléchargez pour votre système d'exploitation, Tada. Et nous y voilà. Il est en cours de téléchargement, je vais donc retourner dans le Finder, et c'est parti. Je vais le faire glisser dans mon dossier d'applications. Alors Baa Maintenant, je vais aller dans mon dossier d' applications et appuyer simplement sur VS sur mon clavier pour me rapprocher de la météo. ai peut-être mal fait. Code Visual Studio. Je vais appuyer deux fois dessus, ouvrir. Doit être vérifié. C'est une application que je télécharge sur Internet. Suis-je sûr de vouloir l'ouvrir ? Oui, ouvert. OK. Nous y voilà. C'est fait. C'est ouvert, c'est fantastique. Vous pouvez choisir votre thème ici. Je préfère ce type de thème sombre et moderne, le type de thème par défaut qu'il est livré avec, mais vous pouvez choisir ce que vous voulez. Il existe de nombreuses façons de le personnaliser, mais je n'aborderai pas cela dans ce cours. OK, la prochaine chose que nous devons faire est d'aller télécharger Google Chrome. Si vous l'utilisez déjà, passez à l'étape suivante. OK, allons-y pour Google Chrome. Allons-y. Google Chrome. Sérieusement, je suggère celui-ci. Et OK. Le navigateur a été conçu pour être rapide et sûr. Et le tien. Génial. OK, téléchargez Chrome. Merci pour le téléchargement. OK, passons au Finder. Revenons à la section Téléchargements. Google Chrome doit être installé. Conscient comme Dragon Drop. Faisons-le donc glisser dans notre dossier Applications. Processus d'installation assez rapide. D'accord. Ensuite, nous pouvons revenir aux applications, et je vais choisir GO pour Google Chrome , puis appuyer deux fois dessus. Trempez, trempez, trempez. OK. Oui, il est également téléchargé sur Internet. Ouvre ça. Google Chrome est prêt à terminer votre installation. Voulez-vous définir Google Chrome comme navigateur par défaut ? Je le sais. Je vais vérifier ça. Contribuez à améliorer Google Chrome en envoyant automatiquement des statistiques d'utilisation et des rapports d'erreur. J'aime bien faire ça. J'aime que Google Chrome et d'autres applications soient meilleurs. Donc, si je peux les aider à s'améliorer, tant mieux. OK. Démarrez Google Chrome, puis les notifications peuvent inclure des alertes, des sons et des badges d'icône. Je vais l'autoriser. OK. Maintenant, à ce stade, vous pouvez vous connecter. Si vous avez un compte Google , que vous avez un compte professionnel ou un compte personnel , vous pouvez vous connecter. Je ne vais pas me connecter pour le moment. Je n'en ai pas besoin, alors je vais appuyer sur Ne pas me connecter. OK, moteur de recherche par défaut. Je vais opter pour Google. Fantastique Défini par défaut. Activez l'option pour ajouter une fonction de confidentialité. Non, merci. Ouf. Beaucoup de choses que nous devons traverser. D'autres fonctionnalités d'ajout de confidentialité sont désormais disponibles. Je l'ai. Merci. OK, nous avons donc Chrome. Nous avons le code VS. Maintenant, dans Google Chrome, nous pouvons rechercher github.com Mais je vais faire un clic droit sur Safari et le quitter. Je n'en ai plus besoin. OK, allons chercher GitHub C. Ta da, da, da OK. Cela peut sembler différent de temps en temps, par exemple, ça a l'air plutôt cool, à mon avis, inscrivez-vous à Github OK, dans ton e-mail. J'ai déjà un compte. Il suffit donc de suivre ce processus avec votre compte. Je vais m'inscrire avec un compte de test dès maintenant. Je vais donc passer un test ou un test Rich plus sur Tap Tap kaboom.com Inscrivez-vous à Github. Bienvenue sur Github Commençons l'aventure. Entrez votre e-mail, oui, continuez. Créez un mot de passe. J'utilise un seul mot de passe pour beaucoup de choses, mais pour le moment, je vais juste utiliser un mot de passe très simple. Waouh. Je crois que je m'en souviens. D'accord. Poursuivre. Entrez un nom d'utilisateur. Je vais juste dire Rich. Très bien, passe au néerlandais, Rich, tape, tape, boum. Tester. Très bien, et continuez OK, vérifiez mon compte. OK, résolvons ce casse-tête. Utilisez les flèches pour faire pivoter l'objet à faire face dans le sens de la main. Oui, je pense que c'est bien. D'accord. OK, enregistre mon mot de passe. Euh, oui, gardons ça. Alors je n'ai pas besoin de m'en souvenir. Encore une fois, j'utilise un seul mot de passe pour me souvenir et créer mes mots de passe sophistiqués, mais pour le moment je ne l' utilise pas, alors sauvegardons-le. OK. Tu as presque terminé. Nous avons envoyé un code de lancement à Rich lors du test sur taptapkaboom.com Je vais juste vérifier ça sur mon téléphone. Vite, vite, vite. Allons-y et ouvrons l'application Gmail. Vous devriez donc recevoir un e-mail envoyé à cette adresse e-mail que vous venez de fournir. Et c'est parti pour Rich taptapkaboom. OK, mon code de lancement de Github est 058, deux, cinq, deux, un, deux Nous y voilà. OK, nom d'utilisateur ou adresse e-mail, Rich. Je crois que c'était comme tester Rich Plus sur taptapkaboom.com, mon mot de passe, il s'en est souvenu pour moi. Connectez-vous. Mot de passe sécurisé. Oui, en sécurité. J'ai compris. Comment te décrirais-tu ? Vous pouvez probablement appuyer sur étudiant. Combien de membres de l'équipe travailleront avec vous ? Tu peux le remplir plus précisément si tu veux, mais pour l'instant, c'est juste moi. Et, d'accord, continuez. Vous pouvez également ignorer cette partie de personnalisation si vous le souhaitez. Les deux meilleures choses que vous voulez faire avec Github sont de démarrer un nouveau projet OK. Poursuivre. OK, apprenez à expédier des logiciels comme un pro. Allez-y gratuitement. Mais un bar, continuez gratuitement. Ouf. Beaucoup d'étapes à franchir. OK. Configurez. Nous avons Github Nous avons Chrome. Déplaçons donc Chrome à côté de Safari. Abandonnons Safari. Salut, j'ai le code VS ici. Et puis GitHub. Nous avons github.com. Nous avons maintenant besoin du bureau GitHub. Cherchons donc Git Hub. Ordinateur de bureau. OK, j' accepte tout cela. OK, desktop.github.com. Téléchargez pour macOS, vous téléchargez pour votre système d'exploitation. Patta. OK. Passons au Finder. Passons aux téléchargements. Ouvrons celui-ci. OK, glisse-le dans les applications. Accédez aux applications. Tapez sur GIF GitHub pour ordinateur de bureau, puis appuyez deux fois dessus pour l'ouvrir Oui, ça vient d'Internet. Je veux l'ouvrir. Fantastique OK, bienvenue sur le bureau GitHub Connectez-vous à github.com. C'est aussi triste que oui. Connecté en tant que test Rich Tap Tap Kaboom. Poursuivre. Ce que vous faites ici, c'est que vous autorisez GitHub Desktop à accéder à votre compte GitHub Ordinateur de bureau autorisé. OK, ouvrez l' application de bureau GitHub. Je vais vérifier. Autorisez toujours ce bureau GitHub ouvert. Oui OK. Configurez Git. C'est à utiliser. Ceci est utilisé pour identifier les commits que vous créez. Tout le monde pourra voir ces informations si vous publiez des commits. Utilisez le nom de mon compte GitHub et mon adresse e-mail. Oui Nom, e-mail, finition. Whoo. OK. Vous avez ce qu' il vous faut pour faire du rock and roll ou pour vous développer comme un ninja. Dans la leçon suivante, vous allez créer votre premier site Web. Je t'y verrai. 4. 3 Créer votre premier site Web: Avant de passer à la théorie, mettons-nous les mains dans le vif du sujet et créons notre premier site Web. Et c'est pour moi le meilleur moyen d'apprendre en faisant d'abord. Je n'expliquerai pas trop de théorie pendant la leçon, cela viendra après cette leçon. OK, programmons notre tout premier site Web. Ce que je veux que vous fassiez, c'est ouvrir le bureau Github, tada. Et si vous n'êtes pas encore connecté, accédons aux paramètres ici, connectez-vous à github.com, continuez avec Et si vous êtes connecté ici dans votre navigateur, vous pouvez appuyer sur Continuer. Si ce n'est pas le cas, vous devez vous connecter. Vous devrez peut-être vous réauthentifier. Vous devrez peut-être saisir de passe, une clé ou quelque chose comme ça Appuyez ensuite sur Continuer. OK, ordinateur de bureau GitHub autorisé. Oui D'accord. Allons-y. Nous sommes partants. Si vous souhaitez vérifier que vous êtes bien inscrit, allez à nouveau dans les paramètres, puis vous devriez voir votre nom d'utilisateur ici et une option pour vous déconnecter de github.com Très bien, sauvegardez. Maintenant, ce que je veux faire, c'est créer un nouveau dépôt. Je peux donc créer un nouveau dépôt sur votre disque local ici, ou je peux archiver un nouveau dépôt ou appuyer sur commande N ou sur le contrôle N. Passons donc à un nouveau dépôt. Et comme il s'agit de notre premier site Web, je vais dire mes premiers sites Web et le repérer correctement, il va dire qu'il sera créé en tant que site Web Dash First Dash. C'est parce qu'il n'aime pas les espaces. Donc, ce que je recommanderais, c'est également de ne pas utiliser d'espaces, mais d'utiliser des tirets au lieu d'espaces Et laissez-moi vérifier quelque chose ici. C'est bon Si vous voulez utiliser des majuscules, vous le pouvez, mais je préfère ne pas le faire. Je préfère utiliser des minuscules et des tirets sans majuscules plutôt C'est ce qu'on appelle l'étui pour kebab, et je vous montrerai quelques autres options plus tard dans le cours OK, donc mon premier site Web, la description est que c'est mon tout premier site Web, le chemin local, je vais choisir Téléchargements. J'ai déjà un dossier de référentiels contenant tout un tas de sites Web Les téléchargements sont donc très faciles à utiliser pour moi dans ce cours, mais vous pouvez choisir celui qui vous convient le mieux. Je ne veux pas initialiser ce dépôt avec une licence Read me, c' est ignoré, aucune licence, aucune Créons ce dépôt. D'accord. Et maintenant tu vas te demander : OK, que s'est-il passé ? Eh bien, jetez un œil à ça. Dans le Finder, nous avons maintenant mon premier site Web. Il s'agit d'un dossier qui ne contient rien. Euh, hein. Mais il y a un fichier secret caché dedans. Faisons-le donc glisser dans le code VS ou le code Visual Studio. C'est la première fois que vous l' ouvrez, vous verrez une petite barre. Vous devrez alors dire oui, ouvrez-le. Allez. Oui, cool. Et puis, faites-vous confiance aux auteurs des fichiers de ce dossier ? Oui, je le sais. Mais peut-être aussi, vérifiez ceci. Faites confiance aux auteurs de tous les fichiers contenus dans le dossier parent (téléchargements). Oui, je fais confiance aux auteurs. OK, thèmes, ne nous inquiétons pas de ça ici. Obtenez des attributs. Il s'agit de votre fichier caché, qui a trait à Git et gestion de tous vos commits, de toutes les modifications, etc. Vous n'avez pas à vous inquiéter à ce sujet. C'est caché pour une bonne raison. Ce que je veux que vous fassiez ici c'est appuyer sur ce petit bouton, qui est un nouveau fichier, ou allez ici et dites « fichier nouveau fichier texte ». Alors allons-y pour celui-ci. Bam, et je vais appeler celle-ci ma première page Web point HTO Et vous voyez, au fur et à mesure que nous changeons cela, cette petite icône de gauche est devenue ces bretelles oranges. D'accord. Ma première page Web, nous l'avons ouverte. Je vais appuyer deux fois ici, pour nous donner un peu plus d'espace, et je vais appuyer sur Commande plus. Alors maintenant, vous pouvez voir ce que j'écris réellement ici. Donc, ce que je vais faire ici, c'est opter pour un symbole inférieur à 1. Il y aura tout un tas d'options qui apparaîtront, mais je vais juste opter pour H un, qui est un titre, le titre le plus grand et le plus cool, puis un symbole supérieur Allons-y. Et ce qu'il doit faire, c'est créer la balise de fermeture de cet élément. Vous avez donc votre étiquette d'ouverture et votre étiquette de fermeture. Fantastique Et à l'intérieur, vous pouvez dire, de mon premier site Web. D'accord. Ensuite, à la fin, nous allons appuyer sur Retour ou Entrée, pour faire la même chose. Donc inférieur à P supérieur à. Et voici une balise de paragraphe, un élément de paragraphe, et nous allons dire : « Hé, c'est cool, mon tout premier site Web ? » Et puis Command ou File Save. OK, tu vas voir qu' il se passe quelque chose ici. Il s'agit d'un contrôle de source, essentiellement Github, qui dit : « Hé , les choses ont changé, alors allons-y Qui, il se passe un tas de trucs vraiment cool ici. Super, mais je souhaite toujours utiliser GitHub Desktop pour une bonne raison car c'est beaucoup plus facile à voir visuellement Et lorsque nous commençons à utiliser github.com pour héberger nos pages Web, tout fonctionne très Bien, revenons à l'explorateur et descendons dans le Finder. Et nous allons maintenant voir que le code HTML par points de ma première page Web est là. Appuyez deux fois dessus. Whoo. Mon premier site web. Hey, est-ce que c'est cool ? Mon tout premier site web. Peut fermer cet onglet. Allons-y. Vous venez de créer votre premier site Web, votre première page Web. Ça n'a pas l'air de grand-chose. Bien sûr, et vous seul pouvez le voir sur votre ordinateur local. Bien sûr. Mais il s' agit tout de même d'une première étape épique. Ce que je veux que vous fassiez maintenant, c'est d'aller sur le bureau Github, et vous verrez ici les modifications Un fichier de modification, ma première page Web, vous l'avez ajouté. D'accord. Ici, il veut que vous donniez un titre à cette modification. Nous pouvons donc dire que nous avons créé le dépôt et créé le premier fichier. Vous devrez effectuer cette opération si vous créez plusieurs fichiers. Mais si je coupe tout cela, vous pouvez simplement créer le code HTML à points de ma première page Web. C'est comme si, oui, c'est cool. Je vais donc simplement le recoller. Descriptif. Honnêtement, vous n'êtes pas obligé de décrire tout ce que vous faites. Mais bon, ce sera notre premier engagement. Alors allons-y quatre. Hum. Premier commit. Ouais Et ensuite, engagez-vous dans le Maine. Nous n'avons que le Maine et le Maine est une succursale. Et on y va, Bam. Engagez-vous dans le Maine. Ce qui est cool, non ? Oui, c'est cool. Maintenant, c'est juste sur votre ordinateur local. Nous passerons à la version en ligne et nous le consulterons en ligne plus tard dans ce cours. Vous venez de créer votre premier site Web. Bien sûr. Il ne possède qu'une seule page Web, et vous seul pouvez y accéder, mais cela ne le réduit pas en tant que site Web. Toutes nos félicitations. Tu devrais être fier de toi, sérieusement. Dans la prochaine leçon, je vais vous expliquer ce qu'est réellement un site Web. 5. 4 Qu'est-ce qu'un site Web: Alors, qu'est-ce qu'un site Web ? Il s'agit essentiellement d'un dossier contenant une ou plusieurs pages Web souvent liées les unes aux autres En saisissant un nom de domaine tel que taptapkaboom.com dans votre navigateur, vous serez redirigé Et dans ce dossier, il y aura une ou plusieurs pages Web auxquelles vous pourrez accéder. La plupart du temps, la page Web par défaut s'affichera si vous ne spécifiez pas la page que vous souhaitez consulter. Maintenant, qu'est-ce qu'une page Web ? Une page Web est un document texte écrit de manière à ce que les navigateurs puissent comprendre. Cette méthode s'appelle HTML. Et en se basant sur le code HTML d'une page Web, un navigateur sait alors ce qu'il doit afficher, comment donner l'apparence à votre page, comment réagir aux interactions des utilisateurs, quelles informations afficher aux moteurs de recherche et tout un tas d'autres choses encore. Dans la leçon suivante, nous aborderons plus en détail ce qu'est le HTML. Je t'y verrai. 6. 5 Qu'est-ce que le HTML: Qu'est-ce que le HTML ? Cela signifie langage de balisage hypertexte, mais cela n'est pas utile, n'est-ce pas ? J'aime donc considérer le HTML comme le langage principal que nous utilisons pour indiquer au navigateur ce qu'il doit faire. Les éléments de base de ce langage sont des éléments HTML. Une page Web est composée d'éléments HTML. Pour chaque type d' élément, le navigateur fait quelque chose de différent. Il s'agit d'un élément d'en-tête. Les navigateurs aiment, Oh, le titre le plus important de la page. Il s'agit du texte du titre. Je vais faire en sorte que ce soit grand. Je l'ai. Ne t'inquiète pas Il s'agit d'un élément audacieux. Les navigateurs aiment, je vais l'afficher dans un style de police plus gros Je vais le faire ressortir. Ne t'inquiètes pas. Et il s'agit d'un élément de lien ou d'un élément d'ancrage. Les navigateurs aiment « C'est un lien ». Je vais le rendre bleu, et je vais le souligner. Et lorsque quelqu'un clique dessus, je le dirige vers l'URL qui se trouve ici. Génial Et il s'agit d'un élément d'image. Et dans le navigateur, je vais l'afficher sous forme d'image, et l'image que je vais utiliser se trouve ici. éléments HTML spécifiques indiquent au navigateur de faire des choses spécifiques. La plupart du temps, ces éléments HTML demandent au navigateur d'afficher les informations de différentes manières, comme des listes ou des en-têtes, des paragraphes et des Mais il existe également d'autres utilisations, comme indiquer au navigateur comment styliser la page avec du CSS ou comment réagir aux interactions des utilisateurs avec JavaScript, ou indiquer au navigateur quel est le titre de la page pour les moteurs de recherche ou quelle image utiliser lorsque quelqu'un ajoute votre page Web à ses favoris Il existe des tonnes d'éléments HTML différents, et ne vous inquiétez pas, nous n'allons pas tous les passer en revue dans ce cours. Si vous voulez les découvrir, allez sur Google ou demandez à Chat GPT Dans la leçon suivante, je vais expliquer la théorie des boîtes HTML, qui est un moyen facile de comprendre le fonctionnement des éléments HTML. 7. Théorie des boîtes en HTML: J'aime visualiser les éléments HTML sous forme de boîtes. Dans la plupart des pages Web, il y a des boîtes à l'intérieur des boîtes, et la boîte contenant les autres boîtes est la fenêtre de notre navigateur C'est ce que j'appelle la théorie des boîtes HTML. À l'intérieur de chaque case, il peut y avoir une ou plusieurs cases, du texte, une combinaison de texte et de cases, ou rien du tout. Par défaut, la hauteur de la plupart des boîtes est égale leur contenu et à la largeur de la boîte dans laquelle elles se trouvent. autres cases sont aussi hautes et larges que leur contenu, et la plupart des cases se trouvent aussi loin que possible à gauche de la page et en haut de la page. Et bien sûr, il existe des boîtes qui se comportent complètement différemment, car certaines boîtes sont invisibles pour les humains. Et puis, bien sûr, vous pouvez changer tout cela lorsque vous stylisez vos boîtes avec du CSS. Mais j'en parlerai plus tard. Dans la leçon suivante, je vais vous montrer comment écrire du HTML. 8. 7 Comment écrire du HTML: Alors, comment écrire ou coder un élément HTML ? Eh bien, la plupart des éléments HTML ont une balise d'ouverture et une balise de fermeture. Une balise d'ouverture est composée d'un symbole inférieur à, du nom de balise et d'un symbole supérieur à. Une balise de fermeture est composée d'un symbole inférieur à, d'une barre oblique, du nom de l'étiquette et d'un symbole supérieur à Entre ces deux balises, vous pouvez placer un ou plusieurs éléments HTML, du texte, une combinaison d' éléments et de texte ou le laisser vide. L'élément HTML entier est alors composé de la balise d'ouverture, du contenu et de la balise de fermeture. Par défaut, un navigateur affiche éléments HTML du haut du document vers le bas, tels qu'ils figurent dans votre fichier HTML. Mais la façon dont votre navigateur affiche un élément et les éléments qu'il contient dépend du type d'élément dont il s'agit. C'est peut-être tout ce que tu demandes ? Eh bien, pas tout à fait. Il y a encore une chose : les attributs HTML. Les attributs HTML sont des détails supplémentaires importants ajoutés aux éléments HTML qui indiquent au navigateur comment les afficher et quelles fonctionnalités ajouter Nous utilisons des attributs pour styliser les éléments afin d'indiquer au navigateur où aller lorsque vous cliquez sur un lien, quel fichier et quel élément d'image doivent s'afficher, et bien d'autres choses encore. Un attribut est composé d'un nom, d'un symbole égal et d'une valeur , placés entre guillemets simples ou doubles. Vous les utiliserez tout le temps lorsque vous écrivez du HTML. D'accord, vous comprenez maintenant le HTML en théorie. Dans la leçon suivante, vous allez commencer à l' écrire avec un peu plus de connaissances qu'auparavant. Je t'y verrai. Euh 9. 8 Écrire du HTML: Bien, commençons à écrire du code HTML. Cette fois, avec une meilleure compréhension de ce qui se passe réellement, nous allons créer un nouveau dépôt afin que vous vous familiarisiez avec le processus, et nous allons également commencer à faire des choses amusantes dans Chrome. Très bien, passons au bureau Github. Et vous avez votre dépôt actuel. Mais maintenant, nous voulons créer un nouveau dépôt. Consultez les nouveaux paramètres d'accessibilité. OK, merci. Passons à Fichier, Nouveau dépôt. Et nous allons en créer un nouveau parce que nous voulons nous y atteler. Appelons cela une expérience. Allons-y. Nous n'avons pas besoin de description. Téléchargements sur le chemin local. Le reste est excellent. Créez un référentiel. Fantastique Revenons au Finder, glissons les expériences dans le code Visual Studio. OK, tout est redevenu grand. Je vais créer un nouveau fichier, et je l'appellerai test HTL, Return OK, maintenant on en sait un peu plus, tu sais, sur ce qui se passe. Donc, moins de H un supérieur à, et nous disons titre un. D'accord. Je vais appuyer sur Moins fait, P, appuyer sur Retour ici, puis appuyer sur le bouton le plus grand vers le bas, puis sur le paragraphe. D'accord. Donc, en titre, un paragraphe. Ce que je veux faire ensuite c'est un lien qui renvoie vers un autre endroit. Donc, au lieu d'un paragraphe, permettez-moi de dire : « Hé, c'est un article cool ». Et article sympa, je veux le lier quelque part. Donc supérieur ou inférieur à. Et je vais prendre A pour ancre. Il ne s'agit donc pas d'un lien. C'est une ancre, puis supérieure à, et je vais la sélectionner et la couper. Donc, commandez X et mettez-le après cette parodie. Mais avant cette balise de fermeture de mon élément P, cela ne fait pas vraiment grand-chose. Il s'agit simplement d'un élément d'ancrage jusqu'à ce que nous ayons un attribut HRF, auquel nous voulons que ce lien aille Il commence donc à renseigner certaines options ici. Je vais opter pour HRF. Il devrait alors être égal à deux petits guillemets et à hRF. Optez pour HTTP, deux points et une barre oblique google.com OK, c'est un article sympa. Nous pourrons le mettre à jour très prochainement. Et puis Command S. Passons à notre Finder. Expériences intérieures. Double-cliquez sur le test. Titre 1. Hé, c'est un article cool. D'accord. Et si vous appuyez sur celui-ci, vous serez redirigé vers google.com Oh. Donc, ce qui se passe ici, c'est qu' il y a un élément à l'intérieur de cet élément P. Et à l'intérieur de cet élément P, il y a aussi du texte. Plutôt cool, non ? Oui, je trouve ça plutôt cool. Ensuite, ce que je veux faire, c'est mettre une balise d'image ou un élément d'image. Je suis donc G, vais appuyer sur Retour. Et puis ici, SRC pour la source, puis nous avons besoin d'une image. Et puis celui-ci est en fait spécial. Il n'a pas besoin d'une autre étiquette, donc je vais juste opter pour celle-ci ou je vais opter pour une barre oblique et ceci est un signe plus grand Il s'agit d'une étiquette unique. Vous ne pouvez rien mettre à l'intérieur d'une balise d'image ou d'un élément d'image. OK, donc source, nous avons besoin d'une sorte d'image. Passons donc à Chrome. Et bon, nous sommes déjà dans Google, donc je vais faire une recherche sur les chats. Les chats sont géniaux. Passons aux images. D'accord. Chat du National Geographic. Hmm. Celui-ci est en train de bâiller. Qu'en est-il de cette petite mignonne. D'accord. Donc pour l'instant, je vais cliquer avec le bouton droit de voir si je peux enregistrer ceci. Il s'agit d'un lien. Enregistrer l'image sous. Allons-y. Alors, enregistrez l'image sous. Passons aux téléchargements. Ok, nommons-lui ce nom bizarre. Passons aux téléchargements. Mets-le dans des expériences. OK, et appelez-le Cat Dot JPEG. Vous pouvez cliquer avec le bouton droit de la souris et appuyer sur Renommer ou simplement appuyer sur Retour sur Mac de toute façon Nous avons donc le format CAT JPEG. Cela signifie que dans le code source, nous pouvons opter pour le format JPEG par points ou par points slash, ce qui signifie que, hé, regardez dans ce dossier, ce dossier très actuel dans lequel se trouve ce fichier pour le format JPEG à points en forme de chat OK, Command S, revenons à Chrome. Et hé. Allons-y B, B, B, B. Rafraîchir. Pas nécessaire car notre Catimage est là. Waouh. D'accord. Ça a l'air cool. C'est donc une façon de donner attribut source à votre élément d'image. Une autre est : allons-y et recommençons. Chat. Allons chercher des images. Choisissons, celui-ci, celui-ci vert, oui. Je vais taper dessus . Cliquez avec le bouton droit sur votre adresse Copy Image. Très bien, je vais créer un nouvel onglet , puis je vais le coller ici Et appuyez sur Entrée. Et tu vois , ça m'amène à une image. Maintenant, nous pouvons le télécharger à nouveau ou nous pouvons simplement utiliser l'URL qu'il nous a donnée et créer un nouvel élément d'image, source, et nous y avons mis le tout. D'accord. Commande S. Nous avons donc cette image de chat locale, puis nous avons cette image de chat qui existe en ligne. Maintenant, l'avantage d'avoir quelque chose localement, c'est que nous en avons le contrôle, donc nous ne nous contentons pas de le supprimer. L'avantage de celui-ci en ligne est que nous n'avons pas besoin de stocker cette image sur notre serveur ou notre système de fichiers. Mais s'ils veulent le supprimer, il n' y en a plus. Alors, gardez-le. Si ce n'est pas déjà fait, passons à Chrome. Ouvrons à nouveau notre point de test HTM. C'est bon. Nous avons deux images, géniales de chats, tout de même. Maintenant, si quelque chose ne va pas, peut-être qu'au lieu de Cat, nous cherchons Doug. Je vais le garder. Revenons à Chrome, actualisons. Vous verrez que vous obtenez cette petite icône en forme d'image cassée. C'est parce qu'il ne trouve pas ce qu'il cherche. Alors tu devrais peut-être dire : « OK, chat, super ». Si vous optez pour un JPEG, par exemple, je vais simplement appuyer sur la commande R. Encore une fois, cela ne fonctionnera pas. Donc, ce que vous devez faire ici c'est vous assurer de l' orthographier correctement. Command S. D'accord. Command R ici, le petit chat mignon est de retour. Même chose ici. Si je supprime le tiret de Felv et CAT, Command S, passons à l'actualisation de Chrome Vous obtiendrez à nouveau cette icône en forme d'image cassée. OK, alors méfie-toi de ça. OK, Command Z. Rentrons sains et saufs Voyons si tout fonctionne. C'est fantastique. Maintenant, créons un autre paragraphe, fais-le ici. P, et je vais dire, Waouh, ces chats sont tellement mignons. Je veux donc être audacieuse ou peut-être être un chat. Je veux faire preuve d'audace. Je peux donc utiliser l'élément B qui est en gras. Et je vais juste le supprimer. Oh, où vont les chats ? Ces chats sont tellement mignons. Ou ce que je peux faire, c'est le changer fort et m'assurer que vous modifiez également le tag de fermeture. Strong signifie plus chic, mais l'audace fonctionne aussi. Bien que ces chats soient super mignons, je tiens à le mettre en italique ou à le souligner Optons donc pour l'EM pour mettre l'accent. C'est un chat. D'accord. Commande S. Revenons à Chrome, actualisons-le. Et c'est parti. Waouh, ces chats sont tellement mignons. Maintenant, jetez un œil à ceci. Je vais cliquer avec le bouton droit de la souris dans Chrome, et je vais dire inspecter. Et cela pourrait apparaître sur la droite si c'est le cas, et ça ne vous dérange pas. Génial. Sinon, j'aime appuyer sur ces trois points et les faire apparaître en bas. De plus, appuyons deux fois sur cette barre ici, et cela agrandira tout. D'accord, vous pouvez donc commencer à voir les éléments. Je vais appuyer sur Commande plus pour l'agrandir un peu afin que vous puissiez le voir. D'accord. Et vous pourriez vous demander : Whoa, tête HTML, corps, c'est quoi tout ça ? Oui, eh bien, Chrome fait des choses vraiment sophistiquées. Bien que nous n' ayons pas écrit cela, il le met là parce que cela suppose que c'est ce que nous voulions faire. Donc, ce qui est vraiment cool avec cet inspecteur d'éléments , c'est que lorsque vous survolez chaque élément, il le met en évidence sur la page ci-dessus, ce qui est vraiment cool Vous pouvez également ensuite cliquer dessus avec le bouton droit de la souris, puis le modifier au format HTML. Nous pourrions donc simplement retirer à nouveau ce plat, puis cliquer sur « déconnecter ». Et puis caca, ça s' en va. Hmm. Nous pourrions ensuite appuyer sur la commande Z ou Z, et elle revient. Si vous ne voulez pas cliquer avec le bouton droit sur quelque chose et dire inspecter, vous pouvez également utiliser ce petit bouton ici. Si je passe la souris dessus, je dis «  sélectionnez un élément de la page pour l'inspecter » ou « Command Shift C. Ensuite, vous passez simplement le curseur sur des éléments et vous pouvez dire : OK, inspectez celui-ci OK, inspectez celui-ci C'est bon, c'est si fort. Voyons si le gras fonctionne, cliquez avec le bouton droit de la souris sur Modifier au format HTML pour le remplacer par B D'accord. Cela n'a pas semblé changer quoi que ce soit. Peut-être que nous allons le changer en EM. Vous pouvez également simplement appuyer deux fois. Ok, ces chats sont super mignons. Ouf. Donc, ce qui se passe ici, c'est que vous modifiez simplement la version locale que le navigateur vous fournit. En fait, vous ne modifiez rien dans votre système de fichiers. Désormais, vous pouvez également le faire sur n'importe quel site Web dans le monde. Vous pouvez modifier ce que le navigateur vous propose. Tu ne changes rien. Tu n'es pas en train de pirater. Tu n'iras pas dans la prison du FBI, rien de tel. Totalement bruyant, totalement légal. C'est vraiment puissant. Donc, lors de la mise à niveau, tout redeviendra ce qu'il était Vous pouvez également supprimer des éléments, par exemple appuyer sur cette image ici, et je vais simplement appuyer sur la touche retour arrière. Oup. C'est parti. C'est donc un moyen très puissant et visuel coder et de voir ce que vous codez, voir à quoi ressemble votre code. Je veux dire, même ici, vous pouvez mettre l'accent dessus. Donc, ouah, ces super chats sont tellement mignons, ce qui est logique, des supercats Mais oui, vous pouvez même faire glisser cet élément fort en dehors de cette balise P ou de cet élément P. Cool. Ça a l'air génial, non ? Ouais L'autre chose que Chrome a faite, c'est qu'il a en fait mis beaucoup plus de code ici. Donc, si nous cliquons avec le bouton droit de la souris pour voir la source de la page, vous verrez ici H one , P, P, image, image. Génial. Fantastique Mais comment a-t-il réellement fait tout ce genre de choses, tête HTML, corps, tout ce genre de choses, je vais vous en dire plus, mais elles auront du sens pour une page HTML. Allons donc les écrire. Passons au code Visual Studio. Et toutes ces choses entrent réellement dans notre corps. La première chose que nous allons faire et que nous voulons mettre est le HTML. Nous y voilà et nous le mettons à la fin. Maintenant, lorsqu'un groupe d'éléments se trouve à l'intérieur d'un autre élément, il est très utile d' appuyer sur la touche Tab puis de le mettre en retrait Cela facilite simplement la lecture , puis nous voulons placer notre élément principal ici. À l'intérieur de l'élément principal se trouvent un tas d' éléments invisibles ou cachés comme le titre, la petite icône qui apparaît dans votre champ de vision, des choses comme ça. Et puis, à l'intérieur de l'élément de votre corps, tout votre code visuel apparaît. Comme ça. Très bien, juste avant d'enregistrer ici, voici, cela s'appelle simplement test point HTML, et c'est de retour dans le code Visual Studio. Appelons celui-ci. Je vais mettre un élément de titre ici. Appelons-la page de test. D'accord. Sûr Revenons à Chrome et actualisons. Vous avez maintenant une page de test dans votre élément principal, vous avez une page de test avec un élément de titre. Fantastique Une autre chose que Chrome n'a pas réellement faite est de nous donner un type Duc et vous l'avez peut-être vu plusieurs fois alors que j' essayais d'écrire ceci. Si je commence à écrire ici, il est écrit « Type Duc ». Allons-y. Type de duc, HTML. Vous n'en avez pas vraiment besoin, mais cela permet simplement à certains anciens navigateurs se rendre compte qu'il s' agit en fait de HTML. Alors, on y va. Gardons-le. Passons au bureau GitHub. Et ici, nous avons besoin d'un résumé car nous avons au moins deux fichiers à valider. Nous allons donc simplement dire commit initial et commit to main. Maintenant, à tout moment, si vous êtes du genre : « Oh, je veux ajouter quelque chose, oui, allez l'ajouter ». Peut-être que quelque part ici, comme dans le titre 1, je veux vraiment que ce soit deux lignes, mais je ne veux pas créer un tout autre élément Je veux juste une nouvelle ligne. Comment est-ce que je peux m'y prendre ? Eh bien, si vous n'êtes pas sûr de quoi que ce soit, allez dans Chrome, ouvrez un nouvel onglet et demandez-vous : Comment créer une nouvelle ligne en HTML ? Et ici, pour créer une nouvelle ligne HML, vous pouvez utiliser la balise BR D'accord. Il y aura un tas de liens que vous pourrez consulter. Parfois, ils sont sur Stack Overflow. Vous pouvez même utiliser Chat GPT si vous le souhaitez. Copions donc cela ou nous pouvons simplement l'écrire et vous revenez au code Visual Studio, puis à BR Alright Titre 1, Commande S. Vérifions-le. D'accord, crée un joli petit saut de ligne. Fantastique D'accord. Non, vous revenez sur le bureau de Gitybe et saut de ligne a été ajouté dans Heading Engagez-vous sur le principal. OK, alors que vous commencez à changer les choses, prenez l'habitude de dire : « Oui, ça a l'air bien ». S'engager. Vous voulez vous assurer que chaque changement significatif obtient son propre accord. C'est la meilleure pratique. Cela signifie que si votre chat passe sur votre ordinateur ou le fait glisser , vous savez, fenêtre ou si vous renversez votre bière au gingembre sur votre clavier, vous n'avez pas perdu tout un tas de choses Peut-être que vous n'avez perdu que deux lignes de code ou, vous savez, une légère modification apportée à un élément d'image ou quelque chose comme ça. Vous venez donc d'écrire tout un tas d'éléments HTML différents. Je suggère que vous pompiez d'abord l' air ou que vous émettiez un bruit sourd. Waouh caca. Célébrez en quelque sorte. Dans la prochaine leçon, je vais vous montrer comment partager votre site Web avec le monde entier, ce qui est très intéressant. On se voit là-bas. 10. 9 Partagez votre site Web: Heureusement pour nous, GitHub permet d'utiliser très facilement les pages Web dont il assure le suivi pour créer des sites Web simples. Allons-y. OK, alors comment pouvons-nous le mettre en ligne pour que d'autres personnes puissent le voir maintenant ? Eh bien, passons à GitHub Desktop. Et nous avons ce bouton de dépôt publié, soit en haut soit au milieu de l'écran ici. Publiez donc le référentiel. Expérience de nom sur GitHub.com. Tu peux le nommer autrement. Vous pouvez lui donner une description. Gardez ce code privé. Tu n'es pas obligée de faire ça. Si vous souhaitez le partager, je vous recommande de le décocher Ne gardez donc pas ce code privé. Surtout si vous avez besoin de mon aide ou de celle de quelqu'un d'autre pour regarder votre code ou vérifier votre code. Oui, il suffit de décocher ça. Publiez le référentiel. Boum. Ce qui est génial, c'est que si votre ordinateur brûle spontanément, c'est qu'il est en feu Tu ne peux plus y accéder. Votre code est maintenant en ligne. Cela signifie également que si vous avez trois autres ordinateurs, vous pouvez accéder au même code à partir de ces ordinateurs, et vous pouvez les synchroniser à l'aide de github.com Qui. C'est génial. OK, et maintenant ? Il a fait son travail. Oui OK. Allons sur github.com dans notre navigateur Et tu verras par ici. Ce sera votre nom d'utilisateur slash Experiments ou quel que soit le nom que vous donnerez à votre dépôt Appuyons dessus. OK. Voici donc Github, ce qui est génial C'est ici que votre code est enregistré. Vous pouvez voir le code HTML du test CTJPEG, et vous pouvez même y apporter quelques modifications Mais ce que nous voulons faire, c'est publier notre code, notre site Web pour que le monde entier puisse le voir. Passons donc aux paramètres. Et puis les pages sur la gauche. Cela peut sembler différent de temps en temps. Très bien, déployez depuis une succursale. Oui, expérience classique des pages. Actions GitHub Non, c'est mieux pour utiliser des frameworks et personnaliser votre processus de construction, des choses compliquées. Déployez donc depuis une succursale. Fantastique OK, les pages GitHub sont actuellement désactivées Sélectionnez une source ci-dessous pour activer les pages GitHub pour ce référentiel Ouais. OK, aucun. Nous n'avons qu'une seule succursale, ce qui est excellent. Racine principale sélectionnée, super. Enregistrer. OK. Votre site de page GitHub ou votre site Pages est actuellement en cours de création à partir de la branche principale. OK. Sauce des pages GitHub enregistrée. Je vais l'actualiser pour voir si quelque chose change. OK. Je pense que c'est une bonne chose. OK. Maintenant, nous devons copier notre nom d'utilisateur, donc la commande T. Je vais dépasser ce point github, point IO, barre oblique, puis nous allons passer à Experiment Je vais le copier. Revenons ensuite à notre base de code ici. Nous avons du code HTML à points de test. Donc, slash test point HTML. Waouh. Ça y est. Il est en ligne pour que le monde entier puisse le voir, mesdames et messieurs. Parfois, il faut un peu de temps pour vraiment, vous savez, se déplacer partout dans le monde. Parfois, vous y êtes rafraîchissant, rafraîchissant, rafraîchissant. Mais si vous êtes du genre « OK, cela ne fonctionne pas au bout de 10 minutes », vous pouvez revenir aux paramètres, puis aux pages. Ensuite, jetez un œil à la section de construction et de déploiement ici. Cela devrait être assez simple. Et même ici, il est écrit : «   Votre site est en ligne ici, on y va ». Nous allons donc aller, Bam, visiter le site. Cela se produira si nous n'avons pas de fichier d'index. C'est pourquoi nous devrions ensuite mettre du code HTML à points de test. OK, alors essayons ça maintenant. Je souhaite mettre ma page un peu à jour. Je veux avoir une petite icône préférée, et je veux aussi changer ce lien, afin que lorsque j'appuie dessus, il ne se charge pas sur la même page OK, alors comment faisons-nous ? Eh bien, faisons quelques recherches, et je veux vous donner l'habitude de faire des recherches parce que tout existe. Je veux donc une page HTML avec quatre icônes. Icône préférée, comment créer une icône pour une page HTML ? Pour insérer une icône, ajoutez le nom de la classe d'icônes à tout élément HTML intégré qui n'en a pas vraiment l'air Euh, icône d'onglet. Tabicon. Ouais. OK, vérifions-le. OK, sauf les cookies. Il existe deux manières d'ajouter une icône préférée à un site Web, 13 réponses Ajoutez simplement le code suivant à l'élément principal. OK, copions-le. Passons à Visual Studio. OK. Icône. Je veux que mon chat soit l' icône préférée. C'est ce que nous allons faire. Commande S. Mais elle disait qu'il y avait deux manières, les favicons et les favicons en PNG C'est ainsi que cela s' appelle, supporté par la plupart des navigateurs, à l' exception d'IE 10 et versions antérieures. Vous pouvez également utiliser les favicons ICO. Vous n'avez plus besoin de lancer une icône et un attribut avec un raccourci, bla, bla, bla Tous les navigateurs modernes demanderont toujours un point de favicon ICO, sauf si vous avez spécifié un raccourci via un lien Il s'agit en fait d'un élément de lien, différent d'un élément d'ancrage. OK. Jusqu'à présent, l'icône représente un point ICO. Maintenant, je ne sais pas vraiment comment créer une ICO, donc je vais simplement m'en tenir à mon JPEG ou à mon PNG. Essayons de voir si cela fonctionne. C'est celui en ligne. C'est le local. Rafraîchissons donc. Oh, ça y est. Tu peux le voir. Fantastique Donc, sur le bureau Gita, disons, euh, une icône préférée mise à jour. Nous y voilà. Engagez-vous à Min. Désormais, ce premier Commit to Min ne concerne que votre ordinateur local. Mais si vous appuyez ensuite sur Origin, cela redirige vers la version en ligne de votre site Web OK. Et nous pouvons vérifier cela en accédant au code sur github.com, et tester le point HTML, c'est Ça y est. Le CatJPEG comme véritable icône ou l'icône du lien, l'icône préférée pour la rafraîchir Puis remontez, actualisez à nouveau. Cela ne semble pas fonctionner pour le moment, cela peut prendre un certain temps. Ce que je veux vous montrer en attendant, c'est si nous le modifiions un peu, alors modifiez ce fichier. Passons à la rubrique Qui ? Peut-être que nous pouvons en parler. Les chats sont vraiment cool. Et puis validez les modifications, mettez à jour le code HTML du test avec un nouveau titre Engagez-vous directement auprès de la branche principale, l'équipage, oui, oui. Engagez-vous à apporter des modifications. OK. Maintenant, j'ai effectivement fait un changement en ligne, mais localement, cela ne se reflète pas. Revenons donc au bureau GitHub. Et ce que nous voulons faire ici, c'est aller chercher l'origine. Et il est écrit : « Hey, pull one Commit from Origin Remote ». C'est donc très pratique si vous travaillez sur plusieurs ordinateurs, ou s' il y a, vous savez, personnes qui travaillent sur le même projet et que vous rédigez toutes du code dans ce référentiel source de vérité en ligne. Ensuite, vous appuyez sur Pull Origin. Et cela mettra ensuite à jour votre version locale. Allons donc vérifier ça. Les chats sont vraiment cool. Fantastique Nous y voilà. Voyons si celui-ci a maintenant un petit favicon mis à jour. C'est le cas. Fantastique OK. Maintenant, la dernière chose que je veux faire ici, c'est là où il est écrit HRF. Comment puis-je le faire ouvrir dans un nouvel onglet ? Encore une fois, faisons quelques recherches. Comment coder le noyau pour l'ouvrir dans un nouvel onglet. Je peux évidemment, bien sûr, demander à Hatipt. Mais ici, ajouter l'attribut vide cible. OK. D'accord, d'accord. Donc, je sais que cela fonctionne, mais si cela ne fonctionne pas pour vous, essayez autre chose. Alors allons-y. Cible. OK, c'est bon signe quand le retour commence à être rempli automatiquement. Il y a plusieurs options ici. Alors allons-y pour le blanc. Nous y voilà. Commande S. Revenons à Chrome et actualisons-le. OK ? Rien ne devrait changer visuellement, mais appuyons sur un élément cool. Et cela ouvre Google dans un nouvel onglet. Whoo hoo C'est génial. Bien, revenons au bureau Github et ouvrons le lien dans un nouvel onglet Engagez-vous dans le Maine, qui est, encore une fois, toujours sur notre ordinateur, puis appuyez sur Origin. Et dans peu de temps, nos sites Web en ligne devraient également être mis à jour. Vous venez de publier votre premier site à la vue du monde entier, et il est synchronisé en toute sécurité avec Github Désormais, chaque fois que vous envoyez votre code sur Github, votre site est mis à jour De plus, si vous avez plusieurs ordinateurs, vous pouvez utiliser le dépôt sur Github comme source ultime de vérité Vous pouvez transférer des modifications sur Github et récupérer les modifications sur Github très facilement Vous êtes maintenant sur le point de prendre le contrôle d'Internet. Mais avant de passer au style des sites Web, je voudrais passer en revue les dossiers, les parties de fichiers et les noms de fichiers. Je sais que cela semble ennuyeux, mais c'est la cause de nombreux bugs, erreurs et maux de tête. Si tu comprends ces choses, tout sera tellement plus facile. Je vous verrai dans la prochaine vidéo. 11. 10 Nom, dossiers et chemins d'accès aux fichiers: OK, abordons quelques points qui vous faciliteront la vie une fois que vous les aurez compris. La première concerne la distinction majuscules/majuscules. La plupart du temps, sur votre ordinateur local, celui sur lequel vous codez, peu importe que vous utilisiez des majuscules, minuscules ou une combinaison des deux Vous pouvez vérifier si c'est important en modifiant la majuscule d' un nom de fichier image, soit dans le système de fichiers, soit dans votre code HTML. Si des problèmes surviennent lorsque le boîtier change, cela signifie que votre ordinateur fait la distinction majuscules/minuscules. C'est important parce que la plupart des ordinateurs et serveurs en ligne se soucient de l'étui que vous utilisez. Ils font la distinction majuscules/minuscules. raison pour laquelle c'est important, c'est que tout peut sembler génial sur votre ordinateur local, mais que tout est foiré et cassé lorsque vous le voyez en ligne Sur votre ordinateur, l'accès à Cat Dot JPG peut fonctionner car Cat Dot JPG et Cat Dot JPG sont considérés comme la même chose car le système de fichiers de votre ordinateur ne fait pas la distinction majuscules/majuscules Mais les serveurs Gitub les considèrent comme des fichiers distincts car Github Vérifiez donc les noms de fichiers et de dossiers réels par rapport à ceux que vous avez écrits dans votre code HTML et CSS si de telles choses commencent à se produire Pour éviter que cela ne se produise, choisissez une méthode standard nommer vos fichiers et respectez-la. Je préfère tout nommer en minuscules et utiliser des tirets plutôt C'est ce qu'on appelle l'affaire Kebab. Les autres options populaires sont l'étui camel et l'étui serpent. La deuxième chose qui va vous faciliter la vie est d'utiliser des dossiers. Les dossiers simplifient votre projet. Cela est particulièrement utile lorsque la taille de votre projet augmente. Bien sûr. Vous pouvez modifier votre code, créer des dossiers et y placer des fichiers au fur et à mesure que vous codez, mais cela prend du temps et entraîne souvent des erreurs. J'essaie donc de rester organisée dès le départ. J'ai un dossier IMG pour les images. J'ai un dossier CSS pour les fichiers CSS. Si j'ai mes propres polices personnalisées, j'ai un fichier de polices, et si j'ai des fichiers JavaScript, j'ai un dossier JS. Tout ce que je veux dans le dossier principal, ce sont des fichiers et des dossiers HTML. Vous pouvez créer vos dossiers dans le code VS ou dans votre système de fichiers. La troisième chose qui va vous faciliter la vie est de comprendre les chemins des fichiers. Puisque nous utilisons des dossiers et des fichiers dans des dossiers, comment pouvons-nous indiquer au navigateur où se trouve un fichier ? Lorsque nous écrivons le nom du fichier, nous indiquons au navigateur où le trouver en utilisant une combinaison d'instructions avant de trouver le nom du fichier. La première instruction que vous pouvez utiliser est de demander au navigateur regarder dans le même dossier que celui dans lequel se trouve actuellement ce fichier. Utilisez un point suivi d'une barre oblique. La deuxième instruction consiste à regarder dans un dossier. Utilisez le nom du dossier suivi d'une barre oblique. La troisième consiste à accéder à la paire et au dossier. Utilisez deux points et une barre oblique. La quatrième consiste à commencer par le dossier racine ou le dossier principal. Vous tapez une seule barre oblique. Cela peut ne pas fonctionner comme prévu sur votre ordinateur local car le dossier de votre projet peut en fait se trouver dans plusieurs autres dossiers. Ainsi, lorsque vous demandez à un navigateur d'accéder au dossier racine, il va jusqu'au début de l'arborescence des dossiers Mais en ligne, là où il y a un URL, cela fonctionne à merveille. Bien entendu, vous pouvez également commencer par un domaine ou un URole avec une barre oblique à la fin, comme taptapkaboom.com forwardslash fin, comme taptapkaboom.com Et l'avantage de ces instructions, c'est que vous pouvez les combiner, par exemple en commençant par le dossier dans lequel se trouve ce fichier, puis en allant dans le dossier parent, puis dans le dossier des images, et à l'intérieur de ce dossier se trouve une image appelée Cat Dot JPEG. OK, ce sont les trois choses qui vont beaucoup aider. Rafraîchissons-le rapidement. La sensibilité K est importante. Utilisez les dossiers dès le départ pour rester organisé, et nous utilisons le chemin des fichiers pour indiquer au navigateur où se trouvent les fichiers. La prochaine étape consiste à apprendre à modifier apparence de nos éléments HTML avec le CSS, et c'est là que les choses commencent à devenir très amusantes. 12. 11 Qu'est-ce que le CSS: Nous avons donc écrit du code HTML, mais cela n'a pas l'air joli. C'est là qu'intervient le CSS. Le CSS que nous écrivons donne une belle apparence à notre code HTML en remplaçant les styles par défaut ennuyeux fournis par le navigateur Nous écrivons du CSS pour indiquer au navigateur à quoi doivent ressembler les éléments HTML. Pour ce faire, nous écrivons un nom de propriété et une paire de valeurs, séparés par deux points et un point-virgule à la fin Nous pouvons personnaliser un élément avec autant de paires de propriétés que nous le souhaitons. Et il existe des tonnes de propriétés que vous pouvez écrire pour modifier l' apparence, le toucher et le fonctionnement d'un élément. Des propriétés telles que la hauteur, la couleur d' arrière-plan, la famille amusante, la taille de la police et bien d'autres encore. Maintenant, il existe deux méthodes pour écrire du CSS. La première consiste à utiliser des styles intégrés, dans lesquels nous stylisons un élément à l'aide d'un attribut HTML appelé style La seconde consiste à utiliser des ensembles de règles, dans lesquels nous sélectionnons les éléments à styliser, puis les propriétés CSS et les valeurs de ces éléments. Nous aborderons ces deux options et quelques autres éléments importants du CSS dans les prochaines leçons. 13. 12 CSS en ligne: Dans cette leçon, nous allons passer à la pratique et commencer à écrire du CSS avec des styles intégrés, que nous écrivons dans un attribut HTML Maintenant, veuillez noter que tout est orthographié à l'américaine lors de l'écriture de HTML et de CSS Oui, donc ce que nous allons faire ici c'est créer des styles intégrés Qui hoo hoo. Faisons donc glisser expériences dans le code de Visual Studio. Et oui, il a l'air plutôt gros. Peut fermer cet onglet de bienvenue. Nous avons donc du HTML de test. Ce que je veux faire ici, c'est créer un nouveau fichier. Et appelez-le « inline style dot html » ou «   inline styles dot C'est bon. Appuyez pour obtenir le ton. Et vous verrez ici : Oh, devons-nous tout recommencer ? Oui, nous devons tout recommencer, mais c'est bon. Passons donc à A, type Doc. Nous y voilà. Ensuite, je vais faire du HTML. Puis dirigez-vous. Oui. OK. Et puis ici, nous avons un titre, et le titre doit être composé de styles intégrés. C'est génial. Et puis nous avons un corps. OK. Ça a l'air bien. Vous pouvez donc vous habituer vraiment à faire ça, vous entraîner à le faire, en écrivant l'en-tête, le corps du code HTML , des choses comme ça. Maintenant, écrivons un H. Et ici, si vous ne le souhaitez pas, vous n'avez pas à écrire la cravate d'ouverture. Vous pouvez simplement taper H un, et cela devrait, vous savez, vous donner quelques options ici. C'est ce qu'on appelle une abréviation ET, et je vais juste appuyer sur Retour, et il devrait y avoir H une balise à gauche, H une à droite, puis mon curseur devrait être au milieu. Si ce n'est pas le cas, vous devrez, vous savez, écrire l'intégralité de votre balise au début et à la fin de votre élément. OK, c'est bon. Passons donc au premier titre. Je vais le faire quatre fois. Ensuite, ce que je vais changer ici c'est passer au titre deux, trois , quatre, et changeons celui-ci au titre deux, trois et quatre. OK. Ça a l'air plutôt bien. Ensuite, je vais le dupliquer à nouveau. Et puis commandez S ou enregistrez-la. Vous pouvez accéder à Fichier, puis à Enregistrer ou à Enregistrer comme vous le souhaitez, mais à Commande S ou Contrôles si vous êtes sous Windows. Revenons ensuite au Finder. Nous avons des styles intégrés à points HML. Appuyons deux fois dessus pour l' ouvrir . Et voici ce que vous obtenez. Titre un, deux, trois, quatre, ils sont tous de tailles différentes, ce qui est logique car il existe différents niveaux de titre. OK, cool. Passons donc au code studio ou au code VS. Et nous allons créer un attribut appelé style. Et ici, je vais opter pour la taille de police et la changer à 30 pixels. Nous y voilà. Ça a l'air bien. Je vais le copier-coller. Oh. Beaucoup de copier-coller. Et puis celles-ci, je vais opter pour 20 pixels. Et je vais garder ça. OK. Passons à Chrome et à Refresh. Et vous verrez que nos premiers titres sont tous de la même taille amusante Les titres suivants sont également de la même taille amusante. Ouf. Plutôt cool, non ? Oui. Vous pouvez donc faire en sorte que les choses se ressemblent, même si elles ne sont pas identiques. OK. Nous pouvons continuer à ajouter d'autres propriétés ici, alors passons à la couleur. C'est la couleur du texte, ce n'est pas très intuitif, je sais. Il existe de nombreuses façons de colorier. Vous pouvez opter pour un code hexadécimal, comme hash, ff00 00, qui est rouge, ou vous pouvez simplement écrire en rouge Mais lorsque vous écrivez le mot rouge, il n'y a pas beaucoup de variations de rouge. Donc, si vous vouliez quelque chose comme ça, eh bien, il n'y a pas de mot pour ça, je ne pense pas. Alors, sauvegardons ça. Optons pour la couleur, pas pour le contraire, peu importe ce que c'était. La couleur doit être américaine, tu te souviens ? Et c'est parti pour Alice Blue. Est-ce que c'est un truc ? Voyons voir. Donc Alice Blue. Et s'il se plaint, c'est parce que nous n'avons pas de deux points ou de points-virgules à la fin Essayons donc à nouveau. Color, allons-y. Le bleu Alice est un peu comme le blanc. Qu'en est-il de l'aigue-marine ? Nous y voilà. Cool. Et vous devriez également voir les couleurs apparaître juste avant la valeur réelle. OK, colorie ici. Optons pour le rouge. OK. Et enfin, celui-ci ici. Couleur, descendons en utilisant les touches fléchées de mon clavier. Crimson est plutôt cool. Que diriez-vous d'un rouge doré foncé ? Whoo. Quel nom de couleur. OK. Sauvegardez ça. Vous pouvez donc voir ici si vous voulez que tous ces éléments aient cette couleur, vous pouvez simplement les copier et les coller. Mais ensuite, si vous vouliez toutes les changer, vous pourriez dire : « Oh, d'accord. Passons à autre chose maintenant. Qu'en est-il de RGB Relative ? Hmm, je ne sais même pas ce que c'est, pour être honnête. Mais RGP ou RGBA, nous pourrions le faire. Tellement rouge. Optons pour 255, valeur verte. Passons à 120, et une valeur bleue à 100. Il s'agit des valeurs de 0 à 255, puis d'une valeur Alpha, passons à 0,5 C'est donc un peu opaque, semi-transparent au milieu Alors voilà, vous allez chercher un chiffre 0-1. Normalement, c'est une fraction. On pourrait donc dire 0,5. Oh, et regardez ça, il y a un joli petit sélecteur de couleurs Oh. C'est assez chic. Alors, regardez ça. OK. Cool. Donc, ce que je disais tout à l'heure, c'est que si vous vouliez changer toutes ces couleurs, vous devez ensuite copier puis coller, coller, ce qui peut devenir un peu irritant Vous pouvez avoir deux points-virgules à la fin, mais ce n'est pas nécessaire OK, disons ça. Revenons à Chrome et actualisons. OK, vous pouvez donc voir quatre derniers ont la même couleur. Vous avez différentes couleurs en haut ici. Fantastique. Maintenant, ce qui est vraiment intéressant, c'est lorsque vous commencez à modifier des éléments à l'intérieur d'un élément. Passons donc au premier titre. Je vais mettre ça sur une nouvelle ligne, ce qui ne devrait rien changer. Ensuite, je remplacerai ce chiffre un par une lettre un. Et je veux juste te montrer que rien ne change vraiment. C'est un rappel, juste le texte. Et celui-ci, j'ai aussi envie de changer de couleur. Donc, pour ce faire, je place un élément span autour de celui-ci, puis nous pouvons y mettre un attribut de style et changer la couleur en bleu. OK. Je vais l'enregistrer puis l'actualiser. Donc, à moins que vous ne spécifiiez réellement la couleur, elle doit hériter de la couleur de son élément parent Donc, si j'écris Clair et que je dis inspecter, vous verrez que cette plage est de couleur bleue et que son parent a une couleur de cette couleur prête à OK, si vous voulez changer cela très facilement, vous suffit de sélectionner cette couleur, puis vous devriez indiquer les styles, et cela devrait vous montrer d' où viennent tous les styles. La couleur rouge est donc héritée de H un. Donc, si je décoche le bleu, la couleur rouge ou cette couleur prête à l'emploi provenant de son élément parent apparaît. M : OK. Ce que je veux vous montrer maintenant, c'est si vous attribuez à un élément plusieurs propriétés du même nom. Alors jetez un œil à ceci. Passons au code Visual Studio. Et ajoutons une autre couleur ici. Optons pour une sorte de jaune-vert. Ça a l'air bien. OK. Et puis peut-être que pour le titre deux, nous le changeons en couleur, et que nous optons pour un bleu ardoise foncé. OK. Maintenant, peut-être que vous savez déjà ce qui va se passer, peut-être que vous ne le savez pas tant que nous y sommes Je n'aime pas vraiment quand les choses continuent et continuent vers la droite. Alors, comment puis-je changer cela ? Eh bien, je voudrais opter pour une sorte de réglage. Je pense donc que c'est une commande et une virgule. Voilà, ou vous optez pour le code et les paramètres, puis il vous suffit d'appuyer sur les paramètres là-bas. Maintenant, ce que je veux faire, c'est rechercher du rap, du word wrap. La ligne doit être terminée, et je veux que ce soit le cas. Voyons donc si c'est terminé. Oui. Cela signifie qu'il ne continue pas encore et encore vers la droite. Il s'enroule très bien. J'ai donc deux ans, et tout est toujours en ligne 14. OK, merci. Disons cela. Commande S et Commande R pour l'actualisation. OK. Alors, en allant ici, jetons un coup d'œil. Hmm. Vous verrez donc que la couleur de la propriété, celle qui a été ajoutée en dernier, est celle que le navigateur applique, et vous pouvez la voir ici. C'est de la couleur rouge, ce rouge, puis il passe au jaune-vert Il est barré de celui-ci parce que nous avons mis cette propriété en dernier. Il en va de même pour le titre numéro deux ici. Donc, si nous inspectons celle-ci, la couleur bleu ardoise foncé prend le pas sur cette autre couleur RGBA car elle a été écrite Mais cette plage de couleur bleue possède toujours la couleur bleue parce que c'est un élément à part entière, et la couleur qu'elle héritait de ce H est remplacée par sa couleur bleue, notamment parce qu' il s' agit d'un style en Maintenant, que pouvons-nous faire d'autre ? Eh bien, jetez un œil à ça. Si je tape simplement sur l'une de ces valeurs de propriété et que j'appuie sur Retour, je peux alors commencer à en saisir une autre. Passons donc au contexte. Passons à la couleur. Et puis, qu'est-ce qu'Azure ? Optons pour Azure. Cela n'apparaît pas vraiment. Alors peut-être pour une tige jaune pâle. A ne s' affiche vraiment pas très bien. Et si on optait pour un rouge foncé, un rouge indien. Nous y voilà. C'est plutôt cool. Et encore une fois, si vous actualisez ici, ce style ne persistera pas. Il ne sera pas enregistré dans votre fichier. Vous essayez simplement des choses dans cette version que le navigateur vous envoie ici. OK, alors allons-y et ajoutons quelques couleurs de fond. Donc Visual Studio Code. Eh bien, passons à la couleur de fond. OK, optons pour un gris vert, les verts frais. Assurez-vous d'avoir un point-virgule entre les Donc, la couleur de fond ici, mais ce qui est arrivé à la taille de la police a en quelque sorte disparu. Passons donc à la taille de police, et pour une raison ou une autre, cela efface simplement ces 30 pixels Donc, même s'il s'agit d'un remplissage automatique pour vous, vérifiez simplement ce qu'il fait Ensuite, nous pouvons le copier-coller ici et peut-être ici. OK. Celui-ci, passons à la couleur de fond. Waouh. Un Indigo. OK. Si certaines de ces choses qui apparaissent deviennent irritantes, vous pouvez les désactiver dans les paramètres. Vous devrez peut-être simplement rechercher leur nom ou, vous savez, simplement parcourir les paramètres et modifier certaines choses selon vos préférences. Par exemple, toutes ces choses comme, Gus, allez. J'essaie juste d' écrire des choses ici. Indigo, Indigo, Indigo. Et vous pouvez voir à quel point cela devient vraiment confus. Par exemple, où est mon texto ? Où sont mes styles ? Comme Whoa. Et tout cela nous amène à la leçon suivante. Ne t'inquiète pas. C'est pourquoi nous allons progresser. OK, allons-y pour Google Chrome, mise à jour. D'accord, tout a maintenant une couleur de fond. Fantastique. Et si nous devions changer cela, il faudrait changer chaque ligne. Donc, une, deux, trois, quatre, cinq lignes pour le violet, un , deux, trois, pour les verts. Waouh. OK, passons maintenant à Github Desktop. Nous avons un nouveau fichier de styles intégrés, alors créez des styles en ligne appelés HTML Engagez-vous dans le Maine, puis appuyez sur Origin. Ce qui est vraiment important maintenant, c'est que si vous avez besoin de mon aide pour quoi que ce soit, j'aimerais que vous la publiiez sur votre compte GitHub afin que vous puissiez dire : «   Hé, les choses ne fonctionnent pas Voici mon lien, s'il vous plaît. Salut, moi. Ensuite, vous pouvez m'envoyer une URL. Vous pouvez donc dire : « D'accord, allons sur GitHub Point com, et vous pouvez accéder à votre dépôt Experiments. Vous pouvez ensuite accéder à vos paramètres. Vous pouvez accéder à vos pages, puis accéder à votre site en tant que Live ici. Et puis, comme nous avons travaillé sur les styles intégrés au HTML à points, vous pouvez ensuite partager cette page avec moi, et ensuite je pourrai y jeter un œil, vous savez ? J'espère que vous commencez à voir à quel point c'est amusant , cool et puissant. Vous pouvez facilement rendre les choses épiques et géniales, mais vous avez peut-être remarqué que cela peut être difficile et qu'il peut falloir beaucoup de temps pour modifier le CSS de plusieurs éléments auxquels vous souhaitez donner la même apparence. Dans la leçon suivante, je vais donc vous montrer comment utiliser ensembles de règles CSS et vous expliquer pourquoi il est souvent préférable de les utiliser. 14. 13 ensembles de règles CSS: Avec les règles CSS définies, vous spécifiez les éléments que vous souhaitez styliser, puis vous écrivez les noms et les valeurs des propriétés entre accolades Permettez-moi de vous donner les noms officiels de toutes les parties d'un ensemble de règles. Cela facilitera l' explication et la compréhension des choses à l' avenir. La partie dans laquelle vous spécifiez les éléments HTR que vous souhaitez styliser s'appelle un sélecteur ou une C'est là que vous sélectionnez les éléments à styliser. Ce sélecteur cible tous les éléments H one. Celui-ci cible tous les éléments de l'image. Nous aborderons des exemples plus complexes d'instructions de sélection plus loin dans le cours La partie située à l'intérieur des bretelles est appelée bloc de déclaration Il contient une ou plusieurs déclarations séparées par des points-virgules, et une paire de valeurs de propriété est appelée À la fin d'une déclaration, vous mettez un point-virgule. Donc, ce que dit cet ensemble de règles, c'est de sélectionner tous les éléments du titre 1, de faire en sorte que leur texte soit de couleur rouge et que leur taille de police soit de 50 pixels. L'utilisation de RuleSets rend vos fichiers HTML beaucoup plus nets et faciles Et vous pouvez faire des choses puissantes avec les sélecteurs, que j'aborderai plus tard dans ce cours D'accord, commençons à écrire du CSS basé sur un ensemble de règles. Donc, au lieu d'écrire un tout nouveau fichier HTML avec les éléments de tête et de corps, je vais simplement dupliquer celui-ci. Donc, cliquez avec le bouton droit de la souris et dupliquez, puis j'appuierai sur Raton ou je cliquerai avec le bouton droit de la souris , puis sur Renommer Et je l'appellerai RuleSet. Les styles RuleSet pointent le code HTML. OK. Ensuite, dans le code de Visual Studio, je vais ouvrir les styles des ensembles de règles Et vous verrez que c'est vert parce que c'est neuf. Donc c'est comme dire : «   Hé, c'est nouveau ». Alors allons-y. Passons aux styles RuleSet. OK. Ensuite, à l'intérieur de votre élément principal, nous allons créer un élément de style comme celui-ci. Donc, en ouvrant et en fermant la balise, et à l'intérieur de votre élément de style, nous allons écrire du CSS. Je veux donc changer tous les éléments H one. Bonjour, quand j'appuie sur l'orthèse d'ouverture, cela devrait créer une orthèse de fermeture pour moi comme ça Vous pouvez également mettre un espace entre les deux. Je n' aime pas faire ça. Cela facilite un peu la lecture. Et puis, lorsque j'appuie sur Tab, mon curseur est placé ici. Ensuite, je veux changer la couleur d' arrière-plan. Donc, couleur de fond. Eh bien, optons pour le noir parce que c'est vraiment cool, non ? Donc, Command S. Maintenant, passons à Google Chrome, et il n'est pas ouvert. Appuyez donc deux fois sur les styles des ensembles de règles. Et rien n'a changé ici. Intéressant Donc, si nous inspectons cela parce que cela va se produire, vous écrivez quelque chose, vous vous attendez à ce que quelque chose se produise, puis cela ne change pas. Nous allons donc jeter un œil à celui-ci en H, d'accord ? Intéressant La couleur de fond est le noir, mais elle a été supprimée et la couleur jaune-vert a été appliquée C'est la couleur, mais la couleur de fond verte a été appliquée. Hmm. Donc, ce qui se passe ici, c'est que plus une propriété et une valeur sont spécifiques, plus le navigateur va les privilégier. Il va choisir celui-ci plutôt que quelque chose qui n'est pas aussi précis. Nous disons donc : «   Hé, tous les H, je veux que vous ayez une couleur de fond noire ». Est-ce que ce style d'élément disait : « Hé, cet élément très spécifique, je veux que vous ayez une couleur de fond verte ». Donc, si nous devions décocher la couleur de fond ici, elle deviendrait alors noire, ce qui est vraiment cool Revenons donc au code de Visual Studio. Supprimons la couleur de fond, la couleur de fond de toutes ces choses. P. P. Et vous pouvez voir combien de temps cela prend pour modifier des valeurs CSS. Pouf. OK, cela semble un peu plus gérable maintenant Je vais donc enregistrer ça. Revenons à Chrome et actualisons. OK, maintenant, seuls les éléments de votre titre ont ce fond noir, ce qui est génial. Essayons autre chose ici. Revenons ici et disons H un, virgule , H deux, H trois, H quatre. Vous dites donc en gros : tout ce qui est un H un, un H deux, un H trois ou un H quatre, je veux vous appliquer cette propriété CSS ou à ces propriétés CSS. Donc, commande S, revenons à Chrome. Et maintenant, ils ont tous ce fond noir. Bien, revenons au code de Visual Studio ici. Ça a l'air génial. Fantastique Maintenant, je veux changer les couleurs des H uniquement. Donc, au lieu de mettre une valeur de couleur et une propriété ici, je vais opter pour H un, et passer à la couleur. Et quel genre peut-être de corail. Corail. Ouais. Génial. Et encore une fois, ici, cela ne fonctionnera probablement pas car il existe déjà des styles de couleurs intégrés Passons donc à Chrome, actualisons. Rien ne doit changer. J'ai compris, j'ai compris, j'ai compris. Supprimons donc les propriétés de couleur. OK. Tout cela. Au revoir. Même si c' était une couleur plutôt cool. Donc ce que je vais faire, c'est le mettre ici, mais je veux juste, vous savez, le rendre invisible, mais je veux quand même le voir. Alors, comment puis-je m'y prendre ? Eh bien, ça s'appelle un commentaire. Vous sélectionnez donc un ensemble de texte, puis vous appuyez sur Commande et sur la barre oblique, et cela crée un commentaire pour vous Vous pouvez également écrire votre propre commentaire en avançant Astérix et à la fin, Astérix et Le navigateur ne le lit pas. Plutôt cool. OK, enlevons ces couleurs. OK. Ça a l'air plutôt bien. Beaucoup plus gérable. Alors, sauvegardons ça. OK. Revenons à Chrome Refresh. OK, donc Titre un, Titre un, grilles. Les autres sont de couleur noire. Bien, revenons au code de Visual Studio. Mettons une couleur par défaut pour H un, H 2h3h4. Optons pour une sorte de green. Optons pour le vert. OK, sauvegardez. Donc, ce qui devrait se passer ici, c'est que H un, H 2h3h4 devraient avoir une couleur verte, puis H un devrait avoir une couleur corail parce que cela remplace ce style Et comme celui-ci a été écrit en dernier, le navigateur doit alors choisir celui-ci plutôt que celui qui n' a pas été écrit en dernier. OK. Rafraîchir Nous y voilà. Cela fonctionne. Donc, titre 1. Inspectons. La couleur du corail est appliquée. Nous y voilà à cause de la couleur verte appliquée à H un, H deux, H trois, H quatre. OK. Nous y voilà. Maintenant, le span a toujours une couleur bleue car il a toujours un style intégré Génial. OK. Revenons au code de Visual Studio. Qu'en est-il des tailles de police ? Bien, d'accord, changeons certaines choses ici. Optons pour une taille de police de 30 pixels. Ensuite, ce que nous pouvons faire ici, c'est supprimer tout cela. Waouh. Beaucoup de travail sur les styles intégrés. Mais tu peux t' en servir si tu veux. OK. Je pourrais me plaindre de ces choses ici, alors sortons-les. OK. Le seul style intégré que nous avons est celui de la travée. Sauvegardez-y. Maintenant, tout semble exactement pareil, ou la couleur de fond. La plupart des couleurs, la taille de la police ressemblent un peu plus à un espacement autour de ce H quatre ou du H trois ou quelque chose comme ça Donc, ce que nous pouvons faire, c'est passer à ce H un, h2h3, h quatre, et je vais changer la marge à zéro Qui. Nous y voilà. C'est, tu sais, tout a changé exactement de la même façon. n'y a plus de marge maintenant. Tout est comme hétérogène, pareil Sauf pour la couleur, bien sûr. OK, donc si tu voulais changer ça, tu le pourrais. Oui, ça a l'air plutôt bien. Nous devons maintenant accéder au bureau Github et créer des styles d'ensemble de règles avec du HTML, valider dans le Maine et les envoyer. D'accord. Voilà donc les bases de l'utilisation des ensembles de règles CSS. Ils sont supérieurs aux styles intégrés pour plusieurs raisons. Tout d'abord, votre CSS est plus facile à lire. Deuxièmement, il est plus facile de modifier l'apparence d'un ensemble d'éléments en utilisant le même code. copier-coller entre les attributs de style est une énorme perte de temps et est source d'erreurs Troisièmement, cette instruction de sélection peut être puissante. Nous y reviendrons dans la prochaine leçon. 15. Instructions du sélecteur CSS: Alors que les ensembles de règles CSS rendent tout plus clair et plus facile à lire, nous avons perdu la possibilité de modifier le style des éléments individuels C'est là que le pouvoir des instructions de sélection brille, en particulier lorsque vous utilisez des attributs class et ID sur vos éléments HTML Vous pouvez consulter les instructions de sélection en tant qu' enseignant qui sélectionne les élèves qui doivent se lever. Voici quelques exemples. Est-ce que toutes les filles peuvent se lever, s'il vous plaît ? Est-ce que tous les garçons de plus de 11 ans peuvent se tenir debout ? Toutes les filles aux yeux bleus âgées moins de 11 ans peuvent-elles se lever ? Est-ce que tous les élèves qui jouent d'un instrument de musique, mais pas de guitare, peuvent se lever ? Est-ce que toutes les filles qui s'appellent Susan peuvent se lever ? L'étudiant portant le numéro d'étudiant 876221 peut-il se lever ? Vous pouvez voir à quel point ces déclarations peuvent être génériques ou spécifiques. Ils incluent ou excluent. Et c'est ce que fait une instruction de sélection CSS. Voici quelques exemples de ce que vous pouvez sélectionner pour tous les types de titres, liens lorsqu'ils sont survolés, les paragraphes qui suivent les titres , les images à l'intérieur des paragraphes, les éléments d' ancrage directement à l'intérieur des éléments NAV Les instructions de sélection sont particulièrement utiles lorsque vous souhaitez modifier éléments portant le même nom apparence des éléments portant le même nom dans différentes parties de votre site Web, comme les liens de votre barre de navigation par rapport aux liens contenus dans les paragraphes de votre article, ou l'image votre barre latérale par rapport aux images du reste du site Pour rendre cela encore plus facile, vous pouvez utiliser les attributs class et ID. Sur n'importe quel élément HTML, vous pouvez ajouter une classe et un attribut ID. Un attribut ID doit être unique sur une page Web. Vous ne pouvez pas avoir plus d'un élément avec le même attribut ID. Sinon, les choses se passent de façon imprévisible. Un attribut ID ne peut pas comporter d'espaces. Si vous souhaitez qu'un attribut d'identification soit composé de plusieurs mots, utilisez un étui à kebab, un étui en chameau ou un étui en forme de serpent Une fois qu'un élément possède un identifiant, vous pouvez le sélectionner en CSS en utilisant le symbole de hachage suivi la valeur de l'attribut ID, comme sélectionner tous les éléments avec l'ID de la bannière Hero Cela ne devrait être qu'un élément. Désormais, un attribut de classe est un moyen de regrouper des éléments ou de les classer. Pensez à des choses comme la couleur des yeux, le sexe et l'âge. Vous classez les éléments HTML en leur attribuant un ou plusieurs noms de classe dans leur attribut de classe. Le nom d'une classe ne comporte aucun espace car un espace indique le nom d' une autre classe Comme pour un attribut ID, si vous souhaitez qu'un nom de classe soit composé de plusieurs mots, utilisez un étui à kebab, un étui en chameau ou un étui en forme de serpent Une fois qu'un élément possède un nom de classe, vous pouvez le sélectionner en CSS à l' aide du symbole point suivi du nom de classe. Par exemple, sélectionnez tous les éléments dont le nom de classe est fond bleu ou sélectionnez tous les éléments de paragraphe dont le nom de classe est légende et fond bleu. Maintenant, jouons avec nos nouvelles connaissances en matière de classes et d'identifiants. Voilà ce que nous avons obtenu, mais maintenant j'ai perdu façon de dire à un élément spécifique : « Hé, je veux que tu sois rouge ou je veux que tu sois bleu, ou je veux que tu sois jaune-vert ou vert-jaune ». Comment faisons-nous cela avec les cours et les identifiants ? Eh bien, allons-y. Donc, dans le code VS , changez cette couleur d'arrière-plan du noir à rien pour le moment. Alors, sauvegardons ça. Revenons à Chrome et actualisons. Ça a l'air beaucoup plus frais. Ça a l'air beaucoup plus facile à lire, ce qui est génial. Et puis, oui, pour certaines d'entre elles, je veux vraiment les rendre rouges. Alors allons-y. Et ce que nous allons faire, c'est dire n'importe quoi avec une classe rouge ou important. Donnons-lui une couleur de fond ou peut-être une couleur rouge, très rouge. Nous y voilà. Ce n'est donc pas important. C'est un cours. OK, cool. Alors, comment écrire une classe en HTML ? Nous le faisons en tant qu'attribut, et nous lui attribuons une classe d'important. Nous y voilà. Je vais le copier, le mettre sur H quatre, H un, H trois. OK. Je vais garder ça. Passons à Chrome et à Refresh. OK. Certains de nos titres sont donc maintenant rouges parce qu'ils ont cette classe importante, qui provient de cette classe CSS importante Nous pourrions également le remplacer quelque chose comme orange, orange, rouge. Qu'en est-il d'une couleur orchidée ? Nous y voilà. Et vous pouvez voir à quelle vitesse cela met tout à jour. Il est tellement plus facile de modifier tout un tas de styles HTML. Mettons-le là, pour Kid Orchid ou Kid. Je ne sais pas trop comment le dire. OK. Ça a l'air bien. Ou que dire de cette couleur que nous avions dans un commentaire ? De plus, vous pourriez vous demander : « Comment puis-je faire un commentaire HTML ? » Parce que ce n'est pas pareil ? Eh bien, si vous voulez commenter du HTML, sélectionnez le texte que vous souhaitez commenter, appuyez sur Commande ou Ctrl et sur la barre oblique, et il fait un commentaire HTML, qui est un symbole inférieur C'est un point d'exclamation, et il y a deux tirets au début Et puis à la fin du commentaire, vous passez à dash, dash, supérieur à. Et vous pouvez également activer cette option très facilement en appuyant simplement sur Commande et barre oblique Pareil pour le commentaire CSS. OK. Dans ce cas, il est assez simple de lire que cette couleur va en fait être remplacée. Cette couleur, c'est un conflit très simple. Nous pouvons donc laisser cela se produire. Donc, Command S, voyons ce qui se passe ici. OK, donc ça a très légèrement changé, juste parce que nous l'avons inspecté. Nous y voilà. Cette couleur corail est remplacée par cette couleur plus agréable. Je ne sais même pas de quel genre de couleur il s'agit. Celui avec un peu d'opacité. OK. Revenons maintenant au code VS. Nous avons quelques cours ici. Que se passera-t-il si, dans ce cas, vous avez votre orchidée, mais que je mets aussi un vert dessus, comme H un, H deux, h trois, h quatre. Eh bien, s'il s'agit d'une classe et qu'il y a un conflit, elle remplace celle qui n'est pas aussi spécifique Les classes sont donc plus spécifiques que de simples noms d'éléments. Mais ce qui est plutôt cool, c'est que nous pouvons également mettre une couleur de fond ici. Optons pour un bâton doré foncé ou orange foncé. Nous y voilà. Et nous pouvons voir à quoi cela ressemble. Ça va probablement avoir l' air plutôt dégoûtant. Et ce que cela fait, c' est que cela va mettre un orange foncé sur les plus importants, ce qui est génial. Mais ce que je voulais vraiment vous montrer ici, c'est que si vous mettez cette couleur de fond sur ces quatre h1h2 h38 et que vous l'enregistrez, cela les met Ainsi, lorsque vous avez une propriété ou une déclaration de couleur, elle ne remplace pas l'ensemble des déclarations précédentes Cela ajoute à cela. Ce n'est que s' il y a un conflit que l'on peut alors dire : « D'accord, lequel allons-nous choisir ? Nous devons faire un choix ici. Maintenant, nous avons toujours ce style bleu en ligne. Débarrassons-nous de ça. Et au lieu d'une classe, nous pouvons utiliser une classe. Nous pouvons mettre une pièce d'identité ici et nous pouvons dire « la bonne ». J'aime utiliser un étui à kebab. Tu pourrais faire quelque chose comme ça, c'est Camelcase. Utilisons-le pour le moment. Et comment le savez-vous, créez un identifiant en CSS. Nous créons un symbole de hachage, puis nous le mettrons, puis nous insérerons notre code CSS ici Et la couleur était bleue. Nous y voilà. C'est donc une très bonne façon de séparer vos styles de votre code HTML. Donc, une mise à jour de Command S. Rien ne devrait changer car si nous inspectons celui-ci, cela provient de cette déclaration CSS de celui-ci. OK. Ce que nous pouvons faire, c'est également ajouter plusieurs classes, deux éléments. Alors jetez un œil à ceci. Nous passons au code VS ici. Et pour quelques-unes d'entre elles, nous allons opter pour les classes et les majuscules. Et je vais le copier. Donc, pour ce titre deux et ce titre trois, je vais ajouter une classe supplémentaire ici, et vous verrez qu' il y a un espace. Un espace dans cet attribut de classe signifie qu'il s'agit d'une autre classe. Et nous avons Important, qui a la couleur de l'orchidée. Et puis nous avons une classe de majuscules, et nous pouvons dire transformation de texte et opter pour des majuscules, comme ça Donc, commandez S, puis actualisez et Google Chrome. OK. Le titre 1 est donc en majuscules titre deux est en majuscules. C'est vraiment cool. Oui. Et vous pouvez aussi vous rendre les choses très confuses. Ainsi, les majuscules peuvent simplement avoir une transformation textuelle des majuscules, mais elles peuvent aussi avoir une couleur dont la couleur est vraiment facile Rose vif. Allons-y. Et peut-être une couleur de fond noire. Peut-être que l'idée derrière la classe majuscule est de la rendre vraiment facile à lire Donc, Command S. Revenons ici. OK. Nous y voilà. Donc, si nous examinons le chapitre trois, nous verrons qu'il y a deux ou trois choses qui se passent ici. Il y a un H, H2H3, H quatre, un tas de CSS La seule chose qu'il conserve de là est la taille de police de 30 pixels. La couleur et la couleur d'arrière-plan sont remplacées par d'autres styles. Elle possède également une classe importante, elle a donc cette couleur d'orchidée, mais elle est également remplacée par cette classe majuscule car elle arrive en dernier dans l'élément de style Donc, si nous changeons cela, si nous le mettons en premier et important en dernier et que nous l'enregistrons là, la couleur devrait redevenir orchidée. C'est donc une remise à niveau, et c'est le cas. C'est donc la troisième rubrique, inspectez. Comme l'important se trouve maintenant plus bas dans le fichier, plus tard, le navigateur dit « cool », nous allons utiliser cette couleur au lieu de la couleur trouvée dans la déclaration en majuscules Enfin, jetez un coup d' œil à la troisième rubrique, si nous devions ajouter ici l'idée de dire « M. Jones ». Je ne peux pas vraiment trouver un meilleur nom d'identification. Et copions-le. Et dites, M. Jones, qu'allons-nous faire pour vous ? Je vais te donner une couleur peut-être optons pour un Burly Wood brun Optons pour Burly Wood. OK. Et même si Mr. Jones se trouve juste en haut de votre élément de style, et que vous l'enregistrez, cela devrait s'appliquer. Inspectez donc votre et vous verrez que M. Jones, parce que c'est une pièce d'identité, parce qu' elle est très spécifique, obtient cette couleur de bois robuste Hein. voire les classes majuscules, et il remplace certainement la déclaration H one, H 2h3h4 Il remplace même les classes importantes, voire les classes majuscules, et il remplace certainement la déclaration H one, H 2h3h4. OK. Mais je suppose que, finalement, comme il possède un identifiant de M. Jones, ce qui peut toujours le remplacer, c'est un style intégré. Donc, si nous disons style, couleur, optons pour un Non, mais un bleu-violet. Allons-y. Sauvegardez ça. Vous allez voir ici, et maintenant c'est bleu-violet. Parce que le style de l'élément est bleu-violet. Cela prime donc sur tout le reste. Maintenant, la seule autre chose qui peut remplacer ce style intégré à trois titres est un mot important Alors laissez-moi vous montrer comment l'écrire. Je ne conseille pas vraiment de le faire, mais il faut parfois savoir comment le faire. Cela a donc une classe importante en majuscules. Il possède également un identifiant M. Jones. Donc, sur l'identifiant de Burly Wood, nous pouvons ensuite mettre un point d' exclamation et écrire important », puis enregistrer ceci et actualiser, et vous verrez que la propriété CSS Burley Wood Color apparaît La même chose pourrait être faite sur peut-être le H une couleur, le H trois couleurs, l'abricase Optons pour le rose vif. OK, je vais enregistrer cette actualisation ici. Le rose vif transparaît donc. Cela signifie que le bleu violet, le bois robuste, l'orchidée ne sont pas passés à travers Rose vif. Même s'il contient ce mot clé important, il passe. Maintenant, vous pouvez également accorder de l' importance à cette valeur de couleur, cette valeur de couleur ou à cette valeur de couleur. Et puis, à cause de l'endroit où il se trouve, le navigateur dirait : « Oui, je vais choisir celui-ci au lieu de celui-ci dans la classe majuscule Essayons-le. Allons donc ici, sélectionnons « Important », enregistrons-le , puis revenons dans Chrome et actualisons-le. Revenons maintenant à Burywood parce qu'il porte l'identifiant de M. Jones, et c' est de là que cela vient Et il contient également ce mot clé important. Et il remplacera ce mot clé important dans la classe majuscule Les choses peuvent donc devenir vraiment compliquées ici. Je ne suggère pas d'utiliser le mot clé important, mais cela peut être utile lorsque vous travaillez avec le code d'autres personnes, ou que vous travaillez avec le CSS d'une autre équipe d' un autre service, en particulier s' ils utilisent des mots clés importants. Maintenant, il existe de nombreuses autres façons d'écrire des déclarations sélectives, et elles peuvent devenir complexes et confuses. Mais si vous maintenez votre site Web simple et bien structuré, vous ne devriez pas avoir à vous lancer dans des choses complexes. Dans la leçon suivante, j' aborderai les conflits CSS déclarations qui sont préférées et pourquoi. Cela évitera tant de maux de tête, je vous le promets. 16. Théorie des conflits CSS: Par défaut, un navigateur applique tous les styles qui ciblent un élément parmi les différents ensembles de règles avec des instructions sélectionnées et des styles intégrés différents Mais que se passe-t-il lorsque plusieurs styles contradictoires sont appliqués à un élément , comme la couleur bleue de cet ensemble de règles, couleur rouge de cet ensemble de règles et la couleur vert jaune d'un style intégré ? Le navigateur sait-il de quelle couleur doit figurer le texte de cet élément ? CSS est l'abréviation de Cascading Style Sheet. L'idée de la mise en cascade est de déterminer quels styles sont appliqués à un élément en cas de conflit entre les déclarations mise en cascade fait référence à la manière dont les ensembles de règles CSS descendent en cascade du haut vers le bas d'une page et à la manière dont ils interagissent les uns avec les autres pour créer le style final d'un élément Alors, comment le navigateur décide-t-il du style à appliquer ? Le navigateur recherche trois éléments. En général, le premier est de savoir quel style a été écrit en dernier. La dernière est généralement celle qui est appliquée. Deuxièmement, plus une déclaration est précise, plus le navigateur a de chances de la choisir plutôt que d'autres déclarations. Une déclaration au sein d'un ensemble de règles appliqué à tous les éléments d'ancrage n'est pas aussi spécifique qu'une sélectionnant toutes les ancres à l'intérieur des éléments de liste l'intérieur des listes non ordonnées à l'intérieur des éléments NIV Et cela n'est pas aussi spécifique qu' une déclaration au sein d'un ensemble de règles, appliquée à tous les éléments dotés d'un identifiant de lien spécial. Et le style intégré est encore plus spécifique. Les styles intégrés sont les plus spécifiques. Les sélecteurs d'identification sont les suivants les plus spécifiques. Les sélecteurs de classe sont les suivants les plus spécifiques, et les sélecteurs d'éléments sont les moins Bien entendu, des instructions de sélection contradictoires peuvent inclure tous ces éléments Je vous conseille donc de garder les choses simples et, lorsque quelque chose ne fonctionne pas comme prévu, regarder dans quelle mesure vos instructions de sélection sont spécifiques Troisièmement, le mot clé important peut être ajouté à une déclaration CSS pour lui donner la plus haute priorité, remplaçant toutes les autres déclarations, quel que soit le degré de précision de l'instruction de sélection ou l'ordre des Et s'il existe plusieurs déclarations contradictoires avec le mot clé important, le navigateur revient à l'ordre et au degré de précision de la déclaration. D'accord, il est important de savoir tout cela, car lorsque vos éléments ne ressemblent pas à ce que vous les avez codés pour qu'ils apparaissent, c'est souvent le premier point de départ. C'est encore plus important si vous utilisez quelqu'un d'autre, qu'il s'agisse du code d'un membre de l'équipe ou d'un modèle de code que vous êtes en train de modifier. Dans la leçon suivante, je vais passer en revue déplacement de votre code CSS vers un fichier séparé, ce qui facilite la lecture et l'écriture, avec quelques avantages supplémentaires. 17. 16 fichiers CSS distincts: Même si le HTML et le CSS aiment et fonctionnent très bien ensemble, il existe de bonnes raisons de les séparer dans leurs propres fichiers. La première raison est que cela rend tout plus net et plus facile à lire et à écrire Tu en bénéficies. Vous n'avez pas besoin de faire défiler la page vers le haut ou vers le bas lorsque vous passez de l'écriture HTML à l'écriture CSS. Vous pouvez même cracher votre éditeur de code pour afficher le fichier CSS dans une fenêtre et le code HTML dans une autre La deuxième raison est que si vous souhaitez que plusieurs pages Web aient la même apparence, vous ne voulez pas avoir à copier-coller le CSS d'un fichier à Surtout pas à chaque fois que vous faites un petit changement. Cela prend du temps et est source d'erreurs. fait d'avoir votre CSS dans des fichiers séparés permet à plusieurs fichiers HTML d'utiliser le même CSS. Maintenant, comment faisons-nous réellement cela ? La première étape consiste à créer un fichier CSS. Enregistrez-le avec une extension de fichier CSS à points. Vous pouvez le laisser dans le dossier principal ou le placer dans un dossier. J'aime placer mes fichiers CSS dans un dossier nommé CSS. deuxième étape consiste soit à déplacer votre CSS depuis votre fichier HTML, soit à écrire votre CSS dans ce nouveau fichier CSS. La troisième étape consiste à indiquer à votre fichier HTML que vous souhaitez réellement utiliser ce fichier CSS pour styliser votre page Web. Pour ce faire, nous ajoutons une ligne comme celle-ci, encre avec l'attribut roll de la feuille de style et un attribut HRF indiquant où se trouve le fichier CSS Et bien que nous puissions l' ajouter n'importe où, le meilleur endroit pour le placer est dans l'élément principal de votre page Web. Cela signifie que le navigateur sait comment afficher votre page Web avant de traiter ce qu'elle doit afficher. Il s'agit d'un véritable élément de lien, pas d'un élément d'ancrage. L'attribut role indique au navigateur qu'il s' agit d'une feuille de style, et l'attribut HF, comme pour l'élément d'ancrage, indique au navigateur où trouver le fichier CSS. Si vous avez besoin d'un rappel sur la façon d'écrire les chemins d'accès aux fichiers, regardez la leçon sur la dénomination, les dossiers et les chemins de fichiers Et n'oubliez pas que les affaires sont importantes en ligne et que l'orthographe et les fautes de frappe sont les principales causes de bogues et d'erreurs Soyons pratiques à ce sujet. Allons-nous ? Les choses s' annoncent donc intéressantes. Je ne coderais pas nécessairement un site Web comme celui-ci, mais j'espère que vous comprenez ce qui est possible, comment les choses fonctionnent, en particulier en utilisant toutes ces couleurs, couleurs d' arrière-plan, etc. Oh, je voudrais nettoyer un peu les choses. Je vais arrêter d'utiliser les mots clés importants car cela rend les choses confuses et irritantes Et oui. Nous pouvons garder cela là juste pour le mettre en valeur. OK. Mais maintenant, tu sais, tu as vu ce que je faisais. J'ai mon code HTML ici. J'ai mes styles ici. Je dois continuer à passer de l' un à l'autre. Et oui, il existe des moyens d'ouvrir le même fichier dans deux onglets différents ou d'avoir un écran partagé, des trucs comme ça. Mais il existe un moyen plus simple. Alors allons-y et créons un nouveau fichier, appelons-le style point css. Nous y voilà. Je devrais avoir ce petit hachage bleu comme icône, d'accord ? Et ici. Allons couper. Toutes ces déclarations et mettez-les dans ce fichier ici. OK, et gardez-le. Ensuite, nous allons enregistrer celui-ci, définir les styles, revenir dans Chrome et l'actualiser, et tout sera terminé. Pourquoi ? Parce que nous n'avons pas lié ce fichier HTML au fichier CSS. Alors, comment s'y prendre ? Eh bien, si vous êtes du genre, oh, je ne sais pas, il suffit de le rechercher sur Google. Alors, comment lier un fichier HTML à un fichier CSS. Lier des fichiers CS au HTML est le didacticiel ultime pour vous. Qu'en est-il de W Three Schools, HML ? C'est bon. Essayons ça. Qu'est-ce que le CSS ? Tap, ta, ta, CSS interne. Nous avons déjà abordé ce CSS externe. Allons-y. Lien : URL, feuille de style, styles href, OK. Je vais donc le copier. Je vais revenir au code VS. Et au lieu d'un élément de style, je vais dire Rl stylesheet Cool dans cet élément de lien. Et nous avons inclus un lien vers une icône préférée. Maintenant, c'est quelque chose d'un peu différent. Il utilise le même élément, mais il est différent. Et parce que nous disons qu'il s'agit d'une feuille de style et du HF, où trouvons-nous ce CSS à points de style Als est appelé style dot CSS. Renommons-le donc style point CSS. Commande S. Revenons à Chrome. Rafraîchissez-vous, et nous reprendrons nos activités. Génial. Merci beaucoup, Google et W Three Schools, qui est généralement une très bonne ressource. Bon, maintenant, ce que je veux vous montrer , c'est qu'il est très facile de gérer votre code HTML ici. Demandez même à un membre de l'équipe de créer le code HTML, puis vos styles existeront dans une feuille de style séparée. Vous pouvez même avoir plusieurs feuilles de style. Mais ce que je veux vous montrer, c'est créer un nouveau fichier ici, et appelons-le ensemble de règles deux. Les styles de points pointent le code HTML. Et ici, nous allons écrire notre type Duc ou simplement taper Duck. Oh. Regarde ça. Donc, si vous l'avez, ce serait vraiment utile. Tu veux que j'en parle à nouveau ? Oui, tapez simplement Duck pour Duc ou document. Et si l' abréviation Emmet est installée, ce que je pense que vous devriez faire, vous suffit d'appuyer sur Retour, et cela crée tout un tas de choses pour vous Nous n'avons pas parlé de cet ensemble de méta-voitures. Nous n'avons pas abordé cette question de la fenêtre d'affichage. Donc, si vous le souhaitez, vous pouvez les retirer, et ils seront accompagnés d'un document de titre. Alors peut-être que vous pouvez simplement dire Règle ensemble deux. Ensuite, nous avons inséré notre Ink Linkage. Nous y voilà. Roulez déjà les feuilles de style, puis nous dirons style point css. Et à l'intérieur de notre corps, optons pour un H. Génial. Salut. Et je vais juste économiser. Vérifions que cela fonctionne. Et je vais le copier. Je vais le coller. Nous allons définir deux styles. C'est bon, ça marche. Vous pouvez donc voir à quel point c'est puissant. Cela signifie que je peux créer plusieurs fichiers HTML et n'avoir qu'un seul fichier CSS qui contrôle ensuite tous les styles de ces fichiers HTML. Cela signifie que si nous voulons passer du CSS à l'ensemble du site, nous pouvons simplement dire couleur d'arrière-plan. Optons pour un violet. Nous revenons à Chrome, actualisons, les modifications apportées à cette page, et cela change également sur cette page. Vraiment très cool. Et nous pouvons également en ajouter quelques autres ici. Alors allons-y pour l'âge de deux ans. Waouh, c'est ça, c'est cool. Et à trois ans, c'est important. Et n'oubliez pas que nous pouvons dire classe importante. Et enfin à quatre ans. Ceci est en majuscules. Et peut-être que pour les majuscules, nous pouvons les mettre dans un élément span OK, sauvegardons ça. Revenons maintenant au deuxième ensemble de règles. OK, c'est en majuscules. Cela a-t-il changé quelque chose ? Intéressant Allons y jeter un œil. Non, parce que nous n' y avons pas inscrit le cours. Euh, hein. Mettons donc une classe de Uppercase Nous y voilà. Il est très important de tester votre code avant de l'expédier. Nous y voilà. Ceci est en majuscules OK, enfin, nous devons réellement valider nos fichiers. Passons donc sur le bureau Github et avons fait un tas de set writing, validons dans le Maine, puis appuyons Origin Fantastique Maintenant, cela devrait être en ligne dans quelques secondes ou quelques minutes. Et maintenant, une autre chose que je veux vous montrer est d'ajouter un autre fichier CSS à un fichier HTML. Dans Visual Studio, il s'agit de l'ensemble de règles deux. Eh bien, ajoutons-en un autre. Alors liez les feuilles de style Roll, et c'est parti pour le style CSS rouge. OK, nous allons enregistrer cela, puis nous allons créer un nouveau style CSS à points rouges. Et tu as vu ce que j'ai fait ici ? J'ai dit Res. Donc c'est probablement très bien de copier-coller. Alors, coiffez le rouge. Je vais le copier. Ensuite, je vais simplement appuyer deux fois dessus ou appuyer sur Retour. Nous y voilà. Style rouge. Vous devez copier et coller de manière à ce que même si vous avez le mauvais nom ou que vous l'avez mal orthographié, il soit identique ici et là Si vous commencez à taper plusieurs fois, cela entraîne davantage d'erreurs. OK, alors coiffe le rouge. Ce que je veux faire, c'est dire corps. Faisons en sorte que la couleur de fond soit rouge, sinon ça va vraiment nous faire mal aux yeux. Que diriez-vous d'un saumon ? Le saumon doit être bon. OK, Command S. Revenons à Chrome. La règle est deux. OK, règles établies. Styles. Il ne l'a pas car il n'inclut pas ce nouveau fichier CSS. OK. Cela devient donc plutôt cool et signifie que pour des pages particulières, vous pouvez inclure différents styles. Nous avons donc les styles généraux, puis nous avons le style Red Dot CSS. Mais maintenant, dans le style CSS, si en haut, nous insérons un sélecteur de corps puis que nous changeons la couleur de fond en jaune-vert, que se passera-t-il ici ? Tu connais probablement la réponse. Alors économisons. Passons à Chrome et à Refresh. Règle : définissez deux styles, ayez la couleur saumon. Styles définis par des règles, ils doivent avoir la couleur verte. OK. Mais si nous définissons deux styles par règle et changeons l'ordre des feuilles de style, que va-t-il se passer ? OK, les styles définis par des règles, cela reste le même car il n'inclut qu' une seule feuille de style. Règle numéro deux, c'est vert. Et pourquoi est-ce le cas ? Allons voir le corps. C'est parce que le style rouge est le premier, style CSS vient en second. Donc, il est écrit que le vert jaune est arrivé en dernier, donc je vais m'en servir. Il y a un conflit. Je vais utiliser celui qui a été écrit en dernier. Et maintenant, allons-y et engageons tout cela. Ajoutez une nouvelle feuille de style. Oui, c'est génial. OK, va dans le Maine. Appuyez sur l'origine. Nous y voilà. Vous pouvez désormais créer autant de fichiers HTML que vous le souhaitez en utilisant tous les mêmes styles. C'est puissant. Et vous pouvez ajouter plusieurs fichiers CSS à une page HTML. Parfois, une page nécessite des styles supplémentaires ou vous devez créer un lien vers une feuille de style qui existe en ligne. Lorsque vous liez plusieurs fichiers CSS à votre fichier HTML, l'ordre dans lequel vous les écrivez sera important en cas de conflit de style. Maintenant, vous en savez beaucoup sur le CSS et le HTML et sur la façon dont ils se combinent pour créer de superbes sites Web. C'est l'heure de danser. Oh, whoo. D'accord, dans le reste du cours, nous allons créer un vrai site Web, un site qui a l'air cool et qui sens lorsque vous le partagez avec le monde entier. 18. 17 commentaires: Avant de créer un site Web, je veux vous montrer comment écrire du code que le navigateur ignore Cela signifie que vous pouvez vous laisser des notes ou des commentaires et masquer un tas de code que vous ne voulez pas que le navigateur lise. Cette fonctionnalité est disponible dans tous les langages de codage, mais son apparence est différente dans chacun d'entre eux. Donc, en HTML, vous écrivez un commentaire comme celui-ci. Il s'agit d'un symbole inférieur, d'un point d'exclamation, deux tirets, du commentaire, suivi de deux tirets et d'un symbole supérieur Pour activer ou désactiver un commentaire sur une ligne entière dans le code VS, appuyez sur la touche Commande barre oblique sur Mac et sur Contrôle barre oblique Je préfère également laisser un espace avant et après le commentaire afin qu'il soit plus facile à lire. Maintenant, en CSS, vous créez un commentaire comme celui-ci. s'agit d'une barre oblique et d'un astérisque, le commentaire suivi un autre astérisque et d'une Encore une fois, pour activer ou désactiver un commentaire pour une ligne entière dans VS Code, appuyez sur pour une ligne entière dans VS Code, Commande barre oblique sur Mac et sur Contrôle barre oblique OK, maintenant que vous avez compris les commentaires, passons à la création de notre site Web. 19. 18 Créons un site Web: Au cours des prochaines leçons, je vais coder un site Web pour mon personnage de dessin animé préféré, Reckitt Ralph. Je veux que vous fassiez de même et que vous suiviez, sauf avec votre personnage fictif, peut-être tiré d'un film, d'un dessin animé, d'une série, d'une bande dessinée ou d'un livre. Vous pouvez même en créer un vous-même. Commencez donc par choisir un personnage pour lequel coder un site Web. Au fur et à mesure que nous créons le site Web, hésitez pas à dévier, jouer, à expérimenter et à essayer des choses quand vous le souhaitez. Je veux que tu t'appropries ce site. Et lorsque vous commettez des erreurs puis que vous les corrigez, vous acquérez une expérience précieuse. Alors allons-y. Et dans la leçon suivante, je vais vous montrer comment planifier le code de votre site Web. Oui, ça a l'air ennuyeux, mais ça va t'aider à devenir un ninja du codage. 20. 19 Planification de votre site Web: Je sais que vous ne voulez pas entendre cela, mais la planification permet de coder sites Web beaucoup plus facilement et plus rapidement. Même avec un simple site Web, la planification est très utile. Pour moi, planifier, c'est comme regarder un labyrinthe d'en haut et dessiner une racine C'est une carte, et coder, c'est comme courir dans ce labyrinthe en suivant la carte C'est possible sans carte, mais c'est beaucoup plus facile avec une carte. Sérieusement, sans plan, nous pourrions coder inutilement pendant des jours, ce n'est pas ce que nous voulons Donc, si ce n'est pas déjà fait, choisissez un personnage pour lequel créer un site Web simple. Je vais créer un site web pour Record Rolf. Quel que soit le site Web que je crée et que je m'occupe uniquement de la conception ou que je m'occupe à la fois de la conception et de la mise en page, j'esquisse quelques options de ce à quoi un site Web pourrait ressembler Je le fais rapidement et je laisse de côté les détails. Les tableaux blancs, les journaux et les blocs-notes sont parfaits pour cela. Ensuite, en me basant sur les croquis que j'ai faits plus tôt, je crée ce que j'appelle un cadre filaire. C'est là que je dessine les éléments HTML sous forme de boîtes, leur donne des noms et que j'indique quelles cases se trouvent à l'intérieur des autres cases. Je n'essaie pas de tout planifier en une seule fois, et je dessine souvent une flèche dans une case et je remplis les détails plus tard, sur une partie séparée de la page ou même sur une nouvelle page. Encore une fois, les tableaux blancs, le papier et les journaux sont parfaits pour cela Vous pouvez utiliser une application sur votre ordinateur ou votre iPad si vous le souhaitez. Tout ce dont vous avez besoin, ce sont des champs de texte, des rectangles et des cercles. La création numérique de votre box wireframe vous permettra d'adapter votre planification au fur et à mesure, ce qui est utile lorsque vous êtes débutant, mais ne vous laissez pas distraire par les détails à ce stade Nous avons besoin d'une carte approximative, pas d'un design parfait au pixel près. Nous allons en fait concevoir notre site Web dans le navigateur pendant que nous codons dans ce cours. Nous choisirons les couleurs, les polices, les tailles, etc., pendant le codage OK, laissez-moi vous expliquer la planification filaire de ma boîte. OK, commençons à planifier. Je vais utiliser des marqueurs ici. J'en ai une rouge. J'en ai une noire. Ce que vous utilisez n'a pas vraiment d'importance. Mais commencez par une sorte de planification générale du site Web. Vous allez avoir un en-tête, la partie principale, puis le pied de page Laisse-moi le faire comme ça. En-tête. Qui est debout. Principal. Et puis tout cela se trouvera à l'intérieur de l'élément principal du corps. D'accord ? OK, maintenant, à l'intérieur de chacun d'eux, qu'est-ce qui va se passer ? Donc en-tête. Faisons d'abord celui-ci. Optons pour un en-tête. Et je veux, par exemple, un avatar ou une photo de profil de Rece Ralph Et puis je veux un H. Son nom sera là. OK. Donc, ce que nous pouvons faire ici, c'est que vous savez, d'une manière générale, celui-ci entre dans des détails plus spécifiques ici. Il peut donc s'agir d'un div avec une image d'arrière-plan, ou d'une image. Je vais aborder ces deux options. Ce sera un H avec son nom. Photo de profil. OK. Il se peut que je doive le secouer un peu. Ensuite, la section principale pourrait être, peut-être, un H deux. Ça parle de Ralph. Ensuite, nous avons, genre, un paragraphe à son sujet. Ensuite, nous pouvons mettre une image peut-être avec lui et ses amis ou peut-être une belle image par lui-même. Alors nous avons encore deux H ici. Peut-être que cela peut être ses caractéristiques, puis quelques éléments, vous savez, comme des caractéristiques. Ensuite, à deux ans, avec ses amis. Également une liste. OK, et tout cela entre dans l'élément principal. OK, nous avons donc H deux à propos de Cela peut être un paragraphe sur une image. Salut deux, le personnage meurt. Waouh, quel long mot. Il peut s'agir d'une liste ordonnée ou non ordonnée. Je vais opter pour une liste ordonnée juste parce qu'elle est différente d'une liste non ordonnée, et il y aura des éléments de liste dedans et H deux, des amis Et il peut s'agir d'une liste ordonnée contenant des éléments I ou des éléments de liste, ainsi que des ancres pour que nous puissions créer des liens vers eux. OK. Vient ensuite le pied de page. Je pense donc que cela doit être particulièrement difficile ou complexe. Oh, mettons-y comme une balise de paragraphe. Ainsi, l'élément de pied de page , puis cela peut être simplement P plus des balises d'ancrage ou des éléments d'ancrage OK, nous avons donc notre corps. Ensuite, nous avons un en-tête, pied de page principal à l'intérieur du corps. À l'intérieur de l'en-tête, il y aura une colombe ou une image sur H. Nous avons nos principaux éléments. Il y a pas mal de choses dans l'élément principal. Ensuite, nous avons le pied de page, et à l'intérieur du pied de page, il y a juste une balise P avec des A ou des éléments d'ancrage OK, c'est donc mon plan. Tu pourrais nettoyer ça. Vous pouvez le faire numériquement. Vous pouvez voir comment je suis passé des détails généraux aux détails spécifiques, et ce n'est pas un site très compliqué. Il n'y a pas beaucoup d'éléments à l'intérieur des éléments. La plupart des éléments à l'intérieur des éléments auxquels nous allons accéder se trouvent ici lorsqu'il y a un tas d'éléments d' ancrage à l'intérieur des éléments de liste à l'intérieur d'éléments de liste non ordonnés Mais il n'y aura qu'un seul élément de liste non ordonné. Si nous le voulions, nous pourrions séparer chacune de ces sections en une colombe ou un élément de section, mais ce n'est pas vraiment nécessaire L'autre chose que je voudrais peut-être ajouter est juste une petite légende ici, pour que nous puissions aller pleurer et simplement mettre ça là et le point P. Légende. Donc, un paragraphe avec une classe de légende, et il se peut que nous ajoutions des éléments au fur et à mesure, mais ce n'est que notre planification approximative. Nous savons ce que nous devons faire. C'est assez clair. 21. 20 Configurez votre site Web de base: Soyons ringards, configurons notre dépôt et écrivons le code HTML et CSS de base pour le site Web de notre personnage Vous pouvez vous référer aux éléments HTML courants PDF lors de l'écriture votre code HTML et aux propriétés CSS courantes au format PDF lors de l'écriture de votre CSS. Et je vais passer en revue tout le code au fur et à mesure que je l'écris. Mais si vous le souhaitez, vous pouvez demander de l'aide à Google ou à quelque chose comme Chat EPT. OK, je vais donc créer mon site Web. La première chose que je veux faire est d'ouvrir bureau Github et d'accéder au nouveau référentiel File New Je vais taper Ralph pour la description de Rect Ralph, sites Web de Reck E Ralph Le chemin se trouvera dans les téléchargements. Je ne veux pas me lire, me faire ignorer, non, licence, non. Allons donc créer ce dépôt. Maintenant, ce que je veux faire, c'est l' ouvrir dans le code VS, afin que nous puissions faire glisser ce dossier dans VSCode, ou nous pouvons aller dans le référentiel et l'afficher dans le Finder, puis le faire glisser à partir de là, ou nous pouvons aller référentiel puis l'ouvrir dans Visual Studio Code R. Plutôt cool, non ? Maintenant, la première chose que je veux faire est de créer un nouveau fichier, et je l'appellerai index point HTML. La raison pour laquelle j'opte pour un fichier HTML à points d'index est que si le navigateur accède à notre site Web et que nous n'avons pas spécifié le fichier HTML à charger, il recherche un fichier HTML à points d' index. Vous pouvez également nommer un point HTML par défaut, mais le code HTML par points d'index est assez standard. D'accord. Ensuite, je vais taper Doc ou doc type. Allons-y. HTML, puis je vais taper Doc, puis utiliser cette abréviation informatique pour obtenir tout ce genre de choses. Les balises HTML. J'ai ensuite reçu les étiquettes de tête, et j'ai aussi les étiquettes corporelles. Vous n'avez pas vraiment à vous inquiéter pour cette langue EN car vous ne parlez peut-être pas anglais, nous pourrions donc l' éliminer. Cela ne fait pas trop de différence. Ce kit de voitures UTF huit ne fait pas trop de différence pour le moment, mais je vais vous dire que cela pourrait être utile lorsque nous commencerons à faire des choses réactives plus tard dans le cours Pour le titre, je vais choisir Racket. Ralph. Ensuite, je vais mettre un lien, mais au lieu de feuilles de style, je vais opter pour une icône et le HRF Eh bien, je n'ai pas encore de fichiers ou de dossiers. Passons donc au Finder. Dans le dossier Ralph. Allons chercher un nouveau dossier. Appelons-le IMG. Si vous ne souhaitez pas les créer dans votre Finder, vous pouvez également les créer dans un code VS. Et je vais en créer un autre appelé CSS. Et ici, je vais dire le dossier actuel dans lequel nous nous trouvons, qui est le dossier racine principal, puis aller dans le dossier IMG. Je veux peut-être trouver le point d' icône Rolf en PNG. Je ne suis pas sûr. Il va falloir vérifier ça. Allons-y Trouve quelque chose. J'économise au fur et à mesure. Au fait, tu devrais aussi. C'est vraiment très utile au cas où vous appuieriez sur Fermer ou quelque chose comme ça et que vous n'avez pas enregistré. OK, dans Google Chrome, je vais chercher Reck it Rolf Passons aux images. Celui-ci est plutôt cool. Très bien, allons-y pour celui-ci Je vais cliquer avec le bouton droit de la souris, puis je pourrais l'utiliser tel quel. Je pourrais donc dire copier l'adresse du lien, mais je veux en fait que ce soit une icône préférée ou une icône dans la structure de mon fichier ou de mon dossier Allons donc copier l'adresse du lien ou copier l' adresse de l'image. Allons-y. Je veux le coller , puis la commande S, enregistrer pour télécharger. Fantastique Mettons-le ensuite dans le dossier d'images. OK, c'est un JPEG, puis je vais le renommer comme je l'appellerai, Rolf icon point Je vais donc simplement copier tout cela, revenir au code VS, puis le coller. OK, nous avons donc l'icône. Vérifions que cela fonctionne. Je vais enregistrer, aller dans Chrome, aller dans le Finder, en fait, puis double-cliquer sur le point d'index HTML. Et nous y voilà. C'est ici. Waouh. Là-bas. Fantastique Maintenant, la prochaine chose que nous devons faire est d' ajouter du CSS et de commencer à configurer notre site Web. Revenons donc au code VS. Mettons un autre lien ici. Il contient un rouleau de feuille de style puis HRF, le dossier en cours Regardez ensuite dans le dossier CSS. Recherchez ensuite style point CSS. Fantastique Sauvegardez ça. Allons dans le dossier CSS ici, et créons un nouveau fichier appelé style point CSS. Et là, ce que je veux faire, c'est prendre mon corps et vérifier qu' il fonctionne vraiment. Optons pour une couleur de fond chocolatée. Cool. Sauvegardez ça. Puis dans Chrome. Rafraîchissons-le. Fantastique La couleur chocolat transparaît. Cela signifie que le CSS fonctionne. Maintenant, de retour dans le fichier d'index, je vais accéder à mon corps car nous devons ajouter quelques éléments ici. Ensuite, je vais ajouter un commentaire. Je vais dire que c'est ici que je veux mon en-tête. C'est là que je veux mon élément principal, et c'est là que je veux mon élément de pied de page Cela nous aide à très bien configurer les choses. Je peux alors également écrire dans mon élément d'en-tête. Je vais y ajouter quelques espaces ou de nouvelles lignes. Je vais ensuite mettre mon élément principal ici. Je peux écrire. Et puis Puta Okay, donc ça a l'air plutôt bien Je vais commander S, enregistrer cela, puis aller sur le bureau Github, puis je vais dire Commit initial Et puis peut-être pour la description, je pourrais dire réglage, CSS, images et h2m up de base D'accord. Validez dans le référentiel principal , puis publiez le référentiel. OK, c'est ici qu'il est dit de garder ce code privé ou non, car c'est ici que nous le publions sur github.com Je vais le vérifier juste au cas où tu le vérifierais. Mais si possible, décochez cette case. Vous ne voulez pas que ce code soit privé, vous voulez qu'il soit public, car nous voulons transformer ce dépôt en une expérience de pages accessible à tous. OK, mais je vais vérifier ça au cas où vous le feriez et que vous voudriez savoir quoi faire. OK, publiez le référentiel. D'accord. Génial. Et maintenant quoi ? Nous passons maintenant à Google Chrome. Nous ouvrons un nouvel onglet, tapez gitab.com, puis vous verrez votre nom d'utilisateur couper en croix votre personnage de dessin animé, votre personnage de film, la personne pour laquelle vous avez décidé de créer un Alors tapotons dessus. Passons aux paramètres. Et voilà, passez aux pages. Et ici. Oh, mettez à jour ou rendez ce référentiel public pour activer les pages Donc, si vous avez coché, je veux garder mon code privé, vous avez deux choix maintenant. Vous pouvez soit effectuer une mise à niveau, ce qui signifie que vous devez payer, soit rendre ce dépôt public. Hmm. D'accord. Alors, comment pouvons-nous procéder si nous ne voulons pas payer ou si nous passons au général, en haut ici. Faites défiler la page jusqu'à Danger Zone, puis modifiez la visibilité du référentiel. Passons au public. Il y a pas mal de choses que vous devez franchir ou des obstacles à franchir ici Donc oui, c'est ce que je veux faire. D'accord. Je comprends Rendez ce dépôt public. D'accord. Une fois que vous avez fait cela, si vous avez rendu votre dépôt privé ou non, accédez aux pages. Et puis voilà, déployez depuis une succursale. C'est exactement ce que nous voulons. Ensuite, la branche que nous allons déployer est la branche principale. OK, sauvegardez. Maintenant, cela va prendre un peu de temps, peut-être une minute. Donc, de temps en temps , il suffit de rafraîchir. Je sais que vous voulez que les choses soient instantanées, mais soyez patient. OK, essayons de rafraîchir. Voyons ce qui se passe ici. D'accord, il est toujours en cours de construction à partir de la branche principale. Sabot. OK, rafraîchissons-nous. Mmm OK, donnons-lui encore quelques secondes. Laissez fraichir. OK, ça y est. Votre site est en ligne sur HTTPS, Colon forward slash forward, point github point IO slash forward, votre nom d'utilisateur point github point IO slash le nom du dépôt de votre personnage OK, je vais donc appuyer sur Visiter le site. Et nous y voilà. Tout devrait fonctionner. Tu as ta petite icône préférée. Le fond est également orange. Maintenant, à ce stade, vous pouvez commencer à voir si les choses fonctionnent ou non. Si votre couleur d'arrière-plan n'est pas celle que vous avez spécifiée, vous avez un problème de CSS. Si vous ne voyez pas votre icône préférée, il se peut que vous ayez un problème de chemin de fichier ou de distinction entre majuscules et minuscules Maintenant, il se peut que certaines choses commencent à se produire ici. Passons donc au code VS. Passons au style. Changeons cette couleur d'arrière-plan en marron, ou optons pour le vert ou le jaune vert. C'est très différent du chocolat. Enregistrer. Et maintenant, je vais revenir sur le bureau Github Mettez à jour le style en CSS. Génial. Validez sur Main, Push Origin. Bien, revenons à Chrome. Ensuite, dans Github, dans votre dépôt, passons au code Passons au CSS. Passons au style CSS. OK, donc ça a été mis à jour. Il est jaune vert. Maintenant, si vous arrivez sur votre page et que vous l'actualisez et qu'elle n' est pas jaune vert, hmm, cela pourrait être un certain nombre de choses La première chose est que l'actualisation peut prendre un certain temps . Cela ne devrait pas prendre si longtemps. Cela ne devrait pas prendre plus d'une minute. Donc, ce que vous devrez peut-être faire, c'est cliquer avec le bouton droit de la souris , puis appuyer sur inspecter. Vous pouvez également appuyer sur la commande Alt I ou sur l'option de commande I. Une fois que vous avez activé votre élément et votre spectre, vous pouvez les actualiser Cela peut aider, car ce qui s'est peut-être passé, c'est que votre navigateur peut-être mis en cache votre fichier CSS, sorte qu'il ne pense pas qu' il y ait de nouvelles modifications Il s'agit donc simplement de charger une ancienne version de votre fichier CSS. Rafraîchissons-le donc une fois de plus. Nan. Ensuite, ce que nous allons faire est d'entrer dans le type de tête en appuyant sur le style à points CSS, et de cliquer avec le bouton droit de la souris pour ouvrir un nouvel onglet. Donc ça dit toujours chocolat. Rafraîchissons-le donc. Oh, vert, jaune. Intéressant Donc, si nous revenons ici et que nous actualisons , euh, cela ne fonctionne toujours pas. Il se peut donc que nous devions appuyer deux fois ici, mettre un point d'interrogation, taper V égal à un ou un autre chiffre si vous avez déjà utilisé V égal à un , puis appuyer sur Retour. Allons-y. Maintenant, c'est exactement ce qu'il fait. Il met en cache votre fichier CSS. Donc, si vous voulez vraiment que votre CSS soit mis à jour, et ce n'est pas le cas, lorsque vous codez dans votre fichier HTML, vous devrez peut-être mettre un point d' interrogation et V est égal à un autre nombre après celui-ci. Et cela signifie qu' il obtiendra toujours la dernière version du fichier. Alors, sauvegardons ça. Passons au style, et changeons cela également. Optons pour un bâton vert ou gris ou doré. Allons chercher Goldenrod Sauvegardez ceci. Passons à Get up Desktop et nous pouvons taper pour tester la mise en cache ou la mise en cache du navigateur Et puis appuyez sur Origin. Cool. Revenons-en à ce qui n'est pas celui-ci. Pas celui-ci, celui-ci. Rafraîchissons-le donc ici. Donc, le CSS dit Goldenrod. Allons enregistrer Rolf. Rafraîchissons-le ici. D'accord. Donc, cela indique toujours le style point CSS. Et je suppose que ce qui se passe, c'est qu'il met en cache le fichier d'index Soyez ici, eh bien, il est toujours écrit style point CSS. Il n'y a pas de V égal. Passons donc à notre code ici, passons à l'index HTML à points. Et ça dit que V est égal à deux, non ? Ouais Donc, actualisez à nouveau ici. Si cela se produit toujours, OK, c'est mis à jour. Mais si cela se produisait toujours, nous pourrions taper le point d'index HTML et le point interrogation V est égal à deux. Et puis cela devrait donner lieu à votre dernière page HTML à points d'index. D'accord, il y avait donc beaucoup de choses supplémentaires à propos de la mise en cache, et parfois c'est vraiment frustrant vouloir simplement tester si quelque chose fonctionne en ligne, et ce n'est pas le cas, et cela devrait être C'est probablement pourquoi. Il. Maintenant que vous avez écrit la structure de base de votre site Web, nous pouvons commencer à coder les sections du site Web. Pour chaque section, j' écrirai d'abord le code HTML puis le CSS, puis je ferai des allers-retours entre le HTML et le CSS jusqu'à ce que tout soit parfait avant de passer à la section suivante. Et bien sûr, je vais me référer à la structure filaire de ma boîte au fur et à mesure. Dans les prochaines leçons, nous allons écrire le code de l'en-tête, la section principale et du pied de page de notre site Web Au fur et à mesure, nous mettrons à jour le code qui concerne également toutes les parties du site Web. Passons donc à la leçon suivante, où nous allons écrire le code de notre élément d'en-tête. 22. 21 L'en-tête des sites Web: Bien, écrivons le code HTML et CSS pour l'en-tête de notre site Web. C'est un en-tête assez simple, et nous avons déjà mis en place nos balises d' en-tête. Il y a des robots compliqués, bien sûr, mais il n'y a rien que nous ne puissions gérer, surtout avec Internet à portée de main. OK, faisons le code HTML et CSS pour notre élément d'en-tête et les éléments qu'il contient. Donc, dans le code de Visual Studio, passons à l' en-tête et je vais écrire IMG pour l'image, lui donnant une source de barre oblique Alors regardez dans ce dossier et allez dans le dossier des images, puis nous opterons pour Rolf icon point JPEG Mais nous avons probablement besoin d'autre chose. Je ne veux pas que l'icône soit identique à cette photo de profil. Et puis, si quelqu' un est malvoyant, le navigateur aime fournir une description de l' image simplement parce que s'il ne peut pas la voir, il peut en quelque sorte comprendre en la lisant ou en l' écoutant. OK, donc on peut dire, Ralph ou racketter la photo de profil de Ralph Remplaçons cela par une sorte d'apostrophe normale. Racket Rolf . Figurine. Allons-y. Si vous voulez mettre une double citation ici, vous allez vous plaindre. Il existe donc des méthodes spéciales pour faire des guillemets doubles lorsque vous essayez de les placer dans un attribut Si nous faisons un rapide Google pour cela, cherchons des guillemets doubles en HTML, comment coder des guillemets doubles via HTML. OK, code convivial, code numérique hexadécimal. Essayez donc de citer comme ça pour le copier. Mets-le là-dedans. OK, la photo de profil de Rick Ralph. OK. Passons ensuite à Google Chrome. Actualisons cette page. Vous verrez que si nous inspectons cela apparaît entre guillemets. Plutôt cool. C'est bon. Et si vous aviez des citations simples ici, comment feriez-vous une seule citation ? Bonne question Faisons donc A, entre guillemets simples dans H TO. Allons-y. Essayons celui-ci. Alors copiez-le et mettez-le là-dedans. Donc commande S. D'accord, enregistrez la photo de profil de Rolfe Cool. Bien, revenons au code de Visual Studio. Et là, j'ai envie de mettre un H et de dire « détruisez-le ». Ralph. OK, sauvegardons ça. Passons à notre navigateur et actualisons. Fantastique Maintenant, je veux que ce soit au milieu, s'il te plaît. Passons donc à VSC. Passons au style Dot CSS. Ensuite, nous passerons à l'en-tête. Nous dirons ensuite le texte Aline center Oui, enregistrez cela puis actualisez Parfait. Maintenant, je veux lui donner une couleur de fond. Revenons donc au code VS. Couleur de fond Je veux une sorte de bleu, mais pas juste un bleu normal, alors je vais opter pour le RGB. Je vais appuyer sur Entrée en rouge. Il s'agit d'une valeur comprise entre 0 et 255. Mais pour l'instant, je vais juste choisir zéro, taper zéro, puis je vais appuyer dessus et le code VS l'affichera. Ensuite, je vais sélectionner un joli bleu. Ça a l'air bien. OK. Commande S. Passons non pas au code VS, mais à Chrome. OK. Ça a l'air bien. Mais il y a une étrange bordure autour de lui. Donc, c'est code HTML, soit sur le corps. Donc, ce que nous pouvons faire, c'est dans le code VS, mettons cela sous forme de corps de virgule HTML Nous allons définir la marge, qui met à zéro les marges supérieure, droite, inférieure et gauche. Nous allons également définir le rembourrage à zéro pour le HTML et le corps. Donc, Command S, revenons à Chrome. Allons-y. C'est parti. Certains navigateurs l' ont donc sur le HTML, autres sur Buddy, mais il y a normalement une sorte de marge ou de remplissage sur le HTML ou sur Buddy, et je le supprime toujours OK, maintenant je veux faire en sorte que ce gars soit circulaire et peut-être mettre un peu d'espacement en haut et en bas Revenons donc au code VS. En-tête, allons-y pour un peu de rembourrage. Et au lieu de rembourrer le haut, le rembourrage à gauche, le rembourrage en bas, le motif à droite, des trucs comme ça. Je vais juste acheter du rembourrage. Et là, je vais opter pour 20 pixels, et ça fait le rembourrage pour tout OK, ça a l'air bien, puis je veux que l'image soit ronde. Mais c'est aussi la même image que celle que nous utilisons pour notre petite icône en haut. Jetons donc un coup d'œil à Record Ralph Images. Je veux la case départ, mais je veux aussi vous montrer ce qu'il faut faire si vous ne trouvez pas de case. Donc celui-ci est plutôt cool. Ce n'est certainement pas carré. Donc, ce que je vais faire, c'est cliquer avec le bouton droit sur Enregistrer l'image sous. C'est une image WebP, deux, 241. Je ne suis pas le plus grand fan des images WebP. Je veux dire, je sais qu'ils sont un peu plus rapides. La taille des fichiers est plus petite, ils sont compressés. Tout cela est incroyable, mais pas si facile à modifier. Donc, ce que je ferais normalement c'est simplement ouvrir Photoshop, redimensionner, le recadrer, le créer comme je le souhaite, puis l'enregistrer à nouveau Mais si vous n'avez pas Photoshop, comment faites-vous ? Allons donc chercher un redimensionneur d'image. Redimensionnez plusieurs images à la fois. Redimensionneur d'image, redimensionneur d'image simple. Je ne sais pas lequel est le meilleur, mais essayons peut-être ce simple redimensionneur d'image OK, acceptez les cookies, sélectionnez les images. Ou peut-être pouvons-nous réellement rechercher image resizor et Choisissez redimensionner. Essayons ça. OK, allons-y pour un WebP. OK, vous voyez, il n' aime pas les images WebP Revenons ici et cherchons Web P. Resizero d'image simple, sélectionnez une image, Web P. OK, c'est génial Eh bien, on dirait que ça va être génial. Allons-y pour quelque chose comme ça. 500 par 500. OK, peut-être un peu plus grand. OK, prenons soin de 600 par 600. OK. C'est génial. Waoup. OK, recadrez l'image. OK, et télécharge. Merci, papa. OK. C'était donc une façon rapide et sale de le faire. Maintenant, je peux le mettre dans Ralph Image. Et on peut l'appeler photo de profil de Ralph PFP. Je vais donc copier tout ça. Ensuite, entrons dans le code VS, et insérons-le. Commande S. Bien, revenons à Chrome. Fermons ça. Je peux fermer ça. Rafraîchir OK, donc c'est un peu gros maintenant. Mais voyons maintenant comment nous pouvons changer cela. Je vais donc opter pour une largeur de, disons, 400 pixels. Oui, peut-être que je vais appuyer sur Shift et vers le bas. 300, c'est peut-être cool. J'aimerais quand même ajouter une bordure. Optons donc pour une hauteur de 300 pixels deux. Et puis je vais dire frontière. Et la bordure est un raccourci pour la largeur, le style et la couleur de la bordure. Alors voilà, je vais opter pour 20 pixels, solides, ce qui est le style, puis pour la couleur, je vais opter pour FF zéro, qui est comme un jaune. Mais nous pouvons à nouveau changer cela dans le code VS. Ensuite, je vais opter pour un rayon frontalier de 50 %. OK, donc ça a l'air plutôt bien. Je veux changer de couleur. Je vais donc copier tout cela, passer au code VS, puis à l'en-tête, je suis G. Donc, cela signifie toutes les images à l'intérieur de tous les éléments d'en-tête, ou voici les propriétés que vous devriez avoir. OK, ça, allons prendre une orange ou quelque chose comme ça. Eh bien, ça a l'air plutôt bien. Commande S. Revenons à Chrome et actualisons. OK, ça a l'air plutôt cool. Maintenant, Greek E. Rolf. Je souhaite modifier la police. Il existe plusieurs façons de le faire, mais la plus amusante est d' utiliser Google Funt. Des polices gratuites, des polices géniales gratuites. Donc Google Fonts. Allons-y. OK, je veux une police en pixels. Il y a plusieurs façons de le faire. Vous pouvez filtrer, sentir l'apparence. Oh, il y en a tellement. Donc, ce que je veux faire, c'est simplement rechercher Pixel. D'accord. Quelque chose d'exceptionnel ? Waouh, c'est dingue. Quelque chose d'assez audacieux. Peut-être celui-là. Scans Pixel Phi. Peut-être celui-ci, Josie 15 ans, Josie 20 ans. Nous optons pour Josie 20 ans. OK. Ensuite, vous dites « get font ». Cela peut changer ou l'interface utilisateur peut changer de temps en temps, puis recevoir du code intégré D'accord, il y a plusieurs façons de le faire. Mais ce que j'aime faire, c'est utiliser la déclaration d'importation. Je vais donc simplement le copier et passer au code Visual Studio. En haut de mon fichier de style, je vais le coller, mais je ne veux pas les balises de style. Je veux juste cette déclaration d'importation. OK, super. Ensuite, je vais copier ce code de copie, même si je n'ai pas besoin du Jozy 20 normal Donc, ce que je vais faire, c'est coller ceci et simplement le couper , le supprimer. Et puis l'en-tête H un. En gros, je sélectionne tous les H dans tous les en-têtes. Nous n'avons qu'un seul en-tête, et nous n'avons qu' un seul H ou un seul H pour le moment. Je vais le coller. OK, je vais économiser. Revenons à Chrome ici. Rafraîchir OK, c'est Ralph. Allons-y. Inspectons ça. Changeons la taille de police. Optons pour quelque chose de grand, de 50 pixels. Encore un peu petit. Je vais passer à la vitesse supérieure, à la hausse. 70 pixels, c'est plutôt bien. Mais je veux que l'espace entre les deux soit un peu réduit. OK, merci beaucoup. Vous pourrez peut-être lire ceci et dire : « Oui, c'est utile, mais j' essaie de faire des choses, alors ne le montrez pas. Va-t'en. OK, taille amusante, 70 pixels. La marge. Encore une fois, au lieu de choisir la marge en haut et la marge à droite, en bas et à gauche, je vais simplement utiliser le raccourci. Donc, marge. Je vais opter pour les dix premiers pixels. Cela le réduit donc un peu à gauche et à droite. Ce sera zéro, puis 20 pixels en bas. Ici, je n'ai pas forcément besoin de mettre la valeur de gauche zéro, mais je peux le faire si je le souhaite. Et puis peut-être pourrons-nous le faire de la même couleur que la bordure. Donc, copions-le. Apportez-le ici, collez-le , puis optez pour la couleur. Ce n'est pas la couleur du texte, ni la couleur de fond, c'est de la couleur. Ensuite, nous pouvons copier et coller cette valeur. Sauvegardons cela et actualisons-le, voyons à quoi cela ressemble. Ouais. C'est un peu difficile à lire. Alors changeons ça en blanc. Oui, le blanc est bien plus beau. Vous pouvez donc voir que nous concevons pendant que nous programmons. J'aime beaucoup ça. OK, optons pour le blanc. OK. Donc ça a l'air plutôt bien. Nous avons trié notre en-tête. Vous pouvez changer un tas de choses ici. Vous pouvez transformer l'arrière-plan bleu en image ou en image en mosaïque Vous pouvez faire des recherches à ce sujet si vous le souhaitez. Et passons au bureau Github. Et nous pouvons alors dire l'en-tête. OK, engagez-vous dans le Maine. Appuyez sur Origin. 23. 22 Quête latérale avec l'en-tête: Leçon, nous allons refactoriser une partie de notre code d'en-tête pour la photo de profil fonctionne en utilisant un élément DIV au lieu d'un élément image Les avantages de cette approche sont que vous pouvez gérer les images en CSS plutôt qu'en HTML, et que vous pouvez manipuler les images d' arrière-plan manière puissante avec le CSS Je vais également vous montrer comment créer une nouvelle branche avec Github, puis comment fusionner cette branche dans votre branche principale afin de pouvoir travailler sur quelque chose de nouveau sans affecter votre site Web actuel Cette leçon est une quête secondaire un peu plus complexe. Donc, si vous avez envie de le sauter, c'est très bien aussi. Il n'y aura que des différences mineures à l'avenir. Et si vous avez envie d'y revenir, une fois que vous aurez terminé le cours, vous deux. Maintenant, dans ma planification, j'ai dit que cela pouvait être un div ou une image. Pour le moment, nous l' avons sous forme d'image. Je veux donc vous montrer comment en faire un div. Mais ce que nous allons faire, c'est parce que c'est un peu plus complexe c'est créer une nouvelle branche avec laquelle travailler. Et nous allons créer une nouvelle branche parce que parfois nous allons changer de site, et elle peut tomber en panne. Et si nous voulons valider notre code, nous allons le faire , vous savez, du code qui ne fonctionne pas dans notre projet ou dans le dépôt central sur github.com Passons donc au bureau GitHub, et nous allons passer à une branche, une nouvelle branche Et nous allons appeler cela div PFP, create branch. OK. Nous n'avons pas besoin de publier la branche pour le moment car nous n'avons rien fait, mais vous pouvez passer de la branche actuelle ici, donc it main à Dv PFP Et je vais vous montrer à quoi cela sert dans un instant. Passons donc au code Visual Studio. Passons à l'index. Et maintenant, au lieu de cette image, nous allons faire div et lui donner une classe de PFP Et à l'intérieur, nous n'allons rien y mettre. OK. Alors, sauvegardons ça. Passons à Chrome et actualisons. Il n'y a plus d'image. OK. Mais dans le bureau Github, si nous changeons la branche en main, cela signifie : « Vous avez des modifications sur cette branche Qu'est-ce que tu aimerais en faire ? Laissez mes modifications sur DIV PFP. Vos travaux en cours seront cachés cette succursale pour que vous puissiez y revenir plus tard Donc, ce que nous aurions dû faire, c'est nous aurions dû réellement les engager. Passons donc au conseil, et nous allons simplement dire PFP est passé de l'image à la plongée en HTL Il s'agit donc de le valider , puis de changer de branche. OK. Maintenant, si nous actualisons, l'image est de retour et à l'intérieur de notre code, vous verrez qu'elle est maintenant revenue à l'image. Intéressant. De retour dans le bureau Github, changeons cela en Dv PFP et vous verrez que le code change à nouveau. Plutôt cool. Maintenant, dans le style dot CSS, nous avons une classe de PFP avec laquelle nous pouvons travailler Au lieu d'une image, nous optons pour le PFP à points et avec une bordure en hauteur, c'est un excellent rayon de bordure de 50 pixels Maintenant, nous avons juste besoin d'une image d' arrière-plan, que nous choisissons comme URL, et nous mettons ici des guillemets simples ou des guillemets doubles. Et maintenant, nous partons du fichier de style CSS. Nous sommes donc dans le dossier CSS. Donc, point slash point point slash, ce qui nous amène dans le dossier Ralf, puis IMG, puis nous allons opter pour Rolf PFP point web P. Ça a l'air bien, nous avons donc Maintenant, ce que je dois faire, c'est dire que la répétition en arrière-plan n'est pas une répétition et que la position d'arrière-plan est au centre et au centre, c'est une valeur XY. Vous pouvez également utiliser les pixels, puis la taille de l'arrière-plan, nous pouvons opter pour la couverture, et cela couvre toute la zone. OK, Command S. Bien, passons à Google Chrome. Rafraîchir OK, c'est super, mais maintenant c'est sur la gauche. centre Textaine ne s'y applique pas vraiment car ce n'est pas du texte Nous pouvons donc modifier sa marge. Marge jusqu'à zéro et automatique. Cela signifie que le haut et le bas sont nuls et que la gauche et la droite sont automatiques. Commande S et cela devrait le centrer. Nous y voilà. Maintenant, la raison pour laquelle je préfère cela c' est que cela signifie que nous pouvons changer notre image dans le CSS sans avoir à passer à HTO juste pour changer l' image et vérifier cela Je vais accéder à mon outil de recherche. N'oubliez pas que nous utilisons ce point 2241 que nous utilisons pour recadrer Eh bien, mettons cela dans les images de Rolf. Et nous l'appellerons simplement Rolf à la poire à la vanille. Je ne sais pas comment épeler poire à la vanille. OK, allons-y. Merci. OK, je vais tout copier. Et maintenant, au lieu de Rolf PFP, je vais faire Rolf avec Vanlop. OK. Et puis revenons à Chrome, actualisons. Et maintenant, nous avons un carré circulaire ou un carré circulaire qui utilise une image non carrée comme image de fond. Hmm. Plutôt cool, non ? Mais maintenant, il y a toujours ce petit vanlopi Qu'allons-nous faire pour elle ? Je n'ai rien à faire. Mais que se passerait-il si nous modifiions la taille de l' arrière-plan à 100 % ? Allons-y un peu. OK, donc 210 %. Copions-le et mettons-le ici. Les tailles d'arrière-plan couvrent donc 200 % ou 210 %. Et puis la position d'arrière-plan, changeons-la. Revenons à Chrome. OK. Oh, mec, je vais juste le retaper Position d'arrière-plan. Donc, la position, allons-y, peut-être 20 pixels. Optons pour une valeur négative. OK, -170, puis zéro pour votre valeur Y, ou peut-être allons-y Moins 170 à 40 pixels. OK. OK. D'accord, d'accord, d'accord. Donc ça a l'air plutôt bien. Et si nous revenons au bureau Github, nous pouvons dire maintenant utiliser des images ou des images PFP en CSS Fantastique. Et puis si nous allons à la succursale principale pour suivre un cours de perfectionnement, c'est légèrement différent, non ? C'est bon. Oh, celui-ci. OK, donc je vais opter pour celui-ci. Mais maintenant, comment réintégrer notre nouvelle succursale dans notre succursale principale ? Alors jetez un œil à ceci. Nous voulons d'abord publier la branche, donc cela la redirige vers Gitub en ligne, puis nous voulons créer une Nous allons donc prévisualiser la pull request. Et il ne devrait pas y avoir trop de choses qui se passent. En gros, il vous indique ce que vous avez supprimé et ce que vous avez ajouté. Ensuite, vous dites de créer la pull request. Cela ouvre github.com. OK. Div PFP. Alors peut-être que nous disons créer le PFP Div au lieu d'un élément IMG Vous pouvez ajouter une description plus descriptive , puis créer la pull request. OK, vérifier la possibilité de fusionner automatiquement. Cela devrait très bien fonctionner. Si vous avez fait des choses complexes puis que vous avez changé des choses dans votre branche principale, alors que vous travailliez dans la nouvelle succursale, les choses se compliquent. Mais ensuite, nous allons dire fusion, pull request, confirmation, fusion. La Pull Request a été fusionnée et fermée avec succès. Ensuite, je vais supprimer la branche. Nous n'avons plus besoin de cette succursale. OK. Maintenant, de retour sur Github desktop, je vais dire fetch origin Alors voilà, je peux retourner à la succursale principale, et nous avons toujours celle-ci. Ce que nous pouvons faire, c'est aller en branche puis supprimer. Oui, supprimer. Nous avons maintenant le menu principal et le rafraîchissement. Si nous inspectons cela, il devrait s'agir d'un div avec une classe PFP. OK, donc c'était beaucoup rien que pour notre entête. Si vous vouliez rester simple, vous pouvez simplement vous en tenir à l'image comme photo de profil. Mais utiliser des images d' arrière-plan est super, super puissant. Donc, si vous vouliez tester cela et créer une nouvelle branche et changer cet arrière-plan du bleu à une image ou en mosaïque d'images, par exemple, testez-le, ou vous pourriez simplement, vous savez, tout faire dans la branche principale si vous le souhaitez 24. 23 Conception avec CSS: OK, une courte pause dans l'écriture du code. Je veux parler de la conception d'un site Web tout en le codant. j'aime coder pendant la conception, surtout après la planification, c'est parce que nous pouvons voir à quoi cela ressemble et comment cela se sent. Souvent, un site Web est conçu dans une application de conception, mais il ne se traduit pas bien dans le navigateur possibilité de modifier le design en HTML et en CSS le rend souvent plus utilisable car vous visualisez et utilisez le site Web dans le navigateur et non dans une application de conception. Et le fait de pouvoir concevoir à l'aide du HTML et CSS accélère souvent le temps de conception et de développement combinés. Cependant, s'il y a des clients , des designs approuvés distinctions entre les concepteurs et les codeurs et que vous faites partie d'une équipe, il est un peu plus compliqué de changer les choses pendant le codage Mais ce n'est pas le cas ici. Nous devenons des concepteurs et des codeurs. Maintenant, ce qui est étonnant avec le CSS, c'est que vous pouvez donner un même ensemble de code HTML un aspect très différent. Essayez donc de faire en sorte que le site Web de votre personnage corresponde à sa personnalité. Maintenant, revenons au codage. 25. 24 Section principale des sites Web: Passons maintenant à la section principale, qui est assez standard, donc cela ne devrait pas prendre trop de temps, étant donné que la majeure partie de la structure et une partie du CSS sont déjà en place. Commençons par la section principale de notre site Web. Donc, dans le code VS, nous avons créé l'en-tête. Et si vous n'avez pas fait le blason latéral, vous pourriez vous demander : « Qu' est-ce que cette histoire de PFP de classe de plongée ? Eh bien, au lieu d'une image, nous utilisons un div avec une classe de PFP, puis nous donnons un style à ce div avec du CSS pour obtenir le même effet que si nous utilisions une image, et vous pouvez le voir là-bas OK, maintenant faisons un peu de réflexion à chaud à l'intérieur de notre élément principal Nous y voilà. Je vais faire référence à mon planning ici. Je vais donc opter pour un H deux, et il s' agira de Ralph et P, disons que Ralph est un jeu vidéo, un méchant qui veut sauver l'Arcade. Quelque chose comme ça, il rencontre des personnages sympas en cours de route. Et il devient un bon gars. OK, ça a l'air bien. Nous avons donc H deux, le paragraphe À propos. Mettons maintenant une image ici et choisissons le même dossier que celui dans et choisissons le même dossier lequel nous nous trouvons à l'intérieur des images. Et allons jeter un coup d'œil à l'intérieur. Google pour une image Ralph recit Ralph Images. Il s'agit donc d'une image à propos. Oui, j'aime bien ça. Cool, cool. Copions donc l'adresse de l'image. Ouvrons un nouvel onglet, collons-le là, puis Command S, pour l'enregistrer pour le télécharger. Mettons-le dans le dossier d'images. Je l'appellerai à propos de points JPEG ou Ralph à propos de points JPG. OK, revenons maintenant au code VS. Nous allons le mettre là-dedans. Là-bas. Et puis, on peut le dire à propos de Ralph. Peut-être que nous disons aussi qu'il aime aussi les filles cool et glitchy. Il aime aussi les amis. C'est en tant qu'ami de baseball ? Ouais. Se lier d'amitié avec des filles cool et glitchy. OK. Nous avons donc l'image. Maintenant, je veux une petite légende. Optons donc pour une balise P et une classe de légende. Si vous vouliez écrire cela assez rapidement avec ce truc appelé, passez à la légende par point p, qui ressemble à du CSS, puis appuyez sur Retour. Nous y voilà. Et la légende est Ralph et Vanlop Tapons Vanilla pear font Schwez. OK. C'est ainsi que vous épelez VanLapefon Je vais copier ça. Retournez au code VS. OK. Ensuite, c'est encore H deux. Caractéristiques des personnages de Ralph. Ça a l'air bien. Encore une fois, cela ne lui plaira peut-être pas. Certains navigateurs plus anciens peuvent se demander : qu'est-ce que c'est, et vous pouvez obtenir un petit carré traversé par une petite croix ou un caractère étrange. Nous pourrions donc simplement utiliser une seule citation, ou encore une fois, nous pourrions rechercher ce qu'est cette chose. Donc, une seule apostrophe HTML OK, essayons ça et OK, non. Allons-y. Les caractéristiques de Ralph. Je vais sauver ça. Revenons à Chrome et vérifions-le. OK, à propos de Ralph. Ralph est un jeu vidéo. Bla bla bla la Leach, les filles . OK, les caractéristiques de Ralph. Je veux que ce soit une sorte de courbe. Celui-ci. Oui OK. Collons-le là. Sauvegardez ça. Ouais. Ça a l'air bien mieux. OK. Il y a certaines choses qui me disent : « OK, il faut absolument les changer, mais nous allons y arriver ». Terminons d'abord le code HTML. OK. En ce qui concerne les caractéristiques de Ralph, j'ai dit que je voulais utiliser une liste ordonnée. Une OL est donc une liste ordonnée, et à l'intérieur d'une OL et d'une UL, qui est une liste non ordonnée, nous avons toujours des éléments de liste Donc, point de liste, il est fort. OK, mettons-le là-dedans. Il est fort. Et il est gentil. Lui, il est grand. Il aime les filles glitchy et ne prend pas de bêtises. D'accord. Voilà donc la liste ordonnée. Gardons-le. Et vous verrez ça si je rafraîchis. Il y en a un, deux, trois, quatre. Cela signifie que c'est une liste ordonnée. Cool. OK. La prochaine étape est un H deux, et ce seront Ralph Friends. Et puis voilà, nous allons opter pour une liste non ordonnée. Et dans la liste non ordonnée, nous allons choisir un élément de liste Et voilà, on va opter pour P fonchoez à la vanille. OK, on y Mais maintenant, nous voulons créer un lien vers une autre page ici. Faisons donc rapidement une recherche sur Google. C'est parti pour VanLapefon Schwez. Et vous pouvez choisir n'importe quel type de page qui donne un peu plus d' informations sur un personnage. Acceptons tout cela. OK, c'est bon. Je vais donc copier cette URL. Il y a tellement de publicités ici. Waouh. OK, Vanilla Pe Fon Schwez et je vais mettre VanLapfon Schwez dans un tag A ou un élément d'ancrage . Passons donc à A. Et puis au HRF. Voilà, on le colle et on y met le tag A qui suit OK, qui d'autre sont les amis de Ralph ? Si vous êtes du genre, je ne sais pas qui sont les amis de ces personnages. Eh bien, ça devrait être ton personnage préféré, mais si tu ne le fais pas, tu peux être comme les amis de Reque Ralph Qui sont les amis de Rick L, la sergente Tamura Jane Culhorn de Shigas OK. Et créons un nouvel onglet là-bas, et c'est parti. OK, copions-le. Felix serait également un bon garçon. Je vais donc simplement le coller là et choisir LI A, puis nous le couperons, le collerons là, et nous copierons le sergent Culhorn. D'accord. Sauvegardons cela et vérifions-le. Tout cela fonctionne. OK, rafraîchissez. OK, nous avons donc Venlope Von Schwiz et le sergent Cohor. Mais lorsque je tape sur l'un d'entre eux, je veux qu'il s'ouvre dans un nouvel onglet. OK. Alors, tu te souviens comment faire ça ? C'est avec l'attribut target, et nous l'avons mis en blanc. Fantastique. Cible vide. Et allons-y pour un autre Li A, et nous allons voir Felix ici. Tapons donc Felix et sauvegardons. Hmm. Rocker Rolf, voici le devoir Allons-y. Allons-y Corrige-le, Felix. Copions donc ceci. Passons au code Visual Studio. Fixez un Felix et collez-le. OK. Commande S. Supprimons l'espace supplémentaire qui y trouve et rafraîchissons le chrome. Nous avons donc trois amis. Génial. Et oui, c'est à peu près tout le code HTML dont nous avons besoin. Ce que je veux faire, c'est que tout cela soit très beau. Donc, la première chose que je veux faire est de mettre ça au milieu et peut-être de faire en sorte que cette image ne soit pas si grande. Réduisez donc l'image en gros. À l'intérieur du CSS, nous avons un tas de trucs d'en-tête ici. Mettons ici quelques styles principaux. Je vais dire largeur, passons à 800 pixels, puis à une marge. Je vais choisir zéro en haut et en bas et automatique à gauche et à droite. Sauvegardons cette actualisation. OK. Ça a l'air bien. Sauf que cette image est énorme. Disons donc l'image principale. Donc, toutes les images de la balise principale ou de l'élément principal. Supposons que la largeur ou la largeur maximale soit de 100 %. Donc, s'il est plus petit, c'est bon. S'il est plus grand, il s'adaptera alors à son élément parent. Sauvegardons donc cette actualisation. OK. Donc ça a l'air vraiment sympa. Je ne suis pas le plus grand fan de ce type de police. C'est un serapont, pas vraiment Rolf, et les titres sont aussi des séraphins, et les titres sont Passons donc nous n'avons peut-être pas besoin de dire l'en-tête H un. Nous pouvons peut-être simplement dire que tous les H peuvent avoir cette police et ce style de police. Nous disons tous les deux H. Vous pouvez faire à peu près la même chose, sauf la couleur. Je vais juste garder cette marge noire. Nous allons rester les mêmes. 70 pixels. C'est parti pour 50 pixels. C'est bon. Alors, sauvegardons ça. OK. Ça a l'air bien. Peut-être un peu plus de marge au sommet. Avançons donc de 20 pixels, et nous pouvons le faire ainsi, soit 20 pixels en haut et en bas et zéro pixel à gauche et à droite. Actualiser. Oui, ça a l'air cool. Maintenant, pour le reste, quel type de police voulons-nous ? Eh bien, allons-y, vous savez, pour des choses habituelles, peut-être. Donc, sur le corps, définissons ceci ou le code HTML et le corps, mais le corps devrait aller bien. Mais oui, nous allons probablement éliminer Golden Rod dans peu de temps. Peut-être que nous pouvons le supprimer maintenant et opter pour la famille de polices. Il y a beaucoup de choses parmi lesquelles choisir. Et la raison pour laquelle il y a tant de polices parmi lesquelles choisir est que si vous spécifiez une police et que personne ne l'a pas, il doit savoir quoi faire. Maintenant, avec notre police Google, nous disons en fait de charger cette police et d'utiliser cette police. Tous les navigateurs ne peuvent pas le faire. Nouveaux navigateurs modernes, fantastiques. Nous pourrions donc faire la même chose et importer une police depuis Google Fonts. Mais pour le moment, choisissons quelque chose par défaut. Donc, Kuriau, si vous connaissez vos polices, vous pourrez peut-être contourner ce Times New Roman est généralement une police de caractères sera, l'une des petites choses du bas de la page. Quelque chose qui n'a rien en bas s'appelle un serfont San et c'est quelque chose comme un serf aérien Helvetica SAS, c'est ce que nous allons choisir Donc ici, vous allez dire : « Hé, je veux que ce soit aérien ». Si vous n'avez pas d'antenne, optons pour Helvetica et si vous n'avez pas Helvetica, utilisez simplement OK, donc Command S. Passons à Google Chrome et actualisons-le. D'accord, la couleur d'arrière-plan est maintenant par défaut, et cela semble beaucoup mieux, mais je veux changer la taille de la police. Passons à une taille de police de 20 pixels, enregistrez OK, ça a l'air bien. Qu'en est-il de l'espace entre les deux ? Passons donc à la hauteur de la ligne. Peut-être allons-y pour 24 pixels et enregistrons-y. Revenons à Chrome. Peut-être un petit peu plus. Vous pouvez voir que certaines autres choses ont changé maintenant. Intéressant. Il le modifie sur le corps, ce qui signifie qu'il le modifie pour tous les éléments de son enfant, alors peut-être que nous ne le faisons pas. Découpons-le, puis appliquons-le aux paragraphe et aux balises ou éléments UL et OL. Taille de police de 20 à 24 pixels de hauteur de ligne. Vérifions-le. OK. Ça a l'air plutôt bien. Peut-être un petit peu plus. Donc inspection. Augmentons un peu 30 pixels. Cool. Contente avec 30 pixels. OK, sauvegardez ici. Actualiser. OK. Ça a l'air plutôt bien. Ça me plaît. Ça me plaît. Rolfe et Vanlope Von Schwez Je veux que ça ressemble à une légende Donc, ici, nous avons ce P avec une classe de légende. Donc, légende du point P. Nous pouvons définir la taille de police à environ 16 pixels. Nous pouvons régler la couleur sur un gris. Peut-être que nous voulons un type de gris spécifique. Mm. Quelque chose comme ça. C'est bon. Ensuite, vous voudrez peut-être qu'il soit mis en italique ou souligné afin que nous puissions passer au style de police, italique ou oblique J'aime l'oblique. Enregistrez donc cette actualisation. OK, je veux être un peu plus près. Alors inspectons. Passons au sommet de la marge. Remettons-le à zéro. Ouais. Ça a l'air bien. Et puis je suppose que nous pouvons également modifier le bas de la marge. Voyons à quoi ressemble le zéro tout autour. C'est génial. OK. Donc marge zéro. On pourrait dire zéro pixel, mais zéro c'est bien. OK, donc les choses se présentent plutôt bien ici. Les caractéristiques de Ralph, c'est qu'il est fort. Il est gentil, il est grand. Il aime les filles glitchy et ne prend pas de bêtises. Les amis de Ralph. OK, donc ça a l'air plutôt bien. Peut-être que je veux que celui-ci, deux, trois, quatre soient légèrement à gauche pour correspondre à Ralph et à ses amis. Jetons donc un coup d'œil à ça. L'OL, il y a une sorte de point vert. C'est quoi ce point vert ? Je vais donc passer au calcul. Si vous ne voyez pas calculé, appuyez sur ces petites flèches, et cela devrait être ici. Il y a donc en fait un peu de rembourrage sur la gauche, 40 pixels de rembourrage sur la Réglons donc son rembourrage à gauche à zéro. Hmm. Ce n'est pas vraiment ce que je veux non plus. Alors, ce que nous pourrions faire, c'est dire, qu'est-ce que c'est ? Afficher la position de la liste à l'intérieur. Ouais. Ça a l'air plutôt bien. OK. Donc, rembourrage à gauche et position de la liste à l'intérieur. Passons au rembourrage au total, également zéro. OK. C'est cool. Je vais le copier. Et ça, c'est pour un OL. Peut-être que nous avons essayé pour les LO et les si. Nous le faisons donc pour P, UL et OL. C'est parti pour ULs et OL. Listes non ordonnées, listes de commandes et espaces ici. Commande S et actualisation. OK. Ça a l'air plutôt bien. Maintenant, ce sont des liens ou des ancres. Essayons quelques trucs ici. Donc, à l'intérieur des P, des ULs et des OL. C'est ce que je veux aborder ou les points d'ancrage qu'ils contiennent. Je vais donc copier cette ligne ici et dire, tous les PA ou peut-être que nous utilisons simplement des A, n'est-ce pas ? Il y en a peut-être beaucoup plus facile. Donc, pour toutes les balises d'ancrage A, changeons la couleur en rouge. Et allons-y pour quelque chose comme ça. C'est un peu plus ludique. D'accord ? Ça a l'air bien. Allez S. Et Chrome, on peut se rafraîchir. OK. Maintenant, qu'est-ce qu'il y a de plutôt cool là-dedans ? Vérifions que cela s'ouvre dans un nouvel onglet, c'est le cas. Ce qui est plutôt cool avec celles-ci, vous avez ces pseudo-classes que vous pouvez appliquer. Nous allons donc opter pour un Ha et nous allons dire couleur ou peut-être que nous allons copier-coller et le changer en bleu ou quelque chose comme ça. Comme un bleu. Ça a l'air bien. Et vous pouvez aussi dire pressé, je pense que ça n'a pas l'air bien. Je vais juste le copier. Passons à Chrome, créons un nouvel onglet, pressons. Un code HTML pressé. Comment personnaliser un bouton de clic, passez la souris. Oh, on y va. OK, j'ai visité Active. Ça y est. Actif, visité. D'accord. Revenons donc au code du studio. Passons à l'activité physique. Cool. Copiez et collez la couleur. D'accord, nous pouvons peut-être changer cela en violet. Ça ne va probablement pas être beau, mais voyons voir. Ensuite, vous pouvez également dire « A », visité », ce qui signifie que vous êtes réellement venu ici. Nous allons le coller à nouveau ici. Et nous allons le rendre gris. Je veux te montrer à quoi ça ressemble. Donc, Command S. Il a un chrome, une mise à jour. Il a visité toutes ces choses. Peut-être que si nous changeons légèrement l'URL, vous verrez alors quelque chose de différent. Je vais juste mettre un point d'interrogation, V est égal à un et Command S. Maintenant, l'URL doit être différente, donc actualisons-le, et c'est le cas. Mais maintenant, une fois que nous avons appuyé dessus, et que le V est égal à un, il est gris, ce qui est plutôt cool Peu de gens l' utilisent désormais. Je vais donc revenir au code de Visual Studio et simplement supprimer parce que j'aime bien le rouge, ou ce que je pourrais faire, c'est le garder dedans et le rendre identique à ce que A et A ont visité. Donc, au lieu d'avoir deux déclarations ou blocs de déclarations distincts , je vais les combiner. Donc, A et A visités, vous pouvez être de la même couleur , puis survoler et activer sont des couleurs différentes Supposons donc cette actualisation. Et pendant que je survole, vous verrez qu'ils changent de couleur en bleu Et si je le touche longuement, c'est violet. Maintenant, vous pouvez également modifier toutes sortes de choses comme la taille de la police la hauteur, la couleur d' arrière-plan l'opacité ou tout un tas de choses Mais pour les liens, parfois un peu irritant si les choses changent trop. OK, pour une raison ou une autre, une fenêtre contextuelle est bloquée, peut-être parce que je la maintiens trop longtemps. Nous y voilà. OK. Nous avons donc de bons liens. Donc, même un Po pourrait dire que Ralph est un méchant de jeu vidéo sorti d'un film, peut-être que nous pouvons inclure cela, puis nous pouvons créer un lien vers le film. Ralph est donc un jeu vidéo, méchant, tiré d'un film, et d'un film que nous allons mettre dans un élément d'ancrage, lui donner un HRF, lui donner une cible de Blank Et puis partons à la recherche de Rice Rolf O. Existe-t-il un IMDB ou Rotten Tomatoes Nous y voilà. Ou nous pourrions le lier à Wikipedia, mais passons à IMDB. Est-ce juste un premier film, bien sûr. OK. Mettons-le là-dedans. OK. Gardons-le. Revenons à Chrome. Fermons ça. Nous pouvons probablement fermer tous ces onglets. Sinon, il y en a juste beaucoup. OK, merci. Accélérez Chrome. Fermez-le pour le moment et rafraîchissez-vous. D'accord, vous pouvez donc voir qu'il est également rouge, ce qui est génial. Depuis un film, ouvre ce lien IMDB. OK. C'est donc à peu près notre élément principal terminé ou notre section principale terminée. Peut-être pourrions-nous associer ce rouge à cette orange. Alors faisons-le rapidement. Voici l'intérieur de notre style. C'est parti pour ce rouge. Je vais le copier puis passer à notre en-tête. Le PFP a cette couleur ici, donc je vais le coller là-bas J'ai peut-être juste besoin de cette couleur, en fait. Annuler. Allons-y. Et puis mettez deux points à la fin, un point-virgule à la fin. OK. Rafraîchissez l'air Oui, alors correspond au reste du site. Il y a de jolis rouges sur l' image, tous attachés ensemble. OK. C'est ça. Passons maintenant au bureau Github Je tiens à dire que j'ai créé la section principale. OK. Engagez-vous dans le Maine et encouragez Origin. Et encore une fois, dans un peu de temps, peut-être une minute, votre site GitUbPage sera D'accord, le site Web progresse très bien. Maintenant, il ne reste que la photo. Nous allons donc terminer cela dans la prochaine leçon. 26. 25 Le pied de page des sites Web: Très bien. Terminons notre site Web. Il ne nous reste que le pied de page. Nous avons donc un très beau site Web jusqu'à présent. Créons le pied de page. Donc, à l'intérieur du code Visual Studio, à l'intérieur du point d'index HTML. Dans le pied de page, je vais mettre une balise P. Vous pouvez créer un pied aussi compliqué que vous le souhaitez, mais c'est un site tellement simple Donc, ce que nous allons dire, c'est que ce site Web a été créé lors d'un tap tap kaboom De plus, nous voulons créer un symbole de copyright, 2025. Eh bien, ce serait fou. 2025 et hm Yeah, réalisé par Rich Armstrong. Et puis copyright 2025. Allons donc chercher un symbole de copyright. Donc, coop right symbol HTML. Allons-y. Copions simplement ça. Cool. C'est vraiment utile quand Google le met juste là pour vous. D'accord. Allons-y. Alors, sauvegardons ça. Passons à Chrome et actualisons-nous. OK, appuyez sur Kaboom et Rich Armstrong veut créer ces liens ou ces encodages Mettons donc un taka d'ancrage, appuyez sur Tap Kaboom. Allons-y. H RF est égal à HTTPS, deux points, barre oblique, appuyez sur kaboom.com. Je pourrais même y mettre un WWW. Fantastique Et puis la même chose faite par Rich Armstrong. Et ici, vous pouvez mettre votre propre nom. En fait, vous pouvez mettre ce que vous voulez dans votre pied de page. Rich Armstrong. Href est égal à HTTPS colon SlaasWWW point IH armstrong.net. D'accord. Ensuite, nous pouvons également lui donner une cible vide. Parfois, les cibles vierges sont excellentes. D'autres fois, ils sont vraiment frustrants parce que vous finissez par avoir 47 onglets ouverts. Je le fais probablement par défaut de toute façon. Mais s'il est dirigé vers les mêmes sites, j'essaie, vous savez, ne pas l'ouvrir sous forme de nouvel onglet, vous savez, en règle générale. OK, cible vide. D'accord. Alors, sauvegardons ça. Passons à Chrome et actualisons. Donc ça a l'air plutôt sympa. Cela ressemble au reste du site. Maintenant, je veux le mettre au milieu, peu comme dans la section principale, puis lui donner une couleur de fond. Faisons-le donc dans notre CSS. Et souvent, nous pouvons réutiliser le CSS. Donc Footer, optons pour Width margin zero auto, quelque chose comme ça Et donnons-lui une couleur de fond. Ça va passer au bleu en ce moment, et changeons ça un peu. Hmm. Il y avait le bleu dans l' entête qui était très joli. Utilisons-le à nouveau, alors copiez-le. Collez-le et sauvegardez. Marge zéro automatique. Voyons à quoi cela ressemble. OK, donc pas vraiment ce que je veux. C'est comme si, non, je voulais que tout soit bleu. D'accord. Donc, dans le code de Visual Studio, il existe plusieurs façons de procéder, mais je pense que la plus flexible est mettre un div dans notre pied de page Optons donc pour un div avec une classe de contenu comme celle-ci. Et nous pouvons le coller là-bas , puis le taper. Donc tout a l'air propre et bien rangé, d'accord ? Et puis nous avons le contenu Potter Dot. Nous pourrions même créer du contenu à part entière. le ferons peut-être plus tard, mais nous en tiendrons compte dans le contenu. Marge zéro et Auto, nous l'intégrerons également dans le contenu. Couleur de fond, nous allons la garder ici. Ensuite, enregistrons et voyons ce qui se passe ici. Ça a l'air génial. D'accord. Ensuite, je voudrais peut-être ajouter un peu de rembourrage Faisons un clic droit sur le pied de page. Ajoutons un peu de rembourrage. Passons à 40 pixels, quelque chose comme ça. Ouais Ça a l'air génial. D'accord. Rembourrage. Passons à 440 pixels. Ce sera en haut, en bas, à gauche et à droite. Fantastique Gardons-le. Et puis la seule chose que j'aimerais changer , c'est parce que lorsque vous les survolez, ils prennent cette couleur bleue, et ce rouge est également assez intense Alors peut-être que nous pouvons faire un blanc, et lorsque vous le survolez, il vire au jaune D'accord. Optons donc pour les balises d'ancrage dans le pied de page, nous dirons la couleur blanche Ensuite, nous allons le copier et dire pied de page A, survoler . Nous allons le remplacer par. Allons ici et copiez-collez. J'ai visité Hober. Copions ça. Mais alors, changeons-le en jaune. Peut-être pour qu'il conserve un peu le même type de teinte ou de saturation qu'au même endroit. OK, nous avons donc le survol. Sauvegardons cette actualisation. OK, c'est intéressant qu' il fasse l'un et pas l'autre. C'est donc parce qu' il est visité, non ? Nous l'avons déjà visitée. Hum. Donc, copions-le. Collez des virgules, comme ça. Je dirais visitée. Oui, vous pouvez les mettre sur deux lignes distinctes si cela vous facilite la tâche. Vous pouvez également nous y laisser de l'espace si cela facilite la lecture. OK, sauvegardez cette actualisation. Allons-y. Donc, le fait que le survol soit jaune est vraiment sympa Et si vous appuyez ensuite dessus, rien n'est appliqué car le survol est déjà appliqué Alors, quelle était la pseudoclasse active, cette violette ? Alors collons-le. D'accord. Rafraîchissement. OK, ça n'a pas l' air très beau, donc je vais juste le supprimer. Vous pouvez voir comment ces styles de pied de page pour les ancres remplacent les styles d' ancrage précédents Premièrement, parce que cela apparaît plus tard dans le fichier et deux parce que c'est plus précis. OK, alors gardez-le. Revenons à Chrome et actualisons. D'accord. Maintenant, je voudrais mettre cela sur une ligne séparée, et il y a plusieurs façons de le faire. Nous pourrions donc en faire une balise P ou les placer dans un élément P, ou simplement ajouter une balise BR, qui est un saut de ligne. C'est donc ce que je vais faire. Je vais opter pour BR, comme ça. Et enregistrez, puis revenez non pas à Visual Studio, mais à Chrome. D'accord. C'est génial Mais maintenant je veux le mettre au milieu. Passons au code et au style VS. Et nous pourrions le faire soit dans le contenu, soit dans le pied de page, soit dans la balise P du pied Essayons donc de texter une ligne, au centre, Command S, Chrome. D'accord. Ça a l'air vraiment bien. Donc, fabriqué par Rich Armstrong, nous vérifions que cela fonctionne. Oui, c'est fantastique. Enregistrez Kaboom, vérifiez que cela fonctionne. Fantastique D'accord. Donc, tout ça a l'air vraiment cool. Je pense qu'il pourrait y avoir un peu d'espace entre le pied de page et les éléments principaux Optons donc pour le pied de page ou le principal. Mais comme nous avons affaire à un pied de page, mettons une marge en haut de 20 pixels, par exemple Est-ce que ça ferait quelque chose, 40, 60 ? 80 ans ? 60 ont l'air plutôt bien. OK, une marge supérieure à 60. Donc je vais juste le copier. Et collez-le. Sauvegardez ça. Freshy. OK, c'est Ralph, à propos de Ralph, des caractéristiques de Ralph, des amis de Ralph. Ouais Génial Maintenant, la seule chose que nous devons faire est d'aller bureau Github et de dire «   ajout d'un élément photo Confiez ça au Maine. Appuyez sur Origin. OK, notre site web est terminé. Fais toi-même un high five, danse un peu, pompe l'air avec le poing. Bon travail Vous verrez que chaque section présentait ses propres défis, et que parfois ce que nous faisions dans une section du site Web affectait d'autres parties du site Web. Dans la leçon suivante, je vais vous montrer les principes de base pour améliorer l' apparence de nos sites Web sur mobile, ce qui est vraiment cool car nous utilisons beaucoup nos appareils mobiles. Je vais voir là-bas. 27. 26 Rendre le format adapté aux téléphones portables: Nous avons fait un excellent travail en concevant et codant un site Web pour notre personnage, mais nous n'avons pas pensé à son apparence ou à son fonctionnement sur les téléphones ou les tablettes. C'est ce que nous allons faire dans cette leçon. Faire fonctionner un site Web pour le mobile est souvent appelé le rendre réactif ou responsive design. Et les concepteurs et les développeurs font un tas de choses pour que les sites Web beaux et fonctionnent bien sur différents appareils et tailles d'écran. Voici quelques options. La première chose que nous pouvons faire est utiliser des unités et des mises en page flexibles Par exemple, nous pourrions utiliser une largeur maximale et une unité de mesure relative telle que valeurs en pourcentage au lieu de valeurs en pixels. Cela signifie qu'à mesure qu'un écran devient plus petit, notre contenu s'adapte et qu'à mesure qu'il s'agrandit, la largeur maximale permet de contrôler le design. La deuxième chose que nous pouvons utiliser est la logique CSS pour modifier le style des éléments en fonction facteurs tels que la largeur et la hauteur du navigateur. C'est ce qu'on appelle des requêtes médiatiques, et cela ressemble à ceci. Si la largeur est inférieure à 600 pixels, fixez la taille de police à 16 pixels, créez les images d'avatar à 100 % et supprimez les coins arrondis. Troisièmement, nous pouvons modifier les images affichées en fonction de la taille du navigateur. Nous pouvons le faire en HTML en utilisant des éléments d' image avec des éléments source imbriqués dotés attributs multimédia ou en utilisant des attributs d' ensemble de sources et de tailles sur nos éléments d'image Une autre façon de modifier les images affichées consiste à utiliser des images d' arrière-plan sur les éléments, puis à utiliser des requêtes multimédia pour modifier ces images, le tout en CSS. Nous n'aborderons pas ces trois options dans ce cours, mais il est utile de savoir qu'elles existent. Heureusement, dans notre cas, notre site Web est assez simple Nous nous efforcerons donc de le rendre aussi flexible que possible et d'utiliser des requêtes multimédia CSS pour modifier quelques déclarations. Maintenant, ce que je vais vous montrer dans cette leçon ne sera qu' une ébauche superficielle, mais je voudrais vous montrer les bases Alors que notre site Web s'affiche plutôt bien sur un ordinateur de bureau ou sur un écran d'ordinateur, comment savons-nous à quoi il ressemble et à quoi il ressemble sur un mobile ou sur différentes tailles d'écran ? Je veux donc que vous cliquiez avec le bouton droit sur votre site Web et que vous optiez pour inspecter ou pour consulter les outils destinés aux développeurs et aux développeurs. Ainsi, si votre inspecteur d'éléments se trouve en bas, je veux que vous le déplaciez vers la droite , au moins pour cette partie. Appuyez donc sur ces trois points, puis appuyez sur ce point sur le bouton droit, ou vous pourriez pointer sur la gauche. Je trouve ça un peu bizarre. Nous y voilà donc. Et comme ça, vous pouvez le redimensionner à gauche et à droite. Et c'est la principale chose qui me préoccupe , c'est la largeur de mon écran, car une page Web peut être infiniment longue et cela devrait suffire. C'est la largeur qui me préoccupe. Nous pouvons donc modifier la largeur assez facilement. Et oui, vous pourriez être du genre, mais pourquoi devrais-je m' inquiéter ? Eh bien, jetez un œil à ça. Il y a ce petit bouton ici. qui vous donne ensuite les dimensions de votre téléphone ou de différents téléphones, iPhone XR, peut-être un iPad Pro, et vous pouvez modifier votre zoom en Ns C'est donc 50 %. Ce serait 100 %, ce qui est beaucoup plus élevé. Vous pouvez donc avoir un très bon aperçu ce à quoi ressemble votre site Web avec différents téléphones ou appareils mobiles. J'ai un iPhone SE, donc c'est quelque chose dont je suis toujours conscient car mon format est si petit. J'ai toujours eu un téléphone plus petit, donc je choisis souvent une largeur minimale de 320 comme largeur minimale pour laquelle je conçois. Maintenant, cela semble étrange, et le vôtre ne ressemble peut-être pas à ça. Parfois, lorsque vous actualisez, vous zoomez assez près, comme ici Donc, si nous actualisons à nouveau, cela peut fonctionner, peut-être pas. Si vous nous donnez un peu plus d'espace, il y a aussi ce bouton à bascule, qui permet de passer en mode paysage ou en portrait. OK, donc vous pouvez voir qu'il y a un tas de choses qui ont l'air vraiment bizarres ici. L'une d'elles est que le texte est toujours centré ici, mais il y a cette barre bleue et cette barre bleue. C'est donc en fait la largeur de notre écran. Mais comme cette image est étendue jusqu'au bout, cela agrandit en quelque sorte le site Web. Concentrons-nous donc d'abord sur quelques points. Ce que je veux faire, c'est revenir au code de Visual Studio. Vous m'avez peut-être vu cette ligne de code plus tôt dans le cours, et cela a été fait avec une abréviation ET, et j'ai dit : « Nous y reviendrons peut-être plus tard dans le cours ». Donc, si vous êtes du genre, mais qu'est-ce que cela signifie ? N'importe quoi, tu peux juste le copier. Et si vous allez dans Chrome et que vous ouvrez le chat GPT ou quelque chose de similaire, allons sur chitchpt.com et vous Vous pouvez dire : « Qu'est-ce que cela signifie ? Quelque chose comme ça. Et cela vous donne tout un tas d'informations, ce qui est vraiment très utile. Maintenant, ce que je veux faire ici c'est ajouter quelque chose à voir avec l'utilisateur. Je ne veux pas que l'utilisateur puisse le redimensionner. Je pourrais donc dire que je ne veux pas que l'utilisateur puisse évoluer sur un téléphone. Que dois-je ajouter ? L'évolutivité par l'utilisateur est égale à non. Donc, un maximum d'évolutivité. Évolutif pour l'utilisateur, égal à non. Donc, copions-le. Revenons au code de Visual Studio. Collez-le dedans, mettez une virgule, utilisez un numéro évolutif. Je vais l'enregistrer, retourner dans Chrome, revenir dans ReCarf et actualiser, et vous verrez maintenant que c' est en fait toute la largeur Et c'est très utile lorsque vous développez, vous débugez, que vous essayez de faire fonctionner les choses sur mobile OK. Ça a l'air bien. Eh bien, ça a l'air mieux qu'avant. Mais maintenant, nous avons tout un tas de problèmes. Je vais faire défiler l'écran vers la droite ou faire glisser le pointeur vers la droite. Hum. Donc, la première chose que je veux faire est de m'adresser à cette image. Je vais donc cliquer avec le bouton droit de la souris ici et inspecter. Et vous verrez que cela a toujours une largeur de 800 , car Main a une largeur de 800 pixels. Donc, ce que nous pouvons faire ici, c'est définir une largeur maximale de 800 pixels, ce qui devrait régler beaucoup de choses. Il nous reste encore un peu de place sur le côté droit. OK, passons donc au code de Visual Studio. Passons à notre principal. Et au lieu de la largeur, nous utiliserons la largeur maximale. Et l'image a une largeur maximale de 100 %. maximale de cet élément principal sera donc toujours de 100 % largeur maximale de cet élément principal sera donc toujours de 100 %. OK, cool. Le contenu de Foo a donc également une largeur de 800 pixels Utilisons donc à nouveau la largeur maximale . Je pense que ça devrait aller. Donc, Command S. Revenons à Chrome, une mise à jour. OK, ça a l'air beaucoup mieux. Maintenant, la prochaine chose que je veux aborder ici est que tout le texte touche la gauche et, vous savez, peut-être même la droite. Alors, que faire à ce sujet ? Eh bien, encore une fois, c'est dans la section principale. Donc, ce que je pourrais faire ici, c'est mettre un peu de rembourrage. Donc, prenons zéro en haut et en bas et disons 20 pixels à gauche et à droite. OK, ça a l'air vraiment bien. OK. Et peut-être pourrions-nous faire de même au bas de l'échelle. OK. Faites défiler la page vers le bas. C'est parti pour Well, rembourrage. Nous allons choisir zéro en haut et en bas et 20 pixels à gauche et à droite. Sauvegardez-le et peut-être pourrons-nous le copier et la mettre également sur le contenu du pied OK, je vais garder ça. Rafraîchir Ce site web a été créé lors d'un cours de top kaboom organisé par Rich Armstrong 2025 Ce texte semble un peu étrange. Je peux peut-être le réduire un peu ou regarder ce qui se passe ici, inspecter ce pied de page Le pied de page possède déjà un rembourrage de 40 pixels, le contenu n'a donc probablement pas besoin de ce rembourrage supplémentaire Cool. Revenons au code VS. Vous pouvez le supprimer car le pied de page contient déjà un peu de marge de 40 pixels, mais 40 pixels, c'est peut-être un peu trop sur mobile Donc, ce que je vais faire ici, c'est utiliser une requête multimédia. C'est à vous de décider où vous placez vos requêtes médias. Peut-être souhaitez-vous le faire directement après cet ensemble de styles de pied de Alors peut-être que nous pouvons ajouter un commentaire ici et dire « Footer ». Et ici, nous faisons une requête médiatique en disant « agir » , puis « médias » et je vais simplement appuyer sur Retour ici. Puis il s'embrasse. Passons à largeur maximale de 600 pixels pour le moment. Et puis à l'intérieur d'ici, je vais dire pied de page ou pied de page P. Choisissons une taille de police de 16 pixels OK. Et dans Chrome, actualisons-nous. OK. Tout ce qui fait 600 pixels ou moins changera la taille de la police à 16 pixels. Nous pouvons vérifier ce chat. C'est quand même assez gros. Puis, à ce point de 600 pixels, il apparaît et devient un peu plus petit. Cela signifie simplement qu'il s'adaptera parfaitement. Même à 320 pixels environ. Oui, c'est génial. Même s'il semble que c'est un peu plus grand, je vais donc l'inspecter. Je vais passer à la taille calculée, puis ici, à la taille de police 16 pixels. C'est peut-être juste parce que c'est blanc. OK. Ça a l'air plutôt bien. Peut-être pouvons-nous également modifier le reste de la taille de police, même si 20 pixels semblent plutôt bons. Qu'en est-il des H two ? Peut-être que nous pouvons changer les deux H. Passons donc au code VS. Tapons à nouveau cette requête multimédia. Alors H deux, passons aux médias. Il y a un tas d' autres choses que vous pouvez faire avec une requête multimédia, mais je vais m'en tenir à la base pour le moment. La largeur maximale est donc de 600 pixels, et vous pouvez modifier les 600 pixels comme bon vous semble en fonction de votre design. Optons donc pour une taille 40 amusante. Et c'est une erreur que je commets la plupart du temps, mais je la vois partout dans l'émission. C'est comme si vous pensiez qu'il s' agit d'un H deux, alors vous voulez mettre la déclaration H deux ici, mais cela ne dit rien à personne. Il n'y a pas de bloc de déclaration H two. agit simplement d'une taille de police au milieu de nulle part Il s'agit simplement d'une taille de police au milieu de nulle part lorsque la largeur maximale est de 600 pixels. Vous devez donc placer ce bloc de déclaration H two ici, puis placer cette déclaration de taille de police à l'intérieur du bloc. OK, enregistrons là, revenons à Chrome, actualisons, et cela le rendra un peu meilleur. Même ça convient, ce qui est vraiment sympa. Voyons donc à quoi cela ressemble. Ouais. Ça a l'air cool. Peut-être que nous pouvons le réduire un peu, je vais inspecter le mauvais bouton. Je vais inspecter ici. Il s'agit d'une classe ou d'un div avec une classe de PFP. vôtre est peut-être une image, mais le même scénario s'applique. Passons aux styles ici. La largeur est de 300, la hauteur est de 300. Si nous changeons cela pour dire 220, cela semble plutôt bien. 220, et puis il n'est pas vraiment au milieu. Est-ce qu'il est encore ? Position de fond. Ça a l'air plutôt bien. Et ensuite. Ça a l'air cool. J'aime bien ça. Nous avons donc simplement changé la position de fond , puis la largeur et la hauteur. Donc 220 pixels. OK. Ça a l'air génial. Et notre record, Ralph, est sur deux lignes. Alors peut-être que nous pouvons changer ce chiffre à environ 50. Oui, j'aime bien ça. Passons donc au code de Visual Studio. Et ici, nous pouvons mettre ce H dans cette requête multimédia ici et nous opterons pour une taille de téléphone de 50. Vous pouvez placer cette requête multimédia au bas de votre fichier et placer toutes vos déclarations et blocs de déclarations sélectionnés déclarations sélectionnés dans une seule requête multimédia, à condition qu'elle soit de la même taille. Cela dépend simplement de l'endroit où vous souhaitez placer le code de votre requête multimédia. OK, alors sauvegardons ça. Passons à Chrome et actualisons. OK. Donc ça a l'air vraiment cool. Passons à ce paramètre en responsive. OK, donc en haut, voyons qu'à 600, cela change la taille de la police. Maintenant, vous pouvez vous amuser avec les requêtes médias. Tu peux changer les couleurs. Vous pouvez modifier les images. Vous pouvez modifier la taille des polices, les polices, toutes sortes de choses simplement en fonction de la largeur de l'écran. Mais il y a aussi beaucoup d'autres choses qui se produisent dans les aquariums médiatiques que vous pouvez consulter. Mais à l'heure actuelle, notre site Web s'affiche vraiment bien sur mobile, il est vraiment beau sur ordinateur, il est prêt à être partagé avec la famille. Et encore une chose, nous devons valider notre code. Allons donc sur Gitub Desktop et tapons un site web RS Bonv C'est parti. Engageons-nous pour le Maine. Appuyons sur Origin. Génial Fantastique Encore une fois, dans quelques minutes, cela sera mis à jour en ligne et vous pourrez le partager avec votre famille. OK, maintenant nous sommes prêts à partager notre site Web dans ce groupe familial Whatsapp. Cela devrait fonctionner sur les téléphones de tout le monde sur les ordinateurs. Je devrais être superbe. Mais peut-être qu'avant de le partager, pourquoi ne pas ajouter pages Web à deux caractères supplémentaires à notre site Web ? Faisons-les dans la prochaine leçon. 28. 27 Ajouter un personnage: OK, nous avons un site web génial pour notre personnage. Cela correspond au style de notre personnage. Il est adaptatif, mais il ne s'agit que d'une seule page Web. Faisons donc au moins une page de plus pour un autre personnage ou peut-être même deux. Nous pouvons alors l'appeler un véritable site Web de trois pages. La bonne nouvelle, c'est que nous pouvons le faire simplement en dupliquant deux fois notre fichier HTML à points d'index, en modifiant le texte et les images, et en ajoutant quelques lignes de nouveau CSS pour que chaque page soit légèrement unique D'accord, il est maintenant temps d'ajouter un ou deux personnages supplémentaires au site Web. Ça va être amusant, et ça ne devrait pas prendre trop de temps. Donc, bien sûr, Rolf a besoin d'un Pe à la vanille sur Schoez Page . Alors allons-y. Je vais appuyer sur ce bouton ici, dont je ne veux pas voir le tuba de l'appareil, puis je vais le déplacer à nouveau vers le bas Fantastique. OK. Dans le code VS, je vais cliquer dessus avec le bouton droit de la souris, puis cliquer sur Copier et cliquer avec le bouton droit de la souris sur coller. Puis appuyez sur Retour pour le renommer. Et je dirais, mec, Vanlope. Oh, est-ce que je ne sais pas comment l'épeler ? Donc je vais juste le copier. Revenons à Visual Studio. Je pense qu'on pourrait l'appeler Van. Et je vais m'assurer que c'est en minuscules. Donc Vanlope et ensuite le titre seront Vanlope Von, Schwez. Nous y voilà. Je dois changer l'icône Rolf, celle-ci sera la même OK, alors optons pour une icône de VanLape. Donc un nouvel onglet. VanLapef Suisse. Passons aux images. Ok, celui-ci a l'air plutôt bien. Je veux juste son visage. Je vais donc cliquer avec le bouton droit de la souris et enregistrer l'image sous. Oui, ça a l'air bien, et trouvez-la. Je vais mettre ça dans Ralph dans les images. OK. Op. OK. Maintenant, je veux redimensionner Allons-y. Avons-nous utilisé celui-ci plus tôt ? Je ne m'en souviens pas. Essayons-le. Avec une hauteur. Recadrons-le. Oui, ça a l'air bien. OK. Ça a l'air bien. Recadrez, téléchargez l'image. C'est bon. C'est bon. Téléchargez l'image. Fantastique. Allons mettre l'icône Nlope dans Ralph en image Oup. Nous y voilà. Va copier tout ça. Passons au code VS. Mets-le dedans. OK. Ça a l'air bien. Nous pouvons ensuite le copier-coller. Vanellope Font Schwez à propos de Vanlope. OK, je n'en sais pas trop sur Venlope pour le moment, alors permettez-moi de copier-coller quelques éléments Protagoniste féminine de Venlopfon Schwez . OK, copions-le. Collez-le dedans. Nous avons besoin d'une image à propos de Vanlope Allons regarder d' autres images ici. Oui, celui-ci est plutôt cool. Oui. Sauvegardons l'image fur et à mesure que je grossis ce Vanlop, puis nous y ajouterons Vanlope en gros, le renommerons et copierons le tout Ainsi, lorsque nous sommes dans le code VS, vous pouvez le mettre dedans. À propos de la caractéristique de Vanlope Vanlope. OK, allons-y. Elle est forte, gentille. Elle est grande. OK. Elle est petite. Elle a des problèmes. Elle a de l'attitude et elle a 9 ans OK. C'est parti pour VanlapesFriends Eh bien, ici, nous avons le révérend Ralph. OK. Et maintenant, nous pouvons créer un lien vers notre page d'index. Donc, point slash. Nous opterons pour le point d'index HL ou simplement pour le point slash. En gros, J va directement à la racine. OK, Rece Rolf, cela signifie que je vais l'enregistrer dans Index, qui est la page de Rolf ici pour Vanlope, au lieu d'aller sur cette URL externe. Ce que nous pouvons faire est d' aller directement sur les barres obliques, mais sur Vanpt HTML. Vanlope, au lieu d'aller sur cette URL externe. Ce que nous pouvons faire est d' aller directement sur les barres obliques, mais sur Vanpt HTML. Et je ne veux pas cibler le blanc, donc je vais l' enlever, le garder. Allons à Vanlope. Nous allons également supprimer la cible à blanc ici. OK. C'est génial. Passons à Google Chrome, à page eKif et à la mise à jour Nous allons appuyer sur Vanilla Pe sur Schwez , puis sur Vanilla Pe sur Schetz À part cette image, elle a l'air plutôt belle, une Vanlope. Fermons ça. C'est bon. C'est génial. Et vous pouvez voir à quel point il est rapide de créer une nouvelle page, une toute nouvelle page, car nous avons déjà configuré notre CSS. Ensuite, nous cliquons sur Recker Rf, et cela passe à point slash Maintenant en ligne, cela fonctionnerait. Mais ici, cela ne fonctionne pas car il ne s'agit pas d'un serveur. C'est comme un système de fichiers ou de dossiers. Revenons donc au code de Visual Studio, et commençons le HTML. Gardons-le. Passons à Chrome. Revenons en arrière et actualisons-nous. OK, Rick et Rolf. Voilà, on va dans le fichier d'index plutôt que dans le dossier Rolf, c'est OK, donc c'est génial. Revenons à Vanlope et changeons cette image. Si vous avez toujours une image ici, donc dans un code VS en haut pour votre PFP, si vous utilisez une image et que vous n'avez pas fait la quête secondaire, où nous avons transformé cette image PFP en div avec une classe de PFP, ce serait assez facile Mais maintenant, nous avons le PFP et je veux ajouter une classe de vanlopi en plus de Vanlope PFP. Gardons-le. Passons au style CSS. Où est le PFP. Je vais le copier, le coller ici, il y a une classe de Dt PFP et Vanp C'est ainsi que vous dites que je vais sélectionner tous les éléments avec les classes PFP et vanlop à l'intérieur de l'élément d'en-tête OK, nous avons donc juste une image de fond que je vais changer. Dans ce cas, il faudra peut-être également modifier la position et la taille de l'arrière-plan. OK, donc je pense que nous allons regarder les images que nous avons. Icône Phenelope, Penelope JPEG. C'est probablement une très bonne idée, donc je vais tout copier et le coller dedans. Position d'arrière-plan. Je vais juste le régler sur zéro et zéro pour la finale et la taille de l'arrière-plan sur 100 %. Ou peut-être que je vais utiliser quelque chose comme une couverture. Je vais donc enregistrer ça. Revenons à Chrome et actualisons. OK. Oui. Ça a l'air vraiment très bien. Ça me plaît. Fantastique. Et si nous revenons à Rece Rolf, sien est toujours le même parce que c'est le sien Il n'a pas non plus la classe Vanlope sur ce PFP. Maintenant, nous allons de nouveau à Vanlope. La sienne le fait. Nous pourrions même changer la couleur de sa bordure. Oui, faisons-le rapidement. Faisons donc un clic droit sur Inspecter. Ou peut-être faisons-le dans le code Visual Studio car nous y avons un sélecteur de couleurs Donc position de fond, taille de fond. Passons à la couleur de la bordure. Et optons pour le rouge. Mais de quelle couleur est Vanelope ? Vanelope est un peu de couleur turquoise. Oui, alors faisons-le et économisons. OK. Nous y voilà. Il existe un tas de façons dont nous pourrions réellement le faire. Par exemple, nous pourrions donner au corps une classe de vanlope et tout changer en fonction de cela Mais pour le moment, c' est la seule chose qui change. OK. Maintenant, vous pouvez le faire avec une, deux, trois ou quatre pages, autant de pages que vous le souhaitez. Votre site Web comporte désormais plusieurs pages Web. Il s'agit en fait d'un site Web et non d'une seule page Web. Et la dernière chose à faire est d'aller bureau Github et de valider ce code Ajoutez sur une autre page. Engagez-vous dans le Maine, appuyez sur Origin. Nous y voilà. Si vous voyez quelque chose comme ça dans GitHub Desktop, une version mise à jour de Gitup Desktop est disponible et sera installée lors du prochain lancement, vous pouvez simplement appuyer sur Redémarrer le bureau Gitup, et elle devrait apparaître dans quelques secondes ou minutes. Mmm hmm. Nous y voilà. Nous y voilà. J'ai maintenant une autre page sur mon site Web. J'adorerais que tu fasses pareil. Peut-être en ajouter deux, trois, quatre ou plus, autant que vous le souhaitez. OK, allons-y. Si vous voulez rendre chaque page de personnage encore plus unique, alors allez-y. J'adore voir comment tu t'y prends. 29. 28 Challenge Alternative CSS: Maintenant, si vous êtes prêt à relever un défi, je veux que vous créiez une ou deux autres versions de la page Web de votre personnage en utilisant exactement le même code HTML, mais en utilisant des fichiers CSS différents. Voici un exemple de deux pages Web différentes avec exactement le même code HTML, mais un CSS différent Vous allez commencer à comprendre la puissance du CSS grâce à cet exercice. D'accord, vous pouvez donc choisir le personnage pour lequel vous souhaitez créer une nouvelle version. Je vais choisir Ralph, donc je vais y retourner. Et je vais créer une copie de cette page , puis modifier le fichier CSS qu'elle charge, puis créer un nouveau fichier CSS également. Passons au code VS. Je vais cliquer avec le bouton droit sur Copier, cliquer avec le bouton droit sur Coller. Et puis revenez, j'opterai pour Ralph 2. Tu peux l'appeler comme tu veux. Ensuite, mon style, je vais cliquer avec le bouton droit sur copier, cliquer droit de la souris et coller sur CSS, cliquer avec le bouton droit sur Coller. Au lieu de style Copy, je vais juste dire style deux. Nous y voilà. Dans Rolf Two, la feuille de style que nous allons choisir est le style CSS à deux points, et vous pouvez dire V deux ou ce que vous voulez Gardons-le. Maintenant, dans le style 2, nous pouvons apporter quelques modifications. Mais je veux aller sur Google Chrome et simplement aller sur Ralph pour faire des points HTML. Il ne devrait y avoir aucune différence à cet égard. Mais dès maintenant, nous pouvons commencer à faire la différence. Nous pouvons commencer à apporter des modifications. Faisons donc l'en-tête. Changeons cette couleur. Optons peut-être pour un bleu vraiment foncé, enregistrons-le et vérifions-le pour vérifier qu'il fonctionne. Nous y voilà. Et donc, juste comme ça, vous pouvez commencer à modifier l'ensemble du site ou la page Web en utilisant cet autre fichier CSS. Et c'est vraiment amusant parce que le code HTML ne changera pas, mais le CSS si. Alors amusez-vous avec ça, essayez de nouvelles choses, expérimentez. Oui, ça va être amusant. Et puis, bien sûr, lorsque vous serez prêt et que vous aurez terminé, retournez sur le bureau Git upb et dites «  ajout d'une version nouvelle ou alternative page Web de Ralph OK. Ensuite, validez puis push origin. OK, allons-y. Amuse-toi bien avec ça. 30. 29 Partagez votre site Web: OK. Le site Web de Rick Rolls a l'air génial. Je pense que cela leur convient très bien, et j'espère que votre site Web est superbe et qu'il correspond également à votre personnage. Ce qui est génial, c'est que chaque fois que vous validez et synchronisez votre code avec github.com, votre page est mise à jour, ce qui est Maintenant, si vous en avez envie, partagez le site web de votre personnage avec le monde entier. Dites-le à votre mère, à vos amis, aux gars avec qui vous travaillez, cela devrait rendre tout le monde vraiment fier ou incroyablement jaloux Ils vont probablement commencer à vous traiter comme un ninja et à vous demander de coder toutes sortes de choses, et peut-être même qu'ils vous demanderont de réparer des imprimantes et d'autres choses, ce qui est un peu étrange. Quoi qu'il en soit, j'adorerais voir le site web de votre personnage. Alors poste-le là où je peux le voir. Vous pouvez le mentionner à taptapkaboom sur tous les réseaux sociaux, ou vous pouvez m'envoyer ou Mon adresse e-mail est riche sur taptapkaboom.com. Maintenant, à ce stade, tu peux être assez fier de toi. Vous venez de coder un site Web pour votre personnage préféré. Il y a trois pages. Il est réactif. C'est génial. Donc je pense que tu devrais te donner un high five maintenant, comme ça, et peut-être même faire une petite danse Comme Wo Whoo. Quelque chose comme ça. Bravo 31. 30 Débogage des erreurs courantes: Les gars, qui que vous soyez, même si vous êtes un super ninja coda, vous ferez des erreurs en codant On les appelle des bugs, et ils sont frustrants. Alors, comment les gérez-vous ? Voici quelques conseils à retenir. Le premier conseil est de savoir que des bogues se produisent dans tous les types de codeur. C'est exactement ce qui se passe. Nous sommes humains. Même l'IA commet des erreurs. Ce n'est pas une question de savoir si, c'est une question de quand. Le deuxième conseil est que le navigateur n'est pas là pour vous chercher. Il s'agit simplement de suivre vos instructions. troisième conseil est que la plupart du temps, les problèmes sont minimes et les solutions sont très simples : fautes d'orthographe, fautes absence de point devant le nom d'une classe en CSS, utilisation d'un point devant le nom d' un élément en CSS, utilisation d'un point au lieu d' un symbole de hachage lorsque vous essayez de sélectionner un élément par identifiant Un autre petit problème est l'utilisation de boîtiers différents dans votre code par rapport à vos fichiers et dossiers. Si vos images ne s'affichent pas ou s'il n' y a pas de CSS lorsque vous consultez votre site en ligne, il y a de fortes chances que cela soit dû au n' y a pas de CSS lorsque vous consultez votre site en ligne, fait que vous essayez d'accéder à un fichier qui n'existe pas. Ou simplement un fichier où le chemin ou le nom du fichier a une majuscule différente. Le quatrième conseil est qu'il y a une raison logique pour laquelle cela ne fonctionne pas. Il vous suffit de découvrir ce que c'est. Avec le recul, il est facile de voir les bogues. Le cinquième conseil est de garder les choses propres, ordonnées et cohérentes dans vos fichiers HTML et CSS Indentez votre code pour qu'il soit facile de le scanner et de détecter les irrégularités Utilisez les mêmes conventions de dénomination et de cas, comme utilisez un étui camel ou un étui à kebab tout au long de votre projet Le sixième conseil est de copier et coller au lieu de réécrire dans la mesure du possible. Cela signifie que même s' il y a des fautes d'orthographe, elles seront fausses partout, mais pareilles partout . Astuce 7. Lorsque quelque chose ne fonctionne pas comme prévu, expliquez ce qui devrait se passer, puis ce qui se passe réellement. Vous pouvez vous parler à vous-même, écrire ou même l' expliquer à quelqu'un d'autre. Même si cette personne ne code pas, cela peut aider. Les chiens et les chats sont d' excellents partenaires de codage. Huitième conseil : rejoignez une communauté et accédez à un mentor ou à une personne plus expérimentée que vous, surtout si vous essayez de faire des choses plus complexes. Le neuvième conseil est de demander à Google ou à quelque chose comme Chat ChPT. n'y a pas une seule réponse que j'ai demandée à laquelle quelqu'un n'ait pas déjà posé et à laquelle personne n'ait trouvé de réponse décente. Conseil 10 : faites une pause. Allez vous promener, regardez par la fenêtre, respirez ou dormez simplement sur le problème. Laisse ton inconscience agir dessus. Sérieusement, le temps que j'ai passé à découvrir ce qui ne va pas pendant que je suis sous la douche ou au milieu de la nuit est fou. Vous allez passer beaucoup de temps à débugger. La bonne nouvelle, c'est que plus vous codez, plus vite vous détecterez et corrigerez ces bogues Vous vous direz : « Ah, je l'ai déjà vu Alors, bonne chance dans votre codage, bonne chance dans votre débogage Considérez-le comme faisant partie du processus. 32. 31 Aidez-moi à vous aider: Je vous encouragerai toujours à débugger votre propre code et à découvrir les choses par vous-même, car vous gagnez de l'expérience de cette façon Mais parfois, vous n' arrivez tout simplement pas à faire les choses correctement et vous avez envie quitter ou de jeter votre ordinateur par la fenêtre ou sur votre chat. Je préfèrerais donc que tout cela n'arrive pas. Donc, dans ce genre de cas, j'aimerais vous aider. Mais j'ai besoin que tu m'aides à t'aider. C'est donc ce dont j'ai besoin si vous voulez me demander de l'aide. Je veux que vous validiez votre code et que vous le synchronisiez avec github.com Deuxièmement, dites-moi quel est votre nom d'utilisateur Github. Troisièmement, envoyez un lien vers la page Web présentant le problème. Quatrièmement, si vous êtes bloqué sur une leçon précise du cours, dites-moi quelle leçon. Cinq, décrivez ce qui devrait se passer. Six, décrivez ce qui se passe. Alors je vais essayer de t'aider. Donc, s'il vous plaît, ne dites pas des choses comme « Mon site Web ne fonctionne pas ». Aidez, s'il vous plaît Je ne peux pas t'aider ici. Aidez-moi à vous aider. Essayez donc ce format. Obtenez le nom d'utilisateur puis entrez votre nom d'utilisateur, l'URL, placez votre URL là où il y a un problème. Numéro de leçon Par exemple, mettez le numéro 16, celui sur l'écriture de CSS dans des fichiers séparés. Parfois, je n'arrive pas à me souvenir de ce que signifie 16 ans. Ce qui devrait se passer, c' est que la couleur du texte titre 3 devrait être bleue. Ce qui se passe, c'est que la couleur du texte titre trois ne change pas de couleur. Je vais soit vous laisser une explication écrite, explication vidéo, soit planifier un appel avec vous. 33. 32 Prochaines étapes: D'accord, c'est la fin du cours, mais j'espère que ce n'est que le début de votre parcours de codage. J' espère que tu t'es bien amusée. J'espère que tu as beaucoup appris, et j'espère que tu accepteras davantage ce côté ringard à partir de maintenant Ce cours vous a donné une base sur laquelle vous pourrez en apprendre davantage. Il y a encore beaucoup à apprendre, et cela peut être vraiment amusant de créer des sites Web et des applications pour vous-même, vos amis et vos clients. Maintenant, si ce n'est pas déjà fait, tu dois fêter ça. Vous venez de créer un site Web. Bonjour vous-même, criez fort. Waoup, oup Dansez, sautez de haut en bas, courez comme un fou. Bravo Et maintenant, peux-tu me faire une faveur ? Pouvez-vous s'il vous plaît revoir ce cours ? Cela signifierait beaucoup pour moi et aiderait d'autres personnes à décider de le prendre ou non ? Sérieusement, cela signifierait beaucoup. Bien qu'il s'agisse de la dernière vidéo, j'ajouterai d'autres vidéos à ce cours là où cela est logique, et bien sûr, je créerai d'autres cours et vidéos YouTube. Alors inscrivez-vous à la newsletter taptap Kaboom et abonnez-vous à la chaîne YouTube. Au revoir pour le moment.