Il s’agit d’un langage codé permettant de développer et de créer la mise en page d’un contenu pour le Web. Le HTML est avant tout un code prédéfini qui garantit la mise en page : les couleurs, les images ou encore les polices. Une page HTML est une successions de données contenant des balises permettant de mettre en forme le texte, les images, etc…
Une balise, de son coté, est un élément de texte (un nom) encadré par le marqueur inférieur (<) et le marqueur supérieur (>). Les balises HTML fonctionnent par deux. La première est appelée « balise d’ouverture » (c’est celle qui ouvre le code) et la seconde « balise de fermeture ». La balise qui ferme le code est précédée d’un caractère - / -. Plusieurs balises HTML simples sont à disposition sur internet dans le cas où vous voudriez changer un point particulier de votre page ou de votre blog. De plus, les CMS comme WordPress permettent de changer une page sans avoir de notion en HTML mais en utilisant une feuille de style CSS. Cependant les balises HTML restent intéressantes dans le cas où vous voudriez créer une mise en page spécifique. L’usage de la balise HTML permet une liberté de création non négligeable.
Pour la plupart des petits changements comme par exemple mettre un texte en gras, en italique ou souligné, il existe des codes à connaitre. Balises HTMLLes balises constituent l'élément de base du langage HTML. Chaque balise a une signification que le navigateur connait et applique au contenu. C'est comme ça que la présentation du document est effectuée. Une balise est représentée par: le chevron ouvrant + le nom de la balise + le chevron fermant. Il existe deux types de balises: des balises ouvrantes et des balises fermantes. Elles vont souvent ensemble de telle sorte que la balise ouvrante applique un effet au contenu qui la suit et la balise fermante cesse l'effet en question.
La balise fermante se distingue par un slash (/) qui vient juste avant le nom de la balise. Néanmoins, il existe des balises ouvrantes qui n'ont pas de balises fermantes associées. On les appelle des balises auto fermantes ou des balises orphelines. Ce sont des balises qui s'ouvrent et se ferment au même moment et elles appliquent leur effet à l'endroit où elles sont déclarées (et pas au contenu qui les suit comme les balises qu'on a vu ci haut). Exemple: <br>. Il serait utile de mentionner que depuis l'apparition du standard XHTML, les noms des balises orphelines finissent par un espace suivi de slash. Exemple <br />. Mais au début de ce cours j'ai précisé que nous allons voir la syntaxe simple de HTML4 qui n'exige pas cette écriture pour ce genre de balises. Alors dans le reste de ce cours, nous écrirons les balises orphelines sans espace-slah. Cependant nous adopterons cette écriture quand nous arriverons au cours de HTML5.
Imbrication des balisesUn contenu peut subir l'effet de plusieurs balises à la fois. Si c'est le cas, alors une règle s'impose: En cas d'imbrication de plusieurs balises, la première balise ouverte est la dernière à fermer. <balise1><balise2><balise3>Contenu</balise3></balise2></balise1>
Les attributsLa plupart des balises HTML peuvent appliquer des effets différents selon les préférences du développeur. C'est comme si on peut les personnaliser à notre guise. Les attributs sont déclarés dans la balise ouvrante. Ils représentent des paramètres qui personnalisent la balise où ils sont définis et ils possèdent des valeurs. Une balise peut renfermer plusieurs attributs à la fois, chacun avec sa valeur. La balise ouvrante <font> applique la couleur rouge et la police Arial au contenu qui la suit qui n'est rien d'autre que le message "Bonjour à tous". Il ne doit pas y avoir d'espace entre le chevron d'ouverture et le nom de la balise Il doit impérativement y avoir un espace (ou plus) entre le nom de la balise et l'attribut Il doit impérativement y avoir un espace (ou plus) entre les attributs successifs La valeur de l'attribut doit être déclarée entre des guillemets (doubles quote ou simple quote).
(*) Pour vérifier la validité de votre code par W3C, vous pouvez le soumettre au validateur à l'adresse validator.w3.org. Mais sachez que la majorité des grands sites sur la toile (ou presque tous) n'ont pas le code valide et pourtant il est compatible avec tous le navigateurs populaires. La casse n'est pas vérifiée en HTML, c'est à dire que vous pouvez écrire vos balises et attributs en minuscule ou en majuscule. Bien que les développeurs ont tendance à les écrire en minuscule.
Lorsque l’on parle d’attributs, l’attributs peut se mettre sur toutes les balises. On les appelle les attributs globaux de l'HTML. Mais d'autres attributs sont spécifiques à une ou plusieurs balises. La plupart des attributs sont facultatifs, mais il existe aussi des attributs obligatoires sans lesquels certaines balises ne fonctionneront tout simplement pas. Vous savez déjà que pour apprendre l'HTML, il faut apprendre les balises, mais ce n'est pas tout. Pour apprendre l'HTML, il faut également apprendre les attributs et la manière dont il s'utilisent.
HTML est constitué principalement de balises. Mais ce n'est pas tout car il y a des séquences, autres que les balises, que le navigateur reconnait et remplace par leurs significations. Le code HTML des caractères spéciaux commence par le symbole "&" et fini par ";". HTML ne prend pas en compte la succession d'espaces blancs, seul le premier et considéré. N'oubliez pas que nous sommes entrain de voir HTML4 pour maîtriser la syntaxe de base. Les balises HTML permettent de construire un site Web de manière claire et d’y déposer les informations les plus importantes pour tous les navigateurs.
Si vous souhaitez apprendre le HTML ou écrire votre propre code HTML, les tags HTML sont probablement votre outil le plus important et le plus efficace. Les balises HTML sont utilisées pour transmettre des informations aux différents navigateurs. Les tags HTML ont en général toujours une balise de début et une balise de fin. Les balises HTML sont placées entre chevrons et entourent l’information souhaitée ; une barre oblique est ajoutée en plus à la balise de fin. L’ensemble formé par ces deux balises et le contenu s’appelle un élément HTML. Tous les éléments HTML ne sont pas composés d’une balise de début et d’une balise de fin. Les balises « auto-fermantes » (ou balises vides) sont des éléments HTML composés d’une seule balise, comme
pour un saut de ligne. Il existe de nombreuses balises HTML différentes et vous n’aurez probablement pas besoin de toutes. De plus, certains tags HTML ne sont plus utilisés depuis l’introduction de HTML 5 et plus tard de HTML 5.1.
Ci-dessous, vous trouverez les tags HTML les plus courants sous forme de tableau, classés par catégories. Toutes les balises présentées sont prises en charge dans la version actuelle, HTML 5.2, ainsi que dans HTML Living Standard. Dans cette commande HTML, on écrit le titre du document. Les titres sont créés à l’aide des différents tags h. Pour modifier la couleur de la police, il est préférable d’utiliser CSS. Vous pouvez également créer des tableaux et des listes dans un document HTML. Différents tags HTML vous permettent d’intégrer des images, des vidéos et des fichiers audios dans un document et de les mettre en forme. Si vous souhaitez intégrer un contenu multimédia, vous devez utiliser les attributs HTML src pour la source et alt pour le texte alternatif. Vous pouvez créer un formulaire sur un document HTML comme suit. L’attribut href est également utilisé dans le lien pour indiquer l’adresse cible. Il existe de nombreux autres tags HTML que vous pouvez utiliser dans un éditeur HTML et qui vous facilitent le travail.
Cours 6 - La mise en forme en HTML avec les balises et les styles CSS
Avec l’outil de création de sites Web de IONOS, vous concevez votre propre site Web exactement comme vous le souhaitez. Faisons maintenant un petit point grammatical et essayons de répondre à la question : finalement, qu'est-ce que c'est que d'étudier l'HTML ? Vous savez déjà que l'HTML est composé de balises et vous connaissez déjà quelques unes de ces balises, la balise <p> par exemple qui définit des paragraphes, les balises <html>, <head> et <body> qui font partie du code minimum, la balise <title> qui permet de donner un titre au document. En tout il existe environ 120 balises dans l'HTML, soit beaucoup moins que de mots dans la langue française. Apprendre l'HTML, c'est donc apprendre les diverses balises. Ça, c'est pour le vocabulaire. Question grammaire, vous savez également que la plupart des balises s'ouvrent et se ferment. Par exemple rappelez-vous de notre paragraphe, il y a une balise <p> ouvrante et une balise </p> fermante avec la barre oblique, le slash qui, rappelez-vous, est le symbole marquant la fermeture de l'élément. Le contenu de l'élément se trouve, lui, entre la balise d'ouverture et la balise de fermeture. En HTML moderne, la convention veut que le nom des balises soit toujours écrit en minuscules, mais ça n'a pas toujours été le cas dans les versions précédentes de l'HTML. Vous retrouverez donc des pages où les balises sont encore écrites en majuscules, sans que cela provoque la moindre erreur dans le navigateur. Je vous conseille cependant d'adopter la meilleure pratique moderne, et de considérer le nom de vos balises comme devant toujours s'écrire en minuscules. La balise, c'est uniquement le nom de l'élément, ici <p> avec les symboles < et > et avec le /, la barre oblique s'il s'agit d'une balise fermante. L'ensemble balise ouvrante + contenu + balise fermante est appelé un élément. L'élément <p> de cet exemple est composé d'une balise <p> qui s'ouvre, de quatre mots, Le, contenu, du, paragraphe, et d'une balise </p> fermante. Parfois, les éléments de l'HTML sont précisés par un ou plusieurs attributs. Les attributs se placent toujours au niveau de la balise d'ouverture, avant le symbole > qui marque la fin de la balise d'ouverture et le début du contenu de l'élément. Pour préciser un attribut, vous ferez d'abord un espace entre le nom de la balise et le nom de l'attribut, que vous écrirez en minuscules. Prenons par exemple l'attribut id qui vous permet de donner un identifiant, ou un nom si vous voulez, à un élément de l'HTML. Nous reviendrons là-dessus plus tard dans cette formation. La plupart des attributs ont besoin d'une valeur. Pour donner sa valeur à un attribut, vous utiliserez le symbole = suivi d'une paire de guillemets droits. Notez qu'il n'y a pas d'espace entre le nom de l'attribut, ici id, et le symbole =, et qu'il n'y a pas non plus d'espace entre le symbole = et les guillemets ouvrants. La valeur de l'attribut se place, elle, toujours entre les guillemets, même si cette valeur est un nombre. Il y a toujours des guillemets pour la valeur des attributs. Si vous avez besoin d'un second attribut sur la même balise, il vous suffit de faire un nouvel espace après le guillemet qui ferme le premier attribut, et de recommencer toute cette séquence avec un autre attribut, par exemple ici l'attribut lang qui permet de préciser la langue du contenu de notre paragraphe. Notez que l'ordre des attributs n'a pas d'importance. Dans cet exemple, vous pouvez mettre l'attribut lang avant ou après l'attribut id sans aucune conséquence au niveau du navigateur.