diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts index 81a24d3..295e54c 100644 --- a/app/libs/navigation.ts +++ b/app/libs/navigation.ts @@ -104,10 +104,25 @@ 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" }], + 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: "Intégrations et médias", + href: "/docs/html/integrations-medias", + }, + { title: "Formulaires", href: "/docs/html/formulaires" }, + ], }, { title: "React", 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/attributs/+Page.mdx b/app/pages/docs/html/attributs/+Page.mdx index b14df37..f3ba195 100644 --- a/app/pages/docs/html/attributs/+Page.mdx +++ b/app/pages/docs/html/attributs/+Page.mdx @@ -1,5 +1,5 @@ --- -title: Exploration approfondie des attributs HTML : utilisation, explications et exemples pratiques +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: [] --- diff --git a/app/pages/docs/html/balise-head/+Page.mdx b/app/pages/docs/html/balise-head/+Page.mdx index 5f4d1cc..5c64cb5 100644 --- a/app/pages/docs/html/balise-head/+Page.mdx +++ b/app/pages/docs/html/balise-head/+Page.mdx @@ -1,8 +1,48 @@ --- -title: Comprendre la fonctionnalité et l'importance de la balise \ dans une page HTML -description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web. +title: Comprendre la fonctionnalité et l'importance de la balise dans une page HTML +description: Comprendre comme la balise 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 ``, +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 ``**. + +## 🎓 Aperçu de la balise \ + +La balise `` est située entre les balises `` et ``. 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. + + + +## 🔎 Les métadonnées + +Certaines balises situées dans la balise `` 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** `` + - 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> \ 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..6bf1a4b --- /dev/null +++ b/app/pages/docs/html/balise-head/tabs.tsx @@ -0,0 +1,24 @@ +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 + + + + +`, + }, +]; + +export default { + htmlBasicHead: () => , +}; diff --git a/app/pages/docs/html/formulaires/+Page.mdx b/app/pages/docs/html/formulaires/+Page.mdx index d14dc6f..f9ec930 100644 --- a/app/pages/docs/html/formulaires/+Page.mdx +++ b/app/pages/docs/html/formulaires/+Page.mdx @@ -1,5 +1,5 @@ --- -title: Créer des formulaires interactifs avec HTML : éléments, types d'entrées et validation de données +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: [] ---