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
 <Callout type="warning" title="Hierarchie des titres">
   Il est préférable d'utiliser une balise `<h2>` pour un sous-titre qui suit un `<h1>`, et de ne pas sauter directement à un `<h3>` ou `<h4>`.  
   Cependant, tu peux totalement passer d'un `<h6>` à un `<h2>` 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.
-</Callout>
+</Callout>
+
+### 2. Paragraphes de texte
+
+En reprenant l'exemple précédent, on peut voir que la balise `<p>` 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 :
+- `<strong>`
+  - Indique un texte comme étant important _(sémantique)_.
+  - Par défaut _(selon le navigateur)_, le texte est affiché en gras.
+- `<em>`
+  - Indique un texte comme étant mis en emphase _(sémantique)_.
+  - Par défaut _(selon le navigateur)_, le texte est affiché en italique.
+- `<u>`
+  - Indique un texte comme étant souligné _(non sémantique)_.
+  - Par défaut _(selon le navigateur)_, le texte est affiché avec un soulignement.
+- `<b>`
+  - Indique un texte comme étant en gras _(non sémantique)_.
+  - Par défaut _(selon le navigateur)_, le texte est affiché en gras.
+- `<i>`
+  - Indique un texte comme étant en italique _(non sémantique)_.
+  - Par défaut _(selon le navigateur)_, le texte est affiché en italique.
+
+<Callout type="question" title="Quelles sont les différences entre les balises `<strong>` et `<b>` ?">
+  La balise `<strong>` est utilisée pour indiquer que le texte est important, tandis que la balise `<b>` est utilisée pour appliquer un style de gras sans signification sémantique.
+
+  Il en est de même pour les balises `<em>` et `<i>` 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.
+</Callout>
+
+## 🔗 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 `<a>` _(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 :
+
+<tabs.htmlBasicAnchor />
+
+## 🖼️ 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 `<img>`.
+
+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 `<ul>` et `<ol>` sont utilisées pour créer des listes non ordonnées et ordonnées, respectivement.
+
+- `<ul>` : Crée une liste non ordonnée _(avec des puces)_.
+- `<ol>` : Crée une liste ordonnée _(avec des numéros)_.
+
+On utilise la balise `<li>` pour définir chaque élément de la liste.
+
+<tabs.htmlBasicList />
+
+### 7. Tableaux
+
+Les tableaux sont utilisés pour organiser des données sous forme de lignes et de colonnes.  
+Il existe deux catégories de balises pour les tableaux :
+
+- **Structure essentielle**
+  - `<table>` : Définit le tableau.
+  - `<tr>` : Définit une ligne du tableau.
+  - `<td>` : Définit une cellule de données dans une ligne.
+  - `<th>` : Définit une cellule d'en-tête dans une ligne.
+- **Structure optionnelle**
+  - `<thead>` : Définit l'en-tête du tableau.
+  - `<tbody>` : Définit le corps du tableau.
+  - `<tfoot>` : Définit le pied de page du tableau.
+
+<tabs.htmlBasicTable />

app/pages/docs/html/balises-de-base/tabs.tsx

@@ -19,6 +19,95 @@ const htmlBasicBodySnippets = [
 	},
 ];
 
+const htmlBasicAnchorSnippets = [
+	{
+		name: "Lien hypertexte vers une page",
+		codeLanguage: "html",
+		code: `<a href="https://memento-dev.fr">Memento Dev</a>`,
+	},
+	{
+		name: "Lien hypertexte vers une section de la même page",
+		codeLanguage: "html",
+		code: `<a href="#4-liens-hypertextes">4. Liens hypertextes</a>`,
+	},
+];
+
+const htmlBasicListSnippets = [
+	{
+		name: "Liste non ordonnée",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<ul>
+	<li>Élément A</li>
+	<li>Élément B</li>
+	<li>Élément C</li>
+</ul>`,
+	},
+	{
+		name: "Liste ordonnée",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<ol>
+	<li>Élément 1</li>
+	<li>Élément 2</li>
+	<li>Élément 3</li>
+</ol>`,
+	},
+];
+
+const htmlBasicTableSnippets = [
+	{
+		name: "Tableau simple",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<table>
+	<tr>
+		<th>Nom</th>
+		<th>Âge</th>
+	</tr>
+	<tr>
+		<td>Christophe</td>
+		<td>30</td>
+	</tr>
+	<tr>
+		<td>Élodie</td>
+		<td>25</td>
+	</tr>
+</table>`,
+	},
+	{
+		name: "Tableau avec structure",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<table>
+	<thead>
+		<tr>
+			<th>Nom</th>
+			<th>Âge</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>Christophe</td>
+			<td>30</td>
+		</tr>
+		<tr>
+			<td>Élodie</td>
+			<td>25</td>
+		</tr>
+	</tbody>
+	<tfoot>
+		<tr>
+			<td colspan="2">Crédit : &copy; Source</td>
+		</tr>
+	</tfoot>
+</table>`,
+	},
+];
+
 export default {
 	htmlBasicBody: () => <Snippet snippets={htmlBasicBodySnippets} />,
+	htmlBasicAnchor: () => <Snippet snippets={htmlBasicAnchorSnippets} />,
+	htmlBasicList: () => <Snippet snippets={htmlBasicListSnippets} />,
+	htmlBasicTable: () => <Snippet snippets={htmlBasicTableSnippets} />,
 };