feat(docs): add introduction to frontend documentation
This commit is contained in:
parent
85c2d26c81
commit
814efdce81
@ -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 <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",
|
||||
|
||||
8
app/pages/docs/frontend/+Page.mdx
Normal file
8
app/pages/docs/frontend/+Page.mdx
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: "Introduction au Frontend : Langages et technologies"
|
||||
description:
|
||||
tags: []
|
||||
---
|
||||
|
||||
import Callout from "@/components/Callout";
|
||||
|
||||
@ -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: []
|
||||
---
|
||||
|
||||
@ -1,8 +1,48 @@
|
||||
---
|
||||
title: Comprendre la fonctionnalité et l'importance de la balise \<head\> 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 <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>
|
||||
24
app/pages/docs/html/balise-head/tabs.tsx
Normal file
24
app/pages/docs/html/balise-head/tabs.tsx
Normal file
@ -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</title>
|
||||
<meta name="description" content="Ceci est un exemple de page HTML.">
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
</html>`,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
htmlBasicHead: () => <Snippet snippets={htmlBasicHeadSnippets} />,
|
||||
};
|
||||
@ -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: []
|
||||
---
|
||||
|
||||
Loading…
Reference in New Issue
Block a user