From 0f89771f6474074acb9e2defef70d6544fc5bdc2 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Tue, 13 May 2025 14:40:39 +0200 Subject: [PATCH] docs(html): add sections on basic HTML tags --- app/pages/docs/html/balises-de-base/+Page.mdx | 90 ++++++++++++++++++- app/pages/docs/html/balises-de-base/tabs.tsx | 89 ++++++++++++++++++ 2 files changed, 177 insertions(+), 2 deletions(-) diff --git a/app/pages/docs/html/balises-de-base/+Page.mdx b/app/pages/docs/html/balises-de-base/+Page.mdx index dca2cc8..de4335b 100644 --- a/app/pages/docs/html/balises-de-base/+Page.mdx +++ b/app/pages/docs/html/balises-de-base/+Page.mdx @@ -66,6 +66,92 @@ Elles permettent de structurer le contenu de la page et de créer une hiérarchi Il est préférable d'utiliser une balise `

` pour un sous-titre qui suit un `

`, et de ne pas sauter directement à un `

` ou `

`. Cependant, tu peux totalement passer d'un `

` à un `

` si tu le souhaites et que ça a du sens pour toi ! - + Il est important de respecter cette hiérarchie pour que le contenu soit facilement compréhensible par les utilisateurs et les moteurs de recherche. - \ No newline at end of file + + +### 2. Paragraphes de texte + +En reprenant l'exemple précédent, on peut voir que la balise `

` est utilisée pour définir un paragraphe de texte. + +Il s'agit d'une des balises les plus courantes en HTML et elle est utilisée pour structurer le texte sur la page en sections distinctes et lisibiles. + +### 3. Mise en forme du texte + +Il existe plusieurs balises HTML qui permettent de mettre en forme le texte, comme : +- `` + - Indique un texte comme étant important _(sémantique)_. + - Par défaut _(selon le navigateur)_, le texte est affiché en gras. +- `` + - Indique un texte comme étant mis en emphase _(sémantique)_. + - Par défaut _(selon le navigateur)_, le texte est affiché en italique. +- `` + - Indique un texte comme étant souligné _(non sémantique)_. + - Par défaut _(selon le navigateur)_, le texte est affiché avec un soulignement. +- `` + - Indique un texte comme étant en gras _(non sémantique)_. + - Par défaut _(selon le navigateur)_, le texte est affiché en gras. +- `` + - Indique un texte comme étant en italique _(non sémantique)_. + - Par défaut _(selon le navigateur)_, le texte est affiché en italique. + + + La balise `` est utilisée pour indiquer que le texte est important, tandis que la balise `` est utilisée pour appliquer un style de gras sans signification sémantique. + + Il en est de même pour les balises `` et `` avec un style italique. + + Bien entendu, niveau style on va chercher à privilégier le CSS pour appliquer des styles de mise en forme plutôt que d'utiliser les balises HTML. + + +## 🔗 Liens vers des ressources externes + +### 4. Liens hypertextes + +Un lien hypertexte est un élément cliquable qui permet de naviguer vers une autre page web ou une autre section de la même page. +Il est créé à l'aide de la balise `` _(pour "anchor")_ et peut contenir du texte, des images ou d'autres éléments. + +Il est construit avec l'attribut `href` qui spécifie l'URL de la page vers laquelle le lien doit pointer. + +Dans l'exemple ci-dessous, on peut voir un lien vers la page d'accueil du Memento ainsi qu'un lien vers une section : + + + +## 🖼️ Images et médias + +### 5. Images + +L'ajout d'une image à une page web est un élément essentiel pour rendre le contenu plus attrayant et informatif. +Il est créé à l'aide de la balise ``. + +Cette balise est construite avec l'attribut `src` qui spécifie l'URL de l'image à afficher. +Mais il est également important d'utiliser l'attribut `alt` pour fournir une description de l'image, ce qui est utile pour l'accessibilité et le référencement. + +## 📋 Listes et tableaux + +### 6. Listes + +Les balises `