diff --git a/app/layouts/prism.css b/app/layouts/prism.css index e6feb9e..72743f5 100644 --- a/app/layouts/prism.css +++ b/app/layouts/prism.css @@ -8,7 +8,7 @@ .dark .token.rule, .dark .token.pseudo-class, .dark .token.important { - color: #CB5FDE; + color: #cb5fde; } .dark .token.comment, @@ -25,16 +25,16 @@ .dark .token.attr-value, .dark .token.class, .dark .token.string { - color: #89CA6C; + color: #89ca6c; } .dark .token.property, .dark .token.tag { - color: #E3596F; + color: #e3596f; } .dark .token.function-variable { - color: #61AFEF; + color: #61afef; } /** Light mode */ @@ -42,13 +42,13 @@ .token.attr-value, .token.class, .token.string { - color: #50A14F; + color: #50a14f; } .token.function-variable, .token.generic-function, .token.function { - color: #4078F2; + color: #4078f2; } .token.module, @@ -56,28 +56,29 @@ .token.rule, .token.pseudo-class, .token.important { - color: #A626A4; + color: #a626a4; } .token.property, .token.tag, .token.constant { - color: #E55649; + color: #e55649; } .token.generic, .token.attr-name, +.token.entity, .token.boolean, .token.number, .token.class-name { - color: #C18401; + color: #c18401; } .token.comment, .token.combinator { - color: #A0A1A7; + color: #a0a1a7; } .token.operator, .token.builtin { - color: #0184BC; -} \ No newline at end of file + color: #0184bc; +} diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts index 325861d..8e160de 100644 --- a/app/libs/navigation.ts +++ b/app/libs/navigation.ts @@ -104,6 +104,22 @@ export const navigation: NavigationSection[] = [ type: navigationsTypes.DOCUMENTATIONS, position: "auto", links: [ + { + title: "Introduction", + href: "/docs/frontend", + subitems: [], + }, + { + title: "HTML", + href: "/docs/html", + subitems: [ + { title: "Introduction", href: "/docs/html" }, + { title: "Balise ", href: "/docs/html/balise-head" }, + { title: "Balises de base", href: "/docs/html/balises-de-base" }, + { title: "Attributs", href: "/docs/html/attributs" }, + { title: "Formulaires", href: "/docs/html/formulaires" }, + ], + }, { title: "React", href: "/docs/react", diff --git a/app/pages/+data.ts b/app/pages/+data.ts index 873d355..98db99e 100644 --- a/app/pages/+data.ts +++ b/app/pages/+data.ts @@ -7,39 +7,40 @@ import buildTitle from "./buildTitle"; export type Data = Awaited>; export async function data(pageContext: PageContext) { - const config = useConfig(); - await docCache.waitingForCache(20000); + const config = useConfig(); + await docCache.waitingForCache(20000); - const { - exports: { frontmatter }, - urlParsed, - } = pageContext; - const isRoot = urlParsed.pathname === "/"; + const { + exports: { frontmatter }, + urlParsed, + } = pageContext; + const isRoot = urlParsed.pathname === "/"; - config({ - title: buildTitle(isRoot ? undefined : frontmatter?.title), - description: frontmatter?.description, - }); + config({ + title: buildTitle(isRoot ? undefined : frontmatter?.title), + description: frontmatter?.description, + }); - let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, ""); - if (cachePathname === "") cachePathname = "index"; + let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, ""); + if (cachePathname === "") cachePathname = "index"; - const doc = docCache.get(cachePathname); + const doc = docCache.get(cachePathname); + console.log(doc); - if (!doc) { - console.error( - `DocCache: No doc found for ${cachePathname}. This is a bug!`, - "Please report it to the maintainers.", - ); - } + if (!doc) { + console.error( + `DocCache: No doc found for ${cachePathname}. This is a bug!`, + "Please report it to the maintainers.", + ); + } - return { - sections: doc?.sections || [], - frontmatter, - docs: docCache.orderByLastEdit({ - limit: 2, - includedBasePaths: ["docs", "certifications"], - excludedFileNames: [cachePathname, "docs", "certifications"], - }), - }; + return { + sections: doc?.sections || [], + frontmatter, + docs: docCache.orderByLastEdit({ + limit: 2, + includedBasePaths: ["docs", "certifications"], + excludedFileNames: [cachePathname, "docs", "certifications"], + }), + }; } diff --git a/app/pages/docs/frontend/+Page.mdx b/app/pages/docs/frontend/+Page.mdx new file mode 100644 index 0000000..db87694 --- /dev/null +++ b/app/pages/docs/frontend/+Page.mdx @@ -0,0 +1,8 @@ +--- +title: "Introduction au Frontend : Langages et technologies" +description: +tags: [] +--- + +import Callout from "@/components/Callout"; + diff --git a/app/pages/docs/html/+Page.mdx b/app/pages/docs/html/+Page.mdx new file mode 100644 index 0000000..2e63ccf --- /dev/null +++ b/app/pages/docs/html/+Page.mdx @@ -0,0 +1,108 @@ +--- +title: Introduction au HTML +description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web. +tags: [] +--- + +import Callout from "@/components/Callout"; +import tabs from "./tabs"; + +HTML est un langage de balisage utilisé pour structurer le contenu des pages web. +Bien qu'il ne s'agisse pas d'un langage de programmation à proprement parler, il reste fondamental pour créer des sites web. + +Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de ce qu'est le HTML et pourquoi il est si important. + +## 🤔 Qu'est-ce que le HTML ? + +HTML, ou **HyperText Markup Language**, est le langage standard utilisé pour créer des pages web. Il s'agit d'un langage de balisage qui utilise des **balises** pour structurer le contenu. +Il s'agit du **squelette d'une page web**, qui définit la structure et le contenu de celle-ci. + +## Pourquoi HTML n'est pas un langage de programmation ? + +Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation. + + + Un langage de programmation est un ensemble de règles et de conventions qui permettent d'écrire des instructions que l'ordinateur peut comprendre et exécuter. + Ces instructions peuvent inclure des calculs, des conditions, des boucles, etc. + + +Si on regarde la définition d'un langage de programmation, on peut voir que le HTML ne correspond pas à cette définition. +Tout simplement parce que le HTML ne permet pas d'écrire des instructions que l'ordinateur peut exécuter ! + +Mais bon... savoir ça c'est bien : mais ça ne va pas nous aider à créer des pages web. + +## 🏗️ La structure d'une page HTML + +Une page HTML est composée de plusieurs éléments, chacun ayant un rôle spécifique. + +Par exemple, une page HTML typique contient les éléments suivants : +- `` : Indique au navigateur que le document est un fichier HTML. +- `` : L'élément racine qui englobe tout le contenu de la page. +- `` : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc. +- `` : Contient le contenu visible de la page, comme le texte, les images, les liens, etc. + +Il s'agit des balises de base qui composent une page HTML. +Voici un exemple de code HTML simple : + + + + + La balise `` est utilisée pour ajouter des commentaires dans le code HTML. + Ces commentaires ne sont pas affichés dans le navigateur et sont uniquement visibles dans le code source de la page. + + On les utilise pour ajouter des notes ou des explications dans le code, ce qui peut être utile pour les développeurs qui lisent le code plus tard. + + +### La balise \ + +Dans l'exemple ci-dessus, on peut voir que la balise `` contient plusieurs éléments importants : + +- `` : Indique l'encodage des caractères utilisé dans le document. UTF-8 est l'encodage le plus courant et prend en charge la plupart des langues. +- `` : Indique au navigateur comment afficher la page sur les appareils mobiles. Cela permet de rendre la page responsive. +- `` : Définit le titre de la page, qui s'affiche dans l'onglet du navigateur. +- `<meta name="description" content="...">` : Fournit une description de la page, qui peut être utilisée par les moteurs de recherche pour afficher un extrait de la page dans les résultats de recherche. + +Ces balises ne s'affichent pas sur la page elle-même, mais elles sont essentielles pour le bon fonctionnement de la page et son référencement dans les moteurs de recherche. + +On peut également ajouter des liens vers des fichiers CSS et JavaScript dans la balise `<head>`, ce qui permet de styliser la page et d'ajouter des fonctionnalités interactives. + +En résumé, la balise `<head>` permet de définir toutes les informations importantes sur la page et de préparer le terrain pour le contenu qui sera affiché dans la balise `<body>`. + +### La balise \<body\> + +La balise `<body>` contient tout le contenu visible de la page, comme le texte, les images, les liens, etc. +C'est ici que l'on va pouvoir définir la structure de notre page. + +Chaque balise HTML a un rôle spécifique et permet de structurer le contenu de la page. Certaines donnent du sens au contenu, +tandis que d'autres permettent de tout simplement de regrouper des groupes de balises. + +Dans l'exemple donné plus tôt, on peut voir plusieurs balises courantes utilisées dans la balise `<body>` : + +- `<h1>` : Définit un titre de premier niveau. Il est généralement utilisé pour le titre principal de la page. +- `<h2>` : Définit un titre de deuxième niveau. Il est généralement utilisé pour les sous-titres. +- `<p>` : Définit un paragraphe de texte. +- `<header>` : Définit l'en-tête de la page. Il est généralement utilisé pour le titre et la navigation. +- `<main>` : Définit le contenu principal de la page. Il est généralement utilisé pour le contenu principal de la page. +- `<footer>` : Définit le pied de page de la page. Il est généralement utilisé pour les informations de copyright et les liens vers les mentions légales. + +Il y en a bien évidemment beaucoup d'autres, mais on se garde ça pour un prochain article 😉 + +## 📜 Les attributs HTML + +Les balises HTML peuvent également avoir des **attributs**, qui fournissent des informations supplémentaires sur l'élément. +Les attributs sont toujours définis dans la balise d'ouverture de l'élément et sont généralement constitués d'un nom et d'une valeur. + +Dans l'exemple donné plus tôt, on a eu l'occasion d'en voir dans les balises `<meta>`. +Mais on peut aussi en trouver dans d'autres balises présents dans le corps de la page. + +Voici quelques exemples d'attributs courants : + +<tabs.htmlAttributes /> + +## On s'arrête là pour le moment ! + +Pas la peine de se précipiter, on a encore plein de choses à voir sur le HTML. +Bien que ce langage soit extrêmement simple, il nécessite d'être bien compris pour pouvoir créer des pages web de qualité. + +Pour le moment, nous savons à quoi ressemble une page HTML et comment elle est structurée.. on verra comment +créer des pages web plus représentatives dans les prochains articles ! \ No newline at end of file diff --git a/app/pages/docs/html/attributs/+Page.mdx b/app/pages/docs/html/attributs/+Page.mdx new file mode 100644 index 0000000..4c54c28 --- /dev/null +++ b/app/pages/docs/html/attributs/+Page.mdx @@ -0,0 +1,70 @@ +--- +title: "Exploration approfondie des attributs HTML : utilisation, explications et exemples pratiques" +description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web. +tags: [] +--- + +import Callout from "@/components/Callout"; +import tabs from "./tabs"; + +Pour cet article, explorons le concept des **attributs** HTML ! + +## 🔧 Comprendre les attributs HTML + +Un attribut HTML est une information supplémentaire que l'on peut ajouter à une balise HTML pour lui donner des propriétés ou des comportements spécifiques. + +Par exemple, l'attribut `src` de la balise `<img>` spécifie l'URL de l'image à afficher. +Les attributs sont généralement ajoutés à l'intérieur de la balise d'ouverture et sont constitués d'un nom et d'une valeur, séparés par un signe égal `=`. + +Voici un exemple simple : + +<tabs.htmlBasicAttributes /> + +Dans l'exemple ci-dessus, on a utilisé plusieurs attributs : +- **Balise `<img>`** + - `src` : Spécifie l'URL de l'image à afficher. + - `alt` : Fournit une description de l'image pour l'accessibilité. + - `width` : Définit la largeur de l'image en pixels. + - `height` : Définit la hauteur de l'image en pixels. + - `loading` : Indique si l'image doit être chargée de manière paresseuse _(lazy loading)_ ou non. +- **Balise `<a>`** + - `href` : Spécifie l'URL de la page vers laquelle le lien doit pointer. + - `target` : Indique où ouvrir le lien _(dans un nouvel onglet, par exemple)_. + - `rel` : Fournit des informations supplémentaires sur la relation entre la page actuelle et la page liée. + - `title` : Fournit une info-bulle qui s'affiche lorsque l'utilisateur survole le lien. + - `download` : Indique que le lien doit être traité comme un téléchargement. + +<Callout type="note" title="Attributs booléens (vrai ou faux)"> + Certains attributs HTML sont appelés **attributs booléens**. C'est notamment le cas de l'attribut `download` de l'exemple précédent pour la balise `<a>`. + + Ces attributs n'ont pas besoin d'une valeur explicite. La simple présence de l'attribut dans la balise est suffisante pour indiquer qu'il est activé. + + Il est donc possible d'écrire `<a download>` au lieu de `<a download="true">`. +</Callout> + +## 🌐 Rôles et utilisation des attributs HTML + +Les attributs HTML jouent un rôle essentiel dans plusieurs aspects du développement web. + +### 1. Accessibilité + +Les attributs tels que `alt` _(pour les images)_, `aria-label` ou encore `title` améliorent l'accessibilité en fournissant des informations alternatives ou contextuelles aux utilisateurs qui ne peuvent pas visualiser le contenu, comme les personnes malvoyantes utilisant des lecteurs d'écran. + +### 2. SEO (Search Engine Optimization) + +Les attributs `alt` et `title` sont également importants pour le référencement des pages, car ils fournissent des informations clés aux moteurs de recherche sur le contenu de la page. + +### 3. Interactivité + +Les attributs peuvent aussi être utilisés pour rendre les éléments interactifs, comme l'ajout de fonctionnalités de formulaire ou de liens cliquables avec des attributs tels que `href`, `action` et `method`. + +## 🤔 Tous les attributs HTML + +Vouloir présenter tous les attributs HTML serait long et fastidieux... surtout que les technologies évoluent rapidement, donc il est difficile de suivre les changements. + +Cependant, le site [MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Attributes) est une excellente ressource pour explorer les attributs HTML et leurs utilisations ! + +## 📚 Conclusion + +Les attributs HTML sont des éléments essentiels qui ajoutent de la fonctionnalité et de la valeur à tes pages web. +En comprenant leur rôle et leur utilisation, tu pourras améliorer l'accessibilité, le référencement et l'interactivité de tes sites. \ No newline at end of file diff --git a/app/pages/docs/html/attributs/tabs.tsx b/app/pages/docs/html/attributs/tabs.tsx new file mode 100644 index 0000000..9e410bc --- /dev/null +++ b/app/pages/docs/html/attributs/tabs.tsx @@ -0,0 +1,34 @@ +import { Snippet } from "@/components/Snippet"; + +const htmlBasicAttributesSnippets = [ + { + name: "Exemple d'attributs sur une image", + codeLanguage: "html", + withLineNumbers: true, + code: `<img + src="image.jpg" + alt="Une image d'exemple" + width="300" + height="200" + loading="lazy" +>`, + }, + { + name: "Exemple d'attributs sur un lien", + codeLanguage: "html", + withLineNumbers: true, + code: `<a + href="https://example.com" + target="_blank" + rel="noopener noreferrer" + title="Visitez notre site" + download +> + Visitez notre site +</a>`, + }, +]; + +export default { + htmlBasicAttributes: () => <Snippet snippets={htmlBasicAttributesSnippets} />, +}; diff --git a/app/pages/docs/html/balise-head/+Page.mdx b/app/pages/docs/html/balise-head/+Page.mdx new file mode 100644 index 0000000..4c2a2e9 --- /dev/null +++ b/app/pages/docs/html/balise-head/+Page.mdx @@ -0,0 +1,83 @@ +--- +title: Comprendre la fonctionnalité et l'importance de la balise <head> dans une page HTML +description: Comprendre comme la balise <head> contribue à la structure et au fonctionnement d'une page web. +tags: [] +--- + +import Callout from "@/components/Callout"; +import tabs from "./tabs"; + +Dans l'introduction au HTML, nous avons exploré la structure générale d'une page HTML. Nous avons vu que le contenu visible d'une page est défini dans la balise `<body>`, +mais savais-tu que ce n'est pas la seule balise qui joue un rôle essentiel dans la création d'une page web ? + +Il existe également une balise qui est tout aussi importante, mais qui est souvent négligée : la **balise `<head>`**. + +## 🎓 Aperçu de la balise \<head\> + +La balise `<head>` est située entre les balises `<html>` et `<body>`. Elle ne contient pas de contenu directement visible sur la page, mais +elle fournit des métadonnées importantes et inclut des liens vers des ressources externes, comme des fichiers CSS et JavaScript. + +<tabs.htmlBasicHead /> + +## 🔎 Les métadonnées + +Certaines balises situées dans la balise `<head>` fournissent des informations essentielles au navigateur, aux moteurs de recherche et à d'autres applications. +Ces informations sont appelées **métadonnées**. + +Voici un aperçu de certains éléments courants que tu peux y trouver : + +- **Titre** `<title>` + - Définit le titre de la page, affiché dans l'onglet du navigateur. + - Il est important pour le référencement et l'expérience utilisateur. +- **Encodage des caractères** `<meta charset="UTF-8">` + - Définit l'encodage de caractères utilisé dans le document. + - UTF-8 est couramment utilisé en raison de sa prise en charge des langues et caractères spéciaux. +- **Viewport** `<meta name="viewport" content="width=device-width, initial-scale=1.0">` + - Configure la vue du navigateur pour les appareils mobiles. + - Permet de garantir que le site web est adapté à un affichage adaptatif _(responsive)_. +- **Description** `<meta name="description" content="...">` + - Fournit une brève description de la page. + - Utilisée par les moteurs de recherche pour afficher un extrait dans les résultats de recherche. +- **Mots-clés** `<meta name="keywords" content="...">` + - Liste de mots-clés pertinents pour la page. + +<Callout type="note" title='Balise `<meta name="keywords">`'> + Cette balise est encore souvent utilisée, mais son importance est que très légère dans le référencement moderne. + + À titre d'information : [Google ne l'utilise pas](https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=fr). +</Callout> + +## 🎨 Styles et scripts + +La balise `<head>` permet également d'inclure des ressources externes telles que des feuilles de style _(CSS)_ et des scripts _(JavaScript)_. +Ces ressources permettent de styliser la page et d'ajouter des fonctionnalités interactives. + +<tabs.htmlStylesAndScripts /> + +Dans cet exemple, une feuille de style externe appelée `styles.css` est liée au document HTML à l'aide de la balise `<link>`. +De même, un script JavaScript externe appelé `app.js` est inclus à l'aide de la balise `<script>`. + +Ces fichiers sont chargés lorsque la page est ouverte, ce qui permet d'appliquer des styles et d'ajouter des fonctionnalités à la page. + +<Callout type="warning" title="Inclusion des fichiers JavaScript dans la balise `<head>`"> + Il est recommandé d'inclure les fichiers JavaScript à la fin de la balise `<body>` pour améliorer les performances de chargement de la page. + + En effet, cela permet au navigateur de charger le contenu visible avant d'exécuter les scripts, ce qui améliore l'expérience utilisateur. +</Callout> + +## 🌐 Le référencement + +Tu l'auras remarqué, j'ai parlé de référencement à plusieurs reprises dans cet article. Mais alors, qu'est-ce que c'est ? + +Le **référencement** _(ou SEO pour Search Engine Optimization)_ est l'ensemble des techniques visant à +améliorer la visibilité d'un site web dans les résultats des moteurs de recherche. + +Il est essentiel de bien structurer la balise `<head>` pour optimiser le référencement de ta page. +Les moteurs se basent sur les informations fournies dans cette balise pour indexer et classer les pages web. + +Mais bien entendu, le référencement ne se limite pas à la balise `<head>` ! 😉 + +## 📚 Conclusion + +La balise `<head>` est un élément essentiel de toute page HTML. Elle fournit des informations essentielles pour la structure +d'une page HTML, y compris le titre, les métadonnées et les liens vers des ressources externes. \ No newline at end of file diff --git a/app/pages/docs/html/balise-head/tabs.tsx b/app/pages/docs/html/balise-head/tabs.tsx new file mode 100644 index 0000000..4b8a2b1 --- /dev/null +++ b/app/pages/docs/html/balise-head/tabs.tsx @@ -0,0 +1,42 @@ +import { Snippet } from "@/components/Snippet"; + +const htmlBasicHeadSnippets = [ + { + name: "Exemple de la balise head", + codeLanguage: "html", + withLineNumbers: true, + code: `<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Mon super site + + + + +`, + }, +]; + +const htmlStylesAndScriptsSnippets = [ + { + name: "Exemple d'inclusion de styles et de scripts", + codeLanguage: "html", + withLineNumbers: true, + code: ` + + + + + +`, + }, +]; + +export default { + htmlBasicHead: () => , + htmlStylesAndScripts: () => ( + + ), +}; diff --git a/app/pages/docs/html/balises-de-base/+Page.mdx b/app/pages/docs/html/balises-de-base/+Page.mdx new file mode 100644 index 0000000..9b55017 --- /dev/null +++ b/app/pages/docs/html/balises-de-base/+Page.mdx @@ -0,0 +1,204 @@ +--- +title: Découverte des balises HTML courantes pour structurer une page web +description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web. +tags: [] +--- + +import Callout from "@/components/Callout"; +import tabs from "./tabs"; + +Dans l'article précédent, nous avons exploré la balise `` et son rôle important dans une page HTML. +Maintenant, concentrons-nous sur les balises situées dans le corps de la page, c'est-à-dire dans la balise ``. + +## 🏗️ La balise \ + +La balise `` est l'endroit où se trouve tout le contenu visible de la page... ou presque ! +Elle contient tous les éléments que l'utilisateur peut voir et interagir avec, comme le texte, les images, les liens, etc. + +Voici un exemple de code HTML simple avec la balise `` : + + + +On peut voir que la balise `` contient plusieurs éléments : +- `

` : Un titre de premier niveau. +- `

` : Un paragraphe de texte. +- `` : Une image. +- `` : Un lien hypertexte. + +Mais on y reviendra un peu après ! + +## 📝 Balises de textes et mise en forme + +### 1. Titres et sous-titres + +Les titres et les sous-titres sont des éléments importants _(pour ne pas dire essentiels)_ pour structurer le contenu d'une page web. +Le langage HTML fournit six niveaux de titres, du plus important au moins important : + +- `

` : Titre de premier niveau _(le plus important)_. +- `

` : Titre de deuxième niveau. +- `

` : Titre de troisième niveau. +- `

` : Titre de quatrième niveau. +- `

` : Titre de cinquième niveau. +- `
` : Titre de sixième niveau _(le moins important)_. + +Il est important de prendre en compte plusieurs éléments lors de l'utilisation des titres : + +- **Accessibilité** : Les titres aident les lecteurs d'écran à comprendre la structure de la page. +- **SEO** : Les moteurs de recherche utilisent les titres pour comprendre le contenu de la page. +- **Lisibilité** : Les titres aident les utilisateurs à parcourir rapidement le contenu de la page. +- **Sémantique** : Les titres donnent du sens au contenu et aident à organiser l'information. + + + La plupart du temps _(selon le navigateur)_, les titres sont affichés avec une taille de police plus grande que le texte normal. + + Il est donc important de ne pas utiliser les balises de titres uniquement pour changer la taille du texte. + Si ton titre est le titre principal de la page, utilise la balise `

` et applique-lui un style CSS pour le personnaliser. + + +Il est recommandé d'utiliser une seule balise `

` par page pour le titre principal. +Ni plus, ni moins ! + +En revanche, tu peux utiliser plusieurs balises `

`, `

`, etc. pour les sous-titres. + +Les balises `

` jusqu'à `

` sont utilisées pour les sous-titres et les titres de sections. +Elles permettent de structurer le contenu de la page et de créer une hiérarchie d'information. + + + 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. + + +### 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 `