Créer une carte de visite numérique avec HTML et CSS

1. Introduction du cours: Hey, vous avez peut-être remarqué que la technologie croît de plus en plus rapidement dans presque toutes les industries , et la technologie Web ne fait pas exception. Apprentissage HTML et CSS sont de grandes compétences orteil ont non seulement pour votre carrière, mais aussi juste pour la croissance personnelle. Je suis Nathan Blair. Je suis un développeur Web, et j'ai appris HTML et CSS à partir de tutoriels comme celui-ci. Je peux vous dire par expérience personnelle que vous pouvez le faire aussi. Tout ce qu'il faut, c'est quelques projets amusants, beaucoup de pratique et un peu de conseils pour vous aider à démarrer. Et ce cours apprendra en faisant. Nous allons créer un design HTML et CSS simple qui peut être utilisé comme votre carte de visite numérique . Nous allons commencer par parler de la façon de configurer un projet de site Web sur votre ordinateur. Ensuite, nous allons plonger dans un design avec le style CSS. Je vais vous laisser avec quelques-uns de mes conseils personnels ainsi que certaines choses que vous pourriez vouloir vérifier après le cours. À la fin du cours, vous aurez une page accessible au public et du code que vous pourrez montrer à n'importe qui. Ce cours est pour vous. Si vous avez des compétences de base en informatique, peut-être même des compétences en conception. Mais vous êtes vraiment intéressé à apprendre comment créer votre propre site Web ou comment apporter des modifications simples à un site existant. Vous devez avoir une compréhension de base de la navigation sur votre ordinateur. Vous aurez également besoin d'un éditeur de code d'une sorte ou d'une autre. Maintenant, je préfère utiliser Adam, mais beaucoup de gens aiment le texte sublime ou le studio visuel qui est vraiment à la hauteur de votre préférence. J' ai posté quelques liens vers chacun d'entre eux dans la description du projet, sorte que vous pouvez aller vérifier ceux-ci. Enfin, assurez-vous d'avoir une bonne photo de tête à afficher sur votre page. Ou, si vous préférez, vous pouvez utiliser un logo ou vraiment n'importe quelle image. C' est ton appel. Alors êtes-vous prêt à ajouter des compétences HTML et CSS à votre arsenal ? Si c'est le cas, commençons à enduire 2. Document HTML et syntaxe: loin, accord, prêt à commencer. Apprenons un peu à propos du HTML d'abord. Ce que HTML signifie est le langage de balisage hypertexte, et vous pouvez lire sur beaucoup d'histoire qui est allé dans H deux mil. Mais fondamentalement, c'est la pierre angulaire du Web tel que nous le connaissons. Si vous regardez une page Web aujourd'hui et que vous affichez cette source en cliquant avec le bouton droit de la souris, vous pouvez voir le code HTML qui entre en arrière-plan. Je ne sais pas si vous pouvez voir sur cette taille d'écran, mais HTML est là. Vous avez quelques balises HTML de base, et puis vous avez plein de jumbo sur. Ce site ignorera cela pour l'instant, mais tout sur le Web est en quelque sorte forme ou forme HTML. Donc, pour commencer ce projet, nous devons d'abord nous assurer que notre environnement est correctement configuré . Allons-y et ouvrons une nouvelle fenêtre de recherche. Et vous savez, ce que j'aime faire, c'est que si vous allez souvent dans votre dossier personnel, vous verrez le dossier Sites. Si vous n'en avez pas encore, vous pouvez en créer un, alors allez-y et ouvrez-le et nous allons créer un dossier pour notre projet. Je recommande de créer un dossier de projet pour conserver tous vos fichiers de projet dans. C' est donc juste un peu plus organisé et plus facile à gérer lorsque vous travaillez avec des sites Web. Ceci est également communément connu sous le nom de route du site Web de l'itinéraire du site. Donnons-lui un nom simple. Je vais juste aller avec un tutoriel et un pas de plus. Je vais juste me faciliter les choses et ajouter ça à mes favoris. Passons maintenant à l'étape suivante, qui est la création de notre document. Donc, pour cette étape, vous allez avoir besoin d'un type d'éditeur de code comme je l'ai mentionné, vous pouvez choisir le logiciel qui vous plaît le plus. Allons de l'avant et ouvrons notre éditeur de code et créons un nouveau fichier. Je vais aller de l'avant et enregistrer ça dans mon nouveau dossier de tutoriels. C' est là que l'enregistrement du dossier et des favoris est pratique maintenant. La norme pour les documents de moulin HT est que votre page d'accueil va être appelée index, puis l'extension du fichier est dot html Bon et cliquez sur. Sauvegardez maintenant. Très d'abord, tang nous avons besoin est une balise qui indique au navigateur quel type de document. C' est donc nous allons taper le type doc et immédiatement avec un éditeur de code, vous allez voir qu'il suggère des balises pour vous. Il est intelligent et sait ce que vous tapez, et vous pouvez soit cliquer dessus ou cliquer sur l'onglet. Très bien, donc la prochaine balise très basique est une Tech html. Et cela indique au navigateur que c'est là que nous commençons notre HTML et avec chaque balise à partir de ce moment, nous avons besoin d'une balise ouverte et fermée. Donc celui-ci ouvre notre étiquette. Le suivant, en utilisant une barre oblique, le ferme. Donc maintenant, nous avons le HTML ouvert et fermons un mâle elle. Toutes les balises HTML suivent ce principe de base, généralement dans une balise HTML. Vous avez une tête et un corps dans la tête. C' est là que toutes les méta-informations vont à propos de votre page Web, choses comme le titre de votre page, et vous pouvez voir la page d'accueil remplie automatiquement. Mais donnons-lui un titre différent. Disons notre nom. Je vais taper Nathan Blair. Ici, nous allons et pas dans le corps. C' est là que va tout votre HTML personnalisé. C' est là que vous allez construire le site que vous allez voir à l'écran. Maintenant, avant d'aller de l'avant, jetons un coup d'oeil à d'autres balises méta que vous pouvez ajouter à la tête. Ce que j'aime faire est de garder des notes sur ces choses parce que je ne me souviens pas nécessairement de toutes les différentes balises méta. Et en fait, il y a une chose qu'on a ratée. Nous pourrions également ajouter la langue à notre balise HTML. Allons-y et mettons-le là-dedans. Donc ça dit juste au navigateur, Hey , écoutez, ce document sera en anglais, accord, regardons quelques autres balises méta ici. Vous voyez la balise meta probablement 90% du temps que vous allez utiliser le caractère d'aide UTF dit. Donc, je recommanderais juste de rester avec cela. Et la prochaine balise méta que nous allons ajouter est pour le design responsive. Nous aborderons cela un peu plus tard, mais cela garantit simplement que votre page Web s'adapte correctement lorsqu'elle est affichée sur un iPhone, un iPad ou un grand écran. Ajoutons quelque chose au corps juste pour le plaisir. D' accord, sauve-le. Et hé, jetons un oeil à ce que nous avons. Alors, comment affichez-vous un document HTML à partir de votre ordinateur. Eh bien, c'est assez facile. Allons au document et faites-le glisser dans votre navigateur. Et hé, regarde ça. Voilà notre monde de bonjour. Si vous regardez dans le titre, vous verrez le texte de votre titre et vous avez un document HTML de base. Donc, cela couvre la syntaxe HTML de base. Ajoutons quelques éléments dans notre prochaine vidéo. 3. Éléments de base : Éléments et paragraphes: Bon, donc nous avons notre beau texte bonjour monde et une grande page vide. Remplissons-le un peu avec quelques éléments de texte de base. Donc, dans notre éditeur de code, avons un titre. C' est l'une des balises de base que chaque navigateur reconnaît. Allez-y et tapez H un dans votre corps et fermez-le aussi. Et au milieu de cette étiquette, on va taper le titre. Je vais utiliser mon nom pour ça. Sauvegardons ceci et vérifions-le. Actualisez la page. Et hé, regarde ça. Nous avons un peu de style. Il sort de la boîte parce que chaque navigateur sait ce qu'est une balise H one. Et il y a aussi d'autres balises de titre. Si vous frappez H 2, vous avez deux étiquettes H 3 h 4. La liste descend jusqu'à six, et chacun est livré avec sa propre taille. Ainsi, comme vous pouvez le voir, mesure que le nombre augmente, le titre devient plus petit et le style de ces titres peut être modifié avec CSS, ce qui est ce que nous allons aborder plus tard dans cette leçon. Maintenant, nous n'avons pas besoin de toutes ces rubriques, mais gardons H 2. Et dans notre H 2, ce sera notre sous-rubrique. Et je pense que c'est un bon endroit pour mettre votre poste ou d'autres sous-titres que vous voudriez sur votre carte de visite. Donc je vais juste mettre développeur Web. Sauvez-le et vérifions. Super. Ok, jetons un coup d'oeil à une autre étiquette. C' est la balise P, qui est abrégée pour paragraphe. Et voyons à quoi ça ressemble. Et beaucoup d'éditeurs Vous pouvez simplement taper Boram et il vous donnera Laura fait du texte. Comme vous voyez, c'est une longue chaîne ici, mais c'est génial pour échantillonner des choses. Comme vous pouvez le voir, le style d'une balise de paragraphe est beaucoup plus simple. Comme vous pouvez le voir, C' est prévu pour les paragraphes que vous avez pris. Maintenant, dans notre cas, nous n'avons pas besoin d'un paragraphe entier de texte sur notre carte de visite. Je veux dire, je suppose que vous êtes certainement le bienvenu pour le faire, mais je pense que c'est un endroit approprié pour mettre notre adresse e-mail. Bon, sauve-le. Jetons un coup d'oeil. D' accord. Super. Ça ne ressemble pas encore beaucoup, mais je te promets que tout va se réunir. On doit juste faire un pas à la fois. Comme nous l'apprenons. Une chose à garder à l'esprit lors de la conception d'une page Web est la sémantique. Qu' est-ce que ça veut dire ? Eh bien, les navigateurs et autres appareils qui lisent votre page Web vont s'attendre à certaines choses de différentes balises sur votre page. Par exemple, dans une balise de titre, on s'attend à ce que ce soit un en-tête d'une sorte ou d'une autre. Idem avec un H deux dans un paragraphe. Certains appareils, tels que les lecteurs verts, utiliseront la sémantique pour naviguer sur un site Web. Il est donc important de garder à l'esprit le contenu que vous mettez dans ces différentes taxes HTML . Dans notre prochaine leçon, passons sur les balises html mawr que vous avez disponibles et créerons une liste avec 4. Tableaux et listes: façon. Nous avons donc appris sur les éléments de texte de base. Mais quelles sont les autres façons de structurer notre texture Information sur le Web ? Eh bien, un exemple est une table. Nous n'allons pas utiliser une table dans ce projet particulier, alors n'avez pas l'impression de devoir taper tout ça. Mais c'est l'un des éléments HTML de base que vous devriez connaître, donc j'aimerais le revoir très rapidement. Donc, dans une table, vous avez quelques sections standard. Vous avez une tête en T, un corps en T. Et si vous voulez un pied T maintenant, dans ces sections, il y a toujours un TR, qui signifie une rangée de table et dans ce T d et le téléviseur est chaque cellule individuelle. Imaginons un tableau HTML rapide pour que vous puissiez avoir une idée de la façon dont ils fonctionnent. Faisons juste quelques en-têtes de base et le corps allait faire la même chose et ensuite la même chose dans le pied de page T. Et juste pour gagner du temps, je vais copier d'ici et le coller. Mais faisons des cordes différentes. Bon, voyons à quoi ça ressemble. D' accord, super. Donc on a de la nourriture. Barbat dans l'en-tête de la table e. Nous avons 123 et notre première rangée, puis ABC dans le pied de page. Maintenant, si nous avions une table plus complexe ou une table réelle, nous verrions probablement plus d'une ligne. Donc, il ressemble à quelque chose comme ceci, et chacun peut avoir ses propres valeurs afin que la table puisse devenir de plus en plus longue. Vous pouvez ajouter d'autres colonnes qui vous plaisent. Il y a beaucoup plus que vous pouvez faire avec les tableaux HTML. Je ne vais pas entrer dans tout ici dans ce tutoriel, mais sachez juste que les tables sont une excellente ressource pour lorsque vous construisez votre site Web. Voici quelque chose que nous allons utiliser dans notre projet. Il y a autre chose que vous pouvez utiliser pour afficher des informations structurées, et c'est une liste. Il existe deux types de listes. En HTML. Il y a une liste ordonnée, qui est le tag ol, et il y a aussi la liste A Norden ul et chacun d'entre eux. Il y a une autre balise imbriquée pour chaque élément. C' est un élément de liste, ou L I. Voyons quelle est la différence entre ces deux types de listes. On va ajouter des objets à chacun, et voyons, hein ? Ainsi, comme vous pouvez le voir, une liste ordonnée est ordonnée et en tant que nombres sur une liste ou n'est que des points à puces. J' ai tendance à utiliser beaucoup la liste A Norden, mais il y a certainement des applications pour une liste ordonnée aussi. Pour ce projet, nous allons utiliser le A Nordeste. Cette liste nous donnera un bon format pour énumérer tous les différents profils que nous voulons lier à partir de notre page Web en tant qu'espace réservé. Je vais juste mettre le nom de chaque site Web que je veux lier à l'un de mes sites de codage préférés , comme vous l'avez vu avant, était obtenir hub. Donc je vais ajouter ça ici. Je vais également mettre allongthen et Twitter. Disons ça et voyons à quoi ça ressemble. Bon, on y va. Maintenant, comme nous avançons avec ce tutoriel va ajouter des liens vers ces éléments. Mais pour l'instant, on a un bon départ. Tu sais quoi ? En fait, je pense que c'est un bon sujet pour la prochaine vidéo. Allons de l'avant et ajoutons un peu de longueur à nos articles. Vieux 5. Liens et images: Maintenant que nous avons nos éléments de liste, nous devons ajouter quelques liens. Alors allons-y et nettoyons un peu ça. D' abord, j'aime Teoh. Gardez tout sur des lignes séparées juste pour le rendre un peu plus lisible pour moi enveloppant ce texte Get hub. Je vais ajouter une balise de lien. Un lien est en fait appelé dans la balise d'ancrage, qui est juste une ancre si ouverte Fermer l'ancre au milieu est get hub. Maintenant, nous devons ajouter l'u. R l entendre la façon dont nous faisons qui est d'utiliser un attribut que nous allons utiliser spécifiquement les attributs H ref Beaucoup d'éléments dans H e mail ont des attributs, et ce ne sont que des bits d'informations que vous pouvez ajouter à la pour les faire se comporter d'une certaine manière ou changer différents aspects à leur sujet. Ces attributs en particulier, ajoute un l votre pour votre lien. Donc dans ce cas, je vais ajouter mon u R l à mon profil get hub. Il est recommandé d'inclure le https à l'avant afin que le navigateur ne soit pas confus quant à savoir si ce site Web fait partie de votre serveur ou s'il va ailleurs . Bon, Alors maintenant que j'ai ajouté mon lien. Essayons. Allez-y et actualisez la page et vérifiez-la. On a un lien. Voyons maintenant si ça marche. Là, c'est mon profil get hub. Mais comme vous pouvez le voir, il l'a ouvert dans la même fenêtre du navigateur. Et vous ne voulez pas nécessairement que tout votre trafic disparaisse de votre site dès que quelqu'un accède à l'une de vos autres pages. Alors revenons en arrière et changeons un peu ça. Il existe un autre attribut qui pourrait être utilisé sur une balise d'ancrage appelée Target. Et non, ce n'est pas référencer le centre commercial populaire qui est en fait dire au navigateur quelle fenêtre utiliser. Donc on va dire blanc. Et cela signifie essentiellement que nous voulons que cela s'ouvre dans un nouvel onglet. Sauvegardons ça et essayons-le. Actualisez la page et cliquez sur notre lien. On y va. Tu as un nouveau robinet. Faisons la même chose pour les autres liens. Je vais juste copier et coller pour rendre ça un peu plus facile, et on va les remplacer par des URL différentes. Et maintenant, changeons le texte dans les balises d'ancrage. D' accord. Voyons à quoi ça ressemble. Excellent test. Les liens n'ont pas longtemps été, mais cela fonctionne. Très bien, Super. Maintenant, nous avons trois liens. Allons le monter d'un cran et vraiment faire quelque chose de fantaisie. On va ajouter une image à cette page. C' est un autre élément qui utilise des attributs. Jetons un coup d'oeil. Ajoutons notre image en haut de notre document. La balise image. C' est juste que je suis G. Et typiquement nous utilisons deux attributs avec cette balise. Parlons d'abord un peu des anciens attributs. Ancien est un texte alternatif. La raison. Nous avons besoin d'un autre texte. Des images étrangères ? Eh bien, certaines personnes sur le Web ne peuvent pas voir d'images. Ils sont aveugles. Ainsi, les lecteurs d'écran peuvent lire ce texte alternatif et comprendre quelle image se trouve à l'écran. C' est donc génial d'ajouter de beaux textes descriptifs dans vos propres attributs. Laissons-le vide jusqu'à ce que nous sachions quelle image nous ajoutons. Maintenant, c'est là que tu vas avoir besoin d'une image ou d'un logo à mettre sur ta carte de visite. J' ai déjà mis en place mon image de profil standard que j'ajoute partout sur le Web, et vous allez la mettre directement dans votre dossier de tutoriels où votre racine Web va être . Revenons à notre code. Donc, comme nous savons que c'est sur notre racine Web, nous pourrions même le voir ici dans notre projet. On peut juste taper le nom du fichier ici. Sauvegardons ça et jetons un coup d'oeil. Oh, hé, regarde ça. C' est moi. Donc on a mis notre image en place. Maintenant, ajoutons un vieux texte. visage souriant de Nathan Blair. Si vous actualisez, vous verrez que rien n'a changé, mais un lecteur d'écran sera en mesure de lire ce texte, et tous les visiteurs aveugles de votre site Web sauront ce qui se passe. C' est génial. Donc, nous avons des images. On a du texte stylé. On a des liens. Continuons à aller de l'avant et ajoutons un peu de structure à cette page. 6. Éléments de blocage et HTML Semantic: très bien, nous ajoutons du contenu à cette page. C' est super, mais il serait bon de séparer le contenu juste pour que nous ayons un style plus facile, mais aussi pour la sémantique. Nous avions déjà mentionné la sémantique. Regardons un peu plus en profondeur sur la façon dont vous pouvez améliorer votre sémantique sur votre site Web. Si vous jetez un oeil aux docks Web indiens, c'est la documentation Web très courante faite par Mozilla. Ils vont dans beaucoup de détails sur toutes les différentes balises sémantiques que vous pouvez utiliser sur le Web et ce pour quoi ils sont utilisés. Je ne vais pas entrer dans tout ça, mais comme vous pouvez le voir, il y en a tellement. Ils parlent de la section de contenu, l'aide d'un côté, de pieds de page et d'en-têtes. Ils ont du contenu de texte. La liste continue et continue. N' hésitez pas à parcourir ce site. Jetez un oeil à tous les différents composants Web et à toutes les choses que vous pouvez utiliser sur votre site Web. Mais passons simplement en revue une mise en page Web de base que vous pourriez voir sur Internet aujourd'hui. Typiquement, sur un site Web, page a un en-tête, et à l'intérieur de cela, généralement il y a une barre de clave au sommet du puits, il y a des éléments sémantiques que vous pouvez utiliser tels a en-tête et sieste. Ci-dessous, il y a généralement la section principale du site Web, et à l'intérieur il y a généralement un article principal comme des textes ou un post en bloc. Et il y a peut-être une barre latérale, qui pourrait être un côté, puis en dessous de tout. Il y a généralement un pied de page. Tous ces éléments sont des balises HTML réelles que vous pouvez utiliser pour séparer votre site Web et rendre plus sémantique. Jetons donc un coup d'oeil à certains des éléments que nous pouvons utiliser pour séparer notre page, même si ce sera une page très, très simple. On ne peut pas utiliser beaucoup d'entre eux, mais il y a un couple qu'on peut jeter un oeil. Donc, de retour dans notre code, commençons par simplement envelopper tout dans ce qu'on appelle un élément de bloc. Et la façon dont nous en créons un, c'est d'utiliser le DIV Tech. Une balise DIV est fondamentalement juste un bloc sur la page. C' est très utile pour coiffer, déplacer les choses, les positionner à l'endroit que vous voulez sur la page. Maintenant, dans beaucoup d'éditeurs de code, vous remarquerez qu'un attribut de classe apparaît qui sera utilisé plus tard avec notre CSS au lieu de classe. Changeons cela en I d. Tout comme ça et I d attributs est à nouveau utilisé principalement pour CSS, parfois JavaScript, qui est beaucoup plus avancé que nous n'avons besoin d'aller dans. Mais c'est essentiellement un moyen d'identifier un élément spécifique sur la page, et ils sont toujours uniques. Donc, vous ne voulez jamais d'idées qui sont les mêmes sur différents éléments de la page. Ils devraient toujours être uniques. Dans ce cas, c'est notre rappeur de site. Il n'y en a qu'un sur la page, Alors appelons-le que j'aime parfois faire cela pour juste garder une trace de ce pour quoi les éléments sont utilisés. Maintenant, ajoutons tout notre contenu dans ce bloc. Et regardons ce qui se passe quand nous faisons cela absolument rien car une balise DIV n'a pas de style inhérent. Pour la plupart, vous ne remarquerez aucune différence, ajoutant ceci, mais cela nous donnera une meilleure structure pour quand nous allons dans le style plus tard. Revenons à notre code et à quelques autres éléments maintenant serait génial de dire au navigateur quel est notre contenu principal. quoi devrions-nous nous concentrer ? Eh bien, en gros, la voiture entière. C' est notre élément principal, alors nous allons juste l'envelopper dans ce grand. Maintenant, nous avons un élément principal avec tout notre contenu, et c'est dans un site. Rappeur Si vous revenez à votre page et actualisez. Pourtant, rien ne s'est encore passé. Main est un peu comme un élément de bloc. Il n'a pas de style initial, mais il est idéal pour la structure. Ajoutons un autre I D à cette balise principale. On l'appellera carte. Et tu sais quoi ? Éliminons un peu notre contenu. Créons quelques balises DIV supplémentaires. Créons un pour notre image et l'autre pour le texte. Et cette fois, nous allons utiliser l'attribut de classe pour les nommer. Nous allons le nommer image, bloc et bloc de texte si vous l'enregistrez et regardez toujours pas de changement. Je sais qu'il peut sembler que vous ne faites rien en ce moment, mais je vous promets que cela vous sera utile dans nos prochaines étapes. Dans la prochaine leçon, on va faire des trucs amusants. Nous allons entrer dans le style CSS 7. Commencer avec CSS: Très bien, donc si vous avez suivi le long jusqu'à présent, nous avons un excellent petit document HTML ici, mais c'est un peu ennuyeux. Eh bien, dans cette prochaine étape, c'est là que les choses deviennent un peu plus intéressantes parce que nous allons appliquer style avec une chose appelée C. S. Et ce que CSS signifie, c'est des feuilles de style en cascade. Il s'agit d'une forme de balisage que les navigateurs utilisaient pour appliquer des styles aux sites Web, et il utilise un modèle en cascade, ce qui signifie que les styles en haut de la feuille vont être remplacés par des styles concurrents au bas de la feuille. Allons de l'avant et jetons un coup d'œil à certaines des différentes façons d'ajouter du CSS à votre document. Maintenant. Une façon de le faire est simplement d'ajouter un style en ligne directement à l'un de vos éléments, ce qui n'est généralement pas recommandé par les normes d'aujourd'hui. Mais juste pour des raisons de démonstration, ajoutons simplement un style à notre élément paragraphe. Donc, la façon dont nous faisons cela est en tapant le style égal, puis dans les guillemets, nous allons mettre nos styles, donc je vais juste commencer par un style très simple. C' est la couleur. Sauvegardons-le et jette un coup d'oeil à ce que ça fait. D' accord, donc vous pouvez voir que c'est aussi simple que ça. Nous avons un texte rouge sur notre paragraphe. Plutôt cool, non ? Eh bien, cela peut entraîner des problèmes sur la route quand disons, vous développez un site plus grand et vous avez ceux-ci dans les styles de ligne mélangés dans votre code partout. Comment gérez-vous tout ça ? Eh bien, au lieu d'utiliser dans les styles de ligne, vous pouvez également mettre des styles dans votre tête. Faisons ça très vite et comment tu fais ça. C' est juste en tapant du style et vous voyez qu'il ajoute déjà, dans certaines choses ici, on va juste le laisser comme ça. Maintenant, ici, vous allez devoir utiliser ce qu'on appelle un sélecteur pour déterminer quels éléments vous voulez appliquer vos styles, aussi. Examinons donc certains des sélecteurs de base que nous avons des sélecteurs d'éléments, et cela correspond juste au nom de l'élément auquel vous appliquez des styles. Donc je vais utiliser l'élément paragraphe, donc ça va cibler notre paragraphe, non ? Nous avons également des sélecteurs de classe et la façon dont nous les utilisons car nous utilisons simplement le caractère de période ou le point et dans le type ou le nom de classe. Donc, nous allons cibler le bloc de texte. On va cibler la classe des manuels. Et enfin, ajoutons un sélecteur I D. Et la façon dont nous faisons cela est d'utiliser la balise de hachage ou le symbole numérique. Ainsi sera la carte ciblée. Donc ça va cibler l'idée de la carte ici. Pas de remarque la syntaxe ici pour chaque sélecteur. Nous avons toujours besoin d'inclure un support bouclé ouvert et fermé, et à l'intérieur de ces supports, c'est là que nous allons mettre tous nos styles. Alors allons de l'avant et ajoutons quelques styles à ceux-ci pour le paragraphe. Modifions simplement la couleur de votre texte à nouveau. Donc, et pour le bloc de texte, ajoutons quelque chose de différent. Peut-être avait du texte bleu pour tout le bloc de texte, donc cela signifie que le paragraphe recevra le texte lu. Tout autre texte devrait devenir bleu. Et pour la carte, faisons quelque chose de différent. Peut-être une couleur de fond, et nous allons garder simple et dire gris. Notez maintenant cette syntaxe pour ajouter des styles. Tout ce que vous avez à faire est d'ajouter la propriété, la propriété de style, un deux-points, puis la valeur de cette propriété. Et vous savez qu'il y a des tonnes de propriétés de style là-bas en couvrira beaucoup pour ce tutoriel, mais il y en aura beaucoup plus. Donc, vérifiez certainement cette documentation et jouez avec toutes les différentes choses que vous pourriez faire avec votre CSS. Bon, donc nous avons appliqué nos styles. Voyons à quoi ça ressemble. Allez-y et rafraîchissez. On y va. Tout est là. Ce n'était pas trop mal, non ? Nous avons notre fond gris texte bleu, mais ensuite un paragraphe lu. Maintenant, cette méthode d'ajout de CSS n'est toujours pas exactement idéale. Je veux dire, et si vous avez plusieurs pages sur votre site Web et qu'elles utilisent toutes les mêmes styles ? C' est là que les feuilles de style externes seront utiles, et c'est en fait généralement la meilleure pratique selon les normes d'aujourd'hui. Laisse-moi te montrer comment mettre ça en place. Nous allons créer un nouveau fichier et aller de l'avant et l'enregistrer comme CSS point de style. D' accord. Vous venez de copier tous les styles que nous avons déjà ici, et nous pouvons nous débarrasser de ces trucs supplémentaires et nous pouvons tout coller dans notre style point CSS. Maintenant, avant de revenir à notre page, nous devons également la lier à notre document HTML. C' est vrai ? Donc, l'avantage de cette feuille de style externe est que vous pouvez simplement la lier à chaque document HTML que vous avez. Donc, si vous avez plusieurs pages, vous pouvez utiliser la même feuille de style pour chaque page. Donc, la façon dont nous faisons cela est en utilisant la balise de lien que vous appuyez sur l'onglet, vous verrez probablement une feuille de style remplie pour vous. Et vous n'avez pas réellement de fichier maître CSS. C' est juste, je suppose, un espace réservé pour votre fichier réel. Donc, ce que nous allons faire est que nous allons ajouter le style point CSS et voyons à quoi il ressemble. Rafraîchir. D' accord. Donc, comme vous pouvez le voir, nous avons tous nos styles toujours là, donc notre feuille de style externe fonctionne. Maintenant, ajoutons certains des styles dont nous avons réellement besoin pour ce projet. Donc on va aller de l'avant et juste se débarrasser de beaucoup de choses ici. Mais nous allons garder le sélecteur de bloc de texte maintenant pour la couleur du texte pour, genre, paragraphes et autres choses. J' aime utiliser une couleur qui n'est pas tout à fait noire, un peu comme un gris foncé, et vous pouvez obtenir ce genre de contrôle fini et vos couleurs. Si vous utilisez quelque chose appelé une valeur hexadécimale. Et si vous n'êtes pas familier avec les valeurs hexadécimales ou les couleurs hexadécimales, je vous recommande juste de faire une recherche Google pour le sélecteur de couleur hexadécimale. Et en fait, dans les résultats de recherche Google lui-même, il viendra avec un sélecteur de couleurs que vous pouvez utiliser, et vous pouvez choisir votre couleur préférée. J' ai un pré-sélectionné ici juste pour gagner du temps, donc je vais coller ça ici. Et c'est à ça que va ressembler ta valeur hexadécimale. Alors allons de l'avant et rafraîchissons et voyons ce que nous obtenons. Très bien, donc c'est un changement si subtil. Vous ne pouvez pas vraiment dire si c'est un gris foncé ou noir, donc je veux vous présenter un excellent outil que vous pouvez utiliser dans tous les navigateurs là-bas. Il s'appelle l'outil Inspector Tool ou parfois la console Developer. Mais fondamentalement, vous pouvez simplement sélectionner n'importe quoi sur votre page en cliquant avec le bouton droit et cliquez sur Inspecter, Inspecter,et vous verrez cet outil apparaître où vous pouvez voir tout votre HTML. Vous pouvez survoler et voir ce que vous regardez et quand vous cliquez sur un élément ici . Vous pouvez voir tout le style CSS que vous avez appliqué à cet élément, et nous pouvons voir que nous avons notre couleur ici, et c'est en fait parce qu'il est hérité d'un parent, non ? Ainsi est parce que CSS est transmis aux enfants de chaque bloc. Donc, si nous appliquons des styles à notre étiquette principale ou à notre carte, alors il sera transmis à ses enfants aussi. Et je veux vous montrer encore une chose que vous pouvez faire avec cet outil. Vous pouvez en fait prévisualiser les modifications apportées à votre CSS. Donc, disons que je voulais voir à quoi ça ressemble avec du texte rouge. Vous voyez, les changements sont faits instantanément. Vous pouvez également ajouter de nouveaux styles. Donc, disons que je voulais ajouter une couleur d'arrière-plan. Là, vous allez et sachez juste que cela n'est pas réellement apporter des modifications à vos fichiers. Ça ne sauve rien. Si vous actualisez la page, elle se réinitialise. Donc, c'est juste un aperçu des choses. D' accord, ajoutons autre chose. Tore une page, peut-être, ah, couleur de fond dans notre style point CSS. Allons cibler le corps. Donc nous allons utiliser le sélecteur d'éléments pour ça, et ça va être de sélectionner notre tag body. Alors ajoutons une couleur d'arrière-plan. Et j'ai une autre valeur hexadécimale pré-sélectionnée ici. Donc je vais coller ça et voyons à quoi ça ressemble. On y va. Bon, donc nous avons notre CSS travailler avec notre HTML dans la prochaine leçon. Je veux vous montrer quelques façons que vous pouvez organiser votre projet de site un peu mieux, et aussi peut-être que nous pouvons ajouter un peu de texture à l'arrière-plan de notre ancienne carte. 8. Images et liens connexes: loin, n'est-ce pas ? Nous avons donc parlé un peu des couleurs de fond. Mais, vous savez, vous pouvez également ajouter des images d'arrière-plan. Donc, je veux recommander un excellent site Web pour cela. Tu sais, je ne me souviens jamais de la fille parce que c'est un peu compliqué. Mais si vous recherchez des modèles subtils sur Google, c'est le premier résultat ici. C' est donc une excellente ressource parce qu'ils ont une excellente sélection d'arrière-plans subtils pour votre site Web. Mais vous pouvez les prévisualiser et rechercher quelque chose que vous cherchez, comme peut-être du papier et vous pouvez trouver toutes sortes de textures de papier. Cherchons quelque chose d'extrêmement subtil qui me rappelle une sorte de de stock de cartes de visite. Euh, voyons voir ici. J' aime ce papier à rainures. Oui, ça a l'air plutôt bien. Donc tout ce que j'ai à faire pour le télécharger, tu vas télécharger un fichier ZIP, ouvrir ça, et on va utiliser la version plus petite. Donc on va copier ça dans notre projet. Et nous y voilà. Nous avons nos atouts. Allons de l'avant et utilisons-nous cela comme arrière-plan. Revenons à notre code. Et voyons, je voudrais que cela ne s'applique qu'à la carte elle-même. Je vais cibler cette carte de sélecteur. J' utilise juste le signe numérique pour cibler et j'ai d. et l'idée est la carte. On va appliquer une image de fond et la fille sera tout simplement du papier groove. J' ai maintenant Ping, une chose à garder à l'esprit Pour chaque style CSS que vous écrivez, vous voulez toujours inclure ce point-virgule à la fin. Sauvons ça et on n'a plus besoin de ça et on va se rafraîchir. Bon, voilà notre modèle. C' est très subtil, mais c'est là. Vous pouvez le voir maintenant. Vous savez, nous n'avons pas beaucoup de dossiers ici, mais ça pourrait devenir un peu compliqué. Ce serait bien d'avoir un peu plus de structure à notre projet, car à mesure que nous ajoutons plus d' actifs, nous avons un site Web plus grand sur lequel nous travaillons. On va vouloir un groupe de choses dans des dossiers différents, non ? , Bien sûr, on pourrait juste créer de nouveaux dossiers, peut-être un pour les images. Ceux là-dedans peut-être 14 CSS qui là-dedans, c'est sympa et organisé. Mais que se passe-t-il maintenant ? Toe tous nos liens, tout devient brisé. Alors pourquoi il s'est cassé ? Eh bien, parce que nous disons que le navigateur groove dot paper ping est situé directement dans notre itinéraire de projet , mais ce n'est plus le cas. Maintenant, c'est une image. Même chose avec notre image principale était de dire profil que JPEG est situé dans notre itinéraire de projet, mais plus le cas plus. Comment on contourne ça ? Eh bien, nous devons fournir le chemin, et ce que nous avons utilisé dans le développement Web est généralement un chemin relatif. Donc, au lieu de taper le site entier et ensuite le chemin d'accès, nous n'avons pas besoin de le faire. Si tout est sur le même serveur, vous pouvez simplement utiliser le chemin relatif au fichier avec lequel vous travaillez. Donc, dans ce cas sont le fichier est sur la route et nous voulons accéder à une image qui est dans le dossier images. Donc, nous tapons des images slash profil J pick. Jetons un coup d'oeil, euh, les images sont de retour ? Et notre feuille de style ? Si on a fait la même chose et qu'on se rafraîchit, on ne voit rien. Eh bien, pour commencer, nous devons changer le chemin vers la feuille de style elle-même. Donc, en ce moment, nous n'obtenons pas de styles CSS. Faisons cela d'abord dans notre HTML, changeons le chemin vers le style de barre oblique CSS que CSS parce que nous sommes ici. Nous voulons accéder au fichier à l'intérieur. Actualiser CSS. Ok, il y a des styles en arrière, mais on n'a toujours pas l'arrière-plan. Pourquoi c'est ça ? Eh bien, parce que le style point CSS n'est pas dans la route du site. C' est dans le répertoire CSS. Donc, ce que nous devons faire en fait, c'est sortir de ce répertoire et ensuite dans le répertoire des images pour accéder à notre groove paper ping. Il y a une syntaxe pour ça, et c'est essentiellement juste deux points et une barre oblique. Ça nous dit. D' accord, retournez dans un répertoire et accédez au répertoire des images. Et c'est là que vous trouverez l'image. Sauvegardons et donnons-lui un rafraîchissement. Ah, on y va. Ça marche encore. Super. Dans notre prochaine leçon, parlons un peu plus de trouver des propriétés et de style Certains de ces liens 9. Typographie: jusqu' à présent dans ce projet, nous venons d'utiliser la police par défaut pour le navigateur, qui est généralement une police Serra. Et ce n'est pas idéal pour chaque projet, est-ce pas ? Alors jetons un coup d'oeil à certains de la propriété à vous pouvez utiliser pour démarrer un fonds. Ce que j'aime faire est de définir une police de base sur la propriété body afin que cette police soit héritée par tous ses enfants. Je vais vous montrer ce que je veux dire par là. Donc, nous allons utiliser la propriété de police. Et d'abord, on va mettre un base-ball sur 16 pixels. 16 pixels est, ah, peu près un standard Web. Donc j'aime rester avec maintenant. Nous allons ajouter une taille de police de 16 pixels à une barre oblique, puis la hauteur de ligne après ça, ce que nous allons en faire une. Et cela signifie simplement que nous ne voulons pas que chaque ligne de texte prenne plus de place que les caractères ne le sont réellement. Donc, vous savez, une hauteur de ligne d'un caractère, non ? Ok, alors on va rester très simple, et on va juste préciser, on veut le fonds Ariel s'il est disponible. Sinon, alors San Serif. D' accord ? Et vous pouvez voir que immédiatement toutes les polices sur la page ont changé. Comment est-ce arrivé ? Eh bien, c'est parce qu'avec CSS, si vous aviez un style à un élément parent, tous ses enfants hériteront également ces styles. Donc, si vous inspectez cet élément principal, vous verrez que les mêmes styles de police sont hérités du corps. Maintenant, allons dire nos titres. Et si on voulait des titres plus petits ? Jetons un coup d'oeil à ce qu'il utilise maintenant. Eh bien, il utilise une unité de mesure différente appelée à M. M unités sont fondamentalement un moyen de prendre la police de l'élément parent et de le multiplier par un certain nombre. Donc, dans ce cas, il dit, OK, prenez la police de base de 16 pixels, multipliez-la par deux. Alors passons à notre code et enveloppons ces en-têtes dans un élément de bloc. Nous allons lui donner une classe d'en-tête et déplacer ces éléments à l'intérieur tout droit et retour à notre CSS. Allons de l'avant et à nos styles de fonds de base dans. J' aime les copier directement depuis le navigateur, les coller ici, et maintenant nous allons ajouter notre nouvelle police. Donc pour les en-têtes, pour l'en-tête 3 et nous allons lui donner une taille de police de 0,8 un M. Jetons un coup d'oeil à ça. Très bien, donc c'est un peu plus petit, Mais le Texas en fait dans le H un élément dans l'élément H deux, qui ont leurs propres tailles de police appliquées, cela peut souvent devenir assez déroutant pour les gens. Je veux dire, et si le bloc de texte avait sa propre taille de police de 3 m et puis Oh, mon Dieu, comment calculez-vous tout ça ? taille de police de 3 m et puis Oh, mon Dieu, Bon, donc ça peut devenir un peu délicat. Mais il y a une autre unité de mesure qui pourrait résoudre ce problème pour vous. Et c'est le royaume. Si vous ajoutez juste un r à l'avant, étaient de retour à la normale, non ? Donc bien, presque comme Bram le dira. Ok, je me fiche du parent. Je veux juste être relatif à la base combattue, donc ça va regarder la taille de police de l'élément body. Donc, c'est vraiment dire 0,8 fois 16. Allons de l'avant et changeons notre code pour utiliser jante. Rafraîchissez la page et nous sommes toujours bons. Maintenant, qu'en est-il de ces liens ? Ils sont d'une couleur différente du reste du plaisir. Eh bien, les liens sont changés un peu différemment. Ils sont interactifs, donc ils ont quelques propriétés supplémentaires avec lesquelles vous pouvez travailler. Alors vérifions ça. Si vous inspectez l'un de vos liens, vous verrez dans l'inspecteur que nous avons ce petit deux-points H o b. Si vous cliquez dessus, vous avez un tas d'états d'éléments différents que vous pouvez utiliser. Ce que cela signifie, c'est dire, que vous passez votre souris sur un lien ou que vous dites que l'un d'entre eux est actif ou que vous avez un onglet sur un lien. Vous voyez comment c'est différent là, alors que chacun est un état différent dans lequel cet élément peut être. Alors passons des états stationnaire à son manteau. Et tout d'abord, nous allons spécifier une couleur spécifique pour nos liens. Je suis allé de l'avant et j'ai choisi une couleur moi-même, donc on va mettre ça dans leur couleur. D' accord, et rafraîchissons. Ok, donc c'est un peu mieux. Maintenant, revenons en arrière et ajoutons un état de survol juste à nouveau. J' ai une couleur légèrement différente pendant un moment. Nous survolons plutôt frais, et maintenant il plane. Super. Maintenant, vous pensez peut-être, je ne veux pas les soulignements, Donc si vous ne voulez pas de soulignements sous vos liens, vous pouvez le supprimer en disant décoration de texte. Non, ajoutons ce style à notre code aussi. D' accord, l' étiquette d'ancre. Sauvez-le. Actualiser. On y va. Dans la vidéo suivante, je vais vous montrer quelques bibliothèques que j'aime vraiment mettre de belles icônes et aussi styliser le plaisir encore plus avec les polices Google. 10. Bibliothèques: alors que le fonds aérien est agréable, il serait bon de préciser votre propre plaisir, surtout si vous voulez que cela semble un peu plus professionnel. Eh bien, il y a quelques bibliothèques gratuites là-bas, et l'une d'entre elles est les polices Google. Jetons un coup d'oeil. Donc, si vous allez à polices dot google dot com, vous verrez toutes leurs différentes polices que vous pouvez utiliser sur votre site Web. Je vous encourage à regarder à travers et à trouver vos favoris. J' en ai un que j'aime, donc je vais taper la page T. T. Stands. On y va. Et on va ajouter ça à notre sélection. Une fois que vous avez terminé de sélectionner tout ce que vous voulez sur votre site Web, ouvrez ceci. Comme vous pouvez le voir, ils ont de bonnes instructions détaillées pour vous. Ils ont donc une balise de lien comme nous avons ajouté notre feuille de style. Allons de l'avant et copions cela et collez-le dans notre HTML. Maintenant, nous voulons nous assurer que nous avons ajouté au-dessus de nos feuilles de style afin que nous puissions l'utiliser dans nos styles CSS parce que ce qui va se passer est que le navigateur va lire ce document de haut en bas. Donc, quelle que soit la ressource qui doit être utilisée dans ce document CSS, vous devez vous assurer qu'ils sont supérieurs. Donc nous avons notre style. Si nous sauvegardons et actualisons, nous ne verrons rien changer. C' est parce qu'en ce moment il utilise toujours le fonds aérien. Donc, si vous revenez aux polices Google, vous verrez qu'elles vous montrent la famille de polices que vous devriez utiliser. Donc, nous allons aller de l'avant et copier PT Sands et allons à notre feuille de style. Et ce qu'on peut faire, c'est l'ajouter juste devant l'antenne. Donc, c'est dire que c'est bon, nous préférons PT Sands. Mais si ce n'est pas disponible que d'accord, utilisez l'antenne. Mais si ce n'est pas disponible, alors d'accord, juste utiliser le sable que Sarah a combattu. Donc si nous disons ça et nous rafraîchissons, nous y allons, nous voyons RPT Sands. Super. Alors quoi d'autre peut-on dio ? Eh bien, ce serait bien de remplacer ces liens texte par de petites icônes. Peut-être une icône pour le gin tub loco, peut-être le logo lié dans et le logo Twitter. droite. Eh bien, il y a une bibliothèque gratuite, quatre fonds d'icônes appelés police. Impressionnant. Et le voilà. Laissez-moi vous montrer comment l'utiliser sur votre site Web. Ils ont des instructions assez simples. Il suffit de cliquer sur, commencer à utiliser gratuitement. Et tout ce que vous avez à faire est la même chose que vous avez fait avec notre bibliothèque de polices Google. Et ils ont en fait ce petit lien de copie pratique ici. Donc je vais m'en servir. La même chose est avant de coller ça juste là. Ça devrait être bien. Sauvez-le. Et maintenant, voyons comment nous pouvons l'utiliser. Donc si vous cherchez l'icône que vous voulez dans mon cas, je vais regarder oublier Hub. On y va. Ils ont donc quelques choix différents. Je pense que je vais aller avec la ronde 1. Je vais cliquer dessus, et il vous montre le HTML que vous pouvez utiliser pour cette icône. Donc je vais aller de l'avant et copier ça. Revenez à mon projet et à la place de get hub, je vais coller cela ici et voyons à quoi cela ressemble. Euh, on y va. On a un petit logo « get hub ». C' est plutôt cool. Alors faisons la même chose pour les autres. D' accord ? Et voyons à quoi ça ressemble. Très bien, ça arrive vraiment, donc on a nos icônes. Nous avons notre police Google personnalisée. Donc, dans la leçon suivante, je vais parler de la façon dont vous pouvez positionner n'importe quel élément sur votre page ancienne. 11. Positionnement des éléments: un morse, n'est-ce pas ? Donc vous pensez peut-être, comment diable allons-nous déplacer tous ces éléments dans la bonne position et commençons petit. Commençons par ces icônes. Ils ont des petites balles bizarres maintenant et ne fonctionnent pas vraiment avec des icônes. Allons réparer tout ça. Donc, si nous inspectons, regardons la différence entre les types d'affichage. Si on regarde l'allié, c'est l'élément de la liste. Vous pouvez voir que l'affichage est liste. L' article a du sens, n' est-ce pas ? Et d'autres éléments ? Comme un paragraphe qui dit « bloc d'affichage » ? Et un plongeon ? Même bloc de chose. Donc, chaque élément est livré avec son propre style inhérent, et vous voulez. Si vous voulez voir vos choix, vous pouvez dire afficher puis voir ce qu'il recommande. Il y a beaucoup de types différents. On n'y va pas tous, mais celui qui va nous aider le plus en ce moment est l'affichage en bloc de ligne. Revenons à notre code et jetons un coup d'oeil. Alors voyons. On a un tas d'éléments alliés à l'intérieur, n'est-ce pas ? Eh bien, Au lieu d'ajouter un style à chaque élément allié, ajoutons un nom de classe à notre parent. Vous le ferez. Appelons ça pas de style parce que nous allons supprimer le style par défaut de notre liste et faire nôtre. Maintenant, pour notre classe sans style, nous allons dire OK pour l'élément sans style. Nous voulons que chaque élément allié à l'intérieur soit affiché dans les éléments de bloc de ligne qui sont bloqués en ligne . Ce type de jeu sera enveloppé comme des textes, mais reste tout dans un bloc. Allons de l'avant et sauvegardons et voyons ce que cela fait à notre projet. Rafraîchir. Ah, on y va. Nous avons tout horizontal, mais il y a encore beaucoup d'espace ici. Eh bien, qu'est-ce qui se passe ici ? Y a-t-il encore un style par défaut appliqué à l'élément U L ? Et nous avons seulement ciblé l'allié pour annuler certains de ces styles. Revenons à notre code et corrigeons cela pour cibler le U L. Nous avons juste besoin de cibler la classe sans style. Allons de l'avant et supprimons le style par défaut en disant le style de liste none, ce qui se débarrasse des puces si elles sont toujours là, et nous dirons aussi le remplissage à gauche zéro. Vous vous demandez peut-être ce que c'est Patty ? Eh bien, abord, nous allons rafraîchir et vous voyez qu'il se débarrasse de cet espace sur la gauche. Maintenant, voyons quel est le rembourrage dans votre inspecteur. Vous verrez un joli petit diagramme de ce que c'est. C' est ce qu'on appelle le modèle de boîte. Le modèle de boîte fait référence à toutes les différentes tailles relatives au remplissage de bordure de marge et à la manière dont ils se rapportent les uns aux autres dans un élément. Il est souvent difficile de comprendre complètement comment le modèle de boîte fonctionne jusqu'à ce que vous mettiez la main sur du code et jouiez avec. Donc je vous encourage à faire ce que je fais maintenant. Voyez comment les choses interagissent et jetez un oeil à ce petit diagramme astucieux pour voir comment cela fonctionne. Ok, donc juste comme comment on a positionné ces icônes de façon horizontale, eh bien, on pourrait faire la même chose avec notre image et notre texte, non ? Alors allons de l'avant et faisons cela dans notre code. Alors comment on va faire ça ? Regardons ça. Nous avons un bloc d'image et un manuel, donc nous pourrions simplement ajouter un affichage de bloc en ligne à chacun de ces blocs. Essayons cela donc nous ajoutons un affichage de bloc en ligne au bloc image et au bloc texte. Sauvegardons ça et voyons à quoi ça ressemble. D' accord. Eh bien, c'est un bon début. C' est un peu bizarre. Pour commencer, je pense que le texte devrait être aligné sur le haut de l'image, non ? Alors voyons comment nous pouvons le faire dans notre code. Ajoutons également une ligne verticale supérieure et actualisons cela. On y va. C' est un peu mieux maintenant. Je voudrais un peu d'espacement entre ces deux éléments. Et comme nous venons de l'apprendre, nous pouvons le faire avec un rembourrage ou une marge. Puisque nous avons vraiment besoin d'espacement à droite de l'image, je vais ajouter une marge droite à notre image. Donc ici, sous un style triste à notre bloc d'image et nous allons dire, marge, droite, Oups, et nous allons juste lui donner un espace d'un m. Sauvez-le et vérifions. D' accord, donc ça a l'air un peu mieux. Que pouvons-nous ajouter d'autre ? Eh bien, nous avons un peu de rembourrage autour de la carte entière, en fait, donc nous allons aller au sélecteur de carte et ajouter du rembourrage qui va ajouter du rembourrage autour la carte entière comme nous l'avons vu auparavant, donc tapotant et leur dira à nouveau, Enregistrer et rafraîchir. D' accord, ça a l'air un peu mieux. Ok, donc c'est un aperçu très général du fonctionnement du modèle de boîte et de la façon dont vous pouvez positionner et espacer les choses sur la page. Il y a beaucoup d'autres choses à apprendre là-bas, mais cela couvre les bases. Dans notre prochaine vidéo, nous allons parler du dimensionnement. 12. Redimensionner des éléments: Eh bien, ça arrive vraiment ici, mais cette image est beaucoup trop grande. Parlons de certaines des différentes façons dont vous pouvez redimensionner les éléments maintenant un moyen très simple d'appliquer le dimensionnement aux images. Il est juste d'utiliser leurs attributs avec et height. Donc, sur ma balise d'image, je pourrais juste ajouter un attribut de largeur égal et, disons, 1 50 Et le navigateur interprétera cela comme 150 pixels et regardez bien cela. Il a également appliqué une hauteur pour nous, donc il a gardé le rapport d'aspect correct. Mes images carrées donc la largeur et la hauteur doivent être les mêmes. Que croyez-vous qu'il se passera si j'applique une hauteur différente de la mienne dans le scénario ? Vérifions ça. Disons 100 pixels à la place. Oh, j'ai été écrasé, alors gardez ça à l'esprit. Vous ne voulez généralement pas ajouter à la fois avec et la hauteur des images, mais vous devriez juste laisser le navigateur conserver le rapport d'aspect pour vous. Maintenant, c'est un excellent moyen d'ajouter en hauteur. Mais dans le développement Web moderne, il est généralement géré dans CSS. Alors regardons comment vous pouvez faire la même chose avec CSS à la place. abord, nous allons supprimer les attributs supplémentaires et allons à notre CSS afin que nous puissions juste cibler n'importe quelle image dans la classe de bloc d'image. La largeur ou la hauteur du titre est assez simple. Sur CSS, vous pouvez simplement utiliser la propriété width et lui donner une valeur de pixel ou un pourcentage, ou M. Quelles que soient vos préférences, je vais rester avec les pixels ici et restons juste avec 150 comme ça. Voyons ce que ça nous donne. Super. Maintenant, ces propriétés de largeur et de hauteur peuvent également s'appliquer à d'autres éléments de votre page, sorte que nous pourrions également l'utiliser pour limiter la largeur de notre carte. Donc, ce n'est pas sur toute la page ici. Alors ajoutons ici à notre élément de carte. Pour l'instant, essayons simplement un avec 600 pixels et voyons à quoi cela ressemble. Retournons et rafraîchissons. Grande, sorte que vous pouvez voir la carte elle-même est maintenant limitée à 600 pixels de large. Il ne s'étend pas sur toute la fenêtre. Maintenant, j'ai personnellement l'impression que c'est un peu trop large. Il y a beaucoup d'espace supplémentaire sur la droite. C' est un peu bizarre. Rétrécisons juste un peu ça, et cela peut être différent pour votre nom. Si vous avez un nom plus long ou un nom plus court, il suffit de le sentir et de voir ce qui vous semble bon. Ah, disons que peut-être cinq 10 pixels semblent un peu mieux maintenant. Une chose à garder à l'esprit est le design réactif. Par exemple, Que se passe-t-il si nous regardons cela sur un petit écran, comme un appareil mobile sera dans notre inspecteur ? Nous pouvons prévisualiser cela en utilisant cet outil pratique pour basculer les appareils. Malheureusement, notre design n'est pas très réactif en ce moment. Puisque nous utilisons des valeurs de pixels fixes, le navigateur est fondamentalement juste réduire les choses vers le bas, en essayant de tout adapter dans l'appareil. Voici ce qu'on peut faire pour contourner ça. En plus de notre avec valeur, nous pouvons également ajouter un max avec et le définir à 100% afin que juste indique au navigateur ne jamais mettre à l'échelle cette carte au-delà de 100% de l'écran. Ainsi, sur des appareils encore plus petits comme un iPhone cinq, le texte s'enroulera simplement, et il n'y a jamais de défilement horizontal. D' accord. Avant d'oublier, copions ces styles et mettez-les dans notre code. Donc nous allons remplacer cet original par. On y va. Faisons en sorte que tout fonctionne toujours. Ça a l'air super. Il y a encore une mise en garde . Malheureusement, tous les navigateurs ne sont pas égaux. Jetons un coup d'oeil à cette même page dans Firefox. Ouvrez l'inspecteur. Donc ça a l'air bien maintenant. Mais alors jetez un oeil quand je fais défiler vers la droite. Nous ne voulons pas de ce défilement horizontal, donc il semble que dans Firefox, le max avec ne fonctionne pas tout à fait. Le problème ici est une complication avec notre modèle de boîte. ce moment, le navigateur applique notre max avec au contenu de notre boîte. Mais le rembourrage ajoute un peu supplémentaire avec au-delà de la taille de notre page. Et nous pouvons contourner cela en ajoutant une autre propriété appelée taille de boîte et ajouter une valeur de boîte de bordure. Cela indique au navigateur d'appliquer le avec jusqu'à la bordure de notre modèle de boîte au lieu de contraindre à la zone de contenu. Je sais que c'est un peu un concept avancé, alors n'avez pas l'impression de devoir comprendre pleinement ce qui se passe ici, mais je voulais juste m'assurer que vous avez cette compatibilité corrigée dans votre conception. Alors assurez-vous d'ajouter ça là-dedans. Allons de l'avant et copions cette propriété supplémentaire dans notre code. Et jetons un coup d'oeil dans Firefox d'abord. D' accord ? Super. Et le chrome ? D' accord. Ça a l'air bien. Très bien, c'est sympa et réactif maintenant. Donc, dans la vidéo suivante, je vais vous expliquer certaines des façons dont vous pouvez aligner ces éléments dans votre page. 13. Alignments: Alors ensuite. Ce serait génial si nous pouvions placer cette carte entière au centre de la page. Eh bien, il y a plusieurs façons de positionner des éléments en utilisant CSS et passons en revue les différentes façons que nous pouvons faire. façon dont vous positionnez les éléments dépend vraiment du type d'affichage. Dans le cas d'un élément de paragraphe, par exemple, vous pouvez ajouter le centre d'alignement du texte de style et le centrer dans le paragraphe. Dans ce cas, le paragraphe n'est pas très large, mais nous le laisserons comme aligné à gauche, ce qui est la valeur par défaut dans le cas d'éléments de blocage en ligne tels que nos éléments de liste. Eh bien, ceux-ci pourraient être alignés en utilisant la même méthode d'alignement de texte afin que vous puissiez ajouter un centre aligné de texte et il centrerait tous ces éléments dans les blocs de ligne. Mais on ne va pas faire ça. Ce que nous voulons aligner, c'est notre carte globale, qui, comme vous pouvez le voir, est un élément bloc. Les éléments de bloc sont un peu plus difficiles à centrer. Ce que nous pouvons faire est d'utiliser la marge afin que nous puissions fournir un espacement égal sur le côté gauche et côté droit du bloc. Donc, la façon dont vous pouvez le faire est en ajoutant la marge auto, cela indique au navigateur, d' accord, déterminer automatiquement la marge maximale pour le côté gauche et le côté droit de cet élément et juste les égaler. Et cela nous donne un alignement central. Maintenant, plus loin, nous pourrions ajouter à cette marge parce que nous voulons un peu d'espacement par rapport au haut de la page. Droit ? Eh bien, comment on fait ça ? On pourrait ajouter une marge supérieure et lui donner un M. et on y va. Ou nous pourrions aussi le faire. Comment ça a fonctionné ? Jetons un coup d'oeil au diagramme ici. Il applique un M ou 16 pixels dans ce cas en haut et en bas, puis la gauche et la droite sont automatiquement calculées. La raison en est que c'est en fait une propriété abrégée. Si je clique sur cette flèche ici, vous pouvez voir qu'elle détermine réellement toutes ces propriétés distinctes. Donc la marge est abrégée pour une marge. Marge supérieure, marge droite, eau inférieure et gauche. Et c'est dans cet ordre. Donc, disons que tu voulais Ah, marge supérieure d'un m et que tu voulais une marge droite sur eux. Et vous vouliez que le fond soit de 3 m et qu'il soit laissé pour lui. Je ne sais pas pourquoi vous voudriez cela, mais juste pour illustrer, vous pouvez voir que cela s'applique à chacun dans cet ordre. Donc on va le laisser. Laissons-le à Ah à M auto. Cela nous donne un peu d'espace en haut, plus l'alignement centré. D' accord, allons de l'avant et appliquons ces styles à notre code avant d'oublier. On va appliquer cette carte dentée ici, réparer notre espacement, sauver et rafraîchir. Bon, on y va. air plutôt bien. Maintenant, il y a un autre moyen. Vous pouvez aligner les éléments que je voulais juste passer brièvement. Nous ne l'utiliserons pas dans ce projet, mais disons que vous vouliez déplacer cette image vers la droite. Eh bien, vous pouvez facilement le faire en utilisant la propriété float par défaut. n'y a pas de flotteur. Mais si vous avez flotté à droite, , regardez ça. Il déplace l'image sur le côté droit avant qu'elle ne touche le rembourrage de la voiture. Droit. Vous pouvez donc l'utiliser aussi à votre disposition. Beaucoup de gens vont flotter des choses à gauche. Ah, afin de rendre les sites Web plus réactifs. On n'utilisera pas cette technique dans ce projet, mais sachez que c'est aussi à votre disposition. 14. CSS avancé: vrai, C' estvrai, donc ça arrive vraiment. Il y a quelques autres tweets que je voulais ajouter qui sont un peu plus avancés, mais je pense que nous sommes prêts à les aborder. Donc, tout d'abord, ce serait bien si nous pouvions simplement cliquer sur ce lien et cela ouvrirait notre client de messagerie . Droit ? Alors passons à notre âge pour le courrier, et on va juste ajouter un lien vers ça. Comme vous vous en souvenez, les liens sont maintenant la balise d'ancrage pour la référence H. Nous allons ajouter une fille spéciale qui dit au navigateur d'ouvrir le client de messagerie sur l' ordinateur de la personne pour que ce soit un mail trop deux-points. Et puis vous allez ajouter l'adresse e-mail à laquelle vous voulez envoyer un e-mail. Revenons à notre navigateur, actualisons, et vous voyez que c'est un lien. Allons-y et cliquez dessus, et il s'est ouvert dans mon autre fenêtre. Mais je peux vous montrer ici. C' est là. Donc, il a ouvert ma boîte de réception. Je n'ai pas installé un homme sur mon ordinateur en ce moment. Je ne ferai pas ça maintenant. Quelles sont les autres choses que nous pouvons ajouter ? Eh bien, tout comme nous horizontalement centrés sont la carte. Ce serait bien de l'avoir aussi centré verticalement, donc c'est juste au milieu de la page. Crois-le ou non, c'est un peu avancé, mais je vais te montrer comment le faire. Il y a donc une propriété assez nouvelle disponible pour presque tous les navigateurs. À ce stade, il s'appelle Flex Box, et il y a beaucoup de détails sur l'Indien sur le fonctionnement de la boîte Flex. Cela peut devenir un peu compliqué, mais je vais simplement vous montrer comment l'utiliser pour aligner verticalement des éléments. Parce que vraiment, c'est l'une des meilleures façons de le faire ces jours-ci avec les navigateurs modernes. Alors débarrassons-nous de cela et revenons à notre code. Donc, la façon dont fonctionne la boîte Flex est que vous avez besoin d'un élément d'emballage global, puis vous pouvez positionner des éléments à l'intérieur de cela. Donc, nous allons utiliser le rappeur de thèse ICT comme élément parent global. Et nous allons voir, nous allons de l'avant et ajouté ci-dessus carte, et la première étape est juste de le faire afficher flex. Maintenant, afin de centrer verticalement sur la page, nous allons devoir nous assurer que cet élément prend toute la page. Droit ? Donc on va ajouter, ah, hauteur de 100%. Donc, de cette façon, il prendra toute la page, et nous allons dire que la direction flexible devrait être colonne parce que nous voulons centrer verticalement , justifier le contenu devrait être centre. Et un élément de ligne devrait également être au centre. Alors quoi ? Ça a sauvé. Voyons ce que nous avons jusqu'à présent. Rafraîchir. Et bien, rien ne s'est passé. Pourquoi c'est ça ? Jetons un coup d'oeil. D' accord ? Le problème est que oui, nous prenons 100% de notre corps, mais son corps n'est pas 100% de sa fenêtre. Pourquoi c'est ça ? Eh bien, le document HTML lui-même n'est pas non plus. Alors, comment pouvons-nous nous assurer que toute la fenêtre est prise en charge par notre document HTML ? La façon dont j'aime le faire est en fait d'ajouter des styles au document lui-même. Donc, je peux ajouter une hauteur de 100%. Cela s'assure que le document HTML prend toute la page et je pourrais faire la même chose pour le corps. Et on y va. Allons de l'avant et appliquons ces styles à notre code. Je vais mettre ça au HTML et à la hauteur du corps. 100 %. D' accord, tout fonctionne comme prévu. Impressionnant. Voyons voir quelques autres choses que j'aimerais vraiment que ces coins soient un peu autour. Et donc ça ressemble plus à une carte. Essayons ça. La façon dont nous pouvons le faire est d'ajouter ce qu'on appelle Border Radius, et c'est assez simple. Donc, avec la frontière, il y a la frontière, rayon et l'affaiblissement. Il suffit d'appliquer la norme, soit pixel ou M, ce que vous préférez. Je vais juste lui donner un rayon de cinq pixels. Ça a l'air plutôt bien. Mais, tu sais, en fait, j'ai l'impression qu'on devrait peut-être les utiliser pour faire 0,8 m Ah, oui, c' est sympa. De cette façon, il est relatif au reste de la page. Alors sauvegardons cela dans notre code, trouvez notre carte et dans notre rayon de frontière et actualisons. Super. Très bien, un dernier ajustement. Ce serait vraiment bien si nous pouvions juste ajouter une ombre subtile là, donc il est vraiment sorti du reste de la page. Voyons comment vous pouvez faire ça. Ce que j'aime faire est d'aller dans un générateur d'ombres de boîte parce qu'il y a beaucoup d'ombres de boîte. Je n'ai pas envie de le calculer moi-même. Donc, boîte générateur d'ombre et il ya une tonne de ces en ligne Choisissez votre favori. Je vais juste cliquer sur le 1er 1 que je vois. Et les contrôles sont assez intuitifs année. Donc c'est une belle vue, je dirais. Euh, voyons voir. Rendons-le un peu plus subtil. Ok, alors essayons ça. Tout ce que vous avez à faire est de copier tout cela et de le coller sur votre carte. Revenons à notre navigateur, et nous n'avons plus besoin de cela. Rafraîchissons. Très bien, c'est génial. Maintenant que nous avons fait notre design, je pense qu'il est temps de le mettre en ligne pour le montrer. Droit ? Dans la prochaine vidéo, je vais vous montrer comment faire ça gratuitement 15. Publier votre code: un morse. droite. Nous avons donc notre produit fini. C' est notre structure de fichiers, comme vous le savez, nous devons obtenir tous ces fichiers sur le web afin qu'il soit accessible par n'importe qui dans le monde. Comment on le fait ? Eh bien, il y a un tas d'options là-bas. Vous pourriez acheter un hébergement de. Vous savez, les différents hôtes là-bas. Je suis sûr que vous avez vu des publicités pour eux. Ah, allez, papa, hôte Gator. Ah, il y en a une tonne et ils vous permettent de le faire facilement. Ou vous pourriez rester simple et aller chercher le hub. Comme vous le savez, j'adore obtenir de l'aide parce que c'est sur ma carte. Bon, alors allons nous lever et d'accord. J' ai déjà un compte. Je suis très actif ici. Vous ne verrez pas tout ça, mais ce que vous voulez faire est de créer un nouveau dépôt. Une fois que vous vous inscrivez, oubliez le hub. Vous pouvez créer un dépôt qui est fondamentalement juste un endroit pour mettre tous vos fichiers. Maintenant, il n'a pas besoin d'être public si vous ne voulez pas que ce soit. Mais si vous vouliez être en ligne, alors vous devriez probablement le garder public. C' est également génial d'avoir un compte get hub. Si vous essayez d'entrer dans la communauté de développement Web Ah, c'est un endroit idéal pour montrer ce que vous pouvez faire en codant à quel point vous êtes actif. Ah, et juste pour communiquer avec d'autres développeurs parce qu'il y a beaucoup de projets open source sur se lever que vous pouvez avoir accès et simplement contribuer à vous-même. Quoi qu'il en soit, ce que nous faisons ici, c'est qu'il faut trouver un nom de dépôt. Cela va également s'attacher dans le U R l de vos cartes de visite. Alors gardez ça à l'esprit quand vous venez avec votre nom. Je vais juste garder ça simple. Donc, dans le nom il carte tutoriel et vous n'avez pas à fournir une description. Je vais juste sauter ça à partir de maintenant. Nous allons le garder public, et vous voulez l'initialiser avec une lecture moi juste pour le plaisir Ces Tout droit, Alors allons de l'avant et créer un dépôt. Et voici votre chance d'ajouter tous vos fichiers. Alors allez ici pour télécharger des fichiers, et à partir d'ici, vous pouvez littéralement simplement glisser et déposer tous vos fichiers dans la fenêtre. Alors sélectionnez tout ce que nous avons dans notre répertoire de tutoriels ah et mettez-le dans votre dépôt. Il va tout télécharger avec les répertoires et tout. Et c'est votre chance de dire, qu' est-ce que vous venez de faire ? Eh bien, il est livré avec un texte par défaut, et j'aime ça. Donc je vais juste commettre des changements de cette façon. Donc, c'est des changements de validation. Cela peut prendre un peu de temps. Une fois qu'il sera opérationnel, on va passer aux réglages. C' est là que vous pouvez aller de l'avant et lancer votre site Web. Alors faites défiler vers le bas pour obtenir les pages du hub, nous voulons choisir une source. Ça devrait être la branche maîtresse. Sauvez-le. Et si vous faites défiler vers le bas, vous verrez que les pages d'aide sont maintenant activées, et vous pouvez modifier le domaine. Mais je suis content de ça. Donc, si vous cliquez sur votre domaine, il est là. Votre code est maintenant en vie et vous pouvez partager cet euro avec n'importe qui 16. Récapitulé: Félicitations. Vous avez fait vos premiers pas pour apprendre HTML et CSS, et vous avez une page Web cool pour le prouver. Ne vous inquiétez pas si une partie de ceci est un peu difficile à conserver, c'est beaucoup d'informations. Ne vous inquiétez pas si une partie de ceci est un peu difficile à conserver, Rappelez-vous juste que vous avez le code que nous venons d'écrire pour référence. Vous avez également la documentation indienne, alors n'hésitez pas à regarder cela si vous avez besoin de quelques conseils. De plus, tu n'as pas à t'arrêter ici. Vous pourriez prendre ce projet quelques pas plus loin. Si vous êtes prêt à relever des défis bonus, je vous recommande quelques choses que vous pourriez penser, en ajoutant une image d'arrière-plan à la page Web. Vous pouvez jouer avec le rayon de bordure et le rendre plus d'un style Kirby ou un style circulaire. Vous pouvez également agrandir cette carte et la rendre plus d'une mini bio. Vous pourriez entrer dans certains de vos antécédents, certaines de vos compétences. Une fois que vous êtes satisfait de votre design, je vous encourage à le partager dans la Galerie de projets. Je suis impatient de voir certains des produits finis là-bas aussi. , Si vous aimez ce cours, s'il vous plaît n'hésitez pas à me suivre ici sur le partage de compétences. Aussi, vous pouvez me suivre sur Twitter et j'adorerais tout commentaire que vous avez pour moi dans un commentaire aussi . Donc, de toute façon, merci pour l'accord et un revêtement heureux vieux.