Attribut HTML Les attributs HTML sont des mots spéciaux qui fournissent des inf

Attribut HTML Les attributs HTML sont des mots spéciaux qui fournissent des informations supplémentaires sur les éléments ou les attributs sont le modificateur de l'élément HTML. Chaque élément ou balise peut avoir des attributs, qui définissent le comportement de cet élément. Les attributs doivent toujours être appliqués avec la balise de début. L'attribut doit toujours être appliqué avec son nom et sa paire de valeurs. Le nom et les valeurs des attributs sont sensibles à la casse, et il est recommandé par le W3C de les écrire uniquement en minuscules. Vous pouvez ajouter plusieurs attributs dans un élément HTML, mais vous devez laisser un espace entre deux attributs. Syntaxe <element attribute_name="value">contenu</element> Exemple 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. <h1> This is Style attribute</h1> 7. <p style="height: 50px; color: blue">It will add style property in element</p> 8. <p style="color: red">It will change the color of content</p> 9. </body> 10. </html> Explication de l'exemple ci-dessus : <p style="height: 50px; color: blue">Cela ajoutera une propriété de style dans l'élément</p> Dans la déclaration ci-dessus, nous avons utilisé des balises de paragraphe dans lesquelles nous avons appliqué l'attribut style. Cet attribut est utilisé pour appliquer la propriété CSS sur n'importe quel élément HTML. Il fournit une hauteur à l'élément de paragraphe de 50px et le transforme en bleu. <p style="color: red">Cela changera la couleur du contenu</p> Dans la déclaration ci-dessus, nous avons à nouveau utilisé l'attribut style dans la balise de paragraphe, qui devient sa couleur rouge. Remarque : Certains attributs couramment utilisés sont indiqués ci-dessous, et la liste complète et l'explication de tous les attributs sont fournies dans la liste des attributs HTML. L'attribut title en HTML Description : l'attribut title est utilisé comme info-bulle dans la plupart des navigateurs. Il affiche son texte lorsque l'utilisateur déplace le curseur sur un lien ou sur n'importe quel texte. Vous pouvez l'utiliser avec n'importe quel texte ou lien pour afficher la description de ce lien ou texte. Dans notre exemple, nous prenons ceci avec la balise de paragraphe et la balise de titre. Exemple Avec la balise <h1> : <h1 title="This is header tag">Exemple d'attribut de titre</h1> Testez-le maintenant Avec balise <p> : <p title="Ceci est une balise de paragraphe">Déplacez le curseur sur l'en-tête et le paragraphe, et vous verrez une description sous forme d'info-bulle</p> Testez-le maintenant Code: 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. 7. <h1 title="This is heading tag">Example of title attribute</h1> 8. <p title="This is paragraph tag">Move the cursor over the heading and paragra ph, and you will see a description as a tooltip</p> 9. 10. </body> 11. </html> L'attribut href en HTML Description : l'attribut href est l'attribut principal de la balise d'ancrage <a>. Cet attribut donne l'adresse du lien qui est spécifié dans ce lien. L'attribut href fournit le lien hypertexte, et s'il est vide, il restera dans la même page. Exemple Avec l'adresse du lien : <a href="https://www.javatpoint.com/html-anchor">Ceci est un lien</a> Testez-le maintenant Sans adresse de lien : <a href="">Ceci est un lien</a> L'attribut src L'attribut src est l'un des attributs importants et obligatoires de l'élément <img>. C'est la source de l'image qui doit être affichée sur le navigateur. Cet attribut peut contenir une image dans le même répertoire ou dans un autre répertoire. Le nom ou la source de l'image doit être correct, sinon le navigateur n'affichera pas l'image. Exemple <img src="whitepeacock.jpg" height="400" width="600"> Testez-le maintenant Remarque : L'exemple ci-dessus a également les attributs height et width, qui définissent la hauteur et la largeur de l'image sur la page Web. Production: Citations : guillemets simples ou guillemets doubles ? Dans ce chapitre, vous avez vu que nous avons utilisé des attributs avec des guillemets doubles, mais certaines personnes peuvent utiliser des guillemets simples en HTML. Ainsi, l'utilisation de guillemets simples avec un attribut HTML est également autorisée. Les deux déclarations suivantes sont tout à fait correctes. <a href="https://www.javatpoint.com">Un lien vers HTML.</a> <a href='https://www.javatpoint.com'>Un lien vers HTML.</a> Testez-le maintenant EN HTML5, vous pouvez également omettre l'utilisation de guillemets autour des valeurs d'attribut. <a href=https://www.javatpoint.com>Un lien vers HTML.</a> Testez-le maintenant Éléments HTML Un fichier HTML est composé d'éléments. Ces éléments sont responsables de la création de pages Web et définissent le contenu de cette page Web. Un élément HTML se compose généralement d'une balise de début <tag name>, d'une balise de fermeture </tag name> et d'un contenu inséré entre elles. Techniquement, un élément est une collection de balises de début, d'attributs, de balises de fin et de contenu entre eux. Remarque : Certains éléments n'ont pas de balise de fin ni de contenu, ces éléments sont appelés éléments vides ou éléments à fermeture automatique ou éléments vides. Tel que: <p> Bonjour tout le monde !!! </p> Exemple 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>WebPage</title> 5. </head> 6. <body> 7. <h1>This is my first web page</h1> 8. <h2> How it looks?</h2> 9. <p>It looks Nice!!!!!</p> 10. </body> 11. </html> Tout le contenu écrit entre les éléments du corps est visible sur la page Web. Élément vide : tous les éléments en HTML ne nécessitent pas de balise de début et de balise de fin, certains éléments n'ont pas de contenu et de balise de fin, ces éléments sont appelés éléments vides ou éléments vides. Ces éléments sont également appelés balises non appariées. Certains éléments Void sont <br> (représente un saut de ligne) , <hr> (représente une ligne horizontale), etc. Éléments HTML imbriqués : le HTML peut être imbriqué, ce qui signifie qu'un élément peut contenir un autre élément. Éléments HTML de niveau bloc et en ligne Pour l'affichage et le style par défaut en HTML, tous les éléments sont divisés en deux catégories : Élément de niveau bloc Élément en ligne Élément de niveau bloc : Ce sont les éléments qui structurent la partie principale de la page Web, en divisant une page en blocs cohérents. Un élément de niveau bloc commence toujours par une nouvelle ligne et prend toute la largeur de la page Web, de gauche à droite. Ces éléments peuvent contenir des éléments de niveau bloc ainsi que des éléments en ligne. Voici les éléments de niveau bloc en HTML. <adresse>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer >, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> et <video>. Remarque : Tous ces éléments sont décrits dans les chapitres suivants. Exemple: 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. <div style="background-color: lightblue">This is first div</div> 7. <div style="background-color: lightgreen">This is second div</div> 8. <p style="background-color: pink">This is a block level element</p> 9. </body> 10. </html> Dans l'exemple ci-dessus, nous avons utilisé balise, qui définit une section dans une page Web et prend toute la largeur de la page. Nous avons utilisé l'attribut style qui est utilisé pour styliser le contenu HTML, et la couleur d'arrière- plan montre qu'il s'agit d'un élément de niveau bloc. Éléments en ligne : Les éléments en ligne sont les éléments qui différencient la partie d'un texte donné et lui confèrent une fonction particulière. Ces éléments ne commencent pas par une nouvelle ligne et prennent la largeur requise. Les éléments Inline sont principalement utilisés avec d'autres éléments. <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i >, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>. 1. Exemple: <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a> 7. <span style="background-color: lightblue">this is inline element</span> 8. <p>This will take width of text only</p> 9. </body> 10. </html> Voici la liste des principaux éléments utilisés en HTML : Start tag Content End tag Description <h1> ...... <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page. <p> This is the paragraph </p> This element is used to display a content in form of paragraph. <div> This is div section </div> This element is used to provide a section in web page. <br> This element is used to provide a line break. ( void element) <hr> This element is used to provide a horizontal line. (void element) Formatage HTML Le formatage HTML est un processus de formatage du texte pour une meilleure apparence. HTML nous permet de formater du texte sans utiliser CSS. Il existe de nombreuses balises de formatage en HTML. Ces balises sont utilisées pour mettre du texte en gras, en italique ou souligné. Il existe près de 14 options disponibles pour l'affichage du texte en HTML et XHTML. En HTML, les balises de formatage sont divisées en deux catégories : Balise physique : ces balises sont utilisées pour donner l'apparence visuelle au texte. Balise logique : ces balises sont utilisées pour ajouter une valeur logique ou sémantique au texte. REMARQUE : Certaines balises physiques et logiques peuvent donner la même apparence visuelle, mais elles seront différentes en termes de sémantique. Ici, nous allons apprendre 14 balises de formatage uploads/s3/ html-partie3.pdf

  • 39
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager