1 HTML 1. Introduction HTML (HyperText Markup Language) est un langage de struc
1 HTML 1. Introduction HTML (HyperText Markup Language) est un langage de structuration de contenu basé sur le balisage de contenue. Langage interprété et non compilé fonctionnant généralement via des interpréteurs spéciaux appelés navigateurs. 2. Validateur W3C Le meilleur outil pour valider son code et s'assurer qu'il est correct est le validateur HTML du W3C. http://validator.w3.org est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. 3. Tests de portabilité Même pour un document validé, les navigateurs n’ont pas tous la même implémentation du moteur d’analyse et de rendu du document. Pour cela, il est indispensable avant de publier un site web, de le tester sur le plus possible de plates- formes et de navigateurs. Ceci peut être simplifié par des outils comme Oracle VM VirtualBox, qui permettent de faire tourner simultanément plusieurs systèmes d’exploitation sur un même ordinateur. 4. Afficher le code source HTML Cliquez avec le bouton droit sur une page HTML et sélectionnez : " code source de la page " (dans Mozilla) , "Afficher la source de la page" (dans Chrome) ou "Afficher la source" (dans Edge), etc. Cela ouvrira une fenêtre contenant le code source HTML de la page. Faites un clic droit sur un élément (ou une zone vide), et choisissez "Inspecter" ou "Inspecter l'élément" pour voir quels éléments sont constitués (vous verrez à la fois le HTML et le CSS). Vous pouvez également modifier le HTML ou le CSS à la volée dans le panneau Éléments ou Styles qui s'ouvre. 5. Les balises vides Un élément HTML est composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. Exemple : <br/> , <hr>, <img>. 6. Les éléments spéciaux En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. • Le doctype est une déclaration formelle, placée au tout début d'un document HTML. La <!DOCTYPE>déclaration pour HTML5 est: <!DOCTYPE html> • Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML. Les commentaires, en HTML, sont écrits avec du texte contenu entre <!-- et --> 7. en-têtes HTML Les en-têtes HTML sont définis avec les balises <h1>, <h2>,…, <h6>: Note : Les moteurs de recherche utilisent les en-têtes pour indexer la structure et le contenu de vos pages Web Chapitre : HTML 2 8. Les paragraphes HTML Les paragraphes HTML sont définis avec la balise <p>, un paragraphe commence toujours sur une nouvelle ligne et les navigateurs ajoutent automatiquement un espace blanc (une marge) avant et après un paragraphe. Le navigateur supprimera automatiquement tous les espaces et lignes supplémentaires lorsque la page est affichée. 9. Règles horizontales HTML La balise <hr> définit une coupure thématique dans une page HTML et est le plus souvent affichée sous forme de règle horizontale. 10. Sauts de ligne HTML La <br> balise définit un saut de ligne (si vous souhaitez une nouvelle ligne sans commencer un nouveau paragraphe.) 11. L'élément HTML <pre> La balise <pre> définit le texte préformaté, il est affiché dans une police de largeur fixe (généralement Courier), et il préserve à la fois les espaces et les sauts de ligne. 12. Les styles HTML L’attribut style à la syntaxe suivante: <Nombalise style="propriété :valeur ;"> Il est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc. 13. Les éléments de formatage HTML Les éléments de mise en forme ont été conçus pour afficher des types de texte spéciaux: <b> - définit le texte en gras, sans aucune importance supplémentaire. <strong> - définit le texte avec une forte importance. Le contenu à l'intérieur est généralement affiché en gras. <i> - définit le texte en italique. utilisée pour indiquer un terme technique, une phrase d'une autre langue, une pensée, un nom de navire, etc. <em> - définit le texte mis en valeur. Le contenu à l'intérieur est généralement affiché en italique. <mark> - définit le texte qui doit être marqué ou mis en évidence <small> - définit un texte plus petit. <del> - définit le texte qui a été supprimé d'un document. Les navigateurs barrent généralement le texte supprimé. <ins> - définit un texte qui a été inséré dans un document. Les navigateurs soulignent généralement le texte inséré <sub> - définit le texte en indice. Le texte en indice peut être utilisé pour les formules chimiques. <sup> - définit le texte en exposant. Le texte en exposant peut être utilisé pour les notes de bas de page. 14. Les citations en HTML La balise <blockquote> indique que le texte contenu dans l'élément est une citation longue. L’URL indiquant la source de la citation peut être donnée grâce à l'attribut cite La balise HTML <q> définit une courte citation. Chapitre : HTML 3 15. Les abréviations en HTML La balise <abbr> définit une abréviation ou un acronyme, comme "HTML", "CSS", "Mr.", "Dr. "etc. Le marquage des abréviations peut fournir des informations utiles aux navigateurs, aux systèmes de traduction et aux moteurs de recherche. Utilisez l'attribut global title pour afficher la description de l'abréviation (acronyme) lorsque vous passez la souris sur l'élément. 16. Les informations de contact en HTML • La balise <address> définit les informations de contact de l'auteur / propriétaire d'un document ou d'un article. • Les informations de contact peuvent être une adresse e-mail, une URL, une adresse physique, un numéro de téléphone, un identifiant de réseau social, etc. • Le texte de la balise <address> s'affiche généralement en italique et les navigateurs ajoutent toujours un saut de ligne avant et après l'élément <address>. 17. Les couleurs en HTML En HTML, une couleur peut être spécifiée en utilisant un nom de couleur: gris, Violet, MediumSeaGreen, DodgerBlue, etc. Note : HTML prend en charge 140 noms de couleurs standards. Les couleurs peuvent également être spécifiées à l'aide de valeurs RVB, de valeurs HEX, de valeurs HSL, de valeurs RGBA et de valeurs HSLA. 18. Les liens en HTML Les liens HTML sont définis avec la balise <a>, la destination du lien est spécifiée dans l'attribut href : <a href="https://www.google.com">This is a link</a> Par défaut, un lien apparaîtra dans tous les navigateurs comme ceci : Un lien non visité est souligné et bleu Un lien visité est souligné et violet Un lien actif est souligné et rouge Note : Un lien ne doit pas nécessairement être du texte. Un lien peut être une image ou tout autre élément HTML! Pour utiliser une image comme lien, placez simplement la balise <img> à l'intérieur de la balise <a>. 19. URL absolues et URL relatives URL absolue : une adresse Web complète dans l'attribut href. URL relative : un lien vers une page du même site Web dans l'attribut href. (une @ sans la partie "https: // www") Les liens HTML peuvent être utilisés pour créer des signets afin que les lecteurs puissent accéder à des parties spécifiques d'une page Web. Les signets peuvent être utiles si une page Web est très longue. • Tout d'abord utilisez l'attribut id pour créer un signet: <h2 id="C4">Chapitre 4</h2> • Ensuite, ajoutez un lien vers le signet ("Aller au chapitre 4"), depuis la même page: <a href="#C4"> Aller au chapitre 4 </a> Vous pouvez également ajouter un lien vers un signet sur une autre page (avant de mettre l’id de l’élément, on met l’adresse de la page) : <a href="html_demo.html#C4"> Aller au chapitre 4 </a> Chapitre : HTML 4 20. Les attributs HTML Tous les éléments HTML peuvent avoir des attributs qui fournissent des informations supplémentaires sur ces éléments. Les attributs sont toujours spécifiés dans la balise de début. Note : Les guillemets doubles autour des valeurs d'attribut sont les plus courants en HTML, mais des guillemets simples peuvent également être utilisés. Dans certaines situations, lorsque la valeur d'attribut elle-même contient des guillemets doubles, il est nécessaire d'utiliser des guillemets simples. 21. Les attributs globaux en HTML Les attributs globaux sont des attributs qui peuvent être utilisés avec tous les éléments HTML: Accesskey L’attribut Accesskey spécifie une touche de raccourci pour activer / focaliser un élément, la valeur doit être un seul caractère (une lettre ou un chiffre). Class L’attribut Class spécifie un ou plusieurs noms de classe pour un élément HTML. Il est utilisé principalement pour pointer vers une classe dans une feuille de style. Cependant, il peut également être utilisé par un JavaScript pour apporter des modifications aux éléments HTML avec une classe spécifiée. Note: Pour spécifier plusieurs classes (combiner plusieurs classes CSS pour un élément HTML), séparez les noms de classe par un espace. Exemple : <span class = "left important">. • Le nom de classe doit commencer par une lettre A-Z ou a-z et peut être suivi de: lettres (A-Za-z), chiffres (0-9), tirets ("-") et traits de soulignement ("_") • Le nom de la classe est sensible à la casse. • Différents éléments HTML peuvent pointer vers le même nom de classe. Id uploads/s3/ html 1 .pdf
Documents similaires
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/IHuCy0OMpLS895ET7kTfb4yJCBdJQEDSwctNaPlQwvBqJ4JIuj7KAC2fmVX7Zb60AuM5sfw8gS06K10HA6YqEuFk.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/dSdwPUkp9qVFgPGWs2aZq49LZHtZy2nxYq7bnwE4zW4PHGLgSl69KxeQHzfrYA4bPly0Lec5tAuzGUEgPRIMRz4q.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/YQ6ADU1GIus4A05FByNvJ0kABpIJlquFPf1EaaSsWXhvm9hYxTit2s73hokRaVy58HWeusktoOinTSQx1sb2JeY3.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/ZAQwCmkyeYNksi8xcd6dZmxflkG9konq3IMIQWbP2e2MZlXcqimNrYo5u8j6S7b3WXoufQXBQVeRzpMPRW7mD3tY.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/VfXhrujVtuxaUcJ5c9lkL4HVN5mPHHdwMVbf1ynhDewKqqgktUNlIBq5JIPFtyKjxO0EoEA3z5rkGPM3HuNAz8me.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/9hD1liWUlMULJ35hEvzlzHRgsxbE6msFc8WLl56KPVtAyRJbFT7x5aDg51ECS5iSt5VPBhyQW8ecBtPpwQC6c5Dh.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/6Apqi3GCoI39WiowZTUw4POrkEOpgNrOyFyGvocYYxL25ySz9N6SCZ5HBGaNudztfszHey0ldCdylmdv7VDUINVM.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/oPNCXbMb15WliPwdqFjyerkhRLj24WbMvGp6kpAsR02ETBkNQAQtluPinjTJXwL3lCHGYLV0X5K9mKXhjDWcYUnl.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/IhzJ6HpvFzyMBqT3Ofs6SAHsY8smWpczmjE7NSU61slc9vvvAeFjUw7ZZtMUGbrTgV3AJ7oMqqJaKpDKUFuJKkkr.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/N90gAmxOlUdtMNt3xkB7A0vsjVIPCV34FrrhOJowZClLLwVsx7YHD9jSGGVUMaenMwJgYRlf0uqjeXiu9nVixGEe.png)
-
21
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Mar 13, 2022
- Catégorie Creative Arts / Ar...
- Langue French
- Taille du fichier 1.2440MB