Coder votre premier site Internet : HTML + bases du CSS

1. Introduction du cours: Hé, je m'appelle Rich Armstrong de taptaptapkaboom.com. Je conçois et construit des sites Web depuis 2007, et dans cette classe, je vais vous montrer comment décoder votre premier site Web à partir de zéro en utilisant HTML et CSS. Pour moi, être capable d'écrire mon propre HTML et CSS est plus que simplement coder. C' est une façon moderne de me créer et de m'exprimer de manière numérique. Un site Web est une chose réelle que des centaines de personnes visitent, utilisent et interagissent avec, et être capable de coder tout cela par vous-même vous donne un avantage incroyable. Vous n'avez pas à compter sur d'autres personnes, sur des modèles emballés ou sur des applications complexes pour donner vie à vos idées. codage est également super amusant et gratifiant. Pendant la classe, je vais vous emmener étape par étape à travers la création d'un site Web simple d'une page pour vos héros de dessins animés préférés ou personnage de film. J' explique tout d'une manière accessible et je laisse de côté ce que vous n'avez pas besoin de savoir. À la fin de la classe, 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. Vos amis seront jaloux, votre mère sera super fière, et vous aurez une base solide sur laquelle bâtir. Donc, que vous soyez un novice absolu ou que vous ayez déjà fait du design et du développement web, venez suivre cette classe. Tout ce dont vous avez besoin est d'un ordinateur et d'une connexion Internet. se voit dans la vidéo suivante. 2. Que télécharger ?: Pour faciliter le codage, vous devrez télécharger et installer quelques éléments, un éditeur de code et un navigateur de développement, un moyen de sauvegarder votre code et de publier un site Web. La première chose dont vous aurez besoin est un éditeur de code. Ils font des suggestions, complètent votre code et font des parties de votre code différentes couleurs. Fondamentalement, ils vous aident à coder plus rapidement et avec moins d'erreurs. Il y a des tonnes d'éditeurs de code à choisir. Dans ce cours, j'utiliserai Sublime Text. Vous pouvez l'utiliser gratuitement et une licence commerciale coûte seulement 80$. Un autre éditeur de code génial est le code Visual Studio de Microsoft. C' est gratuit et open source. En fin de compte, vous devriez choisir un éditeur de code qui vous convient, ce que vous en avez besoin. La deuxième chose dont vous aurez besoin est un bon navigateur de développement. Chaque navigateur dispose d'un tas d'outils qui vous aideront à développer des sites Web. Mais Google Chrome est le meilleur. Avec elle, nous pouvons repérer les erreurs, comprendre pourquoi certaines choses se passent, et même faire un peu de design dans le navigateur. Tu sais, sauvegarder ton travail est une bonne idée, non ? La plupart des codeurs utilisent un système appelé Git pour sauvegarder leurs projets. Avec Git, vous stockez les modifications que vous apportez à votre projet sur votre ordinateur. C' est génial, mais si quelque chose arrive à votre ordinateur, vous perdez tout votre code. C' est là que Github entre en jeu. Il permet aux codeurs de synchroniser leur code et les modifications qu'ils effectuent avec une version en ligne. Github vous permet également de publier sites Web simples et ils ont créé une application appelée GitHub Desktop, ce qui rend l'utilisation de Git super facile. Allez télécharger et installer ces trois choses maintenant. Dans les ressources de classe, vous pouvez afficher un PDF contenant des éditeurs de code alternatifs et des navigateurs de développement. Une fois que vous avez téléchargé et installé ces trois éléments, vous pouvez passer à la leçon suivante et en apprendre davantage sur le HTML. Le reste de cette leçon, je vais vous montrer comment télécharger et installer Sublime Text, Google Chrome et GitHub Desktop. Ouvrez votre navigateur par défaut, quelque chose comme Safari ou Internet Explorer, et tapez « sublimetext.com », Nous allons, et puis vous voulez télécharger celui pour votre système d'exploitation. Pour moi, c'est télécharger pour Mac, si vous n'en voyez pas un pour votre système d'exploitation, cliquez sur le bouton de téléchargement là-bas, puis vous pouvez voir OS X, Windows, Linux, quoi que ce soit. Allons pour OS X, pendant que nous téléchargeons notre recherche pour Google Chrome. Google Chrome, nous y allons, google.com/chrome. Tu verras quelque chose comme ça. Cette page change de temps en temps. Ensuite, vous cliquez sur ce téléchargement Chrome pour Mac. On y va. La prochaine chose que nous devons télécharger est GitHub Desktop, github desktop et ici il est ici, desktok.github.com. Ensuite, téléchargez pour Mac OS si vous êtes sur Mac ou téléchargez pour Windows si vous êtes sous Windows. Déjà, cela va télécharger GitHub Desktop. Une fois le téléchargement terminé, nous pouvons ouvrir notre dossier Téléchargements. Je vais glisser-déposer ou application GitHub Desktop dans les applications. Je vais double-cliquer sur « Google Chrome ». Je vais double-cliquer sur « Sublime Text », tous les deux s'ouvriront. Je vais faire glisser Google Chrome dans le dossier des applications. Nous avons un texte sublime et faites-le glisser dans le dossier Applications également. Vous pouvez fermer ces deux Windows quand ils sont terminés et vous pouvez simplement éjecter ces deux DMG comme ça. Ensuite, vous allez dans votre dossier d'applications et nous allons pour « g-o » pour Google Chrome et double-cliquez dessus. C' est un pop-up de sécurité qui apparaît sur Mac, parfaitement ok. Vous pouvez cliquer sur « Ouvrir » et nous y allons. Google Chrome est installé. Fantastique. Revenons au finder et ouvrons GitHub Desktop et encore une fois nous pouvons appuyer sur « Ouvrir ». C' est notre page de départ que nous verrons. Puis enfin, nous voulons ouvrir Sublime Text. Allons dans le Finder appuyez sur « S-U » sur notre clavier, puis double-cliquez dessus. Encore une fois, ouvrez cela, et Sublime Text s'ouvrira derrière une fenêtre du Finder. Tu as ce qu'il faut pour développer comme un ninja. Allons sur ce que HTML est. Je te vois dans la prochaine vidéo. 3. Qu'est-ce que le HTML ?: Qu' est-ce que HTML ? Eh bien, vous dire que HTML signifie langage Hypertext Markup, peut ne pas être si utile, mais ce que je trouve utile, c'est expliquer que HTML est un langage de codage simple utilisé pour afficher des informations. Il est écrit par des humains et compris par les navigateurs. HTML structure le contenu de la page Web en un tas de boîtes, dans la plupart des pages Web, il y a des boîtes à l'intérieur des boîtes. La boîte qui contient toutes les autres cases est notre fenêtre de navigateur, c'est ce que j'aime appeler la théorie des boîtes HTML. À l'intérieur de chaque boîte, il peut y avoir plus de boîtes, de texte, une combinaison de boîtes et de texte, ou rien du tout. Basé sur le nom de la boîte, le navigateur l'affichera et son contenu différemment des autres types de boîtes, il y a des boîtes pour les listes, les paragraphes, les en-têtes, les pieds, les images, les liens, et bien plus encore. Par défaut, la plupart des boîtes sont aussi élevées que leur contenu, et aussi larges que la boîte à l'intérieur de, autres boîtes sont aussi hautes et aussi larges que leur contenu. La plupart des boîtes qui aussi loin vers la gauche et aussi loin vers le haut qu'ils peuvent, alors comment coder une boîte HTML ? Eh bien, la plupart des boîtes HTML ont une balise d'ouverture et une balise de fermeture. Une balise d'ouverture se compose d'un symbole inférieur à, du nom de la balise et d'un symbole supérieur à. Une balise de fermeture se compose d'un symbole inférieur à, d'une barre oblique avant, du nom de la balise et d'un symbole supérieur à. Entre ces deux balises, vous pouvez mettre une autre zone HTML, quelques textes, une combinaison de boîtes et de texte, ou le laisser vide. La zone HTML entière est alors composée de la balise d'ouverture, du contenu et de la balise de fermeture, et tout cela est appelé un élément HTML. Par défaut, un navigateur affiche les éléments HTML, à partir du haut du document vers le bas, comme ils sont dans votre fichier HTML. C' est tout, vous demandez peut-être ? Pas tout à fait, il y a encore une chose, les attributs HTML. Les attributs sont des bits et des éléments secrets qui donnent au navigateur plus d'informations sur un élément HTML, comme la façon de l'afficher et les fonctionnalités à ajouter. Nous écrivons des attributs dans la balise d'ouverture d'un élément HTML, nous utilisons des attributs pour les éléments de style pour dire au navigateur où aller lorsque vous cliquez sur un lien, quel fichier un élément d'image devrait afficher, et bien plus encore. Un attribut est composé d'un nom, d'un symbole égal et d'une valeur, qui est enveloppé entre guillemets simples ou doubles. Vous les utiliserez tout le temps lors de l'écriture HTML. Ok, vous comprenez le HTML en théorie maintenant, dans la prochaine vidéo, vous allez commencer à l'écrire. 4. Écrire en HTML: Qu' est-ce qu'une page Web ? Autrement dit, c'est un document qui contient un mélange de langages de codage HTML, CSS et JavaScript. Un navigateur interprète ces langues et affiche quelque chose de visuel et d'interactif pour les humains. Un site Web alors, est une collection de pages Web qui sont souvent liées les unes aux autres. Créons notre première page Web et écrivons du HTML. Nous verrons ce que notre éditeur de code peut faire, ce dont Chrome est capable, et comment Git et GitHub fonctionnent. Commençons par aller sur le bureau GitHub et créer notre premier référentiel. Un dépôt est l'endroit où nous conservons tous nos fichiers pour un projet de codage. C' est essentiellement un dossier que GitHub gère et surveille. Pour en créer un, allez dans Fichier et cliquez sur « Nouveau référentiel ». On va appeler un dépôt ou un repo, un héros de bande dessinée. La description peut être, « mon héros de dessin animé préféré ». Plus tard, nous commencerons à ajouter nos fichiers HTML et CSS pour notre héros de bande dessinée ou personnage de film. Maintenant, le chemin local est l'endroit où vous voulez stocker ce référentiel sur votre ordinateur. Je vais installer le mien sur mon bureau, mais vous pouvez choisir où vous voulez. Vous pouvez choisir d'initialiser le repo avec un fichier README ou non. Vous n'avez pas à le faire et vous n'avez pas à vous soucier de gitignore ou des options de licence. Créons ce référentiel. Vous verrez que nous avons maintenant un dossier de héros de dessins animés sur notre bureau. C' est notre dossier de dépôt. Une fois que vous avez créé votre référentiel, vous pouvez commencer à écrire du code HTML. La façon la plus simple de le faire est d'aller dans le référentiel et de sélectionner Afficher dans le Finder, puis de faire glisser ce dossier de héros de bande dessinée dans un texte sublime. La première chose que je vais faire est que je vais faire cette fenêtre un peu plus grande, donc je vais maintenir « Alt Option » et cliquer sur le « Green Button », puis je vais commencer à écrire mes éléments HTML. Le premier que je vais écrire est mon titre un élément. Écrivons la balise d'ouverture. Je vais écrire du contenu, « Hé. Je suis un gros titre », puis on écrira la balise de clôture. Vous avez peut-être remarqué que le sublime n'a rien fait de fantaisie. La raison en est qu'il voit toujours ce que nous écrivons en texte brut. Vous pouvez voir ici en bas à droite il est écrit, « texte brut ». Le moyen le plus simple de le faire reconnaître que nous écrivons HTML est d'enregistrer le fichier en tant que fichier HTML. Allez dans Fichier, puis sélectionnez « Enregistrer sous ». Je vais enregistrer ceci sous test.html, qui en fait un fichier HTML. Je vais appuyer sur « Enregistrer », et vous verrez qu'il y a de la couleur dans le document. Lorsque nous écrivons notre élément suivant, qui va être un élément de paragraphe, vous verrez que lorsque je tape p, tout un tas d'options apparaissent. Ce sont les suggestions que sublimé nous donne. Vous pouvez appuyer sur « Bas », vous pouvez appuyer sur « Haut », puis lorsque vous appuyez sur « Retour », il écrit le reste de la balise d'ouverture et la balise de fermeture et place votre curseur là où il doit être. Ici, je peux dire : « Hé. Je suis un élément de paragraphe. Cool, hein » D'accord. L' élément suivant est des éléments de lien, ou ce que nous appelons un élément d'ancrage, alors écrivons cela. J' appuie sur « Retour » et le texte sublime fera tout un tas de choses pour nous. Une des choses qu'il fait est qu'il nous donne un attribut href. C' est vraiment important quand il s'agit d'éléments d'ancrage. Cela signifie que nous pouvons spécifier où un utilisateur doit être pris lorsqu'il clique sur le lien. Nous pouvons aller à Google https://google.com, puis le contenu peut être, « cliquez sur Moi, je suis un lien ». D' accord. Nous avons maintenant trois éléments. Enregistrez le fichier ou vous pouvez appuyer sur « Command S » ou « Control S », et allons à notre finder et faites glisser la page HTML de test dans Google Chrome pour l'afficher en prévisualiser. Maintenant, c'est notre page web, ce qui est plutôt cool. Vous verrez que le h1, ce paragraphe et l'élément d'ancrage sont tous très différents. C' est ce que fait le navigateur lorsque nous commençons à écrire du HTML. C' est fantastique. Maintenant, la grande chose à propos de Chrome est ses outils de développement. Maintenant, l'une des choses que nous pouvons utiliser est l'élément et le spectre. Vous allez dans Afficher, Développeur et sélectionnez Outils de développement. Sur le côté droit, et parfois en bas, vous verrez votre inspecteur d'éléments. Lorsque vous survolez un élément, vous verrez qu'il a été mis en surbrillance sur le côté gauche. Il vous montrera la largeur, la hauteur, et vous donnera quelques informations sur ses marges. Ce qui est génial à ce sujet, c'est que vous pouvez double-cliquer sur un nom de balise et ensuite vous pouvez en spécifier un nouveau. Juste comme ça, appuyez sur « Retour ». Sur le côté gauche, votre page Web sera mise à jour. Vous pouvez également double-cliquer sur le contenu et le modifier, ce qui est fantastique. Vous pouvez également cliquer sur un élément et appuyer sur « Retour arrière », et il a disparu, il est supprimé. Maintenant, vous pouvez le faire sur n'importe quelle page Web que vous aimez. Vous pouvez inspecter les éléments, vous pouvez les modifier, vous pouvez les supprimer, mais ne vous inquiétez pas, il apporte seulement des modifications à la version de votre navigateur de cette page. Lorsque vous actualisez, tout reviendra à ce qu'il était. Ce test de ce lien fonctionne réellement. Oui. On y va. Ça nous amène à Google. Mais pour revenir à la page, je dois appuyer sur le bouton de retour. Comment l'ouvrir dans un nouvel onglet ? Revenons au texte sublime, et nous pouvons ajouter un nouvel attribut ici appelé cible. Si nous spécifions une valeur de _blank, elle s'ouvrira dans un nouvel onglet. Sauvegardons cela et revenons à Chrome, actualiser, puis cliquez sur ce lien, et ta ta ta ta, il s'ouvre dans un nouvel onglet. Maintenant, vous pouvez fermer ceci et nous sommes de retour sur notre site Web. Un autre grand attribut que nous pouvons ajouter à un élément d'ancrage est l'attribut title. Lorsque vous écrivez le titre et lui donnez une valeur, quelque chose comme, « Allons à Google. » Il donne à l'utilisateur des informations lorsqu'il survole. Allons à Chrome, actualisons et survolons ce lien. Vous verrez ce petit pop-up qui dit : « Allons à Google. » Cela aide avec l'expérience utilisateur. Maintenant, nous avons fait un peu de codage HTML. Retournons à GitHub et voyons ce qui s'est passé ici. On a compris que nous avons créé un nouveau fichier. Ce que nous allons faire ici, c'est que nous allons dire créer test.html. Nous allons ensuite le transmettre au maître, et ce que nous venons de faire est de demander à GitHub de se souvenir de ce que nous avons changé. Vous pouvez voir toutes les modifications dans l'onglet Historique. Maintenant, sélectionnons à nouveau l'onglet Modifications et faisons un peu plus de codage HTML. Revenons dans un texte sublime. Je veux que ce mot de paragraphe soit audacieux. La façon dont nous faisons cela est de l'envelopper avec des éléments gras, et un nom de balise d'éléments gras est juste b. Si nous sauvegardons cela et revenons à Chrome et actualiser, vous verrez que le mot de paragraphe est maintenant gras. Si vous faites un clic droit sur une page quelconque, vous serez en mesure de l'inspecter, qui va ensuite explorer cet élément dans l'inspecteur d'éléments, et il le mettra en surbrillance. Si nous double-cliquez ensuite sur la grande balise et que nous changeons cela en I, qui signifie italique ou italique et appuyez sur « Retour », vous verrez que le paragraphe est maintenant en italique. La raison pour laquelle je vous montre ceci est que vous n'avez pas besoin de connaître tout un tas de CSS pour que les choses soient audacieuses, pour que les choses soient des en-têtes, pour que les choses soient un peu différentes sur une page HTML. La prochaine chose est un élément d'image. Revenons à Sublime Text et ajoutons un élément image. Pour écrire un élément image, nous tapons img, je vais appuyer sur « Retour », et Sublime Text va me donner un attribut source à remplir. Il ne va pas non plus me donner une balise de fermeture, et c'est une exception à la règle. Un élément image n'a pas de balise de fermeture car vous ne pouvez rien y mettre. Maintenant, ce que nous sommes censés donner à l'image est un fichier à afficher dans l'attribut source. D' où est-ce qu'on obtient ce dossier ? Eh bien, allons sur Chrome et téléchargeons une image. Ouvrons un nouvel onglet, permet de rechercher le chat, parce que l'Internet est tout au sujet des chats. Nous allons à l'onglet Images et nous allons cliquer sur cette image ici. Maintenant, si nous cliquons avec le bouton droit de la souris et disons, « Ouvrir l'image dans un nouvel onglet », ce que nous avons ici sont deux options différentes pour afficher cette image. La première option est que nous pouvons cliquer avec le bouton droit de la souris et nous disons «  Enregistrer l'image sous », puis nous créons un nouveau dossier appelé img. Ensuite, à l'intérieur de ce dossier img, nous enregistrons ceci comme cat.jpeg, enregistrez. Merci beaucoup. Fermons cela et à l'intérieur de Sublime Text, dans l'attribut source, nous allons taper img/cat. jpeg. Sauvegardons cela, revenons à Chrome, revenons à notre page HTML de test, nous allons actualiser ici. Il y a notre image chat, elle vient de notre système de fichiers local, et c'est ce qu'on appelle une URL relative. L' autre façon de le faire est d'utiliser une URL absolue. Si nous revenons à cet onglet, vous verrez qu'il y a cette très longue URL. Il s'agit d'une URL absolue. Si nous tapons ceci à nouveau, cela nous amènera à cette image, et cette image est stockée quelque part sur Internet. Nous copions cette URL et allons dans Sublime Text, puis la coller dans nos attributs source. Sauvegardez ceci, revenez à Chrome, revenez à notre page de test et actualisez, rien n'aura changé. Mais vous verrez que l'attribut source a maintenant cette image qui est située quelque part sur Internet. C' est les deux façons de fournir un fichier à un élément image, appliquera la même théorie à quelques autres éléments plus tard dans la classe. Maintenant, ce que je veux essayer de faire ici est de changer ce test.HTML en quelque chose de différence. Comment on fait ça ? Eh bien, nous devons en fait écrire un élément de titre et mettre dans les éléments de tête de notre page. Vous pouvez voir sur le côté droit de l'élément dans spectra qu'il y a un élément « html », un élément « head » et l'élément « body », mais nous n'avons pas écrit aucun de ces éléments . Pour vérifier cela, je peux vous montrer ce que le navigateur voit. Nous allons à View Developer et View Source, et c'est ce qu'il a. ne voit pas un HTML, un corps ou un élément de tête. Que se passe-t-il ici ? Fermons ceci et revenons à cet inspecteur des éléments. Ces éléments HTML, tête et corps sont achetés par Chrome parce que nous les avons laissés de côté. C' est assez intelligent et plutôt cool. Mais il est préférable de mettre ces éléments dans notre page HTML. Allons-y et faisons-ça. À l'intérieur de Sublime Text, la première chose que je vais faire est d'écrire le doctype, et cela indique au navigateur exactement quelle version de html nous écrivons. Allons pour plus petit que, un point d'exclamation, tapez DOCTYPE en majuscules, puis spécifiez ce qu'est le doctype et c'est HTML. Alors nous fermerons ça. Ce que nous disons ici, c'est que nous écrivons un HTML 5, qui est le plus récent et le plus grand HTML. Il se trouve aussi être très court, ce qui est génial pour nous. La prochaine chose que je vais faire est d'écrire mon élément HTML. Maintenant, si j'appuie sur « Retour » ici, ça fait beaucoup de travail pour moi. Je vais appuyer sur les commandes ici et écrire tout cela un peu plus manuellement. Maintenant, je vais écrire la balise de fermeture pour HTML, ce qui sublime nous a aidé avec un peu, puis j'écrirai mes éléments de tête. L' élément head est l'endroit où nous stockons tous les éléments invisibles notre page et l'un d'entre eux est les éléments title. Nous pouvons changer ceci pour tester la page, et c'est la seule chose que je vais mettre dans mon élément de tête. Le suivant est les éléments du corps. Maintenant, l'élément de corps est l'endroit où nous stockons tout le contenu visible au-dessus. Je vais couper cette balise de fermeture et je vais la coller juste avant la balise HTML de fermeture. Ensuite, je vais sélectionner tout le contenu et appuyer sur l'onglet et le densifier, et la raison pour laquelle je fais cela est parce que c'est plus facile à lire et c'est plus facile à comprendre. Vous pouvez comprendre quelles boîtes vont à l'intérieur de quelles boîtes. Sauvegardons ceci et allons à Google Chrome et actualisons à nouveau, et vous verrez que rien n'a beaucoup changé ici, mais nous avons maintenant un titre sur notre onglet de la page de test. Fantastique. Nous sélectionnons ensuite View Developer et View Source à nouveau, vous verrez que maintenant il a tout un tas d'éléments à travailler avec, ce qui est fantastique. Clôtons ça et laisse-moi te montrer un autre élément. Cet élément est un élément de saut de ligne. Permettez-moi de le démontrer dans Sublime Text. Juste au-dessus de l'image, je vais créer une autre balise de paragraphe, et à l'intérieur de cette balise de paragraphe je dirai, « Mon nom est », mais je veux mettre ceci sur une nouvelle ligne. Vous pouvez vous attendre à ce que vous puissiez appuyer sur Entrée et taper le nom du chat. Chat Kitty, assez original. Je vais appuyer sur « Enregistrer », puis revenir à Chrome, Actualiser. Nous avons la balise de paragraphe, mais il n'y a pas de saut de ligne. Pourquoi ça n'a pas marché et comment le faire fonctionner ? La raison pour laquelle cela n'a pas fonctionné est que tous les espaces, tous les retours, les espaces, ils sont tous vus comme un seul espace en HTML. Pour l'obtenir sur une nouvelle ligne, nous devons insérer un élément de saut de ligne. Allons à Sublime Text et où il y a un saut de ligne ici, nous tapons simplement un élément br. Encore une fois, c'est une exception à la règle, il n'y a pas de balise de fermeture car vous ne pouvez rien y mettre. Sauvegardons cela, revenons à Chrome et Rafraîchir et voilà. C' est sur une nouvelle ligne. Nous avons fait un tas de changements. Maintenant, nous pouvons revenir à GitHub Desktop, et vous verrez que le fichier test.html a ce point jaune dedans, et ce cat.jpeg a ce plus vert dessus. Sur le test.html, vous pouvez voir qu'il enlève quelques lignes, puis ajoute un tas de lignes supplémentaires. Lorsque vous validez un fichier et obtenez, il se souviendra de ce que vous supprimez et se souviendra de ce que vous ajoutez. Le résumé n'est pas déjà rempli pendant cette période. Ce que nous allons faire est de dire « Ajout de l'image de chat et quelques éléments supplémentaires ». Vous pouvez ajouter une description si vous le voulez, mais je le fais seulement s'il y a beaucoup de changements et j'ai vraiment besoin d'être explicite sur ce que je viens de faire. Alors nous allons nous engager à maître. Vous pouvez voir à nouveau l'historique des modifications en accédant à l'onglet Historique. L' original était nos commits initiaux, puis nous avons créé le fichier test.html, puis nous avons ajouté une image de chat et quelques éléments supplémentaires. Maintenant, ce qui est aussi génial à ce sujet, c'est que, dans Sublime Text, si vous commencez à faire des changements comme « Je suis un gros titre, regardez-moi », et puis vous enregistrez cela, vous verrez qu'il y a ces petits points qui apparaissent. Ce que cela signifie, c'est que le fichier a été modifié et sublime prend cela parce qu'il travaille avec Git pour vous avertir de ces changements. Vous venez d'écrire votre premier bit de HTML. Je vous suggère de faire tomber l'air ou de laisser sortir, ensuite c'est de le publier en ligne pour que le monde entier puisse le voir. 5. Mettre votre site en ligne: Nous avons fait quelques commandes et c'est fantastique. Mais, si quelque chose arrive à notre ordinateur, comme la foudre frappe du tout, on renverse de la bière au gingembre dessus, alors notre ordinateur est détruit, tout notre code sera perdu. Ce que nous devons faire est de synchroniser notre code et commets avec GitHub.com afin que notre code soit sauvegardé en ligne. Pendant que nous y sommes, nous publierons notre site pour que le monde puisse le voir. Oui. Allons sur Chrome et configurez un compte GitHub. J' ouvre un nouvel onglet, allez sur GitHub.com et juste là, vous pouvez vous inscrire. Je vais utiliser TTKB comme nom d'utilisateur, et mon e-mail peut être richplus1@taptapkaboom.com, mon mot de passe va être un secret. Ensuite, vous cliquez sur S'inscrire à GitHub. La première chose que vous devez faire est de vérifier votre compte. Faisons ça et tu dois redresser cette chose. On y va. Ce processus peut changer de temps à autre. Si ce n'est pas exactement comme ça quand vous vous inscrivez, ne stress pas. Je suis un haut pour un compte gratuit, j'utilise toujours un compte gratuit pour moi-même. Faites défiler. Je n'ai pas besoin d'aide pour configurer une organisation et je ne veux pas de mises à jour de GitHub. Je vais appuyer sur Continuer, et je vais revenir en haut. Quel est votre niveau d'expérience en programmation ? Nouveau dans la programmation ? Pourquoi prévoyez-vous utiliser GitHub ? Apprendre à coder ? Oui. Poster un projet ? Oui. Créer un site Web avec GitHub Pages ? Oui. Ensuite, je peux sauter mes intérêts et ensuite soumettre. Cette étape est vraiment importante. Vous devez vérifier votre adresse e-mail. Dans votre boîte de réception, vous verrez quelque chose comme ça. Appuyez simplement sur le bouton Vérifier l'adresse e-mail. On y va. Votre e-mail a été vérifié. Ensuite, vous devriez recevoir un e-mail vous accueillant sur GitHub. Bienvenue sur GitHub, TTKB. Ensuite, il a tout un tas de choses sur lesquelles vous pouvez cliquer. Fantastique. Si vous avez été jusqu'ici, vous avez configuré votre compte GitHub à 100 % correctement. Une fois que vous vous êtes inscrit sur GitHub.com et que vous avez vérifié votre adresse e-mail, revenez sur GitHub Desktop, puis cliquez sur GitHub Desktop et allez dans Préférences. Ensuite, vous voulez vous connecter à GitHub.com. Saisissez votre nom d'utilisateur ou votre adresse e-mail, puis saisissez votre mot de passe. Cliquez ensuite sur Se connecter. Une fois connecté, vous pouvez cliquer sur Publier le référentiel. En passant par ce processus, vous synchroniserez ensuite votre code et vos modifications avec GitHub.com. Le nom semble correct, la description semble correcte. Mais, nous ne voulons pas garder ce code privé parce que plus tard nous voulons publier nos sites comme une page GitHub pour le monde entier à voir, et nous ne pouvons pas le faire si c'est privé. Une fois ces informations vérifiées deux fois, cliquez sur Publier le référentiel. On y va. Vous devez être synchronisé avec GitHub.com. Maintenant, pour vérifier deux fois, allez sur Chrome, allez sur GitHub.com. Assurez-vous d'avoir actualisé la page. Vous devriez voir votre rapport sur la gauche. Cliquez dessus et vous serez présenté avec votre page de rapport GitHub. Il se passe beaucoup de choses ici. Mais ce que je veux que vous fassiez est d'aller dans l'onglet Paramètres et faites défiler vers le bas jusqu'à ce que vous arriviez à GitHub Pages. Sélectionnez ensuite votre source et sélectionnez la branche principale. Cela actualisera la page. Ensuite, faites défiler vers le bas jusqu'à GitHub Pages. Vous verrez qu'il indique que votre site est prêt à être publié à cette URL. Ensuite, cliquez sur cette URL et vous devriez trouver une page 404. C' est normal et c'est parfaitement bien. La prochaine chose est de taper, test.html après votre URL. Puis appuyez sur Retour et on y va. Vous devriez voir votre page de test avec M. Kitty Cat. Maintenant, vous pouvez partager cette URL avec le monde entier. Ce qui est vraiment cool, c'est que lorsque vous revenez au texte sublime et mettez à jour du HTML, comme hey, « Je suis un gros titre » et que vous enregistrez cela, puis vous retournez au bureau GitHub, vous verrez ces changements que nous avons couverts mais vous ajoutez ensuite votre résumé. Vous vous engagez à maîtriser, puis vous poussez à nouveau à l'origine. Lorsque vous poussez vers l'origine, cela mettra automatiquement à jour cette page en ligne pour que tout le monde puisse la voir. C' est vraiment, vraiment cool et puissant. Vous venez de publier votre premier site pour le monde entier et il est synchronisé en toute sécurité avec GitHub.com. Chaque fois que vous mettez à jour votre code et poussez l'origine sur GitHub, votre site sera mis à jour. Vous êtes sur le chemin de prendre le contrôle d'Internet. Ensuite, tout est d'apprendre sur CSS. 6. Qu'est-ce que le CSS ?: Nous avons écrit du HTML, mais il n'a pas l'air joli. C' est là que CSS entre en jeu. Fondamentalement, le CSS que nous écrivons rend notre HTML bien paraître en remplaçant les styles par défaut ennuyeux fournis par le navigateur. Nous écrivons CSS pour dire au navigateur comment les éléments HTML devraient ressembler. Pour ce faire, nous écrivons un nom de propriété et une valeur séparés par un deux-points et se terminant par un point-virgule. Nous pouvons styliser un élément avec autant de paires de propriétés que nous le souhaitons. Il y a des tonnes de propriétés que vous pouvez écrire pour changer l'apparence et la sensation d'un élément. Des propriétés comme la largeur, la hauteur, couleur d' arrière-plan, la famille de polices, la taille de la police, et bien plus encore. Maintenant, il existe deux méthodes d'écriture CSS. La première consiste à utiliser des styles Inline, où nous stylisons un élément en utilisant ses attributs de style. La seconde consiste à utiliser des ensembles de règles, où nous sélectionnons les éléments à Style, suivis des propriétés CSS et des valeurs de ces éléments. Nous aborderons ces deux méthodes dans la prochaine leçon. 7. Écrire en CSS: Dans cette leçon, nous aborderons l'écriture de CSS avec des styles en ligne et des jeux de règles. Il est préférable d'expliquer en entrant dans le code. Donc, dans un texte sublime, créons un nouveau fichier, puis enregistrons ce fichier comme un nouveau fichier HTML. Je vais l'appeler style-test.html et ensuite je vais enregistrer cela. Parce que Sublime sait qu'il s'agit d'un fichier HTML, je vais commencer à écrire ma balise HTML, puis appuyer sur retour quand il me le suggère. Il vient d'écrire tout un tas de HTML pour moi, ce qui est fantastique. Je vais donner à ce document un titre de test de style, puis j'irai dans mon corps et commencerai à écrire quelques éléments HTML. Je vais commencer avec quelques éléments h un, et je vais les appeler en tête un - un et ensuite je vais copier ceci et le coller deux fois, tête un - deux, en tête un - trois et ensuite ce que je vais faire est que je vais créer un h deux et faire de même chose ici. Rubrique deux, un , deux, deux, trois. Je vais enregistrer ceci et je vais aller dans mon finder et faire glisser le test de style dans Google Chrome. C' est à quoi il ressemble par défaut, trois titres un et trois titres deux. Maintenant, je vais commencer à les coiffer. Donc, à l'intérieur de Sublime Text sur mes premiers éléments h un, je vais ajouter un attribut de style, et à l'intérieur d'ici, je peux commencer à ajouter mon nom de propriété et des paires de valeur. Donc, la première chose que je vais faire est d'aller pour une taille de police, donc taille de police, appuyez sur retour. Allons pour quelque chose comme 30 pixels, et puis je veux ajouter une couleur donc je vais aller pour la couleur et il est orthographié à la façon américaine. Tout en HTML et CSS est orthographié à la manière américaine, juste pour que vous sachiez, un deux-points, qu'est-ce qu'une valeur de couleur ? Eh bien, il y a quelques façons de faire la couleur en CSS, je vais vous montrer deux dans cette leçon. Allons donc à Google Chrome. Ouvrons un nouvel onglet et tapez htmlcolorcodes.com. Sur ce site, il y a quelques façons d'obtenir des couleurs. Défilons un peu vers le bas et ici nous avons un sélecteur de couleurs vraiment agréable. Il ressemble beaucoup à un sélecteur de couleurs que vous trouverez dans Photoshop ou application de conception. Donc, si vous êtes à l'aise avec Photoshop ou quelque chose comme ça, utilisez-le là à la place si vous le souhaitez. Maintenant, c'est le moyen le plus simple de sélectionner une couleur. Une fois que vous êtes satisfait de la couleur que vous avez, vous pouvez alors double-cliquer et vous pouvez copier cette valeur. Vous pouvez revenir à Sublime Text et le coller dans. Rappelez-vous de mettre un point-virgule après, et vous verrez qu'il s'agit d'une valeur de code hexadécimal et qu'il a ce symbole de hachage avant ce nombre. Donc, lorsque nous enregistrons ceci et revenons à Google Chrome, nous pouvons ensuite actualiser et vous verrez que notre titre un - un a maintenant une couleur et une taille de police. Une autre façon de faire des couleurs en CSS est d'utiliser des noms de couleur. Maintenant, si vous revenez au site Web des codes de couleur HTML et faites défiler un peu vers le bas jusqu'à ce que vous arriviez à ces noms de couleur, faites défiler un peu plus loin, puis cliquez sur parcourir la liste complète. Ensuite, faites défiler à nouveau vers le bas et ce que vous verrez ici est qu'il y a quelques noms qui ont reçu des valeurs de couleur différentes, et parfois ceux-ci sont beaucoup plus faciles à retenir que les valeurs de code hexadécimal. Donc, si je me souviens du saumon et que je suis dans Sublime Text, et au lieu de cette couleur je tape juste saumon et je sauve, puis retourne dans Google Chrome et puis rafraîchir ici, vous verrez que la couleur arrive, ce qui est assez Pratique. Donc, je vais utiliser ces noms de couleurs dans cette vidéo juste pour rester très simple. Maintenant, de retour dans Sublime Text, ce que je veux faire, c'est que je veux styler tous ces titres de la même manière. Donc, ce que je vais faire est de sélectionner les attributs de style que je vais copier, puis je vais le coller encore et encore et encore et encore et encore et encore. Je sauverai ensuite. Je vais revenir à Chrome et rafraîchir ici, et là nous allons, tous nos titres maintenant regarder exactement le même. C' est vraiment cool parce que cela signifie que nos têtes, qui sont censées être vraiment grandes, peuvent maintenant aussi avoir la même taille que nos deux titres. Maintenant, je veux coiffer mon titre deux légèrement différemment. Donc, je vais aller à Sublime Text et puis mes deux h, changeons la taille de la police à environ 20 pixels et la couleur, je vais aller pour le rose chaud. Ensuite, ce que je vais faire est que je vais sélectionner ces valeurs ici et je vais les copier et les coller sur les h deux autres éléments. Je vais ensuite enregistrer cela, revenir à Chrome et actualiser. Maintenant, je peux voir que les deux éléments de titre sont légèrement différents. Maintenant, si vous ne l'avez pas déjà ramassé, dans Sublime Text, copier et coller ces valeurs encore et encore peut se sentir un peu répétitif. En outre, il y a beaucoup de CSS ici, par rapport à combien de HTML et combien de contenu est réellement ici et vous commencez à obtenir tous ces sauts de ligne différents qui se passe homme, c'est un peu désordonné. Donc, ce que j'aimerais faire ici, c'est passer du style en ligne au style d'ensemble de règles. L' une des façons dont nous pouvons le faire est de créer un élément de style à l'intérieur de l'élément de tête. Créons un élément de style et vous verrez que Sublime nous donne un attribut de type texte CSS. Nous n'avons pas nécessairement besoin de cela, mais encore une fois, c'est vraiment bon d'être précis. Maintenant, à l'intérieur de cet élément de style, nous pouvons commencer à faire un style CSS. Donc, ce que je vais faire d'abord est styliser mes éléments h one et comment je le fais est en sélectionnant tous les éléments h un , puis en déclarant que tous les éléments h un devraient avoir une taille de police de 30 pixels. Ensuite, je fais une autre déclaration que tout le monde devrait avoir une couleur de saumon. Maintenant, c'est l'équivalent de cet attribut et sa valeur sur les trois éléments h un. Donc, je vais supprimer ces attributs comme ça. Maintenant, ce qu'on appelle c'est un ensemble de règles. C' est votre instruction de sélecteur qui cible un tas d'éléments à styliser. Ensuite, dans ces accolades se trouve votre bloc de déclaration, et chaque ligne est appelée une déclaration avec une propriété de déclaration et une valeur. Sauvegardons ceci, puis allons à Google Chrome et actualisons, et rien ne s'est passé. Mais vérifiez ceci, si nous faisons un clic droit et inspectons ces éléments, vous verrez maintenant qu'il y a ce panneau d'inspecteur d'éléments, et puis il y a un tas de propriétés CSS en bas ici. Vous verrez que ce h one a une taille de police de 30 pixels et une couleur de saumon. Donc, si nous voulions changer la taille de la police, nous cliquerons sur la valeur de la taille de la police et la changerons à quelque chose comme 50 pixels, cela changerait tous. Maintenant, si vous avez cliqué sur ce h deux éléments et que vous voulez changer sa taille de police, vous pouvez le changer à 50 pixels, mais juste un d'entre eux changerait. Vous pouvez donc voir les différences entre le style en ligne et le style de jeu de règles ici. Maintenant, quand nous actualisons notre page, tout revient à la normale. Donc, si nous revenons à Sublime Text et nous voulons changer notre couleur pour peut-être quelque chose comme la sarcelle. Vous pouvez voir à quel point cela a été comparé à la copie et au collage entre les différents éléments. Donc, je vais enregistrer cela et revenir à Chrome et rafraîchir. Maintenant, nous allons sur le style est h deux avec des ensembles de règles aussi. Donc, ce que je vais faire est de créer un autre ensemble de règles. Je vais sélectionner tous les h deux éléments, puis je ferai une déclaration que tous les h deux éléments devraient avoir une couleur de rouge. Alors je sauverai. Ensuite, revenons à Chrome et actualisons, et que s'est-il passé ici ? C' est une très bonne question. Donc, si nous inspectons cet élément h deux, vous verrez que le style h deux vient à travers, mais il est rayé et au lieu de cela, cette couleur de rose chaud a priorité. Pourquoi cela arrive-t-il ? Eh bien, l'idée clé ici est que le style plus spécifique aura priorité. Donc ce qui se passe ici, c'est que nous disons tous les deux, nous voulons que vous ayez une couleur rouge. Mais ce qui se passe sur les éléments réels, c'est que nous disons aux éléments qu'il a une couleur de rose vif, qui signifie que c'est plus spécifique parce que seul cet élément va avoir une couleur de rose vif. Donc, cela signifie que si nous décochons la couleur du rose chaud, il aura alors une couleur de rouge, ce qui est assez intéressant. Si nous revenons à Sublime Text, faites défiler vers le bas et supprimez toutes les déclarations de couleur des styles en ligne, alors que pensez-vous qu'il se passera ? Revenons à Chrome, rafraîchissons et voilà. Tous nos titres sont désormais rouges, mais ils ont toujours une taille de police de 20 pixels. Donc, lorsque vous faites un style en ligne et un style d'ensemble de règles, ils se combinent, ils ne s'écrivent pas à moins qu'il n'y ait un conflit. En cas de conflit, n'oubliez pas que le style plus spécifique aura priorité. Revenons maintenant à Sublime Text et sortons cette taille de police de 20 pixels et mettez-le dans le jeu de règles h deux, puis nous pouvons supprimer tous ces attributs de style. Maintenant, je vois clairement ce qui se passe. C' est bien, bien mieux. Maintenant, quand j'ai mentionné les conflits, je parlais de style inline versets règle style. Mais que se passe-t-il s'il y a un conflit dans le style de l'ensemble de règles ? Si j'écris un autre H_2 ici et que je mets une couleur de vert, que va-t-il se passer ? Sauvegardons ceci et découvrons. Je vais rafraîchir ici, vous verrez que la taille de la police est toujours la même, mais elle est maintenant verte. Ce qui s'est passé, c'est que s'il y a deux styles qui ont la même spécificité, alors celui qui a été écrit en dernier a priorité. Vous pouvez voir ici qui dit test de style ligne HTML 16. Celui-ci était la ligne HTML de test de style 11. Celui qui a été écrit en dernier a alors priorité. Mais maintenant, que se passe-t-il si nous voulons que certains de ces éléments soient différents ? Une façon de faire une différence entre un ou plusieurs éléments est de donner à un élément un attribut de classe, puis de styliser les éléments avec cette classe différemment. Allons dans Sublime Text et faisons ça. Si nous allons à ce H1 au milieu et lui donnons une classe de gros, et ensuite nous copions et collons ce style sur ce H_2 et le dernier H_2, nous sauvegardons cela, nous retournons à Chrome, nous rafraîchissons. Rien ne s'est passé. Donc la classe des grands ne fait rien en fait. Ce que nous devons faire est en fait écrire quelques styles pour cette classe. Revenons à Sublime Text et juste en dessous de ce H_2, nous allons écrire notre sélecteur pour tous les éléments avec une classe de gros. La façon dont nous le faisons est de mettre un point, puis de mettre le nom de la classe. Ce que cela signifie, c'est que nous disons tous les éléments avec une classe de grand, je déclare que vous devriez, et que va-t-on faire ? Définissons la taille de la police à quelque chose comme 60 pixels. Ensuite, nous allons enregistrer ceci, revenir à Chrome, et actualiser. Vous verrez ici que seuls les éléments avec une classe de gros avaient cette taille de police énorme. Peu importe si c'est un élément H_1 ou H_2. Maintenant, si nous revenons au texte sublime et nous mettons une classe sur la première majuscule, puis je copie ceci, et je le mets sur ce H_2 ici, et puis si je copie en majuscules et l'ajoute au premier H_2, ce qui signifie qu'il aura deux articles, l' un de gros et l'autre de majuscules et ensuite sauver. Ensuite, j'écris un sélecteur pour les majuscules, puis un bloc de déclaration et lui donne texte-transformation en majuscules, et enregistrez cela, revenez à Google Chrome, et actualisez, vous verrez que tous les éléments avec une classe de majuscules sont maintenant majuscules. Si nous sélectionnons cet élément H_2 avec la classe de gros et de majuscules, nous pouvons voir que parce qu'il a une classe de majuscules, il a une transformation de texte en majuscules. Ensuite, parce qu'il a une classe de gros, il a une taille de police de 60 pixels. Ce H_1, parce qu'il a une classe de majuscules, il a une transformation de texte en majuscules. Ce H_1, parce qu'il a une classe de gros, il a une taille de police de 60 pixels. C' est vraiment puissant. Maintenant, ce qui est encore plus puissant est dans Sublime Text, ou votre éditeur de code, vous pouvez dire tous les éléments avec une classe de grandes et majuscules, je déclare que vous devriez avoir une couleur de marine. Voyons ce que ça fait. Nous sauvegardons, nous revenons à Chrome, et actualisons, et vous verrez qu'un seul élément va réellement changer de couleur parce que c'est le seul élément qui a une classe de gros et de majuscules. L' idée de sélecteurs est vraiment puissante et elle peut devenir vraiment complexe. Maintenant, laissez-moi vous donner un autre exemple de sélecteur vraiment cool. A l'intérieur de mon premier H_1, j'ai ce mot intitulé. Comment pourrais-je faire de cette direction une couleur différente ? Ce que nous allons utiliser est un élément span. Une plage est comme une boîte vide par défaut. Il n'a pas de styles par défaut et hérite des styles de texte de l'élément dont il est à l'intérieur. Écrivons span, puis après en avoir frappé un, nous allons ensuite enfermer cette travée. Je vais enregistrer ici, revenir à Google Chrome, et rafraîchir, et rien n'aura changé. Maintenant, revenons à Sublime Text et écrivons une autre travée juste à l'extérieur d'ici et mettons dans l'élément span. Je vais enregistrer cela, retourner à Chrome, et rafraîchir. Ce sera le texte par défaut. Il n'y aura rien de spécial là-dessus. Vous verrez que cette travée, elle ressemble au cap dans lequel elle est à l'intérieur, et vous verrez que cette travée ne ressemble à rien. Vérifie ça. Si nous devions styliser tous les éléments de span, et dire tous les éléments de span, je veux que vous ayez une couleur de violet. Sauvegardons, et revenons à Chrome et actualisons. Vous verrez que cet élément span et cet élément span sont maintenant tous les deux violets, ce qui a du sens. De retour dans Sublime Text, si nous devions dire, tous les éléments de span à l'intérieur d'un H_1 être couleur violet, nous pouvons l'écrire comme ceci : H_1 space span. Alors on économiserait. Nous reviendrions à Chrome et rafraîchir, et seule la portée qui est à l'intérieur de la H_1 serait violet, ce qui est vraiment, vraiment cool. Ce que nous avons vu ici est super puissant. De retour dans Sublime Text, j'ai trouvé un assez frustrant d'avoir à faire défiler entre mes styles et mon HTML. Si je voulais créer plusieurs pages, je devrais copier les éléments de style avec tous les styles qu'il contient et coller dans chaque page que je veux regarder la même. Ensuite, si j'ai fait un changement, je devrais copier et coller dans toutes les autres pages à nouveau. Comment pouvons-nous contourner cela ? Eh bien, regarde ça. Je vais créer un nouveau fichier, et je vais l'enregistrer en tant que fichier CSS. Je vais créer un nouveau dossier appelé CSS. À l'intérieur du dossier CSS, je vais enregistrer ce fichier en tant que point de test CSS. Ensuite, je vais enregistrer ceci, et vous verrez que Sublime reconnaît cela comme un fichier CSS. Ensuite, je vais prendre tous ces styles à l'intérieur des éléments de style, je vais les couper, je vais les mettre en CSS test, je vais les coller. Je vais ensuite sélectionner la plupart d'entre eux, puis appuyez sur Maj et Tab pour les mettre en retrait, puis je vais enregistrer ce fichier. Ensuite, je reviendrai au test de style de HTML. Je vais enregistrer ce fichier, revenir à Chrome et actualiser. Vous verrez que tous les styles ont disparu maintenant. C' est vraiment cool parce que, wow, je peux réellement voir tout mon HTML et je n'ai pas à continuer à faire défiler vers le haut et vers le bas. Mais comment pouvons-nous maintenant arriver au fichier de style à appliquer à ce fichier HTML ? façon dont nous faisons cela est, au lieu d'avoir les éléments de style, nous allons maintenant avoir un élément de lien. Nous allons commencer à taper le lien comme ça, et juste comme ça, Sublime Text remplira le reste pour nous. Ces attributs de ligne sont synonymes de relation. Nous disons, nous allons lier à ce fichier, et la relation est des feuilles de style, et le type va être CSS texte. Ce href ressemble beaucoup à une étiquette d'ancrage href. Nous pouvons soit utiliser une URL absolue, toutes une URL relative. L' URL absolue peut être localisée n'importe où sur Internet, mais nous avons un fichier CSS que nous venons de créer. Je dirai barre oblique CSS, et nous appelons cela test.CSS. Vérifions ça. On y va. Test.CSS. Fantastique. Je vais enregistrer ceci, puis revenir à mon navigateur, actualiser. Tout notre CSS est de retour maintenant. C' est génial parce que dans notre éditeur de code, je peux juste lire mon HTML. Je n'ai pas besoin de continuer à faire défiler de haut en bas, changer CSS et à changer HTML, et cela signifie que je peux créer plusieurs pages qui utilisent le même fichier CSS. Faisons encore une chose avant de mettre fin à cette leçon. Dans mon fichier test.CSS, je vais donner au corps une couleur d'arrière-plan. Allons pour l'élément du corps, et je veux la couleur de fond. De quelle couleur est-ce que je veux qu'il soit ? Essayons un gris clair. Quelque chose comme ça. Rafraîchir. On y va. Ce n'est pas trop joli, mais maintenant vous avez appris une autre propriété CSS. Si vous appuyez sur le corps et appuyez sur cette valeur, peut-être que nous pouvons trouver quelque chose qui est un peu plus coloré. Je vais taper jaune, jaune-vert, vert-jaune. Qu' en est-il du jaune verge d'or clair ou du jaune clair ? jaune verge d'or léger sonne étonnant. C' est peut-être l'un des noms de couleurs les plus fantastiques que j'ai rencontré. Enfin, nous devons retourner au bureau GitHub et nous devons valider nos fichiers. Qu'avons-nous fait ? Nous avons créé un test CSS, page HTML et un fichier CSS. Que diriez-vous de ça pour un résumé ? Engagez-vous à maîtriser, et ensuite ce que nous allons faire est pousser l'origine. Cela va le synchroniser sur GitHub.com. Ensuite, nous pouvons retourner à notre navigateur, ouvrir un nouvel onglet, aller pour ttkb.github.io/cartoon-hero, et au lieu de tester HTML, nous irons pour style-test.html. S' il n'est pas trouvé immédiatement, cela pourrait prendre un peu de temps pour qu'il arrive. Rafraîchissons ici, actualisons à nouveau, actualisons à nouveau. On y va, enfin vivre. Maintenant, vous connaissez les bases de CSS. Dans la prochaine vidéo, nous allons parler de planification. Je sais que ça a l'air ennuyeux, mais ça vous aidera à devenir un ninja codant. 8. Planifier votre site internet: Je sais que vous ne voulez pas entendre cela, mais la planification est essentielle quand il s'agit de créer un site Web, même un site Web simple. Sans plan, nous pourrions coder inutilement pendant des jours et nous ne voulons pas le faire. Pour commencer, choisissez un personnage pour créer un site Web simple. Je vais faire un site web pour Wreck-it Ralph. La planification est un must. Normalement, je fais quelques croquis rapides pour voir à quoi je veux que mon site web ressemble. Ensuite, je crée ce que j'aime appeler une boîte filaire. C' est là que je dessine les éléments HTML sous forme de boîtes, leur donne des noms et indique quelles boîtes contiennent d'autres boîtes. Je n'essaie pas de tout planifier en une seule fois et souvent dessiner une flèche d'une boîte et de remplir les détails plus tard, sur une partie séparée de la page ou même sur une nouvelle page. Pour moi, planifier c'est comme regarder un labyrinthe d' haut et dessiner un itinéraire. C'est un guide. codage est comme courir dans ce labyrinthe tout en suivant le guide. Donc, je trouve difficile de planifier et de coder en même temps. Pour cette classe, j'ai fait une boîte filaire pour mon site de personnages. Il comprend un élément d'en-tête contenant le nom et l'image de profil de mon personnage, ainsi que des éléments principaux contenant des en-têtes , des paragraphes, des listes et une image et enfin un élément de pied de page contenant une petite quantité de texte. Maintenant, il est temps de créer votre propre boîte filaire. Vous n'avez pas besoin de savoir quoi que ce soit sur le design ou le style pour en créer un. Tout ce que vous devez savoir est que HTML est un tas de boîtes à l'intérieur des boîtes. J' ai inclus ma boîte filaire dans les ressources de la classe pour que vous puissiez vérifier. Vous pouvez l'utiliser comme référence si vous le souhaitez. Une fois que vous avez terminé la première partie de votre boîte filaire [inaudible], vous pouvez commencer à créer des sites Web de vos personnages. Si vous le souhaitez, publiez votre planification dans votre galerie de projets. 9. Le HTML de votre site internet: Mettons-nous nerdy et écrivons le code HTML pour la page web de notre personnage. Vous pouvez vous référer aux éléments HTML communs PDF dans les ressources de classe lors de l'écriture de votre HTML. Je vais passer en revue chaque élément HTML pendant que je l'écris. Maintenant, la seule chose qui a changé dans mon dossier « cartoon-hero » depuis que j'étais l'année dernière, c'est que j'ai maintenant un « box-wireframe.pdf ». Je vais ouvrir cela et y faire référence comme je code mon HTML. Vous pouvez voir que j'ai un élément d'en-tête, j'ai un élément principal, et un élément de pied de page tout le chemin en bas. Ce que je vais faire est de coder mon HTML de haut en bas et de me référer à ce document au fur et à mesure que je vais. Allons dans Sublime Text. Je vais créer un nouveau fichier, puis je vais enregistrer ce fichier sous index.html. La raison pour laquelle je fais cela est que le navigateur recherche d'abord ce fichier, et il le charge automatiquement. Si vous allez sur taptaptapkaboom.com, vous n'avez pas besoin de taper « index.html » ou « bar.html ». Il charge automatiquement le fichier index.html en premier. Sauvegardons ça. Ensuite, je peux écrire mes éléments HTML. Je vais appuyer sur Entrée. Je donnerai à ma page un titre de Wreck-It Ralph, puis je descends sur le corps. La première chose que je vais faire est d'écrire mes éléments d'en-tête. Maintenant, un élément d'en-tête dit : « Hé, c'est à quoi sert la page, c'est là que vont les en-têtes, c'est là que vont les grandes images. » Ce n'est pas vraiment le contenu du site, mais il est normalement grand et audacieux. Écrivons nos éléments d'en-tête. A l'intérieur de notre élément tête, nous allons écrire, un élément image qui va être notre avatar. Ensuite, nous allons écrire nos éléments h1 et mettre Wreck-It Ralph à l'intérieur de là. Maintenant, pour notre avatar, je vais avoir besoin d'une image. Allons à Google Chrome. Dans cet onglet, je peux rechercher Wreck-It Ralph. On y va. Allons aux images. Je vais chercher quelque chose qui ressemble à un avatar, de préférence carré, donc je n'ai pas à le recadrer. Défilons un peu vers le bas. Celui-ci a l'air assez bien, 440 par 450. Ça a l'air génial. Cliquez avec le bouton droit dessus. Allons ouvrir l'image dans un nouvel onglet. Ensuite, je vais à nouveau cliquer avec le bouton droit de la souris et « Enregistrer l'image sous ». À l'intérieur de mon dossier d'image, je vais l'enregistrer en tant que ralph-avatar, puis l'enregistrer. Ralph-avatar.jpeg. Je vais fermer ceci et fermer ceci, et je peux aussi fermer ceci. Ensuite, à l'intérieur de l'attribut source, je peux écrire img/ralph-avatar.jpeg, et c'est notre élément d'en-tête pour l'instant. Ce que je pense une grande pratique, surtout quand vous apprenez à coder, est d'utiliser des commentaires HTML. Je ne t'ai pas appris ça jusqu'à présent, alors écoutez. Juste au-dessus de mon en-tête, ce que je vais faire est que je vais écrire un commentaire pour moi-même juste pour qu'il soit abondamment clair ce qu'est cet élément suivant. Pour écrire un commentaire, vous optez pour un symbole moins que, un point d'exclamation, deux tirets, et je verrai tout sous ça gris, et cela signifie qu'il est engagé. Le navigateur ne peut pas comprendre cela, il ne le lira pas. À l'intérieur, je dirai, « éléments d'en-tête ». Ensuite, pour fermer les commentaires, je vais faire un tiret, puis un symbole supérieur à. On y va. C'est un moyen très facile de vous laisser des notes. Je vais économiser maintenant, et c'est une très bonne idée de sauver régulièrement votre travail. Reportez-vous au document de planification à l'intérieur de l'aperçu. Nous allons ensuite écrire notre élément principal avec un h2, un paragraphe et une image pour commencer. De retour dans Sublime, créons un nouveau commentaire. Maintenant, au lieu de taper ça, il y a un raccourci. Je peux appuyer sur « Commande » ou « Contrôle » et barre oblique avant. On y va. Je n'ai pas besoin de me rappeler comment écrire un commentaire HTML. Je vais taper « élément principal ». Puis, après, que nous pouvons écrire nos principaux éléments. Maintenant, notre élément principal est l'endroit où vont les parties principales de votre page Web. C' est assez explicite. Ensuite, nous avons un h2 et après notre h2, nous avons un paragraphe, et après le paragraphe, nous avons une image. A l'intérieur de la h2, qu'est-ce que c'était ? A propos de Ralph et un peu de lui plus une image. Disons « A propos de Ralph ». Maintenant, écrivons un peu sur lui. « Ralph est génial. C' est un méchant de jeu vidéo 8 bits qui parcourt la longueur de l'arcade pour prouver qu'il est un bon gars. » Ensuite, sous ça, nous avons une image. Je vais enregistrer et puis aller chercher une autre image. Allons dans Chrome à nouveau et cherchons Wreck-It Ralph. Allez dans « Images », puis sous « Outils », je vais sélectionner une grande image. On y va. Maintenant, j'en veux un avec lui et ses amis. Faites défiler un peu vers le bas. On y va. Ça a l'air plutôt bien. Que se passe-t-il s'il y a quelque chose d'un peu mieux ? Celle-ci a aussi l'air assez bien. Je vais cliquer sur celui-ci. Faites un clic droit Ouvrons dans un nouvel onglet. Cliquez à nouveau avec le bouton droit, « Enregistrer l'image sous ». Ensuite, à l'intérieur de notre dossier d'image, je dirai « ralph-bhig.jpeg ». Sauvegardez ça. On peut fermer ça, fermer ça. Ensuite, à l'intérieur de Sublime, nous pouvons taper « img/ralph-big.jpeg ». Ici, vous pouvez voir que j'ai mal orthographié ça. Je vais mettre un « h » là-dedans. On a eu un « h » par ici, Ralph-avatar, Ralph-big. Ça a l'air bien. Nous avons maintenant mis quelques éléments dans notre élément principal. Quelle est la prochaine ? Allons à « Aperçu », faites défiler un peu vers le bas. Nous avons un paragraphe, un h2, puis une liste ordonnée. Écrivons cette balise de paragraphe, et voici une légende. Je dirai : « Ralph et ses amis. » Je vais épeler des amis correctement. Ensuite, nous allons créer une liste ordonnée. Maintenant, ce qu'est une liste ordonnée, c'est essentiellement une liste avec des nombres sur le côté gauche. C' est vraiment cool parce que votre navigateur va créer ces numéros pour vous. Allons pour un ol pour la liste ordonnée. Dans cette liste ordonnée, il y aura quelques éléments de liste. Allons chercher un élément de liste. Ensuite, à l'intérieur de cette liste, on peut dire : « Il a de grandes mains. » On peut en créer un autre et on peut dire : « Il est traité comme un mauvais cul. » Ensuite, le troisième, on peut dire  : « Il essaie d'être le bon gars. » On y va. Je pense qu'il y avait en fait un autre élément ici, peut-être un h2. Revenons à l'aperçu des caractéristiques. Mettons ce h2 et tapons « Les caractéristiques de Ralph ». La pression est pleine lorsque vous tapez sur la caméra. Tout le monde regarde ton orthographe. Je vais sauver ça. Revenons à « Aperçu » et voyons ce qui se passe ensuite. Nous avons fait l'ol avec les éléments de la liste. Ensuite, il y a un h2 pour les amis, un paragraphe, et une liste non organisée. Retournons à Sublime. Ici, je peux écrire un autre « h2", « les amis de Ralph ». Ensuite, nous allons pour un élément de paragraphe. Maintenant, nous pouvons écrire un peu à ce sujet, « Ralph a des amis géniaux. Je pense que son meilleur ami est Glitch. Elle est géniale. » Ensuite, si nous revenons à « Aperçu », vous verrez que j'ai mis « & links ». Je veux que ces éléments de liste soient des liens. À l'intérieur de Sublime Text, je peux peut-être dire, « Cliquez sur les liens ci-dessous pour en savoir plus à leur sujet. » Quelque chose comme ça. Je vais sauver cela et puis créons une liste non ordonnée, ul. Ceci est différent d'une liste ordonnée. Au lieu de chiffres, ils seront [inaudibles] sur le côté gauche. Son premier ami est Pac-Man. Maintenant, je veux faire de Pac-Man un lien. Peut-être que je peux couper cela, écrire mes éléments d'ancrage, puis à l'intérieur de ces deux balises, je peux coller « Pac-Man ». Alors je veux aller quelque part. Où est-ce que Pac-Man va m'emmener ? Allons à Chrome. Cherchons Pac-Man, quelque chose comme ça. Faites défiler un peu vers le bas. On y va. Peut-être que vous pouvez aller à l'article Wikipédia. Je vais copier cette URL, aller à Sublime à nouveau et coller cela. Ensuite, je vais copier cet élément de liste, collez-le deux fois plus. Son deuxième ami sera Mario, ou peut-être Mario Brothers. Ou peut-être que ça peut être Mario et le suivant peut être Luigi. Luigi, on y va. Puis dans Chrome, je vais chercher Mario. Faites défiler un peu vers le bas, Mario Nintendo, Super Mario. Peut-être qu'on peut aller pour celle-là. On y va. Je vais copier cette URL, retourner à Sublime et la coller là-bas. Ensuite, cherchons Luigi, faites défiler encore et encore, allons à Wikipédia. Donc, je vais copier cette URL, je vais retourner à Sublime et la coller là dedans. Alors son dernier ami devrait évidemment être Vanellope von Schweetz. Alors nous allons taper, Vanellope von Schweetz. On y va. Quand on cherche Vanellope von Schweetz, on y va. Allons à ce premier lien. Acceptez les cookies. On y va. Il ne semble pas y avoir beaucoup d'informations ici. Oh, on y va. Il y a une vidéo. Arrêtons ça. Copions cette URL, revenons à Sublime et collez-la ici. On peut peut-être dire «  Glitch ». Je vais enregistrer ceci et peut-être que ce que nous pouvons faire ici est, mettre un peu de commentaires juste au-dessus de ces h2. Donc, je vais appuyer sur la barre oblique de commande pour les commentaires et je vais mettre dans un ami et ici, je vais appuyer sur Tab, puis la barre oblique de commande à nouveau et je vais copier et collez ce mot. C' est vraiment long et difficile à épeler. A propos de Ralph, c'est d'accord. Je ne pense pas que je dois mettre un commentaire là-dedans. Donc, nous avons fait notre élément principal, maintenant, faisons notre élément de pied de page. Donc, je vais créer un nouveau commentaire, élément de pied de page, puis écrire notre élément de pied de page. Maintenant, l'élément de pied de page est quelque chose qui devrait exister sur presque tous les sites Web, presque toutes les pages Web, et il devrait juste avoir quelques liens ou un peu d'informations sur le site. Peut-être qu'il y a un nouvel ensemble d'abonnement, des liens, un symbole de droit d'auteur, ce genre de choses. Ensuite, à l'intérieur de ces éléments de pied de page, j'écrirai mes éléments de paragraphe. Ici, nous pouvons dire que ce site a été créé lors d'une classe TaptaPkaBoom. Ensuite, nous pouvons écrire notre symbole de copyright même si nous n'avons pas vraiment de droits d'auteur sur le contenu, mais c'est toujours amusant à faire. Donc, la façon dont nous le faisons est d'utiliser une entité HTML. L' entité HTML pour un symbole de copyright, est comme ça. Vous tapez un symbole esperluette, puis allez, copiez, puis mettez un point-virgule après cela. Vous devriez voir qu'il devient violet ou couleur différente. Ensuite, vous pouvez mettre votre nom après ça. Puis classe TaptaPkaboom, je veux que cela aille sur mon site Web. Donc, je vais mettre une étiquette d'élément d'ancrage d'ouverture et puis après cela, je vais la fermer. Nous pouvons mettre un href et ici et lui dire d'aller à https://taptapkaboom.com et ensuite je vais sauver ça. Maintenant, nous avons fait tout ça sans regarder à quoi ça ressemble. C' est bon, c'est un processus HTML aussi simple, mais maintenant nous pouvons aller jeter un coup d'oeil si tout fonctionne. Ouvrons donc le Finder et faites glisser index.html dans Chrome. Nous pouvons fermer ce premier onglet et ensuite jeter un oeil à ce à quoi ressemble notre site. Nous avons notre image d'avatar, nous avons notre h1, nous avons un h2, Ralph est génial, nous avons ça dans un paragraphe, puis nous avons une très grande image, wow, c'est énorme. Alors faisons défiler un peu plus, Ralph et ses amis, c'est la légende. Un autre h2, et on y va. On a une liste ordonnée. Vous pouvez voir qu'il y a les chiffres sur le côté et on a les amis de Ralph au paragraphe. Ensuite, nous avons un tas d'éléments de liste dans une liste non ordonnée. Vous pouvez voir qu'il y a ces disques sur le côté au lieu de chiffres. Ensuite, nous avons enfin la balise de pied de page. Ça a l'air fantastique. Ce qui est vraiment important ici, c'est que, si vous n'avez pas de style sur votre page, les choses ont du sens. C' est ainsi qu'un moteur de recherche verra votre page. Donc, si cela a du sens pour vous sans aucun style, est devrait avoir un sens à un moteur de recherche. Maintenant, je veux juste vérifier que tout est là où il devrait être. Je vais donc cliquer sur Afficher, aller dans Développeur et ouvrir mes outils de développement. Laissez-nous défiler ici à l'intérieur de notre corps, nous avons notre en-tête, qui a l'air bien. À l'intérieur de nos principaux éléments, nous avons toutes ces choses principales. Ensuite, notre pied de page, nous y voilà. Fantastique. Vous pouvez voir que les commentaires sont ici aussi, mais Chrome ne sera pas prêter attention à ceux. Voyons si ces liens fonctionnent. Si je clique sur Pac-Man, va à Pac-Man et ce que je veux que cela fasse est ouvert dans un nouvel onglet. Revenons donc à Sublime Text et nous mettrons en target_blank. Je vais copier ceci et le coller sur tous les autres éléments d'ancrage. Il y en a un ici aussi. D' accord, je vais sauver ça. Revenons à Chrome et actualisons. Tu vois maintenant quand je clique sur Pac-Man, on y va, ouvre Pac-Man. Si je clique sur Mario, ouvre Mario. Luigi, on y va. Finalement, Vanellope von Schweetz, voilà. Fantastique. Fermons ça. Donc nos liens fonctionnent, les choses ont l'air bien. La dernière chose que je veux faire est, je veux un petit truc d'icône d'onglet. Je sais comment ça est appelé par peut-être pas. Ce que je vais vous montrer maintenant, c'est, comment Google pour quelque chose. Je pense que cela peut être appelé une icône d'onglet. Je vais donc chercher ça. Ouvrez un nouvel onglet et allez icône de l'onglet du navigateur, HTML, peut-être. Maintenant, vous pouvez commencer à parcourir les résultats. Stack Overflow est vraiment bon, vérifions ça. Comment ajouter une icône de l'onglet du navigateur, favicon, qui est un bon mot à connaître pour les sites Web. Défilons un peu vers le bas. Souvent, ce qui se passe est, quelqu'un va poser une question sur Stack Overflow et un tas de personnes donneront des réponses. Ensuite, vous cherchez une tique verte, et c'est souvent la bonne réponse. Ajoutez simplement le code suivant à l'élément de tête. On y va. Copions ça. favicons PNG sont pris en charge par la plupart des navigateurs, sauf pour les navigateurs qui sont IE inférieur ou égal à 10. Pour une compatibilité descendante, vous pouvez utiliser les favicons ICO. Je n'ai aucune idée de ce que c'est. Eh bien, oui, mais vous ne le faites probablement pas. Alors copions ça. Allons à Sublime et faites défiler vers le haut et mettons-le dans notre élément de tête. Non, nous ne l'avons pas copié. Alors revenons à Chrome, copiez cela, puis allez à Sublime et collez-le. Cela ressemble beaucoup à un lien avec une rangée de feuilles de style, mais évidemment différent car il a une rangée d'icône et il a un href. Donc, changeons le href et nous aurons besoin de fournir une image très probablement. Ce que je veux faire, c'est utiliser la même image que nous utilisons pour notre avatar. Donc, je vais copier ceci et le coller ici, puis je vais enregistrer. Revenons à Chrome et rafraîchissons ici et là nous allons. Nous avons maintenant une de ces choses qui s'appelle un favicon. Maintenant, si vous n'avez pas d'image carrée pour votre personnage ou votre héros de cinéma, recherchez quelque chose comme le redimensionnement d'image. On y va. ResizeImage.net, qui fonctionnera très bien. Simple Image Resizer, PicResize. Tous ces sites feront probablement un excellent travail. Essayez-les, recadrez votre image, puis téléchargez cette image et mettez-la dans votre HTML. Fermons ceci et nous pouvons fermer cet onglet aussi. Donc, ça a l'air plutôt bien. Il est maintenant prêt à être stylé, que nous allons couvrir dans la prochaine vidéo. Mais d'abord, venons dans notre code. Allons à GitHub Desktop. Oui, nous avons ajouté une boîte filaire, nous avons ajouté deux images et un fichier index.html. Donc, nous écrivons un résumé de écrit notre ou peut-être que nous pouvons dire, ajouté le fichier index.html de notre personnage et quelques images. Peut-être pour la description, nous pouvons dire a écrit le HTML et ajouté un favicon. Alors nous allons nous engager à maître. Une fois que vous avez fait cela, nous pouvons ensuite pousser l'origine et quand cela est fait, eh bien, alors allons dans notre navigateur, ouvrez un nouvel onglet, tapez votre nom d'utilisateur GitHub, le mien est tt et kb.github/cartoon hero et puis au lieu de tester, nous pourrions utiliser index.html ou nous pourrions simplement le laisser vide. Donc, essayons juste de le laisser vide, en appuyant sur retour. On y va. Maintenant semble beaucoup mieux dans l'écriture de index.html ou barre HTML ou test HTML après la barre oblique finale. Mais si tu veux, tu peux le faire aussi. Même chose. À ce stade, vous pouvez être assez fier de vous-même. Vous venez d'écrire le code HTML pour votre page web de caractères. Je pense que tu devrais te donner un « high 5 ». Oui. 10. Le CSS de votre site internet: Maintenant vient la partie amusante de notre site de personnages, le CSS.What est incroyable à propos de CSS est qu'avec elle, vous pouvez faire le même tas de HTML regardant très différent. Essayez de faire de votre site de héros correspondre à sa personnalité.Je vais travailler de haut en bas de la page et changer notre HTML un peu que nous écrivons le CSS. Je vous expliquerai tout en parcourant. Mais si vous voulez essayer quelque chose de différent, allez-y, simplement google ou jetez un oeil aux propriétés CSS communes pdf dans les ressources de classe. Voici à quoi ressemble notre page web sans CSS. Maintenant, nous arrivons à avoir un peu de plaisir. Je vais me référer à mon cadre de fil de boîte pdf à nouveau au cours de cette leçon. La première chose que je vais faire est d'aborder cet en-tête. Je veux qu'il soit très large et je vais lui donner une couleur orange. Pour l'avatar, je veux en faire un cercle avec une bordure et je veux que l'image et le H1 soient au milieu. Allons-y. À l'intérieur de Sublime Text je vais créer un nouveau fichier, et ce sera mon fichier CSS. Je vais enregistrer cela comme, point de héros CSS, à l'intérieur de mon dossier CSS. Là, nous allons. Ensuite, à l'intérieur de mon fichier d'index, je vais écrire, élément in-link , appuyez sur retour, et l' attribut role va être Stylesheet.Le type est CSS texte et le HRF va être CSS slash hero dot CSS.Je vais enregistrer ça. Puis à l'intérieur de mon héros CSS, je veux juste m'assurer que tout fonctionne. Je vais écrire quelques styles pour l'élément du corps et la couleur de fond, je vais juste dire rouge pour l'instant juste pour vérifier que cela fonctionne. Je vais retourner à Chrome et rafraîchir. Ta-da.it fonctionne. Revenons à Sublime Text. Enlevez ça. La première chose que je vais faire est de mettre ma marge à zéro. Quand je sauve cela et retourne à Chrome, vous verrez que sur la gauche et le haut, et espérons sur la droite et en bas, il n'y a plus de marge sur le corps. Maintenant, faisons un style d'en-tête. En dessous, allons-y pour notre élément d'en-tête. Ce que je veux d'abord faire est d'ajouter une couleur d'arrière-plan. Ma couleur que j'ai mémorisée est D14635. C' est une couleur orange. Sauvegardons cela.Revenons à Chrome et rafraîchir.Là, nous allons. C'est l'épave Ralph orange. Eh bien, je pense que c'est une épave orange Ralph. Alors ce que je veux faire est, je veux faire la rubrique, eh bien, H1 à l'intérieur de l'en-tête blanc. Donc, je vais dire H1 à l'intérieur de l'en-tête, couleur je veux que vous soyez blanc.Voilà nous allons. Alors ce que je veux faire est, je veux centrer la ligne H1 et l'image. Une façon de le faire est de définir la propriété text align au centre. Cela va ensuite aligner l'image et le H1 dans le milieu.Je vais enregistrer cela, revenir à Chrome et rafraîchir.Là, nous allons. Ça a l'air assez bien. Maintenant, je veux que mon image soit un cercle. Allons à Sublime Text et disons « hey, image à l'intérieur de l'entêtre.Je veux que vous soyez un cercle ». La façon dont nous le faisons est, c'est en disant rayon frontière. Vous le verrez ici, le rayon de la frontière, et on peut dire quelque chose comme un 150 pixels. Cela fera un très beau coin arrondi. Si je l'enregistre, revenons à Chrome et actualisons. Ouais, ça a l'air plutôt bien. Mais maintenant, je vais inspecter ces éléments et je veux en faire un cercle.Nous avons un rayon frontière de 150. Mais alors si je mets la largeur à 300 pixels, on y va, les choses deviennent circulaires. Je vais copier ce style et revenir à Sublime Text et coller dessus. Là-vous.Maintenant, quand je retourne à Chrome et je rafraîchis, il est circular.fantastic.Ensuite, je veux ajouter une bordure. Allons pour une frontière. Cette propriété de bordure est en fait un raccourci. La valeur va avoir trois choses différentes à elle.Nous allons voir à quel point il va être large. Je vais aller pour dix pixels, puis je vais définir le style de bordure, qui va être solide. Ensuite, je vais définir la couleur qui va être, #483A94, qui est cette couleur pourpre vraiment cool. Peut-être que je peux changer les 10 pixels à quelque chose comme 20 pixels.Là, nous allons, qui semble assez bon. Mais vous allez commencer à voir maintenant que ce n'est plus circulaire. C' est à cause du modèle de boîte. Ce mot de fantaisie.Mais ce que vous pouvez voir sur le côté droit ici est que j'ai 300 par 300 pixels, puis j'ai un rembourrage de rien, et puis j'ai une bordure de 20 pixels sur la gauche et 20 pixels sur la droite, ce qui en fait 340 pixels de large et 340 pixels de haut. Cela signifie que je dois augmenter mon rayon de frontière de 150 à 170. Comment ça a l'air ? Assez bon.Copions cela à nouveau.Là-vous.Revenons à Sublime Text et collez cela.Là-vous.Je vais enregistrer cela.Retourner à Chrome et rafraîchir.Fantastique. Maintenant, je veux un peu d'espace au-dessus de cette image et au-dessous du H1. Ce que je vais faire est dans Sublime, j'ajouterai une chose appelée rembourrage. Nous pouvons aller pour le rembourrage haut et je vais aller pour environ 50 pixels, et je peux aller rembourrer le bas 50 pixels aussi. Sauvegardons, revenons à Chrome et rafraîchir.Là-bas, nous allons .Cela semble assez bon.Bien que je ne sais pas si je suis un grand fan de la frontière violette. Peut-être que je pourrais changer ça en blanc. Je vais retourner à Sublime. Changeons la couleur de la bordure de ce violet en blanc. Enregistrer et actualiser. Ouais, j'aime vraiment ça. Maintenant, ce Ralph Wreck-it dans ce genre de police, n'a pas l'air trop beau. Il est assez facile de changer votre famille de polices dans Sublime dans notre en-tête lorsque vous écrivez dans font-family, puis lui donnez une valeur. Maintenant, il y a quelques polices par défaut qui fonctionneront sur votre ordinateur et l'ordinateur de l'utilisateur, Mais si vous spécifiez une police qui est uniquement sur votre ordinateur. Ça ne marchera pas sur l'ordinateur de quelqu'un d'autre. Ce que vous devez faire ici est d'appliquer quelques polices qui fonctionneront si la précédente ne fonctionne pas. Ce que je vais faire, c'est écrire Helvetica. S' ils n'ont pas Helvetica, on peut utiliser Arial. S' ils n'ont pas Arial, on peut utiliser sans empattement. Maintenant, une police serif est l'une de ces polices que nous avons actuellement, et elle a ces petits pieds et petits bras. Sans serif signifie qu'il n'a pas ces pieds et ces bras. Maintenant, vous pouvez également écrire Helvetica avec des guillemets autour d'elle, et Arial avec des guillemets autour, si vous voulez, mais ce n'est pas vraiment nécessaire. N' oubliez pas de mettre votre point-virgule après ça. Si nous sauvegardons cela et revenons à Chrome, actualisez, cela semble beaucoup mieux. Mais qu'en est-il du reste de notre site ? Eh bien, peut-être qu'on change tout d'une seule fois. Ce que je vais faire est de couper cette déclaration de famille de polices et aller à mon ensemble de règles du corps et coller la fonctionnalité. Ensuite, je vais enregistrer, revenir à Chrome et rafraîchir. Maintenant, tout notre site aura cette police appliquée à elle.Fantastique. Vérifions simplement qu'il a effectivement cette police. Je vais faire un clic droit, inspecter, puis dans le côté droit ici, je vais faire défiler la famille de polices Helvetica, Arial, sans empattement. Si votre ordinateur ne dispose pas d'Helvetica et qu'il n'a pas d'Arial, il utilisera n'importe quelle police de capteur qui se trouve sur l'ordinateur. Maintenant, pour mes rubriques, je veux utiliser quelque chose d'un peu plus spécial. Je vais aller à Google Fonts et trouver un polices vraiment cool à utiliser. Ces polices sont appelées polices Web. Cela fonctionnera si un utilisateur a la police sur son ordinateur ou non. Permet d'ouvrir un nouvel onglet, aller chercher Google Fonts.Cliquez sur ce premier lien. Alors ici, vous pouvez devenir sauvage. Recherchez quelque chose qui correspond à votre personnage. Je sais que la police que je veux s'appelle Press Start 2p. On y va. Une fois que vous avez trouvé votre police, vous pouvez appuyer sur ce bouton plus. Ensuite, une fois que vous avez sélectionné une famille, cliquez sur cette barre noire. Ensuite, il y a deux façons d'obtenir cette police dans vos styles.La manière standard est la plus facile. Copions ceci et revenons à Sublime, allez dans notre index et avant le fichier CSS, collons cet élément de lien. Vous pouvez voir que c'est à peu près le même.Il est juste dans un ordre différent. Il a un HRF de cousu, il a un attribut de rôle de feuille de style et c'est tout ce dont nous avons besoin.Ensuite, revenons à Chrome. Ensuite, disons spécifier en CSS. Utilisez les règles CSS suivantes pour spécifier ces familles. Fun famille, appuyez sur Start 2P. S' il n'a pas cela, il est cursif par défaut. Copions ça. Allons à Sublime et son, enregistrez ce fichier HTML d'index, puis dans notre CSS de héros, ce que je vais faire, c'est que je vais appliquer ce style à tous les H1 et, tous les H2. C' est un autre type de sélecteur. Au lieu d'écrire une règle pour H1s, puis une autre pour H2s, nous pouvons simplement dire, hey, tous les éléments H1 et tous les éléments H2, je déclare que vous devriez avoir cette famille de polices. Sauvegardons cela et passons à Chrome maintenant.Je suis arrivé à notre premier onglet et actualiser. Ça a l'air plutôt bien. Maintenant semble tout à fait un jeu vidéo y. Ouais, j'aime ça. Notre en-tête est assez bon, mais je ne suis pas sûr si j'ai spécifié une taille de police pour mon h1. Nous avons dit blanc, mais je veux ma taille de police, police no, taille de police il y avait aller, à 50 pixels. Enregistrez cela et réactualisez. Whoa, c'est assez grand, mais c'est bon. Pour le moment, nous avons notre inspecteur d'éléments ici. Si on le ferme ou, si on se déplace vers le bas et qu'on fait défiler vers le haut, oui, ça semble beaucoup mieux. Fantastique, mais je vais revenir sur le côté parce que c'est plus facile de voir ce qu'on fait. Maintenant, commencez à coiffer les principaux éléments et le contenu qu'il contient. Revenons au texte sublime. Ce que nous pouvons faire ici est d'ajouter quelques lignes, puis d' écrire main et d'écrire quelques déclarations pour nos principaux éléments. La première chose que je veux faire est de définir une largeur maximale de 800 pixels. Donc 800 pixels de large. C' est ainsi que s'il y a un navigateur massivement large. Il n'a pas l'impression d'avoir à faire défiler les yeux de gauche à droite. C' est assez facile à lire. Je vais sauver ça, retourner à Chrome, frapper rafraîchir. Alors je vais fermer ça pour l'instant et tu verras ça. On dirait qu'il ne monte que jusqu'à là, ce qu'il fait. Mais tu ne le sais pas vraiment. Cliquez avec le bouton droit de la souris et inspectons cela, et nous pouvons rendre cela un peu moins large. Ensuite, lorsque nous survolons le curseur principal, et que vous pouvez voir où est le surlignement bleu, c'est à quel point il est large. Il dit qu'il fait 800 pixels de large. Mais maintenant pourquoi cette image est-elle si large ? Qu' est-ce qu'on fait à ce sujet ? À l'intérieur de Sublime Text, ce que je vais faire ici, c'est que je vais dire toutes les images à l'intérieur de notre élément principal, je veux que vous ayez une largeur maximale de 100 pour cent. La raison pour laquelle je fais cela est parce que si je change la largeur maximale de notre élément principal, alors la largeur maximale de celui-ci sera toujours la même que l'élément principal. Je vais sauver ça, revenons à Chrome et rafraîchir, voilà. Ce qui est vraiment cool quand il suffit de régler la largeur, c'est que la hauteur s'échelle proportionnellement. Vous l'aurez remarqué avec notre image Avatar et avec cette grande image. Maintenant, ce que je vois, c'est que tout notre contenu est assis à gauche. Je ne veux pas ça, je veux être au milieu. Essayons un text-align. Nous dirons le centre d'alignement du texte. Je vais enregistrer et puis de retour dans Chrome je vais rafraîchir. Tout cela a fait, est fait notre centre d'alignement de texte, que vous voudrez peut-être, mais je ne veux pas. Revenons au sublime. Allons annuler cela, et ce que je vais faire ici, c'est ajouter une marge. Pour la valeur, je dirai 0, ce qui signifie les valeurs supérieures et inférieures, vous êtes zéro, puis je mets les valeurs gauche et droite sur auto. C' est un très beau raccourci pour centrer les éléments. Je vais sauver ça, retourner à Chrome, rafraîchir. Maintenant, mon texte est aligné à nouveau à gauche et tout notre contenu est au milieu. Ça veut dire que si je ferme mon inspecteur d'éléments, on y va, ça fait du bien. Mais maintenant, si je l'ouvre à nouveau, alors inspectons certains éléments, et je le rends un peu plus large. Vous verrez que tout le contenu se trouve exactement à gauche et exactement à droite. Je veux qu'il y ait un peu de rembourrage à gauche et à droite. Revenons au sublime et ajoutons un peu de rembourrage. Maintenant, nous pourrions ajouter le rembourrage à gauche et le rembourrage, à droite, ou ce que nous pourrions faire, c'est utiliser le raccourci. Donc, pour le rembourrage, je pourrais dire est zéro et cela resterait tout le rembourrage à zéro, ou je pourrais juste aller en haut et en bas avec sa première valeur, puis à gauche et à droite. Je pourrais aller pour quelque chose comme 20 pixels. Ensuite, si je voulais poursuivre le raccourci, je pourrais alors définir la valeur inférieure à zéro ou peut-être même à 20 pixels et ensuite je peux définir la valeur de gauche si je le voulais. Si nous définissons cela à quelque chose comme 100 pixels, ce sera vraiment évident ce que cela fait. Je vais enregistrer cela, revenir à Chrome et rafraîchir. Vous verrez que lorsque je sélectionne mon élément principal, il n'y a pas de rembourrage en haut, mais il y a un rembourrage massif à gauche, un peu de rembourrage à droite. Si nous faisons défiler vers le bas, vous verrez qu'il y a un peu de rembourrage en bas. Si je change cela à, allons de l'avant 20 pixels. Vous verrez que le rembourrage change ou autour, ce qui est génial. Ensuite, si je mets la première valeur à zéro, mettre un espace en haut et en bas aura zéro remplissage, puis la gauche et la droite pour avoir un remplissage de 20 pixels. C' est exactement ce que je veux. Revenons au sublime et faisons-le ainsi. Fantastique. Je vais enregistrer cela, revenir à Chrome et rafraîchir. Vous pouvez voir que nous allons et vient entre le navigateur et notre CSS. J' aime vraiment faire cela parce que je suis fondamentalement en train de concevoir dans le navigateur. Maintenant, je vais coiffer mes h2. Inspectons ce type. Quelle est la taille de la police ? En fait, on n'en a pas mis un. Revenons au sublime, et changeons cela, je dirai, tous les éléments h2, je veux que vous ayez une taille de police de 35 pixels. Je veux que la couleur soit e70c19. Je vais enregistrer ceci et faire défiler un peu vers le bas. Revenons à Chrome et actualisons. A propos de Ralph, les caractéristiques de Ralph, les amis de Ralph. Ils sont peut-être un peu gros. Revenez au sublime et changez ce à 30 pixels. Voyons à quoi ça ressemble. Ok, ça a l'air plutôt bien. Maintenant, les éléments de paragraphe, nous n'avons pas fait grand-chose à ce sujet. Définissons cela explicitement. Je dirai, tous les éléments de paragraphe, je veux que vous ayez une taille de police de 20 pixels. Je vais enregistrer cela et actualiser ; ok, c'est assez grand, mais notre liste a c'est assez grand, toujours cette vieille taille de police. Au lieu d'écrire des styles pour notre liste ordonnée et notre liste non ordonnée, ce que je ferai c'est que je vais juste l'appliquer au corps. Je vais couper cela de notre balise de paragraphe, aller aux éléments du corps et coller cela là et sauvegardons cela. Revenons à Chrome et rafraîchissons, et voilà. Ça a l'air beaucoup mieux. La prochaine chose que je voulais faire sur les éléments du corps est de définir une hauteur de ligne. Cela rend juste le texte un peu plus lisible. Je vais le définir à environ 30 pixels qui voient ce que cela fait. Les choses sont un peu plus faciles à lire maintenant, ça a l'air vraiment bien. La prochaine chose que je veux faire est de styliser ces liens. Revenons à Sublime défiler un peu vers le bas et au lieu de ce paragraphe éléments, je vais l'utiliser pour styliser tous mes éléments d'ancrage. Je vais appuyer sur escape pour me débarrasser des suggestions et la couleur que nous allons aller va être la même que notre h2 hash, e7 là nous allons. Sauvegardons cela, revenons à Chrome et actualisons. On y va. Maintenant que je survolais et que je voulais changer de couleur. La façon d'écrire une pseudo-classe sur un élément d'ancrage est d'écrire un , puis deux-points, puis survoler et c'est une pseudo-classe de survol. Ce que nous faisons ici est de déclarer que lorsque vous passez la souris sur un élément, nous voulons changer la couleur et donc nous allons dire la couleur et nous allons opter pour la couleur violette que nous avons écrite un peu plus tôt. Hash 483a94. Sauvons ça. Revenons à Chrome, rafraîchissez vous voir que quand je survole, ce n'est pas violet. Nous pouvons aussi nous amuser avec cela donc si nous allons à Sublime Text et nous changeons cela en une couleur d'arrière-plan à la place, et changez la couleur en blanc et alors je vais juste indenter cela. Voyons à quoi ça ressemble. Ouais, ça a l'air plutôt bien. Super. La dernière chose que nous avons deux styles est notre pied de page. Je vais revenir au texte sublime et nous allons mettre dans notre élément de pied de page et je veux qu'il soit le même orange que notre en-tête. Je vais faire défiler ici un peu et je vais copier ceci et je veux que le texte soit aligné au centre aussi et je vais le coller dans nos éléments de pied de page. Sauvegardons cela, revenons à Chrome et actualisons. Maintenant, ça a l'air un peu bizarre, alors essayons de régler ça. Je veux que la couleur soit blanche, puis je veux que les éléments a à l'intérieur du pied de page aient aussi une couleur de blanc. Sauvons ça et voyons à quoi ça ressemble. Ensuite, si je passe la souris dessus, il aura cette couleur de fond violet, ce que je ne suis pas sûr de vouloir vraiment. Revenons à Sublime, et copions et collons ceci et mettons une pseudo-classe sur ces éléments d'ancrage et disons, eh bien, quand vous pointez dessus, je veux que la capacité soit 0,5, et je veux que la couleur d'arrière-plan soit transparent, sauvegardons cela. Revenez à Chrome, actualisez. On y va. Ça a l'air plutôt bien. Maintenant, la seule chose qui reste à faire avec mon pied de page est de se débarrasser de l'espace en bas et de lui donner un peu de rembourrage. Faisons ça. Maintenant, je veux que mon remplissage et mon pied de page soient d' environ 50 pixels et je veux m'assurer que la balise de paragraphe n'a pas de marge. Je dirai, tous les éléments de paragraphe à l'intérieur du pied de page, vous pouvez avoir une marge de rien. Sauvons ça. Revenez à Chrome et actualisez. On y va. Ça a l'air vraiment, vraiment bien. Fermons cet inspecteur des éléments et regardons ce que notre site ressemblerait à la plupart des gens. Ouais, je pense que ça a l'air assez bon, peut-être que nous pouvons ajouter un peu de rembourrage en haut de notre élément principal et peut-être en bas aussi. A l'intérieur de Sublime, revenons à nos éléments principaux et au lieu de 0, nous dirons 20 pixels. Peut-être qu'on peut tout faire 20 pixels. J' y sauverai. Revenez à Chrome et actualisez. Ouais, ça a l'air plutôt bien. Je pense que ce Ralph et ses amis peuvent être en fait besoin de ressembler à une légende plutôt qu'à un simple élément de paragraphe régulier. Alors traitons de ça ensuite. À l'intérieur de mon index.html, je vais faire défiler vers le bas jusqu'à ce paragraphe maintenant je vais lui donner une classe de légende. Je vais sauver ça. Allez à mon héros CSS. Faites défiler un peu vers le bas, puis en bas je dirai tous les paragraphes avec une classe de légende que je veux que vous ayez une couleur de gris. Voyons à quoi ça ressemble. Rafraîchir. Ce n'est toujours pas si gris clair alors revenons au sublime et ça change à quelque chose comme 999999. Sauvons et oui, ça a l'air bien. Maintenant, je veux qu'il soit mis en italique. Nous pourrions mettre un élément I autour du texte, mais parce que c'est une légende, nous pouvons réellement le faire en CSS. Allons pour la police, le style, et nous allons lui donner une valeur en italique, va enregistrer, revenir à Chrome et rafraîchir. Il est maintenant en italique, mais il a toujours cette marge au-dessus, alors modifions cela. Nous allons dire marge supérieure, et nous allons lui donner une valeur de 0. Ensuite, lorsque nous enregistrons ceci, revenez à Chrome et actualisez. Ouais, ça a l'air beaucoup mieux. Maintenant, la seule chose que je veux encore faire est de mettre un peu d'espace entre les h2s et les éléments au-dessus d'eux. Revenons au texte sublime. Faites défiler jusqu'à ce que nous arrivions à un h2 et puis nous pouvons définir une marge de disons, 40 pixels en haut, à gauche et à droite sera 0 et puis en dessous nous pouvons dire dix pixels. Je vais enregistrer cela, revenons à Chrome et rafraîchissons. Ouais, ça a l'air plutôt bien. Tout dans toutes nos pages à la recherche fantastique. Maintenant, tout ce que nous devons faire, c'est le commettre. Allons sur le bureau GitHub et pour notre résumé, nous pouvons dire, "A écrit le CSS pour notre site de personnages et changer un peu HTML. » Ensuite, vous vous engagez à maîtriser et pousser l'origine. Fantastique. Maintenant, nous pouvons retourner à Chrome. Nous pouvons fermer les polices Google, ouvrir un nouvel onglet, taper notre nom d'utilisateur GitHub et là nous allons. Aller au héros de dessin animé et appuyez sur retour. Votre site de personnages, vous avez une URL que vous pouvez partager avec le monde. La dernière chose que vous pouvez trouver très utile est de savoir comment écrire un commentaire en CSS. C' est un peu différent du HTML. À l'intérieur de votre éditeur de code, tout ce que vous devez faire est de taper une barre oblique et un astérisque. Écrivez vos commentaires, quelque chose comme, les styles d' en-tête, puis écrivez à nouveau un astérisque et une barre oblique avant. On y va. Encore une fois, si vous voulez le faire avec un raccourci, tout ce que vous devez faire est d'appuyer sur Commande ou Contrôle et barre oblique avant, puis d'écrire vos commentaires ici. page web de Raphl a l'air fracassante. Je pense que ça va très bien, et j'espère que le vôtre a l'air génial et correspond à votre personnage aussi. Si vous vous sentez à la hauteur, partagez-le avec le monde entier, dites à votre mère, à vos amis, aux gars avec qui vous travaillez. Cela devrait rendre tout le monde super fier ou follement jaloux. Ce qui est encore plus cool, c'est que chaque fois que vous validez et synchronisez votre code, cette page sera mise à jour. Tada magique. 11. Débogage et erreurs récurrentes: Les gars, peu importe qui vous êtes, même si vous êtes un super codeur ninja, vous ferez des erreurs quand vous codez. On les appelle des bugs et il y a frustrant. Comment faites-vous face à eux et les faire partir ? Couvrons un exemple de bug ensemble. Si vous voulez que cette image ressemble à un avatar et qu'elle ne l'est pas, que devriez-vous faire ? La première chose à faire est de se détendre. Il y a probablement une raison logique de ne pas travailler. Prenez une profonde respiration et prenez note de ce qui se passe. Il n'a aucun des styles d'avatar que j'ai écrits pour cela, et il ressemble à une image par défaut. Ensuite, je vais passer en revue les choses qui entrent dans le but de faire fonctionner ce truc. Dans ce cas, tout ce qui va dans la création d'une image, un avatar. Je vais entrer dans un texte sublime. Puis à l'intérieur de mon index, je vais faire défiler l'endroit où j'ai écrit cet avatar. L' image semble correcte. Maintenant, je vais aller à mon CSS et faire défiler vers le bas jusqu' à l'endroit où j'ai écrit les styles pour cet avatar. Ensuite, je dirai toutes les images à l'intérieur des éléments d'en-tête. Je vois déjà mon erreur. Vous voyez cela ici, j'ai mis un point, et ici je dis toutes les images à l'intérieur d'un élément avec une classe d'en-tête. Ce n'est pas ce que je veux. Je vais supprimer ceci, puis supprimer cette période. Je vais ensuite enregistrer, puis revenir à Chrome et actualiser. On y va. bugs sont vraiment simples à voir avec le recul. Plus vous codez, mieux vous devenez à les repérer. Au cours de cette classe, vous pouvez faire face à quelques bugs courants. Le premier et le plus gros bug est les fautes d'orthographe. Regardez [inaudible], ce sont les petits insectes qui causent souvent les plus gros maux de tête. Je suggère de copier et de coller là où vous le pouvez. La seconde est la sensibilité à la casse. Si vos images ne parviennent pas ou qu'il n'y a pas de CSS lorsque vous affichez votre site en ligne, il y a de fortes chances que c'est parce que vous essayez d'accéder à un fichier qui n'existe pas. Sur votre ordinateur, l'accès à l'avatar JPEG peut fonctionner car les avatar JPEG et Avatar JPEG sont considérés comme la même chose parce que le système de fichiers de votre ordinateur est insensible à la casse. Mais GitHub les voit comme des fichiers séparés parce que GitHub est sensible à la casse. Vérifiez donc les noms de fichiers et de dossiers réels par rapport à ceux que vous avez écrits dans votre HTML et CSS. Pour éviter que cela ne se produise, choisissez une méthode standard de nommer vos fichiers et respectez-y. Je préfère tout nommer en minuscules et en utilisant des tirets au lieu d'espaces. C' est ce qu'on appelle kebab-case. Un troisième problème commun est d'oublier un point avant un nom de classe lors de l'écriture de sélecteurs CSS. Donc, si vos éléments ne reçoivent pas les styles que vous avez écrits, cela pourrait être le problème. Si vous vous cogner la tête sur votre bureau parce que quelque chose ne fonctionne pas, faites une pause, faites une promenade, regardez par la fenêtre ou expliquez le problème à quelqu'un d'autre, même s'il ne sait pas comment coder. Si vous pouvez obtenir de l'aide de quelqu'un qui code, demandez-leur. Mais seulement après avoir essayé de déboguer le problème vous-même. Maintenant, si tu veux mon aide, je le donnerai volontiers. Mais pour m'aider à vous aider, validez votre code et synchronisez-le avec GitHub.com. Dites-moi quelle leçon vous êtes coincé. Décrivez ce qui se passe. Décrivez ce que vous pensez devrait se passer, puis dites-moi ce que vous obtiendrez un nom d'utilisateur. Alors j'essaierai de t'aider. 12. Votre propre site internet: Si vous voulez être fantaisie et avoir votre propre site Web avec votre propre URL spéciale, vous devez acheter un nom de domaine et héberger vos fichiers sur un serveur. Vous pouvez utiliser Github pour héberger vos fichiers et pointer votre domaine sur Github. Ou vous pouvez utiliser une société d'hébergement de site Web qui vous offrira la possibilité d'acheter un domaine et d'héberger le site Web avec eux. J' ai trouvé que c'était l'option la plus facile. Je ne vais pas discuter plus sur l'hébergement pendant ce cours, mais j'ai inclus quelques liens et façons de mettre votre site Web en ligne dans les ressources de la classe. Il y a peu de réductions là-dedans aussi. 13. La fin (C'est la fête): C' est la fin de la classe, 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é. J' espère que tu as beaucoup appris, et j'espère que tu accepteras plus de ton côté nerveux à partir de maintenant. Ce que cette classe vous donne est une base sur laquelle vous pouvez en apprendre plus sur. Il y a beaucoup plus à apprendre et il peut être vraiment amusant de faire des sites Web pour vous-même, pour des amis et pour le client. Maintenant, si tu ne l'as pas déjà fait, tu auras besoin de fêter ça. Vous venez de créer un site web. Salut cinq toi-même, laissez sortir un coup de fouet, danser, sauter de haut en bas, courir comme une personne folle. Bien joué. Si vous n'avez pas partagé le site Web de vos personnages dans votre espace de projet de partage de compétences, faites-le. J' aimerais voir le site que vous avez créé. Si vous avez apprécié ce cours, veuillez laisser un avis. Cela signifie beaucoup pour moi, et assurez-vous de me suivre et de rejoindre le fan club taptaptapkaboom sur taptaptapkaboom.com. Si vous aimez la façon dont j'enseigne, j'ai un tas de cours sur un éventail de sujets et plus encore sur le chemin. C' est tout pour moi, au revoir pour l'instant. 14. Bonus : l'URL absolue ou relative: Comment un navigateur sait quelle image afficher ou quel fichier CSS utiliser pour styliser notre site ou où nous emmener lorsque nous cliquons sur un lien ? Dans ces cas et bien d'autres encore, nous donnons au navigateur une adresse web du fichier auquel nous voulions accéder. Maintenant, le nom propre ou le nom correct pour l'adresse Web est U-R-L, qui signifie Universal Resource Locator. Ça semble vraiment futuriste et compliqué, mais ce n'est pas trop mal. Qu' est-ce qu'une URL ? Eh bien, j'aime y penser comme un ensemble de directions que nous pouvons donner au navigateur sur l'endroit où trouver un fichier. Maintenant, il y a deux façons de le faire. L' un est avec une URL absolue et l'autre avec une URL relative. Quelle est la différence entre une URL absolue et relative ? Imaginez qu'on soit chez un ami et que vous me demandiez, où vivez-vous ? Je pourrais dire 22 longues rues, 1701CA, Amsterdam, Pays-Bas. C' est comme une URL absolue, elle ne change jamais et c'est toujours la même chose. Je pourrais aussi dire, eh bien, que vous sortez par la porte d'entrée et vous tournez à gauche, vous continuez à marcher jusqu'à ce que vous arriviez à la longue rue, puis tournez à droite, et puis je suis numéro 22. C' est comme une URL relative. Les directions changent en fonction de votre emplacement actuel. Avec une URL absolue, nous commençons par le domaine où se trouve le fichier, comme taptaptapkaboom.com. Ensuite, nous indiquons à notre navigateur quel ensemble de dossiers à regarder à l'intérieur de. Chaque nom, suivi d'une barre oblique correspond au dossier du serveur ou du système de fichiers. Enfin, nous terminons par le nom de fichier et l'extension. Avec une URL relative, nous commençons automatiquement à partir de l'adresse où se trouve le navigateur, sans avoir à le dire explicitement. Nous ajoutons ensuite une combinaison de composants de chemin relatif qui indique au navigateur quel dossier ou fichier se trouve. Ensuite, nous terminons avec un nom de fichier et une extension. Maintenant, quels sont ces composants de chemin relatif ? Allons là-dedans maintenant. Le premier est une barre oblique. Si nous commençons par une barre oblique, il indique au navigateur de commencer à partir du dossier de niveau supérieur ou de l'URL de base du domaine actuel. Cela peut être utile si vous êtes quelques dossiers en profondeur et que vous souhaitez accéder à un fichier proche du dossier de niveau supérieur. Le deuxième composant de chemin relatif est la barre oblique des points. Lorsque nous utilisons cela, il indique explicitement au navigateur d'utiliser le dossier courant. Le navigateur le fait par défaut, donc je n'utilise pratiquement jamais la barre oblique de points. Les composants de chemin suivant est dot, dot slash Nous utilisons ceci pour dire au navigateur de monter un niveau de dossier. J' utilise ça tout le temps, c'est assez commun. Les composants de chemin final sont un nom de dossier suivi d'une barre oblique. Cela dirige le navigateur vers un dossier portant ce nom. C' est super commun. Avec un chemin vers un nom de fichier, nous pouvons combiner plusieurs points, slashs de points et noms de dossiers ensemble pour donner au navigateur des directions vers le fichier. Quand utilisons-nous des URL absolues et quand utilisons-nous des URL relatives ? Vous n'avez pas besoin d'utiliser une URL relative pour quoi que ce soit, mais elles sont souvent beaucoup plus rapides à écrire et beaucoup plus courtes, ce qui rend votre code beaucoup plus facile à lire et à écrire. J' utilise normalement des URL relatives lorsque le fichier est situé sur le même domaine, surtout s'il n'est qu'à un ou deux dossiers. Si vous voulez que le navigateur accède à un fichier sur un autre serveur ou domaine, vous devrez utiliser une URL absolue. Par exemple, si vous souhaitez charger un fichier CSS à partir de polices Google ou accéder à un fichier HTML sur un autre site, vous devez utiliser une URL absolue. Si vous avez le choix entre l'utilisation d'une URL relative et d'une URL absolue, demandez-vous laquelle sera plus facile pour moi et mon équipe à lire et à écrire, et celle qui provoquera moins de bugs et moins de problèmes. Ce sont là deux facteurs vraiment importants à prendre en considération. Couvrons quelques exemples maintenant. Dans cet exemple, je veux créer un lien de index.html à about.html à l'intérieur du dossier Pages. Ensuite, je veux créer un lien à l'intérieur de about.html, puis des liens vers index.html. Sautons dans Sublime Text. Ce que nous avons ici est un élément d'encre ou un lien. Lorsque je clique dessus, le navigateur m'amène à une page. À l'intérieur des attributs href, je vais aller pour Pages, puis about.html. Je pourrais aller à la barre des points ici, mais c'est inutile. Je vais annuler cela, enregistrer ceci, puis aller à Google Chrome. Ensuite, c'est ma page index.html. Nous allons accéder à l'image cassée, mais je vais actualiser ceci et cliquer sur la page À propos. On y va. Cela nous amène à la page à propos. Vous verrez que l'URL change, il a maintenant pages/about.html. Revenons à Sublime Text et ouvrons about.html. Maintenant, je veux visiter la page d'accueil. Ce que je dois faire ici est aller point, point slash, et cela ouvrira le dossier précédent. Je pourrais alors écrire index.html. Voyons comment cela fonctionne et revenons au rafraîchissement Chrome. Cliquez sur la page d'accueil. On y va. Il me ramène à index.html, et cela me ramène à about.html. Dans cet exemple, ce que nous allons faire est trouver un fichier à placer dans l'attribut source. À l'intérieur de mon Finder, j'ai ce silly-face.jpeg, incroyable, je sais. Ensuite, à l'intérieur de mon dossier d'image, j'ai ce frog-face.jpeg, une autre image étonnante. Je sais. Le fichier dans lequel nous sommes en ce moment est notre index.html, et c'est dans les racines de hors site. Nous voici, index.html, et maintenant j'ai besoin de trouver une image pour cet élément d'image. Je vais aller pour silly-face.jpeg, et je suis juste en train de taper ça. Appuyez sur Retour. Je vais sauver ça. Je vais aller dans mon navigateur et me rafraîchir ici. On y va. Voilà ma seule image de visage. Si nous revenons à Sublime Text et allons dans le dossier Image, ce que nous pouvons faire ici est de taper un IMG, qui est le nom du dossier, puis une barre oblique, ce qui signifie qu'il va regarder dans le dossier Image, et au lieu de visage stupide, nous allons utiliser grenouille face.jpeg. Je ne veux plus tout ça. Je vais sauver ça et retourner à Chrome, rafraîchir, et voilà. visage de grenouille est là. C' est vraiment cool. Nous avons utilisé un nom de dossier, puis le nom de fichier avec une extension. Cela change un peu quand nous revenons au sublime et allons dans les pages et aller à notre page about.html. Je vais ouvrir ça et ici, ce que nous voulons faire, c'est accéder à nouveau à la figure idiote. Je vais aller pour point, point slash, qui va un pli, puis tapez face.jpeg idiot et enregistrez cela. Allons à Chrome. Rafraîchir. Je vais aller à la page À propos. On y va. Tu as mon visage idiot. Ensuite, si nous voulions accéder à la face de grenouille, ce que nous devons faire est aller point, point slash, puis revenir à l'intérieur du dossier Images. Nous sommes allés dans un dossier et maintenant nous allons dans le dossier des images pour le visage de grenouille. On y va. Je vais sauver ça. Revenez à Chrome et actualisez. On y va, voilà mon visage de grenouille. Vous pouvez voir ici en sublime que nous avons utilisé différents composants de chemin relatif pour accéder aux mêmes images parce que nous avons commencé à partir d'un fichier différent. Dans cet exemple, je souhaite utiliser un Google Fonts dans mon site. J' ai trouvé cette grande police appelée Bangers. Je vais cliquer dessus. Je vais ensuite dire sélectionner le style, puis j'appuie sur ce bouton ici. Je vais sélectionner tout ça. Je vais copier ça, aller dans Sublime Text, et puis je vais coller ça comme ça, super. Vous pouvez voir ici qu'il dit https ://et cette longue URL. Maintenant, c'est une URL absolue et il n'y a aucun moyen que nous ne puissions pas utiliser une URL absolue pour cela. On y va. Deux exemples d'URL relatives et un exemple d'URL absolue. C' est la fin de cette vidéo. Pour plus de choses comme ça, et pour augmenter vos superpouvoirs créatifs pour ce taptaptapkaboom.com.