HTML : Un cours d'accident (A Crash cours) for Beginners

1. Intro HTML: Bonjour, bienvenue dans ce cours sur HTML. Apprendre. Html est l'étape idéale pour commencer à apprendre à créer des sites Web. Une fois que vous pouvez utiliser le HTML, les opportunités sont infinies. En suivant ce cours, vous allez créer une page Web de base. À travers des exemples. Nous allons commencer par comprendre ce qu'est le HTML et nous examinerons comment configurer un document HTML. Passera ensuite à des sujets tels que l'utilisation de texte, images, de listes et d' introduction de styles de base. Nous terminerons le cours en examinant les tables et les formulaires. Ce cours s' adresse aux débutants. Ainsi, même si vous n'avez jamais programmé auparavant, ce cours vous aidera dans votre parcours d'apprentissage. m'appelle Emma et je travaille aujourd'hui comme programmeur dans l'industrie. J'adore la programmation et j'adore comment puis-je apprendre ? J'espère que ce cours vous a plu. 2. Qu'est-ce que le HTML ?: Qu'est-ce que le HTML ? Chaque fois que vous visitez un site Web, vous êtes exposé au HTML, introduit en 1993 par Tim Berners-Lee. Html signifie Hypertext Markup Language. Qu'est-ce qui est utile au HTML ? Eh bien, le HTML est le squelette de toutes les pages Web et il est utilisé pour structurer la page et afficher le contenu à l'aide du HTML, nous pouvons ajouter et formater du texte, afficher des liens, des listes, tableaux et des formulaires, et nous pouvons inclure images et vidéos sur la page Web. Le monde a beaucoup changé depuis 1993, et la technologie a beaucoup évolué aujourd'hui. La version actuelle est HTML5. Le World Wide Web Consortium a géré les normes HTML et décide de ce qu'il contient. Dans votre navigateur, vous pouvez inspecter le code HTML de n'importe quel site Web que vous visitez. Vous pouvez utiliser n'importe quel navigateur, mais nous allons essayer cela avec Chrome. Allons y aller. Nous allons visiter google.com. Il suffit de cliquer avec le bouton droit de la souris et de choisir l'onglet Inspecter indiquant que les éléments apparaissent et nous pouvons voir le code HTML de la page. J'ai dit que le HTML signifie langage de balisage hypertexte. Qu'est-ce que cela signifie ? Eh bien, l'hypertexte décrit le texte qui permet d'accéder à une autre page. Il le fait par notre lien, connu sous le nom de lien hypertexte. Si je visite un site Web qui affiche les prévisions météorologiques et que j'inspecte la page, le pays ici est un exemple de lien hypertexte. Et je peux le confirmer lorsque je vois les éléments. Lorsque je clique sur le bouton, j'accède à une nouvelle page. Un langage de balisage est un langage informatique qui décrit comment le texte est affiché, tout comme lorsque vous avez souligné ou mis en surbrillance certains textes, peut-être dans un manuel ou dans un document. Un langage de balisage est un langage informatique qui spécifie la structure et la présentation. Nous enveloppons le texte que nous voulons que le navigateur affiche dans des éléments et balises afin que le navigateur sache comment l'afficher correctement. 3. L'anatomie d'une étiquette: Dans cette vidéo, nous allons introduire les balises HTML et l' anatomie de l'attaque. Combiner plusieurs éléments est ce qui constitue la structure globale d'une page Web en HTML, les éléments eux-mêmes sont généralement constitués d'une balise d'ouverture et de fermeture, que l'on peut considérer comme des enveloppes ou conteneurs. Il existe plusieurs types de balises, la structure la plus suivie d'un morceau de texte commençant par une balise d'ouverture et se terminant par une balise de fermeture. Commençons par regarder l'étiquette d'ouverture. Le caractère placé à l'intérieur des crochets est le type de la balise. Pour un paragraphe, nous allons placer la lettre P. La balise de fermeture est exactement la même, sauf que nous utilisons une barre oblique avant après le premier crochet. Les attributs nous permettent d' ajouter plus d' informations sur l'élément. Nous plaçons l'attribut à l'intérieur de la balise d'ouverture. Pour ce faire, nous utilisons un nom et une valeur reliés entre eux par un signe égal. Le nom est le type de l'attribut et la valeur correspond à la valeur que vous souhaitez être affectée. Pour les meilleures pratiques, le nom de l'attribut doit être en minuscules et entre guillemets doubles. Dans la dernière vidéo, j'ai mentionné comment HTML avait beaucoup évolué depuis sa création. L'un des aspects de cela est la façon dont les noms de balises pour formatage ont commencé à s'orienter vers ce que nous appelons la sémantique. En d'autres termes, le sens passé, le texte en gras serait appelé gras et italique en italique. Bien que nous puissions encore les utiliser, ces jours-ci deviennent de plus en plus fréquents pour utiliser des mots tels que fort et souligné à la place. 4. Finalisation du document: Nous avons maintenant un peu compris ce qu'est le HTML. Nous pouvons commencer à envisager la configuration de notre document. Pour configurer un document HTML, certains éléments sont nécessaires. Nous commençons par la déclaration de type de document, qui doit être la première ligne du code dans le document HTML. Il s'agit d'une marque d'explication DOCTYPE HTML. Cela permet au navigateur de savoir que nous utilisons du code HTML. Le comportement actuel de l'utilisation du HTML ici est que le navigateur supposera que nous utilisons HTML5 car il s'agit de la version standard actuelle. Lorsque vous enregistrez le fichier, vous devez l'enregistrer, en terminant par un code HTML à points. Nous appellerons notre index de fichiers HTML. Après la déclaration DOCTYPE, nous pouvons ajouter des balises HTML d'ouverture et de fermeture. Tout ce qui se situe entre ces balises HTML sera lu ou interprété comme du code HTML par le navigateur. Ensuite, nous utilisons l'étiquette de tête ou l'élément. Cela contiendra des métadonnées, qui sont des informations sur la page Web du navigateur, et elles ne sont pas affichées sur la page elle-même. À l'intérieur de la tête, nous pouvons indiquer au navigateur où trouver d'autres fichiers, comme pour le CSS et le JavaScript. Un autre exemple est la balise titre. La balise de titre est importante pour les lecteurs d'écran et les moteurs de recherche en fonction du navigateur Elle sera affichée dans la barre d'onglets. Nous devons définir ici un titre non vide. Ensuite, nous allons ajouter l'étiquette de corps. Seuls les éléments à l'intérieur des balises de corps seront affichés à l'écran. 5. Hiérarchie et mise en forme: Bienvenue de retour. Donc, avant d'aller plus loin, je vais brièvement discuter hiérarchie et de la mise en forme. Il est important de comprendre la structure ou la hiérarchie du HTML. Parce que lorsque vous travaillez avec plus de HTML et de CSS, ces éléments peuvent hériter comportements ou de styles les uns des autres. Nous pouvons penser au HTML comme nous le faisons lorsque nous regardons un arbre généalogique. Nous avons donc des parents, des enfants, des frères et sœurs, des grands-parents, etc. Lorsque nous imbriquons un élément à l'intérieur d'un autre élément , nous appelons l'élément à l'intérieur de l'enfant et l'élément extérieur les parents. Deux éléments, lorsqu'ils sont imbriqués à l'intérieur du parent, ils peuvent être appelés frères et sœurs. En ce qui concerne le formatage, HTML ignore généralement les espaces blancs, mais il est bon de se lancer dans les pratiques de formatage afin de s'assurer que le document est lisible, il est préférable de placer de nouvelles balises sur un nouvelle ligne. Et tout ce qui se trouve à l'intérieur de la balise doit être mis en retrait par un niveau. s'agit donc généralement de deux espaces. Il est bon de s'assurer que votre éditeur de texte est correctement configuré pour utiliser espaces au lieu des espaces de tabulation authentiques, les quatre espaces ne sont pas rares à voir, mais cela peut rendre le contenu un peu plus difficile à travailler car il peut commencer à tomber de l'écran. 6. Les: Nous avons maintenant la configuration de nos documents. Nous pouvons passer à l' ajout de certains éléments. Lorsque vous lisez un document, le titre du document est généralement plus grand que le reste du texte de cette page. C'est très courant dans les publications imprimées telles que les magazines. Les en-têtes en HTML fonctionnent de la même manière. En HTML, il existe six types d'en-têtes différents, et nous les appelons en-têtes. H1 est le plus grand et ils deviennent progressivement plus petits à mesure que vous descendez jusqu'à H6, un bon moyen de se souvenir des rubriques est le H1 sera le titre principal. sous-titre serait H2 vaut également la peine de savoir que la taille par défaut dans laquelle le navigateur affichera l'en-tête varie légèrement en fonction du navigateur, mais cela peut être géré à l'aide de CSS dans notre document. Allons de l'avant et ajoutons un tag H1 avec le texte, nos sports. Nous utilisons le crochet d'ouverture H1, puis fermons le support et nous ajouterons le crochet de fermeture, qui est la barre oblique avant H1 et le crochet entre les deux, nous ajouterons le texte sports. Ensuite, nous ajouterons un tag H2 avec le message des athlètes célèbres. Enfin, nous ajouterons des balises a3 h3. Donnez-leur les textes, natation, la course à pied et la gymnastique. Enregistrons cela et exécutons le code dans notre navigateur. Dans notre navigateur, nous sélectionnons Ouvrir le fichier, puis nous ouvrons le fichier HTML. Nous pouvons maintenant voir la page que nous avons commencé à créer. 7. Paragraphes: Dans cette vidéo, nous allons examiner la création de paragraphes. Pour créer un paragraphe, vous placez le texte dans des balises contenant P. Le comportement par défaut de plusieurs paragraphes est que le paragraphe sera placé sur une nouvelle ligne avec un espace supplémentaire entre les deux. n'y a aucune limite quant à la longueur ou à la courte durée du texte à l'intérieur des balises p. Ajoutons trois balises de paragraphe, une sous chacun des en-têtes H3 que nous avons créés dans la dernière vidéo. Dans le premier, on dira qu'un célèbre nageur est pensé en. Dans la seconde, on dira qu' un coureur célèbre est Usain Bolt. Et dans la troisième, on dira qu'une gymnaste célèbre est Simone Biles. Enregistrons cela et réexécutons la page. Nous pouvons simplement recharger l' écran dans le navigateur. Nous pouvons maintenant voir que les trois paragraphes ont été ajoutés à l'écran. Avant de passer à autre chose, récapitulons ce que nous venons d'apprendre. Nous pouvons créer des en-têtes à l'aide d'en-têtes, qui peuvent aller de H1 à H6. Nous pouvons également placer du texte à l'intérieur des balises de paragraphe, qui utilisaient la lettre P à l'intérieur de la balise. 8. Éléments intégrés et de blocage: En HTML, chaque élément est affiché sous la forme d'un bloc ou d'un élément en ligne. Si vous imaginez que vous vous rendez au supermarché plutôt qu'à l'île, le supermarché occupe généralement tout l'espace du sol et serait donc l'élément de bloc. D'autre part, lorsqu'un article est placé sur une étagère dans un supermarché, il s'adapte à côté des autres articles, n'occupant que autant de place qu'il en a besoin. C'est donc comme un élément en ligne. Lorsque nous créons un élément en HTML, l'élément se répare sur une nouvelle ligne ou s'affiche dans certains contenus. Lorsque nous créons un titre, nous voulons que le titre se démarque et qu'il soit une entité seule, et qu'il apparaisse sur une nouvelle ligne. Il s'agirait donc d'un élément de bloc. Lorsque nous renforçons la technologie, nous ne voulons pas interrompre le flux du contenu autour du texte fort et il n'apparaît pas sur une nouvelle ligne. Il s'agit donc d'un élément en ligne. balises d'en-tête, les listes et éléments de paragraphe sont autant d' exemples d'éléments de bloc. Les éléments de blocs prennent toute la largeur disponible. D'autre part, les éléments en ligne ne commencent pas sur une nouvelle ligne et le flux du contenu autour l'élément ne change pas fort et les balises am sont un exemple d' éléments en ligne comme les images. Les éléments en ligne ne prennent que la largeur nécessaire. 9. Les attributs: Bienvenue de retour. Dans cette vidéo, nous allons examiner les attributs. Que sont les attributs ? Attributs, ajoutons des informations supplémentaires à un élément. Nous ajoutons l'attribut à la balise d'ouverture. Les attributs courants que nous pouvons utiliser incluent le titre, identifiant, la classe et le style. Bien qu'il en existe d'autres, l'utilisation principale d'un attribut ou pour appliquer un style ou des informations, telles que des informations relatives à la langue. Un attribut comporte deux parties , le nom et la valeur. Ils sont séparés par un signe égal et la valeur est placée entre guillemets doubles. Le nom est le nom de l'attribut et doit être en minuscules. La valeur est la valeur que nous voulons définir pour l'attribut. Et cela devrait être enroulé entre guillemets doubles. Nous allons utiliser les attributs id et les ajouter aux décès que nous avons créés dans la dernière vidéo. La première div utilisera l'en-tête de valeur. La deuxième div utilisera le contenu de la valeur. 10. Divs et portées: En HTML, div est l' abréviation de division. Il s'agit d'un conteneur qui divise la page en sections. En utilisant une div, vous pouvez regrouper les éléments de votre code HTML ensemble. Lorsque vous utilisez une div, l'utilisateur ne voit aucune différence sur la page, mais elle est très utile lorsque vous souhaitez ajouter des styles à des groupes d'éléments ultérieurement à l'aide d'une div, vous pouvez appliquer les styles à la En une seule fois, vous pouvez envelopper n'importe quoi à l'intérieur d'une div, mais il est recommandé de ne pas oublier de mettre en retrait les éléments que vous nidifiez dans la journée pour une meilleure lisibilité. Dans la dernière vidéo, j'ai mentionné des éléments en ligne et des blocs. Une div est un élément bloc, sorte que le contenu à l'intérieur de la div sera placé sur une nouvelle ligne. Vous pouvez envelopper un groupe de paragraphes à l'intérieur d'une div. Et la même approche pourrait être appliquée aux images ou aux en-têtes en HTML, nous pouvons également utiliser span. Une plage est généralement appliquée à certains contenus en ligne et est elle-même un élément en ligne. Il n'apparaîtra donc pas sur une nouvelle ligne et il prendra autant d'espace que le contenu. Vous pouvez appliquer deux petits morceaux de texte ou d' images pour lesquels vous ne souhaitez pas diviser le contenu environnant. Si vous souhaitez uniquement cibler un contenu spécifique sur la même ligne que d'autres textes, il est préférable d' utiliser une plage lorsque vous souhaitez diviser votre contenu en blocs, alors il est préférable d'utiliser une div . Nous allons ajouter de la profondeur à notre page. Nous allons envelopper les étiquettes H1 et H2 à l'intérieur d'une div. Nous envelopperons ensuite toutes les balises H3 à l'intérieur d'une autre div. Enregistrons cela et rechargeons la page. Visuellement, rien n'a changé, mais si nous voulons appliquer certains styles à certains groupes d' éléments ultérieurement, nous pouvons maintenant le faire beaucoup plus facilement. Donc, pour résumer, en HTML, nous avons des éléments en bloc et en ligne. Les éléments de bloc apparaissent sur une nouvelle ligne, tandis que les éléments en ligne apparaissent dans le contenu. Nous pouvons utiliser des trempettes et des travées, qui sont très utiles lorsque nous voulons appliquer un peu de style. div sont des éléments de blocs et les travées sont des éléments en ligne. 11. Fort: Bienvenue de retour. J'ai mentionné plus tôt que le texte fort et souligné était utilisé pour des textes gras et italiques. Dans cette vidéo, nous allons créer les noms de nos célèbres athlètes sur notre page pour utiliser des étiquettes fortes. Pour ce faire, nous imbriquerons les balises et placerons les balises fortes à l'intérieur des balises p autour du texte que nous voulons utiliser fort. Lorsque nous imbriquons les étiquettes, nous devons nous assurer de fermer les étiquettes dans l'ordre inverse de leur création. La dernière balise créée doit donc être la première balise à être fermée. Commençons donc par ajouter des balises fortes autour du texte qui indique E et Thorp. Nous allons également le faire dans le deuxième paragraphe autour du texte qui indique Usain Bolt. Enfin, nous allons le faire autour des textes qui disent Simone Biles. Enregistrons cela et nous allons recharger la page dans le navigateur. Nous pouvons maintenant constater que les noms de nos athlètes semblent plus audacieux que les autres textes des paragraphes. 12. Em: Bienvenue de retour. Dans la dernière vidéo, nous avons ajouté des balises fortes autour des noms des athlètes pour rendre le texte gras. Dans cette vidéo, nous allons regarder les balises EM, ce qui signifie que le texte est mis en valeur. En utilisant la balise EM, nous pouvons souligner ce qui signifie mettre le texte en italique. Ces balises fonctionnent de la même manière que les balises fortes. Nous les plaçons donc à l'intérieur des balises qui contiennent les textes que nous voulons mettre en italique. Nous allons faire cela pour les noms sportifs qui sont inclus dans les en-têtes h3. Nous commencerons par former à l'intérieur de l'étiquette h3. Nous ajoutons maintenant une balise EM. Nous fermons les balises dans l'ordre inverse dans lequel elles ont été créées. Donc, juste après la fin du mot natation, nous fermons l'étiquette EM. Nous le répéterons pour les deux autres sports, la course à pied et la gymnastique. Enregistrons cela et rechargeons la page dans notre navigateur. Maintenant, nous pouvons voir le texte de chaque tête natation, courir et la gymnastique apparaît soulignée. italique. 13. Soulignez: Bienvenue de retour. Lorsque nous travaillons avec HTML, un autre élément disponible lorsque nous travaillons avec du texte est l'élément sous-jacent. L'élément sous-jacent soulignera du texte. Pour utiliser l'élément sous-jacent, nous utilisons les balises avec la lettre U. Il y a quelques mises en garde avec cet élément à prendre en compte. Pour souligner certains textes en HTML, il est préférable d'appliquer un style en CSS via une propriété appelée décoration de texte, pour laquelle vous définissez la valeur sous-jacente l' élément HTML sous-jacent lui-même, destinée à être utilisée pour marquer. certains textes d'une manière ou d'une autre. Par exemple, s'il y a eu une erreur d'orthographe ou si vous utilisez des textes chinois, l'élément sous-jacent ne doit pas être utilisé uniquement pour des raisons d'affichage sans autre raison valable, telle que l'erreur d'orthographe. À des fins de démonstration uniquement, nous allons ajouter l'élément sous-jacent au mot nageur, coureur et gymnastes à l'intérieur de chacune des étiquettes p. Plus tard, nous revisiterons cela et l'implémenterons correctement en utilisant CSS dans notre code HTML. Dans le premier paragraphe autour du traumatisme, nous ajoutons la balise. Vous allez le fermer immédiatement après le mot. Nous allons répéter ces étapes pour les coureurs et les gymnastes. Enregistrons notre code HTML et rechargez-le dans le navigateur. Vous pouvez maintenant voir que le texte a été souligné, mais cela peut facilement être confondu avec un lien cliquable. 14. Liens: Bienvenue de retour. Dans cette vidéo, nous allons regarder des liens pour ajouter un lien vers une page Web, vous utilisez l'élément d'ancrage. Ceci est représenté par la lettre a. Entre les balises d'ouverture et de fermeture, nous avons placé le texte que l'utilisateur doit voir lorsqu'il appuie sur le lien à l'intérieur de la balise d'ouverture, nous utilisons un attribut pour définir où les liens doivent aller vers. Il peut s'agir d'un chemin d'accès ou d'une adresse vers un fichier sur votre ordinateur ou sur un serveur. Cependant, pour les liens, le chemin d'accès de l' attribut est généralement une URL. Le nom de l' attribut est H ref, et il s'agit d'une référence de lien hypertexte. Hyperlink est un terme technique désignant un lien. Nous pouvons également utiliser un attribut cible qui spécifiera l'endroit où les liens doivent s'ouvrir. Le comportement par défaut ne modifie pas cet attribut est qu' il s'ouvrira dans la fenêtre actuelle. Si vous modifiez la valeur en soulignant vide, elle s'ouvrira dans une nouvelle fenêtre ou un nouvel onglet de notre code HTML, nous allons ajouter trois liens, un à l'intérieur de chacun des sports, qui navigueront vers l'utilisateur vers une page Wikipédia sur ce sport. En commençant par le paragraphe sur la natation, nous utiliserons l'étiquette a pour créer des étiquettes d'ouverture et de fermeture. Nous allons ajouter le texte du lien. En savoir plus sur la natation. À l'intérieur de l'étiquette. Ajoute l'attribut H ref et ajoute le lien Wikipédia pour la natation. Ensuite, nous ferons de même pour courir. Nous ajoutons les balises A. Nous ajoutons le texte du lien, Apprenez-en plus sur l'exécution. Ensuite, nous ajouterons l'attribut H ref et ajouterons le lien Wikipédia pour l'exécution. Enfin, nous ferons la même chose sous le paragraphe sur la gymnastique. Nous ajoutons les balises a, puis le texte du lien. Apprenez-en plus sur la gymnastique. Nous ajoutons l'attribut H ref, puis le lien Wikipédia pour la gymnastique. Sauvegardons cela et nous allons recharger la page dans notre navigateur. Lorsque j'ai pris le lien, apprenez-en plus sur la natation. Je vais maintenant accéder au lien Wikipédia pour nager. Pour résumer ce que nous avons appris dans cette vidéo, nous ajoutons des liens à l'aide de l'élément d'ancrage, le lien que l'utilisateur voit est placé sous forme de texte entre les balises d'ouverture et de fermeture. Nous utilisons un attribut H ref pour définir l'emplacement du lien. Si vous souhaitez modifier le comportement de l'ouverture du lien, vous devez utiliser l'attribut cible. 15. Les images: Bienvenue de retour. Dans cette vidéo, nous allons examiner l' ajout d'images à notre page. Pour ajouter des images à la page, nous utilisons l'élément image. Il s'agit des lettres IMG à l'intérieur de la balise. Bien que la plupart des éléments en HTML nous obligent à utiliser des balises d'ouverture et de fermeture, la balise image est ce qu' on appelle une balise à fermeture automatique, ou parfois appelée « éléments Void ». C'est parce que nous l'implémentons à l'aide d'une seule balise. La raison en est qu'aucun contenu n' besoin d'être placé entre les balises d'ouverture et de fermeture. Vous pouvez voir des exemples qui utilisent une balise de fermeture distincte. Mais en HTML5, ce n' est pas une nécessité. Vous pouvez penser à ajouter des images, par exemple en ajoutant des liens, car nous ajoutons un attribut avec le chemin de l'image que nous voulons afficher. Mais la structure de l'étiquette elle-même est légèrement différente. Pour définir un chemin d'accès à l' image que nous voulons afficher, nous utilisons un attribut appelé source. Ceci est représenté par les lettres S, RC. Nous avons également défini un autre attribut appelé danse d'attribut pour un texte alternatif. Et il doit contenir une description de l'image au cas où elle ne parvient pas à se charger, il est également très important de définir l'attribut à des fins d'accessibilité. Par exemple, si une personne ayant déficience visuelle a visité notre page, alors en utilisant l' attribut ALT qui peut être lu une description de l'image par son lecteur d'écran à l'aide de l'attribut alt est également très utile lorsqu'il s'agit d'optimiser les moteurs de recherche, car les moteurs de recherche eux-mêmes ne peuvent pas voir les images lorsque vous ajoutez des images à votre page, vous pouvez utiliser un lien direct vers le image provenant d'ailleurs sur le Web. Et ça s'appellerait Hotlink King. Cependant, en général, ce n'est pas bonne pratique, car cela signifie que vous dépendrez maintenant d'un autre site Web et que l'image sera toujours là, soudainement, cela peut s'ouvrir beaucoup plus possibilités de survenue d'erreurs. Nous allons donc ajouter à notre page une image qui ira sous la rubrique « Nos sports ». Vous pouvez utiliser n'importe quelle image ici, mais je vais en utiliser une du site web pixabay. Dans le répertoire de votre fichier index.html, vous devez créer un nouveau dossier appelé images. Ensuite, vous devez télécharger l'image du site Web Pixabay sur votre ordinateur et la copier dans ce répertoire. Une fois que tout est fait, vous devriez pouvoir voir l'image dans votre éditeur de texte. Maintenant, lorsque nous utilisons l'image, car elle fait partie du même projet que le fichier index.html. Nous pouvons utiliser le chemin relatif, et cela sera automatiquement interprété avec le chemin complet dans le code HTML sous l'en-tête. Ajoutons maintenant l'image. Nous commençons donc par utiliser les lettres IMG à l'intérieur de la balise. Ensuite, ajoutons l'attribut source. Nous ajoutons donc les lettres SRC, suivies du signe égal. Et pour la valeur, nous plaçons le chemin de l'image. Maintenant, pour l'attribut textes alternatifs, ajoutons une valeur. On va dire un stade sportif. Parce qu'il s'agit d'une description de ce que représente l'image. Enregistrons maintenant ceci et rechargeons la page dans notre navigateur. Nous pouvons maintenant voir que l' image a été ajoutée à notre écran avec succès. 16. Listes: Bienvenue de retour. Dans cette vidéo, nous allons regarder les listes en HTML. Lorsque vous travaillez avec HTML, vous avez certaines options quant à la façon dont vous souhaitez afficher votre texte. Nous avons déjà vu comment utiliser l'élément de paragraphe, mais il se peut que vous ayez des textes que vous aimeriez afficher sous forme de liste en HTML, il existe deux types de listes. Nous pouvons utiliser des listes ordonnées et des listes non ordonnées. Les listes ordonnées sont représentées par une balise utilisant les lettres O, L, et les listes non ordonnées sont représentées par une balise utilisant les lettres UL. ces deux cas, les éléments de Dans ces deux cas, les éléments de la liste sont appelés éléments de liste, et ils sont représentés par une balise portant les lettres LI. Par défaut, le navigateur met en retrait les listes, les listes ordonnées. Les listes ordonnées affichent les éléments de la liste avec des chiffres. Par conséquent, si vous avez une liste qui représente des étapes ou des résultats ou élément qui doit être affiché dans une séquence, cela peut s'avérer très utile. D'autre part, les listes non ordonnées utilisent des puces pour afficher les éléments de la liste, et ils peuvent être coiffés via CSS. Les listes non ordonnées peuvent également être utiles pour la navigation sur le site. Une chose à garder à l'esprit lorsque vous créez une liste est que l'élément de liste ordonnée ou non ordonnée ressemble davantage à un conteneur pour la liste. Les textes contenant les éléments de liste doivent être encapsulés à l'intérieur de la balise d'élément de liste. Donc, sur notre page, nous allons ajouter une liste. Nous n'avons pas besoin d' utiliser une liste ordonnée pour cela car il n'y a rien à afficher dans un certain ordre. Mais nous allons d'abord implémenter cela à l'aide d'une liste ordonnée, puis réimplémentée à l'aide d'une liste non ordonnée. Commençons par ajouter l'élément de liste ordonnée. Nous créons donc des balises d'ouverture et de fermeture avec les lettres OL. Nous avons trois sports dont nous voulons que notre liste contienne la natation, la course à pied et la gymnastique. allons donc ajouter des éléments de liste pour chacun de ces éléments, nous utilisons les lettres LI à l'intérieur des balises pour les éléments de la liste. Sélectionnez, créez trois d'entre eux. Dans le premier élément de la liste, nous ajouterons le texte pour moi. Dans le second, en cours d'exécution. La troisième gymnastique. Enregistrons cela et rechargeons la page dans le navigateur. Nous pouvons maintenant voir notre liste et chaque élément de la liste comporte un numéro à côté, car nous utilisons une liste ordonnée. Modifions cela pour utiliser la liste non ordonnée, car nous n'avons pas besoin que les éléments de la liste soient dans un ordre quelconque dans les balises OL. Nous allons les modifier pour utiliser UL. C'est en fait tout ce que nous devons changer car les éléments de liste eux-mêmes sont identiques pour l'un ou l'autre des types de listes. Cette fois, nous pouvons revoir notre liste, mais les éléments de la liste utilisent puces car nous utilisons la liste non ordonnée. Récapitulons ce que nous venons d'apprendre. Nous pouvons créer des listes en HTML à l'aide de l' OL pour la liste ordonnée ou de l' UL pour la liste non ordonnée Nous représentons les éléments de la liste à l'aide de la balise LI. Les listes ordonnées sont utiles pour afficher des éléments dans une séquence et utiliser des nombres, des listes non ordonnées, utiliser des puces. 17. Styles: Bienvenue de retour. Dans cette vidéo, nous allons présenter l'utilisation de styles en HTML. Il s'agit d'un cours HTML, donc nous n'allons pas approfondir ce sujet, mais il est toujours extrêmement utile de connaître les bases. Lorsque nous voulons ajouter des styles à la page Web, nous devons utiliser CSS. Css signifie Cascading Style Sheets et est un langage de style. Il y a trois options disponibles pour utiliser CSS sur le pourcentage, nous pouvons utiliser CSS externe. CSS interne, CSS en ligne. CSS externe signifie que nous importons les styles à partir d'un autre fichier enregistré en externe. CSS interne signifie que les styles sont stockés dans l'élément de style dans le même fichier. CSS en ligne signifie que nous utilisons un attribut de style directement sur les éléments individuels auxquels nous voulons appliquer des styles. Si vous ne souhaitez appliquer que quelques styles, le CSS en ligne est correct, mais il est généralement plus propre de garder les styles isolés du code HTML. Si plus d'une personne travaille sur la page Web, c'est certainement quelque chose que vous devriez considérer. Et à long terme et la feuille de style externe est généralement une approche plus maintenable. Un autre avantage de ne pas utiliser styles en ligne est que vous pouvez créer une règle de style, mais l'appliquer à plusieurs éléments. Cela signifie moins de dactylographie et de duplication. Nous allons commencer par examiner les styles en ligne. Cela signifie que nous avons placé les styles directement dans éléments HTML à l'aide d' un attribut de style. Nous utilisons l'attribut style suivi d'un signe égal, puis des guillemets à l'intérieur des guillemets remplacé le ou les styles que nous voulons appliquer à l'élément. Lorsque vous déclarez les styles, vous utilisez le nom de la propriété, puis la valeur. Et vous les séparez par un deux-points. Si vous souhaitez utiliser plusieurs styles, vous placez un point-virgule à la fin de chaque vignette. Habituellement, cependant, il est bon de se lancer dans la pratique consistant à ajouter simplement le point-virgule après le style afin que nous puissions ajouter plus de styles plus tard sans risquer de créer d'erreurs. La première chose que nous allons faire sur notre page avec des styles est de supprimer l'élément sous-jacent d'utilisation incorrecte que nous avons implémenté dans une vidéo précédente. Comme nous voulons souligner le texte des fins d'affichage, uniquement. faire avec l'élément sous-jacent n' est pas la bonne façon d'y parvenir. Nous allons plutôt utiliser une propriété appelée décoration de texte. Cette propriété vous permet d'ajouter un peu de décoration au texte afin que vous puissiez placer une ligne à travers le texte au-dessus du texte, sous le texte et au-dessus du texte. Dans notre cas, nous voulons placer une ligne dans le texte pour que cette propriété soit soulignée. Allons de l'avant et mettons en œuvre cela. Nous allons commencer par changer l' élément sous-jacent pour qu'il s'agisse d'une envergure. Cela signifie que nous pouvons cibler le contenu en ligne sans appliquer de styles au contenu environnant. Ensuite, nous ajoutons l'attribut style, suivi d'un signe égal, puis de quelques guillemets. À l'intérieur des guillemets, nous ajoutons la propriété text-decoration, un deux-points, puis sous-jacent à la valeur. Nous ajoutons également un point-virgule. Répétons ces étapes pour les deux autres éléments soulignés. Enregistrons cela et rechargeons la page dans notre navigateur, nous voyons le texte sous-jacent. Mais cette fois-ci, nous l'avons implémenté correctement en utilisant des styles plutôt que l'élément sous-jacent. 18. Plus de styles: Bienvenue de retour. Maintenant que nous avons implémenté notre premier style, nous allons le refactionner pour utiliser une feuille de style interne, puis une feuille de style externe. Pour rappel, une feuille de style interne est l'endroit où nous utilisons l'élément de style dans notre document et remplacons tous les styles de notre document à l'intérieur cet élément à l'aide de sélecteurs de classes CSS. Les sélecteurs de classes Css nous fournissent un moyen d' étiqueter nos styles. Et nous plaçons un point avant ce que nous étiquetons le style, et après l'étiquette, nous plaçons un ensemble d'accolades bouclées. Les classes Css signifient également que nous sommes en mesure de donner à plusieurs éléments les mêmes styles. Vous n'avez donc pas à écrire les styles chaque fois que vous voulez les utiliser. Nous ajoutons ensuite l'attribut de classe à l'élément qui souhaite appliquer les styles. Et nous utilisons le nom de la classe comme valeur de l'attribut. Comme il s'agit d'un attribut, nous séparons le nom et la valeur par un signe égal et la valeur est placée entre guillemets. Revenons donc à notre code HTML et implémentons cela dans notre page. Déplacons le style en ligne que nous avons créé pour la décoration de texte dans une feuille de style interne. Par conséquent, dans notre page sous l'élément titre, nous allons ajouter l'élément style. Pour ce faire, nous utilisons des balises d'ouverture et de fermeture avec le style de texte. Maintenant, dans l'élément style, ajoutons le style que nous voulons utiliser dans une classe appelée texte sous-jacent. Nous utilisons un point suivi du nom du texte souligné, suivi d'accolades ouvrant et fermant des accolades. À l'intérieur des bretelles bouclées, nous ajoutons les styles. Donc, dans notre cas, nous voulons ajouter une décoration de texte soulignée. Nous devons maintenant ajouter une classe à l'élément. Supprime les styles en ligne. Et nous allons le remplacer par le nom de la classe. Nous disons que la classe est égale, puis nous utilisons des guillemets. À l'intérieur des guillemets, nous ajoutons le nom de la classe. Enregistrons cela et rechargeons la page et notre navigateur. La page est toujours la même que lorsque nous utilisons des styles en ligne. Maintenant, si nous voulions aller plus loin, nous pourrions extraire ces styles dans une feuille de style externe. Nous allons commencer par créer un nouveau répertoire pour stocker le fichier CSS. Dans le répertoire, vous allez créer un fichier appelé main.css. Déplacons maintenant les styles de l'élément style de notre fichier HTML vers notre fichier main.css. Nous pouvons ensuite supprimer les éléments de style du document HTML. Alors, comment importer ce fichier CSS dans notre fichier HTML ? Eh bien, en HTML, nous pouvons utiliser un élément appelé élément lien. L'élément de lien vous permet de déclarer la relation entre le fichier actuel et une autre ressource extérieure au fichier Nous utilisons un attribut appelé relation, est représenté. par la ligne de textes. Cela indiquera la relation entre le fichier actuel et le fichier que nous allons lier. Nous devons également utiliser un attribut H ref pour ajouter l'emplacement du fichier que nous allons lier. Le lien n'affiche rien directement, il suffit donc d'utiliser une seule balise à l'intérieur de la balise. Ajoutons l'attribut rail. Ensuite, nous allons définir cette feuille de style de texte car il s'agit de la relation. Ensuite, ajoutons l'attribut HREF , puis l'emplacement du fichier CSS. Dans notre cas, il s'agit d'une barre oblique CSS main.css car le fichier main.css est maintenant stocké dans le répertoire CSS. Nous allons maintenant enregistrer le fichier et le recharger dans notre navigateur. Encore une fois, rien n'a changé visuellement du point de vue de l' utilisateur, mais le CSS est maintenant importé à partir d'un fichier externe. 19. Autres styles: Bienvenue de retour. Nous sommes maintenant familiarisés avec les feuilles de style. Nous allons ajouter quelques styles supplémentaires à notre document. La première chose que nous allons faire est de faire en sorte toute la page utilise une couleur d'arrière-plan bleu clair. Et nous allons également centrer tout le texte. Nous allons donc ajouter une classe à la balise body appelée arrière-plan principal. Maintenant, dans le fichier CSS, ajoutons la classe. Ensuite, nous allons définir la couleur d' arrière-plan bleu clair et le centre d' alignement du texte. Ensuite, nous ferons de notre en-tête H1 un bleu marine, donc il se démarque un peu plus. Nous allons donc ajouter un coût à l'élément H1 appelé en-tête. Dans le fichier CSS, nous ajouterons la classe et nous définirons la couleur sur bleu marine. Ensuite, nous voulons nous assurer que notre image sera centrée. Nous allons donc ajouter une classe à l'élément image appelé image. Ensuite, nous ajouterons cela au fichier CSS. Dans le CSS, nous allons définir l'affichage pour bloquer la marge à gauche, automatique. Marge droite, largeur automatique jusqu'à 50 %. L'utilisation de la marge automatique moins le centre d'un élément bloc horizontalement. Ajoutons maintenant quelques styles supplémentaires à notre liste, afin qu'ils soient également centrés. Nous allons ajouter une classe appelée styles UL. Dans le fichier CSS. Nous allons ajouter ce cours. Je suis réglé sur bloc en ligne. Cela signifie que l'élément est traité comme un élément en ligne. n'y a donc pas de nouvelle ligne forcée, et elle prendra seulement autant de largeur que nécessaire, mais alignera également le texte vers la gauche pour qu'il apparaisse à côté des puces. Maintenant, sauvegardons notre fichier et rechargez-le. Le navigateur. La page a changé et tous les styles que nous venons d'appliquer sont affichés à l'écran. 20. Tableaux: Bienvenue de retour. Dans cette vidéo, nous allons examiner l'utilisation de tableaux en HTML. Parfois, lorsque vous travaillez avec du HTML, certaines données peuvent être affichées dans un tableau. Un exemple peut être le résultat de certains scores. Cela peut également être utile si vous aviez une page dans laquelle vous souhaitez afficher des détails financiers en HTML, les tableaux sont représentés par l'élément de table. Il s'agit d'ouvrir et de fermer les balises avec la table des taxes. Chaque ligne de la table est représentée par l'élément de ligne du tableau. Et ce sont les balises d'ouverture et de fermeture avec le texte T qui sont généralement lorsque vous créez un tableau sur la première ligne, vous utilisez des en-têtes pour les colonnes. Et nous pouvons le faire en HTML avec l'élément d'en-tête du tableau. Pour cela, nous utilisons les balises d'ouverture et de fermeture avec les lettres TH dans les en-têtes du tableau. Nous pouvons également définir un attribut scope, ce qui est très utile lorsque quelqu'un avec un lecteur d'écran visite le site. Dans cet attribut, nous définissons quand la valeur est une ligne ou une colonne. Avec tout cela, vous avez configuré une table, mais aucune donnée ne figure dans la table. Pour ajouter des données à la table, nous utilisons les éléments de données de la table. Il s'agit d'ouvrir et de fermer des balises avec les lettres t, d. Si vous avez besoin que les données de la table étendent sur plusieurs lignes ou colonnes, vous pouvez utiliser les attributs de plage de lignes ou de colspan. Et vous définissez un nombre pour la valeur qui indiquera nombre de lignes ou de colonnes, mais les données doivent s'étendre. Essayons donc d' implémenter une table dans notre fichier. Nous allons ajouter un tableau qui montrera le nombre total de médailles de chacun de nos athlètes lors des Jeux olympiques auxquels ils ont participé. Nous ajouterons un tableau avant les en-têtes h3 avec les sports. Commençons par ajouter l'élément de table. Nous ajoutons des balises d'ouverture et de fermeture au tableau des taxes. Notre tableau comportera deux colonnes, une pour le nom des athlètes et l'autre pour le nombre total de médailles. Cela étant, nous voulons ajouter deux en-têtes à notre table. Par conséquent, pour ajouter les en-têtes à notre table, nous devons d'abord ajouter une ligne pour contenir les en-têtes. Nous ajoutons les balises d'ouverture et de fermeture avec les lettres TR. À l'intérieur de ces balises, nous pouvons ajouter les en-têtes. Nous ajoutons donc l'élément d'en-tête de table à l'aide de balises portant les lettres TH. Nous allons en ajouter deux. Comme ces en-têtes des colonnes définissent l' attribut de portée avec une valeur appelée dans chacun des éléments. Dans le premier en-tête, nous ajouterons le texte athlète. Et dans le deuxième en-tête, nous ajouterons les médailles de texte. Avant d'aller plus loin, gardons cela et jetons un coup d'œil. Ce que nous avons fait jusqu'ici dans le navigateur. Ce que nous voyons, ce sont nos deux rubriques parce que nous n'avons pas ajouté de données, mais nous sommes sur le point de créer notre première table. Nous allons maintenant ajouter quelques données à notre table. Premièrement, la première rangée, nous allons ajouter nombre de médailles que je suis Thorpe. Nous commençons donc par créer une ligne. Ensuite, nous devons ajouter deux cellules de données, une pour le nom et l'autre pour le total de métaux. Pour ce faire, nous utilisons les éléments de données de la table. Nous créons donc des balises d'ouverture et de fermeture avec les lettres td. À l'intérieur du premier, nous ajouterons les informations textuelles. À l'intérieur du deuxième, nous ajouterons neuf au décompte des médailles. Nous devons maintenant répéter ces étapes pour les deux autres athlètes. Commençons par ajouter une autre ligne. Nous devons maintenant ajouter deux autres éléments de données de table. Dans le premier, nous ajouterons le texte Usain Bolt, puis le second ajoutera huit pour le nombre intermédiaire. Enfin, nous devons ajouter une dernière ligne de table et deux autres éléments de données de table. À l'intérieur du premier, nous ajouterons le texte Simone Biles, et dans le second, on ajoutera sept données de table. Enregistrons notre fichier et rechargeons le fichier dans le navigateur. Nous pouvons maintenant voir notre tableau avec toutes nos données. Il n'est cependant pas très aligné sur le reste de la page. Ajoutons donc quelques styles à l'intérieur de l'élément de tableau. Nous ajouterons un attribut de classe avec la table des athlètes de valeur. Maintenant, dans notre fichier CSS, ajoutons cette classe. Dans la classe, nous allons définir la largeur à 22,5 %. Margin-Gauche Auto, Margin-Droite Auto. Et donnons au tableau une couleur de fond de vert. Sauvegardons à nouveau tout et rechargeons la page. Cette fois, notre table est centrée et possède sa propre couleur d'arrière-plan. 21. Présentation de formulaires: Bienvenue de retour. Dans cette vidéo, nous allons introduire des formulaires en HTML dans notre vie quotidienne, nous remplissons souvent des formulaires lorsque nous devons partager des informations dans un but quelconque. assistons peut-être à un rendez-vous de santé ou peut-être que nous postulons pour un emploi. Mais parfois, nous utilisons simplement un formulaire pour sélectionner certains articles que nous voulons acheter. Habituellement, un formulaire est une sorte de document avec des espaces vierges que vous remplissez avec vos détails ou effectuez des sélections en HTML, les formulaires fonctionnent de la même manière que les formulaires papier. Nous pouvons utiliser l' élément de formulaire pour recueillir des informations auprès des personnes qui visitent notre page Web. Parfois, lorsque nous visitons une page Web qui utilise simplement un champ de saisie de texte tel que Google Search. En fait, nous utilisons un formulaire pour utiliser un formulaire en HTML, nous utilisons l'élément de formulaire, qui est le formulaire texte à l'intérieur de la taxe. Commençons par ajouter un formulaire à notre page. Nous allons le faire avant la balise de corps de fermeture. Nous utilisons la balise avec le formulaire de texte. Et puis nous le fermons. Nous pouvons ajouter du texte à l'intérieur du formulaire, comme nous le faisons sur le reste de la page avec des en-têtes ou des paragraphes Ajoutons un titre pour le formulaire à l'intérieur des balises H1. Nous appellerons cela des questions. Formulaire. Cela n'est pas très utile à moins que l'utilisateur ne puisse réellement saisir certaines données. Nous utilisons des champs de saisie dans notre formulaire à l'aide de l'élément d'entrée. À l'intérieur de l'élément d'entrée, nous pouvons définir un attribut de type qui définira la façon dont le champ de saisie s' affiche sur la page Web. Il définit également le type de données que l' utilisateur peut saisir. Par défaut, l' attribut type est défini sur texte afin que l'utilisateur puisse y saisir du texte. Nous pourrions changer ce mot de passe en mot de passe si nous voulions que l'utilisateur saisit un mot de passe ou un numéro caché Si nous voulions l'utiliser pour ajouter des chiffres, nous pouvons pré-remplir un champ de saisie de texte l' aide de l'attribut value. Nous devons également utiliser un attribut name. L'attribut name est associé à la valeur entrée dans l'entrée lorsque le formulaire est envoyé. Par exemple, si nous avions un champ de saisie nommé en premier et que l'utilisateur a saisi son nom, qui était Fred lors de l'envoi du formulaire, première serait égale à celle de notre page. Ajoutons une entrée à notre formulaire. Nous commençons par utiliser les balises avec l'élément d'entrée. Nous allons demander à notre utilisateur faire connaître ses sports préférés. Nous définissons donc le type texte, le nom comme question. Nous allons également définir une carte d'identité avec Favorite. Pour étiqueter une entrée, nous utilisons l'élément d'étiquette. Cela aide l'utilisateur à identifier ce qu'est l'entrée de l'élément d'étiquette utilise des balises d'ouverture et de fermeture, et le texte de l'étiquette est placé entre les balises afin que l'étiquette soit correctement appariée. la bonne entrée, nous devons définir un attribut id sur l'entrée, puis un attribut de paiement avec la même valeur est défini sur l'étiquette. Ajoutons une étiquette à l' entrée que nous venons d'ajouter. Nous utilisons donc des balises d'ouverture et de fermeture avec étiquette. Nous avons défini l'ID de l' entrée préférée. Et entre les étiquettes, nous disons, quel est votre sport préféré ? Si nous voulions présenter plusieurs options à nos utilisateurs et leur permettre de sélectionner un certain nombre d'options. Nous pourrions utiliser l'élément d'entrée et le définir sur la case à cocher type. Nous allons ajouter un ensemble de cases à cocher à notre formulaire pour demander à notre utilisateur de sélectionner ses athlètes préférés, commencer par utiliser l'élément de paragraphe avec le texte, sélectionner vos athlètes préférés. Ensuite, nous ajouterons trois cases à cocher, une pour chacun de nos athlètes. Nous commençons par utiliser l'élément d'étiquette et nous allons en définir deux. Thorpe ajoutera également le texte dans Thorpe. Ensuite, nous ajoutons l'entrée. Nous définissons id sur la même valeur que l'attribut for dans l'étiquette, qui est le nom de l'athlète, type, la case à cocher et la valeur Thorpe. Répétons ces étapes pour nos autres athlètes. Nous utilisons donc l'élément d'étiquette. Et cette fois, nous nous sommes assis sur deux bateaux. Ajoute également le texte Usain Bolt. Ensuite, nous ajoutons l'entrée. Nous avons dit id à la même valeur que l'attribut for dans l' étiquette, qui est bateau. Déplace ce nom en athlète, type, case à cocher et valeur pour voter. Enfin, nous le referons pour Simone Biles. Nous utilisons donc l'élément d'étiquette et nous nous sommes assis pendant deux biles. Ajoutera également les textes Simone Biles. Ensuite, nous ajoutons l'entrée. Nous définissons donc l'ID sur la même valeur que l'attribut for dans l' étiquette, qui est Bibles. Ensuite, nous définissons le nom de l'athlète, type, la boîte de discussion et la valeur pour acheter une maison. Ajoutons également un saut de ligne entre chacune des cases à cocher afin que chaque case à cocher apparaisse sur une nouvelle ligne. Pour ce faire, nous allons utiliser l'élément de saut de ligne, qui est les lettres BR à l'intérieur de la balise. Nous ne devons utiliser qu'une seule balise pour les sauts de ligne. Maintenant, sauvegardons cela et rechargeons la page et notre navigateur ou notre formulaire commence à prendre forme. Mais modifions brièvement l'ordre de la première entrée et de la première étiquette pour que l'étiquette apparaisse avant le champ de saisie. Ainsi, dans notre code, l'étiquette de l'élément d'entrée sera placée . Nous sauvegarderons cela et rechargerons la page. Cette fois, nous voyons que l'étiquette apparaît avant le champ. 22. Boutons de formulaire: Bienvenue de retour. Dans la dernière vidéo, nous avons introduit des formulaires en HTML. À la fin de la vidéo, nous avons ajouté quelques cases à cocher à notre formulaire. C'est génial lorsque le nombre d'options choisit par l'utilisateur ne nous dérange pas , mais si nous voulons qu'il ne sélectionne qu'un seul élément , un bouton radio peut être plus approprié. Dans cette vidéo, nous allons ajouter un bouton radio à notre formulaire, qui demande à l'utilisateur s'il a aimé notre site Web et lui donne la possibilité de sélectionner oui ou non pour créer un bouton radio, nous utilisons les éléments d'entrée et d'étiquette, comme lorsque nous avons créé les cases à cocher. Cette fois-ci, nous avons défini l'attribut type de l'élément d'entrée sur radio. Revenons à notre page et mettons en œuvre cela. Nous allons donc commencer par ajouter du texte à l'intérieur des balises p pour demander à l'utilisateur s'il a aimé notre site Web. Ajoutons maintenant les deux boutons radio. Nous ajoutons donc l'élément d'entrée avec le type défini sur radio ou DTS. Nom à question et valeur. Oui. Maintenant, pour l'élément d'étiquette, nous créons l'étiquette à l'aide des balises d'étiquette. Et entre les balises, nous ajoutons le texte, oui. Nous allons également définir l'attribut for sur yes, car il s'agit de l'ID de l'élément d'entrée. Répétons ces étapes à nouveau, mais cette fois pour l'option no. Nous ajoutons donc l'élément d'entrée avec le type défini sur radio, Musette ID à connaître, nom, question et valeur à connaître. Maintenant, pour l'élément d'étiquette, nous créons l'étiquette à l'aide des balises d'étiquette. Et entre les balises, nous ajoutons les textes, non. Nous allons également définir l'attribut for pour qu'il sache qu'il s'agit de l'ID de l'élément d'entrée. Enregistrons cela et rechargeons nouveau la page et notre navigateur. Nous pouvons maintenant voir que nos boutons radio ont été ajoutés à la page afin que l'utilisateur puisse sélectionner oui ou non. 23. Soumettre le formulaire: Bienvenue de retour. En informatique, les ordinateurs envoient et reçoivent des informations à l'aide de requêtes HTTP. Si vous considérez Internet comme un réseau d'ordinateurs , le client, qui est généralement le navigateur, qui est généralement le navigateur, peut envoyer une demande à un serveur et, lorsque c'est le cas, il utilise le protocole HTTP. Il s'agit essentiellement d'un ensemble de règles ou de procédures d'envoi de données. Le serveur répondra ensuite d' une manière ou d'une autre en utilisant le même protocole HTTP. Lorsque nous avons utilisé un formulaire, l'utilisateur fournit des informations qui seront ensuite transmises au serveur à l'intérieur de la demande HTTP afin de pouvoir envoyer les données du formulaire à un serveur, nous devons obtenir les éléments et les attributs du formulaire pour savoir où les informations du formulaire doivent être envoyées et quel type de requêtes HTTP envoyer. Pour ce faire, nous utilisons l' attribut action pour indiquer à quel endroit les informations sont envoyées, puis un attribut de méthode pour le type de demande. Et cela peut être GET ou poster. Mais si vous utilisez des données sensibles, vous devriez utiliser post ici, nous allons définir l'action sur une URL factice sur notre formulaire, que nous appellerons HTML fictif, qui créera cette page. Maintenant. Nous allons le laisser vide car il s'agit uniquement d'un affichage. Nous utiliserons ensuite la méthode post. Pour envoyer le formulaire que nous avons perdu, nous devons ajouter un bouton de soumission à notre page. Pour ce faire, nous utilisons l'élément d'entrée avec l' attribut type à soumettre. Nous définissons ensuite la valeur sur les textes qui devraient apparaître sur le bouton. Si nous ne définissons pas cet attribut de valeur, il sera soumis par défaut. Donc, terminons notre formulaire en ajoutant le bouton Soumettre, ferons à la fin du formulaire. Nous utilisons donc l'élément d'entrée. Nous avons défini le type à soumettre. Nous allons également définir la valeur à compléter. Maintenant, sauvegardons cela et rechargeons la page dans le navigateur. Nous avons maintenant rempli notre formulaire en même temps que le reste de notre page. Remplissons maintenant la forme de certaines valeurs. Allons de l'avant et appuyez sur le bouton Soumettre. Nous accédons à la page HTML factice, qui était vide. Cependant, nous pouvons ouvrir les outils de développement dans notre navigateur. Dans Chrome, nous y accédons en sélectionnant console JavaScript View Developer. Nous allons ensuite dans l'onglet qui indique réseau. Revenons donc à notre page et soumettons à nouveau le formulaire. Nous pouvons maintenant inspecter la demande et voir les données du formulaire qui ont été envoyées. Si nous avions utilisé get comme méthode, les données du formulaire soumises seraient visibles dans l'URL du fichier à l'écran, c'est pourquoi cela n'est pas suggéré pour les données sensibles.