HTML et CSS pour les débutants : Créez votre propre blog personnel !

1. Bienvenue dans ce cours !: Bienvenue dans les débutants HTML et CSS. Je suis excité de t'avoir avec moi dans ce cours. m'appelle Chris, et je suis un développeur web et aussi un créateur de cours en ligne expérimenté qui enseigne des milliers d'étudiants certifiés. Ce cours vous présentera à la fois HTML et CSS, aux principaux blocs de construction, sites web de grue. Si c'est nouveau pour, vous, ne vous inquiétez pas. Ce cours a été conçu pour les débutants, et j'ai créé ce cours avec des mines d'or chaudes. Prenons les débutants et donnons-leur les compétences et la confiance pour aller de l'avant et créer leurs propres sites Web à partir de zéro. À la fin de ce cours, vous construirez vos propres projets de blog personnels entièrement personnalisés avec plusieurs pages. Le projet aura une page de destination pleine taille pour donner un peu d'informations sur vous-même ou votre bloc. Le thème et le design de ce blog sont entièrement à vous de décider. Je vous encourage à venir avec vos propres idées. Cela sera ensuite lié à d'autres pages, y compris votre propre page de blog. Maintenant seulement nous allons créer le site pour bien paraître sur les écrans d'ordinateur. Nous veillerons également à ce que le design soit réactif. Cela signifie qu'il va changer les styles et la mise en page. Les écrans de différentes tailles pour bien paraître sur les tailles mobiles et tablettes aussi. Toutes les compétences que vous apprendrez seront immédiatement mises en pratique pour renforcer tout et vous donner un exemple concret de la façon dont elles sont utilisées. Après avoir terminé ce cours, vous aurez la confiance et aussi les compétences pour construire plus de sites Web à partir de zéro en utilisant HTML et CSS ainsi que quelques ressources et rennin ferveur à emporter, pour vous garder à apprendre longtemps après avoir terminé. C' est juste un avant-goût de ce que vous apprendrez tout au long de ce cours. Inscrivez-vous au cours et commencez votre voyage dans le monde passionnant de la construction de sites Web. 2. Outils nécessaires: Si vous êtes nouveau pour construire un site Web, il peut être courant de penser qu'un sujet technique comme celui-ci aura besoin d'un ordinateur super puissant et de beaucoup d'outils ou de logiciels. Ce n'est pas le cas, cependant, tant que votre ordinateur peut exécuter un programme tel que Word, et aussi naviguer sur Internet, vous êtes prêt à partir. Pour suivre ce cours, il n'y a que deux choses principales dont vous aurez besoin, et elles sont toutes les deux gratuites à utiliser et à télécharger. abord, c'est quelque chose que vous avez probablement déjà si vous regardez ce cours, et c'est un navigateur Web. Je vais utiliser Google Chrome pour ce cours et c'est aussi celui que je recommande. Nous allons examiner les outils de développement Chrome plus tard dans ce cours trop. Si vous avez l'un des autres principaux navigateurs Web, tels que Firefox, Safari, Internet Explorer, ou le plus récent Microsoft Edge, cela est complètement correct à utiliser aussi. Vous pouvez en télécharger plusieurs pour tester votre site Web dans différents navigateurs. Ensuite, il y a un éditeur de texte. C' est un endroit où vous allez écrire votre code. Ici, vous pouvez voir quelques éditeurs de texte populaires disponibles, ainsi que les liens vers chacun. Tout d'abord, il y a Visual Studio Code, que j'utiliserai, et il est également disponible pour Mac, Windows ou Linux. Il est gratuit à télécharger et à utiliser. Atom est également populaire et est construit par GitHub. Il a un bon retour en arrière. Il est disponible pour Mac , Windows et Linux, et aussi gratuit. Sublime Text a également été populaire depuis longtemps et est un excellent éditeur de texte web. C' est le seul ici où il y a un coût pour acheter une licence. Cependant, il est gratuit à télécharger et aussi à évaluer. À l'heure actuelle, il n'y a pas de limite de temps pour la période d'évaluation. Encore une fois, il est disponible pour Mac, Windows et Linux. Bracket est également populaire et a un bon aperçu de la vie, ce qui signifie que les changements comme indiqué dans le navigateur que vous tapez, sans avoir à actualiser la page. Il est également disponible pour Mac, Windows et Linux. Vous pouvez réellement écrire un site Web avec n'importe quel programme de texte, tel que Word, mais il y a de nombreux avantages à utiliser un éditeur dédié pour le Web, comme le codage couleur, la mise en évidence des flèches et la complétion automatique, pour n'en nommer que quelques-uns. Comme je l'ai déjà dit, j'utiliserai le premier ici appelé Visual Studio Code. Rendez-vous là ou un autre de votre choix et téléchargez le logiciel de votre plateforme. Une fois cela fait, revenez dans la vidéo suivante et nous examinerons de plus près ce qui est HTML et CSS. 3. Qu'est-ce que HTML et CSS ?: Au cours de ce cours, nous allons construire notre projet et en apprendre davantage sur HTML et CSS. Qu' est-ce que HTML et CSS exactement ? Eh bien, nous commençons par HTML. HTML signifie balisage hypertexte language.HTML est le langage de balisage standard pour la création de sites Web et d'applications. Actuellement, la dernière version est HTML5 et dans chaque version qui est introduite, il y a de nouvelles fonctionnalités ajoutées. Nous en parlerons aussi pour le cours. Les éléments HTML sont les blocs de construction d'une page Web. La plupart des éléments sont constitués d'une balise d'ouverture et de fermeture avec du contenu entre les deux. Donc, cet exemple en bas est une balise p, et ceci est utilisé pour ajouter des paragraphes de texte. Nous avons la balise d'ouverture sur la gauche, puis une balise de fermeture sur la droite avec la barre oblique avant. Ensuite, nous plaçons du contenu entre les deux. Pour cet exemple, il s'agit simplement d'un texte. Nous pouvons également ajouter quelques attributs à ces éléments HTML et il fournit des informations supplémentaires. Nous ajoutons ces attributs à la balise d'ouverture. Donc, nous pouvons voir avec l'exemple en bas, nous avons ajouté un attribut ID à ce paragraphe de texte, puis donné à son ID un nom de texte d'en-tête. Nous pouvons ensuite utiliser ce nom de texte d'en-tête. Plus tard pour ajouter du CSS ou même travailler avec lui en utilisant JavaScript. Ensuite, nous avons CSS. CSS signifie feuilles de style en cascade. Il s'agit d'un langage de feuille de style utilisé pour décrire l'aspect et aussi la mise en forme d'un document Web écrit dans un langage de balisage, tel que HTML. CSS est utilisé pour le style, le positionnement et la mise en page. CSS3 est la dernière version, qui comprend de nombreuses nouvelles fonctionnalités, telles que l'ajout de transformations et d'animations, pour n'en nommer que quelques-unes. Alors que nous suivons le cours, nous en apprendrons beaucoup plus sur HTML et CSS, mais pour l'instant, n'oubliez pas que HTML fournit le contenu de la page Web. Ensuite, nous utilisons CSS pour n'importe quel style et mise en page. 4. Choisissez votre thème !: Nous sommes à peu près prêts à commencer à construire notre projet et à commencer à apprendre sur HTML et CSS. Juste avant de le faire, j'aimerais prendre un moment pour réfléchir à un thème pour votre projet. Sur l'écran ici, c'est un projet que je vais construire. Ce qui sera un blog de voyage personnel. Bien sûr, vous êtes libre de suivre avec moi, et de rester sur le même thème de voyage. Cependant, je vous encourage à prendre un moment pour réfléchir à quelque chose de personnel pour vous. Cela pourrait être quelque chose comme un livre de sport, un blog sur le développement web ou le codage en général, ou même sur votre nourriture préférée par exemple. Le projet qui va construire peut être personnalisé pour convenir à peu près à n'importe quel type de blog que vous pouvez penser. Allez-y et soyez aussi créatif que vous le souhaitez. Peut-être écrire quelques idées et une fois que votre idée a été finalisée. Nous pouvons ensuite passer à la prochaine vidéo où nous commencerons notre projet. 5. Démarrer un projet Web: Nous allons maintenant sauter directement dans la construction de notre projet de blog. La page de destination sera la page d'entrée principale du site Web. Il est logique de commencer ici. C' est aussi la page la plus simple et fera un lien vers le reste des pages que nous créons aussi, comme le blog et la page à propos de moi. La création d'un nouveau projet de site Web est relativement simple. Nous commençons par un nouveau dossier de projet. Ce dossier contiendra ensuite tous les fichiers de notre site, tels que les différentes pages et aussi les images. Je vais placer le mien sur le bureau pour un accès facile. Vous pouvez ajouter le vôtre partout où vous le trouvez le plus pratique. Tels que les documents. Oui, je vais cliquer sur la touche Ctrl ou cliquer avec le bouton droit de la souris et créer un nouveau dossier. Je vais appeler ça le bloc de problèmes. Donc, les écrans sont de toute façon, trouver la commodité. Vous devriez avoir déjà téléchargé Visual Studio Code à l'heure actuelle, ou un éditeur alternatif. Pour ouvrir ce projet dans l'éditeur, tout ce que vous devez faire est de sélectionner votre éditeur de code, puis d'aller dans le fichier. Vous pouvez sélectionner votre dossier à partir de là. Ou vous pouvez simplement faire glisser dans le dossier du projet et commencer à travailler. Donc, vous voyez maintenant le dossier du projet dans la barre latérale. Nous pouvons voir le titre de Travel Blogger. Maintenant, il est temps de créer le nouveau fichier pour contenir le code de notre page de destination. Traditionnellement, la page principale ou la page par défaut d'un site Web s'appelle la page index.html. Créons ceci maintenant. Vous pouvez donc aller dans Fichier et Nouveau fichier ou Commande ou Contrôle N pour créer une nouvelle page Web. Vous voulez enregistrer ceci tout de suite en tant que page index.html. Assurez-vous que cela a l'extension HTML à la fin, car la page Web sera un HTML. Assurez-vous également que cela est en train d'enregistrer à l'intérieur du projet de blog de voyage aussi. Il est enregistré et vous verrez maintenant la nouvelle page dans le dossier du projet, dans la barre latérale. Je vais simplement taper Hello dans le index.html et ensuite enregistrer cela. Si vous voulez ouvrir cette page Web dans le navigateur pour voir le contenu, tout ce que nous avons à faire est d'ouvrir le dossier de blog de voyage, puis double-cliquer sur le index.html. Nous pouvons maintenant voir Bonjour ! À l'intérieur du navigateur. Donc, ce n'est que du texte brut plutôt que du HTML valide. Mais félicitations pour avoir ouvert la première page Web à l'intérieur du navigateur. Maintenant, ce projet est configuré. Passons maintenant à examiner comment structurer correctement une page Web. 6. Structurer les pages HTML: Lors de la création de pages HTML, qui doivent être lues par le navigateur, il est vraiment important de structurer notre code correctement. La première chose que nous devons faire dans notre page d'index est d'ajouter une déclaration doctype. Cela déclare la version de HTML que nous utilisons. HTML5 est la dernière version, et le doctype ressemble à ceci. Ouvrez les balises, utilisez un point d'exclamation, puis doctype et HTML. Doctype s les premières versions de HTML, étaient beaucoup plus longues et plus compliquées, mais HTML5 est maintenant agréable et simple. Le doctype n'est pas sensible à la casse. Mais j'aime toujours le taper en majuscules de toute façon, alors nous avons les éléments HTML racines et cela ressemble exactement à ceci. Donc, la plupart des éléments HTML, il y a une balise ouverte et aussi une balise de fermeture qui commence par la barre oblique avant. C' est l'élément principal de la route, ce qui signifie que tout le reste doit être ajouté entre ces balises, avec le doctype étant la seule exception. À l'intérieur de la balise d'ouverture, je vais ajouter un attribut de langue. Un attribut est juste quelques informations supplémentaires sur les éléments. Je vais créer un site en anglais, donc le code de langue est « en ». Ajoutez donc les attributs de langue que je vais juste définir sur « " en ». Si vous voulez utiliser une autre langue, vous pouvez trouver une liste complète en recherchant des codes de langue HTML, puis sélectionnez votre langue à partir de là. Cet élément HTML principal contient maintenant deux éléments imbriqués à l'intérieur. D' abord, nous avons la section « tête ». Juste comme ça. Encore une fois, cela a les balises « ouverture » et aussi « fermeture ». La section contient des données parfois appelées métadonnées, qui sont des informations sur le document HTML. Ces informations ne sont pas affichées dans le navigateur, mais elles fournissent des informations importantes sur votre site Web, telles que le titre du site, la description, ainsi que des liens sur des fichiers que nous examinerons plus tard. Ensuite, l'autre section est le corps. Donc, la balise de corps d'ouverture, puis la balise de fermeture avec la barre oblique avant. Donc, comme un humain aurait la section de la tête sur le dessus et ensuite la section du corps. Cette section contient tout le contenu des sites Web qui est affiché à l'intérieur du navigateur, tels que tout texte ou toute image. Donc, fondamentalement, la tête contient les données de notre site Web qui ne sont pas affichées. Et le corps est pour le contenu de notre site qui est affiché dans le navigateur. Nous pouvons maintenant ajouter du contenu sur le côté de la section de la tête. Tout d'abord, c'est les métadonnées. Ajoutons l'élément méta. Le métatag ne contient pas de balise de fermeture. À l'intérieur, nous pouvons ajouter un attribut appelé le jeu de caractères. Ici, nous pouvons spécifier le codage des caractères pour la page web. Le plus couramment utilisé est appelé UTF-8. Vous pouvez trouver la liste des jeux de caractères disponibles dans les ressources. Le dernier métatag que j'ajouterai est pour la clôture. Donc encore une fois, ouvrez la balise meta cette fois, le nom est égal à « viewport ». La clôture est la zone visible de la page Web. Autrefois, ce n'était qu'un écran d'ordinateur. Mais depuis les smartphones et les tablettes, la taille de la fenêtre peut maintenant varier considérablement. C' est pourquoi cette balise d'affichage est importante. abord, nous ajoutons le contenu et nous définissons la largeur du contenu pour être égale à la largeur de l'appareil. Cela permet à la largeur de la page d'être égale à la largeur de l'appareil sur lequel elle est affichée. Ensuite, séparés par une virgule, nous pouvons ajouter l'échelle initiale pour être égale à 1. Cela définit le niveau de zoom lors du premier chargement de la page. Cela peut aider à maintenir la cohérence du zoom lors de la rotation d' appareils du paysage au portrait, par exemple. Enfin, je vais ajouter le titre du site juste en dessous. Donc, cela a l'ouverture et les balises de titre de fermeture. Avec la barre oblique avant pour la balise de fermeture, alors nous pouvons avoir le titre à l'intérieur. Je vais donc appeler mon « Blog de voyage de Chris Dixon ». Alors donnez ce coffre-fort. Donc, cet élément de titre sera affiché à l'intérieur du navigateur. Donc, si nous allons sur Google Chrome et appuyez sur rafraîchir, nous voyons maintenant le titre apparaît dans l'onglet supérieur là. C' est donc la structure de base dont nous avons besoin pour n'importe quelle page HTML. Si tout cela est nouveau pour vous, ne vous inquiétez pas de mémoriser tous les problèmes encore. Nous utiliserons la même structure sur toutes nos pages. Si bientôt, il deviendra plus familier. Je sais que cette partie peut sembler un peu ennuyeuse. On ne voit rien à l'écran. Mais nous allons maintenant ajouter un peu plus de contenu sur la page de destination. Ensuite, nous allons ajouter la section tête, qui contiendra le titre du site et aussi les liens de navigation vers d'autres pages. 7. Créer l'en-tête: Il est maintenant temps de commencer à ajouter un en-tête de site. Cet en-tête contiendra le titre du site ainsi que les liens vers d'autres pages. Nous pouvons également réutiliser le code et avoir un en-tête cohérent sur toutes nos pages. Pour commencer, commencez dans la page index.html et ajoutez-la entre les balises body. Juste sous l'ouverture pour le corps. Nous pouvons ouvrir les étiquettes d'en-tête et encore une fois, comme la plupart essentiellement l'ouverture et aussi la fermeture à l'intérieur. L' élément d'en-tête n'est pas obligatoire. Cependant, il est un élément fourni chaînes, hey, HTML5. Donc, faites du sens d'en faire usage. L' élément réel lui-même ne s'affichera pas à l'écran. Donc, nous sauvegardons et rafraîchissons. Nous ne pouvons toujours pas voir de contenu dans le navigateur. Mais au lieu de cela, il décrit au navigateur quel contenu il contiendra. Allons de l'avant et ajoutons du contenu entre les balises d'en-tête. Commencez par le nom du site en haut de la page. Nous allons ajouter ceci dans les balises H1. Donc H on est un élément de titre. en-têtes sont ajoutés avec des balises de la page 1 jusqu'à H6. H1 étant le niveau supérieur du plus important cité dans et H six étant le moins important. Le texte affiché est également plus grand pour H1, puis devient progressivement plus petit jusqu'à H6. Le titre de notre site est une information importante. C' est donc une bonne utilisation pour la balise H1. Je vais ajouter le titre du site entre les deux du blog de voyage de Chris Dixon. Il suffit de donner cette sauvegarde et ensuite nous pouvons nous diriger vers le navigateur et ensuite rafraîchir. Maintenant, nous voyons le titre en haut de la page. Nous allons utiliser la plus grande taille des en-têtes à pendant que nous traversons ces projets. Ensuite, nous pouvons ajouter les liens de navigation aux autres pages. Nous avons également un des éléments environnants pour ces deux appelés nav. Donc juste en dessous de H1, je vais créer les éléments nav avec la balise d'ouverture et de fermeture. Le nav et l'en-tête sont ce que nous appelons des éléments sémantiques. Ce qui signifie qu'ils décrivent le contenu qu'ils contiennent. C' est parce qu'un moteur de recherche tel que Google peut voir ces éléments et savoir exactement ce qu'ils sont. Donc en-tête contiendra ces en-tête de site et nav contiendra la navigation du site et ainsi de suite. La plupart du temps, nous créons nos liens à l'aide d'une liste. Donc, nous n'avons pas nav, nous pouvons créer une liste non ordonnée en utilisant les balises UL. Une commande signifie simplement que chaque article de la liste ne sera pas numéroté. Par exemple, 123, et ainsi de suite pour chaque élément. Ensuite, pour créer chaque élément dans la liste, ou dans notre cas, la liste des pages. Nous ajoutons les balises LI , puis dans la cible, nous pouvons ajouter le nom de chacun de nos liens. Je vais commencer par la page d'accueil. Ensuite, notre deuxième lien, encore une fois dans les balises LI va être la page à propos de moi et le troisième sera pour le livre. Donc, le nom que nous ajoutons entre ces éléments de liste, va être le nom que nous voyons à l'écran. Si vous allez sur et actualisez le navigateur. Nous voyons maintenant la maison sur moi et aussi le blog. Vous pouvez voir par défaut qu'il s'agit d'une puce à côté de chaque élément sur la gauche. Si vous voulez que cette liste soit numérotée, par exemple 1,2,3, nous pouvons changer les balises UL. Avons-nous ici deux OL pour une liste ordonnée ? Cela semble beaucoup différent du site d'arrivée, cependant, que nous avons examiné plus tôt. C' est parce que nous avons seulement ajouté le contenu HTML. Le style CSS et la mise en page rendront ce look beaucoup plus agréable dans une vidéo ultérieure. 8. HTML sémantique et mise en page: Je veux faire un petit pas en arrière de l'ajout à ce site Web, et prendre un moment pour regarder ce que nous appelons des éléments sémantiques. Les éléments sémantiques sont simplement des éléments qui décrivent clairement leur contenu, non seulement au navigateur, mais aussi à d'autres développeurs, en regardant votre code. Déjà dans notre page d'index, nous avons utilisé quelques réservoirs sémantiques, la fois l'en-tête et le nav sont classés comme sémantiques, comme je dis au navigateur que le contenu entre eux, en-tête de zèbre ou une section de navigation. Il s'agit d'un schéma d'un site Web typique. Le corps contient tout le contenu que nous voyons à l'écran, comme nous le savons déjà. Ici, nous voyons quelques sections typiques d'un site Web. Chaque section a des éléments div. Un div est une section ou une division utilisée pour regrouper le contenu. Comme vous pouvez le voir ici, nous en utilisons un pour chaque partie du site, chacune ayant un attribut id, donc nous pouvons ajouter un style en utilisant CSS. C' est ainsi que les choses ont été faites depuis longtemps et le sont toujours. Les éléments Div sont parfaitement fins à utiliser. En fait, nous les utiliserons aussi pendant ce projet. Ici, nous ajoutons quelques éléments div, cette fois imbriqués à l'intérieur des éléments existants. Encore une fois, c'est bien et aussi très commun. Cependant, depuis HTML 5, nous avons maintenant quelques éléments alternatifs à utiliser, tout comme vous pouvez le voir ici. Plutôt que d'utiliser une balise div générique, nous pouvons maintenant utiliser ces éléments sémantiques ou descriptifs. Tant le div que tous les nouveaux éléments que vous voyez ici, ont encore une ouverture, et aussi une balise de fermeture pour entourer le contenu, tout comme l'en-tête et le nav que nous avons précédemment regardé. Il y a aussi le principal, qui contient le contenu principal du site. Ceci ne doit pas être utilisé pour tout contenu qui est répété dans d'autres pages telles que les barres latérales. Par exemple, l'élément de côté que nous voyons sur la droite est souvent utilisé pour les barres latérales, et est généralement répété sur le site Web, il est donc préférable d'être séparé du contenu principal. Comme vous pouvez le voir, il y a aussi un élément pour le pied de page maintenant aussi. C' est donc l'exemple que nous avons vu plus tôt, mais cette fois avec les nouveaux éléments sémantiques. Ici, vous pouvez voir un élément d'article qui est idéal pour des utilisations telles qu'un billet de blog ou un widget, qui a un contenu autonome. Il y a aussi un élément de section ci-dessous. Cela, en l'air, définit la section de notre document Web. Il s'agit de regrouper le contenu lié ensemble. Nous avons aussi maintenant l'élément nav, que nous avons déjà vu. Ceci est pour les sections de navigation. Notez que nous avons placé ceci à l'intérieur de l'en-tête de cet exemple. Cependant, cela n'est pas nécessaire. Je peux être placé en dehors de l'en-tête ou même imbriqué à l'intérieur de zones aussi. Nous pouvons également aller encore plus loin en réutilisant des éléments, tels que l'en-tête ou le pied de page pour définir les sections d'en-tête et de pied de page d'un article, ou même en lisant des sections à l'intérieur d'autres éléments, tels que la barre latérale. Rappelez-vous cependant, ce n'est qu'une façon courante d'utiliser ceux-ci. Ils ne nous sont pas forcés d'une manière particulière, et le cas d'utilisation diffère également selon le style du site Web dans lequel vous construisez. 9. Liens, imbrication et indentation: Nous avons ajouté notre liste de pages à la navigation. Mais si vous cliquez dessus, rien ne semble se passer. Est-ce parce que nous ne les avons ajoutés qu'en tant que liste plutôt que de dire au navigateur qu'ils devraient lier à d'autres pages ? Nous le faisons en ajoutant un élément A qui représente l'ancre. Cela peut être ajouté entre les balises LI, juste comme ceci. Je vais d'abord couper le texte d'accueil, puis ajouter les balises A. Cela a une ouverture et une balise de fermeture, puis nous pouvons coller le texte à l'intérieur. Je vais faire la même chose pour moi. Je vais couper le texte et ajouter l'élément A et coller ce retour à l'intérieur, puis la même chose pour le blog et donner à cela une sauvegarde. Ensuite, nous pouvons ajouter un élément à la balise A appelée le HREF. HREF nous permet simplement d'ajouter un emplacement vers lequel établir un lien. Nous allons créer des liens vers d'autres pages, donc nous allons ajouter les noms de nos pages ici. Ajoutez l'attribut HREF à l'intérieur de la balise d'ouverture. Le fichier index.html renvoie à la page d'accueil, donc ce sera index.html. Il s'agit d'un chemin de fichier relatif. Je vais laisser la page à propos de moi vide pour l'instant car ce sera un défi pour vous plus tard dans le cours. Nous n'avons pas encore créé la page du blog, mais nous l'ajouterons bientôt. Pour me préparer à cela, je vais également ajouter le HREF à l'intérieur ici et cela va faire un lien vers la page blog.html. Donnez cela une sauvegarde et puis si nous allons sur le navigateur et appuyez sur rafraîchir, nous pouvons maintenant voir que la maison et le blog est maintenant transformé en un lien. Nous pouvons voir le soulignement et aussi le curseur change en symbole de main pour montrer qu'il s'agit d'un lien. Cliquez sur le « Blog » et vous pouvez voir que la page n'est pas trouvée parce que nous n'avons pas encore créé la page du blog. Revenons en arrière et le lien Accueil devrait nous garder sur la même page. Avec ces liens fonctionnant maintenant, je veux jeter un oeil rapide à l'imbrication et à l'indentation. Nous avons déjà utilisé les deux dans notre éditeur de texte. Nous avons déjà parlé de la façon dont nous pouvons imbriquer des éléments à l'intérieur d'une liste, tout comme imbriquer le NAV dans la section d'en-tête. Avec les liens NAV que nous venons d'ajouter, cela est également très important. Si nous regardons de plus près cet élément de la liste, nous voyons que nous avons le texte d'accueil au milieu. Ensuite, en travaillant vers l'extérieur, nous voyons les balises A de chaque côté de ce texte. Dans la troisième rangée, nous avons les étiquettes LI environnantes à l'extérieur. Ceux-ci sont ensuite entourés par les étiquettes UL et ainsi de suite. Ne pas imbriquer correctement est une erreur courante pour les débutants et une erreur qui fait souvent que votre site Web ne s'affiche pas comme prévu. C' est quelque chose à surveiller et quelque chose qui peut éviter tout problème. indentation est le nombre de fois ou d'espaces que chaque ligne est définie à partir de la gauche. Votre éditeur de texte peut le faire automatiquement pour vous, comme vous pouvez voir le mien a. Vous verrez souvent l'indentation l'équivalent de deux ou quatre espaces selon vos préférences. Par exemple, nous pouvons voir les deux balises body indentées au même niveau avec cette ligne ici. Puis à l'intérieur, nous voyons les suivants que vous croisez, qui sont les deux balises d'en-tête, et ils sont tous les deux en ligne aussi. Cela continue ensuite en fonction du nombre d'éléments imbriqués à l'intérieur d'une liste. n'y a pas de norme que nous devons suivre lors de l'indentation. Une loi est juste à la préférence personnelle. Cependant, leur utilisation correcte et cohérente rend votre code plus lisible et nous pouvons également voir plus clairement quel contenu est imbriqué à l'intérieur. 10. Balises div et textes: Passons maintenant à l'ajout du contenu HTML final à cette page de destination. Rappelez-vous quand nous avons regardé les diapositives il y a quelques vidéos. Nous avons examiné les éléments descriptifs et aussi en utilisant des éléments div. Eh bien, je vais créer un élément en utilisant un div comme conteneur pour ce texte principal de « Salut, je suis Chris, suivez-moi sur mon voyage autour du monde. » Commençons par passer au index.html. dessous de la balise d'en-tête de fermeture, je vais créer cette section div. Donc, la balise d'ouverture et aussi la balise de fermeture. Ensuite, nous pouvons imbriquer ici un élément p. L' élément p représente un paragraphe de texte et nous pouvons l'utiliser pour ajouter notre texte à l'intérieur. Donc, je vais ajouter mon texte ici. Bien sûr, ajoutez les textes qui conviennent à votre blog. Ça peut être tout ce que tu veux. Alors « Salut, je suis Chris, suivez-moi dans mon voyage autour du monde », puis donnez ça un « Sauvez ». Allez dans le navigateur, puis appuyez sur « Actualiser ». Maintenant, nous pouvons voir la ligne de texte est en cours d'ajout. Nous pouvons également ajouter plus d'un élément p et cela séparera chaque bloc de texte sur une nouvelle ligne, également avec un espacement entre les deux. Donc, c'est maintenant tout le contenu que vous voyez à l'écran. Par rapport au blog fini, bien qu'il ne semble pas très joli. Nous allons bientôt entrer dans le style avec CSS. Tout d'abord, il y a quelques éléments que vous pouvez ajouter au HTML pour changer le texte. Vous verrez sur cette version finie quelques choses. Tout d'abord, détectez une scission sur deux lignes. Le mot « monde » est également souligné. Tout cela est fait avec des balises HTML. Tout d'abord, pour casser le texte sur une nouvelle ligne, nous ajoutons simplement un élément de pause où nous voulons que cette pause se produise. Je vais ajouter le mien juste après le nom de Chris. Alors passez aux tags p. Ensuite, nous pouvons ajouter un élément de rupture. C' est l'un des rares éléments qui n'a pas de balise de fermeture, donc nous sommes d'accord pour le laisser comme il est là. Maintenant, si nous rafraîchissons, nous voyons après le mot Chris, que la deuxième ligne a été créée. La raison pour laquelle cela n'a pas de balise de fermeture est simplement parce que nous n'ajoutons aucun contenu à l'intérieur. Il vient d'être ajouté partout où nous en avons besoin. Maintenant, nous pouvons ajouter quelques balises autour du texte du monde, de sorte qu'il se démarque. Tout d'abord, nous pouvons envelopper le mot monde avec des balises m. Donc, la balise m juste avant, et aussi la balise de fermeture juste après. L' élément m ajoute un accent supplémentaire sur le texte et s'affiche généralement dans le navigateur en italique. Nous pouvons voir en enregistrant cela, puis en rafraîchissant le navigateur. Maintenant, nous pouvons voir que le mot a changé en italique. En outre, nous pouvons ajouter un élément fort. Vous pouvez entourer toute cette section m avec les étiquettes fortes. Alors ajoutez-le juste avant la balise d'ouverture, puis juste après la balise m de fermeture. L' élément fort donne une grande importance aux textes. Ceci est également généralement affiché en gras. Encore une fois, cela souligne l'importance de comprendre comment fonctionne l'imbrication. Comme nous avons le mot au centre, puis la balise m qui l'entoure et puis enfin les étiquettes fortes à l'extérieur. Ensuite, revenez sur le navigateur, puis actualisez. Vous pouvez voir que le texte est un peu plus audacieux. Il peut être difficile de voir l'élément fort en ce moment, mais il sera plus visible plus tard lorsque nous augmenterons la taille du texte et ajouterons également une image d'arrière-plan. Donc, avec tout HTML maintenant en place. Passons maintenant à l'ajout d'un style à cette page. 11. CSS interne et polices Google: Bien que nous apprenons beaucoup sur HTML jusqu'à présent, sites Web ne commencent pas vraiment à paraître bien jusqu'à ce que nous ajoutons un style, les styles CSS peuvent changer l'apparence de notre site Web de quelque chose comme nous avons actuellement ici pour ensuite quelque chose comme ça, qui est le site d'arrivée. Une vague, je veux dire CSS, est d'ajouter des balises de style à la section tête de nos documents. Si ouvrez l'éditeur de texte, puis allez dans le index.html. Retournez à la section supérieure de la tête, puis juste en dessous du titre, nous pouvons ajouter les éléments de style. Juste comme ça. Cela a l'ouverture et aussi la balise de fermeture. Nous pouvons ajouter n'importe quel style que nous voulons entre ces deux balises. Cette façon de faire les choses est appelée CSS interne. Cela est dû au fait que les styles sont uniquement destinés à être utilisés en interne sur cette page. Plus tard, nous couvrirons également une autre façon de le faire. Ensuite, nous devons choisir les éléments que nous voulons styliser, en utilisant un sélecteur. Un sélecteur peut être un nom des éléments que nous avons déjà utilisés, tels que header, p ou li, par exemple. Je vais commencer par sélectionner le HTML, alors ajoutez du HTML là. Puisque HTML est un élément racine, tous les styles que nous ajoutons ici s'appliqueront à l'ensemble du site. Toutes les règles de style CSS pour le sélecteur doivent être placées à l'intérieur d'une paire d'accolades, comme ceci. Comme c'est le sélecteur HTML s'applique à toute la page, une bonne utilisation pour cela peut-être ajouter la police que vous voulez utiliser. Pour assurer la cohérence sur l'ensemble du site Web, nous pouvons utiliser la propriété font-family pour définir la police. Vous pouvez voir que l'éditeur de texte donne automatiquement quelques suggestions pour nous d'utiliser. Je vais choisir Arial comme exemple avec le point-virgule à la fin. Vous remarquerez qu'il s'agit de trois noms différents apparaissant, et c'est l'ordre de priorité. abord, nous avons Arial, et c'est la police que nous utiliserons si le navigateur le supporte. Si ce n'est pas le cas, il passera à l'Helvetica, qui est la deuxième priorité. Si ni Arial ni Helvetica n'est disponible, le nom de famille générique sera utilisé, tel que serif ou sans empattement. C' est une façon d'ajouter des polices, une autre est en visitant un site Web de polices et en sélectionnant une à partir de là. Vous pouvez faire une recherche de polices Web si vous voulez regarder de plus près un peu plus, un populaire est les polices Google. Je vais aller sur le navigateur Web, puis rechercher des polices Google, et c'est le site que je vais utiliser pour mon blog. Allons à fonts.google.com. Vous pouvez voir certains des plus populaires. Vous pouvez effectuer une recherche ou affiner par catégorie. Celui que je vais utiliser pour mon blog s'appelle sables mouvants. Je vais faire une recherche pour cela puis appuyez sur « Entrée », et vous pouvez voir le sable mouvant apparaît dans la recherche. Bien sûr, n'hésitez pas à choisir un autre si vous préférez. À cela, nous avons juste besoin de cliquer sur le symbole plus rouge. Ensuite, pour ajouter cela à notre site Web, nous descendons vers le bas et nous développons. Ensuite, nous avons le lien vers la feuille de style CSS. Ceci est un lien vers les polices Google, qui nous permet de l'utiliser dans notre projet. Copiez donc ce lien complet. Je vais utiliser Command ou Control C pour copier ceci et revenir dans le index.html, puis nous devons coller cela dans la section de tête. Je vais ajouter ceci, il suffit de faire sauter le titre et de le coller dans. Nous devons le faire parce que nous n'utilisons pas de police web standard. Nous devons créer un lien vers Google pour le rendre disponible dans notre code, revenir aux polices Google. Nous devons ensuite copier la ligne de CSS, qui est pour la famille de polices que nous avons vu auparavant. Donc copiez ceci et puis si nous allons dans la section style, je vais remplacer la famille de polices, que nous avons utilisée avant et coller dans cette famille de sable mouvant. Maintenant, cette police non standard devrait fonctionner puisque nous avons le lien ci-dessus. Donnons cette sauvegarde, puis actualisons le navigateur, pour revenir au projet, puis actualiser. Maintenant, nous pouvons voir que le style du texte a changé. Cela signifie que la police fonctionne maintenant. Ensuite, nous pouvons changer la couleur de la police. Nous ajoutons simplement une propriété de couleur pour ce faire. Toujours dans le sélecteur HTML, va ajouter une nouvelle ligne, qui va être pour la couleur. Encore une fois, lorsque vous tapez ceci, vous verrez quelques suggestions par le navigateur. Vous pouvez choisir l'une de ces couleurs que vous préférez, ou vous pouvez utiliser un sélecteur de couleurs pour une plus grande gamme de couleurs. Si nous revenons sur le navigateur et ensuite nous dirigeons vers Google, je vais chercher le sélecteur de couleurs HTML. Un populaire est celui des W3Schools, donc je vais sélectionner cela. Ici, nous pouvons sélectionner la couleur que nous aimons et aussi voir beaucoup de différentes nuances et variantes de cette couleur. Il suffit de sélectionner un sur le côté gauche, puis nous pouvons le réduire à une nuance plus claire ou plus foncée. À droite, on nous donne les nuances dans ce qu'on appelle un format hexadécimal. C' est ce que vous pouvez voir sur le côté droit, et il s'agit de six chiffres avec le préfixe de hachage. Nous pouvons ensuite utiliser cette couleur hex dans notre CSS. Je vais utiliser une valeur de couleur pour mon texte de 1a1a1a. Revenons donc au CSS, puis avec le préfixe de hachage, je vais ajouter 1a1a1a avec le point-virgule à la fin. Nous devons nous assurer que chaque ligne se termine par un point-virgule et c'est le cas pour toutes les propriétés CSS. Donnez cela une sauvegarde, puis si nous actualisons notre projet à l'intérieur du navigateur, cela ne devrait pas changer la couleur dans le navigateur. Le changement est très subtil, donc il peut être difficile de le dire. Si vous voulez vérifier que cela fonctionne, nous pouvons le changer à une couleur différente, comme le rouge, puis rafraîchir, et maintenant nous pouvons voir clairement que le texte est changé. Je vais juste annuler ce changement et le remettre à ce qu'il était. Bravo si vous avez réussi à faire fonctionner tout ça. Si ce n'est pas le cas, cochez soigneusement votre code pour toute erreur de frappe. Ensuite, je vais également vous montrer comment utiliser les classes et les ID pour sélectionner nos éléments. 12. Cours et ID: Nous avons examiné la sélection des éléments par leur nom de balise, tels que HTML, en-tête ou url. Il existe également d'autres façons de le faire en utilisant des classes et des ID. Les classes et les ID sont des attributs, que nous pouvons ajouter aux éléments. Commençons par regarder comment nous pouvons utiliser un ID. Si nous descendons à la balise d'ouverture pour l'en-tête, nous pouvons ajouter un attribut ID et lui donner un nom de notre choix. Je vais appeler ça les arrière-plans et sauver. Nous pouvons maintenant utiliser ce nom d'arrière-plan avec le préfixe de hachage. Juste en dessous des calibrateurs HTML. Parce qu'il s'agit d'un ID, nous pouvons utiliser le dur, puis le sélectionner avec le nom des arrière-plans. Une des raisons pour lesquelles nous ferions cela est parce que si nous prenons l'en-tête comme un sélecteur, alors les styles s'appliqueraient à tous les en-têtes sur la page et la connaissance de domaine. Si nous passons au site fini, je veux que cet arrière-plan ajoute la couleur de fond gris, que vous pouvez voir ici. Nous avons une propriété d'arrière-plan pour ce faire. Retour dans le CSS, nous pouvons ajouter l'arrière-plan. Je vais donner à mon genou la couleur hexadécimale de D8. Nous avons également accès à la même gamme de couleurs que nous l'avons fait précédemment avec le texte. Enregistrez cela, puis passez dans le navigateur et actualisez le projet. Maintenant, nous pouvons voir que le fond gris est apparu derrière l'en-tête entier. Si vous regardez les sites finis, nous pouvons également voir que le même fond gris est également derrière le texte. Cependant, ce ne sera pas un bon cas d'utilisation pour un ID. Un ID n'est censé être utilisé qu'une seule fois pour une section unique. Si nous voulions utiliser les mêmes styles plus d'une fois, nous pourrions changer cet ID pour être une classe. En bas dans l'en-tête, nous pouvons changer ID pour être égal à la classe. Ensuite, nous pouvons ajouter la même classe au texte p à d'autres arrière-plans à ces deux. Donc p-class est également égal à l'arrière-plan. Ensuite, quand il change le sélecteur CSS d'un dur pour être un point. C' est ainsi que nous sélectionnons les classes. Maintenant, si nous sauvegardons cela et revenons au navigateur, appuyez sur rafraichir. Maintenant, nous avons les arrière-plans gris dans l'en-tête et aussi le texte. C' est donc la différence entre l'utilisation de classes et d'ID avec CSS. 13. Introduction à Flexbox et conception réactive: La flexbox CSS est une façon relativement nouvelle de mettre en page et d'aligner des éléments sur un site Web. Il vise à rendre le processus beaucoup plus simple qu'il ne l'a été par le passé. Dans le passé, nous avons utilisé des hacks et des méthodes telles que ; tables, floats ou CSS compliqué pour obtenir la couche que vous voulez. La flexbox a vendu ce produit en nous fournissant des moyens simples mais efficaces pour mettre en page et positionner les éléments. Nous commençons par définir un conteneur flexible, comme vous pouvez le voir ici. Cela nous permet de définir comment nous voulons que les éléments flexibles à l'intérieur apparaissent. Nous pouvons définir la direction, l'alignement et la quantité d'espace entre les deux, pour n'en nommer que quelques-uns. En outre, nous avons le contrôle des éléments flexibles individuels aussi. Par exemple, nous pouvons définir l'ordre dans lequel vous voulez qu'ils apparaissent, l'alignement, et aussi définir la façon dont ils doivent croître ou se rétrécir en fonction de l'espace disponible. Qu' est-ce que tout cela signifie pour notre blog ? Eh bien, fondamentalement, il sera utilisé pour mettre en page notre site Web pour être le mieux adapté aux différents vices du site. La modification de la mise en page pour différentes tailles d'écran est connue sous le nom de design web responsive. Nous allons faire en sorte que notre blog réponde différents appareils du site pour une meilleure expérience utilisateur. Sur la gauche, nous avons un petit écran, comme un mobile ou de petites tablettes. Le contenu ici est généralement empilé sur chacun des autres verticalement. Cependant, comme nous pouvons le voir sur la droite, comme nous avons plus d'espace disponible sur l'écran, nous pouvons ajouter plus de contenu côte à côte. Pour ce faire, nous définissons simplement nos conteneurs flexibles, tels que l'en-tête en haut, et un autre conteneur pour le reste de notre contenu que nous voulons contrôler. Ici, j'utilise un div. Pour ce faire, nous pouvons définir une propriété CSS de direction. Parmi ceux-ci, la direction flexible nous permet de définir les éléments enfants pour être l'une ou l'autre colonne, qui est empilée l'une sur l'autre, une ligne, qui est de gauche à droite. Pour changer une propriété CSS de colonne en ligne, utilisez une requête multimédia, mais plus sur cela plus tard. Ceci est juste une vue d'ensemble de base de la flexbox CSS. Il a beaucoup plus de propriétés et d'options que ce que nous pouvons voir ici. Nous allons également en examiner quelques autres lors des projets, mais pour l' instant mettons cela en pratique en l'ajoutant à la section lourde. 14. CSS d'en-tête, marge et remplissage: Nous avons maintenant une meilleure idée de la façon dont nous allons utiliser la flexbox pour mettre en page notre site Web. Commençons maintenant à travailler sur la section d'en-tête. Alors ouvrons l'éditeur de texte. Nous allons donc concevoir le site avec une première approche mobile. Cela signifie que nous commencerons d'abord à mettre en page les sites pour un appareil mobile, puis nous construisons sur cela pour les appareils plus volumineux à mesure que plus d'espace sera disponible. Pour ce faire, je vais réduire le navigateur pour simuler un appareil plus petit. Donc ça a l'air juste. Je vais fermer cette barre latérale, juste pour nous donner un peu plus d'espace. Donc, dans la section de style. Commençons par ajouter le sélecteur d'en-tête, au CSS. Donc juste en dessous des arrière-plans, allez ajouter l'en-tête à l'intérieur ici, avec les accolades. Donc, avec des appareils plus petits, je veux aligner tout le texte au centre. Nous pouvons le faire en ajoutant une propriété text-align. Je vais mettre ça au centre. Alors sauvegardez cela et actualisez. Nous pouvons maintenant voir que le texte est au centre de l'en-tête. Nous avons également la possibilité de gauche et de droite aussi. Ensuite, comme nous l'avons vu dans les diapositives flexbox, nous voulons que l'en-tête set soit un conteneur flex. Nous pouvons le faire en définissant le type d'affichage, pour être égal à un flex. Boues rafraîchissent le navigateur. Vous verrez que le contenu est maintenant affiché suivant, selon le cas. effet, car par défaut, la direction de flexion est définie sur ligne. C' est ainsi que nous voulions rechercher de gros appareils. Mais avec des appareils plus petits, nous pouvons définir cette direction flexible à la colonne. Donc, dans la section d'en-tête, ajoutons la propriété de direction flexible. Ensuite, changez cela en colonne. Donnez ça une sauvegarde. Voyons voir à quoi ça ressemble. Super. Donc, peut maintenant voir le contenu est empilé les uns sur les autres. Alors gardez à l'esprit que vous parcourez les sites. Ce sont les propriétés CSS, que j'ajoute pour mon blog. N' hésitez pas à apporter les modifications que vous voulez pour convenir le mieux à votre site Web. Donc, ensuite, je vais ajouter du CSS à ce titre d'en-tête h1, contenu dans l'en-tête. Donc, nous avons déjà regardé comment nous pouvons styliser cela en ajoutant une classe ou un identifiant, à ce h1. Ou [inaudible] h1 est comme ça. Alors ajoutons l'en-tête h1. Cela garantit que nous sommes spécifiques et ne ciblons que le h1 dans l'en-tête. Cela fonctionne également pour plus d'éléments. Je vais ajouter une marge et un rembourrage à cela pour l'espacement. Avant de faire cela, jetons un coup d'œil à ce que la marge et le rembourrage sont ? Disons que nous plaçons dans un élément article dans notre site. Je voudrais qu'il soit agréable égal à l'espace autour, comme nous le voyons ici. Si nous ajoutons simplement dans cet article, par défaut, cela peut ressembler à ceci. Entourée contre le conteneur extérieur. Pour garder un peu d'espace à l'extérieur de l'élément. Nous pouvons ajouter une marge, comme vous pouvez le voir ici. En outre, nous pouvons ajouter de l'espace à l'intérieur des éléments. C' est ce qu'on appelle le rembourrage. Par exemple, si nous ajoutons une image ici, remplissage s'appliquerait à l'intérieur de l'article, créant ainsi de l'espace autour de l'image comme nous pouvons le voir ici. Donc, fondamentalement, la marge est à l'extérieur des éléments et le rembourrage est à l'intérieur. Donc maintenant, nous connaissons la différence entre la marge et le rembourrage. Nous pouvons voir cela en action avec l'en-tête h1. Si nous regardons l'en-tête à l'intérieur du navigateur, nous pouvons voir qu'il y a un peu d'espace déjà au-dessus de ces éléments h1. Ceci est appliqué par le navigateur par défaut. Nous pouvons supprimer cela par soudainement une marge de retour à zéro. Donc, ajoutez ceci à l'intérieur de l'en-tête h1, donnez cela une sauvegarde et puis actualisez. Maintenant, vous pouvez voir qu'il est déplacé vers le haut, sorte que la marge par défaut a été supprimée. Donc, cela supprime l'espace par défaut ci-dessus, mais laisse tout lié ensemble. Nous pouvons ajouter un peu d'espace à l'intérieur ici, en ajoutant un volume de remplissage. Donc juste en dessous de la marge, je vais ajouter un peu de rembourrage. [ inaudible] mien à 15 pixels. Mais bien sûr, faites ce qui convient à votre blog. Puis actualisez. Maintenant, vous pouvez voir que nous avons un bel espace rembourré entre les éléments. La dernière chose que je veux faire dans cette vidéo est de supprimer les puces par défaut, à gauche des éléments de la liste et aussi de centrer le texte. Nous pouvons maintenant cibler les éléments de la liste en utilisant le sélecteur LI. Pour supprimer ces puces, tout ce que nous devons faire, c'est définir la propriété de style liste sur none. Il existe également des options pour les modifications apportées à d'autres styles. Tels qu'un carré ou même une image. Donc, donnez cela une sauvegarde et puis actualisez. Maintenant, nous pouvons voir que les balles ont été enlevées. Maintenant, espacons ça. Je vais appliquer un peu de rembourrage. Juste en dessous du style de liste. Je vais définir ceci pour être une valeur de 10 pixels. Donc maintenant, nous allons avoir un bon espacement autour de chacun des liens. Donc les choses commencent à paraître un peu mieux maintenant. Mais nous pouvons voir que les éléments nerveux toujours pas au centre. Alors pourquoi est debout ? Pour mieux comprendre, nous devons passer aux outils de développement du navigateur. Donc, je vais juste élargir le navigateur un peu plus grand. Ensuite, je vais contrôler ou cliquer avec le bouton droit, puis descendre pour inspecter. Ensuite, si nous cliquons sur cette petite flèche dans le coin. Puis survolez jusqu'à ce que nous voyons l'UL ici. Nous pouvons voir que nous avons cette section verte sur le côté gauche, qui semble tout repousser, cette section verte. Si nous faisons défiler vers le bas, nous pouvons voir la partie verte est le rembourrage. Cela signifie donc que le remplissage est ajouté par défaut, dans le navigateur. Donc, tout ce que nous devons faire est de remplacer cela à l'intérieur du CSS. Nous pouvons le faire en sélectionnant la liste non ordonnée. Réglez ensuite le rembourrage à zéro. Alors donnez ce rafraîchissement. Maintenant, vous pouvez voir que les liens sont maintenant bien au centre. Donc, notre en-tête commence maintenant à mieux paraître. Maintenant, rendons ce look encore mieux en ajoutant notre image d'arrière-plan. 15. Où trouver de superbes images libres de droits: Lors de la construction de ce projet et aussi des projets futurs. Vous aurez toujours besoin de trouver des images de haute qualité à utiliser sur votre site Web. Ce blog n'est pas différent, et ici je veux vous montrer quelques ressources pour trouver quelques images de bonne qualité. Le premier est pixabay.com, et il s'agit d'un site Web où vous pouvez trouver des images gratuites, et celles-ci sont répertoriées sous la licence Creative Commons. Cela signifie qu'il est gratuit pour un usage commercial, et nous n'avons pas besoin d'ajouter d'attribution à l'offre ou au site Web. Trouver des images est simple. Nous pouvons utiliser la fonction de recherche ou même cliquer sur l'Explore. Donc, par exemple, si nous voulions une photo d'un tigre, nous pourrions faire une recherche, puis si nous en sélectionnons une, tout ce que nous avons à faire est de cliquer sur le téléchargement gratuit. Ici vous pouvez voir quelques informations sur la licence. Vous pouvez voir que l'image est gratuite pour un usage commercial et nous n'avons pas besoin d'écrire d'attribution. C' est donc un bon site Web à utiliser pour des images de haute qualité. Un autre est un site appelé Unsplash, et vous pouvez trouver cet art Unsplash.com. Les images que vous pouvez trouver ici sont également libres d'utiliser et encore une fois, vous pouvez avoir facilité de recherche ou cliquez sur les images, puis appuyez sur le bouton de téléchargement. Vous remarquerez également qu'il y a un popup disant que le crédit n'est pas nécessaire mais est apprécié pour donner aux photographes un peu plus d'exposition, et il y a du texte ci-dessous à intégrer dans le site Web si vous ne vouliez pas à cela. Une autre grande ressource est le site Web Wiki media Commons. Tous les jours, il y a une nouvelle image du jour que vous pouvez utiliser et tout ce que vous devez faire est de cliquer sur l'onglet images en haut, puis nous pouvons sélectionner les images par catégorie. Les images ici sont libres d'utilisation, et vous pouvez également trouver plus d'informations sur la licence à gauche et dans la section Bienvenue. Cela a juste fondamentalement quelques informations, vous disant comment les images sont libres d'utiliser. Enfin, nous avons un site Web appelé Shutterstock.com. Vous avez peut-être déjà entendu cela comme c'est probablement le plus grand, et a la plus large gamme d'images disponibles. Vous pouvez également télécharger des éléments tels que des morceaux de musique et des clips vidéo vers. Cependant, il y a un coût à cela. Shutterstock est l'un de ceux ici qui n'est pas gratuit. Vous pouvez consulter les plans de tarification à en cliquant sur le lien ici. Une autre façon de trouver des images est une recherche Google. C' est donc aussi recherché notre tigre. Mais l'une des choses à garder à l'esprit est l'accord de licence. Si nous cliquons sur les images, l' une des façons de filtrer cela vers le bas à ceux qui sont libres de l'utiliser en allant sur le lien du menu Outils et donc aller droits d' utilisation et le étiqueté pour la réutilisation avec modification. Si nous sélectionnons ce non émis remplit maintenant les images à celles que nous sommes librement disponibles pour utiliser. Mais enfin, vérifiez toujours la licence et l'accord avant de télécharger des images pour vérifier que vous êtes autorisé à les utiliser pour votre cas d'utilisation. Donc, tout ce que vous devez faire maintenant est de sélectionner une image que vous allez utiliser pour l'arrière-plan de votre blog, puis de l'avoir disponible pour l'utiliser dans la prochaine vidéo. Ou si vous voulez juste suivre avec moi, l'image est utilisée dans ce cours fourni à l'intérieur de la section des ressources. 16. Images d'arrière-plan et positionnement de flexbox: Vous devriez maintenant avoir des images uniformément fournies avec le cours, ou vos propres images que vous souhaitez utiliser. Pour ajouter ces images à votre projet, il suffit de les ajouter au dossier du projet. Ceux-ci peuvent être placés n'importe où, mais je vais les ajouter à l'intérieur d'un dossier d'images juste pour garder les choses organisées. De retour sur le bureau, je vais ouvrir les projets. Ici vous pouvez voir que j'ai les images qui sont disponibles dans le cadre de ce cours. Ne vous inquiétez pas si vous n'avez que l'image d'arrière-plan pour l'instant. Toutes les autres images seront utilisées plus tard dans le cours pour le blog. Dans ce dossier de blog de problèmes, je vais cliquer avec le bouton droit de la souris et créer un nouveau dossier appelé images, puis je vais faire glisser tous ces à l'intérieur du dossier images. Pour l'instant, nous n'utiliserons cette image d'arrière-plan que pour la page de Londres. Bien sûr, le vôtre pourrait être nommé quelque chose de complètement différent, alors gardez cela à l'esprit lorsque nous tapons ceci à l'intérieur du projet. Maintenant, si nous allons à la page index.html, si nous faisons défiler vers le bas, soufflez tous les CSS. Nous aurons ce texte de « Salut, je suis Chris, suivez-moi sur mon voyage autour du monde. » Je vais ajouter deux classes. Le premier sera pour le conteneur div environnant. Cette classe va être appelée image de voyage, donc c'est le nom de la classe pour le conteneur. Puis une deuxième classe pour ces textes de textes Journey. Comme vous pouvez le voir ici, nous avons deux classes séparées juste séparées par l'espace et c'est parfaitement bien à utiliser. Maintenant, nous avons ces classes ajoutées, nous pouvons ajouter l'image au conteneur d'image de voyage en utilisant le CSS. Sauvegardez à la section Style. Rappelez-vous que c'est une classe donc nous devons utiliser les points. Nous voulons cibler l'image du voyage. Nous pouvons ajouter une image d'arrière-plan en CSS avec la propriété d'arrière-plan, puis nous utilisons une URL pour fournir un lien vers l'emplacement du fichier. Ceci est stocké dans le dossier images et l'image est appelée backgrounds dot JPEG. Bien sûr, si le vôtre est nommé quelque chose de différent, vous devrez changer cela. Ensuite, nous allons ajouter quelques propriétés tout d'abord, sans répétition. Par défaut, les images seront répétées horizontalement et verticalement. Nous n'ajoutons aucune répétition car nous ne voulons qu'une seule image pleine grandeur. Puis capteur central. Cela détectera l'image sur l'axe X et l'axe Y par défaut à remplacer en haut à gauche. Cela déplace l'image vers le centre. Ensuite, nous allons enfin ajouter fixe à la fin, cela maintient la position de l'image fixe lorsque nous faisons défiler et nous allons jeter un oeil à ceux-ci dans un instant. Donnez cela une sauvegarde, alors si nous passons au navigateur et puis actualisons, nous voyons toujours qu'aucune image n'a été affichée à l'écran. C' est parce que l'image d'arrière-plan ne sera que la hauteur du contenu à l'intérieur de cette div, qui est le texte, et ce texte cache cependant l'image à cause de l'arrière-plan gris. Si nous passons temporairement au style et supprimons l'arrière-plan, découpez et enregistrez, puis actualisez. Nous pouvons voir que l'arrière-plan est à peu près apparu sur l'écran. Ajoutons cela à nouveau. Pour contourner cela, nous pouvons définir la hauteur de l'image de voyage dans le CSS en utilisant la propriété minimale high, et nous pouvons l'ajouter juste en dessous de la propriété de fond. Pour faire défiler vers le bas jusqu'à l'image du voyage, puis nous pouvons ajouter la hauteur minimale de 100 vh. La hauteur minimale peut être une valeur de pixel, un pourcentage, ou de 70 à 100 vh. Cet ensemble indique être 100 % de la hauteur de la fenêtre. La fenêtre d'affichage est un écran visible de l'appareil. Enregistrez cela, et maintenant si nous actualisons, nous voyons maintenant que l'image est à l'écran. Une chose à remarquer lors du défilement vers le bas dans le navigateur, que l'image est dans une position fixe. C' est parce que nous avons réglé cela pour être corrigé. Si nous devions supprimer cela, nous pouvons voir en rafraîchissant le navigateur que l'image défile avec le reste de la page, mais je veux garder le mien fixe comme j'aime regarder cela. Continuons avec silencieux cette section d'image. En dessous des hauteurs minimales, je vais ajouter la propriété de taille d'arrière-plan. On va régler ça pour couvrir. La taille de l'arrière-plan peut être définie sur secret pour que l'image couvre toute la zone d'arrière-plan, puis nous allons définir le type d'affichage sur flex, comme nous l'avons vu dans l'en-tête. Ce sera aussi le conteneur flexible pour nos textes, alors sauvegardez cela et si nous actualisons, nous pouvons maintenant voir que le texte est maintenant placé au-dessus de l'image plutôt que de s'asseoir au-dessus, comme avant. Nous pouvons maintenant utiliser la flexbox pour aligner ce texte au centre, fois horizontalement et verticalement. Pour définir la ligne de texte comme verticalement, nous pouvons définir la propriété des éléments de ligne. Ajoutons ceci juste en dessous du type d'affichage. Aligner les éléments au centre, et jetons un coup d'oeil à cela. Rafraîchir. Maintenant, nous pouvons voir que cela est aligné verticalement à l'image. Maintenant, pour envoyer le texte horizontalement, nous pouvons utiliser une autre propriété flexbox de justification du contenu et aussi définir cela comme capteur, alors enregistrez et donnez cette actualisation. Maintenant, nous pouvons voir que le texte est maintenant déplacé au milieu de l'image. Maintenant, vous pouvez voir à quel point il est facile d'aligner le texte à l'aide de la flexbox. Ensuite, nous allons terminer en ajoutant les styles finaux pour la vue mobile. 17. Stylisation finale pour les petits écrans: Donc maintenant, nous pouvons ajouter un peu de style au texte aussi. Nous obtenons ce texte, une classe de texte de voyage. Ajoutons ceci au CSS juste ci-dessous. Commençons donc par ajouter la ligne de texte du capteur. Rend un peu plus petit. Ensuite, vous voulez augmenter la taille de la police pour être 2ems. Ici, nous utilisons un m comme taille de police. Nous pouvons aussi utiliser des tailles fixes, telles que les pixels mais em est une unité évolutive, un em est égal à la taille de police actuelle. Donc sinistre 2em fait deux fois la taille qu'il serait normalement. Jetons donc un coup d'oeil en rafraîchissant et maintenant vous pouvez voir le texte est beaucoup plus grand. Ensuite, ajoutons un peu de remplissage au texte et cette fois je veux ajouter 1.5em, et cela fonctionne comme la taille de la police est d'être 1,5 fois le remplissage, ce qui serait normalement. Maintenant, vous pouvez voir que nous avons un peu d'espace autour du texte. Enfin le rayon border-, et une fois que cet esprit à dix pixels. Donc, si je me rafraîchis, cela nous donne un beau bord arrondi à l'extérieur du conteneur. Donc les choses commencent à être un peu plus agréables. Nous voulons également faire quelque chose à propos de ces liens vers la couleur ne correspond pas avec le reste du site et je veux supprimer le sous-jacent aussi. Si vous vous souvenez de ces liens, un ensemble avec la balise a. Donc, nous ciblons le sélecteur dans un CSS. Donc, en dessous des textes de voyage, nous pouvons ajouter le a. Pour supprimer le soulignement, nous pouvons définir la décoration de texte pour être connu et cela supprimera la ligne sous chacun des liens, puis nous pouvons également définir la couleur comme nous avons regardé et combien le reste du site en envoyant ceci à la valeur hexadécimale de 1a1a1a, puis actualiser et maintenant cela semble beaucoup plus cohérent avec le reste des sites. La dernière chose que nous voulons faire maintenant dans cette vidéo est de rendre ce fond gris un peu transparent, sorte que l'arrière-plan puisse être vu à travers lui. abord, je vais passer au CSS et à la propriété d'arrière-plan. Je vais ajouter un commentaire, qui peut être utilisé avec une barre oblique avant, puis une étoile avant, puis l'opposé d'une étoile et d'une barre oblique avant, puis commenter cette ligne. A Common est un moyen de dire à un navigateur d'ignorer ce code. Nous pouvons également utiliser des commentaires pour taper des notes, à la fois pour nous-mêmes et pour d'autres développeurs. Pour ajouter cette opacité transparente, nous pouvons utiliser une couleur RGBA à la place du type hexadécimal, que nous venons d'utiliser. Pour convertir ce type hexadécimal coloré en RGBA. Nous pouvons utiliser un outil en ligne pour cela. Donc, je vais aller sur Google et rendre le navigateur un peu plus grand et je veux rechercher hex à RGBA et ses différents outils que vous pouvez utiliser. Je vais utiliser la couleur hexadécimale tool.com. Je n'ai pas besoin d'entrer une couleur. Donc, la valeur hexadécimale que nous avons utilisée auparavant était d8d8d8, et cela va ensuite la convertir en une valeur RGBA. Donc copiez ceci et allez sur les arrière-plans peut coller cela dans pour définir l'arrière-plan à la nouvelle valeur RGBA, suivi du point-virgule. couleurs RGBA ont quatre valeurs. Nous définissons les valeurs de rouge, vert et bleu pour commencer. Ensuite, la dernière valeur est pour la transparence et c'est une valeur comprise entre zéro et un. Zéro étant entièrement transparent. Donc, je veux définir le mien pour être pas 0.7, nous donne sauver et puis rafraîchir le navigateur. Maintenant, nous pouvons voir derrière le texte, nous avons les arrière-plans semi-transparents et l'image commence à confirmer. Nous avons donc terminé le style de la vue mobile à petit écran. Ensuite, nous allons jeter un oeil aux requêtes multimédias pour nous permettre d' ajouter des styles à appliquer uniquement sur des appareils plus volumineux. 18. Introduction aux requêtes médias: Maintenant, comment les choses ressemblent à nous les voulons sur des appareils plus petits. Nous pouvons maintenant commencer à élargir le navigateur pour simuler comment les choses vont ressembler sur les appareils de plus grande taille. Nous pouvons ensuite utiliser une requête média pour appliquer CSS uniquement lorsque le navigateur est plus large que celui que nous avons défini. Fondamentalement, les écrans plus petits vont regarder d'une manière et les plus grands écrans peuvent avoir des mises en page et des styles différents. Si nous revenons à Inspecter et ouvrez les outils de développement, nous pouvons cliquer sur cette division ici et rendre le site plus petit ou plus grand et nous pouvons également voir en haut que nous pouvons voir la largeur du navigateur. Cela nous permet de voir une largeur d'écran où notre contenu commence à être hors de propos pour les appareils de plus grande taille. Nous pouvons voir pour les petits appareils cette approche pleine largeur fonctionne bien. Cependant, si nous étirons le navigateur à environ 1000 pixels, il semble qu'il soit un peu plus large, les choses commencent à sembler un peu tendues et ont besoin d'un changement. C' est là que les requêtes multimédias entrent en jeu. Les requêtes de médias nous permettent d'appliquer certaines propriétés CSS uniquement si une condition est vraie. Par exemple, nous pouvons modifier les styles ou les mises en page pour les appareils en mode paysage ou portrait ou nous pouvons définir une largeur minimale ou maximale pour appliquer la requête multimédia. Il y a aussi beaucoup d'autres conditions que nous pouvons définir et il y aura plus de liens dans le téléchargement des ressources pour voir certaines d'entre elles aussi. Passons aux feuilles de style et commence à les ajouter à notre site. Ouvrons le code Visual Studio et ajoutons notre requête multimédia. Pour définir une requête multimédia, nous pouvons utiliser le type de média libre CSS en utilisant @media. En bas en bas ci-dessous sont tous nos styles, allant ajouter @media et puis tout comme le style ci-dessus, cela avait son propre ensemble d'accolades. Ensuite, après @media, nous pouvons ajouter quelques crochets pour ajouter la condition où cette requête multimédia s'appliquera. Je veux que ces styles s'appliquent une fois que le navigateur atteint une largeur minimale de 1 000 pixels. Rappelez-vous d'avant que je commençais à avoir l'air peu exagéré de cette taille. C' est pourquoi je l'ai réglé sur 1 000 pixels. N' hésitez pas à changer votre taille en fonction de votre site. Ensuite, nous pouvons ajouter nos styles CSS dans ces accolades, comme nous l'avons toujours fait. Je vais commencer par définir le poids maximum du corps à environ 1 600 pixels. Cela empêchera le contenu d'être trop étiré lorsque nous arrivons à de très gros moniteurs. On peut le faire dans le corps. Je vais définir la largeur maximale de 1 600 pixels. Cela limitera la taille du site Web afin que les choses ne soient pas vraiment étirées sur les grands moniteurs. Ensuite, nous pouvons définir les valeurs de marge. Je vais le faire avec marge zéro auto. Zéro n'ajoute aucune marge en haut et en bas. Aussi fera automatiquement la marge sur la gauche et la droite pour être égale ce qui signifie que le site sera au centre de la page quand il est plus de 1.600 pixels. Enregistrez cela et vous ne remarquerez aucune différence sur ma version parce que l'écran est assez petit. Mais la marge zéro automatique fera que cela se trouve au centre sur les grands moniteurs. Maintenant, rappelez-vous des diapositives plus tôt, nous avons parlé de la façon dont les requêtes multimédias peuvent être utilisées pour modifier les mises en page à l'aide de flexbox. Eh bien, c'est le moment de les voir en action. Plus de 1 000 pixels, nous pouvons changer la direction de flexion dans l'en-tête en ligne, juste en dessous du corps et nous assurer que cela se trouve toujours dans les accolades de la requête média. Cibonnons l'en-tête, puis définissons la direction de flexion à la ligne. Ensuite, allez plus et rafraîchissez. Cela signifie que sur les grands écrans, notre contenu d'en-tête n'est plus empilé l'un sur l'autre. Nous voyons maintenant que le contenu est côte à côte. Si nous revenons en dessous de 1 000 pixels, nous pouvons voir que les styles d'origine s'appliquent toujours de sorte qu'ils sont stockés sous forme de colonne. Retour aux appareils de plus grande taille. C' est mieux, mais les éléments de la liste sont toujours empilés. Il serait mieux si les éléments de la liste étaient en ligne. Nous pouvons changer le type d'affichage pour être inline-block pour y parvenir. Cibonnons l'en-tête, les éléments de liste, puis tout ce que nous avons à faire est de définir le type d'affichage pour être inline-block. Nous allons enregistrer ça et ensuite nous rafraîchir. Maintenant, je peux voir que nous avons les éléments de la liste en ligne. Par défaut, le type d'affichage des éléments de liste est défini sur bloquer, ce qui signifie que les éléments démarreront en ligne. Inline-block permettra à cet élément particulier d'être mis en accusation l'un à côté de l'autre. Continuons à travailler dans cette section d'en-tête. En dessous de l'en-tête li, je vais cibler deux éléments, abord l'en-tête h1, qui est le titre du site principal, puis séparé par une virgule, nous pouvons également cibler le nav d'en-tête. C' est juste un moyen pratique de cibler deux éléments distincts et d'appliquer les mêmes styles aux deux. Je vais définir la valeur flex pour être un. Réglez le flex à un pour le h1 et aussi le nav assurera que les deux prennent une quantité égale d'espace. Enregistrez cela et puis actualisez et maintenant nous pouvons voir l'en-tête, titre, et aussi la navigation, il prend le même espace. La valeur flexible décrit la façon dont un élément va croître ou se rétrécir pour s'adapter à l'espace disponible. Si, par exemple, nous définissons le nav pour avoir une valeur flexible de deux, il essaierait de prendre deux fois l'espace disponible du h1. Maintenant, chaque élément prend la même quantité d'espace, nous pouvons couler l'en-tête dans la gauche et également couler les liens de navigation vers la droite. Commençons par le titre de niveau 1. En-tête, h1, nous avons utilisé text-align avant pour le centre. Mais cette fois, nous allons définir l'alignement pour être à gauche, puis rafraîchir et maintenant nous pouvons voir que le titre est poussé vers la gauche. La même chose peut également être faite avec le nav d'en-tête. Mais bien sûr, cette fois, nous devons définir la ligne de texte pour être la bonne. Donnez cela une sauvegarde et maintenant nous devrions voir les liens sur le côté droit. Cela nous donne maintenant un joli en-tête, chaque côté prenant une quantité égale d'espace et coule dans le bord de la page. Si nous redimensionnons le navigateur en dessous de 1 000 pixels, nous pouvons voir que les styles d'origine s'appliquent toujours. Nous avons toujours l'en-tête empilé l'un sur l'autre. Maintenant, c'est notre page de destination complète. Félicitations pour avoir été aussi loin, et je te verrai dans la prochaine vidéo. 19. Feuilles de styles externes: Jusqu' à présent sur notre site, nous avons ajouté des styles à l'intérieur de cette section de tête, entre les balises de style. Ceci est connu comme une feuille de style interne et est un moyen de styliser une page particulière. Il existe aussi un autre type que nous pouvons utiliser appelé feuilles de style externes. Le CSS l'écrira exactement de la même manière, mais le placera dans son propre fichier séparé. Cela a quelques avantages ; d'abord, il réduit la taille du fichier HTML. Il nous permet également de séparer le HTML du CSS pour une maintenance facile. De plus, nous pouvons également réutiliser les mêmes styles sur plusieurs pages. Pour ajouter une feuille de style externe, tout ce que nous devons faire est créer un nouveau fichier à l'intérieur de notre projet. Ouvrons le dossier du projet. Cela peut être placé n'importe où, mais je vais ajouter un dossier CSS. C' est pratique si vous voulez ajouter plus de feuilles de style plus tard, alors créons un nouveau dossier appelé CSS. Ensuite, nous pouvons ajouter notre nouveau fichier CSS à l'intérieur d'un Visual Studio. Nous allons également ouvrir la barre latérale, puis nous cliquons sur le dossier CSS, puis cliquez sur le nouveau fichier. Nous allons appeler ceci le style.CSS. Le nom de fichier est à nous, mais il doit avoir l'extension CSS point. Maintenant, incluez tous les styles de la section tête de notre page d'index. HTML, sélectionnez tous les styles, y compris la requête multimédia jusqu'au bas. Alors découpez les styles, puis enregistrez cela et collez-le dans le nouveau style. Fichier CSS. Donnez cela un Save et maintenant si nous revenons à la page d'index, nous n'avons plus besoin des balises de style, donc nous pouvons les supprimer. Une chose dont nous avons besoin, c'est d'un nouveau lien. Ce lien va faire un lien vers notre feuille de style et il est similaire à celui que nous avons ci-dessus, le lien vers nos polices Google. Ajoutez ce lien dans, c'est juste une balise d'ouverture, il n'y a pas de balise de fermeture, puis aux attributs rel. Ceci spécifie la relation entre les documents en cours et les documents liés. Dans ce cas, c'est une feuille de style. Ensuite, nous ajoutons un deuxième attribut, qui est le href. Le href est l'emplacement de notre fichier, et c'est le même attribut que nous avons utilisé dans ces liens ci-dessous. Parce que c'est dans le dossier CSS, nous allons ajouter le css/style.css. Maintenant, si nous sauvegardons cela et passons au navigateur, nous allons ouvrir le projet et puis actualiser. Nous pouvons maintenant voir que les styles ont toujours pris effet, mais l'image d'arrière-plan est manquante. Si nous passons au fichier style.css, puis si nous localisons l'image d'arrière-plan, nous pouvons jeter un oeil pourquoi. Tout dépend de l'URL de l'image. Le chemin du fichier était correct auparavant car le style était dans la page d'index. Ce chemin de fichier est relatif au fichier dans lequel nous sommes, cela signifie à partir de la page d'index, nous avons juste besoin d'aller dans le dossier images et l'image était là pour nous. Maintenant, ce style est à l'intérieur du dossier css. Nous devons utiliser la barre oblique à points en face du chemin du fichier. Cette barre oblique en points indique au navigateur de rechercher un niveau, qui signifie qu'il sautera hors du dossier CSS et dans le niveau racine où se trouve la page d'index. Une fois que nous sommes de retour au niveau de la page d'index, nous pouvons ensuite retourner dans le dossier des images comme avant. Enregistrez cela et actualisez, nous devrions maintenant voir que l'image d'arrière-plan est de nouveau en place et notre feuille de style externe fonctionne maintenant. 20. Ajouter la page du blog: la page de Londres terminée, passons maintenant à la création de la page de blog. Une grande partie de la structure de base, comme la section de tête, est similaire sur l'ensemble du site Web. Nous allons également réutiliser la même habitue. Cela signifie que nous pouvons dupliquer ou copier et coller la page d'index existante pour nous lancer. Faisons ça dans notre éditeur de texte. Je vais à Commande ou Contrôle C, puis Commande V pour copier et coller cette page d'index, puis nous voulons renommer ce fichier, le point de blog HTML. Rappelez-vous aussi, que nous construisons cette page de blog bien que je vous ai montré des techniques à utiliser tout en les appliquant à mon site, n'hésitez pas à les personnaliser si vous souhaitez sauvegarder votre projet. Maintenant, nous avons deux pages HTML, nous avons notre page d'index pour la page de Londres, puis la page de blog, à laquelle nous allons lier. En fait, tout le code HTML que nous avons pour la page de Londres s'appliquera également au blog. Si nous jetons un coup d'oeil à la version finale et puis sélectionnez le blog, la page est juste la même que la page de Londres avec un blog juste ajouté ci-dessous en bas. L' image n'est pas la pleine taille de l'écran non plus, mais c'est quelque chose que nous pouvons corriger dans le CSS. Revenons au point de blog HTML. Si vous vous souvenez d'avant, nous avons également le lien vers ce point de blog page HTML déjà en place, cela signifie que nous devrions maintenant être en mesure de cliquer sur le lien dans le navigateur pour voir le blog. Sélectionnez un blog en haut, et bien que ce soit la même page, nous pouvons voir que cela est maintenant sélectionné le point de blog HTML. Ici, nous pouvons également voir les avantages de passer à une feuille de style externe. Nous avons maintenant deux pages HTML partageant les mêmes styles. Ensuite, nous allons commencer à créer des articles pour afficher les articles de blog. 21. Créer des publications de blog: Dans cette vidéo, je vais me concentrer sur la création des articles de blog. Comme vous pouvez le voir ici sur le site final, si nous redimensionnons le navigateur, nous voyons le commutateur de mise en page pour les petits écrans à pleine largeur. Nous savons déjà que nous pouvons y parvenir en utilisant flex-box. Pour ce faire, je vais créer des éléments div avec la classe de caoutchouc pour entourer à la fois le blog et aussi la barre latérale. Nous pouvons ensuite définir l'état pour être les parents flexibles et basculer le contenu de colonne en ligne sur des périphériques de taille différente. Mettons ça en place maintenant. Passons au point de blog HTML, puis allons juste en dessous de cette div avec la classe de l'image de voyage. Je vais créer un nouveau div. Les étiquettes d'ouverture et de fermeture, puis nous donner une classe de wrappers. Ensuite, nous allons avoir deux sections à l'intérieur de cela, ce sera une section principale qui va entourer les billets de blog. Ensuite, ce sera une section latérale, qui sera pour la barre latérale. Créons ces deux sections maintenant. D' abord, nous avons la section principale. Ensuite, juste en dessous de cela, nous avons la section latérale. Ajoutez ces deux dans et assurez-vous qu'ils sont imbriqués dans la div avec la classe de wrapper main sur le côté avec l'article, que nous allons utiliser ensuite pour tous les éléments HTML sémantiques que nous avons examinés plus tôt. Maintenant, nous pouvons ajouter l'article pour être le conteneur pour les billets de blog. Tous les articles de blog que nous créons seront dans cette section principale. Ajoutons notre article. En outre, je vais réutiliser la classe d'arrière-plan pour donner au billet de blog le même fond gris cohérent que nous avons déjà utilisé. Ajoutons cette classe d'arrière-plans. Maintenant, c'est juste un cas de construction de ce billet de blog avec des éléments que nous avons déjà utilisés. Commençons par l'en-tête. La section d'en-tête va inclure des informations telles que le nom du billet de blog, aussi quelques informations sur l'auteur et les balises. Ajoutons l'en-tête en haut. Ensuite, ici, je vais ajouter un h 2. Cela va être légèrement plus petit que le titre principal du haut de la page. Ce sera le nom du billet de blog, comme vous pouvez le voir ici. À titre d'exemple, je vais simplement appeler ceci le billet de blog 1, puis je vais créer une liste non ordonnée pour ensuite créer informations sur le billet de blog telles que la base de données créée, les balises, et aussi l'offre. Juste en dessous du titre de niveau 2, ajoutons la liste non ordonnée. Avec quelques articles de liste, nous allons commencer à offrir. Ensuite, je vais utiliser les balises em pour ajouter un peu d'accent supplémentaire sur le nom de l'auteur. Entre eux, je vais ajouter mon nom. Donnons-lui une sauvegarde et voyons à quoi il ressemble. Si nous revenons au projet, sélectionnez le blog, puis faites défiler vers le bas. Maintenant, nous avons l'auteur montré en bas ainsi que le titre du billet de blog. Tout ce que je veux faire maintenant est simplement copier, cet élément de liste et le coller en deux fois de plus. Le second sera pour les tags. Je vais ajouter quelques balises à l'intérieur ici. C' est bon et puis la troisième et dernière date va être créée. Ajoutons juste il y a cinq jours à titre d'exemple et donnons cela une sauvegarde et voyons à quoi cela ressemble. Je vais définir toutes les informations d'en-tête, en dehors de cette section d'en-tête, mais toujours dans l'article. Je vais maintenant créer une nouvelle section. Ce sera pour tout le reste des informations du blog, telles que l'image et aussi le texte. Avant que nous ayons regardé l'ajout d'une image via la propriété d'arrière-plan CSS. Nous pouvons également ajouter des images à l'aide de la balise HTML image. Il s'agit d'une balise à fermeture automatique, ce qui signifie qu'il n'y a pas de balise de fermeture. Donc, tout ce que nous devons faire est d'ajouter les éléments d'image, puis d'ajouter une source. La source sera l'emplacement de l'image. Rappelez-vous d'avant que nous avons ajouté toutes les images à l'intérieur d'un dossier images, sélectionnez le dossier images, puis je veux commencer avec l'image Venice.JPG. Si vous n'utilisez pas les images fournies avec ce cours, serait maintenant un bon moment pour aller chercher 4-5 images différentes et les placer dans votre dossier d'images. Je vais également ajouter un attribut ALT de l'image de Venise. Il s'agit essentiellement d'un repli pour si l'image peut être affichée. Il est également lu par les lecteurs d'écran. Il est généralement recommandé de placer ce texte alternatif dans le cas où l'image ne peut pas être affichée. Ci-dessous, vous voulez ajouter le texte pour le bloc dans le type de p. Bien sûr, n'hésitez pas à écrire un billet de blog si vous le souhaitez. Mais je vais juste ajouter un exemple de texte, et nous pouvons le faire en visitant un site appelé Lorem Ipsum. Je fais juste une recherche pour Lorem Ipsum, puis sélectionnez lipsum.com. Cela nous donnera un exemple ou un texte fictif que nous pouvons utiliser sur le site. Tout ce que nous avons à faire est de descendre et de sélectionner autant de paragraphes que nous le voulons. Je vais juste changer cela en deux paragraphes, puis cliquez sur générer. Ensuite, cela nous donne quelques exemples de texte que nous pouvons copier et utiliser dans notre projet. Collez ceci juste entre les balises p et donnez une sauvegarde. Voyons voir à quoi ça ressemble maintenant. Si nous revenons sur le blog et rafraîchir. Super. En plus de l'en-tête, nous aurons également l'image et aussi l'exemple de texte ci-dessous. La dernière chose que nous voulons faire est d'ajouter un lien vers la section Lire la suite. Comme vous pouvez le voir sur le site fini ici. Juste en dessous de l'exemple de texte et créez un peu d'espace ici. Je veux utiliser des balises A parce que cela va être un lien avec le href et je vais juste garder cela vide pour l'instant. Cela sera utile pour créer un lien vers les articles de blog complets sur sa propre page séparée, puis la fermeture d'une balise. Le texte de Lire la suite. Jetons un coup d'oeil à cela maintenant dans le navigateur, actualiser. Jamais va maintenant aura le lien en bas. Cet article maintenant en place, je vais simplement copier et coller cela dans quelques fois de plus. Copiez l'article complet, puis collez-le en une fois de plus. Je vais juste changer pour les billets de blog 2 et aussi changer l'image de Venise à hike.JPEG. Ensuite, parcourez l'article faire de l'espace et coller à nouveau, donc blog post gratuit. Cette fois, l'image va être lac. Disons que je vais le faire encore une fois. C' est génial pour les articles coller et changer ceci pour être le billet de blog 4 et l'image finale que je vais utiliser est l'éléphant. Enregistrez cela et ajoutez vos images dans, puis allez dans le navigateur une fois que cela est fait, et vérifiez ceci pour les billets de blog. Ainsi, le premier, le second, le troisième, et aussi le quatrième, chacun avec sa propre image unique. Maintenant, nous pouvons voir les quatre articles de blog en place. Le style a besoin d'un peu de travail et la mise en page ne sera pas encore réactive. Mais c'est bon, pour l'instant nous allons corriger cela dans une vidéo plus tard. 22. Icônes de médias sociaux dans la barre latérale: Nous avons maintenant la section principale complétée avec le billet de blog en place. Maintenant, nous voulons passer à la barre latérale et ajouter des boutons de médias sociaux. Les boutons des médias sociaux ne sont pas trop difficiles à appliquer. Il s'agit de certains sites qui nous permettent d'utiliser gratuitement des icônes de médias sociaux sur notre site, tels que Font Awesome que je vais utiliser sur ce site. Commençons par créer une nouvelle section pour la barre latérale. Passons au blog.html. Nous fermerons cette barre latérale pour nous donner plus d'espace. N' oubliez pas que nous avons déjà créé la section latérale pour la barre latérale. Tout ce que nous avons à faire est d'ajouter une nouvelle section. Ensuite, dans la balise d'ouverture de la section, je vais ajouter quelques classes. Tout d'abord, je vais ajouter un widgets appelé barre latérale. Cela nous permettra de le styliser avec le CSS bientôt, ainsi que la classe d'arrière-plan pour garder la couleur d'arrière-plan cohérente sur tout le site. Ensuite, je vais ajouter un titre en utilisant les balises h2. Puis un texto de suivez-moi. Ensuite, nous pouvons ajouter nos icônes de médias sociaux ci-dessous. Je vais ajouter un nouvel élément appelé le hr. Ceci est pour une ligne horizontale, que nous pouvons voir si nous allons au navigateur et puis rafraîchir. Allons à la barre latérale. En fait, il était en bas parce que nous n'avons pas encore ajouté de mise en page. Nous verrons le texte de suivez-moi sur et aussi la ligne à travers le bas. Cela séparera le texte des icônes une fois que vous les aurez mis en place. Comme je l'ai mentionné précédemment, j'utiliserai un site appelé Font Awesome pour fournir les icônes des médias sociaux. Nous pouvons les trouver en visitant fontawesome.io puis pour commencer. Nous cliquons sur l'icône Démarrer en haut, puis faisons défiler vers le bas. Si vous descendez à Télécharger et personnaliser, cliquez sur le bouton Télécharger. Il y a aussi une version payante, mais tout ce que nous avons à faire est de cliquer sur non merci. Il suffit de télécharger Font Awesome 4, qui ne devrait prendre qu'un moment à télécharger. Une fois cela fait, nous pouvons aller aux téléchargements, puis décompresser le paquet Font Awesome. Cet endroit sur le bureau pour l'instant, puis renommez ce tout simplement Font Awesome. Supprimez le numéro de version. Ensuite, si nous allons dans nos projets de blog de voyage, nous pouvons placer cela à l'intérieur du dossier CSS comme ça. C' est parce que ce n'est qu'une feuille de style comme nous avons déjà ajouté pour nos propres styles personnalisés. Ajoutons cela comme avant à l'intérieur de la section de la tête. Ouvrons à nouveau le projet. Revenez à la section de tête et ajoutez-les juste au-dessus des feuilles de style personnalisées. Ajoutons le lien, attribut rel des feuilles de style. Ensuite, le href pour lier au fichier le fichier se trouve dans le dossier CSS. Ensuite, dans le dossier CSS, nous avons le dossier de Font Awesome donc barre oblique avant. Cela a également son propre dossier CSS à l'intérieur. Nous pouvons le voir en sélectionnant le CSS, Font Awesome, puis comme un dossier CSS secondaire à l'intérieur. Ensuite, le nom du fichier vers lequel nous voulons lier est fontawesome.min.css. L' ordre de lier ces feuilles de style est également important. Nous voulons toujours nos propres feuilles de style personnalisées tout en bas. Cela garantit que nos propres styles que nous ajoutons sont ajoutés en dernier. Par conséquent, il remplacera tous les autres styles des feuilles de style ci-dessus. Maintenant, nous avons les icônes ajoutées à notre projet. Revenons à Font Awesome et voyons comment les utiliser. Retour à fontawesome.io. Nous devrions nous en débarrasser. Ensuite, si nous montons aux icônes, nous pouvons faire une recherche pour l'une des icônes disponibles. Par exemple, recherchons Facebook. Nous pouvons voir les résultats de la recherche apparaître en bas. Je vais utiliser l'officiel de Facebook, cliquez dessus. Ensuite, si vous faites défiler vers le bas, nous pouvons voir un élément HTML que nous pouvons utiliser. Copiez cet élément i, puis revenez dans le blog.html. Si on passe à la section de côté. Ensuite, juste en dessous de la règle horizontale, je vais ajouter un div cette fois avec une classe de social. Nous pouvons l'utiliser dans le CSS. Ferme de la div. Ensuite, tout ce que nous avons à faire est de coller les nouveaux éléments. Sauve ça. Vérifions que cela fonctionne bien en rafraîchissant. Vous pouvez juste voir l'icône Facebook en bas. Je veux coller ça dans trois fois de plus. Le second sera fa-instagram. Vous pouvez effectuer une recherche sur le site Font Awesome pour l'un de ces liens. Le prochain, je vais utiliser twitter-square. Puis enfin la place du ravageur. Vérifiez que nous avons orthographié tous ces droits en rafraîchissant le navigateur. Super, donc maintenant nous pouvons voir les quatre icônes en bas. Ils sont assez petits à la minute, mais nous pouvons les rendre un peu plus grands avec une classe Font Awesome de fa-2x que je vais coller dans les quatre liens. Cela fait des icônes deux fois la taille qu'elles seraient normalement. Ça a l'air beaucoup mieux maintenant. J'ai placé ces icônes dans la barre latérale. Je ne vais pas créer de liens vers aucun de mes sites de médias sociaux. Vous pouvez aller de l'avant et le faire en entourant l'élément i avec l'élément a et fournir un lien comme nous le faisons dans les liens dans la section d'en-tête ci-dessus. Vous pouvez ensuite ajouter un attribut href comme nous l'avons fait dans l'en-tête. L' attribut href est juste le même que nous avons utilisé dans l'un des liens de navigation ci-dessus. Cependant, c'est un lien externe. Nous avons besoin d'un lien vers l'URL complète. Une fois que vous avez terminé, assurez-vous de faire une sauvegarde. Maintenant, notre page de blog arrive bien. Ensuite, nous allons terminer le HTML en ajoutant les derniers widgets de la barre latérale. 23. Introduction aux tableaux et aux entités HTML: regardant cette version finie de mon site, je vais maintenant ajouter les widgets de la barre latérale avec les pays à visiter. Ceci est un widget conviendrait à mon blog. Vous pouvez bien sûr choisir bientôt la finance si vous préférez. Cependant, les techniques que nous traiterons dans cette vidéo sont des fondamentaux utiles à connaître. La mise en page du widget sera créée avec un tableau HTML. Les tableaux étaient utilisés il y a longtemps pour la pose de nos sites Web. C' était avant que CSS ne prenne le relais pour le positionnement de mise en page. Aussi longtemps avant la flexbox, que nous utilisons maintenant. L' utilisation de tables pour la mise en page est désormais considérée comme une mauvaise pratique. Cependant, il est toujours utile pour la présentation de données telles que notre liste de pays ou même quelque chose comme un tableau de scores ou de résultats. Pour commencer, ajoutons notre section de la barre latérale, juste en dessous de la section des médias sociaux. Ajoutez une nouvelle section à l'intérieur ici, puis à l'intérieur de la balise d'ouverture, nous pouvons ajouter quelques classes. Tout comme avant que je vais utiliser est des widgets de barre latérale cohérents sur l'arrière-plan. On utilisera les genoux plus tard dans le parcours. A l'intérieur de la section, nous pouvons ensuite ajouter un tableau avec les éléments du tableau. Cela a également une étiquette d'ouverture et de fermeture. Ici, nous pouvons commencer à créer notre table. A l'intérieur, nous pourrions ajouter quelques en-têtes de table. Par exemple, dans une table d'utilisateurs, il s'agit de la ligne supérieure en gras, qui est le prénom, un nom de famille et un e-mail par exemple, en haut de chaque colonne. Créons cet en-tête avec le thead. Ici, nous utilisons les éléments tr. Tr est utilisé pour créer une nouvelle ligne, nous pouvons utiliser plus d'une ligne par seulement besoin du titre des pays à visiter. Je vais juste garder ça comme une rangée. Ensuite, à côté de lui à l'intérieur, vous voyez les éléments. Ceci est utilisé pour les données d'en-tête. Ouverture et fermeture de la balise et que, ici nous pouvons demander le texte que nous voulons ajouter comme titre. Je vais aussi à des endroits dans un psych h2 à l'intérieur, juste pour garder le nom cohérent avec le widget sur les médias sociaux. Ajoutons à la h2 ici avec le texte des pays à visiter. Ensuite, juste après cette section de tête de table ci-dessous, nous pouvons également ajouter le corps de la table avec tbody. Si vous avez du mal à vous souvenir de toutes ces balises, ne vous inquiétez pas. Il y a une section de tête et aussi une section de corps, tout comme nous l'avons déjà utilisé sur son site Web, où nous avons la section de tête en haut, puis la section de corps juste en dessous. Faites défiler les vers le bas jusqu'à la table. Nous pouvons alors commencer à ajouter des données à ce corps de tableau, comme les pays qui veulent visiter. Tout comme cet en-tête de tableau, les données de corps sont placées à l'intérieur des lignes deux. Nous utilisons le même tr pour chaque ligne. Chaque cellule à l'intérieur de la ligne utilise td, pour les données de la table. Ici, nous pouvons commencer par nos pays ou toutes les données que vous voulez mettre dans votre tableau. Je vais commencer par le Mexique. Ensuite, dans la même ligne, je vais ajouter un nouveau td pour quelques données de table plus. Puis à l'intérieur, il faut utiliser le symbole de l'esperluette, le dur puis un, zéro, zéro, trois, suivi du point-virgule à la fin. La première cellule correspond au nom du pays. La seconde peut sembler un peu étrange. C' est ce que nous appelons une entité HTML. Les entités HTML sont utilisées pour afficher des caractères ou des symboles, tout comme la tique que nous voyons sur les sites finis, juste ici sur la droite. Les entités sont également utilisées pour remplacer certains symboles, tels que le symbole inférieur ou supérieur à. Juste comme ça. Si nous devions juste utiliser un symbole inférieur ou supérieur à, le navigateur peut penser que c'est le début d'une balise HTML. Cela pourrait causer des problèmes. À titre d'exemple, moins que ce qui est remplacé par l'esperluette lt, suivi d'un point-virgule. Donnons cela une sauvegarde, puis voyons cela dans le navigateur. Si nous actualisons, retournez à la table, nous pouvons voir qu'il y a notre tique, qui est ce code ici. Ensuite, notre symbole moins que, nous pouvons voir ci-dessus juste ici. Nous pouvons utiliser un symbole supérieur à en remplaçant lt gt puis rafraîchir. Maintenant, vous pouvez voir que le symbole est maintenant le plus grand que. Supprimons ça. Avoir également accès à beaucoup plus de symboles Unicode, en visitant un site Web appelé unicode-table.com. Ici, nous pouvons voir une liste de certains des personnages populaires que nous pouvons utiliser. Ou nous pouvons faire une recherche à, et nous devons faire pour les ajouter, est de le sélectionner, puis copier le code HTML et ajouter ceci à notre projet. Maintenant, nous pouvons voir les infos sur cette première ligne. Tout ce que je vais faire maintenant est de copier et coller dans d'autres lignes. Copiez la section tr. nombre de fois que vous collez cela dépend des informations dont vous avez besoin pour votre thème, collez-le ci-dessous, puis changez le pays. La prochaine que nous allons ajouter est l'Egypte. Ensuite, nous allons continuer avec le pays, ensuite je vais ajouter l'Espagne, puis la Chine. Je vais aussi enlever la tique parce que je ne suis pas allé en Chine, coller plus, changements au Portugal, République Dominique, puis la Thaïlande. Bien sûr, ajoutez autant de lignes que vous le souhaitez pour votre blog. Je devrais ajouter un ou deux de plus, après la Thaïlande, je vais en France, et juste un couple de plus, nous ajouterons le Canada. Je veux retirer la tique du Canada. Puis enfin la dernière rangée, je vais ajouter l'Australie. Donnez cela une sauvegarde, puis vérifions cela dans un navigateur. Ça a l'air bien. Maintenant, nous pouvons voir notre liste de pays tous sur leurs propres lignes séparées. Nous avons également l'entité HTML en tant que tick. Avec ce tableau maintenant terminé est maintenant complète la section côté A pour mon blog. En outre, il s'agit du contenu HTML final maintenant ajouté. Nous pouvons maintenant passer à la prochaine vidéo. Nous allons ajouter un style CSS le long que nous allons regarder dans les pseudo-classes. 24. Stylisation de blog et pseudo-cours: Dans la version finale pour les petits appareils, vous pouvez voir quelques différences par rapport à ce que j'ai jusqu'à présent sans CSS. La version finale, comme vous pouvez le voir ici, a le texte centré, il a une image pleine largeur, et généralement un meilleur espacement. étirant le navigateur plus large, nous pouvons également voir que la requête immédiate est utilisée pour basculer la vue du post empilé l'un sur l'autre, à avoir les billets de blog et la barre latérale côte à côte. Pour faire ce changement de mise en page dans une page blog.html, nous avons déjà un div environnant avec la classe de wrapper, qui est juste au-dessus de la section principale ici. Ce sera notre conteneur flexible. Ensuite, tout ce que nous avons à faire est de changer la direction de flexion de colonne en ligne, pour les écrans plus grands. Ce n'est rien de nouveau, nous l'avons déjà vu pour l'en-tête. Commençons par le point de style CSS pour faire ce travail. En dehors de la requête média, nous pouvons cibler la classe de wrapper. Ajoutez-les juste au-dessus de la requête média, donc dot wrapper, car c'est une classe. Ensuite, comme nous venons de le mentionner quand il est défini le type d'affichage pour être de flex, avec une direction de flexion de colonne. Comme cela est en dehors de la requête média, cela signifie que la direction flexible de la colonne s'appliquera sur les écrans plus petits. En un peu, nous pouvons changer cette direction flex à l'intérieur de la requête média. Sauvegardons et voyons à quoi cela ressemble. Mettez le navigateur à l'échelle vers le bas afin que vous puissiez avoir une meilleure idée. Maintenant, je vais ajouter un peu de rembourrage et de marge, juste pour donner à l'article un peu d'espacement. Sélectionnez l'article et aussi la classe de widget de barre latérale. C' est la classe que vous donnez à tous les composants de la barre latérale. Je vais ajouter un peu de rembourrage à l'intérieur, de 15 pixels, puis aussi une marge, de 15 pixels en haut et en bas, puis zéro à gauche et à droite. Cela ajoutera un peu de rembourrage à l'intérieur de la div, puis une marge au-dessus et ci-dessous pour séparer les billets de blog et aussi les widgets. Donnons ce rafraîchissement. Vous pouvez maintenant voir que cette marge a été appliquée entre chacune des publications. Rappelez-vous que chacun de ces billets de blog a également sa propre section d'en-tête. Nous allons ajouter une couleur d'arrière-plan pour cet en-tête de blog, mais nous ne voulons pas utiliser le sélecteur d'en-tête car cela ciblerait également l'en-tête en haut de la page. Pour ce faire, juste en dessous de cette section de l'article, nous allons cibler l'en-tête de l'article, juste comme ça. En utilisant ce symbole supérieur à, sélectionnez uniquement les enfants directs. Dans ce cas, cela ne ciblera que les éléments d'en-tête, qui est un enfant direct d'un article. Ensuite, nous allons définir la couleur de fond pour être la valeur hexadécimale de d8d8d8, enregistrer et actualiser. Maintenant, vous pouvez voir que cette section d'en-tête a un arrière-plan légèrement plus sombre. Ensuite, l'image, si nous étirons le navigateur un peu plus large, nous pouvons voir que l'image ne correspond pas tout à fait à la largeur de la page. Pour résoudre ce problème, nous pouvons sélectionner toutes les images et définir la largeur à 100 pour cent. Ensuite, actualisez et jetez un oeil à cela, et maintenant nous pouvons voir les flux d'image à 100 pour cent du conteneur. Je vais aussi ajouter un peu de marge aux icônes Font Awesome. Si nous rendons le navigateur un peu plus petit et faites défiler vers le bas, je vais juste ajouter une marge à gauche et à droite, juste pour espacer ces icônes un peu plus. Rappelez-vous Font Awesome avait les éléments i, donc nous pouvons le sélectionner avec i, donc marge zéro en haut et en bas, et cinq pixels à gauche et à droite, puis rafraîchir. Maintenant, nous pouvons voir que nous avons un meilleur espacement entre les icônes. Notre style mobile est presque complet, mais avant de passer à autre chose, je veux vous présenter les pseudo-classes CSS. pseudo-classes sont utilisées pour appliquer le style à un certain état. Un exemple courant est la modification de la couleur d'un lien lorsqu'un utilisateur survole le. Nous pouvons sélectionner les liens avec les éléments a, puis nous utilisons un deux-points, puis ajoutons au nom du pseudo sélecteur, qui dans ce cas est survolant. Chaque fois que l'utilisateur survole un lien, nous allons changer la couleur du lien. Alors mettons ça à une couleur bleue et donnez-nous un coup de pouce. Revenons à la section supérieure, et maintenant nous pouvons voir quand vous passez la souris sur l'un de ces liens, il devient maintenant bleu. Puis enfin, je vais regarder le pseudo-sélecteur de nième enfant. Si nous faisons défiler vers le bas jusqu'au tableau des pays en visite, je veux ajouter un peu plus de rembourrage à gauche de ces tiques. Si nous ciblons uniquement les éléments td dans le CSS, cela s'appliquera également à l'élément td pour le pays aussi. Pour ajouter ce remplissage à la seconde sur chaque ligne, nous utilisons la pseudo-classe enfant nième. Cela prend un nombre comme paramètre entre parenthèses. Ce numéro dans notre cas sera le numéro 2 pour sélectionner les deuxièmes éléments td. Voyons comment nous pouvons le faire. Ciblons la td, et encore séparés par un deux-points, nous pouvons ajouter nième enfant. Comme je l'ai mentionné précédemment, nous voulons sélectionner le deuxième enfant et ensuite nous voulons ajouter du remplissage seulement à gauche de 30 pixels. Sauvegardons et voyons à quoi cela ressemble. Maintenant, nous pouvons voir que les tiques seront légèrement déplacés vers la droite. Ceci est seulement appliqué à la deuxième td, nous n'avons pas de rembourrage supplémentaire sur le premier ; les pays, qui sont également stationnaire qui a le premier enfant et le dernier enfant. Vous pouvez en savoir plus à ce sujet dans le téléchargement des ressources. Cela termine maintenant les styles que je veux ajouter à la vue mobile d'abord pour mon blog. J' espère maintenant que j'ai un super blog à la recherche aussi pour les petits écrans. Maintenant, il est temps de passer à autre chose et d'ajouter les styles finaux pour les appareils plus volumineux. 25. Stylisation de blog pour les appareils plus grands: Votre blog devrait maintenant être en forme vraiment bien. Nous avons maintenant le style CSS terminé pour les appareils mobiles, et il est maintenant temps de compléter le CSS pour les écrans plus grands, y compris un changement de mise en page à l'intérieur de la requête multimédia. Si vous vous souvenez de la dernière vidéo, nous définissons le conteneur ou le wrapper pour avoir le type d'affichage de flex et la direction de flexion de la colonne, qui empile tous les éléments les uns sur les autres. Pour les écrans plus grands, vous voulez que les billets de blog ainsi que la barre latérale aient une direction flexible de ligne. Faisons cela à l'intérieur de la requête multimédia. Juste sous l'en-tête nav, je vais ajouter un commentaire. Rappelez-vous d'avant que nous avons mentionné que commentaires peuvent être ajoutés pour ajouter des notes à nous-mêmes. Ceci est ignoré par le navigateur Web. C' est donc la section du blog maintenant. Nous allons sélectionner le wrapper et changer la direction de flexion pour être rangée, puis actualiser. Maintenant, nous pouvons voir instantanément que les billets de blog et la barre latérale est maintenant dans une rangée. Maintenant, nous allons définir la propriété flex. Nous allons définir la section principale, qui est cette partie de blog, pour avoir une valeur flexible de trois, puis la barre latérale à une valeur flexible de un. Cela signifie que la section blog prendra trois fois l'espace disponible de la barre latérale. Faisons ça maintenant avec le sélecteur principal. Rappelez-vous que ce sont les billets de blog, la valeur flex de trois, puis la section latérale peut avoir la valeur flex de un. Nous allons enregistrer cela, lui donner un rafraîchissement, et maintenant vous pouvez voir que la taille a changé. Je vais ajouter une marge à gauche de la barre latérale trop juste pour créer un peu d'espace entre une barre latérale et les billets de blog, donc margin-gauche de 15 pixels. D' accord. Bien. Ça a l'air beaucoup mieux maintenant. Maintenant, je vais ajouter quelques CSS pour l'en-tête du billet de blog. Nous pouvons cibler cela avec l'en-tête de l'article. Par conséquent, cela ne s'applique qu'à l'en-tête de l'article. Je vais utiliser la propriété flex box pour justifier le contenu. Cela définit comment nous voulons que les éléments soient espacés. L' un des exemples est l'espace entre. Enregistrez cela et donnez-lui un rafraîchissement. Maintenant, nous pouvons voir cela ajoute de l'espace entre le titre et aussi la liste non ordonnée. Nous pouvons également changer cela en espace autour. Jetons un coup d'oeil à ça. Maintenant, nous aurons un espace égal autour des éléments. S' il y avait plus d'éléments à l'intérieur de cet en-tête, ils seraient également espacés également. Justifier le contenu a également d'autres options et il y a des liens disponibles dans les ressources. Maintenant, c'est mon blog maintenant terminé, et je suis content de la façon dont les choses commencent à chercher des écrans plus petits et aussi des écrans plus grands. Rétrécissons simplement le navigateur et voyons la requête multimédia en action. Une fois que nous avons atteint 1000 pixels, nous obtenons un changement de mise en page, donc c'est génial. Je vous encourage à continuer à travailler sur votre propre CSS aussi et à changer les choses pour vous adapter. Même jouer avec la taille des requêtes multimédias et les mises en page si cela fonctionne mieux pour votre contenu. Même avec ce blog maintenant terminé, je veux toujours couvrir quelques choses qui sont utiles pour vous de savoir. Je vais les couvrir dans les prochaines vidéos. 26. Prise en charge du navigateur: Nous avons tous blogué maintenant terminé. Je vais maintenant prendre un peu de recul et de codage, et couvrir certaines choses que vous pourriez trouver utiles lors de la construction du blog, nous avons utilisé beaucoup de HTML et CSS. L' un des défis du développement de sites Web est le fait que différents navigateurs peuvent afficher nos sites Web un peu différemment. Il est toujours préférable de tester votre site Web sur différents navigateurs, tels que Chrome, Safari, Firefox et Internet Explorer, ainsi que des navigateurs plus petits appareils pour vérifier qu'il semble bon sur le centre commercial. En outre, une autre considération est que certains utilisateurs utiliseront différentes versions du même navigateur. Peut avoir la dernière version, tandis que certains auront une version plus ancienne. Il existe un site Web utile appelé caniuse.com. Allons à ça. Ce site Web nous donne des informations sur les navigateurs pause pour différentes versions. Par exemple, si nous commençons par rechercher flexbox, et faites défiler vers le bas, nous pouvons voir sous le sport navigateur qu'il est principalement vert. Par exemple, il est disponible dans toutes les versions de Chrome, et il est entièrement pris en charge. La même chose pour Firefox et la majorité des navigateurs. Maintenant, jetons un coup d'oeil à la grille. Rechercher des grilles. Si nous faisons défiler vers le bas jusqu'au support du navigateur, cette propriété de grille CSS est nouvelle dans flexbox. Peut voir un peu de rouge, ce qui signifie sur pris en charge et certains points partiels dans différents navigateurs. Cela signifie que nous devrions prendre un peu plus de précaution lors de l'utilisation car quelqu'un utilise peut ne pas avoir un soutien total pour cela. À l'intérieur du navigateur. Il y a des outils et des solutions de contournement disponibles pour aider à localiser le navigateur. Si c'est quelque chose qui intéresse, il y a quelques liens utiles dans les ressources à consulter. Il vaut la peine de consulter des sites comme celui-ci, ainsi que de tester sur différents navigateurs pour améliorer l'expérience utilisateur. 27. Introduction aux outils de développement des navigateurs: En plus des tests sur différents navigateurs que nous avons mentionnés dans la dernière vidéo, il est également utile de tester l'apparence d'un site sur différents appareils. La plupart d'entre nous n'avons pas beaucoup de types de tablettes et de téléphones ronds pour tester, donc Google Chrome nous aide avec cela. Si nous allons sur un site Web, le téléphone de n'importe qui, puis si nous cliquons sur l'option « Inspecter » pour ouvrir les outils de développement. Gardez à l'esprit les autres navigateurs auront également leur propre version des outils de développement aussi, mais ils peuvent fonctionner légèrement différent de cela. Si nous cliquons sur l'icône avec le téléphone mobile et la tablette, qui est juste en haut ici, nous pouvons simuler l'apparence d'un site sur différents appareils. Plutôt que de l'avoir Responsive ou divers appareils à sélectionner. Par exemple, si vous cliquez sur l'iPhone 6, nous pouvons voir exactement comment cela rendrait dans un iPhone 6. Vous pouvez voir avec les requêtes des médias, cela signifie que tout semble toujours bien. Cela est particulièrement dû au fait que nous avons conçu ce site pour être mobile abord et construit au-dessus de celui-ci pour les appareils de plus grande taille. Nous pouvons également sélectionner un grand iPad et voir à quoi cela ressemble. Ça a l'air très bien là-bas. Si vous n'avez pas beaucoup d'appareils sur lesquels tester, c'est un bon outil pour voir comment les sites Web ressemblent sur des appareils de différentes tailles. Je vais juste cliquer sur cette icône à nouveau pour revenir à la vue du bureau. Un autre outil utile que nous avons déjà examiné dans ce cours, est la possibilité de sélectionner un élément en cliquant sur cette flèche. Ceci est utile pour trouver des problèmes et le débogage. Par exemple, si vous vous demandez pourquoi certains CSS ne prennent pas effet, nous pouvons alors survoler tous les éléments du site et jeter un oeil à toutes les propriétés CSS qui ont pris effet. Par exemple, si nous cliquons sur le titre de niveau 1, sur le côté droit, nous pouvons voir l'en-tête h1. Nous pouvons également voir la marge, le rembourrage, et aussi voir de quelles feuilles de style elles proviennent. Ceci est utile sur les sites de plus grande taille qui peuvent avoir plus d'une feuille de style. Nous pouvons également les supprimer temporairement et voir à quoi ressemble le site avec ou sans eux. Nous pouvons également ajouter différents styles dans. Changons la couleur pour être rouge, et vous pouvez voir les changements sont instantanément reflétés dans les sites. Cependant, ne vous inquiétez pas trop de casser le site. Une simple actualisation retournera tout à la normale. Les outils de développement sont vraiment utiles et ils peuvent faire beaucoup plus. Mais beaucoup de cela est pour les cas plus avancés. Nous ne le couvrirons pas ici, mais je suis sûr que vous progresserez dans votre parcours de conception web ou de développement, vous passerez beaucoup plus de temps ici. Ensuite, je veux vous montrer un excellent plugin d'éditeur de texte appelé Emmet, qui va vraiment accélérer votre codage et rendre les choses beaucoup plus faciles. 28. Accélérer votre codage avec Emmet: Pendant les projets de cours de grandeur, nous avons codé à la main tous les éléments en HTML. C' est un moyen parfait de s'entraîner et de mémoriser comment les choses fonctionnent. Cependant, une fois que vous avez eu plus de pratique et que vous savez comment les choses fonctionnent, parfois vous pensez que nous devons accélérer notre codage et le plus productif. C' est là qu'Emmet entre en jeu. Emmet est un plug-in pour les éditeurs de texte les plus populaires, ce qui a vraiment aidé à accélérer notre codage et à rendre le travail plus efficace. Si nous allons à la section de téléchargement, nous pouvons voir que l'Emmet est disponible pour la plupart des éditeurs de texte populaires. Je vous encourage à aller de l'avant et à télécharger pour votre éditeur de texte particulier. Aussi souvent la plupart des éditeurs de texte, ont une section de plugin dans les préférences, qui vous permettent d'installer des plugins plus facilement. Cependant, si vous utilisez du code Visual Studio comme moi, il est déjà inclus par défaut. Je vais aller à l'une des pages HTML. Je vais faire défiler jusqu'au corps. Emmet nous fournit quelques raccourcis clavier, ce qui nous permet d'accélérer notre codage. Par exemple, lorsque nous avons commencé ce projet, nous avons tapé toute la section html, y compris la section tête, les métadonnées, le corps, ainsi que les balises html environnantes. Emmet nous offre un moyen facile de le faire. Tout ce que nous devons faire est de taper html:5. Alors on peut voir, on obtient l'auto complète, disant que c'est une abréviation Emmet. Tout ce que nous devons faire maintenant est appuyer sur Entrée ou onglet, puis nous avons une structure HTML de base en place. Je vais juste supprimer ceci et essayer de regarder quelques exemples supplémentaires. Celui qui nous fera gagner beaucoup de temps. Au lieu de taper aucun élément. Tout comme nous le faisons pendant ce cours avec l'étiquette d'ouverture et de fermeture. Tout ce que nous devons faire est de taper le nom des éléments et de nouveau appuyer sur Entrée ou Tab et cela remplit la balise d'ouverture et de fermeture pour nous économiser beaucoup de travail. On peut aller encore plus loin. Par exemple, si nous voulions créer une liste non ordonnée avec un élément de liste déjà à l'intérieur, vous pouvez faire ul, le symbole supérieur à, puis li. Appuyez sur Entrée, et nous pouvons voir cela ajoute automatiquement le li à l'intérieur de la liste. Si vous vouliez plus d'un élément de liste, nous pourrions faire ul, le symbole supérieur et un li, comme nous l'avons fait auparavant. Ensuite, après le symbole étoile, nous pouvons ajouter autant d'éléments de liste que vous le souhaitez. Par exemple, si nous en voulons cinq, nous pourrions le faire. Bien sûr, c'est tellement plus que vous pouvez faire. Je vous encourage vraiment à avoir un jeu autour cela et à utiliser une fois que vous obtenez plus à l'aise avec HTML. Donc je vais enlever ça. Si vous voulez regarder cela encore plus loin et en savoir plus sur les raccourcis. Il y a une bonne documentation sur les sites Web que vous pouvez consulter et en savoir plus sur les abréviations. C' est ainsi que nous pouvons utiliser Emmet pour accélérer le codage. Ensuite, nous allons jeter un oeil aux éléments bloc par rapport aux éléments en ligne. 29. Éléments en bloc ou en ligne: Nous avons utilisé beaucoup d'éléments pendant ce cours sans trop réfléchir à la façon dont ils s'affichent à l'écran. Habituellement, les éléments HTML appartiennent à deux groupes, soit en bloc, soit en ligne. Un élément de niveau bloc commence sur une nouvelle ligne de la page Web et prend toute la largeur disponible. Un exemple de ceci est l'élément P pour afficher du texte. Comme vous pouvez le voir ici, il s'étend sur toute la largeur de l'espace disponible. Un élément div est aussi un élément de niveau bloc aussi, avec beaucoup d'autres que nous allons jeter un oeil bientôt. Suivant est en ligne. Un exemple d'élément en ligne est l'élément image. Les éléments en ligne ne commencent pas sur une nouvelle ligne donc, peuvent être placés les uns à côté des autres, comme vous pouvez le voir ici. Ils peuvent également être placés à l'intérieur d'un élément de niveau bloc. C' est ainsi que nous faisons souvent des choses en utilisant un div environnant. L' élément div est au niveau du bloc, et cela peut contenir à la fois des éléments bloc et inline à l'intérieur de celui-ci. Si nous allons sur le site Web de Mozilla, nous pouvons voir une liste d'éléments blocs et en ligne en bas. Défilant vers le bas jusqu'à la liste des éléments de niveau bloc, nous pouvons voir le pied de page, la forme, côté, l'article, les balises de paragraphe et les tableaux pour n'en nommer que quelques-uns, sont tous des éléments de niveau bloc. Par conséquent, en commençant par une nouvelle ligne par défaut. Ensuite, nous avons les éléments en ligne. Encore une fois, nous pouvons faire défiler vers le bas et voir les éléments en ligne comme une liste. Ce sont des choses telles que les boutons, les entrées, em, et aussi l'image, comme nous venons de l'examiner auparavant. Ces liens sont disponibles dans les ressources si vous voulez regarder de plus près. Bloquer et en ligne est une façon traditionnelle de catégoriser un élément. En HTML5, il y a quelques autres catégories disponibles telles que le flux et le phrasé. Ceux-ci, cependant, ont des règles et des définitions beaucoup plus complexes, donc peut-être seulement moyen de plonger dans une fois que vous êtes vraiment à l'aise avec HTML. Bien sûr, il y a aussi des liens vers cela dans les ressources si vous voulez vérifier cela. Mais comprendre la différence entre bloc et inline est vraiment important lorsque vous travaillez avec HTML. Il vous aidera à mieux exposer votre contenu et vous aidera également à comprendre pourquoi les choses sont placées dans une page d'une certaine manière. 30. Défi final: Félicitations pour être arrivé à la fin de ce cours. Avant de partir, je veux vous laisser avec un dernier défi. J' aimerais que vous reveniez à votre projet et y ajoutiez. Rappelez-vous que nous avons créé le lien « À propos de moi » en haut de la page. Eh bien, je voudrais que vous reveniez en arrière et créez votre propre page « À propos de moi », puis un lien vers elle depuis le menu de navigation principal. C' est tout ce que nous avons déjà couvert. Si vous êtes coincé, il suffit de regarder le reste du projet et je suis sûr que vous trouverez les réponses. Faire ce défi seul, sans mon aide, vous fera penser choses et renforcera également ce que vous avez appris jusqu'à présent. De plus, si vous vous sentez particulièrement créatif, ajoutez également une section de pied de page sur chaque page. Bonne chance et j'ai hâte de voir ce que vous créez. 31. Étape finale: Félicitations, vous avez atteint la fin de ce cours. Espérons que maintenant, vous devriez être plus à l'aise de construire de superbes sites Web en utilisant à la fois HTML et CSS. Vous devriez maintenant en savoir assez pour aller de l'avant et mener à bien des projets plus exigeants, pour vous appuyer sur ce que vous avez déjà appris dans ce cours. Ensemble, nous avons construit un site Web de blog avec votre thème de choix. J' espère que vous avez également réussi à relever le défi d'ajouter la page À propos de moi aussi, ou peut-être même d'ajouter la section photo. J' adorerais que vous partagiez aussi votre projet, fois pour moi et pour d'autres étudiants. C' est un excellent moyen de mettre en valeur vos compétences et d'inspirer d'autres étudiants. Mais ce n'est pas la fin de votre voyage. Construire des sites Web est un processus d'apprentissage continu, mais il peut aussi être très gratifiant. La meilleure façon de continuer à apprendre est de construire plus de sites Web et de continuer à vous défier en cours de route. Si vous n'avez pas de projets avec lesquels vous pouvez vous entraîner, essayez d'en faire un, ou même de copier l'un de vos sites Web préférés. Une fois que vous vous sentirez à l'aise avec HTML et CSS, je vous encourage à apprendre un nouveau langage, tel que JavaScript pour vraiment donner vie à vos sites Web. Pour l'instant, un grand merci de ma part d'avoir suivi ce cours, et j'espère que vous l'avez apprécié, tout en apprenant de nouvelles compétences en cours de route. 32. Vidéo « Suivez-moi » sur Skillshare: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis une certaine connaissance. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare. Aussi, suivez-moi pour toute mise à jour et aussi pour être informé de toute nouvelle classe à mesure qu'ils deviennent disponibles. Merci encore une fois. Bonne chance. J' espère que je te reverrai dans un futur cours.