Introduction au HTML et au CSS

1. Intro: Bonjour, tout le monde. C' est Arthur. Et aujourd'hui même vous donner une introduction à la classe HTML et CSS 40 jours. Nous allons apprendre quel logiciel nous avons besoin pour commencer, y compris chrome fournissant des textes et les gens de service ont prétendu que je reçois donc site hôte . Nous allons aussi apprendre comment j'ai rempli un site Web correctement. Ce que cela signifie est mon appris quelle question mellitus sa structure et ses attributs. Nous allons construire un atrial réel, mais le contenu de la page que nous allons tester mais en fait construire une arrestation rapide vous ensemble ensuite étaient aussi Millard sur CSS. Ce que vous voyez, c'est la façon dont vous écrivez CSS et comment vous incluez des styles sur la page. Et à la fin, nous allons avoir un portefeuille d'as vraiment solide que nous pouvons utiliser pour mettre en valeur certains travaux que nous avons faits dans la classe d'aujourd'hui et pour évoluer au fil du temps à mesure que vous en apprenez plus sur les amis Element, Désolons-nous 2. COMMençons à LETS: Ok, super. Commençons. Tout d'abord, nous n'aurions pas une grande trace de statut. Nous nous assurerons d'avoir tous les outils dont nous avons besoin pour être productifs dans cette classe. Nous nous assurons que nous avons quelques textes aveugles, qui est notre couronne d'éditeur de code, qui est un navigateur préféré à utiliser et papier plan dot io. Et ça va nous permettre d'héberger notre site web en ligne après ça. Nous avons également fait une promenade à travers ce qu'est la demande L asiatique, et enfin, nous allons jeter un oeil à la structure de fichiers Trans Verceles et vous assurer que vous êtes à l'aise assis sur un projet de développement Web. Jetons un coup d'oeil aux outils dont nous avons besoin. Donc, ici, nous allons nous assurer que nous téléchargeons le choix du navigateur Chrome. Il y a d'autres raisons à cela, comme vous l'avez tous en face du développement, Chrome est vraiment facile de vous aider à déboguer beaucoup de problèmes que vous auriez. Deuxièmement, nous avons descendu les textes sublimes et ce que c'est, comme vous pouvez le voir là-dedans charmant, juste de tout mettre ensemble. C' est un éditeur de code, et cela vous permettra de construire des choses au fur et à mesure que vous allez plus loin. Donc pas seulement chaque humain. Il nous voit, mais vous pouvez commencer à construire d'autres langages de codage ici. Je voyage le nœud python de script. Le monde est votre dernière huître. Au moins, nous voulons vous inscrire à l'avion de papier dot io Maintenant, il est libre d'essayer et je peux même signer dans mon compte en ce moment. Vous pouvez voir ici que j'ai un certain nombre de sites sur lesquels j'ai travaillé pour moi-même et pour différentes entreprises avec lesquelles j'ai travaillé. Donc, vous pouvez facilement avoir votre propre site Web hébergé par avion papier et vous pouvez travailler hors ajustement là. C' est vous savez, quand vous travailliez avec du papier, il est juste connecté par le biais d'un compte Dropbox. Donc, une autre chose que vous pourriez vouloir configurer est votre propre compte Dropbox. Et si vous ne savez pas, c'est juste aller à Dropbox No. Venez installer ceci gratuitement aussi. Vous obtenez donc un logement gratuit pour tout ce dont vous avez besoin au fur et à mesure que vous commencez. Alors maintenant que nous avons le chrome sublime et nous partons sur un bétail peuple plain io et dropbox, si vous n'avez pas déjà cela, allons parler de ce qui se passe comme nous marchons à travers la nature, ma demande marchant leur nation sur demande. Alors que se passe-t-il quand nous tapons ce www google dot com dans notre bar à omelettes ou robe grange dans nos navigateurs ? Le navigateur n'a aucune idée de ce que signifie Google. Quoi, Donc, il cherche l'adresse I P, et ce que cela signifie, c'est, il attend avec impatience. Système de noms de domaine. C' est essentiellement un annuaire téléphonique. Donc, nous connectons le nom de domaine, qui Tom à une adresse I. P, qui est une série de chiffres et qui est défini à partir du navigateur comme un protocole de transfert hypertexte . Ou requête http essentiellement demandé son google dot com pour HMO. Nous obtenons cette réponse, lit le navigateur reçu et il décide, qu'est-ce que l'affichage téléchargé ? Peu importe. Nous en avons d'autres qui nous aident. Et Boof Ouais, on a un site web. Peut-être que les autres ne sont pas vraiment là, mais tu sais que tu comprends. Et la raison pour laquelle avant d'aller avec une structure de fichier et les transferts, c'est la raison pour laquelle nous parlons, euh, savoir quelles réponses de requête est parce que vous ne comprenez pas que le navigateur lui-même est ce qui traduit votre manteau pour vous. Alors pourquoi vous faites cette demande sur Internet et va au bleu sauvage là-bas. Le navigateur est ce qui aide réellement ici, et ce qu'il reçoit est ceci. Donc toutes les informations d'idée dans ces fichiers texte et tous ces Texas ont regardé les dossiers gars , je devrais dire, et ces fichiers sont stockés dans des dossiers. C' est donc la plus grande idée que je trouve que beaucoup de gens ne comprennent pas ce que le développement est littéralement juste une restructuration complète. Tout site Web sur lequel vous allez contient des fichiers très spécifiques, mais ce ne sont qu'un dossier et vous pouvez l'avoir sur votre ordinateur à tout moment. C' est ça. Tout le monde payé que vous avez déjà visité sur Internet est un tas de taxes organisées d'une certaine manière sur un ordinateur. L' importance de la construction de ce site va commencer par les intronisés, donc nous l'avons déjà vu. Donc nous sommes allés dans un domaine et vous avez juste un nom de domaine ou vous avez le nerf signifie planquer sur Daddy Shima. Vous voyez généralement l'échelle après avoir cliqué sur ce menu éléments et site Web. Mais si vous voyez le premier, vous avez fini sur la page d'accueil de côté. Maintenant, l'induct Sandy Chanel est le fichier de défaut de la page d'accueil. Nous commençons donc à construire nos curiosités aujourd'hui, y compris le cookie Rest Me et Folio Léger. Notre page d'accueil va être nommé point index Aoshima Donc il devrait toujours y avoir le nom de votre maison. Nous pensons également à la construction de nos sites. Nous voulons nous assurer que nous comprenons la structure des dossiers. Donc on a tout mis ensemble. Pourriez-vous vous assurer que nous avons un dossier haut de gamme ? Voici mon site d'actifs impressionnant là-bas. Nous avons ensuite un dossier d'actifs qui peut contenir des images, des sons occultes, choses dont nous pourrions avoir besoin pendant si longtemps. Nous n'aurons pas de dossier Styles et qui contiendra notre CSS. Donc que ce soit nos moyens, oui, Asir, qu'est-ce que tu vas être là ? Et enfin, nous pouvons avoir un dossier de script de travail et c'est un peu le niveau suivant. Donc, au-delà de l'introduction du succès Tosun, l'autre front et le code, vous penseriez à son code JavaScript et ce genre de fournit une fonctionnalité de troupeau à nos sites Web et vous arrivez à en apprendre plus tard dans une classe distincte. Et puis finalement, nous avons notre html cinq. Nous avons donc notre indice, nos valeurs, problème de contact humain. Évidemment, vous n'avez pas besoin de vous construire à l'une de ces choses, Mais rappelez-vous que chaque numéro de Valley build se terminera par un point html et rappelez-vous que votre page d'accueil devrait toujours être une indexation. Quelques notes sur la structure et passer par le haut et le bas de votre structure de fichier sel de transfert. Donc, soi-disant étaient dans notre dossier de documents sur notre ordinateur. Nous avons quelques dossiers ici, y compris notre site Web. Si je veux accéder à mes mains lui-même, le PNG est tombé dans mon choix probablement. Disons que pour dépasser cette image de mes documents, je ferais quelque chose comme mes actifs de site, mes mains, les P et G. Les barres obliques avant sont la même chose que vous cliquerez sur quatre mois, si facile. Mais que se passe-t-il si nous construisons du HTML ou du CSS et que nous voulons accéder à quelque chose dans l'eau ? Alors quoi ? Je veux entrer dans mes cellules. Ils sont comme ça et je veux obtenir mon image de là. Dans ce cas, j'écrirais sur ce slash assets cash, mon fringant semble que je sais que c'est chez moi lui-même, mais, mais, vous savez, j'ai tellement de fichiers de mon beau Soi. Très humble. Si vous pouvez dire dans ce cas les points Ashraf signifie monter au niveau, puis aller à l'intérieur et d'autres dossiers. Dans ce cas, on monte un niveau et on va à l'intérieur de la Floride avec très bien. Où ça la demande. C' est obtenir ces images. Je ne reviendrai pas trop sur ce point maintenant, mais vous gardez toujours à l'esprit. Donc, nous commençons à connecter des images ou des histoires de fichiers CSS. Honte dehors. Nous devons être à l'aise de mettre cela dans le code lui-même afin que nous puissions les lier et les connecter ensemble. Donc maintenant, nous avons passé quelques morceaux en train de commencer. Entrons en fait dans la construction de la CSS d'assurance elle-même. 3. Les bases du HTML: Ok, donc commençons par un problème de base. Nous donnons donc notre structure de contenu. Nous pensons à la base de l'ami et du développement ou du développement Web. A. Elle mâle est nos clous en bois de notre maison et CSS. Nous allons apprendre que la prochaine est plus de notre dit. C' est dans notre style. Alors qu'est-ce qu'un Shima ? Asian L signifie langage de balisage hypertexte. C' est un langage utilisé pour afficher des textes de contenu, des images, des tableaux. Des liens vous auraient. C' est aussi un langage pour donner à nouveau la structure de votre site. Est-ce que cela va continuer à avoir besoin là-dedans ? C' est aussi un langage Web frontal, ce qui signifie qu'il est interprété par votre navigateur. La différence entre Friendly, qui ne soutient pas les langues, est que le navigateur sur votre ordinateur Chrome Firefox safari aurait. Vous prenez ces informations et les affichez, téléchargez, traduisez pour vous permettre de comprendre facilement pourquoi à l'arrière, cela va être traduit par un serveur et vous transmettre. Le navigateur n'a rien à faire. Donc, la chose à propos de la structure pour le nombre supplémentaire et il obtiendra un exemple de code dans une seconde ainsi nous regardons la structure récréative la plupart des balises html vont avoir une balise ouverte et une balise de fermeture. Donc, où vous voyez que les crochets et le nom de la balise et les crochets et le marquage à nouveau, mais une petite barre oblique avant que ce sont nos éléments. Donc le nom de Ted, autre nom de balise et entre les deux sont des vies de contenu. Je veux dire tag ou élément. Donc je pourrais dire, soit parce qu'ils veulent dire la même chose. Dans quel développement ? Quelques liens d'échantillon. Nous jetons un oeil ici avec le temps de titre, qui donne l'information dans le titre du navigateur réel de l'âge que nous avons dans chaque étiquette, qui est des sables pour la tête de cheveux cul, qui est assez logique assez évident. Ils le sont. Nous avons une taxe de lien lorsque nous lions des images sur la page déployant deux. Nous étions une nation différente. Je devrais dire que vous allez utiliser une taxe de lien pour ça. Jetons donc un coup d'oeil à un code et voyons à quoi ressemble une honte. Sors ici. Nous regardons un e-mail très basique basé sur un exemple afin que nous puissions nous débarrasser de toutes ces autres pièces ici. Et, euh, juste au cas où vous seriez curieux quand je regarde en ce moment, c'est moins. J' ai appelé Coop en dot io. Je l'utilise souvent pour montrer des exemples de code sur le site, et c'est une autre façon qu'ils construisent Conan jouer autour de cela par vous-même sans nécessairement besoin d'un ordinateur de zone encodée, bien que je suggère d'obtenir ce texte sublime pour les projets que nous jamais. Chaque balise ici, et c'est un élément d'en-tête, et les en-têtes sont utilisés pour vous assurer que vous avez des informations sémantiques pour chaque section du site. Nous avons donc de l'avance, et nous pouvons également avoir un paragraphe. Donc, nous avons un petit paragraphe ici, qui contient des informations de paragraphe et un lien, et vous verrez ici que ce lien a chaque repos. Qu' est-ce que ça signifie ? Cela signifie une référence hyper link, lui dire où il va. Dans ce cas, je n'ai pas aller au compte Google directement changer. J' aime tout ce qui est à l'intérieur de ces guillemets pour l'instant, dites bienvenue à Intro Pretty Straightforward. Alors prenons quelques autres tags et réfléchissons à la maison. Nous concerts en utilisant un shima avant d'entrer dans des tags supplémentaires. Je voulais passer en revue un ou deux, donc vous trouvez que les athlètes vous permettent de définir certaines caractéristiques sur l'attaque. Donc revenir les rues sont à nouveau qui être treff, que nous avons cherché un attribut de style, que nous pouvons en parler. On parlera un peu. Nous obtenons CSS et classe et je d dont nous parlerons aussi. Nous allons nous voir quelques exemples rapides que vous pouvez voir ici Nos onglets d'image, qui avaient besoin de prendre dans une source, devraient être notre photo que nous allons réellement afficher sur l'âge à nouveau sont liés tag ci-dessous, que nous prenons en charge. Google, comme vous pouvez le voir notre paragraphe dans et chacun d'eux ont tous deux différents ici. Donc, nous avons une classe qui va affiner les styles externes pour le paragraphe. Et nous avons un style Tiger Norwich qui souhaite trouver des styles internes dans les pages et ce qui a été défini exactement ce que les viandes internes et externes je ne pense pas que je veux faire est sur cette page. Est-ce le dans la source de l'image où la balise image, je devrais dire, n'a pas de balise de fermeture ? C' est une poignée de balises en html, mais n'a pas besoin de fermer l'image de balise étant l'un d'entre eux. Alors que tu apprends ça. Assurez-vous de vérifier deux fois sur des sites comme W trois écoles. Que vous soyez HTML ait besoin d'une balise de fermeture ou non, il vaut mieux que les économies soient proches. Hum, ça ne causera aucun problème, mais ceux ne l'ont pas fait donc nous parlons de ces balises HTML, et les autres comme nous avons ici, quelques-unes des bases dont nous avons besoin pour commencer sont juste ici. HC Homme, tête et corps ont tous une taxe de clôture, et ils définissent notre page. Donc, quand nous commencerons, votre médecin le fera. Maintenant, nous voulons chaque équipe sur le top veulent, suivi par devant tout le monde et ensuite aller à l'attaque du corps. Nous avons des choses comme la balise de navigation, et Mata nous permet de définir des liens de navigation ou un élément qui va contenir des routes de navigation à l'intérieur de celui-ci. Et nous avons des choses comme celles de Dave ou des sections, et ces deux sont des onglets différents avec. Ils définissent une section avec des documents jusqu'à jeunes que nous avons quelques taxes supplémentaires donner éthiciens, ou d'ajouter de la couleur et de l'imagerie à votre côté. Donc, vous avez des choses comme le tag horizontal ne sera pas juste était une petite pause, une petite bordure entre le site d'image que nous avons vu la forme, nous pouvons voir que chacun nécessite un attribut de source, donc nous n'avons jamais image. On va prendre le métronome. Quoi ? Amy ? Pour montrer la forte et la balise AM, qui à la fois Bolden est un texte ou souligne que l'italique et la rupture longue et la règle de garniture de frein . Donc, nous révélons la balise, qui casse tout dommage de contenu lui-même. Jouez à ces balises lorsque vous apprenez à coder et à voir ce qu'elles font à votre contenu . Donc, avant de construire notre recette de biscuits, parlons d'autre chose. On va garder à l'esprit une autre taxe. Nous allons parler de l'imbrication HTML. Alors, qu'est-ce que l'imbrication ? HTML il ayant des éléments dans les éléments. Alors pensez à cela comme un type de relation parent et enfant. Et rappelez-vous que de vos parents, mais regarder le comportement de certains des grands va être hérité des Enfants. Une bonne façon de commencer à penser à l'imbrication est sous deux formes. Listes et tableaux. Maintenant, nous sommes Mantle Street sur ce sujet aujourd'hui avec notre équipe ici, parler et sont sur notre page de profil. Mais vous pouvez également jouer une table ronde dans cette liste d'éléments. Allons-nous commencer soit dans deux balises différentes soit des listes ordonnées ou une liste non arrosée dans chacun de ces éléments de liste de maintien. Ces petites taxes de L un. Donc, nous allons jeter un oeil à cet exemple en seconde, mais assurez-vous juste que vous pensez que c'est hors de l'ordre. Ce mur était numéro quand on les voit dans un Shimao et je suis en ordre. C' était avoir des points de balle et chacun de ces points de balle ou rappelés va être des éléments de liste eux-mêmes signal que vous avez des tables maintenant. Les tables ne sont pas souvent utilisées dans un flux sortant, sortant de l'avant dans le code, mais elles sont très utiles pour des choses telles que le démarrage d'un CV. Peut-être avez-vous besoin de tableaux et de cellules exacts assemblés. Et encore ces air seraient commandés par la table principale, la route dans la table et les colonnes de dans leur propre. Jetons un coup d'oeil à un problème, pas d'exemples d'imbrication, et nous voici. Donc, nous avons quelques exemples étaient ici. Alors d'abord, remarquons quelques choses. J' ai un peu ici trouver une section sur l'âge lui-même. Il a un enfant. On a aidé au paragraphe. Donc ce sont des enfants dans cette div apparente à nouveau, un nid, il n'a pas besoin d'être une table de lister. Il peut s'agir de n'importe quel élément de la page. Nous regardons celui-là ordonné lys ici. Vous pouvez voir que nous avons chacun un individu et je n'essaie pas un seul cri aussi. Mais indigènes sous l'enfant trois, nous en avons un autre pour énumérer et cela peut être nos petits-enfants. Et j'ai dit à la branche d'Herman, tu devrais dire des petits-enfants à là. Enfin, c'est rafraîchir femme. Donc c'est quelque chose en tête. Rien. Il va beaucoup plus loin malade de votre enfant. Tu as un petit-enfant, tu as ton arrière-petit-fils. Même sur une chose à jeter un oeil ici est une fois de plus ces indésirables moins Vous avez remarqué qu'il ya des points de balle. Si je change son étiquette pour que vous savez bien que Lis ordonné étranger, vous remarquez maintenant que j'ai 12 et 3 pour ce seins nus. Et parce que c'est de la pierre sur ordre déclenche un point de balle encore en dessous de ça. Donc encore une fois, je pense que lorsque vous mettez en place la structure de votre site Web, si vous avez à faire l'imbrication devrait être une automobile moins importante ce combien de Statham avez-vous besoin ? Et si tu es Nessen, tu veux qu'elle hérite de ce style. C' est quelque chose à propos plus tard quand nous parlons de CSS. Alors maintenant, notre prochaine pièce fait ça grand pour toi. On va parler des meilleures pratiques très rapidement, et on va faire un labo. Donc on va commencer à construire une recette de biscuits ensemble. Donc, d'abord, les meilleures pratiques commentant. Toujours commenter votre code et votre maison. Vous pouviez voir ici. C' est comme ça que vous construisez un commentaire. Dans chaque email, nous avons une petite explication de carotte, partie deux tirets. Et vous mettez dans votre commentaire là et puis deux tirets enferment la carotte. Tout dans le commentaire est ignoré par les navigateurs. Vous ne vous inquiétez pas qu'il apparaisse dans votre code, mais cela aide vraiment vous et les autres personnes avec qui vous travaillez à comprendre votre manteau. C' est une bonne pratique et je vous le dis définitivement comme vos bâtiments dehors. Alors allons sur notre premier site ensemble. Nous allons ouvrir le dossier de recettes de cookies et ce projet a commencé dans Sublime à dans un contenu de taxes pertinentes faire apparaître comme l'image y compris, que je pourrais vous montrer dans une seconde. Ils ne prendront pas une minute de pause. Juste que vous partez, vous obtenez un étirement de café. Sentez-vous bien. Fais un haut. Jetons un coup d'oeil à notre dernier exemple. Ici. Regarde ça. Nous pouvons construire cette grande recette d'homme en pain d'épice. Ne vous inquiétez pas pour le style de cela encore. On va construire le moulin de l'Est. Ça ne partira pas de là. Alors, comment ouvrions-nous ? C' est le contexte. Qu' est-ce qui est le premier ? Ouvrez un texte sublime. Test 1 sait que tu vois ici et c'est Azizi. Aide. Va par ici. Oui. Vous savez, encore une fois, la solution moi et attraper notre code commencé, le fichier de recette et allait glisser et déposer juste ici. Et je n'ai pas vu sublime. Nous l'avons fait. Je ne suis pas sûr. Il faut qu'on se connecte. Et nous avons nos études approfondies. Schimmel a déjà préparé pour nous. On va construire cette recette de biscuits pour un grand-père. Et il a tout écrit pour nous dans la nation. Beaucoup déjà. Donc d'abord, je vais au moins m'assurer qu'on jette un coup d'oeil et qu'on ait une idée de ce qu'on fait. Donc, nous nous souvenons de ce dont nous avons parlé avant. Démarrage du document externe. Nous devons en fait certainement une taxe de base. Donc d'abord, nous aurons besoin d'un pack de Michel. On aura besoin d'une étiquette de tête. Je vous préviens, Fermer qui avait tag parce qu'il se referme. On aura besoin d'une étiquette de corps. Oh, non. Fermez ces Cheveldae obtenir vos corps dont il va contenir tout le contenu qu' on veut y mettre. Et nous voulons dans l'attaque est-allemande de fermer à la fin. Quelques choses qu'on fait ici. Une chose à laquelle nous voulons penser est de mettre dans une balise de type dock et ce que c'est, c'est juste dire à l'ordinateur, Hey, ce fichier qu'un bâtiment est une honte. C' est tout. Ça te dit juste, Peter, Peter, quoi ça se traduit ? Et nous pouvons mettre dans l'un des types que nous avons parlé de la piste titre. Ils ne l'appelleront pas « Pause cookies ». Veillez à ce que les vêtements. Donc nous avons déjà ce contenu de grand-père. Tu vois ça ? Il a écrit un peu de contenu HTML. Prenons toutes ces informations. Eh bien, il y a du CSS ici, mais plus à ce sujet encore. Koppett, par ici. Juste un joli petit exemplaire. Ça a déjà coupé qui ? Je l'ai juste copié. C' est bien. Juste au cas où nous en aurions besoin, attrapez tout, peut-être qu'il suffit de le retirer. Donc c'est beaucoup plus propre et maintenant on ne pense pas à ça. Donc, quand je parle d'ajouter des balises de religion, pensons à cette image que nous avons. Nous voyons donc la solution elle-même. Voyez-vous quelques semaines que nous n'avons pas eu. Nous avons un en-tête. hommes en pain d'épice, nous avons une image. Nous pouvons voir que les recettes par grand-père et vous voyez que c'est dans un talent de sorte que vous pouvez voir qui a été en taille. Nous voyons également qu'il y a d'autres titres ci-dessous, mais ils sont plus petits que celui-ci et quelque chose dont nous n'avons pas parlé. Mais garder à l'esprit est que chacun pour une attaque à la tête. Il y a différents niveaux d'en-têtes, donc il y a chacun un à six, donc vous pouvez définir les choses comme jamais, en-têtes tout le long de la page. Dans ce cas, je pourrais dire que ces air sont très probablement chacun deux puisque leurs sous-en-têtes de Marine Ashore parlent. Enfin, nous avons pu voir ici que nous avons les ingrédients dans une liste inchangée et les instructions, vous savez, avec nous. Nous avons ici un autre texte souligné pour l'information nutritionnelle. Donc je pense que nous sommes prêts à y aller. Revenons à notre code. Pense à la façon dont on va nous construire. Donc, d'abord nous avons dit que c'était évidemment elle, et nous savions que cela était souligné. Si on y retourne, regardez cette image. Ces deux-là ont l'air bien. D' accord ? Taille. Mais je savais que j'avais mis ça ici. Mais comment je vais le tester ? C' est là que le chrome entre en jeu. Lorsque vous testez votre impôt, votre HTML et votre CFS, vous n'avez pas besoin de spécial où vous avez chrome. Vous avez un navigateur ? Donc si je vais à mon dossier, tu l'ouvres. Oh, je peux voir que Junior Birdman a été ajouté comme en-tête et je peux voir cette recette. Bagram euh, son accent n'a pas l'air très bien maintenant. Pourtant, quand quelqu'un est là, quelque chose que j'ai oublié est l'image de la femme. C' est entre grand-père. La recette par centaines, quelqu'un On avait l'image là-dedans. Retournons à la ligne de ravitaillement et à la prise du train sur moi. Souviens-toi, ça a rassemblé une image là-bas et notre source est que ça va être ces cookies que PNG C'est tout ce dont nous avons besoin. Nous n'avons pas besoin de fermer quoi que ce soit, et l'image devrait être sur le site. Maintenant, passons aux meilleurs cookies frais. Oh, donc il n'y a pas de mal. Jetons un coup d'oeil ici. Non, je vois ce que j'ai fait. Alors assurez-vous qu'on fasse attention à ce qu'on trouve dans leur cheville J, pas P et G 5. Donc, lorsque vous mettez une image, vous voulez vous assurer que vous n'êtes pas seulement mis dans le nom des images, mais aussi quel type de fichier est dans ce cas ? Et J. Peg retourne ici. cookies de grand-mère. Actualisez la page. Oh, nous avons les richesses, mais c'est énorme. Bon, alors qu'est-ce qu'on fait pour ça ? Eh bien, l' une des choses dont nous avons parlé c'est un peu introduire. CSS est cette interview de style, et nous pouvons l'ajouter directement à l'attaque. Maintenant, ce n'est pas une bonne pratique. Vous mettez un style directement sur une page, mais vous le faites dans ce cas, disons que l'ascenseur réduit également la hauteur de l'image. C' est 400 pixels. Dis mal, frais, beaucoup mieux. Pas besoin de ce message pour sortir correctement, donc nous avons encore quelques choses que nous pouvons faire. Mettons ces gars dans des paragraphes depuis leurs informations séparées. Maintenant, une chose à propos de ces paragraphes impôts, c'est qu'il va toujours s'enfermer. Donc, ils vont être des blocs complets de texte descendant comme vous le feriez pour définir un paragraphe sur la page. Souviens-toi, on construit une femme mâle. A l'origine, on pensait à un meurtre. Comment vous construisez des magazines ou d'autres documents papier. Donc encore un peu comme un document papier. Mais ne pense pas à la même chose que nous étions. Pense à Ok, allons-y. Donc, nous obtenons beaucoup de ceux qui choisissent chacun les ingrédients, les besoins, les gens. Il se refroidit là-dedans. Et maintenant, nous avons notre première liste. Alors rappelez-vous, nous avons mis en place une liste et dans ce cas, c'est un Lis Nord. Tu veux, disons, disons, un autre moins ou toi, on n'a pas fait en sorte que nous fermions ça pour toi. Et puis quand vous vous assurez que chacun de ces éléments ou à l'intérieur d'une liste hag copier des morceaux tout le long du tableau. Et une chose agréable à propos de sublime, ça me permet de faire des choses comme ça. Donc je fais est de tenir ma clé de commande pour Windows. Croire que c'est le contrôle pour PC est Amy mettre ces petits marqueurs qu'une fois de plus, et qui peut créer tout ce code à la fois. Une des raisons pour lesquelles il est juste d'un texte est qu'il a ces petites astuces pratiques pour rendre votre codage plus rapide. Donc il a mis en place des listes d'instant. Retournons aux biscuits de grand-mère. Rafraîchissez-le. Ah, on a l'air très bien. Souffrez un plus facile. Et j'ai remarqué cet été que vous êtes, mais les échantillons de respirateurs étaient à côté de l' image. Quelle est la différence ici ? Pourquoi on met l'accent sur le texte ? Ce n'est pas le cas. C' est un bloc. Ça lui donne juste un style différent. Donc ça met grand-père dans un paragraphe. Qui devrait le fermer ? Oui, on a l'air plutôt bien. Alors je vais m'arrêter ici. C' est à vous de nous terminer maintenant. La pièce suivante est de mettre ces directions dans Ed ordonné moins, veillant à ce que vous donnez à nouveau ceux chacun enseigner chacun à qui est un en-tête pour chacun de ces morceaux. Soulignant cela et nous allons parler du style dans un peu quand vous avez fini d'ajouter tout ce qu'elle Mel, assurez-vous de supprimer tout cela supplémentaire. Copie que tu ne parles pas de la paix CSS et un peu ses genoux de Nick. Donc, avant de voir un SAS, parlons d'un projet. Donc, M. Ransom électeurs asiatiques maintenant pour la recette et nous allons construire est alors ceci à partir d'un projet ici, qui est simple à page portfolio index site B de son site portfolio ici est habillé un peu sur moi, Alors assurez-vous qu'on va ajouter notre nom. Il a ajouté un peu de nous ici. Et ne vous inquiétez pas, j'ai une copie à utiliser. Mais, vous savez, le créateur Bill, utilisez vos mots ici pour mettre notre propre image. Dans ce cas, voyez-vous, ma belle a du mal à être 100 par 100. Grand carré. Je pense que cela semble juste et, bien sûr, liens vers tous les médias sociaux. Sur un autre portefeuille de pages, une chaise. Vous voyez que nous avons notre expérience et que nous commençons juste un petit pavillon ici, y compris notre développement Web pour la page d'accueil pour grand-père dot com. Recettes préférées. Arjun, allemand et aussi notre éducation ici Une petite liste de ce que nous avons appris, y compris notre introduction à la publication sur CSS à nouveau. Sources de la Ligue, médias. Donc on va construire tout ça ensemble. Maintenant, si vous voulez commencer tout de suite, vous trouverez du code de démarrage dans le fichier de projet de démarrage sous projet final. Et vous y trouverez aussi des exemples de textes que vous avez ici et un fichier html point d'index qui n'a rien d'autre que les bases nues. Tu dois commencer. Je vais jeter un coup d'oeil pour vous maintenant. D' accord, montons vers les aveugles. Rendez-vous dans notre dossier de projet final ici maintenant. Ouvrez notre Serco pour l'échantillon, Texan. Et voici notre index sur une femme mâle. Alors que vous construisez cela, souvenez de ces impôts pertinents ? Donc, nous avions avant que vous trouverez dans le fichier image ici à deux images du projet final lui-même. Donc soyez à propos de moi livrable et de la page de portefeuille livrable. Donc ça vous donne une idée de ce que vous allez construire et ceux pertinents l'ont encore fait. Jetez toujours un oeil à ça il y a. Ok, qu'est-ce qui va être un lien ? Qu' est-ce qui va être un en-tête ? Ce qui va être un paragraphe et tout ce qui va convenir dans ce corps dans ce document. Et encore une fois, vous avez une pagination HTML de base uniquement sur l'enquête. L' odeur. Rappelez-vous, vous devez construire un 2ème 1 Vous appelez juste profil que HTML ils vont lier dans ce que nous allons dire sur le lien vers un côté quand les choses nous une fois de plus, nous avons été ancrés type pour chaque balise femelle. Assurez-vous que nous savons que c'est HTML et que vous pourriez remarquer quelques autres balises ici. Maintenant, un. Vous remarquez quelques attaques rencontrées ici et toutes les balises meta sont des informations utiles pour PDG, donc je peux mettre dans la description de mon site Web. Il travaille autour d'elle, et je ne peux pas ce jeu de caractères disant aider à vendre le navigateur avec des personnages qui vont être traduits. Ok, un des après vous pourriez remarquer que c'est après vous dans le document réel. Donc, si vous Mel a la capacité d'être dans différentes langues et dans ce cas, je lui dis de traduire en anglais, jouer avec cinq valeurs différentes Ling priats, vous les trouverez en ligne. Ok, Donc avant d'entrer dans CSS, une dernière chose, assurez-vous que nous sommes prêts pour est de lier tout l'autre. Donc nous avons parlé d'une taxe avant leurs étiquettes d'ancrage de club. Laissez-moi m'assurer que c'est clair, et ils vous ancre à d'autres parties de votre site Web. On est à l'extérieur de votre extérieur. Dans ce cas, si je dis que je veux un, Je pense au portefeuille féminin et voici le type de portefeuille showplace parlé correctement. Je n'ai jamais de lien vers la page du portefeuille, donc quand nous lions des pages ensemble, c'est un simple est en place. Nous allons le mettre ancré à nouveau usar un projet de penser à une référence à cette page pour savoir où chercher. Et nous avons effectivement publié nous que nous économisons pour voir que cela n'aura pas de lien d'âge qui va à l' âge de la question. C' est comme ça que vous arrivez à un site lorsqu'il est payé sur place à un autre pour poursuivre ces attaques d'acres. Allons sur CSS, et puis nous reviendrons à notre caressée et commencerons un peu d'un projet final avant que nous et tout 4. Les bases du CSS: Donc, parlez de CSS. On va savoir ce qu'est le Dom et qu'en est-il de ce que ça veut dire ? Et encore une fois, la première. Qu' est-ce que CSS CS signifie feuilles de style en cascade ? C' est un langage utilisé pour changer l'apparence d'un élément chiite ou d'une taxe et permet réutilisation. Donc, quand nous pensons à des aspects de l'apparence, nous pouvons d' abord changer le rembourrage de la couverture de police et les marges autour des éléments ou à l'intérieur des arrière-plans d' éléments, mises , bordures, ingrédients auraient vous tout ce qu'ils peuvent individuellement sous forme de style. C' est ce que CSS sert. Nous parlons de l'aiguille que vous réutilisez. On a vu que j'ai mis cette petite salope du Sud dans un tigre HTML et que la vérification de l'image à elle est la avec. Mais si on voulait l'utiliser à tous les niveaux ? Ce serait vraiment difficile à coder. Chaque étiquette. Le textile bien CSS nous permet de faire n'est pas seulement le style sur l'attaque elle-même. Donc, à la page de niveau supérieur dans la zone d'en-tête, mais plus important encore, et ce que nous allons faire pour notre projet final et pour les cookies, euh, recette Israéliens, feuilles de style externes et cela nous permet de créer des styles une fois et les lier à autant de pages Web que nous le voulons, et c'est vraiment activer les bobines et rendre notre vie beaucoup plus facile. Quelle est la course ? Nancy Évaluation Comment cela fonctionne-t-il ? Donc c'est fondamentalement une façon élaborée de rechercher Nishi, Mo. On parle de ce qu'est le Dom. Consultez la syntaxe que nous allons apprendre sur les sélecteurs de base, comment sont capables de connecter des stries CSS hors classes, ID et balises. Nous allons aussi parler de spécificité et d'héritage, et vous êtes les SS. Et c'est l'idée. Comment un élément enfant obtient-il un style d'un parent ? Et je ne peux même pas très précis que ce que nous bloquons sur notre page. Vérifions ce Syntex d'abord. Alors, d'abord, vous rejetez un coup d'oeil à cette question Mormons. Encore une fois, tu vois du shammo ? Nous avons notre tag, mais maintenant nous avons ces attributs de classe les mêmes. Mais nous avons toujours cette viande transformée avant, et nous lui donnons juste un nom de famille. Et si on devait styler quelque chose d'extrême en utilisant ça fascinant ? C' est à quoi sert CSS. Donc, nous jetons un oeil à la façon dont CSS est construit. Vous voyez que nous avons point un nom de classe, mais ce point est qu'il dit que CSS que je fais un nom de classe n'importe quoi. Et puis on va lui donner des propriétés. Et ces propriétés font partie de notre style. Certaines propriétés à venir comprennent pensée attendre pour la couleur de fond de couverture , Ombre Tech, Qu'avez-vous donc vous pouvez construire toutes ces propriétés et leur donner des valeurs différentes ? Et nous regardons ce que sont ces idées. Une autre chose à penser est que l'utilisation de plusieurs classes dans directionnel Alors pourquoi nous pouvons avoir une classe qui a un tas de valeurs différentes de propriétés dessus. Nous pouvons avoir une autre classe qui est de parler très spécifiquement, changer une chose une bonne idée serait Hey, Je veux m'assurer que tous les liens sur mon site ouais, affiché côte à côte dans une rangée et je veux modèle. Appelez ça bleu et je veux m'assurer qu'ils sont tous vieux. Et si je dis que j'en veux un ? Particulièrement CSI Preuve vu souligner. Donc je veux lui donner nos talents dans ce cas. Maintenant, je pourrais utiliser une balise M pour lui donner automatiquement ce texte accentué. J' ai parlé, mais la meilleure façon de vous serait d'utiliser CSS et vous ajoutez juste une autre classe sur ce peu d'un Shimo. Alors on l'appellera « The Classic » pourrait être des italiques spéciales, mais ça vous donne juste une idée. Vous pouvez commencer à combiner des classes ensemble si vous voulez créer un style très spécifique avec quelques autres options. Il en va de même pour Tommy et Hamlets qui fonctionnent avec notre CSS HTML tandis que le dollar représente le modèle d'objet de document. Et c'est l'interface A P I ou de programmation d'application pour son, vous savez, en utilisant les programmeurs stupides, ingénieurs, développeurs peuvent construire des documents, naviguer dans la structure et ajouter ou modifier et supprimer éléments dans leur contenu. A quoi ça ressemble ? C' est, tu sais, passons à travers. Nous allons utiliser les outils de développeurs de Chrome pour cela. C' est l'une des autres raisons pour lesquelles nous voulions utiliser le chrome pour cette classe. Quels sont les outils de développement ? Eh bien, ils ont utilisé pour beaucoup de choses, comme inspecter le dominant, une idée de ce qu'il est à la volée. Tu sais, César, pour m'avoir coiffé, avoir bogué notre code plus tard à la volée aussi. On y arrivera à tout ça à l'avenir. Mais d'abord, regardons la bombe. Donc, mais sortir de cela ira à notre recette de biscuits. Où ? Les cookies passés. Nous y voilà. Et pour ouvrir l'inspecteur. Vous avez deux options. Mais allons juste frapper le suspect à son sujet ici. Et ça ouvre notre inspecteur du corbeau et nous voulons jeter un oeil aux choses. Ouvrez-le et ce que vous regardez ici, dans cette fenêtre, c'est l'idiot. Donc, vous pourriez bien aller, cela prendra HTML. Eh bien, tu as raison. Le Dom n'a pas l'air d'un mâle. Et c'est parce que c'est traduit html et construire pour vous. La différence est l'article vivant du domicile. Donc plus tard avec CSS et que je vais script. Nous changeons des éléments dans le rendu domino vivant de sorte que le muet n'est pas envie ou innovation métal. Tu devrais savoir que ça va être statique, le domicile dynamique. Ils et vous l'utilisez déjà. C' est familier. Ceinture était en train de construire le dom, et comme nous commençons à grandir le style, ça va aussi obtenir qui vous donne une idée d'en apprendre plus sur le document hors de votre modèle. Consultez l'un des liens ci-dessous qui avait une ressource est pour vous d'en savoir plus à ce sujet. Maintenant, on a une idée de ce que veut dire le dom. Et puis c'est par version dynamique de notre contenu ou une page qu'ils ont changé à la volée. Et comment CSS relie Lynam est-il en fait regarder le dom pour dire, Oh, je vais faire n'importe quelle sorte de style pour différents sélecteurs sur la page connectée pour faire stream out ? Et comment ça se passe. Il le recherche par un sélecteurs CSS. Oui, il y a trois types de sélecteurs en CSS un très utilisé, et c'est juste n'importe quelle balise HTML. Donc, dans ce cas, si je dis que je veux styler tout a une balise P vendant tous les éléments de la page. Il y a des paragraphes, mais alors j'ai la classe et je ds donc des classes et nous laissons toujours avant de commencer comme une période mise dans mon nom de classe dans le A elle mâle a défini comme classe égale guillemets sur le classique lui-même. Pas de période. Nous mettons cela là, et c'est styles tous les éléments de cette classe, donc les classes peuvent être utilisées plusieurs fois sur une page. Les idées étaient un peu différentes. Les idées ont d'abord été classées en CSS avec une marque de hachage, mais dans votre nom puissant, peu importe ce qu'il est. Et puis dans la nation Mel, on aura à nouveau les guillemets au nom de ton I D au milieu . Pardonnez-moi pour ce genre de cendres que je n'ai pas de mauvaises cendres là-dedans, mais vous comprenez. Mais la grande partie sur les idées sont seulement un i d est autorisé sur l'âge des mêmes éléments. Donc si j'en ai un, j'ai appelé mon aussi avatar. Je ne vais l'avoir que sur une page à la fois. Donc, il pourrait être sur ma page d'index et il pourrait être sur ma page html et il pourrait être sur ma page de portefeuille de page de profil, mais il ne peut être là que. Nous, une fois. Donc, il devrait vraiment être utilisé pour des éléments très spécifiques, marin et utilisé une fois sur une page qui pourrait être une navigation de celui-ci. Cela pourrait être un élément d'image qui pourrait être même un curseur ou quelque chose comme un film qui apparaît. Mais vous seul qu'il est comme ceux-ci veut quelques propriétés de base de CSS. Donc, une base l'est probablement. Nous avons hors du pari que nous étions la famille de taille de police de couleur. Attendez tapotements de couleur de fond, les ordres , les marges , les textes, mien aller à approfondir, aller à chacune de ces valeurs à nouveau. Vous allez obtenir les deux diapositives et quelques liens supplémentaires sous cette vidéo. Mais rappelez-vous, lorsque nous faisons cela, nous devons nous assurer de nommer une valeur de propriété pour la propriété. Et nous pouvons regarder une partie de la description ici maintenant à des choses qu'ils donnent, surtout ou vers le bas. Le chapeau dans le rembourrage de la zone de marche est entouré de l'espace dans vos éléments CSS et marchant et voir l'espace extérieur. Donc, quand vous déplacez les choses pour vous assurer que les choses sont équilibrées, rappelez-vous, Patting rapproche les choses de l'intérieur, et la marge pousse les choses à sortir. Juste pour m'assurer que je l'aime dans leur tête après avoir commencé à exposer leurs pages. Jetons un coup d'oeil à quelques CSS en ce moment et avons une idée de ce que vous allez sortir ? Alors d'abord, jetons un coup d'oeil à cet exemple de base avant, alors rappelez-vous qu'avant que nous ayons celui-ci, bienvenue à l'étoile d'entrée CSS. Exemple Html. Nous sommes de retour ici dit Welcome classe à nouveau, mais maintenant il a quelques CSS connecté à elle et dire Bienvenue, Teoh Thean Voyage une fois de plus Là, nous allons. Et le CSS fait quelques jours donc nous jetons un coup d'oeil ici d'abord nous avons une idée de mon en-tête. Maintenant, je sais que ma tête ne sera qu'une fois localiser Il est très important donc j'utilise mon téléphone stylé Make it italics à nouveau Nous avons nos parenthèses Nous avons notre propriété Nom votre valeur de propriété et le nom de Al Vous allez être séparé par deux-points et la fin Toujours un cynique Suivant nous avons notre paragraphe ici juste information Ce radeau est un petit nom de classe Et encore une fois les classes pourraient être utilisées plusieurs fois Donc si je voulais faire un autre classique enveloppement de tête égale information Paragraphe devrait épeler ce droit Et il est à plusieurs reprises et aller là, Perdez maintenant sous le paragraphe avec cette couleur rouge que vous voyez qui a la couleur et la valeur de propriété rouge pour que Si pour chaque paragraphe faisant le texte lu Last mais pas moins à cet arrière-plan couleur presque élément d'ancrage. Ça me donne ce fond jaune, là, ça se déclenche. Typique. Donc, ce sont des idées de base. Euh, CSS Nous allons développer ce 5. STYLING CSS: Parlons donc du style de ce site de cookies et de la façon dont nous allons créer les styles ensemble. Donc, vous avez trois façons différentes et le style. Votre site web. Vous avez des styles de ligne, style internes et des feuilles de style supplémentaires. Nous avons déjà utilisé dans les styles de ligne de sorte qu'avec Element que nous mettons dans un attribut de style sur ce type d'image pour notre cookie. Initialement, cette recette de biscuits était initialement un style en ligne. Tu ne fais pas ça. Normalement, l'Inde singulière. Il utilise des feuilles d'arrêt internes et ils vivent dans des balises de style, généralement la santé dans la balise de tête de votre site Web. Ce n'est pas recommandé de le faire, mais on va l'utiliser de toute façon. Pourquoi nous apprenons parce que c'est génial pour un prototype. Donc, avant d'aller à la page suivante était la natation sur les draps Sud supplémentaires, voyons en fait ce qui intéresse tout ce qu'elle est sur la page. Donc nous sortons d'ici. Allons à nos sublimes textes. Quoi ? On n'a pas besoin de cette indexation, vraiment ? Où est ici ? Revenons à notre code de recette de cookies. Eh bien, je me suis débarrassé de tout ce qui commence déjà à zéro. Eh bien, allons-y encore. Nous voulons nous assurer d'avoir notre chaque femelle. Tad, notre étiquette de tête dans notre corps avait juste dans le contenu du support. Liz s'empare de notre continent ici. Nous allons jeter la description de cette première pièce ici. C' est mes clés. On ne va pas s'inquiéter pour rien d'autre en ce moment. Ici, vous mettez dans la balise de style. Maintenant, vous voyez lui-même avait des lampes à gaz et en fait vous faire savoir que vous construisez un fichier CSS problème et il a jamais été un début de mettre ces choses sur. Donc, disons que nous avons sont chacun pour l'homme en pain d'épice et nous allons dire faire un couple son où le premier va le faire par étiquette et dire que chacun a une couleur lu. Je crois que c'est juste Oh, ouais, vas-y. Qu' est-ce que c'est d'Omi ? Donc, quelques façons que vous pouvez styliser les couleurs en CSS est par code hexadécimal par des noms Web spécialisés ou des moyens de couverture dans notre TV A ou RGB. Donc vous avez un couple de gaspillage et de couleur Merci, je vais juste vous faire travailler avec du code hexadécimal pour l'instant. Ce sera plus facile. Et vous trouverez toutes les informations sur le code des chapeaux sur la combinaison de couverture pour eux en ligne. Il suffit de rechercher CSS Exco. Disons ça et voyons comment ces livres Allons ici. On aura ce rouge chaud qui est jaune, tu sais, pas parfait. Souviens-toi de toutes les couleurs de mon école, mais tu as l'idée. Donc ça veut dire que chaque étiquette que j'ai en ce moment aura cette couleur jaune. Et si je veux être un peu plus spécifique ? Eh bien, utilisons à nouveau ce nom de classe. Donc, disons la couleur rouge dans ce temps à partir de rouge couvert pressé et nous allons descendre à la recette par grand-père, lui donner des attributs de classe et ensuite la vérité va être lu couleur ici. C' est un ici. Rafraîchissez-le. C' est la couleur rouge. Donc juste quelques rudiments. Ici, nous utilisions des feuilles de style Internet. Nous mettons une attaque de style dans le haut dans l'en-tête commençant à droite CSS comme nous le ferions normalement à nouveau. C' est le nom de la propriété entre crochets, la valeur de la propriété deux-points, Cynical. Assurez-vous que nous fermons cette balise de style dans l'en-tête. Et puis nous pourrions connecter CSS comme nous l'avons vu auparavant. Soit faire des classes de balises ou, si vous voulez je ds à nouveau sur ma page plus profonde en arrière et dire mon i d bien donc la couleur dans ce temps fera un bleu Vous donnerez à cela un graphique. Le 90 est égal à mon I d. Ok, fermer tout, Soin frais et on l'a eu Bleu. Donc c'est un peu un intrus. Comment travailler avec CS nous d'abord. Maintenant, parlons de maintenant. Tellement des feuilles de style supplémentaires. Revenons au sublime. Oui, faites des pas en arrière. Nous remontons dans le temps et faisons tout cela afin que vous ayez un bon démarrage de poids propre. Mais maintenant, passons par ici. Alors, que sont les feuilles d'arrêt externes ? C' est donc des feuilles de style journal. Tous ces éléments de style sont-ils liés à un fichier séparé ? Et comment faites-vous ça ? C' est une attaque de lien ? Donc le tag de lien cherche ce creux et qu'un piège à nouveau c'est qu'en fait, ça va être un euro à un autre endroit. Dans ce cas, est l'euro de votre style. Feuilles vers le haut la balise de lien est placée dans la tête, tout comme les attaques de style sont à l'avant, et c'est la meilleure pratique pour les sites Web ou les applications en direct ou en production prêts. Vous n'avez pas de styles internes ou de styles de ligne dans vos sites prêts à aller en direct Donc nous comprenons quoi ? Notre recette de biscuits. Donc, nous allons à nouveau ouvrir, garder le dossier dans notre projet démarré faute et déjà l'avoir un peu. Mais, hé, tu sais, mais c'est fini. Et nous pouvons créer un dossier appelé CSS et faire un style ce fichier CSS. Et ajoutons quelques styles en fonction des souhaits de déficience, qui est également dans ce fichier. Et enfin, je vais lier la feuille de style à la question de l'âge. Alors sortons d'ici. C' est ainsi que votre salon s'inscrit dans notre beau début. Un manteau. Allons à ça. Cliquez sur votre parler malade. On va faire un nouveau dossier appelé CSS. Et dans cette nouvelle eau CSS, nous faisons le fichier. Vous voyez l'erreur comme le style CSS. Et maintenant, nous pouvons faire notre CSS ici. Donc on est à l'école jusqu'au bout. Nous voyons que nous avons une belle NCS nous paix et un grand-père, apparemment en tant que graphiste. Alors il nous a donné , hélas. CSS qu'il veut est assez senateur standard. C' était une couleur de salle de bain toute la page pour être effacée une fois une couverture des textes pour information nutritionnelle à 87 et vous regardez un bonus. S' il veut une bordure autour de tout l'âge et que l'image soit cette couleur, faisons d'abord quelques choses. Mettons des étiquettes dans la cage. On va continuer tout droit. Vous étiez des trucs géniaux ici qui se concentrent sur jouer l'image en extra droit sur la frontière. Nous nous assurons d'avoir les informations nutritionnelles que je ne peux pas montrer. Vous devez faire tout ce que vous pouvez jouer. C' est toi-même. Donc ça fait pour un peu chacun ici qui ? allons nous assurer que nous connectons réellement toutes les balises comme nous le voyons bon. Et la raison pour laquelle je fais ça encore et encore. Il est juste souligner que nous voulons nous assurer que nous avons toujours nos éléments ensemble. Qui est celui qui s'est fait foirer ici ? Head tag est tout seul. C' est tout le monde. On y va. Donnons ce type ici. Donc, vous savez, information nutritionnelle a été mise en avant. Oui, il y a un bon début. Salée Shimon Place. Donc retour sa couleur de la page tandis que les pages entières, soit le corps ou la question de l'actif il standard Lee, vous allez généralement faire corps votre couverture. Tout l'arrière-plan. Donc ça veut dire que dans tout le corps, je vais dire la couleur de fond. Ça va être blanc. C' est le premier. Deuxièmement, la couleur de la texture. information nutritionnelle devrait être égale 87 Eh bien, il n'y a rien qui identifie le texte, quelque chose de spécial autre qu'il est souligné dans un paragraphe. Mais nous savons qu'il va y avoir d'autres impôts soulignés parce que recette par grand-père aussi si vitesse. En outre, donc nous devrions mettre une classe ici se classe égale spéciale. Je pense que c'est un ami spécial, mais il y avait spécial donc peut parler, euh, inquiet le sien. Appelez ça de beaux textes pour des textes de couleur fantaisie. Et faisons-le comme un mot Il arrive. On va revenir à son style, penser à Dot pour s'assurer, Mme Class et on va doubler cette couleur 887, donc c'est génial. Et enfin, les dernières pièces qui bonus. Donc, quand une bordure de problème sur la page et autour de l'image. Mais tu sais ce qu'on a fait avec l'image de toi en jouant à l'ingénieur ? Vous êtes des images. La source est égale aux cookies. Choisis et on sait que toute la page tenait mon corps. Donc, quand nous utilisons l'ordre et nous dirons que c'est une bordure de cinq pixels solide, et la couverture de la bordure serait la suivante. Il en a coupé un autre. La bordure est un rôle CSS spécial car vous pouvez voir qu'elle prend trois valeurs différentes. Donne-lui un avec toi. Donnez-lui quel type d'ordre il s'agit. Il y a, hum, des exportateurs comme un tiret en pointillé qui en est probablement quelques autres, puis la couleur de la frontière elle-même. Alors mettre tout ça dans un droit ? Et enfin, faisons une chose qu'on a fait avant. Donc, nous avions avant un tag de style. C' est ça. La largeur de cette image 2 40 pixels. Traduisons ça au style, euh, plus vieux là-bas. Donc, il me manque un cancer. Nous ne vérifions même pas que c'est la seule image sur la page. Et comme instantané pour le dire, la même chose avec l'image sera pour les pixels. Je peux enlever ça d'ici. On devrait être bon d'y aller. Il en était de prendre les règles de la Grande Maison. Regarde ici, il est maintenant un frais qui semble assez snazzy. Oui, le missile CSS est là-dedans, vous dites parce que l'image est très grande. Donc, même si nous avons l'image là-dedans, tout semble plutôt bon. Les couleurs n'ont pas vraiment changé. Nouveau ceux sa taille d'image Qu'est-ce que nous ne faisons pas ? Eh bien, je ne me suis pas connecté. Bénis tu vois, c'est Sierra ? Alors assurons-nous que nous le faisons maintenant. Donc, vous ajoutez la balise d'inhalation. Et encore une fois cette balise de lien le dit. ISS Villa Vince est que c'est une feuille de style. Ce sera un fichier CSS, et il sera dans notre cookie et notre détenteur CSS. Donc, vous avez CSS. Rappelez-vous que le transfert de fichier Social Peace CSS aller dans le fichier slash style point CS a. Retournons ici frais, gros et oui, regarde ça. Qui Nous avons maintenant une frontière dans la cage. Nous avons l'image vers le bas et nous avons les informations nutritionnelles légèrement colorées, donc il est souligné dans un peu de beaucoup de couleur. Assurez-vous de jouer avec cette page de style dans traiter les choses que vous voyez, changer, arrière-plan, couleur, transfrontalier et rechercher d'autres propriétés CSS et valeurs que vous pouvez jouer avec ici. Alors maintenant, parlons de spécificité 6. INDÉPENDance en SPÉCIFICTÉ et vous: Royaume-Uni. Parlons donc de la spécificité, l'héritage et de la spécificité eso. Je ne vais pas tomber dans les genoux en ce moment pour que vous criez vers les cieux, mais c'est l'une des choses les plus importantes que vous devez comprendre en CSS et donc peut être votre ennemi. spécificité détermine quel rôle CSS est appliqué. Brian, le navigateur et ces quatre catégories distinctes définissent d'abord le niveau de spécificité de n'importe quel sélecteur donné dans les classes de styles de vie I DS et les éléments eux-mêmes. Qu' est-ce que ça veut dire ? Ce public ici ? Je sais que c'est beaucoup à obtenir, mais nous voulons penser à l'ordre du plus spécifique à publier spécifique dans ce qui est appliqué par le CSS. Donc, la chose la plus spécifique est le style de ST de sorte que le style Yngling un régal sur n'importe quel autre élément sur votre page va écraser tout autre sud interne ou externe. Elle, nous l'avons dit, ne l'utilise que normalement, mais il remplacera tout autre Idées. Leur deuxième classe à la troisième et la chose la moins spécifique sont des éléments ou des impôts parce qu'ils sont tellement étalés. En d'autres termes, si vous pensez à cela en termes de points, si l'élément a dans le style de ligne, et il est allé automatiquement à obtenir 2000 points Pour chaque idée. Ply obtient 100 points, classe très ou pseudo classe. Nous nous inquiétons de ceux-ci encore obtient 10 points et pour toute référence d'élément, il obtient juste un point. Donc, vous pensez à être très précis. Tu peux monter cet adolescent ou descendre l'équipe. Est-ce qu'elle voit nourri ? J' ai personnellement construit beaucoup de choses dans les cours parce que je sais quand vous utilisez la même ligne statistique à travers la frontière sur différentes pages de mon site Web. Mais si je veux être très précis sur quelque chose en plus de ça, je pourrais avoir une classe et avoir un I.D. I.D. Vous mettez les deux éléments là et soyez comme si je commençais ça un peu de ce style de classe , et cette idée est très spécifique à cet élément. Vous l'effacez avec ça. Prenons donc un exemple vivant. Donc, nous regardons un autre sauf avec le I d des boissons d'été, et j'ai ce genre favori d'entendre une classe un favori qui parle mon rouge et or préféré . Donc mon préféré a été vraiment le gangs, me saouler un verre. C' est relaxant. Et si on allait changer le moi lui-même ? Alors quoi ? On va dire, Hey, je veux Teoh. Utilise l'idée. boissons d'été et tous les alliés sont tous l'élément minant les déclarations, certaines des boissons à la couleur bleue au lieu de rouge. Eh bien, attendez, qu'est-ce qui vient de se passer ? Nous voyons que notre favori est toujours de travailler la pierre de classe là-bas parce que la famille est moisissure , donc elle est toujours boulonnée. Mais maintenant, cette couleur rouge a été remplacée. Et c'est parce que les boissons d'été que vous voyez ici utilisent le I D. qui est plus grand qu'une classe, et il utilise le nom de l'étiquette au-dessus de lui. Donc, pour ces classes, 10 points, vous savez, ont ah 101 points ou hein 101 points simplement parce que ce système a jamais eu. Donc quand on y réfléchira, on va s'assurer d'être aussi précis que possible et de ne pas laisser les choses s'en sortir. Une autre façon de regarder la spécificité et l'héritage. C' est par ici, donc nous avons encore nos sympathies. Les vols partiels sont un peu minuscules sans-abri. Nous pouvons voir que nous l'avons fait. Ils ciblent un mensonge. Nous voyons également que nous avons un autre ciblant ace Ban Limit travées sont similaires aux paragraphes, mais ils sont juste en ligne, donc ils utilisent généralement pour une ligne de texte et pas d'espoir Marche de textes afin que nous puissions voir que nous sommes héritant encore de notre i d Et chaque cet élément est violet. Chaque taille de police est 12 à l'avant Lee est normal. Peut-être avoir 18 millions de plus facile. Et nous pouvons voir que nous pouvons ajouter une spécificité supplémentaire. Donc, nous héritons de cela chaque élément a cet héritage. Mais maintenant la portée elle-même L'idée de yum a le style de police italique et nous pouvons même faire cet appel un peu plus. Peut-être y réfléchir un peu, blé. Oh, on y va. Donc encore une fois, nous avons un héritage faisant ce violet changer la taille de police que vous pensiez Attendez et puis nous avons la spécificité ici, Donnez-lui ceci est cet article leurs talents et l'audacieux. Alors pensez à l'héritage de surface. Nous voulons penser à quand nous avons construit notre style ce que nous voulons hériter des enfants en particulier. Nous faisons n'importe quelle sorte d'imbrication comme ces listes et nous voulons également réfléchir à la façon d'être très spécifique avec nos styles. Prenez tout cela à l'esprit lorsque vous commencez à travailler sur votre projet. Alors faisons un petit examen de tout ce que nous avons fait ensemble. Et on va travailler un peu sur la pression ensemble avant de le dire. Alors qu'as-tu appris ? Eh bien, c'est Sears a spécifique Closius s. Nous savons que CSS est attend email élégant et il sent la structure de notre site. Nous avons quelques bases dans les propriétés de texte. Donc, nous avons vu comment vous aviez besoin de placer nos valeurs de propriété. Ceux-ci sont séparés par deux-points et dans Aceh Michelman comment orteil lien vers une feuille de style et pages dans cette balise de lien Comment nous allons utiliser des sélecteurs, des idées, classes, des collecteurs d' impôts pour réellement résoudre les éléments sur intérêt qu'elle mâle pour le style en eux-mêmes et comment la spécificité et l'héritage s'applique à notre héritage CSS, nous permettant de donner des styles d'héritage à l'un de nos enfants. éléments dans les vrais hommes sont la page et la spécificité pourrait être certain affaiblir ciblage exactement ce que nous voulons changer. Juste faire attention à la façon dont on l'utilise. Rappelez-vous que CSS est important et génial, et il fait en sorte qu'il sépare sont de beaux détails de l'apparence de notre affichage de base de notre contenu ou est-elle Mao ? Et ça rend nos vies beaucoup plus faciles. L' autre chose à propos de CSS est qu'une feuille de style pourrait sonner quantité instantanée de pages HTML . C' est pour ça que ça ne le rendrait pas externe. Ça rend la vie beaucoup plus facile. Nous changeons juste un style, fois insinuant à travers le tableau. Tu feras ça avec le pavillon. Enfin, quand nous parlons de cette quantité de pages HTML qui vaut la peine de parler de l'image de marque d'un site entier, et c'est ce que CSS est. Quatre. Vous pouvez ajouter des parties CSS à un nouveau style de votre côté. Chaque fois que je vois un exemple de la vie ici, on va le faire une seconde sur notre site de portefeuille. Mais juste pour vous donner une idée, comment vous travaillez ensemble ? 7. Projet final: d' accord. Enfin pour votre contrat final, votre moi créer les débuts sur votre propre portefeuille à l'extérieur. Alors prenez ce que vous avez appris de la classe aujourd'hui et mieux sur un site. Vous trouverez le code de démarrage dans votre fichier de projet de démarrage dans la couche de démarrage, vous avez HTM de base en ligne pour votre fichier d'index ainsi que dans le dossier CSS. Vous trouverez un plan de base pour les styles, toutes les pages et l'indice de texte HTML que vous devriez utiliser dans le support d'images. Vous trouverez également comment votre projet final devrait se pencher sur CNN. On va commencer à faire ça ensemble pendant quelques minutes et ensuite je vais te laisser le soin. J' espère que vous avez passé un bon moment en cours. Alors sortons d'ici. Retournez à notre sublime. Nous avons un dossier de projet. Nous avons notre volonté d'indexation pour copie, et nous avons ces livrables. Alors à quoi on va ressembler à la fin ? Donc, une chose que je veux demander de garder à l'esprit assez tout de suite est que nous voulons toujours nous assurer que nous marchons encore ces images et assurez-vous que vous les au-dessus séparément pour obtenir n'importe quelle minute de construction. Nous savons donc que nous avons deux liens de notre nom. Nous avons quelques frontières entre les deux, et ces frontières sont intéressantes. Ils règlent juste entre les deux. Alors peut-être regarder que son horizontale là. Et nous voyons que nous avons aussi des liens supplémentaires avec peu de papier. Entre les deux, ces pipes nomment des legis spéciaux, mais des caractères de pipe sur la page. Construisons cette pièce de navigation et assurez-vous que le lien de raison vers notre portefeuille d'âge pour vous d'abord, n'est-ce pas ? Qui ? En fait, ouvrons n'importe quel fichier. Tu vas le voir comme Port Julio Shima. Peut-être aller par ici. Copiez ça. Incarner capable de dire portefeuille pour l'instant. Donc, nous savons que nous avons une page différente ici. Super. Maintenant, pensons à cette navigation que nous avons pensé à ne jamais obtenir auparavant. On a juste notre balise de navigation ici. Notre première page. On regarde ça, c' est à propos de moi. C' est Pedro à la radio à propos de moi. On dirait qu'il pense, et il va lier directement à notre point d'index html Maintenant, dans ce caractère de pipe, savoir qui est juste ici ce petit tuyau. Donc tu te gardes. Et maintenant, nous voulons un lien vers ce portefeuille d'âge. Tout le monde, n'est-ce pas au nom du lien, ça va ou complètement ? C' est ça. Alors ouvrons ce chemin là, zone de recherche. Où as-tu mis ça ? Tu entends ça ? Ouvrons la solution. Ouvrons pour Star. Et on y va. Donc, ils le soulagent comme portefeuille. C' est en fait par ici. A propos de sont nous savons que nous sommes seulement dans la page suivante des liens à recevoir ici dans notre pipe. Mais si vous cliquez sur ce portefeuille, accord, nous sommes bons. Nous pouvons relier ces pages ensemble. Alors rappelez-vous, vous savez, assurez-vous de regarder l'image elle-même. Nous veillons à ce que nous nous souvions de la façon de construire le marché là-bas. Vraiment ? Pour nos en-têtes. Les paragraphes sont des liens dans cette image. Et assurez-vous qu'ils regardaient ces gars ensemble. On va faire un autre dossier ici, Felicia Male. Et assurez-vous que envoyé ensemble en utilisant nos balises de colère en vert le lien juste ici. J' espère que vous apprécierez vraiment la classe CSS traditionnelle à nouveau. Vous trouverez tous les fichiers dont nous avons parlé, y compris les PDF du Kino passé par amour, qui peuvent être téléchargés. Et j'inclurai également le code de solution pour la recette des cookies et la polio du conseil afin que vous puissiez jeter un oeil à ce qui se fait dans le code lui-même. Essayez de le construire vous-même d'abord. C' est vraiment amusant. Vous avez apprécié le cours une fois de plus. Nous passons une bonne journée. Tu te souviens du contrôle ? Croyez en vous-même, selon être libéré.