docs(html): add section on styles and scripts in <head>

feat(docs): add introduction to frontend documentation
refactor(nav): format navigation types consistently
2025-05-13 13:54:28 +02:00 · 2025-05-13 13:45:55 +02:00 · 2025-05-13 13:22:28 +02:00
7 changed files with 326 additions and 146 deletions
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@ -104,6 +104,26 @@ 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 <head>", href: "/docs/html/balise-head" },
+					{ title: "Balises de base", href: "/docs/html/balises-de-base" },
+					{ title: "Attributs", href: "/docs/html/attributs" },
+					{
+						title: "Intégrations et médias",
+						href: "/docs/html/integrations-medias",
+					},
+					{ title: "Formulaires", href: "/docs/html/formulaires" },
+				],
+			},
 			{
 				title: "React",
 				href: "/docs/react",
@ -121,11 +141,6 @@ export const navigation: NavigationSection[] = [
 					{ title: "Le hook useReducer", href: "/docs/react/use-reducer" },
 				],
 			},
-      {
-        title: "HTML",
-        href: "/docs/html",
-        subitems: [{ title: "Introduction", href: "/docs/html" }],
-      },
 		],
 	},
 	{
@ -152,12 +167,20 @@ export const navigation: NavigationSection[] = [
 	},
 ];

-export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean {
+export function doesLinkSubitemExist(
+	link: NavigationLink,
+	subitemHref: string,
+): boolean {
 	return link.subitems.some((subitem) => subitem.href === subitemHref);
 }

-export function findNavigationLink(namespace: string, href?: string): NavigationLink | undefined {
-  const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, "");
+export function findNavigationLink(
+	namespace: string,
+	href?: string,
+): NavigationLink | undefined {
+	const currentUrl = `/${namespace}/${href}`
+		.replace(/\/+/g, "/")
+		.replace(/\/$/, "");

 	const foundLink = navigation
 		.flatMap((section) => section.links)
--- a/app/pages/docs/frontend/+Page.mdx
+++ 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";
+
--- a/app/pages/docs/html/attributs/+Page.mdx
+++ b/app/pages/docs/html/attributs/+Page.mdx
@ -0,0 +1,8 @@
+---
+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";
+
--- a/app/pages/docs/html/balise-head/+Page.mdx
+++ 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.
--- a/app/pages/docs/html/balise-head/tabs.tsx
+++ 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</title>
+  <meta name="description" content="Ceci est un exemple de page HTML.">
+</head>
+
+<body></body>
+</html>`,
+	},
+];
+
+const htmlStylesAndScriptsSnippets = [
+	{
+		name: "Exemple d'inclusion de styles et de scripts",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<head>
+  <!-- Feuille de style CSS -->
+  <link rel="stylesheet" href="/styles/styles.css">
+
+  <!-- Script JavaScript -->
+  <script src="/scripts/app.js"></script>
+</head>`,
+	},
+];
+
+export default {
+	htmlBasicHead: () => <Snippet snippets={htmlBasicHeadSnippets} />,
+	htmlStylesAndScripts: () => (
+		<Snippet snippets={htmlStylesAndScriptsSnippets} />
+	),
+};
--- a/app/pages/docs/html/balises-de-base/+Page.mdx
+++ b/app/pages/docs/html/balises-de-base/+Page.mdx
@ -0,0 +1,8 @@
+---
+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";
+
--- a/app/pages/docs/html/formulaires/+Page.mdx
+++ b/app/pages/docs/html/formulaires/+Page.mdx
@ -0,0 +1,8 @@
+---
+title: "Créer des formulaires interactifs avec HTML : éléments, types d'entrées et validation de données"
+description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
Author	SHA1	Message	Date
GauthierWebDev	5258ffdbca	docs(html): add section on styles and scripts in <head>	2025-05-13 13:54:28 +02:00
GauthierWebDev	814efdce81	feat(docs): add introduction to frontend documentation	2025-05-13 13:45:55 +02:00
GauthierWebDev	85c2d26c81	refactor(nav): format navigation types consistently	2025-05-13 13:22:28 +02:00