Codez votre propre site Web (les bases du HTML et CSS)

1. Intro: Bonjour, je suis Matthew de Brandon codes. Avez-vous déjà voulu créer votre propre site web , mais pensez que cela pourrait être tout simplement trop difficile. Eh bien, dans ce cours, je vais vous apprendre que le codage peut être amusant et facile que ça. Vous pouvez créer un site web professionnel et un des nôtres. Dans ce cours, nous allons créer ce site Web incroyable en utilisant seulement HTML et CSS. Dans ce cours, vous apprendrez les outils dont vous avez besoin pour créer un site Web. Notions de base de HTML, CSS , fondamentaux, tapez progression dans un bootstrap. Hauteur de rassembler tous ensemble et de créer votre premier site Web, je Omega mobile responsive. Et enfin, Haida a accueilli. Si tout ça sonne bien et que vous êtes prêt à apprendre, alors plongons directement dans. 2. Outils: Jetons un coup d'œil aux outils dont vous aurez besoin pour créer votre premier site Web. Le premier dit que nous avons besoin, vous avez probablement déjà, et c'est un navigateur Web. Donc, pour cela, vous pouvez soit utiliser Firefox, vous pouvez utiliser Chrome, ou vous pouvez utiliser une gamme de couleurs. Par exemple, Safari. Pour ce tutoriel, je vais utiliser firefox, est là comme mon Fraser préféré. Mais je vais vous montrer comment vous pouvez résoudre certaines des choses que nous avons besoin sur Chrome ainsi. La prochaine chose dont nous avons besoin en tant que Developer Tools ou DevTools en bref. Ce sont des programmes Bell dans les grazers modernes qui vous permettent de créer, tester et déboguer du code. Les navigateurs actuels tels que Firefox et Chrome ont ces intégrés et vous permettent d'inspecter le site Web. Vous pouvez modifier le code HTML, CSS et JavaScript de la page. Ne vous inquiétez pas si vous ne savez pas encore ce que ça veut dire. Je vous apprendrai à regarder chacune de ces portes très bientôt. Mais pour l'instant, laissez-moi vous montrer comment vous ouvrez DevTools sur Firefox et Chrome. Je vais commencer par Chrome ici. Et tout ce que vous devez faire est de faire un clic droit n'importe où sur la page Web et d'appuyer sur Inspecter. Vous saurez que le DevTools a chargé pour Firefox. C' est un processus similaire. Cliquez avec le bouton droit n'importe où dans la page et cliquez sur Inspecter l'élément. Vous saurez que le DevTools a été chargé. Comme une démonstration rapide. Dans DevTools, nous pouvons apporter des modifications au HTML de la page. Par exemple, je peux changer ce bouton pour dire des classes, ou nous pouvons faire des changements CSS. Par exemple, je peux changer la couleur de cet en-tête pour être lu. Encore une fois, ne vous inquiétez pas si vous ne comprenez pas encore complètement ce que HTML et CSS. Ce n'est qu'une démonstration de ce que nous pouvons faire. Et DevTools, encore une fois, quelque chose que vous pouvez changer avec DevTools est où la possession de cette barre d'outils comme en cliquant sur les trois points ici, vous pouvez choisir de plus sombre à la vitesse, par exemple, ou vous pouvez l'ancrer vers la gauche. Vous pouvez également détacher la barre d'outils en choisissant une fenêtre séparée. Et cela vous permet de le mettre sur un deuxième moniteur. Par exemple. Pour ce tutoriel, je vais assembler l'ancrer au bas des pages. Le dernier outil dont nous avons besoin d'un sans doute le plus important, est un éditeur de code. Je recommande et j'utilise l'éditeur de code gratuit, que vous pouvez télécharger une diode. Mais si d'autres USU tels que Sublime Text, Fame que vous serez en mesure de suivre moins tutoriel, est tous les éditeurs de code sont vaguement les mêmes. Donc, pour récapituler et pour vous assurer que vous êtes prêt à commencer. Les orteils dont nous avons besoin sont un navigateur, Firefox ou Chrome DevTools sur ce navigateur, et un éditeur de code tel que bras. 3. Matériaux: Avant de poursuivre ce cours, vous devrez télécharger le matériel que j'ai préparé pour vous. Vous pouvez le faire en faisant défiler la mort et en allant dans l'onglet Projets et ressources. Et puis à droite sous les ressources, vous direz nécessaire pour les chiens de cours application. Pour télécharger ce fichier d'ensemble, il suffit de cliquer sur le titre nécessaire pour le concept de base. Une fois que vous avez commencé ce dossier, vous pouvez cliquer dans le dossier de cours nécessaire et trouver tous les supports de cours dont vous avez besoin. Vous verrez un dossier d'exercice qui comprend un fichier HTML de départ, une image que nous utiliserons pour notre premier exercice. Vous verrez également un dossier de site Web comprenant un fichier HTML de départ et les images dont nous avons besoin pour ce cours. Et enfin, vous direz que j'avais besoin pour le dossier d' exercice qui contient le framework Bootstrap. Nous allons entrer dans cette couche plus détaillée. Une fois ce dossier téléchargé, vous êtes prêt à poursuivre ce cours. 4. Les bases de la site Web: Donc, avant de commencer à construire notre site Web est vraiment important de comprendre les fondamentaux. Que sont les sites web ? Madoff. Pour que cela soit facile à comprendre et que vous voulez utiliser une métaphore. Et c'est-à-dire qu'un site Web est comme une maison. Ils peuvent expliquer. Quand on pense aux principaux composants qui composent un hace, on peut penser à la liberté, au look et aux pièces en mouvement. Chacune de ces composantes majeures d'un hôte est en fait une composante majeure de la construction d'un site Web. Donc, quand on pense à la liberté d'un hôte et des termes de site Web, ce serait le HTML. Html signifie Hypertext Markup Language. Html pour court. Le cadre de l'hôte constitue les pièces, constitue la disposition et constitue la structure de la même manière qu'un site web a des sections, tête ou corps pour. Et chaque section contient des images et des textes. Par exemple, il y a la mise en page, il y a la liberté. La structure est définie par HTML. Donc, si nous regardons cet exemple HTML, Il est important de noter que ce ne sont pas de vrais éléments HTML, mais la mise en page est correcte en termes de la façon dont vous utiliseriez HTML. Et je pense que cela aide vraiment à illustrer exactement comment vous l'utiliseriez. Html a une balise d'ouverture et de fermeture et les terminer balises, vous auriez des éléments. Ainsi, vous pouvez voir une balise d'ouverture et une balise d'hôte de fermeture avec n que nous avons le deuxième étage. Et au deuxième étage, nous avons la chambre avec au premier étage, nous avons 11 chambres. Nous avons une entrée, et dans les chambres, nous avons la porte d'entrée. Ainsi, vous pouvez voir comment HTML définirait la structure d'un braquage. Avec cet exemple, nous allons utiliser le HTML exactement de la même manière pour définir la structure de notre site Web. Ensuite, il s'agit de l'apparence des termes de la maison et du site Web, nous allons utiliser CSS pour définir le look. Css signifie Cascading Style Sheets ou CSS pour court. C' est un langage d'accord qui nous permet de définir l'apparence des éléments HTML. Dans notre exemple de maison, toutes les chambres, tables et chaises ne ressemblent pas. Des mots et des images coquins sur un site web. Css définit comment les éléments ressemblent, décrivant leurs couleurs dit Possession, navire, et plus encore. Voici un autre exemple rapide de la façon dont nous réduisons CSS pour concevoir l'apparence ou pour les hôtes. Nous pouvons voir que nous avons défini un élément, donc chambre à coucher. Et puis à l'intérieur de cet élément avec défini comme la largeur, sa hauteur, les murs, et le sol. Encore une fois, vous pouvez voir que nous avons un coup d'interrupteur tardif définissant un élément HTML ou la lumière éteint sa maison. Et vous pouvez voir que nous avons la distance du sol et du vaisseau. Encore une fois, ce ne sont pas de vrais éléments HTML. Ceci est juste une simplification excessive pour vous aider à comprendre le lien entre CSS et HTML. Donc, enfin, dans un hôte, vous avez déplacé des morceaux tels que nuances tardives serait JavaScript. Javascript est utilisé pour créer des éléments interactifs sur notre site Web. Remerciez les curseurs, pensez aux pop-ups. Nous ne allons pas nous concentrer sur JavaScript et ce tutoriel. Donc, pour l'instant, tout ce que vous devez savoir est que JavaScript carrières et sont des éléments actifs sur un site web. Donc, pour résumer, quand il s'agit des éléments qui composent un site, pensez à une ruche. Pour la liberté, pour la structure, nous utilisons HTML, pour l'apparence et l'apparence. Nous utilisons CSS. Et pour déplacer des pièces, vous utiliseriez JavaScript. Donc, dans ce tutoriel, je vais vous montrer comment utiliser HTML et CSS pour créer votre tout premier site Web. Nous allons créer la structure du site Web ou le cadre du site Web en utilisant HTML. Ensuite, nous allons utiliser CSS pour définir l'apparence du site Web, les schémas de couleurs, les grains de sac, la topographie et l'apparence générale. Cela vous permettra d'avoir un site Web hautement personnalisé et aussi avoir les compétences nécessaires pour être en mesure créer n'importe quelle mise en page de site Web et n'importe quelle apparence de site que vous souhaitez à l'avenir. 5. Les bases de HTML - Partie 1: Il est temps de commencer à coder. Commençons par HTML. Html, comme déjà mentionné, est de cadrer ou de structure de notre site Web. Chaque site a une ceinture avec des éléments HTML. Chaque élément contient quelque chose, comme du texte ou une image. Nous avons différents types de balises HTML que nous pouvons jouer avec. Et chacune de ces balises représente différents types de contenu. Par exemple, nous avons des en-têtes, des paragraphes, des images et plus encore. Donc, quand il s'agit d'écrire notre HTML, il est important d'utiliser des éléments sémantiques. Que sont les éléments sémantiques ? Les éléments sémantiques sont des éléments ayant une signification. En HTML, chaque balise a sa propre signification, a un exemple d'éléments HTML sémantiques. Si nous voulions écrire un paragraphe, nous ouvririons avec la balise p. Comme il s'agit de l'élément HTML du paragraphe. Nous écririons notre paragraphe, puis nous fermerions avec un p de fermeture, où paragraphe, élément HTML. Cet exemple est le codage sémantique. Il est temps de commencer à coder. Avant de commencer à coder notre propre site Web, Faisons un exercice HTML et CSS rapide pour apprendre les bases. Nous allons ensuite la LU complète, vous verrez deux dossiers, exercice et site Web. Ouvrez le dossier de l'exercice. Et j'ai inclus un fichier HTML d'échelle et d'index à votre bureau dans votre éditeur de code, il suffit de cliquer et de le faire glisser sur le bras, sont sur les données de base ou vous utilisez. Et vous verrez l'échelle dans l'exercice HTML échec s'ouvre. Alors laissez-moi vous parler de ce qui est déjà inclus dans ce fichier HTML. En haut, nous avons une déclaration de type doc. Cette déclaration n'est pas une balise HTML. Ses informations au navigateur sur le type de document à attendre. Cela doit être inclus dans tous les fichiers HTML. Et il permet au navigateur de savoir qu'il charge un fichier HTML. L' élément suivant est la balise HTML. La balise HTML est un conteneur pour tous les autres éléments HTML à l'exception du type doc. Donc n de m avec n, la balise HTML sera rendue sur votre site Web. Notez hey, il y a une balise HTML d'ouverture et une balise HTML de fermeture. Comment savons-nous qu'il s'agit d'une balise HTML de fermeture ? Par la barre oblique avant. Et l'étiquette d'ouverture n'a pas de barre oblique. Une balise d'élément HTML de fermeture a une barre oblique. Nous avons donc nos balises HTML, et si suffisamment d'entre elles balises HTML seront rendues comme notre site Web. Ensuite, nous avons les balises de tête, et souvent inclus dans les balises de tête n'est pas rendu sur la page Web. Au lieu de cela, cette zone est utilisée pour inclure des métadonnées ou des informations sur la page HTML elle-même. La première chose que j'ai inclus ici est le jeu de caractères. Pour l'instant. Nous allons juste savoir que c'est super important d'avoir inclus. Mais je ne vais pas entrer dans les détails d'un mot de personnage dire que c'est parce que je pense que ça va juste vous confondre à ce stade. Sachez simplement qu'il est important d'inclure cela. Nous avons le titre inclus dans la tête, et c'est très Assemblée le nom de la page HTML. Maintenant, nous ne voulons évidemment pas que cela s'affiche sur la page elle-même. Mais il est important que le navigateur sache ce que le nom ou le titre des pages. Donc il est inclus dans la tête. D' autres exemples d'éléments que vous pourriez inclure dans les balises de tête sont les descriptions de la page. Donc, si vous avez déjà fait une recherche sur Google, les descriptions de page que vous voyez dans les extraits sont en fait inclus dans la tête d'une page. Nous pouvons également utiliser la tête pour inclure des fichiers externes, ce que nous allons faire plus tard dans ce cours. Nous pouvons donc inclure des fichiers CSS externes pour vous aider avec l'apparence de notre site Web. Et tout cela est inclus dans les étiquettes de tête. Encore une fois, il s'agit d'un domaine d'information ou des deux. La zone bénigne de la page pour les choses que nous voulons afficher sur la page 49 pour s'en aller, c'est tout ce que vous devez avoir inclus dans les balises de tête. Ensuite, nous avons les étiquettes du corps. Et si les employeurs pour défendre les balises body seront affichés et rendus dans votre navigateur Web Azure. C' est la zone que nous mettons tous nos éléments HTML, tels que les en-têtes, les paragraphes, les images, les tableaux, etc. En fait, tout ce que vous enregistrez et ici sera affiché sur votre page Web. Par exemple, si une bande quelque chose, et voir si ce que vous pouvez faire en allant à l'échec. Mer de ou en appuyant sur le contrôle et S et en déchargeant notre page HTML et notre navigateur. Ce que vous pouvez faire en allant dans le dossier de l'exercice et en double-cliquant sur le index.html. Vous pouvez voir que sur notre page Web, tout est affiché. Évidemment, cela n'a pas l'air très bon et ne ferait pas pour un très bon site Web. Mais non seulement cela, nous ne l'avons pas fait sémantiquement. Regardons comment nous pouvons harmoniser le texte sémantiquement sur notre document HTML. En ramenant l'éditeur de code, je vais supprimer n'importe quoi. Et je vais maintenant ajouter un titre, 2 yadda titre. On va ouvrir notre étiquette. Nous allons prendre de l'âge pour partir et nous allons en faire un tour. Vous pouvez utiliser les numéros un à six pour les en-têtes. Donc H1, H2, H3, etc. Cependant, H1 est la balise de titre la plus énergique. Donc, si nous écrivions le titre d'un article, nous utiliserions H1 parce que c'est l'élément de titre HTML le plus important. Et nous allons évaluer un cap. Bienvenue, étudiants de Skillshare. Qu' est-ce qui manque dans cette voie HTML ? C' est le taux, nous devons fermer la balise HTML. Pour faire ça. Nous ouvrons à nouveau la balise HTML, mais cette fois nous utilisons une barre oblique avant, barre oblique indiquant un élément HTML fermé. Et puis nous prenons à nouveau l'élément HTML CMB. Vous pouvez donc voir que nous avons une étiquette H1 d'ouverture et une étiquette H1 de fermeture. Avant de se diriger entre les deux éléments. Je vais voir si cette page en appuyant sur Contrôle S. Et je vais faire apparaître le navigateur à nouveau. Et je vais rafraîchir la page. Vous pouvez voir ce que nous venons d'ajouter dans notre fichier de code est affiché sur notre page Web. Laissez-moi vous montrer rapidement, hé, DevTools fonctionne maintenant. Vous souvenez-vous de la façon d'ouvrir DevTools ? Nous cliquons avec le bouton droit de la souris et appuyons sur Si nous regardons notre document HTML ici, vous pouvez voir comme je l'ai décrit, tous les éléments dans les balises HTML tête ne sont pas affichés sur notre page. Vous pouvez alors voir nos tags body et le titre que nous venons d'ajouter. Nous pouvons faire des changements talents simplement en cliquant sur l'élément HTML. Nous voulions changer. En cliquant sur l'élément et en ajoutant, par exemple, du texte. Je peux changer. Bienvenue, par exemple, à bonjour. Lorsque j'appuie sur Entrée, vous verrez que cette modification a été effectuée. Quelque chose de vraiment important à comprendre un peu dev dit que nous faisons seulement ces changements localement et ces changements ne sont pas enregistrés. Donc c'est le changement. Je viens de refléter la page TR. Quand un rafraîchissement, vous verrez que le changement n'a pas été mer de. C' est parce que nous ne faisons que les changements et notre navigateur. Et nous sommes seulement magnum localement. Pour que ce changement se produise, nous devons retourner à notre éditeur de code. Nous devons apporter le changement dans notre document HTML réel. Nous avons besoin d'une mer du document HTML. Et puis, lorsque nous actualisons notre page, vous pouvez voir que la modification a été mesurée de façon permanente. 6. Les bases de HTML - Partie 2: Nous allons créer un site Web vraiment basique qui comprend un titre, un paragraphe, une image, un lien vers un autre site Web, et un dernier saut dans le fichier index.html de l'exercice. Si vous avez fermé le index.html en train de mourir de notre dernière leçon à sac scolaire dans le dossier du paquet, allez à l'exercice, puis faites glisser le fichier index.html sur votre éditeur de code. supprime le titre que nous avons ajouté dans l'exercice précédent car nous voulions recommencer et créer ce site très basique, je vais ajouter un nouveau titre. Encore une fois. Je vais utiliser une balise H1 comme titre le plus important. Et je vais juste prendre cela comme un site Web de base, mais vous pouvez ajouter n'importe où la rubrique que vous avez sur. Ce qui manque. Encore une fois, nous devons fermer la balise HTML. Nous le faisons avec une barre oblique. Et puis le H1. Nous voulons maintenant ajouter un paragraphe. Pour cela, nous utilisons la balise p, P représentant le paragraphe. Ensuite, nous voulons ajouter du texte de paragraphe. Tu peux écrire ce que tu veux ici. Mais si vous avez besoin de quelques textes très rapidement comme un espace réservé, Il y a une chose vraiment utile dans le développement web appelé Lorem Ipsum. Si vous allez sur Google et tapez lorem ipsum générateur, vous trouverez une gamme de sites Web qui génèrent des textes de blog pour vous très rapidement. Nous allons utiliser celui-ci dans cette démonstration et générer un paragraphe. Maintenant, ce n'est pas l'anglais et n'a pas de sens, mais il est utilisé dans le développement web pour bloguer les zones d'un site Web très rapidement. Quand on ne sait pas exactement quel texte on va faire semblant. Donc, je vais copier et PSD pour mon paragraphe. Je vais percer comme n. Et nous savons comme un problème ennuyeux. Le texte est si grand que l'on pousse les Chordata sont tout le chemin vers le côté droit. Maintenant, vous pouvez appeler le verre, cependant, vous le trouverez assez irritant. Heureusement, Adam et presque tous les éditeurs de code ont une fonctionnalité pour arrêter cela. Tout ce que vous avez à faire est d'aller à Voir et de basculer le pellicule souple. Ce que ce Dawes est saisit le texte dans la fenêtre de l'éditeur de code et vous empêche d'avoir à vous déplacer à gauche et à droite pour voir. Ce qui manque à cet élément de paragraphe. C' est vrai. On doit le fermer. Voyons maintenant cela et voyons à quoi il ressemble dans le navigateur. Je vais le voir à nouveau en appuyant sur contrôle et S. Et je vais charger notre site Web et le rafraîchir. Vous pouvez voir que l'en-tête s'affiche et que le paragraphe s'affiche. Pour voir ces éléments HTML dans DevTools, cliquez avec le bouton droit de la souris, accédez à Inspecter l'élément. Et vous pouvez voir dans notre corps que nous avons un titre et un paragraphe. Maintenant, nous allons obtenir, leur permettre plus avancé et ajouter une image à notre site Web. Dans notre éditeur de code, je vais prendre une nouvelle voie et je vais ajouter la balise HTML image. C' est une balise plus avancée. Il y a donc quelques choses que vous devez savoir sur la balise image. Comme il ne s'agit pas d'un CME en tant que balise de paragraphe et d'en-tête, la balise image nécessite un attribut. Un attribut est une information dans la balise HTML elle-même. Pour une image, nous devons ajouter SRC, qui signifie source, la source de l'image. Nous devons ensuite mettre un égal et entre crochets, nous devons taper le chemin de l'image. Quel est le chemin de l'image ? Jetons un coup d'oeil notre dossier d'exercice. Dans notre dossier d'exercices, vous verrez qu'il y a un dossier d'images. Déplacement du dossier d'image, il y a une image qui est le chemin que nous avons besoin. Les chemins peuvent être assez difficiles, surtout en tant que débutant à comprendre et moyen facile de se rappeler comment faire comme imaginez que vous décriviez à index.html, comment trouver les dommages. Donc, vous diriez index.html d'abord aller dans le dossier de l'image, puis l'image se terminera. C' est ce qu'on appelle l'exemple Dodge JPEG. Donc encore une fois, imaginons que nous le décrivons à index.html lorsque nous l'ajoutons à notre source, abord, nous devons aller dans le dossier image. Ensuite, nous ajoutons une barre oblique avant. Et dans ce dossier d'image, nous voulons l'exemple point JPEG image. Donc, nous avons le dossier et ensuite nous avons le nom de l'image dans ce dossier. Donc, vous savez peut-être dire, nous devons fermer cette balise HTML. En faisant cela, cependant, vous auriez tort. Les balises d'image diffèrent des balises d'en-tête et paragraphe car elles sont appelées éléments nuls. Les éléments Vide ne peuvent pas avoir de contenu. Pensez-y. Une image ne peut pas avoir de texte avec Anna parce que c'est une image. Par conséquent, c'est un élément vide. Donc, au lieu de cela, nous devons fermer l'étiquette légèrement différemment. Pour fermer l'élément éviter ou fermer une balise d'image, il suffit d'ajouter une barre oblique avant le crochet d'angle final. Il s'agit maintenant d'une affection vide fermée ou d'une balise d'image fermée. Voyons un vaste NIH en appuyant sur contrôle et S et rafraîchissant notre site Web. Nous pouvons voir que l'image comme NIH, montrant qu'il ya cependant, un attribut de plus que vous devriez toujours inclure dans votre balise image. Si on retourne à notre éditeur de code, je vais prendre ALT. Alt signifie texte alternatif. Pourquoi avons-nous besoin de texte alternatif dans notre balise image ? Donc, la principale raison en est l'accessibilité. Utilisateurs qui ne peuvent pas voir les images et qui utilisent un programme de synthèse vocale. Utilisez un texte alternatif pour comprendre ce que les dommages, comme. Il est également utile lorsque l'image ne se charge pas. Par exemple, si le dommage est manquant ou si le chemin est lancé, l'ancien texte sera affiché afin que les utilisateurs sachent ce qui devrait être là. Pour ajouter du texte alternatif, il suffit de taper ALT, que nous avons déjà, équivaut à une marque de parole de fournisseur EMR simplement ajouter une description rapide de ce que les dommages. Alors je vais prendre. Ceci est un exemple d'image. Voyons si STI et revenir à notre navigateur et actualiser la page en utilisant DevTools, vous pouvez voir que ce texte alternatif est maintenant inclus pour vous donner une démonstration de ce que cela ressemble. Si, par exemple, l'image est manquante ou peut être chargée, je vais casser le chemin. Donc, je vais faire pointer le chemin vers une image qui n'existe pas. Je ne vais pas appuyer sur Entrée. Et vous pouvez voir que, parce que l'image ne peut pas être chargée, le texte alternatif est affiché comme un reste. Toutes les modifications apportées sur DevTools ne sont pas enregistrées, sorte que nous pouvons rétablir leur assemblage d'espace actualisant la page. Maintenant, ajoutons un lien. Retournez à l'éditeur de code. Je vais ajouter ce lien ci-dessus ou image. Donc, je vais ajouter une ligne au-dessus de la balise image et le crochet d'angle de bande a. La balise a définit un lien hypertexte qui est utilisé pour lier d'une page à une autre. La façon dont une balise fonctionne est avec un autre attribut. Et nous allons prendre RREF, qui signifie référence hypertexte. Fondamentalement, c'est le lien vers le site Web que vous voulez que le bouton vous emmène. Pour cela, je vais créer un lien vers Skillshare. Donc, je vais taper www.skillshare.com dans les marques de discours. Nous pouvons ensuite fermer l'ouverture d'une balise. Maintenant, nous devons enregistrer ce que nous voulons que le texte du bouton soit. Donc je vais enregistrer ce lien. Et puis nous devons fermer cette balise, le CME comme un titre ou un élément de paragraphe. Nous le faisons par le crochet d'angle, barre oblique avant, puis un. Donc, ce que nous avons ici est une balise de lien. Nous avons l'ouverture d'un élément. Nous avons un attribut H ref, qui va nous conduire à skillshare.com. Nous avons le texte du bouton et ensuite nous avons la fermeture d'un élément HTML. Je vais connaître C de ceci et aller sur notre page pour rafraîchir la page. Lorsque nous actualisons notre page de navigateur et recherchons un lien, vous pouvez vous demander s'il est manquant. Lorsque vous faites défiler vers le bas, vous remarquerez que se trouve sur le côté gauche des dégâts. Pourquoi c'est ça ? C' est parce que nous n'avons pas précisé que nous voulons que l'image soit sur une nouvelle voie. Ainsi, le lien et l'image sont sur la ligne de couture. Défauts esco retour à notre éditeur de code. Et entre la balise a pour un lien et la balise image pour notre image. Ajouter une nouvelle voie et bande BR barre oblique avant, support d'angle. Br signifie rupture ou saut de ligne est éviter l' élément d' un CV ne peut pas ajouter quoi que ce soit à l'intérieur d'un saut de ligne. Par conséquent, nous indices éviter l'élément en utilisant une barre oblique avant le support d'angle de fermeture. Nous n'avons pas besoin de balises et d'ouvrir et de fermer la balise, un peu comme une image. En ajoutant ce saut de ligne, aucun moyen de dégâts ne sera dans une nouvelle ligne. Maintenant, si nous appuyez sur Control S pour voir si revenir à notre navigateur et actualiser la page. Vous pouvez voir que nous avons maintenant le lien, un saut de ligne et l'image en dessous. Maintenant, testons notre lien et voyons ce qui se passe. C'est un lien. Vous savez peut-être qu'il y a un message d'erreur et que nous ne sommes pas réellement pris à travers le partage de compétences du site Web, que nous avons entré pour le lien. Jetons un coup d'oeil au code et comprenons pourquoi nous obtenons ce message d'erreur. Construire l'éditeur de code. Nous pouvons voir que nous n'avons pas mis un HTTP que nous venons de commencer avec www dot. Pour cette raison, le lien pense être une URL relative. Arraylist of URL suppose que la longueur que vous avez ajoutée est sur le même site et dans le cadre du domaine CME rid. Donc, quand nous regardons notre riser et de porter sur le lien essayé de nous prendre. Vous pouvez voir qu'il est en fait regarder dans, dans le dossier d'exercice pour www.skillshare.com. C' est faux. Nous devons utiliser une URL absolue. Nous devons donc ajouter deux-points HTTP, barre oblique avant, barre oblique avant. Vous pouvez maintenant voir le lien sur AM change bleu il montre qu'il s'agit d'une URL. Encore une fois, je vais voir si je vais à mon navigateur, revenir à notre page d'exercice et rafraîchir. Maintenant, lorsque je clique sur le lien, vous verrez qu'il vous emmène à skillshare.com. Maintenant vous enfin, ajoutons une liste à notre site web, construisant l'éditeur de code. Et on va prendre une nouvelle ligne. Et je vais ajouter UAL. Nous pouvons soit utiliser les tags OL ou UL pour notre dernier. Ol signifie liste ordonnée et GL signifie liste non ordonnée. Commençons par notre liste non ordonnée. Après notre balise UL d'ouverture, nous allons ajouter une autre balise HTML. Et c'est ALA. La balise LI est un m de moins de jour avec n LST. Ceci est appelé un élément HTML enfant. Donc, nous avons un dernier honoré. Ensuite, nous allons mettre fin à la liste non ordonnée. Nous avons un élément de liste. Je vais énumérer toutes les choses que vous allez apprendre dans ce cours. Donc, je vais écrire du HTML pour le premier élément de ma liste, puis je vais fermer cette balise de la même façon que nous fermerions un titre ou une balise de paragraphe. Je vais ajouter un deuxième article à notre dernier. Donc, j'ajoute une autre balise ouverte ALA et je vais ajouter un autre coupé en dés que je suis, je vais ajouter une autre balise proche. Je vais ajouter un troisième élément. Et je vais le fermer, et je vais ajouter un quatrième. Et enfin, euh, donc maintenant nous avons quatre DEM ou moins étaient alors notre liste non ordonnée. Mais nous devons fermer notre liste non ordonnée. Pour ce faire, nous prenons une balise UL de fermeture. Donc, pour récapituler, nous avons une étiquette UL d'ouverture. Nous avons quatre enfants, balises LI avec ouverture et fermeture des éléments HTML. Et puis nous avons notre étiquette UL de fermeture. Faites-nous savoir CFS et allez sur notre site Web. Rafraîchissons la page. Et l'image floue que vous verrez sont toutes liste non ordonnée. Si nous voulons une liste ordonnée, quelque chose rappelé à l'éditeur de code et changer l'URL de votre, eh bien, nous allons voir si cela revenir à notre page Web et rafraîchir. Vous verrez maintenant que nous avons une liste ordonnée. 7. Les bases du CSS - Partie 1: Jetons maintenant un coup d'oeil aux bases CSS, un nouveau CSS sur l'exemple de site Web que nous avons créé. Qu'est-ce que CSS ? Css, si vous vous en souvenez, est le look de votre site Web. Donc, lorsque l'hôte Mao pour nous avons utilisé au début de ce cours, le HTML était la liberté et le CSS était ce qui donne de regarder à notre liberté sont là à notre site Web. Donc, si nous regardons notre site Web au Bennett, vous serez d'accord que ressemble de façon. Ce n'est pas génial. Mais maintenant, nous allons affecter avec CSS. Quand il s'agit d'utiliser CSS, il y a trois façons de l'utiliser. A côté de notre HTML. Nous avons n ln, CSS et externe échec CSS et code CSS intégré dans HTML. Pour ce cours, nous allons nous concentrer sur un seul. Et c'est en utilisant un fichier CSS externe. Alors, comment pouvons-nous créer ce fichier CSS ? Ouvrez le dossier d'exercice, créez un nouveau dossier. Tu peux le nommer comme tu veux. Mais pour garder les choses faciles à comprendre, appelons-le style. Dans ce dossier, créons un nouveau fichier CSS. La façon dont j'aime le faire est de simplement créer un nouveau document texte. Je vais l'appeler feuille de style. Je vais changer la bande de document déchirure CSS document. Et je vais le faire simplement en plaçant un point et enchevêtrement CSS et ayant une erreur, vous obtenez un message, alors vous savez que vous allez changer la bande d'extension et que la bande défectueuse va changer. Mais nous le voulions. Donc on va frapper Oui. Et nous savons qu'il y a un document CSS. Ouvrons maintenant leur document CSS. Un fichier CSS dans notre éditeur de code. Quelqu' un fait glisser des feuilles de style ou CSS sur atome ou les données de base ou que vous utilisez. Et vous verrez votre document de feuille de style vierge ouvert pour que vous vouliez regarder notre fichier HTML ou index.html et ou une feuille de style, fichier styles.css en même temps. Pour faire comme, je vais faire un clic droit sur les feuilles de style ou CSS, et je vais frapper le taux de fractionnement. Nous pouvons maintenant fermer le point de feuille de style css et la fenêtre de gauche PM. Et ici, nous avons le document HTML sur le côté gauche et nos feuilles de style ou CSS sur le côté droit. Vous remarquerez peut-être que le texte est autorisé grand ici. Je l'ai plus grand que standard comme pour cette vidéo. Mais vous pouvez changer la balise dit en allant dans Afficher et augmenter ou diminuer la taille de la police. Vous pouvez également utiliser Control Shift plus ou moins. Donc, je vais réduire la taille de S Now juste pour le rendre plus facile de voir plus sur l'écran. Alors, comment CSS fonctionne-t-il ? Voici un exemple très simple d'une voie de CSS. Vous pouvez voir qu'il est composé d'un sélecteur, d'une déclaration. Et dans cette déclaration, nous avons une propriété et une valeur. Si vous regardez le sélecteur, vous verrez qu'il est écrit H1. Et cela renvoie directement à l'élément d'en-tête HTML H1 que nous avons ajouté dans notre exemple de document. Cela signifie essentiellement que toutes les déclarations que nous avons à l'intérieur du sélecteur CSS affecteront tous les en-têtes H1. En regardant la déclaration, nous pouvons voir que nous en avons deux. Sous le premier, nous avons une propriété de couleur et une valeur de bleu. Si vous ne l'avez pas déjà deviné. Cela signifie que nous changeons l'élément HTML de titre H1 pour avoir la couleur de bleu. Et nous avons aussi la taille de police 12 pixels. Encore une fois, si vous ne l'avez pas encore deviné, cela signifie que nous changeons les en-têtes A à 12 pixels. C' est mon tarif. Certains CSS, par exemple, site Web. En regardant notre éditeur de code, je voulais changer la taille de police de paragraphe. Donc, je vais prendre P car cela lie directement à l'élément HTML. Et puis nous allons avoir un support bouclé ouvert et un support bouclé de fermeture. En appuyant sur Entrée, je peux prendre une déclaration et une valeur à l'intérieur de ces crochets bouclés. Donc, je vais écrire la taille de la police. Et je vais rendre les étiquettes vraiment sac juste pour que nous puissions vraiment voir le changement avec moi. Et donc je vais le faire pour une perte de paquets, ce qui est vraiment important. Je ne vais pas voir de la feuille de style en appuyant sur Control S. Et je vais aller à notre navigateur. Je vais rafraîchir la page. Rien ne s'est passé. Pourquoi rien ne s'est-il passé ? C' est parce que nous n'avons pas lié ou feuilles de style externes fichier CSS dans notre index.html. Oui. Donc, notre site n'a aucune idée qu'il y a une feuille de style à utiliser. Pour que les prêles prennent effet, nous devons lier ou feuille de style externe à notre index.html. Faisons ça maintenant. Retournez à notre éditeur de code. Sera alors la tête de notre site Web, qui est à nouveau pour un cerf ou des informations non affichées sur le site. Nous voulons utiliser cette zone pour relier notre feuille de style externe. Alors prenez une nouvelle voie et vous vouliez copier cette ligne. Cette ligne de HTML est un lien. Rel est synonyme de relation. On est évidemment en train de charger une feuille de style. Et puis nous avons l'âge réf. Pour l'âge réf, nous allons utiliser un chemin à nouveau. Cette fois, le chemin d'accès est à la feuille de style. Nous le créons. En regardant notre dossier d'exercice, nous pouvons voir que notre feuille de style CSS est dans le dossier de style et le nom est stylesheet dot CSS. En utilisant la méthode vraiment facile que je vous ai dit plus tôt, comprendre comment mot de passe en prétendant que vous décrivez à index.html comment s'évanouir ou échouer. Nous allons utiliser cette méthode pour re ou chemin. Donc, d'abord, index.html devrait aller dans le style du dossier. Donc, nous allons prendre cela et enregistrer l'édition. Et puis il aurait besoin de regarder le nom du fichier, feuille de style point CSS. Donc, nous ne serons pas non plus de bande que nous connaîtrons chapeau C ou Control S. Retournez à notre navigateur et rafraîchir. Et vous pouvez maintenant voir que le texte est massif. Sur notre feuille de style a pris effet. Si nous inspectons ou paragraphe. Vous verrez également que la déclaration CSS que nous avons ajoutée est également incluse dans les jonquilles et a pris effet. Une des meilleures fonctionnalités de DevTools est que nous pouvons apporter des changements de vie à la CSS si un site Web, trois DevTools, par exemple, il ya la taxe est beaucoup trop sac une anémie qu'il ya grande. Ainsi, vous pouvez facilement voir le CSS prendre effet. Cela peut en faire une taille plus raisonnable, que nous pouvons faire évaluer et DevTools pour voir à quoi il ressemblerait. Je vais cliquer sur la taille de la police pour un paragraphe. Et je vais changer la taille de la police à 20 pixels. Vous pouvez maintenant voir que le CSS a pris effet et nous pouvons voir à quoi cela ressemble sur notre site Web. N' oubliez pas que cette modification n'a pas été enregistrée car un Gaussien est un changement de milieu uniquement localement dans votre navigateur. Et donc si je rafraîchis la page, vous pouvez voir qu'elle n'a pas pris effet. Modifions à nouveau la taille de police du paragraphe à 20 pixels. Et vous pouvez maintenant copier et transpercer la déclaration dans votre éditeur de code. Mer de votre feuille de style point css. Et sachez que lorsque vous actualisez votre page Web, vous pouvez voir que le CSS change. Tu m'as, ça reste. Écrivons un peu plus de CSS et nous allons le noter directement dans DevTools. Ce serait vraiment sympa. Par conséquent, la rubrique a été envoyée se rapporte. Pour ce faire, je vais cliquer sur H1 et DevTools. Je vais aller à l'éditeur CSS ou Pian. Je vais cliquer sur le Plus pour créer un nouveau jeu de règles CSS. Et puis je vais cliquer sous le LSAT. Et en tant que propriété, je vais écrire aligner le texte. Vous pouvez voir que DevTools vous donne un indice sur ce que vous pouvez choisir pour une valeur. Et je vais au centre, je ne vais pas frapper Entrée. Vous pouvez voir que notre rubrique a été centralisée sur notre site Web. Pour que ce changement prenne effet, nous devons l'ajouter à notre feuille de style, ce que nous pouvons certainement faire en copiant ce vrai Sam aller à notre éditeur de code et percer dans nos feuilles de style ou CSS sans sauver leur style feuilles ou CSS et rafraîchir notre page de navigateur. Vous pouvez voir qu'il y a un jeu de règles CSS a été ajouté. N' oubliez pas que nous pouvons ajouter plusieurs déclarations à votre rôle. Sam, disons que nous voulons que notre police de tête soit légèrement calquée et ne pas avoir l'air chauve. Nous pouvons simplement cliquer sur l'ensemble de règles et cela nous permettra d'ajouter une nouvelle déclaration. Maintenant, une question que vous pourriez avoir est, comment peut-on se souvenir de toutes ces propriétés différentes pour CSS ? Et la réponse est, vraiment, il se résume à la pratique. Il s'agit de créer des sites Web et de se souvenir des propriétés que vous avez utilisées lors de leur création. En attendant, cependant, il y a un très grand site Web, point de référence CSS IO, qui vous montre toutes les propriétés que vous pouvez utiliser NCSS et il saisit ensemble et collections. Donc, dans notre exemple de vouloir que notre titre soit une police légèrement plus mince, nous sommes, voyons quelle propriété CSS nous pourrions utiliser. Cliquez sur la typographie. Et puis le côté gauche, vous pouvez voir que nous avons police, poids, police de clic. Vous pouvez voir la propriété et les valeurs que vous pouvez utiliser. Vous pouvez voir qu'il vous donne également les valeurs que vous pouvez utiliser. Pour une famille. On va utiliser un briquet comme un huitième, puis le fouetter. Reprenons cela en retournant à notre site Web, allant à dab tells, en nous assurant que nous avons notre titre H1 sélectionné. On peut cliquer sur une règle Sam, tape tape tape tape, on est une nouvelle politique. En fait, les outils DevTools vous donnent également des conseils sur les valeurs que vous pourriez utiliser. Nous avons décidé que nous voulions utiliser un calque qui sélectionne Couche et Terre. Et vous pouvez voir que notre police de titre que nous sommes, est agréable. Pour ajouter cette feuille de style terroriste. Il suffit de copier la déclaration que nous venons d'ajouter. Allez dans notre éditeur de code. Et étaient alors notre règle H1 dit créer une nouvelle voie et PSTN ou une nouvelle déclaration de contrôle S pour voir si elles retournent à notre navigateur et rafraîchir la page. Vous pouvez voir que nous avons atteint ce que nous voulions avoir un plaisir plus mince sur notre cap. Donc, quand il s'agit d'utiliser CSS, si vous n'êtes pas sûr si les propriétés ou les valeurs que vous devriez utiliser pour obtenir le look que vous voulez. Donnez des E/S de point de référence CSS ou une recherche à l'aide leurs collections ou en recherchant des propriétés CSS, par exemple, la couleur. Vous devriez être en mesure de trouver les propriétés et les valeurs que vous devez utiliser pour obtenir le changement U1 et CSS au fil du temps et grâce à la réputation. Et en indiquant vos propres sites Web, ces propriétés et ces valeurs deviendront une seconde nature et vous serez en mesure de les utiliser sans avoir à faire référence au, disons, le verre. Cependant, en tant que débutant, je dis que le verre est fantastique pour apprendre les propriétés et les valeurs dont vous avez besoin pour créer de beaux sites Web en CSS. 8. Les bases du CSS - Partie 2: Plongons plus en profondeur dans l'utilisation de CSS sur notre site Web d'exercices. La prochaine chose que nous voulons jeter un oeil est l'espacement entre les éléments. Si vous jetez un oeil à ce lien et à l'image ci-dessous, vous remarquerez qu'ils sont très proches ensemble. Pour résoudre ce problème, nous allons utiliser ce qu'on appelle des marges. Donc, si j'inspecte l'élément, cliquez sur mon image ou vous pouvez simplement cliquer sur la balise image dans DevTools. Et on va aller à la boîte CSS et cliquer sur le Plus pour créer un nouveau rôle, Sam. Et je vais commencer à enregistrer le tiret de marge. Maintenant, nous pouvons utiliser la marge haut, gauche, droite, bas. Mais parce que je veux ajouter un espace entre le haut de l'image et le lien. Et nous allons ajouter la marge supérieure. Et puis je voulais prendre 30 pixels. Vous pouvez connaître C, nous avons un bel espace entre le haut de l'image et le lien. Vous pouvez voir les marges visuellement représentées dans le modèle de boîte de DevTools. Vous pouvez également apporter des modifications à la marge dans cette zone d'outils de tourbières. Par exemple, si je clique sur la marge supérieure, je pourrais en faire 25, par exemple. Et vous verrez cela représenté sur votre site Web d'exercice. Je pense que 30 pixels avaient l'air ours. Donc, je vais juste supprimer la règle CSS que ce modèle bogs a ajouté. Et je vais copier l'image du vrai Zan. Je vais ouvrir mon éditeur de code et je vais ajouter et voir ces changements dans la feuille de style point CSS. Lorsque nous actualisons le site Web de l'exercice, vous verrez qu'il y a des changements qui ont pris effet. Et c'est la luminosité du site. Il est un peu en retard de couleur. Nous pouvons appliquer des couleurs aux éléments ainsi qu'au texte. Jetons donc un coup d'oeil à l'arrière-plan de ce site d'exercice. Je veux sélectionner le corps, qui est l'ensemble de l'arrière-plan du site Web. Et je vais ajouter une nouvelle règle à l'intérieur du vrai San. Je vais faire de la cassette drainée. Et lorsque vous prenez l'arrière-plan, vous verrez que DevTools vous offre une gamme d'options à partir desquelles vous pouvez emballer. Par exemple, notre gla. Vous verrez que la modification prend effet sur votre site Web lorsque vous cliquez sur l'une de ces couleurs. Maintenant, c'est génial. Oubliez rapidement la couleur sur votre site Web, mais cela ne vous donne pas vraiment un contrôle précis sur les couleurs. Par exemple, disons que je veux colorier à partir de cette image. Pour un contrôle des couleurs plus spécifique, NCSS, nous utilisons ce qu'on appelle un code hexadécimal. Si vous avez déjà travaillé avec la photographie ou l'édition d'images, vous connaissez peut-être déjà ce qu'est le code hexadécimal. Mais fondamentalement, l'accord hexadécimal est un code de couleur qui commence par un hashtag et est ensuite suivi par le sexe. Les couches sont des nombres. Les deux premières couches sont des nombres se réfèrent à lire, les deux suivantes se réfèrent au vert et le dernier à référé au jeu. C' est essentiellement une représentation d'une couleur RVB. Par exemple. Le hashtag suivi des gains de sexe est blanc, ou le hashtag suivi de six zéros est noir. Les codes hexadécimaux sont excellents car il vous permet de choisir une couleur à partir, par exemple, d'une image Photoshop ou d'un accord avec quelqu'un d'autre peut vous avoir déjà donné, fonction du marché et du matériel que vous avez reçu. Et ajoutez-le instantanément en tant que couleur à l'arrière-plan de votre site Web. Si vous ne connaissez pas un code hexadécimal, n'ayez pas peur. Devtools nous donne un très beau sélecteur de couleurs. Si nous cliquons sur la couleur à côté du code hexadécimal, vous verrez un sélecteur de couleur apparaître ici. Nous pouvons choisir une couleur plutôt que l'éclairage. Ou nous pouvons simplement cliquer sur la pipette jusqu'à et cliquer sur une zone sur notre image. Vous verrez qu'il s'agit d'une couleur et d'un code hexadécimal pour cette couleur en fonction de la zone que j'ai sélectionnée sur l'image. Maintenant, tout ce que nous faisons pour que ces changements prennent effet, c'est copier le vrai coffre-fort. Retournez à notre éditeur de code, PSTN, le jeu réel. Et voyez si, encore une fois, lorsque nous retournerons à notre site Web d'exercices, vous verrez que ces modifications sont entrées en vigueur. Nous pouvons également appliquer la couleur au texte. Donc, si je regarde l'élément d'en-tête, tout d'abord, vous verrez que nous avons déjà un jeu de rôles défini. Donc, je vais simplement ajouter à cela. Je n'ai pas besoin d'en créer un nouveau. Et je vais faire de la cassette couleur. Encore une fois. Devtools vous offre une gamme d'options parmi lesquelles vous pouvez choisir. Mais je connais le code hexadécimal pour le poids, qui est hashtag, suivi de six f. Donc je vais filmer hashtag et sexe Fs. Vous pouvez voir que cela est mis en miroir sont en tête. Une façon amusante ? Non, parce que cette règle dit déjà défini dans notre document CSS. Je n'ai pas besoin de copier l'ensemble des règles. J' ai seulement besoin de copier la partie couleur de celui-ci, le CSS que nous venons d'ajouter. Je vais aller dans mon éditeur de code. Je vais simplement ajouter cette fin à l'ensemble de règles qui est déjà défini pour le titre. Et je vais voir si le document il y a des changements pas de balise un effet. Je vais également changer la couleur de la police pour notre lien. Donc, je vais inspecter ou un élément de lien ou simplement cliquer sur la balise a. Nous sommes alors DevTools. Je vais ajouter un nouvel ensemble de règles car nous n'en avons pas déjà 14. Et je vais rendre la couleur blanche à nouveau. Je veux aussi rendre ce lien légèrement plus audacieux pour se démarquer. Donc, je vais ajouter la police nous, et la bande en gras. Vous pouvez maintenant voir que ce lien est en caractères gras. Et nous allons copier notre ensemble de règles et notre bureau sur notre feuille de style. Encore une fois, sauver. Ça a l'air génial. La dernière chose que je veux faire, c'est envoyer relayer tout à la minute, tout est tout à fait hors-centre. Donc, pour ce faire, je vais sélectionner notre tag body, qui est tout et notre site Web. Et je vais prendre des textos, Elaine. Non, vous pouvez choisir le tableau central gauche, mais décentraliser tout et vous voulez centre de bande. Vous pouvez voir que tout a maintenant été centré sur notre site Web. Encore une fois, parce que nous sommes tous ensemble existe déjà, je vais simplement copier le CSS que je viens de taper. Allez dans notre éditeur de code et ajoutez-le dans notre corps. Vraiment triste quand je vois cela et revenir à notre site d'exercice, vous pouvez voir que ces changements sont maintenant entrés en vigueur. 9. Sélecteurs de CSS et cours: Ensemble la plupart Day of CSS, nous devons maintenant jeter un oeil à ce que sont les sélecteurs CSS et pourquoi ils sont importants quand il s'agit de styliser votre site Web. Et notre site d'exercice. Faisons semblant de vouloir deux paragraphes, mais nous voulons seulement que le premier soit blanc. Nous voulons que le second soit noir comme un actuellement comme. Alors allons dans notre éditeur de code et ajoutons un deuxième paragraphe. Pour le faire. C'est très simple. Je vais juste copier et percer la balise de paragraphe, le contenu de la balise de paragraphe et la balise de paragraphe de fermeture. Et je vais juste le coller ci-dessous. Vous saurez donc que nous avons deux éléments de paragraphe. D' abord ici et le deuxième élément de paragraphe en dessous. Je vais simplement taper le premier paragraphe et le deuxième paragraphe, juste pour que nous puissions facilement voir les deux. Quand nous regardons notre page d'exercice, je ne vais pas voir cela et faire apparaître notre page d'exercice et la rafraîchir. Vous pouvez donc voir que nous avons maintenant nos deux éléments de paragraphe, mais les deux sont de style noir. Donc, si je vais dans la feuille de style, bon notre élément paragraphe et changer la couleur en blanc, qui est hashtag suivi par sexe AF. Et sauvez-le. Lorsque je rafraîchis notre page d'exercice, vous pouvez voir que les deux éléments ou un paragraphe ont été stylisés poids. Si nous les inspectons, vous verrez que le premier paragraphe a la couleur blanche, mais aussi le deuxième paragraphe. Pourquoi c'est ça ? Et comment pouvons-nous nous envoyer un fax pour comprendre pourquoi cela se produit ? Nous avons besoin de savoir, en savoir plus sur les sélecteurs CSS actuellement et notre feuille de style, chaque jeu de règles que nous avons créé a utilisé le sélecteur d'élément CSS, p, H1, image, corps a. Ce sont tous les éléments sélecteurs CSS. Comment le savons-nous ? Nous le savons parce qu'il n'y a pas de point ou de point avant le nom de l'élément. Un sélecteur d'élément apporte les modifications à tous les éléments sera alors une page Web. Donc, par exemple, si nous utilisons des éléments comme HDR payer chaque élément de paragraphe, nous allons alors le site Web aura ce CSS appliqué à eux. Donc, dans notre site Web d'exercice où nous avons deux paragraphes, le sélecteur d'élément p et CSS s'applique à tous les éléments de paragraphe, y compris les deux gaz par gaz que nous avons dans le site Web. Et plus, nous pourrions ajouter en utilisant le sélecteur CSS d'un élément ne nous donne pas un contrôle spécifique sur les éléments HTML utilisant les mêmes balises. Pour cette raison, nous devons utiliser des classes. Les classes nous permettent d'attribuer un style CSS spécifique à des balises HTML spécifiques. Laissez-moi vous expliquer comment faire cela tout en expliquant en même temps, MC SAS, nous définissons une classe en utilisant un point ou un point avant le nom du sélecteur CSS. Et nous définissons ensuite ce nom de classe comme un attribut dans l'élément HTML. Pour comprendre cela, laissez-moi vous expliquer comment l'installer. Et je pense que cela aura beaucoup plus de sens une fois que vous verrez une action. Donc, la première chose que nous voulons faire en regardant notre éditeur de code est d' ajouter une classe à notre deuxième élément de paragraphe. Pas de classes et d'attributs. Donc, nous l'ajoutons avec la balise HTML d'ouverture interne. Donc, je vais ajouter un Spears et je vais écrire égaux de classe et m de n aux marques de discours. Je vais ajouter une classe appelée paragraphe blanc. Je vais ensuite aller à notre feuille de style et je vais ajouter un nouvel ensemble de règles. Cette fois. Je vais ajouter un point ou un point avant le nom de la classe. Donc, je vais écrire point, puis paragraphe blanc dans nos crochets bouclés et je voulais prendre la couleur. Et je vais ajouter hashtag et sex AF, qui est le code hexadécimal pour le blanc. La dernière chose que je veux faire est de supprimer la couleur blanche que nous avons ajoutée à l'élément de paragraphe en haut de notre feuille de style est que cela transformerait actuellement tous les éléments de paragraphe en blanc lorsque nous voulons seulement que le deuxième paragraphe soit blanc. Donc je vais juste enlever ça. Alors laissez-moi juste expliquer rapidement à nouveau comment cela fonctionne. Donc, j'espère que c'est clair dans votre main, nous avons ajouté une classe à notre balise HTML d'ouverture pour notre deuxième paragraphe. Le nom de la classe en tant que paragraphe blanc. Non, nous n'avons pas besoin d'un point ou d'un point avant le nom de la classe. Lorsque vous l'ajoutez dans notre balise HTML, nous écrivons simplement des égaux de classe, puis nous passons dans des marques vocales ou ClassName, que nous pouvons définir comme tout ce que nous voulons. Mais dans ce cas, nous l'avons appelé paragraphe blanc. Ensuite, sur notre feuille de style, nous avons ajouté une nouvelle règle. Ils sont detrital dit déférent d'un sélecteur CSS d'élément, parce que nous utilisons un sélecteur CSS de classe. Donc, nous avons ajouté un point ou un point suivi d'un ClassName et SKS, C'est un paragraphe blanc, qui lie directement à notre paragraphe de poids de classe HTML et se déplace dans le jeu réel, nous venons d'ajouter le changement de couleur assemblé pour rendre le texte blanc. Disons c de la feuille de style. Et voyez aussi si le index.html. Bien, notre page d'exercice et rafraîchir. Maintenant, vous pouvez voir notre premier paragraphe est noir et notre deuxième paragraphe est blanc. Si nous regardons ces éléments dans DevTools, vous pouvez voir le premier paragraphe tire de l'élément de sélection CSS p. Et si nous regardons notre deuxième paragraphe avec le nom de classe blanc paragraphe, vous pouvez voir qu'il tire les règles de paragraphe de poids dire à laquelle nous avons créé pour cette classe, vous pouvez créer autant de classes que vous voulez avec n'importe quel nom vous voulez. Et vous pouvez également avoir plusieurs éléments HTML, utilisez la même classe. Ils n'ont même pas besoin d'être les mêmes. Laissez-moi vous montrer ceci à titre d'exemple. Ajoutons un deuxième paragraphe de souffleur d'en-tête. Ajoutons un titre H2. Et je vais écrire ceci comme un titre blanc, suivi d'une balise de clôture. Lorsque nous voyons cela et que nous chargeons notre site Web d'exercice et actualisons, vous verrez que ce n'est pas une façon que vous allez comme en fait noir. Pour rendre ce blanc, revenons à notre éditeur de code. Ajoutons une classe à nouveau. Et utilisons la classe de paragraphe de poids que nous avons déjà créée. Pour ce faire dans la balise HTML d'ouverture, encore une fois, tapez classe égale, puis passez dans les marques vocales juste hey, attendez paragraphe. La même chose que la deuxième classe de paragraphe que nous avons déjà créée. Voyons si cela revient à notre site Web d'exercice et rafraîchir. Vous verrez que le titre est Nye White. Lorsque nous inspectons cet élément. Et vous pouvez voir est tiré de la règle de paragraphe blanc CMB, Sam, nous avons déjà créé. Donc maintenant, espérons que vous pouvez voir le par d'utilisation des sélecteurs de classes CSS. Nous pouvons créer des jeux de règles que nous pouvons ensuite appliquer à plusieurs éléments HTML, ce qui nous permet de styliser un site Web très rapidement, mais aussi de nous donner beaucoup plus de contrôle sur les éléments HTML spécifiques que nous voulons styliser. 10. Typographie dans CSS: Jetons maintenant un coup d'oeil à la topographie. Nous voulons avoir un plaisir agréable sur ce site d'exercice pour vraiment le rendre debout un. Alors jetons un oeil à la façon dont nous ajoutons et modifions les polices sera alors CSS. La première chose que nous devons faire est d'importer un plaisir, que nous pouvons utiliser pour le faire. abord, nous devons trouver un fonds que nous aimons nous rendre vraiment simple. Je vais vous montrer comment importer et utiliser des polices Web à partir de Google. Accédez à polices dot google.com. Et ici, vous verrez des milliers de fonds que nous pouvons utiliser. Nous allons juste choisir un fonds que nous aimons. Par exemple, Oswald, où vous pouvez choisir où vous rembourser un. Pour cet exemple, nous allons faire défiler vers le bas et nous allons choisir, sélectionner leur style. Et nous avions gagné un plaisir léger, régulier et audacieux. Donc, je vais juste choisir la lumière d'un plaisir régulier et d'une ferme audacieuse pour que nous puissions couvrir tous les poids avec du SARM. Et la fenêtre VRE ne s'ouvre pas automatiquement au taux. Montez au rayon supérieur et cliquez sur ce bouton ici qui indique voir votre site et les familles. Et vous verrez cette fenêtre s'ouvrir. La première chose que nous devons faire est d'importer le plaisir web bureau dans notre site Web. Il suffit de sélectionner et de copier tout le texte dans cette première zone. Nous allons à notre éditeur de code et dans la feuille de style souffleur de tête, nous avons percé. On saura que c'est ça. Et revenez à Google Fonts. Et nous allons copier CSS Brill dans la deuxième boîte. Je suis retourné à notre éditeur de code. Et dans le body roll SAM, qui applique toutes les règles CSS à la page entière. Nous allons créer une nouvelle voie et percé. Qu' est-ce que ça fait ? La règle CSS que nous venons d'ajouter comme spécifiant que la famille de polices que nous voulons utiliser pour toute la page d'exercice est le plaisir d'Oswald. Et comme nous avons importé le plaisir Oswald dans la tête de notre site Web, il est disponible pour l'utiliser. Donc, je vais voir si la feuille de style et voir si le index.html. Et maintenant, si je retourne à notre site d'exercice et me rafraîchir, vous pouvez voir que l'ensemble du site utilise le plaisir Oswald. Ça a l'air génial. Mais que se passe-t-il si nous voulons utiliser plus d'un plaisir ? Disons que nous voulons que les paragraphes aient un plaisir différent du reste du site Web. Revenons aux fonds Google et retirons tout de notre famille sélectionnée. Et retournez à la page d'accueil. Emballons dans la neige une police pour les paragraphes. Je veux que ce soit différent de celui qu'on vient de faire. Donc oméga, bon contraste. Mais encore une fois, vous pouvez choisir où vous aimez le plaisir. Je vais choisir Labster. Labster n'a qu'une seule police. Nous sommes donc nous allons juste choisir Regular, sélectionner leur style. Cliquez à nouveau sur le bouton en haut à droite pour quelques familles sélectionnées. Et encore une fois, nous avons besoin d'une copie. Les tags dans la première boîte, qui est TM pauvre orphelin, vont à notre éditeur de code et biloba a fourni le code pour importer le premier plaisir. Je vais ajouter la seconde. Et je vais voir si revenir à la page Web des fonds Google, je vais sélectionner et copier la règle CSS pour la famille homard fun. Et je vais aller à notre feuille de style. Maintenant, nous voulons le deuxième plaisir à appliquer aux paragraphes seulement sera alors notre page d'exercice. Donc, je vais aller à l'élément p. Et la raison pour laquelle je choisis l'élément p ou non, la classe de paragraphe blanc que nous avons créée est parce que la classe de paragraphe de poids, si vous vous en souvenez, ne s'applique qu'au deuxième paragraphe. Et je veux que cette police s'applique aux deux paragraphes. Donc, je vais utiliser l'élément qui s'applique à tous les éléments de paragraphe et quand créer une nouvelle voie dans les règles là-bas. Et l'homologue Stan, la déclaration de la famille de polices ne spécifie pas que tous les éléments p utiliseront la famille de polices Lobster et le reste du corps pour utiliser la famille de polices Oswald. Et vous voulez voir si la feuille de style, en vous assurant que index.html est également enregistré. Revenez à la page d'exercice et actualisez. Vous pouvez voir les en-têtes et tous nos éléments sont là dans les paragraphes. Utilisez le premier fonds que nous avons emballé, qui était Oswald. Vous pouvez le voir en allant aux éléments dans DevTools. Vous pouvez voir H1 mètres et Oswald. H2 utilise Oswald. Même le lien âge ref utilise Oswald. Mais vous pouvez voir que les éléments de paragraphe utilisent Labster. Et encore une fois, vous pouvez utiliser la police que vous aimez de Google. Je suis juste en utilisant ceux-ci comme une illustration rapide de la façon dont vous pouvez utiliser la typographie et facilement et porter des fonds Google dans votre site Web pour les rendre beaucoup plus professionnels. 11. Bootstrap: Pour presque prêt à démarrer le projet de site Web moyen. La dernière chose que nous devons apprendre en tant que Bootstrap. Qu' est-ce que Bootstrap ? Bootstrap est essentiellement une collection de bits de code réutilisables pratiques et de CSS et HTML. Et c'est la bibliothèque HTML et CSS la plus populaire et le monde. En fait, au moment de mendier ce cours, plus de 18 millions de sites Web utilisent Bootstrap. Il y a plusieurs raisons d'utiliser Bootstrap. Il s'agit notamment de gagner du temps. Il est facile à utiliser, il est personnalisable. Il vous aide à créer des sites Web cohérents et professionnels. Mais la raison principale et la raison pour laquelle je vais vous le démontrer dans ce cours est qu'il dispose d'un système de diplômés fantastique qui vous permet de disposer facilement votre site Web. Et peut-être encore plus important, permet à votre site Web d'être mobile réactif avec l'IA, beaucoup de travail, vous pouvez en savoir plus sur Bootstrap it, getbootstrap.com. Mais je vais vous apprendre comment l'inclure dans votre page Web et comment utiliser le système de grille lors de la pose sur votre site Web. Donc, la première chose que nous devons faire est d'inclure le piège dans notre site Web. C' est essentiellement un fichier CSS. Alors allez au package d'exercice que nous avons travaillé à partir d'un extérieur du dossier d'exercice, vous verrez un dossier appelé nécessaire pour l'exercice, prouvé qu'il y a un dossier appelé bootstrap, que je veux que vous copiiez. Retournez à notre dossier d'exercices. Et percé sait que nous devons inclure les morts dans notre document index.html. Pour ce faire, allez dans notre éditeur de code. Et ci-dessous où nous avons inclus notre feuille de style. Je vais simplement copier cette ligne, créer une nouvelle voie et PS2 à CLS en tapant toute la ligne. Et nous voulons supprimer le contenu de H ref. Et maintenant, nous devons ajouter le chemin pour le fichier Bootstrap. Si nous regardons notre dossier d'exercices, nous pouvons voir qu'il y a un dossier Bootstrap. Et dans Bootstrap, il y a un fichier bootstrap.css. Donc encore une fois, en supposant que vous êtes donné des directions à index.html et la hauteur. Encore une fois, sans faute, nous aurions besoin d'aller dans le dossier bootstrap. Donc, je vais prendre bootstrap barre oblique avant, puis le nom de fichier est bootstrap.css. Donc, je vais prendre ce point de sangle css et voir si vous n'avez pas inclus bootstrap dans votre site d'exercice. Alors, comment pouvons-nous savoir utiliser la sangle échouer qui viennent d'inclure et quel est le Bootstrap échec ? Nous venons d'inclure le fichier bootstrap.css que nous venons d'ajouter dans notre site Web d'exercice est essentiellement une grande liste de jeux de règles CSS prédéfinis que nous pouvons utiliser lors de la création de notre site Web. Donc, pour l'utiliser, nous devons utiliser des classes CSS. Met le lien vers le fichier bootstrap.css avec juste inclus. Alors modifions la disposition de nos toiles d'exercice ALL chauve-souris, donc je peux vous montrer, Hey, ça marche. En regardant notre site d'exercice, je veux ajouter un troisième paragraphe par 12 à trois paragraphes pour être sur la même ligne. L' un à côté de l'autre. Donc, la première chose que nous devons faire dans notre éditeur de code est d'ajouter un troisième paragraphe. Donc, je vais juste copier l'un des éléments de paragraphe que nous avons ajoutés dans notre site Web d'exercice. Et je vais à des pairs pour faire sauter le deuxième élément de paragraphe. Je veux seulement que l'élément de paragraphe métallique soit blanc. Donc, je vais supprimer la classe pour le troisième élément de paragraphe. Nous venons d'ajouter ce joli C de S. et jetez un oeil à notre site d'exercice. Vous pouvez voir notre site Web ressemble maintenant à ceci. Ça a l'air très cassé. Alors qu'avons-nous fait de mal ? Revenons à notre éditeur de code et faites défiler jusqu' au sommet où nous avons inclus le CSS Bootstrap. Que s'est-il passé car le bootstrap.css est en dessous de notre feuille de style. Cela signifie coder des termes. Tous les styles qui viennent de bootstrap.css remplacent les styles que nous avons ajoutés et notre feuille de style point CSS. Donc, quand nous jetons un oeil à notre site d'exercice et jeter un oeil au corps, vous pouvez voir que la couleur de fond que nous avons ajouté dans notre feuille de style ne CSS est remplacée par la couleur de fond qui a été ajouté par le bootstrap.css. Donc c'est très important. Le bootstrap.css va au-dessus de notre feuille de style point css et l'en-tête. Encore une fois, pour être clair, la raison en est le port de fin le plus bas au des feuilles de style ou du fichier CSS remplacera toujours ceux qui le dessus. Donc, à moins que KS, maintenant que nous les avons permutés, jeux de règles bootstrap.css seront remplacés par les feuilles de style ou les jeux de règles CSS que nous avons ajoutés. Donc, je vais enregistrer ceci, retourner à notre page d'exercice et rafraîchir. Vous pouvez maintenant voir les jeux de règles que nous avons ajoutés dans notre feuille de style dot css ont réappliqués. Nous avons donc maintenant trois éléments de paragraphe. Mais je veux qu'ils soient côte à côte et rangée. Pour ce faire, nous allons utiliser le système de grille Bootstrap. Le système de grille Bootstrap utilise des lignes et nous avons n m lignes, colonnes. Vous pouvez avoir 12 colonnes dans une ligne, puis une seule colonne peut prendre autant de colonnes que vous le souhaitez. Par exemple, vous pourriez avoir deux colonnes de sexe. Vous pourriez avoir trois ou quatre colonnes. Vous pourriez avoir quatre colonnes de trois. Ou vous pourriez avoir une colonne de 71, colonne de cinq. Vous pourriez avoir trois colonnes à votre 5 et 1 de 2. Et comme vous pouvez le voir, cela vous donne un contrôle illimité sur les toiles de colonne avec Anna rangée. Mettons ceci en pratique. Je vais faire apparaître l'éditeur de code et j'ai besoin d'ajouter une ligne. Les trois paragraphes se trouvent bien à l'intérieur de cette ligne. Donc, au-dessus du premier paragraphe. Et nous allons itérer dev, qui est un élément HTML générique. Et je vais écrire la classe égale ligne. Donc, nous avons un élément div HTML, qui est encore une fois un élément HTML générique. Et à l'intérieur, j'ai un attribut de classe, que j'ai ajouté par race et classe égale. Et dans les marques de discours, j'ai ajouté la ligne. On doit fermer cette étiquette. Mais parce que nous voulons les trois éléments de paragraphe qui s'y trouvent. Et on va descendre en dessous de la balise de fermeture du troisième paragraphe. Et je vais fermer la balise div pour garder les choses belles dans notre éditeur de code. Ce que je vais faire, ce n'est pas seulement les éléments de paragraphe sur le droit permettre. Cela n'aura aucun effet sur notre page Web réelle, mais cela affecte la façon dont les choses sont disposées dans l'éditeur de code et facilite la compréhension de l'emplacement des éléments à l'intérieur des autres. Pour ce faire, je vais simplement sélectionner tous nos éléments de paragraphe. Et je vais appuyer sur Tab sur mon clavier. Vous pouvez voir qu'il n'y a pas de rend les choses plus faciles à comprendre à partir de l'éditeur de code est point de vue. Visuellement, vous pouvez voir que trois éléments de paragraphe sont dans une ligne, dev. Donc, je ne vais pas voir si cela et charger notre page Web d'exercice et rafraîchir. Et vous pouvez voir que rien n'a vraiment changé. C' est parce que tout ce que nous avons fait est d'ajouter ces trois éléments de paragraphe dans votre ligne. Nous devons savoir que je les ajoute dans des colonnes. Donc, je veux trois colonnes également espacées dans cette ligne. Et comme Bootstrap a une largeur de colonne de ligne maximale de 12, cela signifie que chaque colonne de paragraphe doit être de quatre colonnes de mouillé. Alors comment on fait ça ? Revenons à notre éditeur de code. Et au-dessus de notre premier paragraphe, je vais ajouter un nouveau Dev, qui, comme vous vous souvenez en tant qu'élément HTML générique, je vais ajouter une classe égale les marques vocales. Et prévenir ça. Je vais évaluer la CLL pour le tiret de colonne quatre pour une toile de quatre colonnes. Et je vais finir cette balise HTML d'ouverture. Maintenant, nous voulons seulement que notre premier paragraphe soit une première colonne. Donc, en dessous de la balise p de fermeture pour notre premier élément de paragraphe. Et quand j'ai eu un boiteux et que je vais fermer cette étiquette div. Encore une fois pour garder les choses qui peuvent bien dans notre éditeur de code, je vais sélectionner le premier paragraphe entier et appuyer sur Tab. Donc encore une fois, méga visuellement évident que l'élément paragraphe est tissé la colonne de classe dev. Nous avons donc ajouté notre premier élément de paragraphe dans une colonne de quatre. Nous avons besoin sont les deuxième, troisième paragraphes et faire leurs propres colonnes. Pour rendre cela rapide, tout ce que vous devez faire est de sélectionner et de copier la colonne de classe dev pour la balise HTML que vous venez d'ajouter. Et ajoutez ceci au-dessus du deuxième paragraphe en créant une nouvelle ligne sur le RTPC. Ensuite, juste après la balise p de fermeture pour le deuxième paragraphe, fermez ces balises div. Encore une fois, je vais sélectionner l'élément de paragraphe entier et appuyer sur Tab sur mon clavier. Et enfin, au-dessus du troisième paragraphe, créez une nouvelle voie et un PS donné, la colonne de classe dev pour l'élément. Et encore une fois, juste après la balise p de fermeture, je vais fermer cette balise div. Et encore une fois, je vais sélectionner le troisième paragraphe entier et appuyer sur Tab sur mon clavier. Encore une fois juste pour être clair, quand je vante élément à travers dans l'éditeur de code ne change pas sa possession ou sa mise en page sur la page Web réelle. Assemblage pour référence visuelle dans l'éditeur de code. Comme vous pouvez le voir, il est facile à voir. Nous avons trois colonnes. Nous avons un div avec une classe de colonne quatre, avec un paragraphe à l'intérieur. Nous avons un deuxième div avec une classe de colonne pour avant paragraphe blanc à l'intérieur. Et nous avons un troisième div avec une classe de colonne pour le premier troisième paragraphe à l'intérieur. Je ne vais pas voir si cela retourne à notre page d'exercice et rafraîchit. Vous pouvez voir que nous avons une ligne, et dans cette rangée nous avons trois boîtes de colonnes de mariés égaux. Et à l'intérieur, nous avons nos paragraphes. Si nous regardons les outils de développement juste pour comprendre cela plus loin, vous pouvez voir que nous avons notre ligne de classe div. Si j'ouvre cela en cliquant sur la flèche à gauche, vous pouvez voir avec Anna ligne, nous avons trois colonnes de largeur égale. Et dans chaque colonne, nous avons nos éléments de paragraphe. Comme mentionné, la largeur maximale d'une ligne est de 12. Donc, nous pouvons avoir un joueur par et lance ceux-ci différemment si nous le souhaitons, tant que nous restons dans la colonne max alors que de 12. Ainsi, par exemple, nous pouvons avoir les deux premiers paragraphes être très petits, donc seulement deux colonnes de pain. Et notre dernier paragraphe être vraiment grand de colonnes IOT avec elle. Plus deux, plus deux, c'est 12. Donc c'est notre véritable web max. Je vais le sauver. Et quand je rafraîchis la page, vous pouvez voir que nous avons maintenant deux petits paragraphes et le troisième étant très grand. Vous pouvez également changer S empêcher DevTools pour obtenir une représentation visuelle rapide et facile de ce que cela ressemblerait en allant simplement avec n ou une classe de ligne et en changeant les classes de dev pour avoir différentes bandes de colonnes. Donc, par exemple, je pourrais faire ceci 1, 4, je pourrais faire le métal 13, et je pourrais faire le dernier, 5. Si vous incluez plus de colonnes que 12, ce que je peux faire ici NIH, en faisant ce neuf, par exemple, vous pouvez voir qu'il casse la ligne. Vous devez vous assurer que toutes les colonnes de la ligne additionnent jusqu'à 12. Donc, pour ce faire, je changerais cette colonne à cinq. Vous pouvez avoir aussi peu qu'une colonne dans une rangée et un maximum de 12. Bootstrap est livré avec beaucoup d'autres choses que vous pouvez utiliser simplement en utilisant des classes CSS, telles que des boutons, des cartes, listes déroulantes, des formulaires, même des navigations. Mais pour ce cours, nous allons l'Assemblée va utiliser le système de grille car c'est un moyen vraiment puissant de rassembler un site web mobile responsive, qui sera abordé plus tard dans ce cours. Ensemble rapidement. 12. Ce que nous allons créer: Donc, avant d'écrire un code, Jetons un coup d'oeil au site que nous allons créer. Donc, pour ce cours, je crée un scénario amusant où nous avons une entreprise dans le monde qui est dirigée uniquement par des chiens. Et ils sont venus nous voir pour créer leur premier site web. C' est un peu amusant et Sally scénario, mais ça nous donne une direction créative pour partir. Jetons donc un coup d'oeil au site Web que nous allons créer pour eux. La première section que vous verrez sur le site est la navigation. Et cela contient quelques liens qui nous permettent de naviguer sur la page Web. Donc, par exemple, si je clique là bi-section, cela nous amène à là par zone du site Web. Ou si je clique sur la section Contactez-nous, il nous ramène à la section Contactez-nous du site Web. Ce sera notre navigation. La section suivante que nous avons sur le site est la zone de réduction. C' est une grande section en gras, contient beaucoup de couleur. air vraiment agréable, a une image mendiante, a un titre de sac, et a une petite quantité de balises de paragraphe, qui décrit fondamentalement notre ORL réduit l'entreprise au site Web de bureau de visualisation, dit sera la section d'introduction à RSA. La prochaine section du site Web que nous avons est la section À propos de nous. Vous pouvez voir qu'il a trois colonnes. Chaque colonne comporte une lésion cérébrale plus petite, un titre et un paragraphe. Et chaque colonne est fondamentalement quelques informations sur un membre du personnel hors comme affaires. Donc, vous pouvez voir que j'ai top dog le chien même gérer votre chien, dit sera là par notre section du site. La section suivante que nous avons est la section YR aussi dire, et il fait exactement cela. Il décrit pourquoi quelqu'un devrait choisir comme examen de la FDA d'affaires dans le site, vous pouvez voir que nous avons trois lignes avec tous Ernie et par grains la soif et troisième ont ce fond bleu violet. Et le milieu a une barre plus grise grainée. Terminez chaque ligne, nous avons un titre et un paragraphe et une image. Et vous pouvez voir que c'est le drain de rabat pour la rangée de métal dit sera la section y OS du site Web. La prochaine section que l'un sans doute le plus important parce que c'est vraiment l'impact des gens peut entrer en contact avec votre entreprise. La section Contactez-nous. Vous pouvez voir dans le côté gauche nous avons l'e-mail et aussi l'adresse de l'entreprise. Et puis sur le côté droit, nous avons deux autres images. Il s'agit de la section Contactez-nous du site Web. Enfin, nous avons le pied de page. C' est vraiment simple et simple. Il contient juste l'année, qui est évidemment 2021 au moment de la pression Magnus et le nom de l'entreprise. Donc, c'est le site et tout un, et c'est ce que nous allons coder et le style lors de la création de notre premier site Web. 13. Créer le site Web - Navigation: Vous êtes maintenant prêt à coder le projet de site Web moyen en utilisant tout ce que nous avons appris jusqu'à présent et notre fichier HTML d'exercice, nous allons tout tirer ensemble et faire un site Web à la recherche professionnelle. Pour commencer, nous devons effacer le diner Chordata ou ouvrir quelques nouveaux fichiers pour commencer. Je vais fermer la feuille de style pour le site de l'exercice. Et je vais fermer le index.html pour notre site d'exercice. Faites apparaître le dossier du package d'exercice à partir duquel j'ai travaillé et montez un fichier. Eh bien là, vous verrez notre dossier de site Web. Cliquez sur la fin du dossier du site Web. Et ajoutons notre index.html dans notre éditeur de code. Vous pouvez voir que nous commençons par, je prie, vide, nouveau fichier HTML. Beaucoup de le voir comme notre fichier HTML d'exercice. La première chose que nous devons faire est d'inclure une feuille de style. Mais avant de le faire, nous devons le créer. Retournez à notre dossier de site Web, créez un nouveau dossier appelé style. Dans ce dossier, créez un nouveau document texte, mais appelez-le feuille de style css point. Et nous voulons changer l'extension de nom de fichier. Alors oui. Et nous avons maintenant créé un fichier CSS point feuille de style qui est connu inclure cela dans la tête de notre document HTML. Donc, je vais bande REL pour une relation égale feuille de style parce que c'est une feuille de style, H ref. Et dans les marques de parole, nous devons ajouter notre chemin. En regardant notre dossier de site Web, vous pouvez voir le dossier est appelé style. Et nous avons entré pour essayer de charger les feuilles de style ou le document CSS. Donc, nous allons taper style pour la recherche, feuilles de style ou CSS. Et nous fermerons la ligne HTML. Faites-nous savoir cela. Nous voulons ouvrir notre feuille de style afin que nous puissions ajouter des styles au fur et à mesure que nous développons ou site Web. le bouton droit de la souris sur l'onglet index.html, allez à Split rate, puis ouvrez notre dossier de site Web et faites glisser notre feuille de style et vers le PM droit. Nous pouvons ensuite fermer notre fichier index.html sur la poignée de broche droite. Nous avons inclus notre feuille de style et nous avons un ouvert prêt à ajouter des styles. Ensuite, nous devons inclure Bootstrap. Rappelez-vous, le fichier bootstrap.css doit aller au-dessus de notre feuille de style et de notre document HTML afin que toutes les règles CSS soient cotées et notre feuille de style remplacent tous les styles préexistants fournis avec Bootstrap. Je vais donc ajouter un nouveau calque au-dessus du lamer. Nous avons inclus notre feuille de style. Je vais copier cette voie et les pairs ci-dessus juste pour voir si un certain temps. Et je vais ouvrir notre dossier d'exercices sur notre site Web. Si nous montons un dans notre dossier de site Web, vous pouvez voir que nous n'avons pas de dossier bootstrap inclus. Nous devons donc remonter dans le dossier du package, aller dans le dossier de l'exercice nécessaire, et copier le dossier d'amorçage. Retournez au dossier du site Web. Et percé le dossier bootstrap. Et dans ce dossier Bootstrap, vous pouvez voir que le fichier bootstrap.css est inclus. Alors Papa, il y a un document index.html larme. Nous changeons le chemin pour être amorcé, barre oblique avant bootstrap.css et voir si griot, nous sommes maintenant prêts à aller dans la création de notre site Web principal, la première chose que nous voulons faire est d'ajouter une navigation en haut de son site Web. Alors écrivons ça. Allons à l'intérieur des balises de corps pour le document HTML. Et créons ce qu'on appelle un commentaire. Un commentaire est Elaine sera alors votre éditeur de code, qui n'est pas rendu sur votre page Web. but simple est de vous permettre d'ajouter des notes à votre document HTML, qui peut être utilisé pour expliquer votre accord, ce qui est vraiment utile si vous revenez à un document HTML, allèle ou D pour vous aider à rafraîchir votre mémoire. Pour écrire un commentaire, vous devez écrire un point d'exclamation inférieur au signe, un tiret, un tiret. Vous pouvez voir que la ligne devient maintenant grise dans votre éditeur de code. Et je vais juste re navigation et dans les indices. Votre taux de commentaires, tiret, tiret. Plus grand que fou. Vous pouvez voir que cette ligne est grisée. Cela signifie que le DES n'est pas un commentaire et bien ne pas être affiché sur votre page Web. Et un mince ajouté sur les lignes ci-dessous. Eh bien être affiché seulement du texte entre les tirets. Bien-être commentateur I, il n'y a pas de tag, une nouvelle voie et le taux ou la navigation HTML. Donc, nous voulons une liste ordonnée, donc une balise UL. Je vais fermer cette balise de liste non ordonnée. Et puis dans notre liste non ordonnée, nous avons besoin d'une dernière balise I am LI. Et réfléchissons aux éléments qui vont être sur notre navigation. On va rentrer chez nous. Pour que vous puissiez revenir à la page d'accueil. Et je vais fermer la balise HTML ALA. Je vais prendre une nouvelle voie. Et quand j'ajouterai une autre balise LI sur notre site Web, nous allons avoir une section de morsure. Donc, je vais écrire un bateau avec le label LA. Vous pouvez accélérer cela en copiant et collant simplement les lignes ALA. Donc je vais en ajouter deux de plus. Je vais avoir une section du système d'exploitation. Et nous allons avoir une section de contact. Vous pouvez avoir ce que vous voulez dans votre navigation. Mais je pense que le premier exemple, ceux-ci fonctionneront parfaitement. Ça et moi, je vois de ça. Et pour la première fois, C'est faire apparaître notre page HTML et notre navigateur. Aujourd'hui, que quelqu'un va dans le dossier d'exercice, allez dans la partie site Web de notre dossier d'exercice et double-cliquez sur notre index.html. Vous pouvez voir que le code HTML qui est ajouté a été chargé et sont plus lumineux. Nous allons ouvrir DevTools. Nous n'en avons pas besoin pour les NIH, mais gardons-les ouverts car nous allons en avoir besoin grâce aux huit meilleurs processus de développement. Maintenant, quand il s'agit de concevoir des sites Web. Vraiment deux façons de le faire. Vous pouvez soit écrire tout votre HTML et un aller , puis revenir et rester silencieux en élevant votre cerf CSS plus tôt. Ou vous pouvez écrire votre HTML et CSS ensemble au fur et à mesure que vous allez sur la page Web en développement. Nous allons utiliser l'échelle pour ce cours parce que je pense qu'il est beaucoup plus logique de mettre à l'échelle chaque section du site web azur en évaluant le HTML pour vous donner une meilleure image de la façon dont la page se réunit au fur et à mesure que vous la développez. Donc, nous allons style ou une navigation. À la minute, il ne ressemble rien à une navigation qui ressemble à une liste. Alors transformons notre dernier en navigation. Revenons à notre fichier index.html dans notre éditeur de code. Et ajoutons une classe à notre explosion honorée. Appelons ça la navigation. Et en regardant notre navigation, la première chose que nous devons faire est de l'amener dans la page d'offre centrale. C' est bon notre éditeur de code et aller à notre feuille de style point CSS. Nous pouvons également utiliser des commentaires dans nos feuilles de style ou CSS. La seule différence est la façon dont vous les écrivez comme légèrement différente de la façon dont vous les évaluez dans un fichier HTML. Pour CSS, vous écrivez un astérisques barre oblique, qui est le début de notre commentaire, et tableau 1D et navigation. Et puis pour le fermer, urate astérix barre oblique avant. Donc, toutes les balises entre les deux astérisques sont communes à moi et ne seront pas rendues sur votre page Web. Encore une fois, est idéal pour écrire des notes sur votre code, ce qui vous aidera à avoir du sens. Offrez FU, revenez plus tôt, ma chère. Créons une nouvelle voie qui est soit un point ou un point. Et dans le mot navigation, qui est en référence à la navigation de classe, nous le créons simplement pour notre liste non ordonnée. Et nous sommes des fourgons ou des supports bouclés. Ajoutons le centre du texte aligné et voyons que je suis retourné à notre page Web. Vous pouvez maintenant voir que notre navigation est centralisée. Le prochain numéro, nous devons faire pleuvoir car nous avons besoin chacun de peur que je sois sur la même voie à la navigation plus élégante. Et il y a une dernière. Pour le faire. Revenons à notre feuille de style et créons un nouveau sélecteur. Et quand ou une période ou une navigation de régime pour la classe de navigation. Et puis je vais écrire, ALI, pourquoi ai-je fait ça ? Donc, en regardant notre sélecteur de feuilles de style, vous pouvez voir que vous pouvez démarrer les sélecteurs ensemble. Donc, en utilisant la navigation par point ou point pour référence et la classe de navigation dans notre document HTML. Mais ensuite, nous avons utilisé un sélecteur d'élément d'ALA. Si vous vous souvenez, le sélecteur FS n'a pas de point ou de point avant, il s'agit d'un sélecteur d'élément et affectera tous les éléments HTML de ce type. Donc, il y a LI sélecteur affectera tous les éléments ALA sur notre page. Mais parce que nous l'avons mis après la navigation du sélecteur de classe, cela n'affectera que tous les éléments LI avec n, la navigation de classe. Alors, qu'est-ce qui affectera tous ces éléments LI avec n ? Cette classe de navigation, me permet d'ajouter des crochets bouclés, et ajoutons display et ln block. Rappelez-vous quand j'ai dit quelques propriétés CSS, vous avez juste à apprendre. Malheureusement, c'est l'un d'entre eux. Donc, pour l'instant, il suffit de nous taper ND ou stylesheet dot css et de l'enregistrer. Retournez à notre page d'exercice et actualisez-la. Maintenant, vous pouvez voir que nous avons quelque chose qui ressemble plus une navigation car chaque dernier jour m est sur la même voie. La seule chose est h dernier élément est un peu trop proche l'un de l'autre. Donc aux faits que je vais ajouter une marge à droite. Donc, je vais cliquer sur l'élément LSTM de l'événement DevTools. Vous pouvez voir notre navigation, peur que je ne sois réel montre à partir de notre feuille de style. Donc, je vais cliquer pour ajouter une nouvelle propriété. Et je vais re marge gauche 15 pixels. Vous pouvez voir que ce sont des lances. Ces éléments sont bien comme l'expérience. Donc, je vais juste copier cette propriété et la valeur bonne ou l'éditeur de code et créer une nouvelle couche avec la navigation interne, c'est jour et PSTN et avait C de 10. Je vais rafraîchir ou page Web. Enfin, notre navigation est trop proche du haut de la page Web. J' ai besoin de l'emballer. Je FA cliquez sur la balise UL de la navigation de classe. Vous pouvez voir que nous avons déjà une déclaration chargée à partir de notre feuille de style. Donc, je vais créer une nouvelle voie et je vais évaluer le rembourrage. En haut. Le rembourrage a beaucoup fonctionné comme des marges. Donc, je vais ajouter un rembourrage de 20 pixels. Nous avons plus d'éléments, page de retard, et nous ne voulons pas qu'ils soient coincés juste en bas de sa navigation. Donc, je vais aussi ajouter le fond de rembourrage, et je vais tamponner le bas de 20 pixels aussi. Vous pouvez voir si vous passez la souris sur la balise UL, le violet affiche le rembourrage. Ainsi, nous pouvons voir que nous savons avoir un rembourrage violet de 20 pixels en haut et un rembourrage violet de 20 pixels en bas. Copions les deux propriétés de remplissage que nous venons de créer. Allez dans notre éditeur de code dans la navigation, créez une nouvelle voie. Et l'homme PSD, je ne vais pas avoir à voir si retourner à notre page et me rafraîchir. Et ça a l'air génial. Nous avons les débuts de notre page web et dans la navigation et les joueurs. 14. Créer le site Web - Introduction à: Maintenant, nous avons un éditeur de navigation ou un site Web. Nous voulons ajouter la section suivante, qui est notre site Web et notre ligne. Allons à notre éditeur de code et bleu ou sur l'étiquette moins commandée. Ajoutons un nouveau commentaire, qui est encore une fois un signe de point d'exclamation, tiret. Et ré-Andrew, réduction des amis. Dash, tableau de bord. Plus que de dire ce commentaire non, nous fait savoir que l'a fait exploser sur une nouvelle voie. Nous allons ajouter R et Rho section. Donc la première chose que je veux dans notre section d'introduction est une image. Donc, je vais ajouter la balise image. Je vais taper SRC pour la source égale. Et dans la virgule, nous allons maintenant inclure une photo de profil ou n'importe quelle image que vous voulez. À la fin de la section, si vous regardez le dossier d'exercice, vous verrez que j'ai inclus toutes les images dont vous aurez besoin avec un dossier d'images pour cette page Web où Meghan dans ce cours. Vous n'avez pas besoin d'utiliser ces images. Vous pouvez utiliser n'importe quelle image que vous, pour rendre les choses agréables et faciles. J' ai inclus ceux-ci afin que vous puissiez simplement utiliser les images que j'utilise. Et il ya moyen plus gros, ainsi dire que si vous voulez utiliser vos propres images, un vous recommander de les ajouter à ces dossiers images, ce qui fera juste ajouter les chemins et à la source de l'image beaucoup plus simple et beaucoup plus facile à suivre avec le cours. Ou comme moi, si vous voulez juste utiliser ces images, faites simplement exactement ce que je fais dans ce cours. Donc ici, j'ai inclus un profil JPEG dans le dossier images. Donc, notre chemin va être des images pour le dossier images, profil barre oblique, JPEG. Pour être clair, est le nom de l'image dans le dossier images. Ensuite, je vais écrire pour le texte alt égal et passer dans les marques de discours. Je vais juste re profil plan. Et je vais fermer notre étiquette d'image. Je veux alors me diriger. Donc, je vais écrire H1 pour un élément de balise H1. Et je vais re, bienvenue. Et je vais fermer la balise H1, une enveloppe que je veux un court paragraphe. Donc, je vais lire l'élément paragraphe et je vais re, nous sommes la première entreprise au monde. Et par des chiens. Parce que comme vous le savez, il s'agit d'un site Web pour une entreprise de base de chiens qui ont été créés dans ce cours. Et puis je vais fermer la balise de paragraphe. Depuis aucune mer de cela et jetez un oeil à soit lié sur notre page Web. vais retourner à notre page web, et je vais me rafraîchir. Ainsi, vous pouvez voir l'image est chargée. Nous avons notre étiquette de titre et nous avons notre paragraphe. Mais ça n'a pas l'air bien du tout. Donc la prochaine chose que je veux faire est d'ajouter un arrière-plan pour cette section d'introduction. Donc, en regardant notre code et notre éditeur de code, vous pouvez voir que ces éléments à la minute ne sont pas regroupés avec une balise ou une classe. Je peux appliquer un arrière-plan aussi. Donc, je vais créer une nouvelle voie de l'image. Et je vais écrire la section comme l'élément HTML. Vous pouvez également utiliser Dev ici, mais la section comme un élément HTML sémantique. Section signifie que le contenu et dire qu'il est saisi ou vraiment il dit thème unique, soulever un élément HTML de dev est plus générique parce que S est une section d'introduction de notre site Web, jamais m avec n, cet élément HTML que nous écrivons comme aller à être saisi et comme va vraiment attester thème unique, l'Endrew, alors il est plus logique de section et SKS. Et je vais ajouter un cours. Et je vais l'appeler de couleur fond. Parce que nous voulons que la section déroulée ait un arrière-plan coloré. Je vais ensuite passer en dessous de l'élément paragraphe, et je vais fermer la balise de section. Encore une fois pour garder les choses belles dans notre éditeur de code, je vais légèrement endommager la balise de titre H1 et le paragraphe et appuyez sur l'onglet. Juste pour que nous puissions voir visuellement dans notre éditeur de code que ces éléments qui étaient van ou section de fond coloré. Je vais maintenant voir si ça, je vais aller sur notre page Web et je vais cliquer sur rafraichir. Vous pouvez voir si vous regardez le HTML, que notre classe de section couleur fond a l'en-tête de l'image, balise et le paragraphe avec Anna. Ajoutons un arrière-plan à cette section et nous allons passer au CSS pn de DevTools. Cliquez sur Ajouter un nouveau réel. Et dans cette règle dit qu'il est juste de le créer. Je vais écrire l'arrière-plan. Maintenant, au lieu d'utiliser simplement une couleur, c'est le moment, je vais utiliser une image pour le faire. Vous voulez écrire URL, crochets et deux apostrophes. Savoir ce N, ces apostrophes, nous devons ajouter le chemin à notre image. Jetons donc un coup d'oeil à notre dossier d'exercices. Et vous pouvez voir avec n le dossier des images, J'ai inclus un dommage de mauvaise qualité, point PNG. Nous devons donc ajouter le chemin pour cela par des lésions cérébrales et entre les deux apostrophes. Il y a donc des images d'arrière-plan dans le dossier des images, et il y a une nymphe par grain dot PNG. Donc, vous pouvez supposer le chemin que nous avons besoin de re comme images avant barre oblique point de fond PNG. Mais nous allons nous tromper. La raison en est parce que si nous pensons aux mathématiques que je vous ai enseigné des chemins d'ouragan, de supposer que vous décrivez où les dommages à index.html. Nous ne le décrivons pas à index.html. Nous le donnons juste à la feuille de style dans le dossier de style. Donc, en fait, ce que nous aurions besoin de faire est d'aller dans un dossier, puis dans le dossier des images, puis par point vert PNG pour écrire un dossier, ce que nous ferions c'est que nous sommes dre dot dot forward slash, qui signifie avec NIH est allé dans un dossier. Puis des images, puis par point de grain PNG. Lorsque j'entre la décimale, ne pas afficher jusqu'à ce que nous l'ayons ajouté pour la première fois à notre feuille de style. Donc je vais copier ce vrai Sam. Je vais ouvrir notre éditeur de code et je vais ajouter un nouveau commentaire dans notre feuille de style. Donc, je vais faire des astérisques de barre oblique avant parce que rappelez-vous que c'est différent pour les feuilles de style. Et je vais noter et régner à nouveau concernant notre tante section HTML réelle. Chaque fois qu'une barre oblique Astérix et avant. Et puis je vais percer sont vrais assis em. Encore une fois, point, point ou point barre oblique avant signifie que nous avons un dossier supérieur. Donc, si nous regardons notre dossier de feuille de style et nos feuilles de style ou CSS, qui est ce que nous décrivons le chemin vers. Nous allons monter ou dossier. Ensuite, nous avons des images barre oblique avant parce que nous allons dans le dossier des images. Et puis nous voulons le PNG point, que nous avons ici. Voyons si cela va à notre page Web et rafraîchir. Vous pouvez voir que notre image d'arrière-plan est agréable montrant cette image d'arrière-plan est semi-transparente. Cela signifie que les sections de poids que vous pouvez actuellement voir sont transparentes. Donc tout ce qui est en dessous se montrerait à travers. Cela signifie que nous pouvons ajouter une couleur à notre arrière-plan et la couleur définira l'image du ventilateur. Donc, si nous jetons un oeil à notre section d'arrière-plan coloré et notre propriété d'arrière-plan, et cliquez pour modifier la valeur. Et si un après le crochet de fermeture s'affichera sous l'image. Donc, nous pouvons ajouter une couleur. Par exemple, nous pourrions ajouter un espace et un taux rouge, que vous pouvez voir. Ou nous pouvons utiliser un code hexadécimal pour une couleur, 90, la couleur que je veux utiliser, et maintenant est 33225 b, qui est une couleur violacée. Vous n'avez pas besoin d'utiliser cette couleur. Vous pouvez utiliser la couleur que vous voulez. Peut ne pas être un mot comme le rouge ou le bleu ou un code de couleur hexadécimal, mais elle a obtenu d'ailleurs. Mais si vous voulez suivre, utilisez 33, 22, 5 B, et elle et elle. La prochaine chose que vous remarquerez est que les grains de sac semble couper le niveau au taux. Ce n'est pas pleine largeur, il se répète. Donc, pour corriger cela, ce que nous sommes, c'est par la taille du grain et nous évaluons 100 pour cent. Cela signifie que l'image prendra 100 % de la largeur de l'arrière-plan. Ce n'est pas une copie. Ces propriétés vont à notre éditeur de code et pairs pour mentor ou couleur fond réel sable. Encore une fois, je garde tout bien aligné juste pour que ce soit facile à comprendre. Je ne vais pas voir ce bon notre page web et appuyer sur Rafraîchir. Et vous pouvez voir que notre histoire est maintenant en train de se montrer. La prochaine chose que nous voulons faire est de lui envoyer les éléments dans le fond de couleur. Ils n'ont pas l'air super, écrasés à gauche ici, nous voulons qu'ils soient beaux au centre. Revenons donc à notre éditeur de code et nous devons ajouter l'image H1, la balise de titre et le paragraphe à l'intérieur d'un dev. Je vais donc ajouter une voie en dessous de cette section. Je vais écrire dev et je vais évaluer les égaux de classe, puis les marques de discours. Et maintenant, nous allons utiliser le système de grille Bootstrap. Je ne veux pas que cette section soit pleine largeur. Je veux que ce soit une boîte au centre de ma section d'introduction. Donc, je veux que ce soit une colonne avec un mouillé défini. Donc je vais les appeler si le bateau est favorable au taux. On peut le changer plus tôt, D7, ce n'est pas le cas. Donc je vais écrire C, O, L pour colonne tiret f5 pour une colonne de cinq. Et je vais fermer notre étiquette pour les sourds. Nous voulons le titre H1 de dommages des éléments de paragraphe dans cette div. Donc, je vais marquer un nouveau paragraphe de souffle de voie et fermer cette balise div. Je vais ensuite sélectionner l'image H1 et la balise paragraphe, encore une fois, en appuyant sur Tab pour les pousser pour montrer qu'il y a dit dans cette balise div, je ne vais pas frapper C of Good notre page Web et actualiser. Et vous pouvez voir que peu de choses ont changé. Mais si nous regardons DevTools savoir avec l'action MRSA fond coloré, vous pouvez voir la balise dev avec la colonne 5. En planant dessus. La largeur est des arcs, ils ont tous cinq colonnes. Ça et moi avons juste besoin du centre est. Pour le faire. Laissons notre éditeur de code et ajoutons une deuxième classe. Vous pouvez ajouter plusieurs classes avec n, une balise HTML. Et tout ce que vous avez à faire est de le séparer par une espèce. Donc, je vais ajouter une deuxième classe appelée tourbières centrées. Et je vais créer cela comme un sélecteur CSS dans notre feuille de style. Donc, je vais dessiner un point ou une boîte centrée sur la période, et je vais écrire margin-left 0. Et le taux de marge de quand vous définissez quelque chose de margin-gauche et margin-droite auto, Eveleigh centre médicalement cette maladie. Donc maintenant, je vais voir si la feuille de style et voir du index.html. Retournez à notre page et appuyez sur Actualiser. Vous pouvez voir qu'il ya colonne a centré dans notre Andrew, ce qui a l'air génial. Cependant, les éléments termineraient la colonne n'ont pas été centrés. Donc, nous pouvons vouloir lui envoyer l'image, l'en-tête et le paragraphe seront alors ils sont centrés boîte qui est colonne. Donc, je vais simplement ajouter une propriété à notre boîte centrée. On va le dire. Et je vais écrire le centre d'alignement du texte. Vous pouvez voir qu'il n'y a pas de centre est notre image sont en tête dans notre paragraphe, qui semble fantastique. Je vais copier cette propriété. Je vais aller à notre éditeur de code et je vais attaquer toutes les marges bleues de voie que nous venons d'ajouter et d'ajouter la ligne de fin parce que copié du centre d'alignement de texte, la prochaine chose que je veux faire est de régner sur cette image. Donc il y a deux choses qu'on doit faire. abord, nous devons nous assurer que l'image aussi bien. Si vous avez ajouté une très grande image dans la page Web, vous avez peut-être déjà remarqué que c'est très grand parce qu'à la minute nous n'avons pas de sites définis. La taille de l'image dans la page Web est la même que celle de l'image. Donc, si vous avez une grande image, jamais regarder vraiment grand sur la page Web. Et si c'est vraiment petit, vraiment petit et la page web, nous devons définir un web et CSS. Alors allons à notre éditeur de code. C' est bien, notre feuille de style. Et nous voulons sélectionner l'élément d'image dans le centre de la classe bogs. Donc, pour ce faire, le premier rayon, le sélecteur CSS pour la classe de boîte centrée. Et puis nous écrivons le sélecteur d'élément CSS d'IMG pour les dommages. Donc, toutes les propriétés que nous ajoutons ici dans les parenthèses seront appliquées à toutes les images dans la classe de boîte centrée. Et c'est le taux avec 300 pixels. Et voir si ce n'est pas le cas, je retourne à notre page et je me rafraîchis. Et vous pouvez voir que notre image est maintenant beaucoup plus petite car c'est la largeur de 300 pixels. Sachez que je veux écrire cette image. Donc, nous allons cliquer sur l'élément HTML de l'image, puis l'image de tourbières centrée, sens réel qui est cliqué sur une nouvelle propriété. Ajoutons un rayon de bordure. Et nous pouvons ajouter le pourcentage que nous voulons pour le rayon frontière. Il a tout simplement régné sur celui du légiste. Donc vous pourriez utiliser 10 pour cent, comme vous pouvez le voir ici. Vous pourriez utiliser 20 pour cent. Vous pourriez choisir 30 pour cent. Vous pouvez utiliser le pourcentage que vous lavez, Havre. Vos images carrées et votre image doivent être carrées. Si votre image n'est pas carrée, vous pouvez simplement la charger dans Photoshop ou le logiciel d'édition d'images amnesia que vous avez. Faites le carré de dégâts et voyez si, si votre image est carrée et que vous faites le rayon de bordure 50 pour cent, cela rendra l'image circulaire. Ça craint fantastique. Je vais copier cette propriété, ouvrir la feuille de style et nous sommes un ensemble de règles de dommages de tourbières centrées sur le vendeur. Et quand un RTPC et voir si elle, je vais revenir à cette page Web et rafraîchir. Ok, c'est une star dans laquelle ils sont vraiment géniaux. Une chose, vous remarquerez immédiatement que le texte noir est vraiment difficile à voir sur ce fond. Je vais donc cliquer sur la section d'arrière-plan de couleur. Je vais aller dans les propriétés du vrai Sam. Et je vais écrire la couleur, hashtag et le sexe un HFS, qui est le code hexadécimal pour le poids. Et c'est immédiatement fait une balise debout un ours beaucoup. Donc je vais copier ce vrai bien. Notre feuille de style et PSTN comme une nouvelle voie, nous sommes alors de couleur jeu de règles d'arrière-plan et voir si je vais revenir à notre page et rafraîchir. La prochaine chose que nous devons jeter un oeil est que l'image est trop proche du haut de la section d'introduction et du paragraphe en bas, une phrase beaucoup trop proche du bas de la section anthro. Donc, si je clique sur l'élément HTML de la classe des bogs centrés, c'est pad ce Rabat. Donc, dans l'ensemble des règles de bugs du centre et quand sont les huit rembourrages ? Et si je ne définit pas une fourgonnette à gauche, en haut, droite ou en bas, la fourgonnette Pexels que j'applique s'appliquera aux quatre côtés. Donc à gauche, en haut, à droite et en bas. Je vais ajouter un rembourrage de 50 pixels. Et vous pouvez voir que instantanément semble beaucoup mieux. Je vais copier les propriétés de rembourrage. Je viens de le créer et de les ajouter à mes tourbières centrales sur la feuille de style et de voir si elle est retournée à la page Web, il y a une dernière chose que je pense qu'il faut faire ici, et c'est que la balise de titre de bienvenue ne se distingue tout simplement pas assez. Donc, si je clique pour choisir un élément, le curseur sur la balise H1, sélectionnez la balise H1, cliquez pour créer un nouveau vrai Sam. Je vais faire la taille de la police 70 pixels, mais vous pouvez faire ce que vous voulez. Et je vais rendre la police en gras pour se démarquer plus. Je vais copier cette triste triste. Retourne à ma feuille de style. Mais parce que nous venons de changer la taille de la police et que nous sommes hors d'une étiquette de titre H1. Je vais aller en haut de ma feuille de style. Je vais ajouter un nouveau commentaire, astuces de passage de barre oblique. Je vais écrire des tailles de police astérix barre oblique avant pour fermer le commentaire. Et je vais apparaître ce jeu de règles et là. Et je vais utiliser cette section pour ajouter tout autre plaisir, vrai sens au fur et à mesure que nous continuons. Je vais sauver ça. Retournez à notre page et appuyez sur Actualiser. Un dernier ajustement qui est nécessaire. Je viens de remarquer dans la navigation, car vous remarquerez que la navigation n'est pas centrée sur le reste de la page. Allons enquêter sur la façon. Donc, si nous jetons un oeil à notre navigation de classe de liste non ordonnée et survolons dessus. Vous pouvez voir si vous regardez en haut de la page et le violet qui montre le rembourrage. Nous avons un rembourrage appliqué à gauche et non au rayon. C' est juste un style CSS par défaut, qui est appliqué par les braseros car c'est un dernier. Évidemment, nous voulons que ce soit une navigation. Donc, nous allons ajouter le remplissage gauche 0 pixels à notre rôle de navigation sam. Ce qui permet de s'assurer qu'il n'y a pas de rembourrage sur la gauche pour pousser la navigation. Je vais copier cette propriété gauche de rembourrage que nous venons d'ajouter. Allez à notre règle de navigation, définissez une nouvelle voie, un RTPC, et voyez si je vais revenir à la page et me rafraîchir. Vous pouvez voir qu'on est presque là. C' est encore un peu trop au taux. Donc, si je regarde les derniers éléments quand vous pouvez voir que nous avons ajouté une marge à gauche, apprenez le dernier élément à créer les choses de lance. Mais ce que cela fait, c'est pousser la navigation vers le tableau parce que le premier élément a une marge qui n'est pas nécessaire. Pour corriger cela, nous allons utiliser un sélecteur CSS appelé d'abord hors bande pour supprimer la marge gauche de seulement la première, de peur que je sois dans la navigation pour évaluer cet éditeur de code Goodyear et faire sauter la navigation le jour dernier. Et nous dirons à, ajoutons un autre. Ajoutons la navigation point ou point pour la classe de navigation. Ajoutons de peur que je sois pour le de peur que je ne sois des éléments deux-points. Et puis on note d'abord la cassette. Alors, comment ça marche ? Au début, nous avons notre navigation, qui est notre sélecteur de classe. Ensuite, nous avons LI. Pour la dernière fois, je suis un sélecteur d'élément, sorte que sélectionne tous les éléments LI étaient alors la classe de navigation. Mais ensuite, nous avons ajouté appel sur la première bande. Donc, cela signifie que cela n'affectera que le premier, de peur que je ne sois la classe de navigation du fournisseur comme d'autres crochets bouclés. Et nous ne voulons pas de marge dans le premier élément de la liste dans notre navigation. Donc nous allons re margin-gauche 0 pixels. Ce que cela signifie est le premier de peur que je vais alors, ou classe de navigation aura pas de marge rire cette mer de cela. Retournez à notre page Web et actualisez. Et vous pouvez voir sont la navigation se ligne maintenant parfaitement si nous inspectons ou la navigation et aller à notre dernier jour. Et vous pouvez voir que le premier a le premier jeu de règles de bande que nous venons d'ajouter pour supprimer la marge pour tous les autres nids que je suis après cela a la marge ajoutée car il n'utilise pas le premier de type réel Sayer. 15. Créer le site Web - Modifier l'arrière-plan: Quand il s'agit de l'arrière-plan coloré ou de son site Web, vous devrez utiliser l'image d'arrière-plan incluse pour ce cours. Vous pouvez trouver et utiliser n'importe quel arrière-plan U1. Laissez-moi vous montrer comment faire ça. Tout d'abord, Trouvons une image différente pour l'arrière-plan de notre site Web. Je recommande un site Web comme Unsplash, qui a des images libres de droits et utilisables, mais vous pouvez utiliser l'image que vous voulez tant que vous avez l'autorisation de le faire. Et je vais juste fouiller les milieux. Vous pouvez faire défiler vers le bas et trouver n'importe quelle image, image fantaisie. Je vais juste en choisir un qui me plaît. Par exemple, c'est l'une de la forêt. Et je vais juste cliquer et télécharger les dégâts. Donc, c'est mon dossier de téléchargements et c'est le dommage que je viens de télécharger. Je vais faire glisser cette image dans le dossier des images du site Web travaillaient sur. Et je vais renommer cette forêt par grainé. Mais tu peux le nommer comme tu veux. C' est mon aller sur notre site Web et nous sommes événement DevTools avec la section d'arrière-plan colorée sélectionnée. Vous pouvez aller à l'URL d'arrière-plan, cliquez pour l'éditer. Et je vais changer le point d'arrière-plan PNG à la forêt par grain, esquiver JPEG, c'est pourquoi je viens renommer les dégâts que nous avons téléchargés dans le dossier Images. Entrez. Et vous pouvez voir que cette image est maintenant entrée en vigueur sur notre site Web. Et c'est aussi simple que ça. Vous pouvez trouver l'image que vous voulez utiliser pour l'arrière-plan de votre site Web et affecter à l'arrière-plan en utilisant la méthode que je viens de vous montrer d'un mot à dire pour que ce changement prenne effet, nous devons copier le boiteux. Accédez à votre éditeur de code et remplacez la ligne d'image de fond couleur. Empêchez le jeu réel et voyez si maintenant, lorsque vous actualisez, vous verrez que votre nouvel arrière-plan est entré en vigueur sur votre site Web. 16. Créer le site Web - À propos: C' est non, créez la section À propos de ce site Web. Ce sera une ligne avec trois colonnes, similaire à ce que nous avons créé lors de la démonstration bootstrap. Chargons notre éditeur de code et créons un nouveau commentaire. Encore une fois, c'est moins que de dire le point d'exclamation tiret, tiret. Et nous allons re tiret, tiret plus grand que même. Et bleu ceci, nous allons écrire le HTML pour ou une section de morsure. Donc, la première chose que je voulais faire est d'avoir une balise ouverte de section et une balise de section. Ensuite, nous allons utiliser le diplôme Bootstrap. Donc, la première chose dont nous avons besoin en ligne, donc nous créons une balise HTML dev avec la classe de ligne. Et je vais fermer cette étiquette div. Et puis nous avons ns, je vais créer trois colonnes de quatre largeur. Donc, pour ce faire, nous créons un div avec la classe CORREL pour le tiret de colonne avant. Et je vais fermer cette étiquette div. Je vais copier ceci et le coller deux fois. Maintenant, nous avons trois colonnes. Nous sommes alors notre rang avec une bisection d'aura. Donc, la première chose que je veux avoir avec la colonne Anna, parce qu'une image, donc je vais créer la balise HTML image et un SRC pour la source. Et nous devons ajouter le chemin de notre image. Encore une fois, dans le paquet pourvu que j'ai des dommages, nous allons les utiliser. Vous n'avez pas besoin de les utiliser comme je l'ai mentionné précédemment, mais si vous voulez suivre exactement, alors les dommages sont dans ce dossier pour vous d'utiliser. On va utiliser les 123 images. Donc, pour l'instant, nous allons juste nous concentrer sur le haut par un J peg. Donc, je vais écrire le chemin, qui est le dossier images barre oblique avant sur le tiret un point JPEG. Et je vais avoir le texte alt d'un chien octet 1. Et je vais fermer la balise HTML. La prochaine chose qu'ils veulent est un cap pour ça, je vais utiliser h3 cap et je vais juste écrire top dog. Je vais fermer la balise de titre. Et enfin, je veux un paragraphe. Donc, je vais écrire l'élément P HTML. Et je vais aller à notre générateur Loren Ipsum, que nous avons utilisé auparavant dans ce cours. Et juste Janvier à un exemple de texte de paragraphe. Je vais copier ça. Retournez à notre éditeur de code et ps à m. Encore une fois, comme mentionné précédemment, lorsque vous travaillez avec de gros corps de texte, il déplacera votre éditeur de code ou vers la gauche. Donc, pour avoir le gros tout dans une fenêtre, il suffit d'aller à Voir. Basculer le pellicule souple. n'y a pas de conserve tout ce qui est contenu dans votre fenêtre d'éditeur de code. Et je vais juste fermer l'élément HTML du paragraphe. Je ne vais pas simplement copier ce qu'il y a à l'intérieur de cette colonne et à la deuxième, troisième colonne. Et je veux que les images soient différentes pour chaque colonne. Donc nous avons un bateau pour une demeure, trois images à l'intérieur de notre image, que nous pouvons utiliser. Donc je vais juste changer la deuxième colonne, 272 points de dégâts et la troisième colonne pour utiliser leur image de morsure 3. Encore une fois, je vais changer l'ancien texte, ainsi dog2 et rester chien 3. Et les titres, je vais juste changer, permettre la variation. Donc je vais faire ce chien tardif. Et je vais faire le troisième paragraphe, chien directeur. Et je vais voir si le document HTML maintenant charger notre page Web et rafraîchir. Si nous faisons défiler vers le bas, vous pouvez voir que les colonnes étaient dans notre ligne fonctionnent correctement. L' en-tête du texte du paragraphe est composé de colonnes n m. Mais la première chose que vous remarquerez est que les images sont autorisées à grandir. Nous devons donc revenir à notre éditeur de code et nous devons ajouter une classe pour l'action RSA. Donc, en tant qu'attribut dans notre balise HTML de section, je vais dire que la classe est égale aux marques vocales. Et je vais écrire sur et je veux voir s'il ya un saut de fin sur les terroristes feuille Ale, où je vais ajouter un commentaire. Encore une fois, rappelez-vous, commenter des documents CSS est des documents HTML différents. Nous devons utiliser des astérisques de barre oblique. Et chaque fois que, euh, par astérix barre oblique avant. Et puis je vais écrire une nouvelle règle, samp, car je veux réduire la taille des trois images avec réaction anaérobie. Je vais d'abord utiliser la classe de bateau, puis je vais utiliser la sélection des éléments IMG. Et cela ciblera toutes les images étaient alors ainsi classe. Et puis je vais mettre des crochets bouclés. Ensuite, à l'intérieur de cela, je vais faire l'image avec un 140 pixels et voir si je vais maintenant aller à notre page Web et rafraîchir. Et vous pouvez voir que ces images ne sont pas beaucoup plus petites. Je veux maintenant lui envoyer Elaine tout ce que je peux faire en cliquant sur l'élément HTML de sanction avec la classe un bateau et quand ajouter un nouvel ensemble de règles. Et je vais prendre le centre LN et nous allons copier cet ensemble de règles dans notre feuille de style et voir si je ne vais pas actualiser la page. Ok, c'est l'ingrédient. Mais l'un des problèmes que je vois est qu'ils sont l'action des bateaux est trop proche du côté gauche et droit de la page. Pour résoudre ce problème, nous devons utiliser une fonction d'amorçage appelée conteneurs. Conteneurs simplement continuum éléments HTML, les pad et Elaine eux sur votre site Web. Alors, comment peut-on contenir la bisection ? Allons à notre éditeur de code. Et juste au-dessus de leur commentaire bateau, Ajoutons un nouvel élément HTML Dev avec le conteneur de classe. Ensuite, allons à la fin, offrez une section de morsure hors de la nouvelle voie et fermons la balise div. Donc, vous pouvez voir que notre section abate, pas de sets. Nous allons ensuite l'ouverture et la fermeture div, élément HTML avec le conteneur de classe. En enregistrant cela, en allant sur notre page Web et en actualisant, vous pouvez voir qu'il y a une section d'octets a été contenue dans le conteneur. En regardant nos DevTools, vous pouvez voir le conteneur de classe dev et nous sommes vanity ou une section de morsure. La prochaine chose que je veux faire est d'y déplacer la bi-section en train de mourir pour créer l'espace entre la section d'introduction et ainsi la section. Donc pour ce faire, je vais sélectionner l'élément HTML octet, aller au rôle sam et ajouter une marge supérieure d'environ 40 pixels. Je vais copier ça. Bon notre feuille de style et ajouter cela au bateau réel SAT et voir si revenir à notre page Web et le rafraîchir. La prochaine chose que je veux faire est d'arrondir les images pour correspondre à l'image et RN RO. Encore une fois, pour que nous puissions travailler, les images doivent être parfaitement carrées si vous utilisez d'autres images que celles fournies dans le package de cours, veuillez vous assurer qu'elles sont carrées. Encore une fois, vous pouvez le faire dans Photoshop ou n'importe quel logiciel de retouche d'image car ils doivent être parfaitement carrés pour le rayon de bordure pour les faire croquer cela aller à l'une des images dans les jonquilles. Et vous pouvez voir que cela fait apparaître l'ensemble de règles que nous avons déjà créé dans notre feuille de style. Et ajoutons un rayon de bordure, 50 pour cent, le même que ce que nous avons fait dans la section d'introduction. C' est ma copie. Cette propriété et cette valeur. Allez à notre feuille de style et à notre éditeur de code. Créer une nouvelle ligne sous un dommage morsure sera alors les crochets bouclés et coller. C'est gentiment de ça. Revenir à notre page Web et actualiser et vous pouvez voir que nous sommes presque là pour la section octet. La dernière chose que je veux faire, c'est rendre les titres en gras. Donc, pour ce faire, je vais retourner à notre feuille de style. Je vais créer n'importe quel vrai Sam et je veux sélectionner toutes les balises h3 avec une classe proche pour le faire. Et chaque fois qu'un point ou un point et un octet pour ainsi classe. Et puis je vais écrire h3 pour affecter tous les éléments h3 d'une classe voisine. Crochets bouclés, fonds B, il en gras. Et je veux voir si ça, enfin, je vais retourner à la page et me rafraîchir. Et vous pouvez voir que cette section n'est ni un ingrédient. 17. Créer le site Web - Pourquoi nous: Nous faisons de grands progrès sur notre site Web. Nommons MEG, la section « Nous ». Cette section va contenir trois lignes. Et chaque rangée va avoir une légère variation des toiles de colonne. Donc, nous allons créer la première ligne avec la façon dont notre section. Allons dans notre éditeur de code et en dessous de la section morsure. Mais avec n, le dev conteneur, nous allons créer un nouveau commentaire. Et on va à Ray Y ofs. J' ai demandé savait que tout le monde ci-dessous est la façon dont notre section, encore une fois, je vais le dire deux fois juste parce que c'est super important. Nous ajoutons ceci ci-dessous la section about, mais avec n, le conteneur de classe dev, comme nous voulons que notre section soit contenue dans ce conteneur, nous allons ajouter un nouvel élément HTML de section. Et nous allons ajouter la classe par nous. Et nous allons ajouter une balise de fermeture pour cette section. Et O de n, Cette section, nous allons ajouter notre première ligne de classe div. Et nous allons fermer ce développeur. Maintenant, nous avons à moins que la première ligne à travers 12 colonnes. Nous voulons une colonne pour le texte et le titre. Et nous voulons les appeler pour les dégâts. Et nous voulons que la colonne qui contient l'en-tête et un paragraphe soit légèrement plus grande que la colonne de l'image. Donc, ajoutons une classe de développement cURL pour la colonne. Et c'est sept mégawatts. Il y a une étiquette div de fermeture. Et maintenant, ajoutons une colonne pour les dommages. Donc, je vais ajouter une autre colonne de classe dev. Et si vous vous souvenez, chaque ligne et Bootstrap doit ajouter jusqu'à 12 colonnes de mer. Donc on en a déjà épuisé sept. Donc notre deuxième colonne doit avoir une largeur de cinq. Je vais fermer la balise div d'ouverture, et je vais ajouter une balise div de fermeture. Donc ce que nous avons ici comme section de fil, eh bien la façon dont notre section nous avons une rangée et dans la rangée nous avons deux colonnes. Donc, dans la première colonne, c'est soit le titre et quand faire de cela un titre de l'étape 2. Et je vais re, nous sommes les meilleurs chiens et fermer ces h2 tag. Après tout, il s'agit d'un Y a section off que les bières de chien site d'affaires tels que megawatt, nous sommes le meilleur chien. Ensuite, allez ajouter un paragraphe et je vais juste copier une partie de la Loren Ipsum que nous avons utilisé précédemment sur le site, a un espace réservé. Ensuite, je vais fermer la balise de paragraphe. Donc c'est notre première colonne triée. Maintenant, je veux ajouter une image à la deuxième colonne. Donc, en dessous de la deuxième balise d'ouverture div avec anaerobe et est sorti une nouvelle couche. Et je vais ajouter un élément HTML d'image. Donc, je vais à l'image SRC pour la source égale et quand le discours marque et que vous voulez ajouter un chemin pour l'image. Si vous regardez le dossier images dans le paquet fourni, vous pouvez voir que je vous ai donné trois images à utiliser pour la façon dont notre section. Donc, vous pouvez les utiliser si vous suivez. Si vous utilisez vos propres images, n'hésitez pas à le faire. Encore une fois, il est logique de les mettre dans ce dossier d'images afin que vous puissiez facilement suivre et utiliser des chemins similaires à ceux que j'utilise. Nous allons donc ajouter la première image du système d'exploitation dans la façon dont notre section. C' est lorsque le dossier Images et le nom de l'image est y tiret, tiret un JPEG. Donc, les images pour le dossier, barre oblique avant tiret, tiret un JPEG. Et je vais ajouter le texte alt de nous sommes les meilleurs chiens aussi. Je vais fermer cette étiquette d'image. Voyons si cela va à notre site Web et rafraîchir, faire défiler et viser. Vous pouvez voir que nos colonnes sont là et que notre règle est là. Mais la première chose que vous remarquerez est que l'image est beaucoup trop grande, donc elle nous affecte. C' est cool. Éditeur de code Java. Créons un nouveau commentaire dans notre feuille de style. Jusqu' à présent, c'est le dernier astérix. Pourquoi OS astérix barre oblique avant nous dire que tout Rawls dit ci-dessous ce commentaire sont par rapport à la façon dont notre section. Et je veux écrire un ensemble de règles pour les images de n La façon dont notre section. Donc, je vais lire point ou point façon de période nous pointillés pour la classe Y ofs. Et je vais écrire IMG, donc affecte tous les éléments d'image dans le YR, notre section, crochets bouclés mariés. Mais au lieu d'utiliser une largeur de pixel moins apprivoiser et quand tableau un 100 pour cent. Et voir si revenir à notre page Web et actualiser, vous pouvez maintenant voir que la taille de l'image est beaucoup mieux. Et FA, inspectez cet élément, vous pouvez voir qu'il utilise des weds un 100 pour cent. Qu' est-ce que cela veut dire ? Eh bien, si nous regardons la colonne 5, dont les images, et vous pouvez voir que l'image n'est pas un étirement de façons mariées d'être un 100 pour cent de cette colonne de large. Donc, pour démontrer cela plus loin, si je clique sur l'élément HTML de l'image, bon de la façon image OS, jeu réel et le CSS PM, et changer la largeur à 50 pour cent. Vous pouvez voir lorsque vous survolez la colonne cinq dev que les dommages étaient alors les dommages n'est pas un 50% la largeur de sa stratégie de développement parent n'est pas d'accord. Donc nous allons revenir à 100 pour cent. La prochaine chose que je veux pour cette ligne comme un grain de barre de couleur et ils voulaient correspondre à l'arrière-plan de couleur que nous avons dans notre section d'introduction, maniement, nous avons déjà écrit le CSS pour un grain de barre S. Donc, nous avons juste besoin d'ajouter cette classe à notre ligne pour faire oui, allez dans l'éditeur de code et nous allons ajouter une deuxième classe 2 ou ligne. Donc, nous avons sous les marques de discours, je vais juste ajouter un espace après rangée, et je vais ajouter un fond coloré. Et ce que cela signifie est que cette rangée est maintenant parti pour utiliser également la couleur par classe croissante. Nous le créons pour la section d'introduction du site, ce qui signifie que nous n'avons pas besoin d'écrire plus de CSS pour que ce fond coloré prenne effet. Nous allons voir si le HTML échoue. Bonne notre page Web et rafraîchir. Et vous pouvez voir que notre arrière-plan est déjà entré en vigueur et la section YR, si nous collectons inspecter cet élément, vous verrez qu'il est non seulement tiré l'arrière-plan à travers, mais il a également apporté la couleur de police de blanc à travers comme Eh bien. n'y a que deux autres choses comme section comme désordre dans le premier, comme un rembourrage, comme vous pouvez le voir, à la minute où les éléments sont beaucoup trop proches des saids, être beaucoup plus agréable si nous avions un peu de pluie de rembourrage vers le bas. Maintenant, vous pourriez penser que nous devrions ajouter le rembourrage dans le vrai timbre de fond coloré. Mais on peut le faire. Laisse-moi te montrer pourquoi. Donc, si j'ajoute un remplissage de 50 pixels dans notre jeu de règles d'arrière-plan coloré. Ordinateurs de bureau, GRI. Mais rappelez-vous que le fond coloré est également utilisé par la section d'introduction. Donc, si nous faisons défiler vers le haut, vous pouvez voir que la section Endrew a trop de soirée de fête. En le retirant, vous pouvez voir ce que c'était avant. Donc, nous avons seulement besoin d'appliquer le rembourrage à la section YR pour le faire. Et on va aller à notre feuille de style. Nous allons faire défiler vers le bas et nous allons écrire le sélecteur de classe dot y ofs. Et puis je vais ajouter la ligne de classe. Alors, qu'est-ce que ça veut dire ? Cela signifie que nous cherchons d'abord dans la section pour les classes NA de ligne. Cela affectera toutes les classes de ligne de la classe de la Maison Blanche. Et puis je vais ajouter du rembourrage pour un Pexels. Je peux voir. Maintenant, quand je rafraîchis la page, vous pouvez voir que le y, notre section a un très joli rembourrage. La dernière chose qui manque ici, c'est que le titre est un peu trop petit et je pense qu'il serait mieux si c'était audacieux. Donc, je vais cliquer sur l'élément HTML. Et nous voulons ajouter un jeu de règles. Et nous allons faire en sorte que le poids de la police soit gras pour commencer. Et puis je vais changer la taille de la police à 50 pixels. Ça a l'air beaucoup d'ours. Et quand une copie de ce rôle Sam. Et quand je vais à ma feuille de style, et je vais faire défiler jusqu'à l'endroit où nous avons la section tailles de police. Je vais créer une nouvelle voie et le RTPC et voir si retourné à la page Web et remode, vous pouvez voir qu'il n'y a pas, c'est vraiment bon. Donc c'est l'une des trois rangées, pas de compléteur. Pour rendre cela rapide et facile, pourquoi je vais vraiment faire, c'est que je vais sélectionner la ligne entière et son contenu. Donc, je vais sélectionner de la balise dev rel d'ouverture à la balise div ru de fermeture et quand la copier. Et je vais le coller deux fois de plus. Ça va nous donner nos trois rangées. La première chose que je vais faire est de changer la deuxième, troisième image pour une deuxième troisième rangée. Donc, si vous regardez notre dossier images, nous avons un Y ofs t et un Y ofs trois Boucher. Je vais changer la façon AS1 en baleines 2 sur la deuxième rangée. Et la façon dont OS1 nous peser trois sur la troisième rangée. Et je vais changer le titre de la deuxième rangée. A ceci est la façon dont notre section, je vais ajouter une autre raison du système d'exploitation. Quelqu' un ou huit, la seule entreprise dirigée par des chiens, comme encore une fois, c'est une entreprise de chien BAS. Et pour la troisième rangée, je vais juste re chien. Et comme né, encore une fois, rappelez-vous haut niveau, l'ancien texte pour les images. Donc je vais juste le faire correspondre aux titres. Dans ce cas. La seule entreprise a couru un chien pour la deuxième image et sombre et a supporté pour la troisième image. Donc, nous allons voir si cela va à notre page Web et actualiser. Et maintenant vous pouvez voir que nous avons nos trois lignes et s'il vous plaît noter la troisième ligne et la première règle qui accordent par un une légère variation dans la deuxième rangée. Je veux que l'arrière-plan soit d'une couleur différente. Je voulais que ce soit un fond plus clair pour que le plaisir soit plus sombre. Et je veux aussi l'image sur le côté gauche et les textes et le côté droit, mais seulement pour la deuxième rangée et métal. Alors faisons ça en allant vers notre éditeur de code. Et nous allons d'abord échanger l'image et les balises pour pleuvoir, parce que nous utilisons la grille Bootstrap, c'est vraiment simple à faire. Tout ce que je vais faire, c'est que je vais sélectionner la colonne 7, étaient van ou deuxième rangée. Je vais le copier, puis le supprimer. Et puis je vais le coller en dessous de la colonne d'offre de balise de fermeture favorable. Donc non, pour la deuxième rangée, vous pouvez voir que la première chose que nous avons un van, Il est notre colonne fav une image. Et la deuxième chose que nous avons Anna est notre rubrique 7 et nos étiquettes. Voyons si ce code ou une actualisation de la page. Et maintenant, vous pouvez voir l'image pour la rangée du milieu, ou la deuxième rangée est sur la gauche et les textes et le taux exactement comment nous le voulons. Donc maintenant, nous avons juste besoin de rendre le calque d'arrière-plan et le texte sombre. Je vais aller dans l'éditeur de code. Et pour la deuxième règle, seulement, je vais changer de fond coloré, arrière-plan trop tard. Donc maintenant, quand je vois de cela, si vous jetez rapidement un oeil à la page Web en actualisant cela, vous pouvez voir qu'il atteint en quelque sorte ce que nous voulons. Mais la seule raison pour laquelle il fait cela est parce qu'il cherche un rôle défini dans notre fichier CSS appelé barre tardive grained. Il ne trouve pas ça. Donc, c'est juste par défaut et vers la normale sur la page qui a un fond blanc et du texte noir. Je veux un fond, comme un fond gris clair. Alors maintenant, ajoutons un ensemble de règles pour notre fin par classe de grain. Pour ce faire, je vais aller dans ma feuille de style. Je vais faire défiler jusqu'à la section Y ofs. Je vais ajouter un nouveau sélecteur CSS pour notre classe d'arrière-plan léger. Et dans les crochets bouclés, je vais faire de l'arrière-plan une valeur hexadécimale de F1, F1, F1. Maintenant, vous pouvez faire l'arrière-plan quelle que soit la couleur que vous voulez. Tu pourrais même en faire une autre image, ce qui te prend. Mais pour moi, je veux un fond gris clair. Et le code hexadécimal, qui donne un fond gris clair si vous suivez le long, parce que F1, F1, F1. Et ils vont sauver ça. Retournez à notre page Web et appuyez sur Actualiser. Et vous pouvez voir que nous avons une belle barre gris clair grainé pour la rangée du milieu, les femmes dans la façon dont notre section. Et puis notre première rangée et la troisième rangée, en utilisant la barre Cn grainée comme notre introduction pour garder les choses agréables et cohérentes de la façon dont notre section ne peut pas créer. La seule chose qui reste est d'ajouter un peu de marge du haut de la section de fil pour lancer donc entre leurs bateaux action et la façon dont notre section. Donc, pour ce faire, je vais juste aller à la façon dont notre section et DevTools. Je vais créer un nouvel ensemble de règles. Et je vais ajouter une marge supérieure pour un Paxos, MSX Greer. Copions-nous. Non, bien. Notre feuille de style, PSTN et avait la mer du jour. Lorsque nous actualisons la page, vous pouvez voir comment notre section est maintenant terminée. 18. Créer le site Web - Contactez-nous: L' une des parties les plus importantes du site, et certains affirmeraient que le but d'un site Web est d'inciter les gens à vous contacter. Pour cette raison, nous devons avoir une section Contactez-nous sur votre site Web. Jetons un coup d'oeil au codage là-bas et NIH dans notre éditeur de code et en dessous de la section de fil. Mais encore une fois, avec n, la balise de fermeture de la div avec le conteneur de classe, nous allons ajouter un nouveau commentaire et nous allons nous contacter. Donc, nous savons que NF-1 ci-dessous il ya commun est la section Contactez-nous du site Web. Nous allons maintenant ajouter une section et nous allons juste lui donner un contact de classe. Nous allons fermer cette étiquette de section parce que bien, je vais ajouter une nouvelle voie avec n, la section Contactez-nous. Et pour la première partie de la section Contactez-nous une Assemblée veut un titre et contactez-nous. Et un petit paragraphe ci-dessous qui dit Gan touch aujourd'hui. Alors ajoutons ça. Je vais ajouter H1 pour la direction et l'aide hivernale, contactez-nous. Et quand une balise H1 proche et en dessous de cela et va juste ajouter une balise HTML paragraphe et re, entrer en contact jour. Et je vais fermer cette balise de paragraphe. Sachez juste C de ça. Actualisez notre page Web. Et vous pouvez voir que cela a été ajouté à notre page. Et dans la prochaine chose que je veux ci-dessous, c'est une ligne, et je veux dire des colonnes à cette ligne. Sur le côté gauche, je veux juste des coordonnées comme l'e-mail et l'adresse. Et sur le côté droit un de deux autres images qu'ils veulent ajouter, une tendance, le dossier images, vous pouvez les voir sous contact, une, contact aussi. Donc, c'est ajouter cela dans notre HTML. Donc je vais ajouter une nouvelle voie, bleuir le paragraphe. Et je vais ajouter un div avec la classe de la ligne parce que nous allons utiliser le système de ligne et de colonne bootstrap. Et dans cette rangée, je veux deux colonnes. Et je veux que la colonne de gauche soit légèrement plus petite dans la colonne de droite, une sorte de ce que nous avons fait avec la section de fil. Donc, pour la première colonne, puis ajoutez un div avec la classe cURL pour le tiret de colonne. Et je vais avoir la largeur de colonne de cinq. Je vais fermer cette étiquette div. Et puis pour la deuxième colonne, et quand notre div avec la classe de la colonne sept, parce que 5 et 7 est égal à 12. Et la colonne max où nous pouvons utiliser la ligne de paire et Bootstrap est 12. Et quand j'ai fini la balise d'ouverture, et je vais ajouter une balise div de fermeture. Nous avons donc maintenant nos deux colonnes pour une section Contactez-nous. Lorsque la première colonne, je veux juste ajouter quelques détails de contact de base. Je vais donc ajouter une balise de paragraphe et je vais écrire un e-mail. Et pour l'email, je vais juste en inventer un. Donc top dog au chien business.com. Et je vais fermer cet élément HTML de paragraphe. Et je veux une autre couche. Donc, je vais faire une autre balise de paragraphe et nous allons écrire y néant, appel plu et senti ou pauvre en eau. Parce qu'en tant qu'entreprise de chiens. Et je vais fermer la balise de paragraphe et maintenant vous voulez évaluer l'adresse. Donc, je vais commencer par écrire une balise de paragraphe à nouveau. Et je vais évaluer la première ligne de l'adresse. Mais comme vous le savez, les adresses traversent les voies mobiles, mais ce ne sont pas des paragraphes distincts. C' est simplement une nouvelle voie dans un paragraphe. Comment on a écrit une nouvelle voie ? Le rayon une nouvelle voie en notant BR, BR pour rupture de ligne ou pain. Donc je viens de lancer une balise BR. Vous n'avez pas besoin de le fermer. Et je vais lire la deuxième voie de l'adresse. Maintenant, vous voulez prendre une dernière nouvelle voie. Donc je vais être à nouveau pour Greg ou boiteux break. Et je vais écrire la dernière de notre adresse. Et puis je vais fermer les éléments HTML du paragraphe. Et on va voir ça. Allez sur la page Web et actualisez juste pour voir à quoi cela ressemble. Donc, ça a l'air bien. Et ils veulent ajouter aux dommages au taux de cette section Contactez-nous. Pour ce faire, je vais retourner à l'éditeur de code. Et parce que nous voulons ajouter deux images, je vais ajouter une autre ligne avec une autre colonne. Donc nous avons une sangle N-bit. Vous pouvez ajouter une règle dans une colonne, qui est exactement ce que je vais savoir, afin que nous puissions avoir deux images côte à côte, empêcher la section de taux de la page Contactez-nous de notre site Web. Donc nous sommes alors notre largeur de colonne de sept, ce qui correspond au taux de nos coordonnées que nous venons d'ajouter. Et nous allons créer une nouvelle voie. Et je vais ajouter une classe div de ligne et ajouter la balise div de fermeture. Parce qu'on veut une rangée. Nous allons ensuite cette colonne à droite. Et les réseaux qui semblent être notre première ligne, nous avons 12 colonnes que nous pouvons utiliser dans la ligne NASW. Donc parce que je veux que les images soient de taille égale, je vais ajouter deux colonnes de sexe. Donc, je vais créer un div avec un tiret de colonne de classe sacs et le fermer. Et je vais créer un autre div avec le sexe de la colonne de classe et une balise div de fermeture. Donc nous avons deux colonnes de sexe dans une rangée. Eh bien, notre colonne de sept. C' est donc la couche est un peu plus avancée et ce que nous avons fait jusqu'à présent, mais cela nous permet de mettre deux dommages soigneusement dans le côté droit de notre section Contactez-nous. Nous voulons juste ajouter une image à chacune de ces colonnes. Donc, je vais écrire la balise image, SRC pour la source. Et comme toujours, nous mettrions le chemin entre les marques de parole. Le chemin est le même que toujours. C' est empêcher notre dossier d'images. Et nous avons un tableau de bord de contact un J peg 2s, et un tiret de contact deux chevilles J à utiliser. Comme toujours, vous pouvez utiliser n'importe quelle image que vous voulez, lit que vous suivez le long. Vous pouvez les utiliser pour les dommages prévus. Nous sommes donc le dossier d'images, barre oblique de forêt, contact, tiret un, JPEG. Comme toujours, n'oubliez pas de noter quelques anciennes étiquettes. Donc alt égale et puis les marques de discours et est allé à une image de contact 1. Et je vais fermer cette étiquette d'image. Et je vais tout d'un coup copier cette balise d'image. Et étaient alors notre deuxième colonne, Je vais le coller et changer un à deux parce que la deuxième image est appelée tableau de bord de contact deux. Et je vais changer les tags alt à l'image de contact 2. Je ne vais pas voir une page ROR moins bonne et actualiser. Donc, pour le moment, vous pouvez voir qu'il essaie d'adapter les images étaient alors nos images de barre de colonne sont tout simplement beaucoup trop grandes. Donc, nous allons utiliser un camion CSS a été utilisé avant pour rendre les images sont un SIG Web 100 pour cent. On va aller à notre feuille de style. On va aller au fond. Nous allons ajouter un commentaire. Contactez-nous. Nous savons donc que tout SAT réel que nous mettons en dessous se rapporte à la partie contact de notre site Web. On va lire le cours de contact. Et dans les images comme le sélecteur d'élément. Comme toujours, ce que cela signifie, c'est notre rôle car il va s'appliquer à tout dommage au sein de la classe de contact. Et quand j'ajoute des crochets bouclés et je vais répéter des mots un 100 pour cent et voir si je retourne à notre page Web, vous pouvez voir que ces images sont vraiment soigneusement contenues dans chaque colonne. Donc, si vous étiez un peu confus, la disposition avancée de la pièce que nous venons d'utiliser, laissez-moi essayer de vous le montrer visuellement, va évacuer dit. Si je vais à la section contact de notre site et que je l'ouvre. Vous pouvez voir que nous avons une ligne montrée ici. Si j'entre dans cette règle, vous pouvez voir notre premier ensemble de colonnes. Nous avons une colonne où cinq à gauche et une largeur de colonne de sept au taux, ils termineront cette deuxième colonne, sept maladroits. Nous avons une rangée, et dans cette rangée, nous avons deux nouvelles colonnes de largeur égale, colonne et le sexe de colonne. Ainsi, vous pouvez voir comment une rangée de bureau a des colonnes avec Anna. Et cette ligne se trouve dans une colonne, dans une ligne avec deux colonnes. Et il n'y a donc que deux réglages que je veux apporter ici à la section Contactez-nous pour le rendre beaucoup plus agréable. Et c'est d'abord de lui envoyer et de marge le contact et d'entrer en contact aujourd'hui texte. Donc, pour ce faire, un premier besoin de les mettre dans un dev. Allons donc à notre document HTML et ajoutons un nouveau calque au-dessus de la balise d'en-tête H1. Créons un div avec le titre de tiret de contact de classe. Et je vais mettre la div de clôture juste en dessous balises de paragraphe de clôture. Je vais sauver ça. Et je vais sauter à travers notre feuille de style et ajouter un sélecteur de classe, le titre de tiret de contact. Mais vraiment c'est exactement à la classe que je viens d'ajouter pour le dev, que j'ai mis là titre H1 et paragraphe anti et crochets bouclés. Et je vais ajouter le centre d'alignement du texte. Donc centralisez le texte. Et je vais ajouter une marge au sommet des 40 pixels. Et nous allons voir de s, bonne notre page web et rafraîchir. Et vous pouvez voir que nous avons maintenant comme marge bien et centralisée. La dernière chose que je veux faire, c'est rendre l'adresse en gras. C' est vraiment simple à faire. Il suffit de passer à votre document HTML. Et juste après le paragraphe d'ouverture, étiquette pour une robe. Et lorsque vous ajoutez une autre balise, B, qui signifie gras, et juste avant la balise de paragraphe de fermeture, puis ajoutez une balise de corps de fermeture, qui signifie à nouveau gras. Maintenant, quand je vois de ce document HTML couture et rafraîchir, vous pouvez voir l'adresse est en gras. Cette section Contactez-nous est maintenant terminée. 19. Créer le site Web - Footer: La dernière section que nous voulons ajouter à notre site Web est une autre. Alors chargeons notre éditeur de code. Et en dessous de la section Contactez-nous. Encore une fois, ajoutez une colonne à partir du tiers droit. Et nous allons clore le commentaire. Et nous allons ajouter une section où si le centre de classe et que vous voulez ajouter la balise de section de fermeture. Et la première chose que je veux au cours de la première année est une ligne à travers l'écran. Pour ce faire, nous écrivons juste HR. L' élément HR HTML placera une ligne sur l'écran. C' est vrai horizontal, et c'est ce que nous utilisons quand nous voulons juste mettre une ligne travers l'écran comme nous le faisons dans la figure. Et ils étaient quelqu'un va ajouter un paragraphe avec l'année pairs actuellement 2021. Je vais mettre un tableau de bord et je vais mettre le nom avec l'entreprise, qui dans cet exemple est l'entreprise de chien. Vous pouvez le mettre où vous voulez dans la figure. Et nous allons fermer la balise de paragraphe et voulons voir si cela va à la page Web et actualiser. Et vous pouvez voir que nous avons maintenant un doigt sur notre site Web. Trop petites choses que je veux faire ici. Tout d'abord, je veux centraliser les balises de pied de page. Et deuxièmement, je veux une marge en haut de cette ligne que nous venons d'ajouter à la section Contactez-nous. Donc je vais sauter à la feuille de style. Je vais ajouter un commentaire comme nous le faisons. Je vais écrire cr et je vais fermer le commentaire. Et puis je vais utiliser la classe entravée parce que le sélecteur CSS, nous le créons juste. Et quand j'avais des crochets bouclés et quand j'ajoute du texte aligner centre pour aligner les balises de pied de page, nous venons d'ajouter au centre. Et puis je vais ajouter la marge supérieure 40 pixels pour compenser l'espacement entre le haut à gauche et la section Contactez-nous. Je ne vais pas voir si notre feuille de style. Je vais aller sur notre page. Et vous pouvez voir que les tags n'est pas centralisé et nous avons une marge entre le filtre et la section publique Contactez-nous. La dernière chose que je veux faire est simplement faire ce 2021 chauve. Je vais le faire de la même façon que nous l'appelons la partie « Adresse » de la section « Contactez-nous ». Donc, je vais aller à mon éditeur HTML et juste devant 2021. Et quand j'ajoute la balise b et juste après la section 2021, puis j'ajoute la balise p de fermeture. Je ne vais pas voir si cela revient à notre page et rafraîchit. Et vous pouvez voir que nous avons maintenant un complet pour sur notre site Web. 20. Créer le site Web - Fondes et liens: Ou le site est assez complet. Nous avons notre navigation en place. Nous avons notre Endrew, nous avons la section abate, nous avons la section YR. Nous avons une section Contactez-nous, et nous avons une foire, tout est vraiment bon. Une chose que je veux faire est d'importer une police de Google. Juste pour que nous ayons un plaisir personnalisé agréable sur notre page Web. Pour rendre cela un peu nu, nous allons utiliser la même méthode que nous avons utilisée lorsque Creon ou site d'exercice. Et c'était d'importer un plaisir Google. Allons donc à polices dot google.com. Et je vais trouver un plaisir, un lac, un vraiment comme Leto comme un plaisir. Et bien. Les biles modernes sont professionnelles. Alors je vais choisir ça. Et comme avant, je vais cliquer sur Sélectionner comme style sur la lumière, régulière et audacieuse. Ensuite, au taux le plus élevé de la page de polices dot google.com, je vais cliquer sur afficher les familles sélectionnées. Et dans la première boîte, je vais sélectionner la référence du lien entier et le copier sur notre éditeur de code et aller à la tête de notre site Web juste en dessous où nous avons ajouté la référence de lien CSS point de feuille de style. Je vais créer un nouveau calque. Je vais coller la référence du lien pour le plaisir Google. Je vais juste pousser cette ligne à travers. Je vais juste pour que ce soit en dessous de celui ci-dessus juste pour garder les choses belles et soignées. Et je vais voir si mon index.html, je vais revenir à la page Google Fonts, et je vais sélectionner la règle CSS et la copier. Je vais ensuite revenir à mon point de feuille de style css et créer un nouveau sélecteur d'élément sous mon commentaire de tailles de police. Donc, je vais juste créer une nouvelle ligne en dessous de l'ensemble de règles H2. Et parce que je veux moins de plaisir à appliquer à l'ensemble du site Web et quand utiliser le sélecteur d'élément de corps. Je vais ajouter des crochets bouclés. Et je vais nous payer ma référence de famille de police. Et je ne vais pas voir ça. Accédez à ma page Web et actualisez. Vous pouvez voir qu'il ya plaisir a maintenant pris effet. Mais juste pour être sûr, je vais aller à Inspect Element et je vais juste sélectionner le titre. Et si je fais défiler jusqu'à la référence du corps, vous pouvez voir que la famille de polices est Leto. Maintenant semble vraiment bon et vous n'avez pas à utiliser le plaisir plus tard. Vous pouvez utiliser la police que vous souhaitez pour votre propre site Web. Mais si vous suivez le long sont utilisés la ferme ultérieure. La dernière chose que nous voulons vraiment faire est si vous jetez un oeil à notre navigation et cliquez sur l'un des mots, ils ne sont pas vraiment amusant Deana à la minute. Il n'y a pas de véritable navigation. Donc, notre site Web est un site Web d'une page. Donc, lorsque nous cliquons sur ces boutons, au lieu d'ils nous ont amenés à une autre page Web, nous voulons qu'ils nous conduisent à une section de la page Web Desk. Donc, par exemple, si je clique sur la façon dont notre section, je voulais faire défiler vers le bas pour nous et nous amener à la section Pourquoi nous. Alors comment on a fait ça ? Si nous allons dans notre éditeur de code, la première chose que nous devons faire est d'ajouter un AD ou un identifiant aux sections. Donc, si nous regardons notre navigation, nous avons une section d'accueil et une section de bateau. Pourquoi notre section ? Et une section contact. Nous devons donc ajouter un ID sur notre page Web pour chacune de ces zones afin que nous puissions ensuite lier ces boutons afin que la page Web se déplace vers ces zones lorsque vous cliquez dessus. Donc la première idée que je vais ajouter est pour la maison. Et je vais l'ajouter à notre section Andrew parce que nous voulons que le bouton d'accueil nous emmène en haut de la page. Donc, je vais ajouter un attribut N2, notre section pour la nième ligne. Je vais donc l'ajouter avant la classe de résection pliquée. Et je vais juste faire un rayon AD égal à des marques de discours. Et pour l'AD de leur section ou l'identifiant, je vais ou une maison quand j'ai besoin d'ajouter une pièce d'identité pour notre bateau. Donc, je vais faire défiler vers le bas jusqu'à la section octet et en tant qu'attribut dans la balise de section d'ouverture pour la zone voisine. Et nous allons ajouter une autre AD. Et je vais écrire un octet pour nous. Je vais faire défiler jusqu'à l'étiquette de section d'ouverture des fils. Et encore une fois, je vais ajouter un ID, qui est AD égale et dans les marques vocales et les marques vocales Ravenne et chaque fois qu'un moyen nous Dash, veillant à ce que chaque fois qu'il y a un espace dans ce que vous lisez, vous utilisez un tiret au lieu des lances. Et enfin, je vais faire défiler jusqu'à la zone de contact. Et encore une fois dans la section d'ouverture, balise HTML pour la section Contactez-nous, je vais écrire les aigles AD, la marque vocale, le contact, la marque vocale. Nous avons donc ajouté des identifiants uniques sont des identifiants pour l'action Nous contacter et les foyers. Alors comment on a fait ces boutons ? Aucun lien vers les zones de sorte que lorsque vous cliquez dessus, la page Web se déplace vers cette zone, commencera par lire un lien de la façon dont nous utilisions normalement une référence H. Donc, en face de la journée de bureau et pour la maison et quand écrire le tag a href. Et après la balise HTML de fermeture pour la maison, je vais fermer la balise a href, la fin, l'exercice que je vous ai appris à utiliser un, , un, un, un piège pour lier à un ECG, démarrer une page Web, par exemple, google.com. Mais nous voulons créer un lien vers les identifiants que nous venons de créer. Alors comment on a fait ça ? Entre les marques vocales, droite, hachage, puis l'ID auquel vous voulez que la référence d'âge soit liée. Donc moins est le bouton d'accueil. Donc, nous voulons qu'il soit lié à la maison AD. Nous le créons juste pour écrire à la maison. Maintenant, ce que je vais faire pour rendre les choses rapides et faciles, c'est que je vais juste copier cette balise HREF d'ouverture, et je vais la coller devant les trois autres derniers éléments. Et je vais ensuite copier la balise de clôture, AH, href. Et je vais nous payer qu'après les trois autres, c'est des références, euh, le nom va entrer et changer les identifiants pour chacun des trois restants. Donc, pour la section À propos de nous, l'ID que nous avons créé était un octet. Donc je vais le faire hacher. Et dans un bateau pour la façon dont notre section, l'ID, nous le créons avec nous. Donc, je vais re, re dash bus un M pour la section de contact ou AD a été contact. Donc je vais faire le contact de hachage H ref. Je ne vais pas voir si S va à notre page Web et rafraîchir. Il s'est passé quelques choses ici. On a perdu le style. C' est parce que nous avons ajouté une référence H avant le dernier article. Donc on va devoir réparer ça. Mais aussi les boutons dans la navigation devraient maintenant fonctionner. Donc, si je clique sur un bateau, vous pouvez voir la page Web descend à leur bisection. Maintenant, si je clique sur pourquoi OS, vous pouvez voir qu'il se déplace vers le bas à la façon dont notre section et éthique que le contact et se déplace vers le bas à la section contact. Donc, la navigation qu'ils fonctionnent, nous avons juste besoin d'affecter le style. Donc, si je choisis un élément de la page en utilisant DevTools et sélectionnez l'un des derniers éléments de notre navigation. Vous pouvez voir ce qui se passe. Vous pouvez voir que les marges que nous créons sont toujours appliquées aux derniers éléments. Mais la raison pour laquelle l'espacement et il n'y a pas encore fermé est parce que le dernier élément est côté Naim, un élément HTML H ref. Les marges doivent donc être appliquées à la référence H et non au dernier élément. Donc, si nous allons dans notre éditeur de code et allons à l'ensemble de règles de navigation, nous le créons pour les derniers éléments. Nous devons ajouter un vrai SAT pour le, AH, radeaux et la navigation. Donc, en dessous de l'endroit où nous avons créé l'ensemble de règles de navigation ALI, je vais évaluer la navigation post-op. Et puis je vais utiliser le sélecteur d'élément pour le, AH, refs étaient alors ou navigation. Et je vais ajouter des crochets bouclés. Et puis tout à coup juste d'aller copier cette marge a ri que nous avions pour la Los Angeles et le mettre dans la navigation un rôle, dis-le. Et je vais retirer ça de Los Angeles. Vraiment triste. Et voyez si maintenant, lorsque nous revenons à notre page Web et nous actualisons, nos marges sont de retour. Mais vous pouvez voir que les longueurs ne sont pas de couleur bleue, ce qu'ils n'étaient pas avant. C' est parce que par défaut Bootstrap comme Sainz, une couleur bleue à votre lien. Et parce que nous venons d'ajouter des liens à notre navigation sous la forme d'un piège. Bootstrap attribue automatiquement une couleur bleue. Vous pouvez voir que dans DevTools de vous sélectionnez le dernier jour et vous pouvez voir qu' il hérite de cette couleur bleue du bootstrap.css. Nous avons donc juste besoin d'ajouter une propriété CSS de couleur et notre feuille de style pour remplacer cela. Donc, dans la navigation, un ensemble de règles, nous le créons juste. Je vais ajouter la couleur de la propriété et la valeur des zéros sexuels, qui est le code hexadécimal pour le noir. Je vais voir cette feuille de style. Retournez à notre page Web et actualisez. Et vous pouvez voir nos liens et notre navigation ne sont plus noirs. 21. Réceptivité mobile: Donc, nos sites Web et ils peuvent jouer et un bureau soit. C'est incroyable. Mais comme beaucoup de gens de nos jours voient des sites Web sur leur mobile, il est important que les sites Web ou mobile réactif. Que signifie mobile responsive ? Cela signifie que le site Web semble bien sur n'importe quelle taille d'écran, y compris les mobiles. Après tout, quel est l'intérêt d'avoir un site Web vraiment agréable sur le bureau ? F n'est pas sympa sur un mobile. Alors, comment pouvons-nous nous assurer que ce site Web a l'air bien sur mobile aussi ? Dans DevTools, en haut de la barre d'outils, vous verrez cette icône. On dirait un mobile et un iPad ensemble. Si vous passez la souris dessus, le mode de conception réactive est indiqué. Donne-lui une fissure. Sur Chrome. Il se trouve sur le côté gauche de la barre d'outils Outils de développement. Encore une fois, si vous passez le curseur sur elle, vous verrez basculer la barre d'outils de l'appareil, il ressemble sur mobile et un APR ensemble donner cette heure et c'est ainsi que vous allez accéder au mode mobile responsive sur Google Chrome. Il y a donc deux façons que nous pouvons utiliser comme mobile responsive plus que DevTools. La première façon est que nous pouvons aller en haut de la barre d'outils et cliquer sur responsive et choisir un type d'appareil. Ainsi, nous pouvons choisir iPad par exemple. Et vous pouvez voir que cela réduira la largeur de votre site Web à ce que votre site Web ressemblerait sur un iPad. L' autre façon est que nous pouvons aller à droite de la page Web quand aucun survol jusqu'à ce que vous voyez un curseur horizontal. Et nous pouvons ajuster manuellement la largeur du site Web. Donc hydras notre site Web regarde une fois que nous commençons à mourir sur les petits réseaux. Alors continuons à diminuer. Et vous pouvez voir au moment où il arrive à une largeur mobile, notre site Web commence à s'effondrer, permettre la section d'introduction et la navigation peut sembler ok. Mais ce sont des bisections cassées. Les sections Y ofs ont définitivement brisé. Et la section Contactez-nous ne prend pas beaucoup d'importance. Alors comment allons-nous nous envoyer un fax ? Comment allons-nous faire en sorte que notre site Web soit bien sur mobile ? Heureusement, Bootstrap vient une cloche et des fonctionnalités pour rendre votre site Web facilement mobile réactif. Et va littéralement seulement nous prendre quelques secondes pour mettre en œuvre. Mais d'abord, vous devez comprendre les fonctionnalités réactives élevées que mobiles dans Bootstrap travail avec les lignes et les colonnes r. Quand il s'agit des colonnes, nous le créons dans notre fichier HTML. Nous utilisons le préfixe point cURL pour colonne, tiret, puis le nombre de bandes calmes que nous voulons. Donc, si on veut une colonne est allé pour une, on en a utilisé une. Si nous voulons un calme quand cinq, nous avons utilisé fav, etc. Mais il y a en fait un préfets supplémentaires que nous pouvons inclure dans nos classes de colonnes, ce qui nous permet de rendre notre site Web facilement mobile réactif. Ce sont Sam pour petit, md pour moyen, LG pour grand, et exil pour extra grand. Et nous les ajoutons entre le tiret L CoA et la largeur de la colonne. Ainsi, par exemple, vous écririez CoA L tiret S, N pour petit tiret un pour la largeur de colonne d'un. Alors que signifient ces dosages, MMD, LG, et oeufs AL, préfixes, et que font-ils ? Chacune de ces références sont des weds hors de votre site Web, à quel point, peu importe ce redshift défini pour votre colonne, il deviendra automatiquement. 12 ou pleine largeur. Donc, si vous jetez un oeil à votre site Web dans DevTools, vous changez la largeur de votre site Web, vous remarquerez en haut dans la première boîte, vous pouvez voir la largeur de pixel de votre site Web. Donc, par exemple, ici, je peux voir comme 902 pixels de mots. Ici, je peux voir que c'est 1112 pixels de web et ont un méga vraiment petit. Ici vous pouvez voir c'est 432 pixels de mouillé. Il s'agit de la largeur de votre site Web. Donc, si vous le visualisez sur un mobile, il sera probablement quelque part autour de 590 à 600 pixels de web. Et si vous êtes pour vous Ana sur un bureau, il pourrait être jusqu'à 1400 pixels de mouillé. Ainsi, par exemple, si nous prenons les très grands préfets, que nous pouvons ajouter deux colonnes, n'importe quelle taille de fenêtre inférieure à 1200 pixels, et la colonne deviendra automatiquement 12. Grand, n'importe quelle taille de fenêtre inférieure à 982 pixels. Et la colonne quand il deviendra 12 moyen, n'importe quel navigateur web sous 768 pixels et les colonnes deviendront automatiquement plein web. Et la petite extrémité d'un moins de 576 pixels et d'une colonne, peu importe ce que vous avez défini comme, il deviendra coin complet ou une colonne de 12. Donc, si c'est un peu déroutant en ce moment, j'ai beaucoup plus de sens une fois que nous avons mis en pratique, qui étaient l'octet NIO aujourd'hui. Jetons donc un coup d'oeil sur notre site et découvrons à quel point nous avons besoin des colonnes pour aller sur le web complet pour qu'il soit agréable sur mobile. Donc, si nous jetons un oeil à leurs piqûres action et commençons lentement à réduire la largeur de notre site Web. Vous pouvez voir à 1100 pixels, mais il semble toujours bon. Et si nous continuons, vous pouvez voir un 130 pixels de mouillé. Ça a toujours l'air bien. Mais puis autour de la marque de 750 pixels, il commence à vraiment écrasé et pas aussi agréable. Donc, si nous regardons notre système de grille que Bootstrap nous offre, nous voulons rechercher un préfets de taille qui fait passer nos colonnes automatiquement à une largeur pleine largeur ou une largeur de colonne de 12, autour de 750 pixels. Et nous pouvons voir que le médium est celui qui va probablement mieux fonctionner pour nous parce qu'il fera automatiquement les colonnes aller pour marié à n'importe quelle taille inférieure à 760 chez Pexels. Donc c'est un que nous allons utiliser. Alors, comment implémenter ce n'était vraiment qu'un cas de changer les classes de colonne pour inclure ces préfets de taille dans le nom. Donc, si nous regardons la section R par R, vous pouvez voir à la minute où nous avons colonne tiret 4, nous n'avons pas de préfixe de mot à dire inclus lorsque cette classe. Donc, pour l'ajouter, tout ce que nous ferions est de prendre ce tiret de colonne quatre. Et après le premier tiret à md pour moyen, puis un autre tiret de sorte qu'il ressemble maintenant à colonne, tableau de bord, AMD, tableau de bord 4, et le travail d'envenimement. On doit changer tous les trois. Génial. Donc, pour la deuxième colonne et donc notre section et la classe après le premier tiret, je vais ajouter md pour medium et un autre tiret. Et le CME pour un dessert après le premier tiret et le nom de la classe. Donc CRL tableau de bord, AMD, tableau de bord quatre. Je sais que c'est ça. Maintenant, si nous revenons à notre page Web et actualiser, vous pouvez voir parce que nous sommes à 750 pixels là par nos colonnes de section ont automatiquement quand pleine largeur. Donc, si nous commençons à augmenter progressivement la largeur de la page, vous pouvez voir sont plus de 768 pixels. Les colonnes sont définies comme une toile de quatre. Donc nous sommes trois colonnes de mouillé pour quatre. Et si un honneur 768 pixels, ils deviennent automatiquement pleine largeur. Et nous pouvons voir que si nous les inspectons, vous pouvez voir que la colonne est citoyen pleine largeur. Nous allons rendre notre site Web facile et rapide, mobile, réactif. Mais nous ne voulons pas avoir à passer par vos autres classes où nous avons ajouté des colonnes et dyad MD entre eux tout est que l'attaque leur permet de temps. Donc on va faire ce qu'on appelle une recherche et un remplacement. Donc pour que cela fonctionne, ce que nous voulons faire est sur les changements de classe que nous venons de faire et donc la section OS, ne vous inquiétez pas, nous allons les réappliquer. Mais pour les mathématiques que je vais utiliser, qui est fondamentalement une trouvaille et remplacer. Nous devons revenir à la section bio avant d'ajouter le préfixe médium anti. Donc, pour les trois classes, je vais juste supprimer l'AMD et le tiret pour que les trois classes et j'ai lu la colonne tiret quatre et je vais voir si, donc je ne vais pas faire une recherche et remplacer. Ce que je vais faire, c'est que je vais trouver et remplacer le tiret de colonne. Et je vais le changer en colonne tiret, d tiret, qui ajoutera le préfixe moyen à toutes les classes de colonnes que nous avons ajoutées dans notre index.html. Alors comment on fait ça ? Eh bien, notre éditeur de code, vous allez dans votre barre d'outils et bien de feindre un et de le trouver tampon. Ou vous pouvez simplement appuyer sur Contrôle et F. Cela chargera notre barre d'outils Rechercher et remplacer au bas de notre éditeur de code. Donc, la première chose que nous voulons ajouter est ce que nous voulons trouver. Donc nous voulions trouver cURL et dash. Nous voulons rejouer évaluer et nous voulons le remplacer par CLL tiret, tableau de bord AMD. Donc, encore une fois, pour rendre ce cristal clair, nous allons trouver et remplacer toutes les classes de tiret COO L étaient van ou index.html. Et nous allons le remplacer par SEO L tiret, tiret. Donc, je trouve puis cliquez sur Remplacer tout. Vous pouvez voir regarder dans notre document si je ferme juste comme barre d'outils en bas est que nous n'en avons plus besoin. Nous avons ajouté le préfixe moyen à toutes nos classes de colonnes, donc il l'a ajouté à l'action de leurs vélos comme nous l'avons fait auparavant. En outre, si nous faisons défiler vers le bas, vous pouvez voir qu'il est ajouté à la section Pourquoi nous pour la largeur de colonne de 75. Il est ajouté à la section Contactez-nous à nouveau pour leur zone vestimentaire et pour les images et aussi pour les dommages ont été alors la section Contactez-nous. Donc, je ne vais pas voir si cela revenir à notre page Web et rafraîchir. Et si nous étions juste notre taille de fenêtre jusqu'à une taille mobile, et jetez un oeil à notre site Web. Comme nous faisons défiler, vous pouvez dire qu'ils sont par notre section est allé pleine largeur, qui est excrété. La section de fil est allée de l'avant, ce qui a également l'air génial. Et la section Contactez-nous est devenue rouge, ce qui est également superbe. Donc, maintenant, nous avons un site Web qui est non seulement beau sur le bureau, mais aussi sur mobile. Et comme vous pouvez le voir, non seulement il a fière allure sur mobile et de bureau, mais il aura également l'air bien sur des appareils tels que les iPads. Parce que lorsque j'augmente le coin de notre site, vous pouvez voir que les colonnes s'adaptent bien à la largeur. Donc, c'est ce qui permet à notre site Web d'être réactif sur n'importe quelle taille d'écran et que Gloria sur n'importe quel appareil, grâce à Bootstrap et le système de colonne, nous avons maintenant tourné notre site Web qui ne semble bon que sur le bureau. Et deux sont entièrement mobile site réactif. Et une question de minutes. 22. Comment rendre le site Web votre propre site Web: Donc, notre site Web est maintenant disparu et il semble fantastique. Quelque chose que je voulais courir à travers très rapidement est comment vous pouvez faire le site Web que vous êtes sur avec quelques ajustements simples. Je vous pouvez finir avec une soirée de site de réservation complètement différente pour cette partie du cours, Je ne vais pas aller aussi en profondeur, mais les changements, Je suis Meghan, Je vais juste faire les changements vraiment rapidement et vous permettre de venir avec moi. Ainsi, vous pouvez voir comment rapidement et facilement vous pouvez prendre ce que nous venons de créer et faire quelque chose de votre propre, faire quelque chose de complètement unique et diaphragme. Donc la première chose que je veux faire est de trouver un nouveau dommage de fond. Nous l'avons brièvement abordé lors de la création du site. Et ce sera le même processus. Je vais aller à Unsplash quand une barre de recherche fait du grain. Et je vais trouver une image, un lac. Cette orange est vraiment contraste dans vraiment agréable. Donc je vais télécharger ça. Je vais aller dans mon dossier d'images. Je vais ajouter l'image que je viens de télécharger dans le dossier images. Et je vais juste appeler ça un nouveau contexte. Je vais revenir au dossier du site Web et je vais copier et coller ou dupliquer le index.html. Et je vais juste l'appeler index tiret T2. Je vais ensuite ouvrir notre éditeur de code. Et je vais faire glisser ça et tiret, tiret deux et à la broche gauche de nos données de base. Donc la première chose que je vais faire, c'est que je vais relier cette nouvelle image de fond. Donc, je l'ai appelé nouveau fond de tableau de bord. Donc, je vais aller à l'endroit où nous avons ajouté notre histoire et notre feuille de style. Et je vais changer ça en un nouveau contexte. Et cette image est aussi un J peg et C de S. Et puis je vais retourner à notre dossier de site web. Je vais double-cliquer et notre tiret d'index pour charger le site et notre navigateur. Donc vous pouvez voir que nous avons une nouvelle image de fond australienne. La prochaine chose que je veux faire est de déplacer les balises d'en-tête et de paragraphe au-dessus de cette image. Donc, je vais juste aller à notre index.html et je vais appeler b le titre H1 et le paragraphe. Je vais l'enlever quand il semble faire évoluer notre image et voir si elle. La prochaine chose que je vais faire, au lieu d'avoir trois colonnes ici, je veux la forêt de plus de deux rangées. Donc, je vais simplement supprimer une des colonnes. Et on va faire les colonnes de Sex. Je vais copier ces deux colonnes et je vais les coller, souffler les deux colonnes sont déjà là et juste les dommages sont différents. Je vais utiliser leur morsure trois MHz et donc une image. Je vais voir si ça et rafraîchir. Et vous savez, nous avons quatre colonnes montrées ici. Pour la façon dont notre section, je vais supprimer la troisième rangée. Donc, je vais descendre à la troisième rangée et l'enlever de la section de calque. Et je vais aussi à Spears deux colonnes sur un peu différemment. Donc, je vais rendre le texte plus petit. Donc, je vais faire la colonne une pour le texte pour une image plus grande. Et quand faire la colonne E de l'image et je vais répliquer ce Diablo. Donc pour la deuxième rangée, je vais faire d'eux chaque colonie et la colonne de texte 4. Et je vais sauver ça et rafraîchir notre page. Et vous pouvez voir qu'il n'y a pas de jambes beaucoup certainement obtenu beaucoup plus grandes images et beaucoup plus petit texte pour faire le texte Valley il ya zone et qui va supporter. Je vais juste agrandir ces paragraphes. Donc, je vais activer l'application logicielle, et je vais simplement copier et coller le paragraphe que nous avions déjà en dessous du paragraphe qui était déjà en place. Et je vais faire la même chose pour la deuxième rangée. Je vais percer le paragraphe que je viens de copier. Soufflez le paragraphe qui était déjà là. Voir vous et la page Web de VR. Vous pouvez voir les étiquettes et ils sont tombés Zai cette zone beaucoup nu. Pour la section Contactez-nous, je vais également agrandir ces deux images. Je vais donc aller dans les colonnes de la section Contactez-nous. Et la colonne que le TMJ est réglé avec n, je vais en faire 12. Et puis je vais faire la colonne qui a l'email et les détails de l'adresse 12 aussi bien. Donc, chaque jeter un oeil à la page Web. Vous pouvez voir que nous avons maintenant des images beaucoup plus grandes par 12 cents relais le texte Contactez-nous. Donc, si je vais à notre feuille de style, angle vers le bas pour le commentaire Contactez-nous, vous pouvez voir que nous n'avons pas un vrai mot à dire ou NPS pour le contact. Donc, je vais juste en créer rapidement un. Donc, je vais créer un sélecteur pour un contact des supports bouclés. Et je vais mettre le texte aligner centre et voir si je retourne à notre page et rafraîchir, vous pouvez voir les détails de contact oh, non, centralisé. Et je pense que, au lieu d'avoir des dégâts de pluie, je vais rendre les images plus rectangulaires, mais avec un rayon de frontière. Donc, si je déclenche DevTools et sélectionnez l'une des images, vous pouvez voir la frontière rayon 50 pour cent, que nous présentons lors de la construction d'un site Web craint. Je vais faire 10 % pour voir à quoi ça ressemble. Et je pense que ça a l'air sympa. Ce que je vais faire, c'est aller à la feuille de style. Rare fourni rayon frontière est pour les dommages et quand le changer de 50 pour cent à 10 pour cent. Donc vous pouvez voir qu'on a un rayon de bordure pour l'image des tourbières centrées, je vais faire nos 10 pour cent. Et pour les diamètres, je vais faire nos 10% aussi et voir si je ne vais pas rafraîchir cette page. Et vous pouvez voir que nos images ne sont plus régnées. Native a des radius de frontière. Et donc RMN de minutes, j'ai créé une page qui semble complètement différente de la page Web, créerait pendant le cours. Et en utilisant des réglages simples et rapides au HTML et CSS et aux arrière-plans. Vous pouvez faire le site que nous créons dans le cours, complètement unique à vous-même. Comme je l'ai dit, ce qu'ils viennent de subir n'était pas censé s'adapter extrêmement aux changements qu'ils ont apportés. C' était simplement pour vous montrer que vous pouvez rapidement faire ce site Web sur lequel vous êtes. 23. Faites en sorte que votre site Web hébergé en ligne: Donc maintenant, nous avons fini d'enregistrer notre site Web et nous voulons montrer parce qu'il semble très bon taux. Mais à moins qu'on ne se bloque, ils ont envoyé des gens devant notre ordinateur, nous ne serons pas en mesure de montrer ce site Web à la famille, à des amis ou même à d'autres entreprises. C' est parce qu'il n'est pas hébergé en ligne. Alors, comment pouvons-nous héberger notre site Web sur la voie afin que nous puissions laisser d'autres personnes le voir à moins que nous n'ayons besoin d'hébergement. Maintenant, malheureusement, l'hébergement va coûter. Ce n'est pas gratuit. C'est un service qui, en général, occasionne des frais mensuels modestes. Cependant, j'ai mis en place une offre fantastique pour les étudiants sont cours Fest. Et en cliquant sur le lien dans la description de cette vidéo, j'ai conclu un partenariat avec dire grainé pour offrir type de bureau d' hébergement pour vous permettre d'obtenir en ligne à moindre coût et à moindre coût. Donc, je recommande de dire grainé. Encore une fois, utilisez le lien dans la description de comme vidéo pour obtenir un type de bureau de prix sur l'hébergement. Donc, quand nous sommes sur, disons grainés, nous allons cliquer sur Démarrer sur l'hébergement Web. Et heureusement pour nous, nous pouvons utiliser le forfait d'hébergement étoiles le moins cher et le plus abordable. Et il est important de dire à ce stade, vous pouvez utiliser les hôtes que vous voulez. Vous n'avez pas besoin de dire grainé, même si ils ont offert un bureau un peu chrétiens en ligne de son cours, chaque hébergement a leurs propres paquets web. Et si vous trouvez un porteur 1, n'hésitez pas à l'utiliser. Aussi vaguement parlant, un Lewis processus spécifiques pour dire, grainé Parce que je les recommande toutes les entreprises d'hébergement travaillent à l'écoute de le voir. Donc, vous serez en mesure de suivre avec ce cours avec n'importe quel fournisseur d'hébergement, vous partez parce que tous les timbres que je vais vous montrer ou être le même peu importe à quel hôte vous utilisez. Donc je vais cliquer sur ce plan et je vais remplir ce formulaire pour le plan de démarrage. Donc, il suffit d'être trois et de filtrer tous les détails. Et je viens de passer la commande pour le plan de démarrage avec disons, grainé. Je vais maintenant cliquer sur SAP, disons. Donc, si vous achetez un nom de domaine avec votre hébergement, n'hésitez pas à cliquer sur un nouveau domaine où vous pouvez choisir un nom de domaine tel que brand et coats.com, par exemple. Ou si vous voulez juste une liberté et que vous pouvez choisir la demande temporaire et cliquer sur Continuer, nous avons maintenant la possibilité de démarrer un nouveau site Web ou de migrer le site Web. Mais nous voulons réellement cliquer sur le bouton ci-dessous qui dit SCAP et créer un site vide parce que nous avons déjà créé un nôtre, nous voulons juste mettre en ligne. Cliquez donc sur SCAP et créez un site vide. Ensuite, nous allons collecter disparaitre. Il dira créer votre site. Cela peut prendre une minute ou deux. Après quelques minutes, vous verrez ce message qui dit votre L. Sam. Et maintenant, si nous allons à Gérer le site, vous verrez ceci. Maintenant encore une fois, si vous suivez avec un hôte différent, certains des boutons et des menus peuvent avoir un libellé différent, mais le processus sera lâchement le CME, comme je l'ai mentionné, toutes les entreprises d'hébergement utilisent les mêmes processus que je montre. Mais par exemple, grain à l'étiquetage plus faible à cette page. La prochaine chose que vous voudrez le chercher en tant que gestionnaire d'échec. Ici C'est pend, de sorte que vous pouvez simplement cliquer sur Gestionnaire de fichiers. Et cela nous a emmenés vers le système de dossiers de notre site Web. Nuit, ce n'est pas un cours d'hébergement et de serveur, donc je ne vais pas entrer dans trop de détails sur les travaux élevés ou moins. Mais fondamentalement, un site Web n'est pas différent du dossier que nous avons dans ou paquet sur lequel nous avons travaillé pour un site Web. Donc, lorsque vous chargez un site Web en ligne, vous accédez essentiellement à un dossier comme nous avons créé avec un dossier de package R sur notre ordinateur. Donc, quand nous regardons le gestionnaire de fichiers ici, nous regardons essentiellement une structure de dossiers dans le serveur avec juste acheté. Et vous allez voir ce dossier, soulignement public HTML. Ceci est le dossier de notre site Web. Donc NF-1 nous jouons avec dossier sans fin, bien être affiché comme notre site Web. Donc on va cliquer dans ce dossier. Et vous pouvez voir qu'il y a déjà un fichier HTML point par défaut là-dedans. Par défaut, la plupart des sociétés d'hébergement empileront automatiquement un fichier HTML simple dans le dossier. Donc, quand vous voyez que vous savez que vous êtes dans le bon dossier, encore une fois, c'est le soulignement HTML public. Comme nous avons déjà créé notre propre site Web, nous n'en avons pas besoin, nous allons donc le supprimer. Donc, je vais cliquer dessus et puis je vais aller dans le groupe et cliquez sur Supprimer. Il nous demandera si nous voulons continuer et nous le faisons. Je vais cliquer sur Confirmer. Alors maintenant ajoutons notre propre site web. Entrez ce dossier. La première chose que je vais faire est de cliquer sur Fichier Télécharger. Et je vais aller dans le dossier du site Web sur lequel nous avons travaillé dans ce cours. Et je vais sélectionner le index.html et je vais le télécharger. Vous pouvez voir que nous avons téléchargé ce fichier index.html sur notre hébergement, sur notre serveur de site Web, mais nous n'avons pas encore terminé. En regardant notre dossier de site Web, nous devons également importer nos images de style et le dossier Bootstrap. Donc, n'a demandé que je vais cliquer sur Chargement de dossier. Donc pas le téléchargement de fichiers, le téléchargement de dossiers. Et je vais d'abord applaudir notre dossier Bootstrap et nous allons demander s'ils veulent télécharger tous les fichiers de Bootstrap quoi faire. Je vais donc cliquer sur Télécharger. Et vous pouvez voir que le dossier bootstrap est un oeil sur notre serveur aussi. Je vais cliquer à nouveau sur Charger des dossiers. Et cette fois, je vais télécharger nos images. Encore une fois. Nous voulons télécharger tous les fichiers dans ce dossier. Je vais donc cliquer sur Télécharger. Cela peut prendre un peu plus de temps que le dossier bootstrap car ce dossier contient toutes nos images, C'est un dossier légèrement plus grand. Vous pouvez voir qu'ils sont maintenant téléchargés avec succès. Et enfin, nous voulons télécharger notre dossier de style. Donc, je vais sélectionner le dossier de style et je vais télécharger. Et je vais confirmer que je veux télécharger le dossier dest. Vous pouvez voir que c'est la nuit téléchargée avec succès. Vous pouvez donc voir que le nom de notre serveur d'hébergement correspond à notre dossier sur lequel nous avons travaillé pour ce cours que je viens de les mettre côte à côte. Vous pouvez voir que nous avons notre dossier Bootstrap, nous avons notre dossier d'images, quel que soit le dossier de style, et nous avons jamais index.html. Notre site Web est maintenant hébergé en ligne. Si vous allez à votre domaine, l'IBM Watson dire grains, vous pouvez voir en haut de cette page. Mais le domaine que vous avez entré lors de l'achat de votre hébergement sera l'URL de votre site Web ou le nom de domaine, ou le nom de domaine et l'URL sont les mêmes. Donc, je vais aller à mon URL et appuyer sur Entrée. Et vous pouvez voir notre site Web est hébergé en ligne. C' est aussi simple que ça. Vous pouvez connaître sable, votre famille, vos amis, nos clients d'affaires, à l'adresse d'hébergement ou URL que vous venez d'acheter. Et vous pourrez voir le site Web que vous avez créé sur ce cours en ligne et à l'automne. Donc maintenant vous avez créé un site Web, et votre site Web est en direct sur le World Wide Web pour que tout le monde puisse le dire. Comme mentionné, je ne suis pas entré dans trop de détails sur ce que l'hébergement agit comme un serveur ou ce qu'est un domaine parce que ce n'est pas un cours d'hébergement en vous assurant salut, simple et assembleur pour obtenir votre site Web hébergé sur la voie rapidement. 24. Le mot de la fin: Vous avez atteint le cours de fin de bureau. Au cours de ce cours, vous avez appris ce que sont les fondamentaux du site Web, les bases du HTML, CSS être ESX, les sélecteurs dans les classes, topographie, ce que Bootstrap est. Et puis nous avons mis tout cela ensemble et Bella sont très propre site Web. Je vous ai montré comment vous pouvez faire de l'urine sur notre site Web. Enfin, je vous ai montré comment vous pouvez héberger notre site Web pour le partager avec votre famille, vos amis et vos entreprises. J' espère que vous avez apprécié ce cours et que vous avez appris que le revêtement peut être amusant et facile. Et vous êtes équipé des compétences et des connaissances nécessaires pour créer vos propres sites Web professionnels. Je tiens à vous remercier d'avoir pris part à ce cours, et j'aimerais voir les sites web que vous avez créés. Alors, s'il vous plaît, faites-les entrer pour que je puisse les voir. Si vous avez des questions, vous pouvez me contacter sur Twitter à l'encodage du cerveau. Merci beaucoup d'avoir pris part à ce cours. J' espère que vous l'avez aimé autant que je l'ai créé, et je vous souhaite le meilleur et heureux codage dans le futur.