Développement Web Full Stack pour les débutants - Partie 1 : HTML, CSS, conception réactive

1. Bienvenue dans ce cours !: Bienvenue sur Full Stack Web Development pour les débutants. Ce cours, les conceptions vous emmènent d'un débutant à un développeur web capable de construire les seules interfaces utilisateur front-end, mais aussi comment concevoir et construire le backend pour interagir aussi. Alors qui je ? Je m'appelle Chris et je serai votre instructeur tout au long de ce cours. Je suis un développeur web et aussi le producteur de nombreux tutoriels enseignent à des milliers d'étudiants les compétences dont ils ont besoin pour construire des sites Web et des applications. C' est la première partie de la série complète, où nous commencerons au début de vous apprendre comment HTML, CSS, et web design réactif pour vous donner les compétences dont vous avez besoin pour construire de superbes sites Web fonctionnels, qui semblent grand sur n'importe quel appareil latéral. Ce cours comprend plus de cinq heures de formation de haute qualité. Nous commençons par le HTML, couvrant tout ce que vous devez savoir, de la configuration et de la structuration sur des pages Web, éléments et des attributs, de la masquage des formulaires et des entrées, de la liaison de pages Web, d'images, et bien plus encore. Tout cela est appris dans une approche basée sur le projet, où vous construisez ce site complètement à partir de zéro tout en appliquant toutes les techniques que vous apprenez. Nous stylisons ensuite ceci en utilisant CSS, et nous allons couvrir tout ce que vous devez savoir tels que les sélecteurs, les polices, la marge, remplissage, le modèle de boîte, le positionnement des flotteurs avec beaucoup, beaucoup plus, comprend quelques astuces et astuces CSS pratiques le long du chemin. Nous terminons ensuite tout cela en rendant le site entièrement réactif pour le faire changer de mise en page et répondre aux appareils de toutes tailles. Vous apprendrez tout sur les unités évolutives, la mise en page fluide, requêtes multimédias, les images réactives, tout en appliquant ceci à un projet. J' espère que vous êtes excité et commençons à apprendre tous les principes fondamentaux du développement web dans la première partie de ce cours. 2. Qu'est-ce qu'il faut pour ce cours (Pour commencer): Pour ce cours, vous n'aurez besoin que de quelques choses pour vous lever et courir. D' abord, nous avons besoin d'un éditeur de texte. Vous avez peut-être déjà une préférence ou une préférence que vous utilisez déjà. Pour ce cours, j'utiliserai Visual Studio Code, qui est idéal pour le codage JavaScript, et dispose également d'un terminal intégré, que nous pourrons utiliser plus tard dans le cours. Vous pouvez utiliser tout ce que vous voulez. Mais voici quelques options d'éditeur de texte populaires telles que Atom, Brackets, WebStorm, et bien sûr, Visual Studio Code. Si vous en avez déjà un et un navigateur Web, n'hésitez pas à passer à la vidéo suivante. Sinon, je vous recommande d'aller sur code.visualstudio.com, et de suivre les instructions de téléchargement pour votre plate-forme. Enfin, vous aurez également besoin d'un navigateur web. Je recommande Chrome par Google, mais vous pouvez utiliser tout ce que vous préférez. Au cours du cours, nous allons utiliser les outils de développement à l'intérieur de Chrome, mais d'autres navigateurs ont ces intégré aussi. Ça peut sembler légèrement différent de ce que je fais. C' est tout ce qu'il nous faut pour y aller. Ensuite, nous allons jeter un coup d'oeil sur ce que HTML est réellement. 3. Comprendre le HTML (Pour commencer): Avant d'ajouter du HTML à nos pages Web, je veux juste m'assurer que nous comprenons exactement ce qu'est HTML et ce qu'il fait. Je ne vais pas aller trop profond et technique pour l'instant. Mais comprendre pourquoi nous l'utilisons et pourquoi elle est née en premier lieu nous sera vraiment bénéfique quand nous en viendrons à les coder. Tout d'abord, qu'est-ce que le HTML ? HTML signifie HyperText Markup Language. Ça peut sembler un peu bizarre au début, mais nous allons voir ce que tout cela signifie bientôt. HTML est un langage de balisage standard pour la création de sites Web et d'applications. HTML est partout sur le web. La plupart des sites Web sont construits en utilisant cela et tous les navigateurs savent comment le lire et l'afficher correctement. Comme tous les langages de programmation et la plupart des choses dans la vie, les choses changent et évoluent. Nous possédons actuellement la version 5 de HTML. Comme toutes les nouvelles versions, choses sont ajoutées ou supprimées lorsqu'une nouvelle version sort, ce qui n'est pas si souvent, n' est pas quelque chose à craindre. Tout ce que nous savons déjà s'applique toujours. Il s'agit souvent d'un cas d'améliorations et de nouvelles fonctionnalités au fur et à mesure que la technologie évolue. Nous couvrirons beaucoup des nouvelles fonctionnalités HTML5 au cours de ce cours. HTML est utilisé pour formater un document Web. Un navigateur Web sait comment l'afficher correctement. Comme nous l'avons déjà dit, c'est un langage de balisage par défaut du web, sorte que tous les navigateurs Web savent comment gérer et afficher le document HTML correctement. Le code HTML applique la mise en forme nécessaire pour indiquer au navigateur ce qu'il faut faire. HTML a été inventé par un physicien appelé Tim Berners-Lee. Le développement a eu lieu autour de 1989-1990, où nous avons présenté des mémos ou des propositions de HTML. L' idée derrière HTML était de créer un moyen pour les chercheurs d'envoyer et de recevoir des documents par voie électronique. Pour comprendre pourquoi HTML a été créé, commençons par jeter un oeil au problème. Ceci est une image prise à partir du site Wikipédia. Mais imaginez qu'il s'agissait d'un texte qui devait être envoyé à chaque département. Lors de l'envoi de ce texte, il n'y a aucun moyen de décrire le formatage. L' en-tête HTML en haut est plus grand et aussi gras. Il y a une ligne en dessous, puis quelques textes standard. Le début du paragraphe est également gras et le texte contient également une série de liens que vous souhaitez connecter à d'autres documents. C' est un problème auquel les chercheurs étaient confrontés. Pour commencer à résoudre ce problème, l' une des premières étapes est l'idée de marquer le texte. Lorsqu' ils travaillent avec des manuscrits ou des documents écrits à la main, typographes ou les éditeurs écrivent souvent ou notent le texte dans les marges du papier. Cela comprendrait des informations telles que le style et la taille du texte de chaque section avant d'être transmis pour la composition. L' idée de cette marque a clairement influencé la façon dont HTML est conçu. Regardez dans notre texte ici avant et un équivalent HTML de base sur la gauche. En haut, nous marquons le titre HTML en l'entourant dans ces balises h1. Nous allons regarder de plus près tous ces moments pendant le cours. Mais ce h1 décrit le contenu comme étant le plus important et également affiché comme le titre le plus grand. Maintenant, nous avons un moyen de décrire à quoi ressembleront les textes pour le lecteur de document, tel qu'un navigateur Web. La même chose pour ci-dessous, nous avons une balise hr pour décrire où nous voulons qu'une règle horizontale apparaisse. s'agit d'une balise autonome et il n'a pas besoin de contenu de texte pour mettre en forme, les sous ce paragraphe standard de texte et inclus avec les balises p. Nous avons également des tags forts aussi pour dire au navigateur que ce texte a une grande importance, et aussi pour afficher en gras. Bien sûr, il y a beaucoup plus de ces balises à couvrir, mais cet exemple de base devrait maintenant vous donner une meilleure compréhension de la façon dont les choses fonctionnent. Aussi, nous voulons un moyen pour ces liens en bleu ici pour être en mesure de connecter tous les liens vers d'autres documents. Cela nous amène à l'hypertexte. L' hypertexte est un autre de ces mots qui composent le HTML. Il s'agit essentiellement du texte à l'écran qui sont des références à d'autres textes ou documents. Les documents hypertextes sont liés par ce que nous appelons des liens hypertexte. Nous le voyons dans la plupart des pages Web que nous visitons tous les jours. Il s'agit souvent d'une navigation supérieure avec des liens ou des hyperliens vers d'autres pages. Ces pages Web séparent souvent des documents aussi comme vous le voyez ici. Donc, nous savons maintenant que les textes sur une page Web sont généralement entourés, tous marqués avec des balises, tout comme nous avons regardé il y a quelques diapositives, et aussi ces balises p en bas. Ces balises complètes avec le contenu au milieu est appelé un élément. Les éléments peuvent être considérés comme les blocs de construction d'une page Web. Vous aurez beaucoup de pratique à écrire ces éléments pendant le cours. La dernière chose que nous allons regarder dans cette vidéo, ce sont les attributs. Des attributs sont ajoutés aux éléments pour fournir des informations supplémentaires. Par exemple, nous pourrions définir la couleur du texte, nous pourrions indiquer au navigateur à quelle page lier s'il est cliqué sur, ou comme vous pouvez le voir dans l'exemple ici, nous pouvons définir un ID unique pour les éléments. Si tout cela est nouveau pour vous et beaucoup à prendre, ne vous inquiétez pas qu'il soit ici. Bien que l'histoire et l'arrière-plan soient bons à savoir, la principale chose à saisir est comment faire ces balises pour créer éléments et vous obtiendrez beaucoup plus de pratique à mesure que vous progressez tout au long de ce cours. 4. Configurer un projet Web (commencer le HTML): Au cours des prochaines sections, nous apprendrons les bases du HTML et du CSS. Nous appliquerons également ces techniques à un projet au fur et à mesure que vous les apprendrez pour vous montrer comment toutes ces techniques s'appliquent à un site Web réel. Le projet d'être un Tech Store afficher certains produits et aussi comment certains domaines différents tels que les en-têtes, les pieds de page et aussi la barre latérale. Il n'aura que des fonctionnalités de base telles que cliquer sur un article pour voir les produits complets. Ceux-ci nous donneront une bonne chance d'obtenir un peu de pratique HTML et CSS. Lorsque vous commencez un nouveau projet web, nous devons d'abord créer un dossier de projet pour stocker tous les fichiers, dossiers, images et autres actifs liés au projet. Pour commencer, nous allons passer sur le Bureau et créer un nouveau dossier en cliquant avec le bouton droit de la souris, puis Nouveau dossier. Je vais appeler ça le nom de notre projet, qui est Tech-store. Vous pouvez bien sûr créer ce dossier n'importe où sur votre ordinateur que vous préférez. Ensuite, je vais ouvrir Visual Studio Code qui est l'éditeur de texte que je vais utiliser pour le reste de ce cours. Ouvrez cela, tout votre éditeur de texte préféré et vous pouvez soit faire glisser le dossier dans. Ouvrez cela et vous voyez le nom dans une barre latérale sur la gauche. Ou vous pouvez aller au fichier, puis l'ouvrir et le sélectionner à partir de là. Maintenant besoin de créer nos premiers documents web ou notre fichier. Encore une fois, en fonction de votre éditeur de texte, il peut y avoir quelques façons de le faire. Dans le code Visual Studio, vous pouvez utiliser Command et N sur un Mac pour ouvrir un nouveau fichier. Ou sous Windows, il peut être Control plus N. Aussi la plupart des éditeurs de texte ont une option à nouveau, d'aller dans le fichier, puis Nouveau fichier en haut là. Je vais cliquer sur « Nouveau fichier » à partir de là, puis je vais appeler ceci le index.html. Toutes les pages HTML doivent avoir l'extension this.HTML à la fin. Donc, le navigateur sait qu'il s'agit d'un fichier HTML. Appuyez sur « Entrée ». Nous pouvons nommer ce fichier tout ce que nous voulons, et nous allons créer plusieurs fichiers HTML pour ce premier projet. Mais index est un nom commun pour la page d'accueil ou par défaut du site Web. Alors assurez-vous que c'est à l'intérieur du projet Tech Store et ensuite nous allons à la zone d'édition sur la droite. Si nous tapons des textes tels que, bonjour, obtenir cela sauvegardé. Ensuite, si nous ouvrons notre dossier de projet, puis double-cliquez sur la page index.html, ouvrez cela à l'intérieur du navigateur, et là nous voyons notre texte de, bonjour, à l'intérieur du navigateur. Bien sûr, nous savons dans la dernière section que nous devons entourer ce texte avec des balises P pour qu'il soit valide. Mais pour l'instant, notre projet est tout mis en place et prêt à passer à la structure dans notre page d'index. 5. Structurer une page Web (Commencer le HTML): Avec le dossier du projet maintenant configuré, nous pouvons maintenant commencer à ajouter une structure à notre page d'index. Avant de commencer à ajouter nos éléments HTML, pour ajouter du contenu à notre page, il y a une structure de base que nous devons d'abord ajouter. Je vais commencer par supprimer ce texte bonjour de la dernière vidéo, et la première chose que nous devons ajouter en haut de chaque page est une déclaration DOCTYPE, qui ressemble à ceci. Si vous ouvrez et fermez les crochets d'angle, ajoutez un point d'exclamation, puis tapez DOCTYPE de HTML. Les déclarations DOCTYPE sont un moyen de déclarer quelle version de HTML nous utilisons. Il s'agit d'un DOCTYPE pour HTML version 5. Les versions antérieures étaient beaucoup plus longues et plus compliquées. Eh bien, HTML5 rend les choses agréables et simples pour nous. Le mot DOCTYPE n'est pas sensible à la casse, mais j'aime taper le mien en majuscules de toute façon. Ensuite, nous ajoutons les balises d'élément HTML principal ou racine. Donc, juste en dessous du DOCTYPE, ouvrez et fermez les crochets d'angle, tapez HTML, puis quand cela se ferme, ouvrez et fermez vos crochets d'angle, ajoutez une barre oblique avant et HTML. Avec cela étant l'élément racine, tout le reste doit être ajouté entre ces balises. Ce type supérieur en haut est la seule exception à cela. À l'intérieur de la balise HTML d'ouverture, je vais ajouter un attribut. Nous avons brièvement parlé des attributs dans la dernière section. Les attributs sont juste un moyen pour nous de fournir des informations supplémentaires que nous devons ajouter à la balise d'ouverture. Pour la balise HTML, nous pouvons fournir les attributs de langue avec lang. Cela indique aux navigateurs et aux moteurs de recherche la langue de la page Web que nous créons. Je vais créer ce site en anglais, donc le code est égal à fr, à l'intérieur de ces citations. Une recherche rapide sur Google pour les codes de langue HTML affichera une liste de codes de pays, si vous souhaitez utiliser une autre langue. A l'intérieur de ces éléments HTML, il y a deux éléments principaux que nous pouvons maintenant ajouter, appelés la tête et le corps. Donc juste en dessous de ces étiquettes d'ouverture, nous pouvons à nouveau ouvrir les crochets et taper dans la tête et fermer ça. Vous pouvez voir que le code Visual Studio se termine automatiquement comme suit. Si votre éditeur de texte ne le fait pas, il suffit d'aller de l'avant et de taper la balise de fermeture avec la barre oblique. Après cela, nous pouvons ajouter le corps. Cela a encore une fois une ouverture et une balise de fermeture aussi. Cette section en haut contient des données sur le site Web, souvent appelées métadonnées. Le contenu que nous ajoutons à la tête n'est généralement pas affiché sur la page à l'intérieur du navigateur, il fournit cependant des informations importantes sur le document HTML, telles que le titre du site, informations de recherche moteurs. Nous pouvons également le lier à tous les fichiers aussi, et nous le regarderons lors de la création. Le premier élément que je vais ajouter à la section head est une balise meta. Les balises Meta fournissent essentiellement des informations sur le site et c'est la première balise auto-fermeture que nous avons vu jusqu'à présent. Cela signifie qu'il n'a pas de balise de fermeture. Il n'en a pas besoin parce que nous n'ajoutons aucun contenu à l'intérieur, nous y ajoutons simplement un attribut. Il y a beaucoup de balises méta différentes disponibles pour fournir des informations sur la description du site, l'offre du site. Nous pouvons également l'utiliser pour ajouter des mots-clés. Pour celui-ci cependant, tout ce que je vais faire est d'ajouter un jeu de caractères, utilisé pour le site, avec les attributs charset. Donc, créons notre balise meta, M-E-T-A, fermons, puis nous pouvons ajouter nos attributs de jeu de caractères et cela sera égal au trait d'union UTF 8. Définir un codage de caractères peut sembler compliqué, mais nous déclarons simplement quels caractères nous utilisons sur cette page Web. Le caractère a été en chiffres, lettres, et aussi tous les symboles de caractère que vous trouverez sur votre clavier, tels que le symbole at et aussi les symboles positifs et négatifs, ou même les crochets. UTF-8 est une norme HTML5, nécessite presque tous les caractères disponibles dans le monde. Ensuite, juste en dessous de cette balise meta, je vais ajouter le titre. Donc, au titre est l'ouverture et la fermeture des balises. Je vais appeler le mien le magasin technologique et on doit ajouter ça entre les deux étiquettes. Donc sous n juste comme ça. Si nous donnons cela une sauvegarde et puis ouvrez le navigateur avec index.html ouvert, donnez cela une actualisation, et nous pouvons voir que nous avons magasin technologique en haut du navigateur, juste là. Nous ajouterons à cette section en tête tout au long de ce projet, et aussi plus tard dans ce cours. Cela nous laisse maintenant avec cette section du corps. Le corps est l'endroit où nous ajoutons tout le contenu qui apparaîtra sur la page. Si nous allons de l'avant et tapons notre bonjour à nouveau, juste en dessous du corps comme ça. Donnez cela une sauvegarde, puis rechargez le navigateur. Nous voyons le texte apparaître à nouveau sur la page. Super. Notre structure HTML est maintenant en place, et nous pouvons maintenant passer à l'examen d' autres éléments HTML que nous ajouterons à cette section du corps. 6. Intitulés du HTML (commencer le HTML): Dans les dernières vidéos, nous nous sommes concentrés sur la mise en place d'un projet de site web ainsi que sur l'ajout de la structure de base de notre page d'index. Bien que tout cela soit essentiel pour un projet de site Web, je suis sûr que vous êtes tous désireux d'obtenir un affichage de contenu réel dans le navigateur. Lorsque nous avons regardé HTML dans les diapositives récentes, nous avons jeté un bref coup d'oeil aux en-têtes HTML. Les titres sont utilisés pour structurer le contenu de la page du plus au moins important, et sont numérotés h1 à h6. Nous utilisons h1 pour les titres les plus importants ou les principaux, h2 le légèrement moins important et ainsi de suite. h1 est également le plus grand, jusqu'à h6 étant le plus petit par défaut. Les titres sont utilisés par les moteurs de recherche tels que Google pour déterminer quel contenu est le plus important. Dans cet exemple, le texte HTML en gras en haut est marqué à l'aide d'une balise de titre h1. Cela a du sens car c'est le sujet principal de la page. Nous pouvons le voir en action en visitant la page Wikipédia à partir de laquelle elle a été prise. Si nous nous dirigeons vers Google et puis nous allons chercher Wikipédia, HTML et sélectionner le lien supérieur juste là. En utilisant les outils de développement Google Chrome, que nous utilisons beaucoup à travers ce cours, nous pouvons prouver qu'il s'agit d'un titre de niveau un. À l'intérieur d'un Chrome si nous écrivons ou contrôlons cliquez, puis descendez pour inspecter, cela ouvre les outils de développement. Ne vous inquiétez pas trop de ce que nous voyons ici pour l'instant. Nous examinerons cela plus en détail tout au long du cours. Pour l'instant cependant, si nous allons à l'inspecteur, qui est flèche dans le coin, cliquez dessus. Ensuite, si je passe la souris sur le HTML et que je clique dessus, nous pouvons voir à l'intérieur du code ici, la ligne bleue qui est mise en évidence est un h1. Ne vous inquiétez pas de ce qui se passe ici. La principale chose à savoir est que nous avons sélectionné le texte HTML. Nous pouvons voir que c'est juste un élément h1 avec quelques attributs à l'intérieur, tels que l'ID, la classe, et aussi la langue que nous avons vu auparavant. Ce n'est pas vraiment quelque chose que nous n'avons pas vu jusqu'ici. Maintenant, allons-y et donnons-y un aller nous-mêmes. Si nous fermons les outils de développement et nous retournons vers l'éditeur de texte, nous savons déjà que le contenu que nous voulons afficher dans le navigateur est placé entre les balises de corps. Nous pouvons ajouter nos titres à l'intérieur de là. Il est en fait sur la section inférieure avant et commencer à créer des titres. abord h1 et ajoutons du texte à l'intérieur d'ici, simplement de titre un. Sur la ligne suivante, ajoutons notre h2 avec le texte de l'en-tête deux. Suivant ligne h3, h4, sous-titre de texte quatre et deux autres à aller. h5 pour les petits. Notre rubrique 5 et enfin la dernière se dirige six. Tapez tout cela, donnez cela une sauvegarde, puis passez au navigateur. Assurez-vous que la page index.html est ouverte à partir d'avant. Si ce n'est pas le cas, revenez au fichier, puis ouvrez, donnez un rechargement. Nous pouvons voir clairement la différence entre les tailles de titre. Mais nous ne devrions pas être tentés de les utiliser juste à côté du texte ou de les faire paraître plus audacieux. Rappelez-vous que les titres sont importants. Si nous revenons à notre site Web fini, que nous avons examiné auparavant, nous avons quelques cas où nous pourrions utiliser des rubriques. Nous avons le titre principal du site de magasin technologique en haut, ce qui pourrait être un bon cas d'utilisation pour h1. Nous avons également le texte de shop by et tous les articles en haut de chaque section. Ces deux sont des titres de niveau deux, puis le titre de la barre latérale de la catégorie et aussi le prix sera bon cas d'utilisation pour h3. Mettons cela en pratique en les appliquant à notre projet. Revenons à notre page index.html et à l'intérieur du corps, supprimons h2 jusqu'à h6 laissant h1 entre la section du corps. Ce h1 comme nous venons de voir à l'intérieur de la version finie, nous pouvons ajouter un texte de magasin de technologie, sauvegardez cela. Rechargez le navigateur, et il y a le titre de notre site. Retour à la version finale. En descendant la barre latérale avait le texte h2 de la boutique par et puis nous avons eu les titres de catégorie et de prix. Ajoutons ça maintenant. Juste en dessous du titre du magasin technologique, ajoutons notre h2 et entre ces temps, nous pouvons ajouter le texte de boutique par. Rester avec la section de la barre de conception ci-dessous que nous pouvons ajouter nos deux rubriques de niveau trois. Le premier était le texte de la catégorie. Fermez ça. Le texte de la catégorie. Puis juste en dessous de cela, il y avait aussi un h3, qui était pour le prix. Je viens d'avoir un colon après magasin. Donnez cela une sauvegarde et voyons à quoi ressemble la barre latérale. Ok, bien. J' ajoute juste la monnaie entre les crochets. Ajoutez un symbole monétaire à l'intérieur de cela. Maintenant, c'est le texte de la barre latérale en place. Enfin, nous pouvons ajouter tous les éléments qui étaient pour la section différente sur le côté droit ici. C' est aussi un titre h2 comme shop by. Nous pouvons ajouter ceci juste ci-dessous. Ajoutons h2 et un texte de tous les éléments, suivi du deux-points. Sauve ça. Maintenant, nous voyons cela sur la page aussi. Les choses ne sont pas trop belles pour le moment, mais rappelez-vous, HTML est pour le contenu uniquement. Les choses vont commencer à regarder beaucoup mieux lorsque nous plongons dans CSS pour le style et aussi la disposition de ces textes. Ensuite, nous allons jeter un oeil à la façon de sectionner ou de regrouper le contenu lié à l'aide de balises div. 7. Div et span (début HTML): Nous avons maintenant du contenu à l'écran à l'intérieur du navigateur. Mais pour le moment, ce n'est pas vraiment organisé. Nous venons d'ajouter du contenu essentiellement de haut en bas, alors que nous ne pouvons pas faire beaucoup de style et de position de ces titres, jusqu'à ce que nous atteignions la section CSS, nous pouvons commencer à regrouper nos contenus associés ensemble. Si nous regardons à nouveau le site fini, regardant ici la page d'accueil, même quelqu'un complètement nouveau dans la construction de sites Web pourrait probablement déterminer quelles sections devraient probablement être regroupées ensemble. Nous avons un en-tête en haut, ce qui serait une zone. Sur le côté gauche, nous avons la barre latérale. Nous avons également une zone de produits affichant tous nos produits de notre magasin. Nous avons des informations individuelles sur les produits comme cette section ici et en bas en bas, nous avons également une zone de pied de page. Regrouper le contenu est assez simple. Nous avons juste besoin d'entourer le contenu dans un conteneur appelé div. Un div est un élément et a une balise d'ouverture et de fermeture. C' est un abréviation pour une division. Retour dans le fichier html d'index, nous pouvons ajouter quelques éléments div à notre site Web. Fermons ça et revenons à notre page d'index. Le texte qui se trouve en haut, qui était l'en-tête, va être à l'intérieur du groupe d'en-tête. Créons notre tag div. Une balise d'ouverture et la balise de fermeture aussi. Gardez cela organisé et continuez à les ajouter sur leur propre ligne. Alors je vais couper le h1 d'avant. Maintenant, placez ceci à l'intérieur de cette section div. Maintenant, vous avez une section d'en-tête. Si nous donnons à cela une sauvegarde et puis rechargeons le navigateur, nous ne voyons aucun changement. C' est parce qu'un div est juste un conteneur général. Cependant, ils sont vraiment importants, et utilisés beaucoup. Nous verrons l'importance plus tard, lorsque nous entrerons dans la section CSS. Par exemple, nous pourrions regrouper tout le contenu de l'en-tête et appliquer une certaine couleur de police ou couleur d'arrière-plan à la section complète. Ou nous pourrions définir un div pour être positionné à gauche de la page, et un autre div sur le côté droit. Revenons en arrière et ajoutons deux autres conteneurs. Le premier conteneur va être pour la barre latérale, qui a les trois titres juste ici. Soufflez la div. Ajoutons un deuxième div, puis nous pouvons couper ces trois titres et les coller à l'intérieur ici. Enfin notre troisième et dernière div juste en dessous de ces deux. Fermez cela et puis nous pouvons coller dans le h2 de tous les éléments. Au fur et à mesure que vous progressez dans cette section ajoutera également plus de contenu à cette section principale, tels que les produits. Mais pour l'instant, nous avons juste le titre de tous les articles, donnons cette sauvegarde, puis rechargez. Pourtant, nous ne voyons pas de changements, mais c'est bien pour l'instant. Il y a aussi un autre élément utilisé aussi comme conteneur. C' est ce qu'on appelle les éléments de span. Pour afficher la différence entre div et span. abord, imaginons que nous voulions appliquer un style spécial au symbole du signe $, que nous avons juste ici. Mais pas le prix. Nous pourrions entourer ce symbole $ avec un type div. Faisons ça maintenant. Découpez cette section et collez-la. Si nous sauvegardons cela et puis rechargeons le navigateur, nous voyons quelque chose d'étrange se passe. Le div pousse le symbole $ sur une nouvelle ligne. C' est parce qu'un div est appelé un élément de niveau de bloc. Les éléments sont principalement regroupés en éléments de niveau bloc ou en éléments en ligne. Les éléments de niveau bloc occupent toute la largeur disponible du navigateur et il commence également sur une nouvelle ligne. En outre, tous les titres que nous avons utilisés jusqu'à présent, juste au-dessus et au-dessous sont également de niveau de bloc deux. C' est pourquoi nous les voyons empilés les uns sur les autres, chacun commençant sur une nouvelle ligne. Les éléments en ligne, cependant, comme ils peuvent paraître, ne démarrent pas sur leur propre ligne. Si de l'espace est disponible, ils s'aligneront sur la page. Un élément de span que nous avons mentionné précédemment. A un conteneur alternatif à div est un élément en ligne. Cela signifie que nous pouvons revenir en arrière et changer div pour être span. Changer la balise d'ouverture et de fermeture donner qu'une sauvegarde et si nous actualisons, le navigateur nous voyons maintenant les parenthèses et le symbole $ en ligne avec le texte du prix. C' est ainsi que nous pourrions utiliser des éléments div et span pour contenir ou cibler une partie de notre code. Ils deviendront encore plus utiles plus tard sur le regroupement des sections pour appliquer le style et la mise en page. 8. Ajouter des paragraphes et du texte (commencer le HTML): Maintenant, il est temps de regarder ajouter du texte à notre site Web. Techniquement, nous avons déjà des textes sous forme de titres, mais nous sommes également fournis avec l'élément P pour le texte standard. P signifie paragraphe, bien qu'il soit utilisé pour n'importe quelle quantité de texte à partir d'une seule lettre ou mot, jusqu'à un paragraphe. En regardant le produit à voir sur la version finale, il y a un bloc à texte que nous pouvons ajouter comme la description, qui est juste ici, le prix sur cette ligne ici, et aussi le titre de chaque produit. Passons à l'éditeur de texte et commençons à l'ajouter. Donc, fermons cela vers le bas à la page index.html. D' abord créer un nouveau div juste en dessous de tous les éléments. Créons une nouvelle div juste ici. Assurez-vous que cela est toujours imbriqué dans cette div principale. Encore une fois, ce sera le conteneur pour tous ces produits section. On aura donc le titre en haut. Ensuite, ce div va être le conteneur pour un produit individuel. Donc, à l'intérieur de ce tube aura une image de produit, un titre, la description, et ainsi de suite. Tout d'abord, nous pouvons entreprendre le titre, le prix et la description. Alors ouvrez des balises PP, à l'intérieur, nous pouvons avoir le texte de Game Controller, qui est le premier produit. En disant juste ci-dessous, nous pouvons ajouter un prix, disons $79.95. Ensuite, une troisième ligne avec une description. Donc, une fois que j'ai également manette de jeu pour Xbox, enregistrez ça. Accédez au navigateur, puis actualisez. Et il y a nos trois lignes de texte tout en bas. Une des choses que vous remarquerez ici est que chaque élément P est sur sa propre ligne, tout comme nous l'avons vu dans la dernière vidéo. Cela signifie que c'est un élément de niveau bloc, ce qui est idéal parce que vous voulez qu'ils soient empilés, comme nous le voyons ici. Si le texte à l'intérieur des temps P devient un peu long, nous pouvons également ajouter un saut de ligne qui devrait rester dans le texte sur une nouvelle ligne. Nous le faisons avec des éléments de rupture. Donc, si la description était un peu longue, nous pourrions aller plus et ajouter pr, mettre un élément de pause. temps de pause n'a pas besoin d'un temps de fermeture car il n'y a pas de contenu ajouté à l'intérieur, c'est simplement mettre en place où nous voulons qu'une nouvelle ligne apparaisse. Dites cela, puis actualisez le navigateur et maintenant les mots pour Xbox, apparaissent sur la propre ligne séparée. Je pense que son titre de produit aussi du contrôleur de jeu sera meilleur à l'intérieur d'une étiquette de titre, comme un H4. Faisons ce petit changement. Donc, à nouveau contrôleur, nous pouvons supprimer P et à H-4, même pour la balise de fermeture, Enregistrer, puis actualiser. Donc le titre n'a pas l'air très différent, mais il y a une petite différence subtile à ce sujet. Vous pouvez voir que c'est un peu plus audacieux. Donc, c'est un maintenant pour ajouter du texte. Ensuite, nous allons voir comment nous pouvons ajouter un style de base à notre texte. 9. Mise en évidence, importance et formatage du texte (début HTML): La plupart du style que nous ajoutons deux sites Web est fait avec CSS. Cependant, il y a quelques petits éléments HTML disponibles pour nous qui fournissent également une mise en forme de texte aussi. Tout ce que nous avons à faire est d'entourer certaines balises autour du texte auquel vous voulez appliquer. Tout d'abord, jetons un coup d'oeil à faire un texte en gras avec les balises p. Revenons à nos produits. Si nous descendons à la description, si nous voulions rendre le mot génial un peu plus sombre ou un peu plus audacieux. On peut envelopper ça. D' abord découpons ça. Nous pouvons créer les tags p. Donc on peut voir qu'on a une ouverture et un proche dans la deuxième balise. A l'intérieur, vous pouvez coller dans notre parole de génial à nouveau. Donnez cette sauvegarde, puis rechargez le navigateur. Maintenant, nous avons le mot génial comme une couleur plus sombre et plus audacieuse. Bien que le type p soit valide à utiliser, il est recommandé aux nerds d'utiliser des balises fortes à la place. Alors remplacons b, par le mot fort. Enregistrez, puis actualisez. Le texte n'est pas le même, mais la balise forte définit le texte important et est généralement également affiché en gras. Nous pouvons également rendre le texte italique aussi, ce qui, comme vous pouvez le deviner, est les balises I. Alors remplacons fort par I, rechargez. Ensuite, nous avons un texte en italique en place. Tout comme l'élément B cependant, l'élément I existe depuis longtemps. Il est maintenant recommandé d'utiliser les éléments M en place, si possible car ils sont plus sémantiques ou descriptifs. Donc, au lieu de moi, qui peut souvent voir, nous utilisons maintenant généralement M, qui est va tomber l'accent. Enregistrez cela, et actualisez, et est utilisé pour donner une accentuation supplémentaire au texte, tandis que l'élément I est plus pour un effet métallique visuel, plutôt que de mettre en évidence toute importance supplémentaire. Nous avons également la possibilité de supprimer du texte avec l'élément delete aussi. Cela représente les textes qui ont été supprimés du document en ajoutant une ligne de fluides. Jetons donc un coup d'oeil à la façon dont cela est utilisé pour rencontrer M. Puis ajouter dans DEL, qui est abrégé pour supprimer. Sauvegardez ça. Jetons un coup d'oeil à ça. Vers le bas génial a une ligne supprimée fluides. Nous pouvons également faire le contraire en ajoutant du texte au document. Donc, si nous voulions supprimer le mot aussi, comme nous l'avons fait ici et remplacer par fantastique. Nous utiliserions l'élément insert pour insérer un mot. Après la suppression, incluons l'INS, qui est court pour insérer. Entre ceux-ci, nous pouvons ajouter un mot fantastique, Espace là, Donnez que sauver. Il y a le mot supprimé de génial et le mot inséré souligné de fantastique. Ensuite, je veux regarder en utilisant un élément de marque. Ces éléments représentent le texte mis en surbrillance. C' est un effet similaire, ce que nous voyons lorsque nous recherchons un mot sur un site Web. Par exemple, allons sur le site Web de Mozilla. Ceci est le développeur dot mozilla.org. Aller à n'importe quelle section qui comme à l'intérieur d'un chrome, allé à sélectionner commande et F pour ouvrir la recherche. Ensuite, si nous recherchons un mot comme les développeurs, juste comme ça, nous pouvons voir qu'il est surligné en jaune sur la page. Pour ajouter cet effet, nous pouvons entourer le texte avec des éléments Mark. Essayons ceci au lieu de supprimer. Ajoutons une marque à l'intérieur. Je peux également me débarrasser de ces textes insérés. On n'a plus besoin de ça. Ensuite, revenez à la page d'index et actualisez. Maintenant, comme le surlignage jaune que nous avons vu auparavant, le dernier élément que je veux couvrir est petit. Cela fait à peu près ce que ça ressemble. Cela rend la taille de la police plus petite. Nous pouvons simplement remplacer marque par le mot petit. Tout comme nous avons quatre exemples. Cela a parfaitement fonctionné, ou nous pouvons les combiner tous les deux en nichant. Autour de cette petite section ici, nous pouvons aussi ajouter les éléments de marque. Juste avant qu'il laisse ajouter marque, et mon éditeur de texte complète automatiquement cela. Allez à la place, nous voulons ajouter cela à la toute fin. De l'intérieur, nous avons le mot génial, entourant agréable, nous avons petit. Dans les petits alentours, nous avons une marque à l'extérieur. imbrication est assez simple à faire. Nous devons juste faire attention à organiser les types correctement de l'intérieur vers l'extérieur. Tous ces éléments que nous avons examinés peuvent également être imbriqués. En fait, nous avons déjà gâché tous ces exemples jusqu'à présent. A l'intérieur de ces éléments p sur le très extérieur. Aussi tous ces éléments p et imbriqués dans cette div. Alors donnez-leur la même chose et voyons ces deux combinés. Autre texte plus petit et aussi le surlignage jaune en arrière-plan aussi. Je vais maintenant les supprimer du projet, c'est qu'on n'en a pas besoin. Supprimons les petits non marqués avant et aussi après le texte. Dis ça, puis rafraîchissez. Maintenant, on est de retour à la normale. Bien que nous n'ayons pas besoin de ces éléments pour ce projet particulier, il est important de savoir que si jamais vous en avez besoin. 10. Listes du HTML (commencer le HTML): Nous allons maintenant jeter un oeil aux listes HTML. Listes en tant que son, est utilisé pour afficher une liste d'éléments. En regardant ces versions finies du projet ici, nous allons utiliser des listes dans plusieurs zones. Nous les avons dans une barre latérale sur le côté gauche pour afficher une liste de catégories. Aussi pour les gammes de prix ci-dessous aussi. En outre, nous les utilisons pour le menu à l'intérieur de l'en-tête et du pied de page. Pour ces liens en haut, le menu peut ne pas ressembler à une liste à première vue, mais la plupart des menus sont créés avec une liste, puis stylés ou modifiés pour être alignés à l'aide de CSS. Jetons donc un coup d'oeil à la façon dont nous pouvons les utiliser en créant notre liste d'en-tête, avec les trois liens de la maison, boutique et de nous contacter. Retour à notre éditeur de texte. Nous définissons d'abord le type de liste que nous voulons utiliser. Je vais commencer par une liste non ordonnée, qui utilise les balises UL. Alors ouvrez juste le haut, à l'intérieur de cette première div, je vais créer une liste non ordonnée, dessous du magasin technologique. Ouvrez donc les balises UL, qui ouvre et ferme à nouveau les balises. Les listes non ordonnées sont essentiellement une liste à puces. Nous voyons donc une puce noire ou un cercle à gauche de chaque élément par défaut. Cette puce peut être changée ou supprimée aussi à l'intérieur de CSS et nous verrons comment le faire plus tard. Ensuite, nous ajoutons nos éléments de liste entre les balises LI. Ajoutons notre premier élément de liste, qui est à la maison. Ensuite, juste en dessous, nous pouvons également ajouter un deuxième article de liste et celui-ci est pour la boutique et puis le troisième en bas est pour nous contacter. Il y a donc nos trois éléments de liste et assurez-vous que les trois éléments sont imbriqués dans ces balises UL. Une fois que cela est fait, nous pouvons donner une sauvegarde et ensuite tester cela dans le navigateur et il y a nos trois liens tout en haut. Vous pouvez également voir les trois balles sur le côté gauche, que j'ai mentionnées précédemment. Nous pouvons également créer une liste numérotée en changeant UL pour devenir OL. Donc, nous allons changer U pour être O. Donnez cela une sauvegarde, recharger, et par défaut avoir les nombres 1, 2 et 3, et ainsi de suite pour chaque élément de liste. Nous ne sommes pas limités aux nombres, mais lors de l'utilisation de listes, nous pouvons ajouter un attribut de type pour changer les choses autour. A l'intérieur de l'étiquette OL d'ouverture. Nous pouvons ajouter un type et définir cela égal à différents caractères. Donc, tout d'abord, nous changeons ceci en minuscules a, sauf que, actualiser, nous avons maintenant des lettres minuscules de a, b et c. Si c'était en majuscules et en minuscules a, ces trois lettres seraient maintenant en majuscules aussi. Nous pouvons également appliquer des chiffres romains avec un i. minuscule. Donnez cela une sauvegarde, rechargez, et avez les chiffres romains minuscules sur le côté gauche. Nous pouvons aussi faire la même chose si nous voulions que ces chiffres romains soient majuscules cette fois avec une majuscule I. Voyons à quoi cela ressemble. Maintenant, ils sont tous en majuscules. Nous avons aussi le numéro un, mais c'est une valeur par défaut, comme nous l'avons vu au début de 1, 2 et 3. Donc, nous n'avons pas besoin d'ajouter cela. Les listes peuvent également être imbriquées. Par exemple, si nous voulions ajouter des articles de liste définis sous notre lien boutique, nous pouvons ajouter une nouvelle UL ou une liste ordonnée à l'intérieur, comme ceci. Donc juste en dessous de notre boutique, en fait, nous allons d'abord supprimer le type, puis juste dessous de notre boutique, nous allons créer une nouvelle liste non ordonnée, exactement comme nous venons de le faire avant. Donc, les étiquettes d'ouverture et de fermeture. Donc, je suis la liste des articles. Donc, disons l'élément imbriqué et puis un autre, l'élément deux imbriqué, donnez cela une sauvegarde, appuyez sur rafraîchir et maintenant nous pouvons voir notre nouveau message d'articles imbriqués juste en dessous de ce lien de boutique. C' est ainsi que nous pouvons ajouter une liste à nos sites Web. Ensuite, nous ajouterons le reste de la liste à notre projet dans un petit défi. 11. Temps de pratique - Créer les listes de projet (commencer le HTML): Maintenant, nous savons comment créer des listes. Je voudrais que vous alliez de l'avant et ajoutiez le reste des listes de notre projet. Comme guide, ils doivent tous être sur toutes les listes. Nous avons déjà les articles d'en-tête à la place de la maison, boutique et contactez-nous. Nous avons juste besoin de revenir à une liste non ordonnée et de nous assurer que nous avons juste ces trois liens que nous voyons ici, plutôt que celui imbriqué que nous avons ajouté dans la dernière vidéo. Ensuite, nous aurons deux autres listes dans la barre latérale à l'endroit sous les titres que nous avons déjà. Cette section ici est une liste et ensuite ci-dessous nous avons une liste des prix aussi. Enfin, tout en bas, nous avons aussi un menu de pied de page. C' est exactement le même que celui que nous avons ajouté pour l'en-tête. Donne-lui un coup d'envoi. C' est une excellente façon d'apprendre en répétant et en obtenant un peu de pratique. Si vous ne vous sentez toujours pas assez confiant pour nous donner un coup de pouce tout seul, c'est tout à fait bien. Suivez-moi avec moi, et nous allons le faire ensemble. Fermons ceci et revenons à Visual Studio. Tout d'abord, vous fait notre menu d'en-tête est de retour à une liste non ordonnée. Donnez ce changement. Nous avons également cette liste non ordonnée imbriquée au milieu, supprimez cela. Ensuite, nous avons la liste que nous avons vu avant sous l'en-tête de catégorie. D' abord, je vais aller de l'avant et ajouter une ligne horizontale. Nous pouvons le faire avec un élément hr. Il s'agit également d'une balise à fermeture automatique, ce qui signifie qu'aucune balise de fermeture n'est nécessaire. regardant le projet fini une fois de plus, allez dans la barre latérale, la ligne horizontale est juste celle que nous voyons ici, qui sépare l'en-tête des éléments de la liste et la même chose pour le prix aussi. Jetons un coup d'oeil et passons à la catégorie, qui est h3 tag ici. Ensuite, nous pouvons ajouter notre hr. En dessous, nous pouvons commencer à construire notre propre liste ordonnée. À l'intérieur ici, je vais d'abord énumérer l'élément que nous avons, est tous les éléments et cela peut être tout ce que vous préférez. Ça n'a pas vraiment d'importance. Rappelez-vous que c'est juste pour pratiquer. Donc, les caméras, puis les ordinateurs portables, après les ordinateurs portables, nous avons des téléphones, des accessoires, et le dernier était pour les autres. Donnez cette sauvegarde, allez dans le navigateur et actualisez. Notre menu supérieur est maintenant de retour comme il se doit et en dessous de la catégorie, nous avons notre ligne qui étend toute la largeur de la page pour l'instant, mais ce n'est pas à craindre. Ci-dessous, nous avons nos articles de liste dans une liste non ordonnée. Ensuite, nous avons la deuxième liste de barres latérales pour les gammes de prix, que nous allons ajouter juste souffler cette rubrique de prix ici. Retour à l'éditeur de texte, nous allons les ajouter ci-dessous ce h3, le prix. Assurez-vous que cette liste non ordonnée se trouve encore entre cette section div. Rappelez-vous que c'est le conteneur complet pour notre barre latérale. Tout le contenu de la barre latérale doit aller entre les balises d'ouverture et de fermeture. Reprenons notre règle horizontale, puis notre liste non ordonnée. À l'intérieur, je vais énumérer les articles, vous pouvez ajouter le prix, disons 1-9, la deuxième gamme de prix était 10-29, puis continuez 30-59, disons 60-99, et le plus bas peut être 100 plus. Ensuite, enregistrez, rechargez, puis nous avons notre deuxième liste non commandée en dessous du prix. Ça a l'air bien maintenant. Enfin, nous avons le menu de pied de page. Nous devons d'abord créer une section div de pied de page pour les ajouter à l'intérieur. Rappelez-vous que nous avons la section div pour notre en-tête. Nous avons la section div ici pour notre barre latérale, puis en bas, nous avons cette section div pour notre contenu principal, qui inclut les produits. Juste après cette section et aussi toujours entre les tags body, nous allons ajouter un nouveau div et c'est pour la section photo. Tout ce que nous avons à faire est d'ajouter une nouvelle liste non ordonnée avec une nouvelle liste d'éléments. C' est exactement la même chose que la section d'en-tête. Donc, nous avons la maison, nous avons boutique et puis finalement nous avons contacté nous. Avec ça en place, donnez ça une sauvegarde. Pour voir cela dans le navigateur, nous allons actualiser. Nous le voyons maintenant tout en bas. J' aurai ces listes en place. Ensuite pour passer à jeter un coup d'oeil à l'ajout d'images. 12. Travailler avec des images (commencer le HTML): Nous avons surtout travaillé avec des éléments textuels jusqu'à présent. Maintenant, il est temps d'ajouter quelques images à notre site Web. J' ai fourni les mêmes images que j'utilise comme téléchargement gratuit pour une utilisation ou vous pouvez bien sûr télécharger les vôtres si vous préférez. Et j'ai ces images dossier sur le bureau, que je vais faire glisser dans le dossier du projet. Il contient simplement six images que nous allons utiliser pour le projet. Donc tout ce que je vais faire, c'est ouvrir le projet textile. A l'intérieur de là, je vais faire glisser dans ce dossier d'images. Donc tout le désir d'avoir maintenant est le index.HTML à côté du dossier images. abord, nous devons passer à la page d'index et ajouter les éléments d'image. Cela n'a aucun contenu à l'intérieur de celui-ci, donc il n'a pas de balise de fermeture. Alors faisons cela à l'intérieur de notre productif, qui est juste ici. Alors allons à l'intérieur, juste au-dessus du titre de contrôleur de jeu. Ajoutons l'image sans la balise de fermeture. A l'intérieur d'ici, nous pouvons ajouter un attribut source pour spécifier l'emplacement de l'image. Il y a plusieurs façons de le faire. Tout d'abord, je veux regarder y compris les images d'autres sites Web. Donc, si nous allons sur le navigateur Web et ensuite aller à Google, si vous recherchez Wikimedia Commons. Allons à ce lien en haut ici. Le site Wikimedia Commons a généralement une photo du jour. Donc, vous avez aussi l'air un peu différent de cela. Tout ce que nous devons faire si nous allons à cliquer avec le bouton droit et aller à copier l'adresse de l'image, puis passer à notre source et coller ceci entre les guillemets. Juste comme ça. Donnez ça une sauvegarde. Si nous revenons à notre page d'index dans le navigateur, cliquez sur Actualiser, nous avons maintenant une image à l'intérieur de cette section produit. Donc, bien que cela fonctionne parfaitement bien, lien vers des images sur d'autres sites Web n'est généralement pas recommandé. Tout d'abord, l'emplacement de l'image n'est pas sous votre contrôle. Ainsi, le propriétaire du site pourrait le déplacer ou le supprimer. En outre, cette méthode, qui est connue sous le nom de lien à chaud, ne devrait être effectuée que si j'ai l'autorisation du propriétaire du site Web. Une meilleure façon de le faire est d'utiliser nos propres images. Donc, nous contrôlons l'emplacement. Nous avons déjà ajouté ces images à notre dossier de projet, à l'intérieur de ce dossier d'images également. Donc, au lieu de cela, si nous revenons à la sauce, puis retirez les longitudes ajoutées. A l'intérieur, nous spécifions un chemin de fichier. Donc nous sommes à l'intérieur de la page d'index maintenant, donc nous devons aller à l'intérieur du dossier images. Donc, ce sont des images barre oblique vers l'avant. A l'intérieur du dossier images, nous spécifions le nom de l'image que vous souhaitez ajouter. Donc, parce que nous créons un produit pour un contrôleur de jeu, et ajoutons l'image, qui est contrôleur avec l'extension the.jpg. Donc, cela doit être exactement le même que le nom à l'intérieur ici. Sinon, ça ne marchera pas. L' autre extrémité jpg est un type de fichier, et c'est aussi important. Si vous utilisez vos propres images avec un type de fichier différent, tel as.png, vous devrez changer cela pour refléter cela. Regardez également les fichiers alpha jpg dans lesquels est enregistré comme JPEG comme ça. Alors assurez-vous que c'est sauvé. Ensuite, allez sur le navigateur. Voici l'image de notre manette Xbox. L' élément image a également d'autres attributs que nous pouvons utiliser aussi. Un attribut important est alt. Alors revenez. À la toute fin, nous pouvons également ajouter la balise alt. A l'intérieur d'ici, nous pouvons mettre quelques textes. Ceci est important parce que nous pouvons définir une alternative textuelle à utiliser si l'image ne peut pas être chargée pour raison particulière ou pour les personnes malvoyantes utilisant un logiciel de lecture d'écran pour afficher votre page. Donc, au lieu de l'image, s'il y a un problème avec le type dans le texte de l'image du contrôleur de jeu, juste comme un exemple. Aussi, nous pouvons définir la largeur et la hauteur de l'image aussi. Donc, en dehors des citations. Réglons la hauteur. Donc, les hauteurs, réglons cela à 300 et aussi la largeur égale à 300 aussi. Ainsi, il ne définira qu'un de ces lieux, comme la largeur ou la hauteur. L' image sera mise à l'échelle proportionnelle, en gardant la taille et le rapport de largeur identiques à ce qu'elle est actuellement et à la fois la largeur et la hauteur, peuvent rendre l'image un peu hors de proportion. Donc, enregistrez et actualisez. Donc maintenant, nous voyons que c'est 300 pixels par 300 pixels, ce qui rend l'image un peu écrasée. Donc, à la place, je vais juste laisser la largeur en place, enlever la hauteur. Si nous actualisons l'image reste maintenant en proportion. C' est ainsi que nous pouvons ajouter des images. Ensuite, nous allons examiner comment ajouter des liens hypertexte à tous les projets. 13. Liens (commencer le HTML): Tôt dans le cours quand nous regardons HTML et les problèmes qu'il résout. Nous avons mentionné, l'hypertexte est le texte affiché sur un ordinateur qui relie à d'autres textes ou documents. Ces liens sont appelés hyperliens. Nous avons déjà nos éléments de menu, tout comme l'exemple ici. Mais nous avons besoin d'un moyen de les changer pour les liens vers d'autres pages. Pour ce faire, nous avons un élément qui représente l'ancre. Nous pouvons l'utiliser pour créer des liens vers d'autres pages, différents emplacements sur la même page, ou même d'autres sites web aussi. Mettons-nous au travail en ajoutant des liens à nos éléments de menu. Passons à la page d'index, et passons à notre en-tête, en haut. Ces trois liens ici, premiers liens ajoute l'élément a autour de ce que nous voulons lier. Dans notre cas, nous voulons lier le texte ici. Je vais juste découper cela et puis ouvrir l'élément a qui s'ouvre et se ferme. Au milieu ici, nous pouvons coller dans notre lien à la maison une fois de plus. Cela signifie que notre texte sera cliquable. Ensuite, nous ajoutons l'emplacement vers lequel nous voulons lier, en ajoutant l'attribut href, qui signifie référence de lien hypertexte. A l'intérieur de l'ouverture une étiquette, href, juste H-R-E-F. Ensuite, à l'intérieur de ce href, nous pouvons ajouter un lien. Laissons un lien vers un site Web aléatoire, disons le site Web Mozilla que nous avons visité plus tôt, donc http://developer.mozilla.org, et enregistrez cela, sur le navigateur, rafraîchir. Puis remonter en haut de la page. Nous pouvons voir instantanément qu'il y a un changement avec le lien d'accueil. Si nous survolons, nous voyons maintenant un curseur différent. C' est aussi une couleur différente avec le soulignement, ce qui montre qu'il s'agit d'un lien. Cliquons sur cela et voyons ce qui se passe. Ensuite, nous nous connectons à ce site developer.mozilla.org, tout fonctionne bien. Nous avons appuyé sur le bouton de retour ont été ramenés à notre page d'index. Il s'agit d'un lien externe parce que nous nous éloignons de notre propre site Web. Nous pouvons également créer un lien interne vers une autre page de notre projet. Nous allons créer d'autres pages Web vers lesquelles créer un lien. Revenons au projet. Passons à notre vignette de texte, assurez-vous que vous ne cliquez pas sur le dossier des images. Nous allons cliquer sur ce bouton, puis cliquer sur nouveau fichier. Assurez-vous que ce nouveau fichier est en dehors du dossier images et à côté de ce fichier index.html. Ensuite, sauvegardons ce contact avec l'extension HTML point, tout comme la page d'index. Ensuite, nous allons simplement ajouter un simple texte de la page de contact, sauvegardez cela. Ensuite, faisons un de plus, nouveau fichier. Alors appelons ceci le produit-détail. Encore une fois avec une extension HTML point. Il suffit d'ajouter du texte ou une page détaillée du produit. Il s'agit de la page sur laquelle vous trouverez un lien vers ou cliquez sur l'un des produits individuels pour obtenir plus d'informations sur ce produit individuel. Maintenant, nous allons avoir nos nouvelles pages, revenons au index.html. Au lieu de ce lien externe, nous pouvons supprimer cela. Nous allons créer un lien interne vers ces deux nouvelles pages que vous avez créées. Le premier que je veux faire est un lien vers la page index.html. Comme il s'agit du lien d'accueil, nous voulons que ce lien renvoie à cette page d'index. Vous donnez cela une sauvegarde et puis nous cliquons dessus. Nous ne pouvons voir rien changer parce qu'il est toujours un lien sur cette page d'index, et bien sûr nous avons toujours pris cette page d'index. Maintenant, pour le magasin. Si nous découpons les textes de la boutique en regardant comme le lien avec la balise, et coller cela au milieu. Nous n'avons pas encore de page de boutique, donc nous pouvons laisser un attribut href vide. Cela signifie qu'il sera toujours stylé comme le reste des liens. Mais il ne se liera nulle part lorsque nous cliquerons dessus. Ensuite, la page de contact, qui est l'une des pages que nous venons de créer. Ouvrons les balises a. Coller nous contacter à l'intérieur du milieu, l'attribut href. Cette fois, c'est contact.html. Enregistrez cela, tout comme lorsque vous travaillez avec des images, ce chemin de fichier est relatif. Cela signifie qu'il est relatif à l'emplacement actuel. Nous sommes actuellement dans la page index.html. La page de contact et de détail du produit se trouve à côté de cette page dans la structure du dossier. Par conséquent, nous pouvons simplement ajouter le nom du fichier. S' il a l'un de ces fichiers à l'intérieur d'un dossier, il faudrait également ajouter le nom du dossier juste avant, comme ceci. Mais nous ne le faisons pas, donc nous pouvons simplement le laisser comme contact.html. Vous pouvez faire une sauvegarde et essayons ceci. Rafraîchir, nous pourrions essayer la boutique et nous n' avons pas de lien vers n'importe où donc c'est juste rester sur la page actuelle. Nous avons un lien vers la page de contact, donc une fois que nous cliquerons dessus, il prendra ensuite à cette page de contact. Nous pouvons également voir en haut, nous sommes actuellement dans le contact.html. Si nous cliquons sur le bouton de retour sur le navigateur, nous sommes alors ramenés à cette page d'index. Un autre type de lien que nous pouvons utiliser est un lien vers différentes parties de la même page. Pour ce faire, nous devons ajouter du contenu temporaire à cette page. Nous pouvons cliquer sur un lien et faire défiler vers le bas jusqu'à la partie que nous voulons. Je vais copier l'image et la coller en bas, pour créer un peu plus de contenu. Cherchons les images que nous avons ajoutées auparavant. Ceci, copions-le et tout ce que nous allons faire est de continuer à copier et coller ceci dans. Donnez-nous juste un plus de contenu sur la page et donnez cela une sauvegarde. Ensuite, si nous actualisons le navigateur, nous avons maintenant un contenu que nous pouvons faire défiler vers le bas. Cela nous permettra de cliquer sur un lien , puis la page fera défiler vers le bas jusqu'à la section de la même page. Ceci est possible en ajoutant un ID, donc permet d'ajouter un ID à l'un de ces produits. Au tout début, un ID est juste un attribut comme nous l'avons vu auparavant. Appelons cela un ID de lien. Nous pouvons ensuite faire défiler vers le bas jusqu'à la section lorsque nous cliquons sur le bouton d'accueil. Remplaçons le href ici de l'index ou html par la valeur d'un hashtag, puis lien. Le hachage est utilisé pour travailler avec des ID et nous le verrons beaucoup plus tard dans le cours ou travailler avec CSS et JavaScript. Maintenant, donnez cela une sauvegarde puis actualisez et maintenant si cliquez sur la page d'accueil, vous voyez maintenant que la page passe maintenant au premier produit ici, qui est celui auquel nous avons ajouté l'ID. En outre, il peut créer un lien vers d'autres pages lorsqu'un utilisateur clique sur l'une de ces images. Tout d'abord, nous allons rétablir le site Web à la façon dont il était. Supprimons ce lien ici et revenir à index.html. Si nous faisons défiler vers le bas, cela devrait supprimer cet attribut ID. Ensuite, nous pouvons également supprimer toutes les images supplémentaires que nous avons ajoutées pour nous donner la hauteur supplémentaire. Retirez toutes ces images supplémentaires, ne laissant que la première que nous avions à l'origine. Maintenant, nous pouvons travailler sur la liaison quand un utilisateur clique sur cette image. Pour cela, nous pouvons lier les images du produit à ce nouveau fichier product-detail.html que nous avons créé. Tout ce que nous avons à faire est d'entourer cette image avec les balises a. Permet d'ouvrir les balises a. Ensuite, à l'intérieur, nous collons dans le contenu tel que l'image que vous voulez lier. Ensuite, à l'intérieur du côté ouverture, nous ajoutons les attributs familiers href, qui va lier à product-detail.html. Product-detail.html et donnez cette sauvegarde. Nous pouvons également supprimer cet attribut de largeur aussi, nous allons le dimensionner plus tard en utilisant CSS. Retirez cela et donnez-lui une sauvegarde. Maintenant, sur le navigateur, nous pouvons recharger et maintenant nous pouvons voir quand nous survolons l'image, le curseur change pour montrer que c'est un lien, et cliquez sur cela, puis nous prenons dans la page détaillée du produit que vous avez créé ici. C' est ainsi que nous pouvons ajouter des liens vers notre site Web. La dernière chose que je veux faire avant de terminer est de copier ces trois liens de la section d'en-tête. Rappelez-vous que ce sont les mêmes liens qui sont en bas dans le pied de page. Il suffit de les copier, et ensuite nous pouvons remplacer ces trois éléments de liste dans le pied de page par ceux qui sont des liens. Donnez cela une sauvegarde, rafraîchir, en fait, nous devons revenir au index.html. Ensuite, vers le bas, nous pouvons voir la section pied de page a maintenant trois liens aussi. C' est ainsi que nous pouvons utiliser des liens à l'intérieur de nos pages Web. Ce sont d'autres parties vraiment utiles et importantes de la construction de sites Web, comme vous pouvez le voir. Nous les utiliserons beaucoup au fur et à mesure que nous progresserons tout au long de ce cours. 14. Temps de pratique - Lien vers les pages (commencer le HTML): Maintenant, c'est le moment de faire plus de pratique par vous-même. Si vous vous sentez à l'aise de le faire. Cette fois avec des liens. Si vous allez dans le navigateur, nous avons cette image de produit, lien vers la page détaillée du produit, que nous avons créé. Ce que j'aimerais que vous fassiez dans cette vidéo, c'est aussi transformer le titre du produit du contrôleur de jeu en un lien, qui relie la même page détaillée du produit. En outre, si nous regardons la version finale, j'aimerais que vous alliez et créez les liens Plus d'infos et Ajouter au panier. Rappelez-vous, nous n'avons qu'un seul produit jusqu'à présent, donc juste commencer ce produit sous un seul produit est très bien. Tout ce que vous devez faire est d'ajouter ces deux liens en utilisant l'élément A que vous avez découvert avec du texte entre l'ouverture et la balise de fermeture. Bien que ces textes ressemblent à des boutons, ce n'est qu'un cas d'ajout de CSS, ce que nous ferons plus tard. Tout ce que je m'attends est un texte simple qui est un lien lorsque vous cliquez sur. Le bouton Plus d'informations peut également renvoyer à la même page détaillée du produit, comme nous l'avons fait pour l'image et aussi pour le titre. Cependant, vous pouvez laisser un attribut href vide pour ce bouton Ajouter au panier car nous n'avons pas de pages à lier pour le moment. Allez-y et donnez un coup d'envoi ou si vous avez encore un peu d'incertain, je vais aller de l'avant et le faire maintenant. Revenons à Visual Studio Code et commençons par le titre du produit. Localisons notre produit, qui est juste ici sur tous les articles. Commençons par le titre du produit du contrôleur de jeu. et copions à notre place, puis nous pouvons ajouter nos balises d'ancrage. Ensuite, entre l'ouverture, la balise de fermeture, nous pouvons coller dans un titre de contrôleur de jeu, puis aller de l'avant et ajouter les attributs href à l'intérieur la balise d'ouverture et cela va faire un lien vers la page product-detail.html. Ensuite, nous pouvons ajouter les deux liens pour Plus d'infos et Ajouter au panier et je vais le faire juste après la description ici. Faisons de l'espace et à la première balise A et ce sera avec les textes de More Info. Ceci est également lié à la même page détaillée du produit, donc nous pouvons également ajouter l'attribut href. Notre product-detail.html. Ensuite, notre deuxième lien juste en dessous et ceci est pour Ajouter au panier. Nous pouvons également ajouter les attributs href, mais comme je l'ai mentionné précédemment, cela va juste être une chaîne vide pour instant car nous n'avons aucune page HTML se tournant vers. Je vais donner cette Sauvegarder du navigateur. abord, nous allons cliquer sur le contrôleur de jeu et cela nous amène à la page détaillée du produit. Faites défiler vers le bas, nous avons plus d'informations, qui nous amène également à la même page détaillée du produit et Ajouter au panier, ce qui nous garde toujours sur la page index.html. C' est tout maintenant pour le défi, j'espère que vous l'avez réussi et je vous verrai ensuite, où nous allons jeter un oeil sur les éléments sémantiques. 15. Qu'est-ce les éléments sémantiques ? (commencer le HTML): Je veux maintenant faire un petit pas en arrière de l'ajout à ce site Web et prendre un moment pour regarder ce que nous appelons des éléments sémantiques. Les éléments sémantiques sont simplement des éléments qui décrivent clairement leur contenu, non seulement pour dire au navigateur Internet, mais aussi d'autres développeurs regardant également votre code. Il s'agit d'un schéma d'un site Web typique. Le corps contient tout le contenu que nous voyons à l'écran, comme nous le savons déjà. Ici, nous voyons quelques sections typiques d'un site Web. Chaque section a des éléments div. Un div est une section ou une division utilisée pour regrouper le contenu. Nous l'avons déjà fait dans notre projet en regroupant la section d'en-tête, la barre latérale et chaque produit. C' est ainsi que les choses ont été faites dans le design web depuis assez longtemps et le sont toujours. Les éléments Div sont parfaitement fins à utiliser. En fait, nous les utiliserons beaucoup pendant ce cours. Souvent, vous verrez un attribut Id ajouté à chacun de ces divs. Cela vous permet de sélectionner un certain div, nous voulons appliquer le style ou la mise en page pour utiliser le CSS. Ici, nous ajoutons également quelques éléments div, cette fois imbriqués à l'intérieur des éléments existants. Encore une fois, c'est bien et très commun. Nous avons déjà fait cela dans le projet en ayant un div parent environnant pour tout le contenu principal, puis nicher dans un div à l'intérieur de chaque produit à l'intérieur de cette div principale. Depuis la version HTML cinq, nous avons maintenant quelques éléments alternatifs que nous pouvons utiliser comme vous pouvez le voir ici. Plutôt que d'utiliser un div générique, nous pouvons maintenant utiliser un élément sémantique ou plus descriptif. Tant le div que tous ces nouveaux éléments que nous voyons ici, ont encore une balise d'ouverture et de fermeture pour entourer le contenu aussi. Nous avons des éléments d'en-tête que nous pouvons ajouter à notre projet à place de la div entourant le titre du site et le menu de navigation. Il y a aussi principal, qui contient le contenu principal du site Web. Ceci ne doit pas être utilisé pour tout contenu qui est répété dans d'autres pages, comme les barres latérales. Par exemple, les éléments latéraux que nous voyons sur la droite sont souvent utilisés pour les barres latérales et sont généralement répétés sur le site Web. Par conséquent, il est préférable d'être séparé du contenu principal. Nous avons également un pied de page latéral, donc nous pouvons utiliser tous ces nouveaux éléments ici à l'intérieur de notre projet. C' est l'exemple que nous avons vu plus tôt, bien cette fois avec les éléments plus récents, plus sémantiques. Ici, vous pouvez voir un élément d'article qui est idéal pour des utilisations telles qu' un billet de blog ou un widget qui a un contenu autonome. Il y a aussi un élément de section en dessous de deux. Cela, tel qu'il semble, définit une section de nos documents web. Il s'agit de regrouper le contenu connexe. Nous avons également maintenant l'élément nav, que vous pouvez utiliser pour entourer nos liens de navigation. Nous n'avons pas besoin de les ajouter à toutes les zones de navigation de notre site. Il est uniquement destiné à être utilisé pour les blocs principaux ou les liens de navigation. Notez que nous avons placé ceci à l'intérieur de l'en-tête de cet exemple. Cependant, cela n'est pas nécessaire. Il peut être placé à l'intérieur ou à l'extérieur de l'en-tête ou même imbriqué à l'intérieur sur les zones deux. Nous pouvons également aller encore plus loin en réutilisant des éléments tels que l'en-tête ou le pied de page pour définir la section d'en-tête ou de pied de page d'un article, par exemple ou même jouer des sections à l'intérieur d'autres éléments, comme la barre latérale. Rappelez-vous si ce n'est qu'une façon courante d'utiliser ceux-ci. Vous n'êtes pas obligé d'utiliser de quelque manière que ce soit. Leur utilisation diffère également selon le style de site Web que vous construisez. Maintenant, nous savons ce qui est à notre disposition. Nous pouvons maintenant passer à notre projet. 16. Ajout d'éléments sémantiques dans notre projet (début HTML): Nous venons tous d'apprendre sur les éléments HTML sémantiques. Nous pouvons maintenant les appliquer à notre projet. En l'état, cela ne changera pas l'apparence à l'intérieur du navigateur, mais au lieu de cela, il ajoutera une structure significative à notre page web, ce qui est idéal pour le navigateur et sur le développeur aussi. Dans la page index.html. Commençons par le haut en ajoutant les éléments d'en-tête à la place de cette div environnante. Étiquette d'ouverture juste mettre le texte de H1, peut être remplacé par en-tête. Ensuite, au bas de cette section, juste en dessous de la liste non ordonnée, nous pouvons ensuite fermer cette section d'en-tête 2. Maintenant, un navigateur Web ou un développeur peut clairement voir que c'est la section lourde, plutôt que juste un conteneur div générique. Si nous sauvegardons cela et puis rechargeons, nous ne voyons aucune différence à l'intérieur du navigateur. La même chose vaut pour la barre latérale. Nous pouvons remplacer l'élément div par les éléments de côté, que nous avons vus auparavant. Faites défiler vers le bas en dessous de l'en-tête, ci-dessus achat boutique, nous pouvons remplacer cette div avec de côté, puis vers le bas, en dessous de la liste non ordonnée pour les changements de prix trop avec de côté. À l'intérieur de cette section, nous avons aussi deux sections à côté. Une pour cette liste de catégories, qui est cette section juste ici et ensuite une section pour les prix. Je vais les séparer en les entourant chacun d'un élément de section. Juste ci-dessous magasiner en ajoutant un élément de section. Copions ensuite le titre de niveau trois de la catégorie. En fait, découpons ça. Tout le chemin vers le bas de la liste non ordonnée. Commande ou Contrôle X pour découper ceci, puis nous allons coller ceci à l'intérieur de cette section. Voici notre première section ici pour les catégories. Ensuite, en dessous de cela, ajoutons une deuxième section, qui va être pour les prix. Encore une fois, nous pouvons copier la rubrique Niveau 3 jusqu'à la fin des prix de notre liste, Commande ou Contrôle x pour découper cela. Maintenant, collez ceci à l'intérieur de la section. Maintenant, nous avons nos deux sections à l'intérieur de la barre latérale. Donnez cette sauvegarde, et vérifiez si tout va bien dans le navigateur. Nous ne voyons pas de différence, donc tout semble bien. Ces sections que nous venons de créer contiennent généralement un titre. Nous avons déjà ces trois rubriques en place ici. Donc ça pourrait être pour ce déplacement vers le bas à l'extérieur de la barre latérale. Alors passons ci-dessous divulguer et mettre à part la section. Les produits seront la section principale de notre dernière vidéo. Nous avons également ces principaux éléments que nous pouvons ajouter. Cela remplacera ces éléments div environnants qui contourne le seul produit que nous avons déjà. Donc, l'intérieur ouvert de div vient remplacé par principal. Puis vers le bas tout en bas, fermez la section principale. Au bas de la page, nous pouvons également utiliser l'élément de pied de page 2. C' est la dernière section div et page qui est le pied de page. Changons simplement cela pour être les nouveaux éléments de pied de page HTML-5, et donnons cela un save and over au rechargement du navigateur. Nous ne voyons aucune différence, mais maintenant nous avons les balises sémantiques en place. Nous avons également dit dans la dernière vidéo, il y a maintenant un élément nav. Ceci est utilisé pour représenter les principales zones de navigation. Notre menu d'en-tête et de pied de page contient des liens vers d'autres pages de notre site Web. Cela pourrait être un bon cas d'utilisation pour les éléments nav. Tout d'abord, ajoutons ceci autour de la zone de pied de page. Juste après la balise d'ouverture du pied de page, vous pouvez ajouter notre navigation d'ouverture et la balise de fermeture. Découvrons un peu, puis collez dans le nav de fermeture. Assurez-vous que le tien ressemble à ça. Nous avons la zone de pied de page. Ensuite à l'intérieur, nous avons le nav, et ensuite nous avons notre liste non ordonnée avec nos liens gratuits. Ensuite, nous pouvons également répéter cela pour la section d'en-tête 2 du haut. Juste après le magasin technologique, on peut ouvrir le NAV. Ensuite, nous pouvons découper la balise de fermeture, qui a été automatiquement ajoutée dans pharos à ce sous la liste non ordonnée. Nous pouvons également ajuster cela un peu pour qu'il soit plus lisible. Enregistrer et juste rafraîchir et vérifier que tout semble bien, ce qui semble être que nous avons toujours nos liens en place et rien ne semble différent, mais nous avons maintenant des éléments plus descriptifs ou sémantiques. Maintenant, structure dans notre page web. 17. Temps de pratique - ajouter plus de produits (commencer le HTML): Nous avons maintenant couvert beaucoup des bases du HTML, j'aimerais que vous alliez maintenant et que vous pratiquiez vous-même en ajoutant d'autres produits. Bien sûr, les produits supplémentaires ressembleront exactement à celui que nous avons ici sans aucun du style CSS pour l'instant, mais l'important, est d'obtenir le contenu à l'écran. Si nous passons à la version finie ici, vous pouvez voir six produits différents. C' est ce que j'aimerais que vous alliez et que vous fassiez. Vous pouvez en ajouter encore plus si vous le souhaitez. Il ne doit pas être six, mais j'ai fourni six images au total que vous pouvez utiliser. Nous avons déjà ce premier élément de la manette de jeu, sorte que vous pouvez baser le reste de celui-ci et juste changer l'image et aussi le texte du titre et aussi la description. Assurez-vous que chaque produit possède également un GIF qui l'entoure, tout comme celui que nous avons déjà. Vous pouvez, bien sûr, copier et coller dans ce que nous avons déjà. Vous pouvez copier la section div complète et coller dans cinq autres fois. Mais si vous êtes nouveau au HTML, je vous recommande au moins d'essayer de taper certains, pour vous donner un peu plus de pratique. Je vous suggère de mettre la vidéo en pause sur la version finie pour voir toutes les images et le texte. Ne vous inquiétez pas de tout gâcher. Je vais parler de ça dans la prochaine vidéo. 18. Solution - Ajouter plus de produits (commencer le HTML): J' espère que vous avez réussi à compléter le reste du produit et obtenir plus de pratique, ajoutez un HTML à votre site Web. Je vais rapidement parcourir et ajouter ces cinq produits supplémentaires à mon projet. Retour à l'index ou au HTML. Faites défiler vers le bas jusqu'à notre produit à l'intérieur de la section principale. Cette section div ici est celle contenant toutes les informations sur le produit. Je vais juste copier ceci et coller ceci juste en dessous. Je vais effectivement supprimer ce lien vers le détail du produit et laisser cela dans le premier formulaire. Supprimons ça et alignons tout ça. Le premier était le contrôleur de produit. Le second sera pour les écouteurs. Les images étaient écouteurs point jpg. L' alt était l'image du casque. Ensuite, le texte des écouteurs blancs, et le prix que nous pouvons ajouter n'importe quel prix que vous voulez, disons 54.95 pour cela. On appellera ces superbes casques blancs. Il y a une balise de rupture là juste pour les ajouter sur deux lignes différentes. Ajouter au panier et plus d'informations peuvent rester aussi, mais nous allons supprimer le lien vers ces deux. Tu n'as pas à faire ça, mais je vais juste enlever ça pour le mien. Ensuite, nous pouvons copier à nouveau et coller, assurez-vous que tout est aligné. Le troisième élément était pour la caméra, qui était caméra point jpg. La description de l'image de l'appareil photo était pour l'appareil photo Canon. Supprimons également ce lien ici, en fait cela sur le casque aussi, sorte que l'image avec le texte alternatif, le titre, le prix, va être un peu plus. Disons 649.95. La description, appareil photo génial par Canon. Copiez et collons-le à nouveau. Après la caméra était le microphone. Microphone dot jpg, l'ancien texte, un titre dans cela, c'est un microphone Yeti. Le prix, 119.95 pour ça. Inscription, disons le micro Yeti bleu génial. En dessous de cela, juste la ligne est en place et sont les mêmes. C' est nos câbles. Au lieu de la caméra, ce sera des câbles. Image des câbles. Le titre. Prix, 10.95 et économisez pour les câbles. Description, câbles impressionnants disponibles en différentes longueurs. Vous pouvez ajouter n'importe quoi ici que vous préférez, ça n'a pas vraiment d'importance. Tout le point est juste d'obtenir plus de pratique d'écrire du code HTML. Ensuite, après les câbles, nous avons notre dernier qui est pour les lentilles. Disons que les objectifs d'appareil photo 99.95 et disons les objectifs d'appareil photo impressionnants. Un, deux, trois, quatre, cinq, six sont nos six produits maintenant sur la page d'index. Donnez cette sauvegarde, puis actualisez. Du haut, nous avons notre premier produit, nos écouteurs, l'appareil photo, câbles micro, et aussi les objectifs. J' espère que vous parviendrez à compléter cela, sinon, ne vous inquiétez pas, vous aurez eu une pratique plus précieuse de toute façon. Je vais vous voir maintenant dans la prochaine vidéo où nous allons jeter un oeil aux commentaires HTML. 19. Commentaires du HTML (commencer le HTML): Je veux juste prendre un moment rapide, jeter un oeil à l'utilisation des commentaires HTML. Ce ne sera qu'une courte vidéo pour les commentaires et vraiment important à connaître et à utiliser. Un commentaire est fondamentalement un domaine où nous pouvons taper des commentaires ou des notes à la fois à nous-mêmes, ou à d'autres développeurs que vous pouvez lire sur le code. Cela devient plus important dans les grands projets. Nous pouvons mieux comprendre ce qui se passe à l'intérieur de notre code ou de jogging notre mémoire si nous revenons quelques mois, voire des années plus tard. Pour d'autres commentaires, nous devons inclure la syntaxe suivante dans notre fichier HTML. Disons au-dessus de cette section principale, nous ouvrons les crochets d'angle, tout comme un élément HTML, puis ajoutons un point d'exclamation puis deux tirets et vous pouvez déjà voir que toute cette section par la suite est changé de couleur. Ensuite, nous fermons ceci en ajoutant deux tirets supplémentaires et fermons les crochets. A l'intérieur, nous pouvons ajouter notre texte pour faire un commentaire, disons section principale pour afficher les produits. Alors nous pouvons sauver ça. Maintenant, si nous actualisons le navigateur, et si nous allons à la section principale, qui est cette section « Tous les éléments » ici, nous voyons que le texte n'est pas rendu à l'écran, comme le reste du HTML. Les commentaires peuvent également être sur plusieurs lignes à. Donc, au lieu d'avoir tout cela sur une seule ligne, nous pouvons faire quelque chose comme ; allons au sommet ici, ou commençons par le corps. Nous pouvons ouvrir nos commentaires et clôturer tout de même. On peut peut-être faire une liste temporaire à faire. Disons numéro un, créez la page shop.HTML. Numéro deux, ajouter un style CSS. On peut continuer sur plusieurs lignes. Encore une fois, en enregistrant et en actualisant, nous pouvons voir que ces commentaires ne sont pas en haut de la page. Les commentaires sont également utiles pour supprimer les lignes de code 2. Par exemple, si vous voulez changer une image de produit, donc si nous descendons au premier produit, qui est ce contrôleur de jeu ici, nous pourrions simplement ajouter un commentaire comme celui-ci, juste avant les éléments de l'image. La même chose qu'avant. Ouvrez le crochet, ajoutez l'exclamation et deux tirets et vous pouvez voir instantanément que nous ne fermons pas cela, que tout le code restant par la suite est commenté. Donc il suffit de donner une sauvegarde et rafraîchir, et puis nous pouvons voir quoi que ce soit après que l'image a été supprimée de notre site Web. Mais nous voulons juste commenter cette image. Fermons ceci juste après les éléments de l'image. Sauvegardez puis descendez. Donc, tout notre contenu est ajouté emballage, sauf cette image pour le contrôleur de jeu. Je vais juste annuler ces modifications et ajouter l'image à nouveau. Nous sauvegardons et rafraîchissons et notre image est de retour en place. Cette syntaxe que nous utilisons ici des crochets d'angle, le point d'exclamation, et aussi les deux tirets n'est utilisée que lors de commentaires dans notre code HTML ou lors de l'utilisation de fichiers HTML. Sur les langues, utilisez une syntaxe différente, mais cela fonctionne exactement de la même manière. Nous examinerons plus tard comment les commentaires fonctionnent pour plus de langues. Mais pour l'instant, passons à regarder les entités HTML et les symboles. 20. Entités et symboles (commencer le HTML): Je veux vous montrer un moyen d'ajouter de beaux symboles visuels à nos sites Web et comment afficher certains caractères réservés en utilisant des entités HTML. Avant d'examiner les entités HTML, examinons pourquoi elles sont nécessaires en ajoutant à l'une des descriptions de produit. Par exemple, si nous descendons à, disons la caméra, et passons à la description. En fait, nous allons descendre jusqu'aux lentilles tout en bas. À l'intérieur des descriptions, si vous vouliez étendre cela et peut-être ajouter des informations supplémentaires à l'intérieur des crochets. Disons pour les modèles Canon moins de 2017. Vous pouvez immédiatement voir que l'éditeur de texte est changé la couleur du symbole inférieur ici, indiqué qu'il y a un problème. C' est parce que les symboles plus grands et moins que, une classe a des caractères réservés en HTML. Ces balises particulières sont réservées car un navigateur peut les confondre avec ces balises HTML d'ouverture et de fermeture, que nous avons ici. Cela peut être remplacé par une entité HTML. Toutes les entités HTML commencent par une esperluette et se terminent par le point-virgule avec un certain code entre les deux. Ça ressemble à ça. Si nous supprimons le symbole inférieur à, nous pouvons ajouter l'esperluette, qui est ce caractère ici. Inférieur à utilise le LT, puis un point-virgule à la fin. Maintenant que vous changez de rouge pour être de la même couleur que le reste des éléments. Tout ça devrait bien fonctionner. Sauvegardez cela, rechargez et si nous descendons à l'image, vers le bas des objectifs de l'appareil photo et comme notre description. Les modèles Canon moins de 2017, donc le symbole est maintenant affiché dans le navigateur. Jetons un coup d'oeil à un couple de plus juste pour la démonstration. Plus grand que, utilisez le gt, rafraîchir, vous pouvez voir les crochets d'angle est maintenant pointe vers la droite. Si vous vouliez afficher cette esperluette, que nous avons ici, c'est AMP, qui est montré d'esperluette, recharger et il y a juste un symbole. Une autre entité que nous pourrions utiliser est pour le devis. Au lieu de cela, nous pourrions utiliser QUOT, que vous montrez le devis, enregistrer et puis recharger. Maintenant, ayez la citation de tuple en place là. Il y a aussi beaucoup plus d'entités que vous pouvez trouver avec une recherche Google rapide si vous êtes plus intéressé. Les entités sont également utiles pour afficher des symboles qui ne figurent pas sur un clavier standard. Jetons un coup d'oeil à certains d'entre eux, commençant par le symbole du droit d'auteur. Le symbole du droit d'auteur est simplement une copie. Vous avez aussi l'esperluette et le point-virgule à la fin. Il y a le symbole de copyright juste là, permet de faire défiler. Juste pour voir ça un peu mieux. Jetons un coup d'oeil à une marque déposée qui est reg. Rafraîchir, et maintenant avoir le R dans le cercle et aussi petit comme une monnaie. Jetons un coup d'oeil à yen. Sauvegardez celui-là et rechargez. Maintenant, avez un symbole yen qui n'est pas sur mon clavier. C' est ainsi que nous pouvons les utiliser et bien sûr, vous pouvez Google ceci et trouver beaucoup plus que vous pouvez utiliser. Il y a des centaines de différents, donc il suffit de rechercher n'importe quel particulier que vous pourriez avoir besoin d'ajouter. Je vais juste supprimer cette section supplémentaire que nous avons ajouté et dire ceci, ainsi que trouver plus de ces en ligne avec une recherche Google. Il existe un site Web avec [inaudible] appelé unicode table.com. Si nous avions tous aujourd'hui, vous trouverez une vaste gamme de symboles que vous pouvez utiliser dans votre projet. Il y a les plus populaires en haut ou vous pouvez faire défiler un énorme ensemble d'icônes ci-dessous. Faisons une recherche en utilisant la barre de recherche en haut. Cherchons le jeu. En fait, nous recherchons le jeu vidéo, puis cliquez sur la recherche. Maintenant, nous avons un symbole de contrôleur de jeu vidéo. Si nous cliquons dessus, nous voyons que nous avons deux nombres différents, nous avons un numéro unicode et aussi du code HTML. Ce code HTML commence par l'esperluette, comme nous l'avons utilisé auparavant, et se termine par un point-virgule. Nous allons utiliser le code HTML, alors copions ce code qui nous est donné. Revenons au projet, puis faisons défiler jusqu'aux produits du contrôleur de jeu. Voici le titre juste ici. Ensuite, collons ceci dans et encore dans notre projet et rechargeons. Faites défiler jusqu'à la manette de jeu et nous y allons. Il y a une petite image qui est ajoutée dans. C' est souligné parce qu'il est toujours dans le lien. Découvrons ceci et collez ceci en dehors de cette balise « a », donc juste comme ça, puis rechargez. Maintenant, nous ne voyons pas le soulignement pour le lien. Maintenant, nous avons une belle icône de contrôleur à côté du titre du produit et comme vous pouvez le voir par la table unicode, avec littéralement des centaines et des milliers de modes différents que nous pouvons utiliser dans nos projets. Je suis sûr que vous trouverez beaucoup de bonnes utilisations pour ça au fur et à mesure que vous progressez. 21. Temps de pratique - Page détaillée du produit (commencer le HTML): Maintenant, c'est une excellente occasion d'aller de l'avant et de construire votre propre page HTML. Nous avons déjà créé les détails du produit sur notre page HTML juste ici, mais nous n'avons pas encore ajouté de contenu. Si nous passons à la version finie ici et cliquez sur l'image du produit, le premier article. Ceci est le détail final du produit à la page HTML, que je voudrais que vous essayez de copier. N' oubliez pas que nous avons juste besoin d'ajouter le contenu. Je ne m'attends pas à ce que la vôtre ressemble à ceci, version terminée jusqu'à ce que nous ajoutions dans le CSS. Vous pouvez laisser cette table en bas. Je vais juste pour l'instant, nous ajouterons celui-ci quand nous arriverons à la conférence des tables. Nous avons déjà tout le contenu dont nous avons besoin pour créer cela, nous avons déjà la section en-tête, nous avons déjà la barre latérale, nous avons déjà la section pied de page et nous avons également l'un de ces produits. Par conséquent, nous avons juste besoin de répliquer la page d'index, mais cette fois n'ont qu'un seul produit, qui est ce contrôleur. Vous pouvez bien sûr copier la page d'index complète et la coller dans le fichier de détails du produit, puis supprimer les produits de fichiers supplémentaires, mais si vous êtes nouveau à tout cela, vous pouvez le taper pour un peu plus de pratique. Si vous n'êtes toujours pas sûr, ne vous inquiétez pas. Je vais aller de l'avant et faire ça maintenant. Retour à Visual Studio. Je vais aller dans le index.html, appuyez sur Commande ou Contrôle A pour sélectionner tout le code, puis je vais à Commande ou Contrôle C pour copier. À la page détaillée du produit, supprimez ce texte, puis collez le même code que la page d'index. Si vous allez vers le haut, frotter ce texte ou nous pouvons également ajouter à la fin de celui-ci pour le détail et nous donner sauver. Ensuite, si nous faisons défiler vers le bas jusqu'aux produits, nous avons donc la barre latérale qui est très bien, puis tous les articles. Ce premier div est celui que nous voulons garder pour le contrôleur. Retirons tous les éléments supplémentaires, donc deux éléments supplémentaires là, le microphone, les câbles et enfin les lentilles. Pour déplacer cela, puis déplacer la sauvegarde du site principal. Nous avons juste un produit à l'intérieur de cette section principale avec le titre de tous les articles. En fait, nous pouvons changer cela pour les détails du produit, puis nous donner sauver, aller dans le navigateur, cliquez sur Actualiser. Mais passons à nos projets. Actualisez ceci, puis si nous sélectionnons le contrôleur de jeu, prendra ensuite dans la page détaillée du produit. Nous avons le titre, nous avons la barre latérale, puis la section détaillée du produit, qui est un produit, puis la zone de pied de page vers le bas tout en bas. Le tien devrait maintenant ressembler à ça. Nous avons tout le contenu que nous avons vu dans la version finale, l' exception du tableau, que nous examinerons dans la section suivante. 22. Tables HTML (formulaires, table et iFrames): Nous passons maintenant aux tableaux HTML. Les tables en tant que son, sont utilisées pour afficher une table de données. Nous utilisons un tableau ici sur la page détaillée du produit pour mettre en page des lignes de données sur les remises disponibles à l'achat en vrac. Les tables peuvent être utilisées pour n'importe quel type de données que vous souhaitez organiser en lignes et colonnes. Dans le passé, des tableaux étaient utilisés pour la pose d'un site Web. Par exemple, nous pourrions organiser tout le contenu que nous voyons sur cette page en colonnes et en lignes. Ceci est maintenant découragé car il y a plus d'alternatives CSS disponibles maintenant, surtout depuis grid et flexbox, que nous allons couvrir dans ce cours. Les tableaux ont toujours une place précieuse et maintenant il s'agit d'un affichage des données telles que le texte ou des chiffres, ou même des images de manière structurée. Laissez-nous un tour dans le détail du produit à un fichier HTML, alors revenons à l'éditeur de texte et puis ouvrons ce fichier. Allons vers les produits, donc en dehors de la barre latérale et dans la zone principale. Tels que faire un peu d'espace juste après le produit, mais personne n'est la section principale ici. Ensuite, nous pouvons ouvrir nos éléments de table, qui a la balise d'ouverture et de fermeture, et c'est ainsi que nous créons la table. Si nous regardons ce tableau à partir de la version finie, juste ici, nous avons deux lignes de données. Les lignes peuvent être créées en utilisant des balises TR de besoin, qui signifie ligne de table. Allons-y et ajoutez-les dans notre table. Dans notre cas sont TR. Ensuite, ajoutons une deuxième ligne de tableau juste en dessous. Chaque élément ou chaque cellule de chaque ligne est entourée des balises TD, qui représentent des données de table. Dans notre première rangée, nous avions la quantité 1, 2-3, 5-10, ou 10 plus. Vous pouvez l'ajouter à l'intérieur de la première ligne. On a la TD. Le premier était la quantité, puis vendu dans la première ligne de tableau, ajouter quelques nouvelles étiquettes TD d'un. Puis 2-3, 5-10, et enfin, 10 plus, frapper ce « Enregistrer ». Maintenant, passons au navigateur et assurez-vous que nous ouvrons notre propre projet. Je vais aller sur notre dossier de projet juste ici, et ensuite nous pouvons ouvrir ces index ou HTML. Bien sûr, le nôtre semble beaucoup différent parce que nous n'avons pas encore ajouté de CSS. Mais nous pouvons toujours cliquer sur les liens. Allons à la manette de jeu pour ouvrir cette page détaillée du produit. Il y a notre première rangée voir, juste souffler les produits. Retour à l'éditeur de texte. Nous pouvons le faire encore une fois pour la ligne de prix. Juste en dessous du premier TR, nous pouvons ajouter de petites étiquettes TD. Cette fois, le premier était le prix, donc 7995, et celui-ci un peu moins cher, disons 7895. Chacun d'entre eux correspondra au nombre réglable. TD encore, disons 7695. On pourrait ajouter 7495 à l'intérieur, appuyer sur « Enregistrer ». Retour sur le navigateur et recharger, et maintenant avoir deux lignes et des données. Est HTML avec ajouté pour le contenu du site Web, est exactement le même pour notre version jusqu'à présent et aussi la version finale que nous avons vu avant. Le style CSS joue vraiment un grand rôle dans un look et la sensation de sites Web. Beaucoup d'attributs de table tels que l'alignement sur la couleur d'arrière-plan. Mais étant obsolète en HTML 5, qui maintenant célèbre style avec CSS. Nous avions l'habitude de faire des choses telles que l'ajout de bordures et alignement de texte à l'intérieur du tableau, comme ceci. Lorsque j'ajoute des attributs de carte, définissez-le sur un pixel de large, nous pourrions aligner le texte à l'intérieur du centre, l' enregistrer et le recharger. Même si cela fonctionne actuellement dans mon navigateur, encore une fois, est recommandé de faire le style en utilisant CSS. Nous pouvons également remplacer TD par TH. Ceci est pour l'en-tête de tableau qui rend un contenu en gras. Ceci est utile pour la ligne supérieure de ce tableau, qui est la quantité. Allons de l'avant et remplacons la rangée supérieure par TH. Ces échanges TDs seront TH. Faites-le sur tous, qui a augmenté en outre un par un et remplacer TDs par THs, et un à faire maintenant nous donner sauver et voyons quel effet cela a. Maintenant, nous avons la ligne supérieure comme étant en gras parce qu'il s'agit d'un titre de table. C' est la configuration de base de la table. Mais nous pouvons aller encore plus loin et ajouter un peu plus de structure à cette table si nous regardons la version finale. Allons au détail du produit et ouvrez un nouvel onglet. Si nous regardons ce tableau juste ici, tout comme un document HTML, nous pouvons le diviser en un en-tête, un corps et une section de pied de page. La ligne supérieure avec la quantité peut être utilisée pour l'en-tête. Les données de prix peuvent alors être le corps. Nous n'avons pas une bonne utilisation pour les balises de pied de page dans son exemple, mais elles sont là si nous en avons besoin. En travaillant également sur une légende en haut de la table, que nous avons ajouté ici, nous achetons en vrac et économisons. Allons au projet et donnons ça un coup de pouce. Tout d'abord, nous pouvons avoir les en-têtes de table avec la tête T. Autour de cette rangée de table, nous pouvons ajouter de nouveaux éléments de tête en T. Ensuite, nous pouvons recouvrir notre première rangée de table, au-dessus de cela, et la coller à l'intérieur de sa section de tête de table. Ensuite, nous pouvons entourer les prix avec le corps T pour cette section de corps. Notre corps T dedans, et copiez cette ligne de tableau et collez-le dans la section du corps. Nous pourrions ajouter plus de lignes à si nécessaire, ou même une zone de pied de page avec un pied en T, les deux. Maintenant, gardons cette sauvegarde et rechargez le navigateur. Nous ne voyons aucun changement dans le contenu. Mais maintenant notre table a une structure plus descriptive, tout comme quand nous avons regardé les éléments sémantiques tôt. Maintenant, pour la légende, qui agit comme un titre pour le tableau, qui est ce texte juste ici. Revenons au sommet de la table, juste en dessous de ces éléments de table qui s'ouvrent. Nous pouvons ajouter notre légende ici, puis il ajoute des textes comme nous le faisons avec les balises T. Achetez en vrac et économisez. Ensuite, revenez à la page détaillée et rechargez. Maintenant que notre texte en haut, vous pouvez voir que ce texte est centré sur le tableau par défaut. La dernière chose que je veux vous montrer pour l'instant, avec des tables est les attributs colspan. Nous pouvons ajouter ceci à une cellule telle que TD ou TH pour faire de cette cellule particulière la largeur de deux ou plus. Si vous connaissez Microsoft Excel, c'est la même chose que de fusionner des cellules sur une ligne. Donnons à cela un aller à l'intérieur de la section d'en-tête, pour commencer par faire une étendue de quantité à travers deux cellules. La quantité TH, nous pouvons avoir les attributs colspan, et bouleversé est égal à deux. Actualisez, et maintenant la quantité s'étend sur la largeur des deux cellules ci-dessous. On pourrait faire la même chose à l'intérieur du corps pour le prix. Ajouter colspan équivaut à deux. Maintenant, le prix prend également la largeur de deux cellules aussi. Je vais juste supprimer rapidement ce dont nous n'avons pas besoin pour ce projet. On n'a pas besoin de ce gin Colspan. Nous pouvons avoir besoin de la table standard pour l'instant. Enlève ces deux-là. Nous n'avons pas non plus besoin de cette bordure, et les propriétés d'alignement aussi, c'est tout maintenant, mais je vais d'abord regarder les tables HTML. Ensuite, nous allons passer à la capture des formes d'onde d'entrée utilisateur. 23. Formulaires HTML (formulaires, table et iFrames): Dans cette vidéo, nous allons regarder une partie importante des sites Web, à savoir les formulaires. Vous avez probablement tous utilisé quelque chose comme ça, que vous voyez ici. Si vous allez à la version finie et cliquez sur la page Contactez-nous. Il s'agit d'un formulaire qui est utilisé pour obtenir l'entrée d'un utilisateur, comme la collecte d'informations pour s'inscrire ou envoyer un message. Les données saisies sont généralement envoyées à un serveur Web et nous examinerons ce côté des choses plus tard dans le cours. Pour le moment, cependant, nous nous concentrons simplement sur ce côté HTML, qui est utilisé pour afficher le formulaire à l'écran. Nous allons travailler sur la page Contactez-nous afin que nous puissions commencer à ajouter notre formulaire. Nous avons déjà ajouté un fichier HTML point de contact juste ici. Nous pouvons commencer à ajouter notre formulaire à cela. Nous pouvons commencer par ajouter notre structure. Je vais commencer par copier le contenu du détail du produit vers un HTML. Copiez puis collez ceci à la place du texte que nous allons ajouter ici. Vous pouvez bien sûr taper ceci pour plus de pratique si vous préférez. Mais je vais juste coller ça pour faire bouger les choses sur les formulaires. Pour assurer la cohérence de notre site Web, nous pouvons réutiliser le même en-tête et la même barre latérale. Cet en-tête peut rester, et toute la section latérale peut rester aussi, mais je vais supprimer la plupart de la section principale en dehors de ce titre. Allons jusqu'au bas de la table. Au lieu des détails du produit pour la rubrique de niveau 2, je vais ajouter un titre de contact avec nous. Maintenant, nous avons cette section principale claire pour ajouter un formulaire. Donnons ça un coup et sauvegardons ça. Si nous revenons au navigateur à l'intérieur de nos projets, essayons de cliquer sur nous contacter. Maintenant, nous sommes dans ce point de contacts HTML. Nous avons encore le titre et aussi la barre latérale, mais pas d'autre contenu principal. Dans cette section principale, nous pouvons ajouter notre formulaire. Le formulaire est contenu à l'intérieur d'un élément de formulaire. Ajoutons ceci là-dedans. Vous verrez souvent certains attributs à l'intérieur de cette balise d'ouverture de formulaire, tels que l'action. Juste comme ça, et aussi la méthode. Nous y reviendrons plus tard dans le cours car ils sont liés à la façon dont nous envoyons nos données de formulaire au serveur. Mais je voulais juste que vous soyez au courant d'eux si vous les rencontrez dans n'importe quelle documentation. Action est utilisée pour définir l'emplacement où le formulaire doit être envoyé. Nous ajoutons un chemin de fichier à l'intérieur, et la méthode définit quelle méthode HTTP nous voulons utiliser pour envoyer un formulaire. Nous pouvons envoyer soit comme une demande get ou une demande de poste, mais plus sur ce plus tard. Pour l'instant, je veux me concentrer sur l'obtention de quelques entrées à l'écran. Les entrées sont les entrées de l'utilisateur de capture sonore, telles que le texte, qui est entré, ou une case à cocher lorsque l'utilisateur clique dessus. Commençons par une entrée de texte pour le nom de l'utilisateur. Nous pouvons ajouter un élément d'entrée. Tout comme ça, il y a beaucoup de différents types d' entrées et nous les définissons en utilisant les attributs de type. Ajoutons le premier de texte et passons à nos projets, puis actualisons. Il y a notre texte de contact en bas et une entrée de texte. Ceci est juste une boîte simple où vous pouvez entrer n'importe quel type de texte que nous voulons. En fait, nous ne sommes pas limités au texte, nous pouvons même taper des nombres et des caractères différents aussi. Nous pouvons ajouter du texte avant ou après lui aussi, pour que l'utilisateur sache quoi entrer, comme son nom. Faisons ça maintenant. Juste avant que je vais ajouter le texte du nom, puis recharger et il y a notre texte à l'écran comme prévu. Si nous jetons un oeil cependant à cette version finie, nous pouvons voir à l'intérieur de l'entrée de texte, nous avons quelques instructions de texte faibles. Ceci est supprimé lorsque l'utilisateur clique sur la zone de texte et que nous commençons à taper. Ce texte est ajouté avec les attributs d'espace réservé. Revenons à nos entrées. Juste après les attributs de type, nous pouvons ajouter un espace réservé et ensuite nous pouvons ajouter notre texte dedans de, entrer votre nom et c'est notre texte à l'intérieur de là. Ensuite, nous voulons que l'utilisateur entre son adresse e-mail, qui est juste ici. Nous traitons cela de la même manière, mais cette fois l'entrée a un type d'e-mail. Sous une nouvelle ligne, nous pouvons ajouter des e-mails, puis ajouter nos entrées. Cette fois avec un type d'e-mail. Cela peut également prendre l'attribut d'espace réservé aussi d'entrer votre e-mail. Donnez cela une sauvegarde, puis actualisez et il y a notre pour former des éléments côte à côte. Le type d'entrée suivant est la zone de texte. Ceci est utilisé lorsque nous voulons qu'une zone plus grande saisisse plus de texte pour des zones telles qu'un message. Ajoutons ceci sur une nouvelle ligne. Tout d'abord, les textes du message, puis cette fois au lieu des entrées, nous utilisons la zone de texte. Cela a des balises d'ouverture et de fermeture, contrairement à ces entrées. A l'intérieur, nous pouvons également ajouter quelques attributs supplémentaires pour celui-ci aussi. Nous pouvons définir le nombre initial de colonnes de large que nous voulons que la boîte soit. Ajoutons les attributs d'appels et je vais définir le mien à 30. Aussi le nombre de lignes aussi pour la hauteur. Je vais fixer ma valeur initiale à cinq. Les zones de texte peuvent souvent être déplacées de plus en plus petites avec une petite section de glissement dans le coin. Rafraîchissez le navigateur et il y a notre plus grande zone de texte, dans laquelle nous pouvons ajouter plusieurs lignes de texte. Comme je l'ai mentionné précédemment, nous pouvons également cliquer sur la section dans le coin et le rendre plus grand ou plus petit. Rappelez-vous plus tôt dans le cours que nous avons mentionné, nous pouvons catégoriser la plupart des éléments en ligne ou niveau de bloc. Nous pouvons clairement voir que ici les éléments de formulaire sont en ligne. Si vous voulez qu'ils passent sur leur propre ligne, empilés les uns sur les autres, nous pouvons les entourer dans un div, qui est un élément de niveau bloc et cela nous donne l'effet que nous voyons sur la version finale ici. À l'intérieur du formulaire, ajoutons quelques éléments div. C' est le nom, je vais le coller. Deuxième div pour l'e-mail et enfin un troisième pour le message, collez-le dans. Puis rechargez et maintenant, les trois entrées sur leur propre ligne séparée. C' est un bon début de notre formulaire et continuera dans la prochaine vidéo. 24. Étiquettes, nom et identifiant (formulaires, tables et iFrames): Dans la dernière vidéo, nous avons ajouté quelques éléments de forme de base à la page. En outre, nous avons ajouté le texte Nom, Email et Message à gauche de chaque entrée. Indiquez à l'utilisateur quelles informations entrer. C' est juste du texte brut sans autres éléments HTML, comme une balise p, que vous pouvez voir ici. y a pas non plus moyen pour le navigateur de savoir que ces textes sont liés à ces entrées. Nous pouvons corriger cela en ajoutant une étiquette. Une étiquette c'est juste un moyen d'ajouter une légende de textes à chaque entrée comme ceci. Commençons par découper ce texte, puis nous pouvons ajouter notre étiquette à l'intérieur ici. Entre l'ouverture et la fermeture et les heures, nous pouvons maintenant coller notre texte à nouveau, donner que sauvegarder et recharger le navigateur. Nous pouvons voir instantanément que si nous regardons cette première entrée, elle ressemble à peu près à la même chose qu'avant. Cependant, le navigateur sait maintenant qu'il s'agit d'une légende pour un élément de formulaire. Mais comment sait-il que cette étiquette est pour ces entrées particulières et non pour l'Email ou le Message ? Eh bien, nous pouvons les lier en ajoutant un attribut id. Cette première entrée, juste à côté de l'espace réservé, nous pouvons ajouter un attribut id et cela peut être un nom de notre choix. Je veux nommer ce nom, pour le garder simple. Ensuite, dans l'étiquette, à l'intérieur de la balise d'ouverture, nous pouvons ajouter les quatre attributs et le lier à l'identifiant avec le même nom. Cet attribut id n'est pas seulement à utiliser avec une étiquette, il est important pour cibler ces éléments individuels avec JavaScript et CSS, aussi. Faisons maintenant la même chose pour Email. Juste après l'espace réservé, l'ID de Email, je sors sur une étiquette. Découpez le texte, puis collez-le à nouveau. Ensuite, nous pouvons ajouter l'attribut for à l'intérieur ici de l'e-mail. Ensuite, enfin, nous pouvons ajouter cela à la zone de texte aussi. Juste après les lignes, ajoutez l'identifiant et encore une fois il pourrait être le nom de votre choix, mais je vais appeler le mien Message. Découpez le texte, puis ajoutez-le en tant qu'étiquette. Enfin, l'attribut for, et ceci est Message Deux, et enregistrez cela. Il est important de ne pas avoir le même nom d'identifiant plus d'une fois sur un document Web. Nous avons cluster ce but et nous allons couvrir cela dans plus de détails bientôt, alors assurez-vous, il est sauvegardé et ensuite sur le navigateur, recharger et, bien sûr, nous ne voyons pas de différence, mais ceux-ci maintenant tous liés aussi dans les coulisses pour le navigateur web. Un autre avantage de l'utilisation d'une étiquette est que l'étiquette est également cliquable. Plutôt qu'avant quand nous pouvions seulement cliquer sur cette entrée pour rendre active, si nous cliquons sur, nous pouvons également cliquer sur le nom aussi. Cela rend également l'entrée active, sorte que l'utilisateur peut commencer à taper. Un autre attribut que vous verrez généralement est un attribut de nom. Passons à notre éditeur de texte et à l'intérieur de ces premières entrées, nous pouvons ajouter un nom et appelons ce nom. Idem pour l'email, name = email et aussi la zone de texte du message. Nous pouvons être confus d'abord, pourquoi nous avons ce nom et aussi les attributs id et c'est compréhensible. Je n'entrerai pas dans trop de détails pour l'instant, car beaucoup de cela peut ne pas devenir clair tant que nous ne nous familiariserons avec les scripts java et aussi le traitement des formulaires sur le serveur. L' attribut id que nous avons ajouté en premier, est généralement utilisé pour référencer les éléments, dans notre cas les entrées. C' est un moyen d'attraper l'élément avec JavaScript ou CSS. L' attribut Name, cependant, est plus utile lorsque le formulaire est soumis au serveur Web. Ce nom est utilisé pour référencer les données que l'utilisateur a entrées dans les champs de saisie juste ici. C' est un moyen d'extraire ces données. Si cela n'a pas de sens pour l'instant, ne vous inquiétez pas, nous verrons beaucoup plus au fur et à mesure que nous suivrons ce cours. Pour l'instant, cependant, nous allons continuer à regarder plus de types d'entrée dans la prochaine vidéo. 25. Cases à cocher et boutons radio (Formulaires, Tables et iFrames): Un autre type d'entrée commun que vous utilisez probablement déjà avant est une case à cocher. Checkbox, tout comme nous l'avons ici, permet à l'Utilisateur de cocher plus d'une case par fois. Ici, nous permettons à un utilisateur de s'abonner à des offres par newsletter, e-mail ou poste, alors voyons comment nous pouvons le faire dans un éditeur de texte. Tout comme avant, je vais ajouter une balise div environnante et m'assurer que c'est toujours dans ce formulaire éléments ici. Ouvrez les balises div pour faire ce niveau de bloc. Ensuite, nous sommes pouvons ajouter quelques balises p pour le texte en haut et le texte va être juste ce que nous disons ici de souscrire aux offres futures acheter. Puis un deux-points à la fin. Nous pouvons également utiliser une étiquette pour cette case à cocher, alors ajoutez-les en premier. Juste en dessous du p, ajoutons notre étiquette et comme avant, nous ajoutons les quatre attributs. Je vais appeler ça la lettre d'information, que nous pourrons bientôt lier à la carte d'identité. Ajoutez ensuite la newsletter à l'intérieur de la balise d'ouverture et de fermeture. Juste après cela, nous pouvons ajouter notre contribution, comme nous l'avons vu plus tôt. Cette entrée a le type de case à cocher. Ensuite, nous lui donnons l'ID pour le lien vers cette newsletter juste ici. Donnez cela enregistrer et tester à l'intérieur du navigateur en allant sur notre page de contact, puis actualisez. Il y a notre texte entre les balises p juste en haut. Ensuite, avez l'étiquette de la newsletter, et vous pouvez également voir que nous pouvons cliquer sur cette case à cocher et aussi décliquer. Nous avons maintenant une case à cocher sur laquelle vous pouvez cliquer et désactiver. Maintenant, nous pouvons ajouter cela en deux fois de plus pour les options e-mail et post. Faisons exactement la même chose. abord, nous pouvons ajouter une étiquette et l'étiquette pour, appelons ceci à l'e-mail. Le nom de l'e-mail et l'entrée avec un type à nouveau de case à cocher, l'ID de l'e-mail et il se ferme. Ensuite, notre troisième et dernier, ça va être étiqueté pour la poste. S' éteint avec l'étiquette de texte de la publication deux et l'entrée finale de la case à cocher. Type de case à cocher et un ID de poste puis je ferme. Allez dans le navigateur et comme notre newsletter, e-mail et post. Il y a aussi d'autres attributs que nous devrions ajouter aussi. À l'heure actuelle, ces cases à cocher gratuites sont à côté de l'autre sur la page, toutes deux sans rapport avec eux. Nous pouvons effectivement lier si nous le voulions, en leur donnant tous les mêmes attributs de nom. C' est un attribut de nom que nous avons regardé dans la dernière vidéo, qui a été ajouté juste ici. Faisons la même chose pour notre entrée avec un type de case à cocher. Le nom, je vais appeler ce abonnement. Je vais juste copier ceci et ajouter le même deux fois de plus. Ces attributs de nom, comme mentionné dans la dernière vidéo, signifie que lorsque nous soumettons ce formulaire au serveur, ces valeurs de l'entrée seront également transmises. Avec les cases à cocher, nous ne pouvons pas taper une valeur comme nous le pouvions avec l'entrée de texte ou d'e-mail, donc nous pouvons ajouter un attribut de valeur exactement comme ceci. La valeur, et cela peut être la newsletter. s'agit d'une donnée qui est transmise au serveur une fois qu'il envoie, donc la valeur pour le second, de l'e-mail et aussi la valeur de post. Chaque fois que le formulaire est envoyé, le serveur obtient la valeur de la newsletter, e-mail ou de la publication, selon la valeur sur laquelle on clique. L' une des choses clés à savoir est ici, c'est que vous pouvez vérifier autant que vous voulez. Nous pouvons cliquer sur et désactiver l'un de ces éléments. C' est une différence clé entre les cases à cocher et les boutons radio, que nous allons examiner ensuite. Si nous allons tous à la version finie, nous avons déjà fait ces cases à cocher gratuites que nous voyons ici. Mais juste en dessous de cela, nous avons  : « Comment voudriez-vous que nous réagissions ? » Vous pouvez voir ces boutons radio, mais nous ne pouvons cliquer qu' un à la fois et c'est la différence clé entre la radio et les cases à cocher. Les entrées radio sont ajoutées de la même manière que ces cases à cocher. Je vais ajouter un div environnant. Encore une fois, assurez-vous que cela est toujours dans le formulaire. Puis à l'intérieur, les p fois en haut pour le texte de comment voudriez-vous que nous répondions, avec un point d'interrogation à la toute fin. Ensuite, nous pouvons aller de l'avant et ajouter nos étiquettes. Cela a également les quatre attributs, donc nous pouvons le lier. Je veux appeler celui-ci la réponse téléphonique, fermer ça et ajouter l'étiquette du téléphone. Ensuite, nous allons de l'avant et ajoutons nos contributions. Cette fois avec le type de radio et aussi l'ID de la réponse téléphonique, pour correspondre à cela. Ajoute ça aussi et je ferme ça. Ensuite, il nous faut juste un de plus pour l'e-mail. Tout d'abord, l'étiquette et cette fois, il peut être réponse e-mail. Cela permet de le garder cohérent avec la réponse téléphonique ci-dessus. Fermez cela et demandez l'étiquette de l'e-mail, puis les entrées, le type de radio et ces ID de réponse e-mail. Fermez ça, bien. J' ai utilisé la réponse téléphonique et la réponse e-mail ici plutôt que le téléphone ou l'e-mail, parce que nous avons déjà l'ID e-mail sur sa page, que nous allons utiliser juste au-dessus. Je me souviens que nous avions dit avant que les ID ne soient uniques et utilisés qu'une seule fois sur la page, alors donnons cette sauvegarde et test à l'intérieur du navigateur, revenons à notre projet actuel et rechargez. Tout comme deux boutons radio en haut. Mais une chose que vous remarquez est que si nous cliquons dessus, nous pouvons voir que les deux ne peuvent pas être vérifiés en même temps, donc c'est un comportement différent de ce que nous attendions, de ce que nous avons vu auparavant sur la version finale. Nous semblons pouvoir sélectionner les deux boutons radio en même temps. C' est parce que tout comme les cases à cocher, nous devons également les regrouper avec un attribut de nom, alors ajoutons le nom dans chaque entrée, alors appelons cette réponse et le deuxième nom d'entrée est égal à réponse. Maintenant est lié ensemble. Testons ceci en rafraîchissant et essayons les deux. Maintenant, nous ne pouvons sélectionner qu'une valeur à la fois parce que voici un groupe ensemble. Enfin, nous pouvons ajouter un attribut de valeur à envoyer également au serveur aussi. La valeur cette fois peut être le téléphone, et la valeur pour le second sera l'e-mail. Vous pouvez également voir des cases à cocher avec une valeur de true et false aussi. S' il n'y a que deux options telles qu'une entrée d'abonnement, qui est simple oui ou non. Ensuite, un vrai ou faux peut être un bon cas d'utilisation pour cela. Ensuite, nous allons passer à un autre type important d'entrée, qui est la sélection. 26. Sélectionnez l'entrée (formulaires, tables et iFrames): Le prochain type d'entrée que je veux vous montrer, est la boîte de sélection. Cette entrée permet essentiellement une liste déroulante et diverses options, que l'utilisateur peut sélectionner, et nous pouvons le voir juste ici. Si nous faisons défiler jusqu'au sujet ici, nous pouvons cliquer dessus. Je vais être présenté avec différents différents. Maintenant, c'est un type légèrement différent de boîte de sélection, que nous allons examiner maintenant, mais nous allons obtenir ce type peu de temps. Tout d'abord, je vais juste ranger les choses un peu à l'intérieur de toutes les formes et séparer nos sections pour qu'elles soient plus claires. Prenons notre section de nom et ajoutons un peu d'espace entre chaque div, maintenant nous pouvons fermer la case à cocher aussi. Ils sont tous regroupés comme ça, puis regroupons notre section de réponse par e-mail et par téléphone. Maintenant, ce sont tous des groupes, je vais ajouter notre sélection juste en dessous de la zone de message. C' est notre zone de message ici, alors faisons de l'espace et créons également notre section div pour cela. Cette fois, utilisez l'élément select plutôt qu'une entrée. Ajoutez la sélection comme ça. La sélection, comme tous les autres. Je vais donner une pièce d'identité, et on appellera ça le sujet. La boîte de sélection va ajouter une liste d' options que l'utilisateur peut sélectionner comme sujet de message, ainsi que la sélection, nous pouvons également ajouter une étiquette aussi. Parce que nous avons l'attribut ID, nous pouvons également ajouter l'attribut for du sujet, puis un texte à l'intérieur du sujet aussi. À l'intérieur, chaque élément de la liste déroulante est enveloppé dans un élément d'option, et cela va entre les balises de sélection. Avant de le faire, vérifions simplement cela dans le navigateur. Dit notre étiquette de sujet, et vous pouvez voir que nous avons l'entrée ici. Si nous cliquons dessus, nous n'avons pas encore d'options à sélectionner, alors ajoutons ces options avec nos éléments d'option. Ajoutons le premier ici, et à l'intérieur ici nous pouvons ajouter notre texte qui apparaîtra à l'intérieur de la boîte de sélection. Le premier peut être des retours, voyons cela en action, dit des retours juste là. Nous pouvons aussi ajouter une valeur. Cet attribut de valeur nous permettra de transmettre une valeur select avec le formulaire lorsque nous le soumettons. La valeur de celui-ci peut être des retours, puis nous allons simplement copier et coller cela dans quelques fois de plus. Celui-ci peut être un élément défectueux, et une valeur d'options d'élément défectueux, et je vais utiliser un trait de soulignement juste au lieu d'avoir un espace ici. La suivante pour les informations de livraison et la valeur de livraison. Celui-ci peut être pour le suivi des commandes. Ensuite, une option de conseil. Ensuite, enfin, nous allons juste en ajouter un de plus et cela peut être autre. Donnez cette sauvegarde et entrons dans le navigateur. Recharge, puis cliquez sur notre sélection. Ici, nous sommes présentés avec une liste de toutes les options que nous avons ajoutées dans le Select. Par défaut, nous ne pouvons sélectionner qu'une de ces valeurs à la fois. Dès que nous avons cliqué dessus, la sélection est ensuite réduite. Si nous voulons en sélectionner plusieurs, nous pouvons ajouter un attribut multiple à la balise select d'ouverture. Juste après l'ID, nous pouvons ajouter plusieurs, puis passons, recharges, et nous pouvons appuyer sur Commande ou Contrôle pour sélectionner plus d'une valeur. Je vais supprimer cela pour l'instant car nous n'avons pas besoin de cela à l'intérieur de notre projet. Mais il est utile de savoir qu'il est là. Nous pouvons également regrouper toutes les options associées. Plutôt que d'avoir une seule longue liste, nous pouvons utiliser l'élément optgroup pour regrouper certains sujets apparentés. Retourne et article défectueux, je vais regrouper ensemble. Je vais couper ces deux valeurs, puis utiliser l'élément optgroup et ensuite je peux les coller à l'intérieur. Nous devons alors donner à cet optgroup une étiquette, et c'est le texte qui apparaîtra à l'écran au-dessus de ces deux sections de groupes et vous verrez cela plus clairement dans un instant. Je vais ajouter le texte des problèmes de produit et enregistrer cela. Voyons voir à quoi ça ressemble. Si nous développons, nous voyons dans le texte faible en haut nous avons des problèmes de produit, qui est l'étiquette que nous avons ajoutée, puis légèrement décalée vers la droite, nous avons nos deux articles regroupés ici. Ensuite, nous avons des informations de livraison et de suivi. Ceux-ci peuvent être regroupés dans la livraison. Découvrons ces deux options et ajoutons notre groupe d'options, puis collez-les à nouveau. L' étiquette de texte pour celui-ci peut être Livraison. Ensuite, en bas, nous pouvons regrouper les conseils et autres dans un autre groupe. Encore un optgroup, collez ces deux derniers dans, puis notre étiquette simplement de Autre. Maintenant, nous avons tous les trois groupes d'options distincts, ils devraient maintenant tous être affichés dans le navigateur. Rechargez, ouvrez ça, et nous avons maintenant trois groupes différents. Notez que nous ne pouvons pas également cliquer sur cette étiquette de livraison, Autres et Problèmes de produit. C' est tout simplement là pour obtenir des informations. Maintenant, nous avons notre boîte de sélection en place. Nous allons maintenant regarder une édition plus récente des formulaires html, qui est la liste de données, et nous allons jeter un coup d'oeil à cette prochaine. 27. Liste de données et soumission (formes, tables et iFrames): Je veux maintenant vous montrer dataliste. Datalist est l'un des éléments de formulaire les plus récents disponibles. Pour cette raison, les ports des navigateurs sont présents est un peu plus limité au moment de l'enregistrement. Nous pouvons le voir en allant sur un site appelé caniuse.com. Tout ce que j'ai besoin de faire est de taper le dataliste en haut ici. Ensuite, faites défiler vers le bas et vous pouvez voir une liste des navigateurs pris en charge. Nous pouvons voir par la couleur que les versions ultérieures de Chrome sont vertes, et il est entièrement pris en charge. Cependant, certaines des premières versions de Safari et aussi Safari sur iOS, il n'est pas pris en charge. Si nous jetons un coup d'oeil à Internet Explorer et aussi Edge et Firefox aussi, nous pouvons voir que le vert clair indique quelques taches partielles. Nous devons donc être prudents lors de l'utilisation de datalist. Cependant, il est utile de savoir car ce sera une bonne option à utiliser une fois le spot du navigateur rattrape. Les datalists peuvent être utilisés à la place d'une zone de sélection de la dernière vidéo, où la zone de sélection est une liste déroulante pour sélectionner une option. Datalist est plutôt une zone de texte dans laquelle l'utilisateur peut taper. Ensuite, nous pouvons voir quelques suggestions ci-dessous. Si nous passons à la version finie et dans la page de contact, c'est un dataliste ici. Si nous cliquons sur la liste déroulante, nous avons toujours toutes les options que nous avons vues dans la dernière vidéo que vous pouvez sélectionner. Ou nous pouvons l'utiliser comme boîte de recherche. Nous pouvons filtrer vers le bas si vous avez beaucoup d'options différentes. Commençons dans Visual Studio Code. Je vais commenter cette div complète que nous créons dans la dernière vidéo. Ceci est un div qui entoure toute la boîte de sélection. Si vous utilisez Visual Studio Code, vous devriez simplement être en mesure de mettre en surbrillance et d'appuyer sur « Commande ou contrôle », appuyez sur « barre oblique avant » et cela va commenter les photos de section. Si ce n'est pas le cas, il suffit de taper manuellement la section d'ouverture et la section de fermeture en dessous. Alors allons de l'avant et construisons notre div, comme nous l'avons fait avant. Ensuite, nous pouvons ajouter une étiquette. Label va à nouveau avoir les quatre attributs des sujets, puis sujet à l'intérieur ici. Nous sommes fondamentalement juste construire dans la même chose que nous l'avons fait pour la boîte de sélection. Cette fois, nous ajoutons une entrée avec le type de textes. La raison pour laquelle nous ajoutons une entrée de texte est d'afficher la section ici, l'utilisateur peut taper dedans. Donnons à cela un ID de sujets à nouveau à beaucoup de ces attributs ici. Ensuite, l'espace réservé à la toute fin de entrez vos sujets et fermez. Ce n'est qu'une simple entrée de texte pour commencer. L' utilisateur dispose d'une zone de texte à saisir. Ensuite, nous pouvons ajouter notre liste de données avec des balises d'ouverture et de fermeture pour ces éléments. Ensuite, nous pouvons ajouter une option à l'intérieur ici. Cela n'a que la balise d'ouverture, et nous allons également ajouter une valeur attributs de retours. Ensuite, copions et collez le même encore quelques fois. Ensuite, nous pouvons ajouter l'élément défectueux. Article défectueux et puis le troisième est la livraison, avant quatre était le camionnage de commande. Le cinquième était un conseil et le dernier était un autre. Vers le navigateur. Il se recharge et monte aux sujets. Commençons à ajouter du texte à l'intérieur ici. Si nous tapons à l'intérieur des entrées, nous ne voyons aucune des options apparaissant ci-dessous, comme nous l'avons vu dans la version finale. C' est parce que nous avons une entrée de texte brut et aussi nous avons une liste de texte en dessous, mais nous ne les avons pas encore liés ensemble. Pour les lier, il faut d'abord ajouter un ID à la liste de données. Tout comme toutes les pièces d'identité sont ouvertes à l'intérieur. On appellera ça les sujets. Ensuite, les entrées de texte ci-dessus, qui répertorie se connecte avec les attributs de liste. Bien sûr, cela doit être sujet correspond ID ci-dessous. Donnez une sauvegarde et laissez tester ceci. Appuyez sur « Rafraîchir » et nous voyons également cette flèche déroulante apparaître, il semble que cela fonctionne comme j'essaie de laisser des conseils et que tout semble fonctionner dans. C' est ainsi que nous utilisons la liste de données. Encore une fois, faites attention lors de l'utilisation d'un navigateur de vérification de la compatibilité. Si vous cherchiez à inclure cela dans un projet. Les deux chose inconnue, c'est un bel éléments de forme sont particulièrement utiles, pour filtrer un grand groupe d'options. Voici toutes les entrées de formulaire maintenant affichées sur notre site Web. Nous avons juste besoin d'un moyen de soumettre ce formulaire et comme vous pouvez le deviner, nous le faisons avec un bouton de soumission. Soumettre est également une entrée, mais cette fois nous demandons le type de soumettre. Ajoutons ceci à la fin de notre formulaire. Juste au-dessus de la balise de formulaire de divulgation. Nous pouvons écrire ceci dans un div 2, puis ajouter nos entrées avec le type de submit. Donnez cette sauvegarde et vérifions ceci. Bien sûr, c'est juste en bas, nous avons notre bouton de soumission juste ici. Il s'agit d'une bombe qui soumettra les données dans le formulaire au serveur. Rappelez-vous que tout cela ne fonctionnera pas pour le moment car HTML affiche simplement le contenu. Mais nous reviendrons soumettre des formulaires plus tard dans le cours, lorsque nous serons plus familiers avec le développement web back-end. Mais une chose que vous remarquerez une fois que nous cliquerons sur le bouton « Soumettre » avant, nous le ramènerons à la même page. Si vous regardez les extrémités de cette URL, nous avons un nom égal à vide, et l'e-mail n'est pas égal à aucune valeur et le message n'est égal à aucune valeur. C' est parce que nous avons ajouté le nom du nom, e-mail et du message dans le code HTML. C' était juste ici, nom, email et message. C' est pourquoi nous avons ajouté l'attribut name avant, et ce sont les données qui seront envoyées au serveur. Donnons ça un procès rapide, si on ajoute Chris. Puis test@test.com, puis message ici, si nous descendons et cliquez sur « Soumettre », verra alors cette information est maintenant dans la barre supérieure. Notre nom est égal à Chris, email est égal test et message égal à notre texte, quel utilisateur l'a ajouté. On va laisser ça pour l'instant et bien sûr on y reviendra plus tard. Ce que nous savons plus sur le fonctionnement du développement back-end. Nous pourrions également remplacer ce bouton par un élément de bouton HTML. Cela prend également un type égal à soumettre. En bas tout en bas. Je vais mettre ça ici. On va juste commenter ça. Ensuite, nous pouvons ajouter aux éléments de bouton comme ça avec le type de soumission. C' est quelque chose que vous verrez assez souvent à. Depuis a le type de soumettre, soumettra également le formulaire tout comme cette entrée fera ci-dessus. C' était la même chose et vérifiez cela dans le navigateur. Ça a l'air d'une petite différence. Nous avons juste un bouton simple sans textos. Nous ne voyons pas de texte de soumet cela parce que comme sur les éléments avec une balise d'ouverture et de fermeture, nous devons ajouter notre texte à l'intérieur. Entre ceux-ci, nous pouvons ajouter un texte tous soumettre. Je vais maintenant voir le texte à l'intérieur du bouton. C' est en fait l'une des principales différences lors de l'utilisation d'une entrée ou d'un bouton de cette façon, entrées ont le texte par défaut de soumettre, mais nos boutons, vous êtes en contrôle ou le texte à l'intérieur du bouton. Donc ça peut être tout ce que tu veux. Chat a envoyé un message et vous verrez que reflété dans le navigateur. Pour l'instant, je vais commenter ces boutons et garder en place les entrées que vous aviez à partir du formulaire. Encore une fois avec commande ou contrôle et une barre oblique vers les données communes out. Vous pouvez également rencontrer un bouton de réinitialisation, placé à côté de la soumission, comme ceci. Plutôt que le type de soumission. Vous pouvez également voir le type de réinitialisations et ceci est utilisé pour effacer n'importe quel texte des entrées que nous ajoutons. On avait du texte à l'intérieur. Vous pouvez cliquer sur « Réinitialiser ». Cela effacera toutes les entrées de formulaire à la façon dont elles étaient. Voici le contenu de notre formulaire maintenant rempli. Mais dans la vidéo suivante, je veux vous montrer quelques types d'entrées plus utiles. 28. Autres éléments de formulaire utiles (formulaires, tableaux et iFrames): Bien que notre formulaire soit maintenant complet pour ces projets, ils sont encore quelques autres types d'entrée utiles que vous voulez vous montrer. Je vais les ajouter en tant que nouveaux éléments de formulaire, pour les garder séparés de ce que nous allons garder du reste du projet. Allons à notre site de fermeture et de formulaires ici et puis, ouvrons un nouvel ensemble d'éléments de formulaire ici. Donc, d'autres types d'entrée utiles incluent le nombre. Cela a les éléments d'entrée et cette fois j'ajouterai un type de nombre. L' un des avantages de l'utilisation du numéro, si nous actualisons, nous le voyons apparaître ici, est qu'il limite l'entrée de l'utilisateur à ces nombres. Si nous cliquons dessus et que nous essayons d'ajouter des lettres ou des mots ici, ceux-ci ne prennent aucun effet, mais nous pouvons bien sûr ajouter quelques chiffres, que vous pouvez voir ici. Il y a aussi le haut et le bas sur le côté droit, que nous pouvons utiliser pour monter et descendre à travers les chiffres. Ensuite, si vous voulez demander le mot de passe de l'utilisateur, il est logique de le faire avec une entrée avec le type de mot de passe. Cela a les avantages de fixer le mot de passe. Si nous saisissons notre mot de passe ici, nous voyons que nous ne pouvons voir aucun des caractères que vous avez saisis. Ceci est utile pour si quelqu'un est derrière vous, ou passe devant, afin que personne d'autre ne puisse voir le mot de passe que vous entrez. Il y a aussi un type d'entrée de dates, auquel nous avons également accès et comme vous vous y attendez, c'est le type d'entrée de date et c'est évidemment pour tous les champs de date. Jetons un coup d'oeil à cela en action. Cela pourrait être utilisé pour demander l'anniversaire d'un utilisateur, ou par exemple, sélectionner les dates, nous voulons rester dans un hôtel, sur un site de voyage. Si nous cliquons dessus, nous avons les dates, le mois de l'année. Nous pouvons également contrôler cela avec le clavier, en tapant de haut en bas, ajouter onglet également commutateurs entre le jour, le mois et l'année. Nous pouvons également cliquer sur cette flèche déroulante et nous avons un champ de date où nous pouvons sélectionner différents mois de l'année. Ensuite, tout ce que nous devons faire, c'est cliquer sur l'une des dates et le champ est automatiquement rempli avec la date sur laquelle nous avons cliqué. [ inaudible] ces entrées, c'est un peu plus que vous pouvez regarder en ligne, mais je vais vous montrer quelques autres des plus communs, comme la couleur. Modifiez le type pour qu'il soit couleur. Vous avez probablement vu celui-ci avant sur différents sites Web, où nous avons un sélecteur de couleurs. Si nous actualisons, nous voyons que la couleur noire est par défaut. Cela semble différent sur les différents navigateurs, donc si vous utilisez quelque chose comme Edge ou Firefox, vous pouvez avoir un aspect légèrement différent dans le type d'entrées ici. Si nous cliquons dessus, nous obtenons un bon sélecteur de couleur, ceci bien sûr, est celui de la pomme et le vôtre peut sembler un peu différent. Nous cliquons sur différentes valeurs et choisissons notre couleur à partir de cela. Un autre utile est la portée. Donc, les entrées avec le type de plage, retour au navigateur. Range nous donne un curseur, que l'utilisateur peut déplacer en cliquant dessus et en le faisant glisser vers la gauche et la droite. Par défaut, le curseur est au milieu, mais il y a aussi quelques attributs que nous pouvons ajouter pour changer les choses, nous pouvons changer le minimum et aussi le maximum. Donc, si nous définissons le minimum à un et le maximum à 10, cela nous donne une plage de 1-10, que nous pouvons faire glisser entre. Maintenant, nous pouvons contrôler la position de départ du curseur. Actuellement, comme nous l'avons dit précédemment, il commence au centre, mais nous pouvons changer la position de départ en définissant les attributs de valeur. Donc, si nous définissons cela comme un, il apparaîtrait au début. Donnons cela un coup de pouce et nous voyons maintenant le cercle dès le début, si nous changeons cela pour être une valeur de 10, il apparaîtrait à la toute fin et c'est un type d'entrée utile, surtout quand nous commençons à apprendre sur JavaScript. Nous pouvons l'utiliser pour régler le volume sur un lecteur de musique. Donc, il va de haut en bas comme l'utilisateur de drags. Le type d'entrée final que je veux vous montrer dans cette vidéo est la recherche. Je suis sûr que vous l'avez tous utilisé avant pour rechercher des éléments sur un site Web. C' est quelque chose qui pourrait être utilisé sur notre site Web, dans la section en-tête. Si vous regardez le site final ici, regardez en haut, nous avons un champ de recherche juste ici, je vais maintenant supprimer le deuxième formulaire, que j'ai joué avec et le ramener et alors nous pouvons ajouter une recherche à l'en-tête. Donc, si nous faisons défiler vers le haut de la page et dans cette section d'en-tête, nous pouvons ajouter ceci juste après notre navigation. Nous avons un type d'entrée égal à Recherche et nous pouvons également ajouter un attribut d'espace réservé à la recherche puis fermer. Une des différences entre ceci et une entrée de texte normale est, après avoir tapé quelque chose, il y a un x qui semble supprimer le terme de recherche. Donc, je vais montrer notre principal maintenant, si nous rafraîchissons, puis revenons en haut, puis nous commençons à taper, nous voyons ce x sur le côté droit, pour effacer les entrées de formulaire. En outre, comme avec d'autres éléments de formulaire, le HTML fournit uniquement une zone de recherche visuelle. Chercher quoi que ce soit pour le moment ne fonctionnera pas, juste avec HTML seul. Nous devons également ajouter la zone de recherche à l'en-tête, dans la page d'index 2 et aussi le détail du produit. Si nous cliquons sur la maison, nous ne voyons pas cela ajouté à l'intérieur d'ici. Copions ces entrées à partir de la page de contact, nous allons d' abord mettre à jour dans le détail du produit exactement au même emplacement, assez près. Ensuite, si nous ouvrons notre barre latérale et allons dans le index.html, nous pouvons faire la même chose juste ici. Essayons ça. Sur la maison, le Contact et aussi pour cliquer sur l'un des produits, tels que le contrôleur de jeu. Nous avons vu le détail du produit aura également la barre de recherche là-bas. Nous devrions donc maintenant avoir une assez bonne idée différentes façons de recueillir des informations à l'aide de formulaires et d'entrées. J' espère que vous avez trouvé cela utile et je vous verrai dans la prochaine vidéo. 29. IFrames (formulaires, tables et iFrames): Nous devons maintenant nous éloigner des formulaires et jeter un oeil à l'utilisation d'iframes. L' élément iframe est utilisé pour incorporer une autre page HTML dans un document Web. Comme vous le voyez ici sur cette page finie Contactez-nous. Nous pouvons également intégrer une page d'un autre fournisseur tel que Google Maps, comme nous l'avons fait ici. Cela peut sembler un peu étrange, mais ils deviendront plus clairs quand on les verra en action. Voyons cela dans la page contact.html. Je vais ajouter un iframe à l'intérieur d'ici. Je vais ajouter ceci juste après notre section de formulaire. Défilons vers le bas et à droite à la fin de notre formulaire, mais toujours dans cette section principale, nous pouvons ajouter à l'élément iframe. Si nous donnons cette sauvegarde, puis actualisons le navigateur à l'intérieur de notre projet. En fait, nous devons aller à la page Contactez-nous, puis faire défiler vers le bas. Nous voyons un élément iframe vide tout en bas. Pour que cela montre quelque chose, nous devons ajouter un attribut source, tout comme nous l'avons fait lorsque nous travaillons avec des images. L' attribut source pointe vers la page Web que nous voulons intégrer. Cela peut être aussi simple que l'affichage dans l'une de nos pages Web, telles que les données de produit. Ajoutons la source à l'intérieur d'ici et lions à notre product-detail.html. Je vais donner cette Sauvegarder et voyons à quoi il ressemble. Il y a notre page détaillée du produit à l'intérieur de cet iframe ou à l'intérieur de cette fenêtre. Maintenant, nous pouvons faire défiler vers le haut, vers le bas, vers la gauche et vers la droite. Cet iframe est un peu trop petit pour le contenu. Vous pouvez également utiliser un attribut height et width pour redimensionner l'iframe. Commençons par la largeur. Allons-y pour 800 et une hauteur de 600. Cette valeur est en pixels, il s'agit donc d'un iframe de 800 par 600 pixels. Maintenant, nous avons l'iframe un peu plus grand sur l'écran là-bas. L' iframe peut également être utilisé pour créer un lien vers un site Web externe, mais seulement si le propriétaire du site le permet. Actuellement, Wikipédia permet cela, et nous pouvons le voir en tapant la source, donc au lieu de productdetail.html, allons taper l'URL complète de https://wikipedia.org, puis donnons cela une sauvegarde. Sur le navigateur, et nous pouvons voir le site Wikipédia intégré. Pour le moment, Google ne nous permet pas de le faire. Laissons un lien vers google.com, rafraîchir, et nous voyons juste un iframe vide. Nous devons faire attention aux sites Web vers lesquels nous établissons des liens et nous assurer que cela est autorisé. Nous pouvons également ajouter du contenu de secours si le contenu incorporé ne peut pas s'afficher. Cela peut être ajouté entre la balise d'ouverture et de fermeture d'iframe. Ajoutons notre p-type à un texte. Disons que votre navigateur ne supporte pas les iframes. Retour à nos projets, et recharger. Nous ne voyons pas de différence car cela n'est affiché que si les iframes sont désactivées ou si elles sont visualisées sur un appareil de lecture d'écran pour les personnes malvoyantes. Nous pouvons également intégrer du contenu d'autres sites Web si cela le permet. YouTube est l'un des sites web qui nous permet d'intégrer un iframe dans nos projets. Pour ce faire, nous pouvons aller sur youtube.com. Alors tout ce que nous avons à faire est de trouver n'importe quelle vidéo que nous voulons ajouter. Faisons une recherche rapide pour n'importe quoi. Je veux rechercher Elon Musk et cliquer sur l'une de ces vidéos. Ensuite, ce que nous devons faire est de cliquer sur Partager. Si vous descendez ici, il y a un bouton de partage. Cliquez sur cela, puis nous cliquons sur intégrer. Ensuite, nous pouvons copier cet iframe qui nous est fourni. On peut voir la fermeture et l'iframe d'ouverture. Copions toute cette section, retournez en arrière, et nous pouvons ajouter ceci à la place de notre iframe actuel. Supprimons cela et collez-les dans la version YouTube à la place. Donnez cela un Save et maintenant revenir à notre projet, appuyez sur Reload, et maintenant nous avons une vidéo intégrée YouTube et boutons de lecture vers le bas. Cet iframe a également quelques attributs que nous n'avons pas encore vus. Si nous faisons défiler vers la droite, nous voyons que nous avons Autoriser le plein écran. Il y a aussi une bordure de cadre, qui a une valeur de zéro ou un. Zéro signifie pas de bordure et un moyen d'ajouter une bordure. Cela permet le plein écran comme il sonne. Si nous supprimons l'attribut et puis aller sur et lire la vidéo, alors cliquez sur jouer, et si nous essayons de cliquer sur plein écran, nous pouvons voir que le plein écran est indisponible. Cependant, les avocats emballage nous permettront de faire la vidéo en plein écran une fois de plus. Nous jouons et nous y allons donc maintenant c'est une pleine taille de notre écran. Maintenant, nous en savons un peu plus sur les iframes. Dans la vidéo suivante, nous pouvons les utiliser pour ajouter Google Maps à nos projets. 30. Ajout de Google maps (Formulaires, Tables & iFrames): Si nous passons à notre page « Contactez-nous » terminée, et faites défiler vers le bas, vous n'aurez plus de gaspillage. Dans sa version finale, nous avons une carte de localisation sur cette page « Contactez-nous ». Ceci est fourni par Google, accédant à l'API Maps. Nous aborderons les API en détail plus tard dans ce cours, y compris la construction des nôtres, mais pour l'instant, sachez simplement que l'API Maps permettra à notre site Web de communiquer avec les informations cartographiques de Google. Vous vous demandez peut-être ce que tout cela a à voir avec la section HTML du cours, eh bien cette API est incluse à l'intérieur d'un iframe, aussi c'est vraiment facile à implémenter. Commençons par aller sur Google, et faisons une recherche pour Google Maps API, et normalement pour aller à est developers.google.com//maps, alors sélectionnez ceci, et d'abord nous allons cliquer sur le bouton « Démarrer », qui est juste ici, puis faisons défiler vers le bas. Celui dont nous avons besoin est l'API d'intégration de Google Maps, alors faisons défiler vers le bas, et ceci est dans la section API Web, alors cliquez sur « Google », et nous sommes à Google Maps Incorporer API. Ensuite, sélectionnez des cartes, et nous pouvons voir cela intègre des cartes basées sur des plans d'étage intérieur à notre site, alors cliquez sur ce lien ici. C' est assez simple pour commencer. Tout ce que nous devons faire au début, c'est copier cette section iframe, que vous obtenez juste ici. Copiez cela, puis nous pouvons aller sur notre page contacts.html, et remplacer notre version YouTube par une que nous venons de copier. Maintenant, nous nous dirigeons vers le navigateur, et voir notre page « Contactez-nous », cliquez sur « Reload », et nous pouvons voir un problème. La clé API fournie n'est pas valide, donc comme le dit le message d'erreur, nous avons besoin d'une clé API. C' est ainsi que Google peut suivre qui accède à ses données cartographiques. Nous pouvons obtenir une clé API à partir du menu, retour sur le site Google, sur le côté gauche est une option pour obtenir une clé API. Avant d'aller plus loin cependant, je veux juste souligner, que les sites Web comme celui-ci, changent souvent les mises en page au fil du temps, donc si vous êtes la version semble un peu différente, c'est généralement juste un cas d' NavigationLink a déménagé, mais vous devriez toujours être en mesure de trouver votre chemin. Ensuite, nous devons descendre et sélectionner « Obtenir une clé ». Si vous n'êtes pas déjà connecté, nous devons nous connecter à Google, donc je vais me connecter, puis cliquez sur « Suivant », puis nous devons ajouter notre mot de passe. Ok, bien. Maintenant, nous sommes connectés, nous pouvons cliquer sur « Obtenir une clé API » à nouveau. D' abord besoin de créer un projet, donc je vais créer un nouveau projet. Cliquez sur ce lien « Créer un nouveau projet », et son nom d'utilisateur de « Tech Store », puis cliquez sur « Suivant ». Cela devrait alors nous donner notre clé API, que nous pouvons copier en cliquant sur cette icône ici. Passez à notre projet, et puis si nous jetons un oeil à cet iframe, que nous avons copié auparavant, nous devons faire défiler jusqu'à la section qui dit « clé égale », puis où il est dit « Votre clé API », supprimez ces trois ici, puis collez dans la clé API, que vous venez de copier. Donnez cela une sauvegarde, et maintenant si nous revenons à notre page de contact et actualisons, nous devrions maintenant voir que nous sommes présentés avec cette image Google Maps, au lieu du message d'erreur. Maintenant, nous allons avoir une connexion à l'API Google Maps. Maintenant, nous avons juste besoin de cette carte pour être à l'emplacement de notre entreprise. Si nous revenons sur le site Web de Google, et je clique sur « Terminé », nous pouvons voir un Quickstart dans le menu, qui est juste en haut, alors cliquez sur cela. Ici, nous pouvons construire notre propre carte personnalisée. Nous pouvons chercher des lieux ou une ville. Disons à New York, puis cliquez dessus, puis faites défiler vers le bas, nous pouvons voir que New York apparaît sur la carte là-bas. Nous pouvons également rechercher l'adresse Apple, par exemple, alors cherchons « boucle infinie », qui est juste ici, qui est juste ici, puis faites défiler vers le bas, et nous pouvons voir le nouvel emplacement juste ici. Nous avons déjà notre clé API pour construire cette carte, donc nous pourrions simplement coller ceci à l'intérieur d'ici, et une fois que vous avez fait cela, vous cliquez sur « Terminé », puis nous sommes fournis avec un iframe, que nous pouvons copier, et cela a ce nouvel emplacement, que nous avons cherché auparavant, alors copions ceci. Ensuite, si nous passons au projet et remplacons notre iframe par celui que vous venez de copier, et puis si nous revenons à notre page de contact, appuyez sur « Rafraîchir », et nous sommes maintenant amenés à l'adresse que nous avons ajoutée précédemment, donc, bien sûr, il faudrait changer cette situation en fonction de l'emplacement de votre entreprise, et c'est ainsi que nous le faisons. Maintenant, nous avons intégré Google maps avec succès dans notre projet. C' est maintenant pour les sections HTML de ce cours. Bien joué pour aller aussi loin. Maintenant, nous pouvons passer à tout apprendre sur CSS. 31. Comprendre le CSS (débuter le CSS): Dans les sections HTML que nous avons abordées jusqu'à présent, nous avons fait référence au site Web fini pour montrer ce que nous allons ajouter à nos projets. En ce moment, notre propre projet que nous avons créé contient exactement le même contenu HTML qu'une version finie. Mais comme nous le savons, ils ont l'air très différents. La différence est le CSS. CSS signifie Cascading Style Sheets. Il s'agit d'un langage de feuille de style utilisé pour décrire l'aspect et mise en forme d'un document écrit dans un langage de balisage tel que HTML. Il s'agit d'une description formelle, mais vous pouvez penser à CSS comme un moyen de styliser, de positionner et de mettre en page des éléments dans nos sites Web. Nous pouvons l'utiliser pour ajouter des couleurs, des bordures, l'alignement, la taille du texte, les couleurs d'arrière-plan, et bien plus encore. L' utilisation de CSS permet de séparer notre style du contenu HTML. Cette séparation permet de garder tous les fichiers plus petits et plus maintenables. Nous pouvons toujours mélanger des styles dans notre fichier HTML, et nous allons examiner quelques façons de le faire. Eh bien, rien d'autre qu'un petit site Web aura généralement HTML dans un fichier, avec l'extension a.html, puis CSS dans un fichier séparé avec l'extension a.css. fait d'avoir un fichier CSS séparé permet également Lefait d'avoir un fichier CSS séparé permet égalementde réutiliser les mêmes styles dans plusieurs fichiers HTML. CSS3 est la dernière version. Il nous permet de faire encore plus avec de nouvelles fonctionnalités telles que les transformations, les animations, les dégradés, les images corporelles, les coins arrondis et les requêtes multimédias. Nous allons bien sûr les couvrir plus en détail bientôt. Alors, à quoi ressemble CSS ? Eh bien, sur l'écran, voici quelques exemples. abord, nous pouvons sélectionner un élément par son nom, tel que h1. Il existe plusieurs façons de sélectionner un élément. Va les regarder bientôt aussi. Ensuite, nous ajoutons quelques accolades pour contenir les règles de style que nous voulons appliquer à ce h1. Même avec l'en-tête juste en dessous, cet en-tête aura une largeur de 70 pour cent avec un fond blanc. Maintenant, nous savons un peu ce qu'est CSS. Passons maintenant à l'automatisation de nos projets. 32. Styles en ligne et ajout de couleur (début CSS): Je vais commencer par regarder une façon d'ajouter des styles, qui est de les ajouter en ligne. En ligne signifie essentiellement que nous les ajoutons à l'intérieur de chaque élément HTML. Cette version finale a une couleur de fond grise pour l'en-tête et aussi le pied de page vers le bas. Commençons par ajouter une couleur d'arrière-plan au index.html. Allons à l'élément tête, index.html, allons en haut de la page. Ici, nous avons nos éléments d'en-tête. Alpha peut utiliser les attributs de style pour ajouter un style en ligne ici. Nous pouvons ensuite sélectionner la propriété d'arrière-plan pour ajouter une couleur, ajouter un deux-points. Nous pouvons utiliser un nom de refroidisseurs pour la plupart des valeurs, telles que le rouge, le bleu ou le jaune. Commençons par le rouge. Chaque propriété CSS doit se terminer par un point-virgule et nous donner sauver. Ensuite, rechargez le navigateur, allez dans le index.html. Il y a un regard assez terrible dans l'en-tête rouge, mais la propriété star est maintenant prise en vigueur. Nous pouvons également utiliser des couleurs dans d'autres formats aussi, au lieu de simplement taper le nom, comme RGBA et hex. Si nous allons sur Google et si vous recherchez un sélecteur de couleurs, est divers outils en ligne que nous pouvons utiliser pour un sélecteur de couleurs, je vais utiliser la version W3Schools, qui est le lien supérieur ici. Ici, nous pouvons sélectionner une couleur de cette image sur la gauche. Laissons n'importe quelle couleur pour l'instant. Allons-y pour le bleu. Si nous faisons défiler vers le bas, nous pouvons voir que ce sont des formats différents ici. Le premier a un hachage et c'est une valeur hexagonale. Hex signifie couleur hexadécimale et a un préfixe de hachage, il est composé de six chiffres. Les deux premières sont rouges, les deux secondes sont vertes et enfin les deux valeurs bleues à la fin. La combinaison de couleur hexadécimale que j'ai choisie pour l'en-tête est 333A40. Repassons et remplacons cette valeur rouge. Ajoutons le hachage, puis la valeur de 333A40 et donnez-nous sauver. Jetons un coup d'oeil à ça. Maintenant, j'ai la même couleur foncée que vous voyez dans la version finale juste ici. Si nous revenons sur le site Web de W3Schools et puis actualisons, ceci aussi une valeur RVB juste en dessous de l'intérieur des parenthèses, nous ajoutons la valeur de rouge, vert, puis bleu comme un nombre allant de zéro à 255, zéro étant le moins intense et 255 étant le plus intense. Si nous voulions une couleur rouge, comme nous le voyons ici, nous voyons la première valeur des rouges comme 255, zéro pour le vert et aussi zéro pour le bleu, ce qui est logique. Puis en dessous de la couleur devient plus orange. Ce troisième par exemple, nous voyons que nous pouvons ajouter plus de vert. 255 pour le rouge, 128 pour le vert et zéro pour le bleu. Vous pouvez également voir une quatrième valeur, qui est appelée RGBA. Si nous faisons également une recherche Google pour RGBA. Encore une fois, je vais aller sur ce site W3Schools, pour ce lien ici. Ici, nous pouvons voir la valeur RGBA et les quatre valeurs à l'intérieur des crochets aussi, c'est tout comme une couleur RVB, mais avec une quatrième valeur d'alpha. Alpha est utilisé pour définir l'opacité et est une valeur comprise entre zéro et un. Zero est entièrement transparent et l'un est une couleur unie. Si nous revenons à notre page index.html, la couleur de texte par défaut que nous voyons sur la page ici est cette couleur noir foncé. Cette couleur de texte peut également être modifiée à l'aide de la propriété color comme celle-ci. Nous juste après le point-virgule, nous pouvons également ajouter la couleur qui s'applique au texte. Nous allons changer pour être blanc, et aussi le point-virgule à la fin. Il peut également s'agir d'un nom de colonne et d'une valeur RGBA ou hexadécimale. Les deux vont rester simple comme blanc, puis rafraîchir. Maintenant, nous avons cette couleur blanche en haut de l'en-tête. Vous remarquerez que ces liens de navigation libres et la lumière, c'est parce que ce sont des liens. Nous devons cibler l'élément A pour que cela prenne effet. La même couleur d'arrière-plan peut également être appliquée à la 42. Tout ce que nous devons faire est de prendre ces attributs de style, puis de copier, et nous faisons défiler vers le bas de la page, nous avons juste besoin d'ajouter cela à l'intérieur de la balise de pied de page d'ouverture. Ensuite, si nous descendons vers le bas et appuyez sur rafraichir, nous obtenons maintenant les mêmes couleurs appliquées au pied de page. C' est ainsi que nous pouvons ajouter des styles en ligne. Ils peuvent être utiles pour ajouter rapidement un style à un élément particulier. Mais vous pouvez probablement déjà voir quelques inconvénients. Comme même à ce stade précoce, nous dupliquons déjà le même code, ce qui n'est généralement pas une bonne idée. Aussi, mais un moment où ajouter des styles à tous les éléments de sa page peut commencer à sembler vraiment désordonné. Un autre gros inconvénient est que si nous décidons de changer quelque chose, comme une couleur de police à une date ultérieure, nous devrons alors examiner chaque élément de texte dans chaque page HTML et les changer tous individuellement. Heureusement, il y a de meilleures approches, et nous allons regarder l'une d'entre elles dans la prochaine vidéo. 33. Feuilles de style internes (début CSS): Le prochain type de feuille de style que nous pouvons ajouter est les feuilles de style internes. C' est une façon d'ajouter tous les styles que nous voulons appliquer à une seule page Web. Pour ce faire, nous pouvons ajouter les balises de style dans la section tête. Alors faisons défiler vers le haut de notre page d'index, puis juste après le titre, nous allons ajouter les balises de style. Ajoutons la balise d'ouverture et de fermeture à l'intérieur de cette section de tête. Ensuite, comme nous l'avons vu dans les diapositives au début de la section, nous pouvons ajouter le nom des éléments auxquels nous voulons que les styles s'appliquent. Je vais commencer par cette zone d'en-tête, suivie par les accolades d'ouverture et de fermeture. À l'intérieur de ces accolades, nous pouvons ajouter les mêmes styles qu'avant. Donc, nous ajoutons l'arrière-plan, le deux-points, et nous avions la valeur de code Hex de 333a40. Lorsque vous utilisez ces styles, nous devons également terminer chaque propriété avec le point-virgule. Ensuite, nous avons aussi la couleur qui s'applique au texte qui était blanc. Ensuite, si nous descendons et supprimons les styles en ligne qui sont déjà avant les éléments de tête, que vous déplacez cela. Ensuite, plutôt que de dupliquer des codes, ces styles peuvent s'appliquer à plusieurs éléments en les séparant par une virgule, alors séparez-le par une virgule. Nous pouvons également ajouter le pied de page à l'intérieur de là aussi. Ensuite, bien sûr, nous devons descendre et supprimer ces styles de la zone de pied de page. En bas, supprimons cette section de style en ligne comme ça. Ensuite, donnez cela une sauvegarde, et puis si nous passons au navigateur et puis actualisons, nous pouvons voir que les styles qui ont été ajoutés sont exactement les mêmes qu'avant, mais cette fois nous les avons dans une section en haut de la tête. Nous pouvons également ajouter un style aux éléments HTML racine et aussi à la section du corps aussi. De retour dans les balises de style tout en haut, encore une fois avec les éléments HTML, ajoutons une couleur d'arrière-plan. Ajouter la valeur du code hexadécimal de f7f7f7. J' ai ajouté ces éléments HTML en haut car c'est un élément racine. Donc, donnez cela une sauvegarde puis actualisez, et ce sont des arrière-plans de différence petits mais subtils. Maintenant avec le corps, que je vais ajouter juste après le HTML. Ajoutons un fond de blanc. Il se distingue par ce fond de HTML. La largeur maximale de la section du corps, je vais changer cela pour être 1.000 pixels, puis nous voulons ajouter la marge zéro, puis auto. Marge est la valeur de l'espacement que nous ajoutons en dehors des éléments. La première valeur de zéro ne représente aucun espacement en haut et en bas, et la deuxième valeur est pour la gauche et la droite. Envoyez la valeur à auto, espacement moyen sera automatiquement appliqué de manière égale aux deux côtés, centrant efficacement le corps vers le milieu de la page. C' est une astuce courante et nous en apprendrons plus sur l'évanouissement dans une vidéo ultérieure. Ne vous inquiétez pas si ça n'a pas de sens pour le moment. Vous pouvez probablement voir cela en action mieux si nous sauvegardons et puis actualisons. Vous pouvez voir tout de suite que le corps est maintenant légèrement plus étroit. Vous pouvez voir cette couleur HTML que nous avons ajoutée en arrière-plan, elle est légèrement différente des blancs qui ont été ajoutés au corps. La section du corps est cette section de 1 000 pixels de large, qui va de ce bord gauche ici au côté droit ici. Le corps est maintenant limité à 1 000 pixels de large et centré au milieu car nous avons ajouté une marge égale à gauche et à droite. Tout espace supplémentaire disponible après cette largeur de 1 000 pixels sera automatiquement appliqué à gauche et aussi à droite. C' est parce que nous avons ajouté une feuille de style interne à cette page index.html. Les feuilles de style internes fonctionnent très bien, mais il n'y a que utile pour coiffer cette page que vous avez déjà à faire. Par exemple, si nous sélectionnons le lien Contact dans le menu en haut, qui est le troisième ici cliquez dessus, et le style dans lequel nous avons ajouté ne prend pas effet sur cette page. Ce n'est souvent pas le comportement que nous voulons parce que nous voulons style cohérent pour les couleurs et aussi cette section d'en-tête et de pied de page aussi. Encore une fois, c'est quelque chose qui peut être facilement résolu en utilisant notre troisième et dernier type de feuilles de style, que nous allons couvrir ensuite. 34. Feuilles de style externes (début CSS): Nous avons jusqu'à présent couvert l'ajout de styles en ligne et également l'utilisation de feuilles de style internes. Le troisième et dernier type est une feuille de style externe. Nous voyons dans la dernière vidéo, qu'une limitation de l'utilisation de feuilles de style internes, est qu'ils ne s'appliquent qu'à une seule page Web. Nous ne voulons pas répéter les styles d'en-tête et de pied de page pour chaque page. Vous pouvez les ajouter à une feuille de style externe plutôt que d'appliquer uniquement à notre page d'index, que vous voyez notre présence. Nous pouvons le faire en créant un nouveau fichier à l'intérieur de notre dossier de projet. Je vais cliquer sur cette icône ici pour ouvrir la barre latérale. Je vais créer un nouveau fichier en cliquant sur cette icône ici. Je vais appeler ceci « styles.css » Les noms de [inaudible], mais il doit avoir l'extension « .css », puis appuyez sur « Entrée ». Je vais juste enregistrer ceci dans les racines de notre dossier de projet. Avec cet index et toutes les autres pages HTML. Nous pouvons également ajouter un dossier CSS si vous avez plusieurs fichiers de feuille de style, alors nous pouvons passer à la page d'index et les styles que vous avez déjà. Alors faisons défiler vers le bas et tout de l'en-tête et du pied de page, jusqu'au HTML. Alors découpez ça. Mais je vais juste laisser ces balises de style en place, puis les coller dans le fichier styles.css que nous venons de créer, appuyez sur « enregistrer ». Si nous passons au navigateur, puis appuyez sur « rafraichir », nous voyons aucun style n'est appliqué du tout maintenant. C' est parce que nous devons lier ce nouveau fichier CSS aux fichiers HTML auxquels nous voulons qu'il s'applique. Alors allons-y et faisons-le maintenant. Plus dans le index.html, nous pouvons supprimer les balises de style, et en place je vais ajouter les éléments de lien. Le lien n'a pas de balise de fermeture et nous pouvons ajouter deux attributs. Le premier est rel, et nous ajoutons des feuilles de style égales. Rel égal à feuille de style décrit la relation entre les documents liés et le chromo. On relie les feuilles de style. Ensuite, l'attribut href, que vous devriez être familier avec quand nous avons regardé les liens. C' est le chemin d'accès au fichier CSS que vous venez de créer. Les manquements dans le même répertoire sont la page d'index. Donc, nous pouvons simplement ajouter le nom de styles.css. Si nous avions dans un fichier CSS, nous aurions besoin d'ajouter CSS comme un chemin de fichier avant le fichier. Retirons ça et donnez-nous des économies. Maintenant rafraîchissant devrait réintroduire nos styles sur la page. Nous devrions toujours voir Si nous allons à plus de pages telles que contact, qu'aucun de ces styles ne s'applique encore. Nous pouvons changer cela en établissant un lien vers toutes les pages en utilisant le même lien ici. Donc, je vais juste copier ceci et ensuite ajouter ceci au contact.html. Est-ce que ça va être au sommet aussi ? Juste après le titre ? Ensuite, la même chose pour le détail du produit. Juste en haut sous le titre. Collez ceci dans. Maintenant, si nous allons à [inaudible] sur les pages HTML dans le navigateur. Nous avons donc notre page d'accueil. essayons de contacter la page et nos styles s'appliquent toujours là. N' a l'air un peu plus petit si nous venons de zoomer et avec le navigateur là. Donc la page d'accueil fonctionne tous sur la page Contactez-nous, et nous aurons toujours les styles pour l'en-tête et le pied de page. Enfin, revenons à toute la page et sélectionnons les données du produit. Nos styles s'appliquent également à cette page. C' est ainsi que nous pouvons ajouter des feuilles de style externes à nos projets. Ensuite, nous allons regarder dans les polices Google. 35. Polices (CSS débutant): Maintenant, nous avons abordé la façon d'appliquer des feuilles de style de différentes manières. Passons maintenant à l'utilisation des polices. L' ajout de types de polices à nos sites Web est très important pour définir l'apparence et la convivialité. Si nous jetons un coup d'oeil ici, je suis sur le site Web W3Schools dans une section appelée polices CSS. Si nous regardons ici, il y a deux types de police principaux. L' un appelé Serif et l'autre appelé Sans-Serif. Les polices sans empattement sur la gauche sont beaucoup plus simples et ont des arêtes carrées plus droites. Les polices de serif d'autre part ont ces détails supplémentaires sur le bord que vous pouvez voir en rouge juste ici. Un peu plus loin, nous pouvons voir qu'il y a deux types de familles de polices. Sur la gauche de la table, nous voyons nous avons Serif, nous avons Sans-Serif et aussi Monospace. Ce sont tous des exemples d'une famille de polices générique. Chacun de ces groupes génériques possède également de nombreuses familles de polices. Ici, nous voyons au sommet nous avons Times New Roman et Georgia et ce sont les deux types de la famille Serif. Puis ci-dessous, nous avons Arial et Verdana qui sont des familles de polices avec un type de sans-empattement. Nous voulons généralement ajouter à la fois la famille de polices à notre CSS avec une famille générique telle que Sans-Serif qui agit comme un secours si notre premier choix n'est pas pris en charge par le navigateur. Pour éviter les polices qui ne sont pas généralement prises en charge, nous pouvons utiliser ce qu'on appelle les polices sécurisées Web. Nous allons juste aller sur Google et faire une recherche rapide pour ces polices sécurisées Web. Maintenant, allons sur le site Web des W3Schools juste ici. Nous avons les versions Serif et le défilement plus bas nous avons aussi les polices sans empattement. Ceci a une liste de combinaisons de polices communes qui sont sauvagement repérées. La plupart ont une pile de trois polices comme vous pouvez le voir ici. Nous avons notre premier choix à titre d'exemple, nous avons Arial. Notre deuxième choix de Helvetica et ceci est utilisé si l'Arial n'est pas supporté. Ensuite, à la fin, nous avons une famille de polices génériques telles que Sans ou sans-serif. Ceci est utilisé si aucun des autres n'est disponible ou pris en charge. Les noms de famille de polices similaires avec des espaces entre sont entourés de guillemets, comme vous pouvez le voir ici. Ceci est recommandé, mais pas nécessaire. Je vais aller de l'avant et copier une de ces polices, piles. Disons Comic Sans. Copions cette section du site Web. Ensuite, revenons à notre fichier styles.css et nous pouvons ajouter une famille de polices à notre projet. Fermons la barre latérale et ouvrons le styles.css. Nous pouvons ajouter ceci au corps puisque tout le contenu HTML est à l'intérieur de notre corps de texte. Allons au corps et ajoutons notre famille de polices et ensuite nous pourrions coller dans nos trois valeurs que nous venons de copier avant avec un point-virgule à la fin. Enregistrez cela, puis revenez au projet dans le navigateur, puis actualisez et vous pouvez voir tout le type de police a changé pour être cette version Comic. Une autre façon d'inclure les polices consiste à inclure une bibliothèque de polices telles que les polices Google. Faisons une recherche pour les polices Google et ce dont nous avons besoin est fonts.google.com. Ouvrons ça. Nous pouvons voir tout de suite qu'il y a beaucoup de polices différentes à choisir. Nous pouvons même filtrer vers le bas sur le côté droit par les différents types tels que Serif ou Sans-Serif. Vous pouvez même regarder et choisir l'une de ces polices sur l'écran d'accueil si vous préférez. Je veux faire une recherche et choisir celui qui s'appelle Barlow. Donc, sous la barre de recherche et c'est celui que je vais utiliser sur le côté gauche. Si nous voulons ajouter cela, il suffit de cliquer sur le symbole plus ici. Ensuite, nous pouvons descendre vers le bas et élargir la famille sélectionnée. C' est ainsi que nous obtenons les instructions sur la façon d'ajouter ceci à nos projets. Tout d'abord, en haut, nous avons un lien qui est exactement comme le lien que nous avons utilisé sur nos propres feuilles de style, mais cette fois il renvoie aux feuilles de style que Google a fournies. Copions ce lien, passons au projet et dans l'index ou HTML, nous pouvons ajouter ceci juste en dessous de notre titre. Ce lien doit également être ajouté à toutes les pages HTML, alors ajoutons-le au détail du produit juste en dessous du titre et aussi à la page Contactez-nous. Assurez-vous qu'on les sauve. Le placement de ce fichier est également important. Nous devrions avoir notre propre fichier CSS personnalisé en dernier. Cela garantit que toutes les modifications que vous apportez en tant que style personnalisé sont chargées en dernier et remplaceront toutes les valeurs par défaut. Nous allons examiner cela plus en détail plus tard cependant, mais revenir aux polices Google pour l'instant. Ensuite, nous devons descendre et copier la famille de polices. Copiez donc cette ligne du CSS, puis revenez à notre styles.css et plutôt qu'une section que nous avons ajoutée précédemment, nous pouvons coller dans notre nouvelle version de Barlow et cliquer sur ce « Enregistrer » retour au projet, puis actualiser. Maintenant, toutes les polices ont pris effet sur la page et nous devrions les voir être cohérentes à travers toutes nos différentes pages. Tous ces formulaires semblent visiblement différents, nous pouvons confirmer si cela fonctionne en allant dans les outils de développement. Cliquez avec le bouton droit « Inspecter », puis sur le côté droit sous le corps, nous pouvons voir Barlow que vous avez choisi. Si nous décochons cela, nous pouvons voir un changement avec la famille de polices à l'écran car il revient à la valeur par défaut. Nous pouvons voir clairement que ces polices Google fonctionnent maintenant. Je vais maintenant vous voir dans la prochaine vidéo, nous allons jeter un oeil aux classes et les identifiants. 36. Classes et identifiants (début CSS): Classes et ID est quelque chose qui utilisera tout le temps lors de la construction de sites Web. Ils sont un moyen de sélectionner ou d'accrocher certains éléments sur notre page afin que nous puissions appliquer notre CSS à elle. Nous les utiliserons également plus tard dans le cours pour, lorsque vous travaillez avec JavaScript, commençons par ID. Nous pouvons ajouter un attribut ID à n'importe quel élément puis target est élément en utilisant CSS. Si nous passons à la page contact.html, nous avons déjà utilisé des ID dans cette section, donc en cherchant le nom en haut et si vous faites défiler vers la droite, ici nous avons un nom d'ID. Nous avions aussi un ID d'e-mail et de message. Une chose importante à noter avec les ID est qu'ils doivent être uniques. Nous ne devrions utiliser qu'un seul nom d'identification sur chaque page. Nous créons ensuite cet ID dans le fichier CSS avec un préfixe de hachage, pour ajouter un style à ce nom ira sur le style.css, puis ici, en utilisant un préfixe de hachage, nous pourrions cibler le nom. Ensuite, nous pourrions faire des choses telles que l'ajout d'une couleur d'arrière-plan. Changeons l'arrière-plan pour qu'il soit rouge, puis donnez-nous des sauvegardes. Plus sur notre navigateur Web, et nous devons aller à la page de contact. Défilant vers le bas et maintenant nous avons un fond rouge pour cette section de nom. Il est important de savoir que les ID ne doivent pas commencer par un numéro deux. Si nous devions passer au CSS et ajouter un nombre tel que celui-ci, l'éditeur de texte le transforme en rouge pour signaler un problème. Allons vers le bas, épargnons. Il s'agit d'un ID que nous utilisons pour sélectionner un seul élément sur une page, mais que faire si nous voulions que les mêmes styles s'appliquent à plusieurs domaines, tels que nos produits. Pour ce cas, nous pouvons utiliser une classe, en ajoutant le même nom de classe à toutes nos balises productives nous permettra d'écrire des styles qui s'appliqueront à tous. Si nous allons au index.html, puis il localisera notre premier produit, qui est le contrôleur. Pour la div environnante, qui est ici juste au-dessus du lien, nous pouvons ajouter un attribut de classe de produit. Puisque nous pouvons l'utiliser plus d'une fois, copions ceci et ajoutez-le aux six produits. Le deuxième, le troisième, le quatrième et si vous en avez plus de six, ajoutez-les à chacun, et c'est tous les six, alors nous sauve. Nous avons également un produit à l'intérieur de la page détaillée du produit deux. Nous pouvons ajouter ceci à notre produit à l'intérieur de là. Faites défiler jusqu'à la section principale, et à nouveau à l'intérieur de la div d'ouverture pour le produit. Cela permettra de s'assurer que les mêmes styles que nous appliquons dans le CSS s'appliqueront également à ce produit. Cette fois, au lieu du préfixe de hachage et si nous allons au CSS, nous utilisons un point pour indiquer que nous ciblons une classe. Entrez ensuite le nom des produits, et maintenant nous pouvons ajouter quelques styles à l'intérieur de ces accolades. Cette classe, ainsi que l'ID que nous avons utilisé auparavant et aussi ces noms d'éléments juste au-dessus sont tous appelés sélecteurs. Ils aussi petits avancés aime ces deux, et nous allons jeter un oeil à ceux-ci plus tard dans le cours. Allons de l'avant et ajoutons une bordure à notre productive d'un pixel de large, une ligne solide, et la couleur du gris. Ensuite, nous pouvons définir la largeur de chaque produit à 200 pixels de large, le point-virgule et voyons comment cela regarde dans la page d'index. Donne notre rechargement et descendre aux produits de bureau, nous pouvons voir la frontière si nous regardons ici et aussi cela ressemble à environ 200 pixels de large. Cependant, cette image ci-dessus est trop grande pour tenir à l'intérieur de ce conteneur. Les autres moyens que vous pouvez faire cela, nous pourrions définir la propriété overflow pour être cachée, juste comme ça et enregistrer cela, puis recharger. Maintenant, nous pouvons voir que l'image est à l'intérieur du conteneur de 200 pixels. Ce n'est pas idéal parce que cela cache le reste de l'image, ce qui n'a pas l'air trop grand. Une meilleure solution pour cela sera de définir la propriété de largeur maximale plutôt que le débordement, supprimons ce débordement, puis en dessous, nous pouvons cibler le sélecteur d'image. Ensuite, utilisez la propriété CSS max-width, répondez que ce serait un 100 pour cent, donnez cette sauvegarde, puis rechargez. Cela permet de s'assurer que l'image ne s'étend pas plus loin que le conteneur environnant. Ça a l'air beaucoup mieux. C'est plus comme ce que nous voulons. Cependant, le produit est toujours empilé l'un sur l'autre, parce que nous avons mentionné plus tôt, div éléments de niveau de bloc et commencer sur une nouvelle ligne. Mais, c'est correct pour le moment et ensuite, nous allons passer à la marge et au rembourrage. 37. Marge et rembourrage (début CSS): Marge et padding sont toutes deux des propriétés CSS vraiment importantes à comprendre. Les deux sont fondamentalement une façon de créer de l'espace. Si nous regardons ce diagramme ici, imaginez que c'était l'un de nos produits. Nous allons probablement vouloir qu'il apparaisse quelque chose comme ça, avec un peu d'espace autour d'elle, non valide bien que c'est ainsi qu'il apparaisse par défaut. Placé dans le coin supérieur sans espacement. Nous le voyons en action dans notre projet actuel où le produit par défaut se trouve en haut à gauche de l'espace disponible. Pour corriger cela, nous pouvons appliquer une marge à l'extérieur d'un élément pour créer un espacement. La marge peut être appliquée pour être la même de chaque côté, ou vous pouvez ajouter un montant différent de chaque côté si nécessaire. La même chose se produit lorsque nous ajoutons des éléments à l'intérieur de ce productif. L' élément, tel que cette image ou même n'importe quel texte, est placé dans le coin supérieur. Comme avant, nous ne voulons peut-être pas que l'image soit liée au coin supérieur. Pour cette situation, nous avons ce qu'on appelle le rembourrage. Rembourrage ajoute également l'espacement, mais cette fois, à l'intérieur des éléments. La marge est à l'extérieur des éléments et le rembourrage est appliqué à l'intérieur des éléments. La bordure verte plus foncée met en évidence ce que le rembourrage fait réellement. Il agit comme un coussin, en gardant les choses loin des côtés. Nous pouvons également définir cela également de tous les côtés ou avoir des valeurs différentes de chaque côté. Comme nous le voyons ici, la marge et le rembourrage peuvent être réglés individuellement pour chaque côté en définissant les valeurs haut, droite, inférieure et gauche. Heureusement, il existe aussi des versions abrégées. regardant ces deux exemples sur la gauche, nous pouvons définir la marge ou le remplissage avec quatre valeurs. Ces quatre valeurs sont dans le sens des aiguilles d'une montre, en commençant par le haut. Donc en haut, à droite, en bas, puis à gauche. Ici, nous avons à la fois les valeurs du haut et du bas définies à dix pixels, puis les valeurs de gauche et de droite, les deux mêmes sont cinq pixels. Pour ce cas, nous pouvons également montrer cela encore plus loin. Comme nous le voyons sur le côté droit. La première valeur est en haut et en bas, et la seconde est à gauche et à droite. Nous avons déjà vu cela dans notre projet lorsque nous avons centré notre site Web en utilisant la marge zéro auto. Zéro indique aux navigateurs de ne pas ajouter de marge en haut et en bas de la section du corps. Ensuite, l'espace supplémentaire à gauche et à droite peut être divisé également, laissant la section du corps centrée sur la page. Assez de cette théorie, donnons ça à l'intérieur de notre projet. En commençant par la marge. Si nous passons au styles.css et jusqu'au produit, nous pouvons ajouter une marge à cette section produit de cinq pixels. Parce que nous n'avons ajouté qu'une seule valeur, cela s'appliquera à tous les côtés du produit. Voyons ça avec un rechargement. Maintenant, nous pouvons voir cinq pixels d'espace et cela est apparu autour de tous les côtés du produit. Ensuite, allez de l'avant et ajoutez un peu de remplissage aussi, aussi un cinq pixels, puis actualisez. Maintenant, nous avons un coussin de cinq pixels à l'intérieur de la div. En outre, une autre chose importante à noter est souvent appliquée les valeurs par défaut d' un navigateur de marge et de remplissage trop. Cela signifie parfois qu'il peut vouloir réinitialiser les valeurs à zéro et la liste non ordonnée est une liste commune, qui est souvent applicable à. Passons au CSS, et nous pouvons réinitialiser ces valeurs. Si nous allons juste en dessous de l'en-tête et du pied de page, marquons à l'UL. Ensuite, nous pourrions remettre la marge à zéro. Si nous veillons à cela lorsque nous actualisons, nous voyons tout se déplacer vers le haut comme une marge par défaut a été supprimée. Nous pouvons également faire la même chose pour supprimer tout remplissage par défaut. Encore une fois, revenez à la liste non ordonnée. Ensuite, nous pouvons réinitialiser le rembourrage à zéro. Si nous gardons un œil sur moi quand nous rafraîchissons, nous voyons que toutes les listes non ordonnées sont maintenant déplacées sur le côté gauche. C' est quelque chose à garder à l'esprit si vous vous demandez pourquoi quelque chose semble un peu différent que prévu en raison de l'ajout de certaines valeurs par défaut du navigateur. En outre, juste pour rendre les choses encore plus confuses, différents navigateurs ont souvent des valeurs différentes aussi. Cependant, quelques ressources pour nous aider avec les paramètres par défaut du navigateur. Si nous passons à Google, puis faisons une recherche pour les réinitialisations CSS. Le lien supérieur que je veux est Meyerweb. Cliquez dessus. Ceci est une feuille de style. Si nous faisons défiler vers le bas, nous pouvons voir le code juste ici. Nous pouvons utiliser cela à l'intérieur de notre projet pour supprimer efficacement tout style par défaut fourni par les navigateurs. Cette chose nous donne une toile vierge pour commencer. Alternativement, nous pouvons utiliser un autre fichier CSS appelé Normalize. Encore une fois, faisons une recherche Google pour CSS Normalize. Son lien supérieur est ce dont j'ai besoin. Cliquez dessus. Normaliser le travail légèrement différemment pour réinitialiser. Plutôt que de supprimer les paramètres par défaut du navigateur, vous fournissez des styles pour que nos sites Web s'affichent de manière plus cohérente dans les navigateurs organisés. Vous venez de décider maintenant cependant, et quelque chose que vous pourriez trouver utile pour inclure cela dans nos projets. Tout ce que vous devez faire est de télécharger le fichier et l'ajouter à nos projets, comme nous l'avons fait avec notre propre feuille de style personnalisée. C' est maintenant pour la marge et le rembourrage. Ensuite, nous allons plonger dans l'utilisation de différents types d'affichage. 38. Block, inline et inline-block (début CSS): Nous avons déjà brièvement discuté du plus grand nombre d'éléments qui tombent à être des éléments en ligne ou de niveau bloc. Nous voyons sur l'écran ici quelques éléments d'image en ligne. Cela a pour effet que chaque élément soit sur la même ligne s'il convient. Il y a cependant une chose à prendre en compte lors de l'utilisation d'éléments en ligne, nous pouvons ajouter de la marge et du remplissage à gauche et à droite, comme nous le voyons ici, mais nous ne pouvons pas l'ajouter en haut et en bas. Cela est dû au fait que le contenu ajouté avec des éléments en ligne est destiné à circuler sur la page, puis sur la ligne suivante. Ajouter une hauteur supplémentaire perturberait ce flux. En outre, nous sommes également autorisés à définir la largeur et la hauteur. Les éléments de niveau bloc, d'autre part, commencent sur une nouvelle ligne et prennent toute la largeur disponible, comme un div ou un texte lors de l'utilisation de l'élément p. Ils nous permettent également de définir n'importe quelle marge et rembourrage sans aucune restriction, contrairement à ce que nous venons de voir avec les éléments en ligne. Il y a cependant un moyen d'avoir ce comportement en ligne tout en étant capable de définir la marge et le remplissage et ceci est de définir l'élément pour être inline-block. Inline-block est couramment utilisé dans les navigations. Par défaut, listez les éléments ou les éléments de niveau bloc. Quelqu' un fera une liste qui s'empilera les uns sur les autres. Nous voyons généralement les liens nav comme inline ou inline-block, comme nous le voyons ici. Inline-block permet aux éléments de circuler sur la page, mais il nous donne toujours la flexibilité de contrôler les valeurs de remplissage et de marge. Nous ne pouvons pas modifier le type d'affichage par défaut des éléments en utilisant la propriété d'affichage CSS pour le remplacer. Allons et donnons ça un coup de pouce maintenant. Plus dans le CSS en commençant par l'élément li. Soufflez simplement cette liste non ordonnée à l'intérieur du li, puis définissez le type d'affichage pour être en ligne. Donnez cela une sauvegarde et retour à notre projet, actualisez, et maintenant nos liens apparaissent en ligne sur la page. Cela fonctionne comme prévu, les éléments de la liste d'en-tête sont en ligne, mettre la cible dans tous les éléments li comme celui-ci, inclure également ces éléments de liste de la barre latérale aussi. Si vous voulez uniquement cibler ces éléments de liste d'en-tête, nous pouvons être plus précis. Si nous passons au CSS, plutôt que de cibler simplement le li, nous pouvons ajouter en-tête, li, donner à cela une sauvegarde, et sur le navigateur et rafraîchir. Maintenant, nous pouvons voir que cela ne sélectionne que les éléments de la liste qui sont à l'intérieur de l'en-tête, ceux de la barre latérale sont intacts. Nous pouvons aller encore plus loin avec cette section d'en-tête aussi, en faisant le titre du site et aussi ces liens de navigation en ligne aussi. En fait, nous pouvons faire ces blocs en ligne, sorte que nous pouvons toujours contrôler la hauteur aussi. vous les définissez comme inline-block, ce titre apparaîtra sur le côté gauche. Ensuite, sur le côté droit, nous allons obtenir les liens de navigation, qui est entouré dans l'élément nav, donc revenez au CSS. Nous pouvons cibler ce titre de site. Nous avons en-tête, h1, puis séparé par une virgule. Nous pouvons également cibler l'élément nav aussi. Définissez l'affichage, cette fois pour être inline-block, puis actualisez. Maintenant, j'ai la navigation et le titre du site alignés sur l'en-tête. Inline-block est également un bon moyen d'aligner les produits aussi. Donnons à cela un aller dans la div du produit ici. Modifions à nouveau le type d'affichage pour être inline-block, sur le navigateur, et à l'intérieur de la page d'index, faisons défiler vers le bas. Maintenant, nous avons nos produits alignés sur la page 2. Cette propriété inline-block peut même être utilisée pour avoir la barre latérale, qui est actuellement ici, ainsi que ces produits côte à côte. Rappelez-vous que la barre latérale était dans les éléments de côté et tous ces produits étaient contenus dans la section principale. Allons d'abord au CSS et nous pouvons définir la largeur de la section principale et de côté. Je vais ajouter ceci juste en dessous de la section en-tête, h1 et nav. Commençons par la section principale et définissons la largeur à 680 pixels. Ensuite, nous pouvons nous assurer que la barre latérale s'adapte également sur la ligne en définissant la largeur de côté à 270 pixels. J' ai sélectionné ces deux valeurs ici. Lorsqu' ils sont combinés, ils sont tous les deux inférieurs à la largeur du corps de 1 000 pixels, que nous avions auparavant. Par conséquent, mettre de côté et principal à ces tailles fera en sorte qu'elles s'adaptent à la fois sur la page et permettent également une certaine marge et un rembourrage aussi. Voyons comment cela ressemble, recharger et nous pouvons maintenant voir la barre latérale est un peu plus large. Si nous regardons la largeur de cette ligne ici et aussi la section des produits a été limitée à cette partie ici. Maintenant, passons et définissons le type d'affichage pour être inline-block. abord, le type d'affichage principal du bloc inline-, puis aussi pour la barre latérale. Ensuite, j'espère que si nous sauvegardons ceci et que nous allons maintenant passer, nous pouvons maintenant voir cela côte à côte puisque la section côté et la section principale sont tous les deux inline-block. Les choses commencent à mieux paraître maintenant, mais les éléments de la barre latérale sont en bas. Pour corriger cela lorsque vous travaillez avec des éléments en ligne, ou même inline-block, qui agit beaucoup comme en ligne, nous avons accès à une propriété CSS appelée vertical align. Si nous passons à la barre latérale, juste sous l'affichage, nous pouvons également définir l'alignement vertical et placer le texte en haut. Espérons qu'il devrait maintenant pousser notre texte en haut de la barre latérale, ce qu'il fait. Cette propriété d'alignement vertical peut être utilisée pour aligner éléments en ligne ou des éléments à l'intérieur des cellules de tableau. Nous avons mentionné dans les diapositives plus tôt que lors de l'utilisation d'éléments en ligne, nous ne pouvons pas ajouter de marge et de remplissage à gauche et à droite, mais nous pouvons l'envoyer en haut et en bas. Cela peut être vu avec nos liens produits de Plus d'infos et Ajouter au panier. Allons de l'avant et ajoutons un peu de rembourrage pour voir ce qui se passe. D' abord, nous devons leur donner une classe dans la page d'index. Je vais donner à ça une classe de bouton. abord, passons au produit très haut et recherchons ces deux liens. Ensuite, nous pouvons aller de l'avant et ajouter un nom de classe de bouton, donc classe égale bouton. Ensuite, nous devons ajouter ceci à l'ensemble de notre produit, donc je vais copier ceci et l'ajouter au deuxième lien aussi. Ensuite, passez à notre deuxième produit et nous pouvons l'ajouter à tout cela pour garder ce style cohérent. C' est nos quatre produits. Les quatre produits et le dernier aussi. Nous pouvons utiliser cette classe de bouton dans la feuille de style. En bas tout en bas, le nombre de classes utilisent un point, mettez le nom d'un bouton, un peu de remplissage de 10 pixels de la police, enregistrez cela, et maintenant sur la page d'index et actualisez. Nous pouvons voir que le rembourrage a ajouté un peu d'espace entre les boutons, mais il n'y a pas de hauteur supplémentaire. Rappelez-vous que nous n'avons ajouté qu'une valeur de 10 pixels. Habituellement, cela s'appliquerait aux quatre côtés, mais nous ne voyons cela qu'à gauche et à droite. C' est parce que, comme nous le savons déjà, nous ne pouvons pas affecter la hauteur avec la marge et le remplissage sur les éléments en ligne, mais nous pouvons débloquer et bloquer en ligne. Par conséquent, si nous passons au CSS et changeons le type d'affichage du bouton pour être inline-block, nous pouvons voir quel effet cela a dans le navigateur. Dès que nous rafraîchissons, nous voyons maintenant une hauteur supplémentaire ajoutée à chacun de ces boutons. Ici, nous avons examiné la propriété d'affichage. Comme vous pouvez le voir, c'est vraiment important lors de la mise en page de notre site Web. Cela peut sembler un peu difficile à comprendre au début, mais vous pouvez voir avec cet exemple combien il est efficace, même en ajoutant simplement quelques lignes de code dans notre CSS. 39. Le modèle de boîte (début CSS): Dans cette vidéo, nous allons regarder le modèle CSS Box. Le modèle de boîte est l'une de ces choses où une fois que vous le savez, c' est vraiment facile à comprendre. Mais si vous n'êtes pas conscient de ce que c'est, cela peut causer des problèmes lorsque vous essayez d'ajuster des éléments sur une page. Par exemple, si nous passons à notre CSS et que nous changeons largeur de notre produit à l'intérieur de cette classe de produit ici, disons 210 pixels. Si nous sauvegardons cela et rechargeons le navigateur, nous voulons maintenant avoir à ces produits adapter dans notre rangée. Maintenant, revenons à notre CSS et étudions. Si nous regardons notre produit, nous l'avons défini sur 210 pixels de large. Si nous regardons ci-dessus, nous définissons cette section principale à 608 pixels. Nos trois produits ci-dessous atteignent 630 pixels au total. Jusqu' à présent, nous sommes toujours dans le wrapper 608 pixels pour la section principale, mais alors vous pensez peut-être correctement que nous avons un peu d'espace autour des produits. Nous avons ajouté une marge de cinq pixels à tous les côtés. Ces cinq pixels supplémentaires par côté signifieraient alors que chaque produit prend 220 pixels chacun et un total de 660 pixels. Encore une fois, toujours dans cette 680 pixels, section principale. Le rembourrage est à l'intérieur des éléments, donc vous pouvez penser que cela n'est pas pertinent. Nous avons aussi ajouté cinq pixels de rembourrage juste ici. Eh bien, en fait, c'est aussi inclus. Passons aux outils de développement du navigateur et voyons à quoi cela ressemble. Tous les navigateurs ont leur propre version des outils de développement. Si vous n'utilisez pas Chrome, vous serez en mesure d'accéder aux outils de développement en regardant dans le menu, mais je recommande d'utiliser Chrome pour ce cas. Tout ce que nous avons à faire est de cliquer avec le bouton droit de la souris, puis descendre pour inspecter. Une fois qu'il apparaît, nous pouvons cliquer sur l'icône de l'inspecteur dans le coin supérieur gauche. Cliquez sur cette flèche là, puis nous pouvons passer le curseur sur nos produits, puis cliquez sur le div avec la classe de produits. Cela nous permet de voir le HTML sur le côté gauche. Ici, nous pouvons voir que nous avons mis en évidence notre première classe div de produits et aussi le CSS qui applique ce produit sur le côté droit. Notre div produit est ici mettre la bordure, la largeur, marge, le rembourrage, et le type d'affichage du bloc en ligne. Si nous faisons défiler vers le bas de la section CSS, nous pouvons voir une boîte. Cette image représente le modèle de boîte. Au milieu, nous avons nos éléments, que nous avons maintenant mis à 210 pixels de large, comme nous le voyons ici. Ensuite, en plus de cela, nous avons cinq pixels de rembourrage autour de chaque côté. Nous avons une valeur de bordure d'un pixel aussi, puis à l'extérieur nous avons cinq pixels de marge. Il est important de comprendre que ces valeurs supplémentaires de remplissage, de bordure et de marge ont été ajoutées à ces éléments, ce qui le rend plus grand dans l'ensemble. Nous définissons la largeur du produit à 210 pixels de large. Mais en réalité, chaque produit prend une largeur de 232 pixels une fois que nous ajoutons tous ces extras. C' est pourquoi dans le navigateur, les trois produits ne rentrent pas sur la même ligne. Il y a cependant un moyen de le changer. Nous pouvons utiliser une propriété CSS de taille de boîte. Si nous revenons aux produits à l'intérieur du CSS, nous pouvons ajouter la propriété box-sizing et définir ceci comme border-box. Mettez une colonne à la fin. En définissant ceci sur border-box, nous vous assurerons que la largeur que nous déclarons est une largeur totale. Bien que nous ayons une démo de base sur la largeur, tout cela s'applique également lorsque vous travaillez avec la hauteur aussi. C' est une chose à garder à l'esprit. Maintenant, avec la taille de boîte définie sur border-box, il va aller dans le navigateur, puis recharger et juste réduire les outils de développement. Nous voyons maintenant que nous avons trois produits sur chaque rangée. Si nous revenons aux outils de développement, en fait, nous devrons d'abord actualiser, puis faire glisser cette sauvegarde vers le haut. Toujours dans notre premier produit ici, si nous faisons maintenant défiler vers le bas jusqu'à notre modèle de boîte, nous pouvons immédiatement voir que l'élément au centre a maintenant une valeur de 198 pour cette largeur d'élément. Cela a été réduit pour tenir compte du remplissage et aussi des valeurs de bordure, pour ensuite égaler 210 pixels. Ensuite, nous avons encore cette marge de cinq pixels autour de l'extérieur, comme nous l'avons fait à l'origine. C' est ainsi que fonctionne le modèle de boîte. Nous devons même prendre en compte toute valeur supplémentaire telle que la bordure, le remplissage et la marge aussi ou nous pouvons appliquer la propriété CSS de border-box. 40. Style de liste (début CSS): nous examinons notre projet jusqu'à présent, il y a quelques problèmes liés aux éléments de la liste que nous devons aborder. Cette liste de sur la gauche à l'intérieur de la barre latérale. Il a encore les balles sur le côté gauche. Nous pouvons également envisager d'ajouter un peu plus d'espacement à ces éléments aussi. Commençons par travailler dans le fichier CSS. Nous pouvons faire des choses telles que changer cette puce pour être un cercle en utilisant la propriété list-style. Nous appliquons ceci à notre article Li. Défilons jusqu'à la liste non ordonnée et ensuite nous pouvons essayer d'obtenir le Li. Ensuite, après avoir ajouté la propriété de style de liste, puis nous pouvons changer la valeur pour être cercle. Donnez cela une sauvegarde, puis rechargez le navigateur, et maintenant ces balles noires sur le côté gauche sont maintenant des cercles creux. Actuellement, le cercle se trouve en dehors du plancher du contenu et il s'agit d'un paramètre par défaut. Si nous rendons le navigateur un peu plus large, nous pouvons voir que c'est le bord de la section du corps et les cercles en dehors de cela. Cela peut être modifié pour être à l'intérieur du document en ajoutant la valeur interne. Juste après le cercle, nous pouvons ajouter à l'intérieur, puis aller au navigateur. Cela pousse maintenant sur nos éléments de liste pour inclure maintenant un cercle à l'intérieur du corps. Il y a aussi l'option carrée aussi. Changons de cercle pour être carré. Cela donnera un carré à gauche de chaque élément de la liste. Il y en a aussi beaucoup plus mais beaucoup d'entre eux et pas souvent utilisés. Vous pouvez bien sûr, consultez ces avec une recherche Google rapide Si vous êtes intéressé à en savoir plus. Nous pouvons même ajouter notre propre icône ou notre propre image à la place de ce carré aussi en ajoutant l'URL de l'image. Donc, supprimons le carré et juste après l'intérieur, nous allons ajouter l'URL, puis à l'intérieur du crochet, nous pouvons ajouter le chemin du fichier à notre image. Nous pouvons aller chercher l'une de nos images existantes dans le dossier images. Allons pour cables.jpeg, et voyons à quoi cela ressemble. Donc ça ressemble un peu à un bordel à la minute parce que la taille de notre image. Évidemment, cette image est beaucoup trop grande, mais vous pouvez voir comment cela peut être utilisé si c'était une petite icône à la place, et ceci est répété pour chaque élément de la liste. Les règles intérieures et extérieures s'appliquent toujours. Donc, si nous devions supprimer l'intérieur, puis le remplacer par l'extérieur, nos images se déplaceraient maintenant à l'extérieur du document. On ne peut pas vraiment voir sans zoomer. Là, nous allons, dit nos câbles sur la gauche de chaque élément de la liste. C' est un comportement que nous avions au début cette vidéo au début avec les balles. Tout ce que je veux faire pour ce projet, c'est de supprimer complètement ces marchés. Cela peut être fait en ajoutant la valeur de none, s plutôt que cette image. Nous pouvons également supprimer l'extérieur et cela change simplement pour être nul. Ensuite, nous avons juste un ensemble standard d'éléments de liste sur le côté gauche. Ensuite, l'espacement de l'élément entre ces liens sur le haut et le bas, nous pouvons augmenter la hauteur de la ligne. Donc, dans l'élément de la liste, nous pouvons aller de l'avant et ajouter la hauteur de la ligne. La valeur est à nous, mais je vais définir le mien à trente pixels, et voir à quel point cela ressemble au sol. Good a maintenant augmenté la hauteur de la ligne à trente pixels, ce qui a ajouté un peu plus d'espacement entre chaque élément. La dernière chose que je veux faire est d'ajouter un peu d'espacement pour garder le texte loin du bord de ce conteneur. Cela peut facilement être fait avec un peu de rembourrage sur la section de côté. Donc, plus à la section de côté du CSS, puis allez-y et ajoutez un peu de remplissage de 10 pixels, puis actualisez. Super, donc l'espacement a été appliqué à la section de côté. Mais dans ce rembourrage, il a également causé une boutique par section à être maintenant inférieure à ces tous les articles section sur la droite. Pour rendre cela plus uniforme, nous avons juste besoin d'ajouter la valeur de remplissage à la section principale aussi. Juste au-dessus, nous pourrions faire la même chose avec le rembourrage de 10 pixels, et voyons à quoi cela ressemble. Super, donc maintenant la boutique par, et toute la section article s'alignent maintenant mieux avec un peu de rembourrage autour de l'extérieur. Ensuite, nous allons passer à des liens de style et des pseudo-classes. 41. Styliser les liens et les pseudo-classes (CSS débutant): Comme nous pouvons déjà le voir dans notre projet, par défaut, les liens ne sont pas très bons. Ils ont une section de soulignement, que vous pouvez voir juste ici et aussi dans la section d'en-tête, vous devrez peut-être zoom-in cependant. Souligner est quelque chose que nous voulons supprimer. Aussi par défaut, les couleurs ne sont pas très attrayantes. Commençons par supprimer son soulignement des liens. Nous pouvons le faire si nous passons à notre CSS. Ensuite, juste sous les éléments de la liste, ajoutons la balise A. Pour supprimer cela, nous pouvons définir la décoration de texte pour être une valeur de non. Ensuite, jusqu'au navigateur, cela devrait maintenant supprimer les liens par défaut de la section d'en-tête et aussi des titres aussi. Cela prend soin du soulignement, mais nous avons encore besoin de changer la couleur du texte des liens aussi, à la fois de ces produits et aussi la section d'en-tête et de pied de page en bas. Nous pourrions le faire en ajoutant des classes individuelles à chaque élément et certainement des propriétés de couleur CSS individuelles. Ou on peut aller de l'avant et faire quelque chose d'un peu plus simple. abord, je vais passer à la section proto et définir la couleur du texte par défaut avec la propriété de couleur en définissant une valeur RVB de 49 pour le rouge, le vert 46 et 46 pour le bleu aussi. Donnez une sauvegarde et si nous allons au navigateur et rafraîchissons, nous voyons maintenant une couleur grise légèrement plus claire. Retour aux liens. Si nous passons à la section A, plutôt que de définir une valeur telle qu'une couleur RVB ou hexadécimale, je vais aller de l'avant et définir la couleur à hériter et nous donner sauver. Le mot-clé inherit spécifie une propriété doit hériter de sa valeur de l'élément parent. Les liens produits hériteront de cette couleur pour la section corps et les liens d'en-tête et de pied de page hériteront également de la valeur de couleur de la section ici. Voyons à quoi cela ressemble dans le navigateur. Bien. Maintenant, nous avons les liens d'en-tête, la couleur blanche. Nous pouvons voir que les produits ont cette couleur gris plus foncé qui correspond au corps, puis vers le bas, nous avons les liens blancs pour la zone de pied de page aussi. Nous pouvons voir exactement ce qui se passe si nous allons à l'intérieur des outils div. Cliquez avec le bouton droit et inspectez. Commençons par sélectionner l'un de nos produits. Sur le côté droit, et nous commençons à faire défiler vers le bas. Nous pouvons voir que nous avons hérité de sa section corps, et nous avons hérité de la famille de polices et aussi de cette couleur grise que nous avons ajoutée. Cliquez sur les sélectionnés plus et je monte aux liens d'en-tête. Ici, nous pouvons voir que nous avons hérité de l'en-tête cette couleur de blanc. Nous pouvons activer et désactiver cela et voir l'effet que cela a. Fermez les outils div et maintenant avec ces liens pris en charge, je veux maintenant passer à ce qu'on appelle des pseudo-classes. pseudo-classes sont comme une extension d'un sélecteur CSS. Par exemple, nous pouvons toujours sélectionner des liens avec ce sélecteur A, ce que nous avons déjà fait ici. Eh bien, par exemple, seulement quand une souris survole ou s'ils ont déjà été visités. Ou nous pourrions sélectionner un élément de liste avec li, comme nous l'avons fait ici. Mais sélectionnez seulement le troisième élément d'une liste. Il y a beaucoup de pseudo-classes disponibles, mais jetons un coup d'oeil à certaines des plus courantes, en commençant par survol. Si nous descendons à notre élément A pour nos liens et juste ci-dessous est une section, nous pouvons ajouter un nouvel élément A. Séparé par un deux-points, nous pouvons ajouter le nom de notre pseudo-classe. Pour ce cas, je vais utiliser le survol. Cela sélectionnera tous les éléments A lorsque la souris survolera. Nous pourrions faire certaines choses telles que définir une couleur et ajouter une valeur hexadécimale de 0e69e9. Bien sûr, cela peut être n'importe quelle couleur que vous choisissez. Essayons cela dans le navigateur. Maintenant, pour les rechargements et survolez l'un de nos liens, nous voyons maintenant cette couleur bleue qui sont valides. Aussi les fournitures, le produit aussi, et aussi la zone de pied de page aussi en bas. Si nous allons maintenant à notre protocole à l'intérieur de notre index.html, faisons défiler jusqu'à notre premier produit, qui est juste ici. Ici, nous avons deux ensembles d'éléments p. Un pour le prix, puis un pour la description juste après. Nous pouvons utiliser une pseudo-classe première de type pour sélectionner le premier dans ce groupe, qui sera notre prix. Retour au styles.css. Tout comme nous l'avons fait avec les liens, nous pouvons d'abord sélectionner nos éléments ajouter un deux-points, puis le nom de notre pseudo-classe, qui est le premier de type. Pour celui-ci, nous pouvons é