Compare commits
No commits in common. "5258ffdbca33312bd02c24643a443480943f7532" and "b3b75ba5e7c66c862b632c992a466371286ea054" have entirely different histories.
5258ffdbca
...
b3b75ba5e7
@ -1,192 +1,169 @@
|
|||||||
const navigationsTypes = {
|
const navigationsTypes = {
|
||||||
GLOBAL: "👋 Général",
|
GLOBAL: "👋 Général",
|
||||||
CERTIFICATIONS: "🎓 Certifications",
|
CERTIFICATIONS: "🎓 Certifications",
|
||||||
DOCUMENTATIONS: "📚 Documentations",
|
DOCUMENTATIONS: "📚 Documentations",
|
||||||
OTHER: "🔗 Autres",
|
OTHER: "🔗 Autres",
|
||||||
};
|
};
|
||||||
|
|
||||||
export type NavigationSection = {
|
export type NavigationSection = {
|
||||||
title: string;
|
title: string;
|
||||||
type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
|
type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
|
||||||
position: "start" | "end" | "auto";
|
position: "start" | "end" | "auto";
|
||||||
links: NavigationLink[];
|
links: NavigationLink[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type NavigationOG = Partial<{
|
export type NavigationOG = Partial<{
|
||||||
image: string;
|
image: string;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export type NavigationLink = {
|
export type NavigationLink = {
|
||||||
title: string;
|
title: string;
|
||||||
href: string;
|
href: string;
|
||||||
og?: NavigationOG;
|
og?: NavigationOG;
|
||||||
subitems: NavigationSubItem[];
|
subitems: NavigationSubItem[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type NavigationSubItem = {
|
export type NavigationSubItem = {
|
||||||
title: string;
|
title: string;
|
||||||
href: string;
|
href: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const navigation: NavigationSection[] = [
|
export const navigation: NavigationSection[] = [
|
||||||
{
|
{
|
||||||
title: "Préambule",
|
title: "Préambule",
|
||||||
type: navigationsTypes.GLOBAL,
|
type: navigationsTypes.GLOBAL,
|
||||||
position: "start",
|
position: "start",
|
||||||
links: [
|
links: [
|
||||||
{ title: "Memento Dev", href: "/", subitems: [] },
|
{ title: "Memento Dev", href: "/", subitems: [] },
|
||||||
{ title: "Certifications", href: "/certifications", subitems: [] },
|
{ title: "Certifications", href: "/certifications", subitems: [] },
|
||||||
{ title: "Documentations", href: "/docs", subitems: [] },
|
{ title: "Documentations", href: "/docs", subitems: [] },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Communauté",
|
title: "Communauté",
|
||||||
type: navigationsTypes.GLOBAL,
|
type: navigationsTypes.GLOBAL,
|
||||||
position: "start",
|
position: "start",
|
||||||
links: [
|
links: [
|
||||||
{
|
{
|
||||||
title: "Influenceurs",
|
title: "Influenceurs",
|
||||||
href: "/communaute/influenceurs",
|
href: "/communaute/influenceurs",
|
||||||
subitems: [],
|
subitems: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Partages et réutilisations",
|
title: "Partages et réutilisations",
|
||||||
href: "/communaute/partages",
|
href: "/communaute/partages",
|
||||||
subitems: [],
|
subitems: [],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Légal",
|
title: "Légal",
|
||||||
type: navigationsTypes.OTHER,
|
type: navigationsTypes.OTHER,
|
||||||
position: "end",
|
position: "end",
|
||||||
links: [
|
links: [
|
||||||
{ title: "Mentions légales", href: "/mentions-legales", subitems: [] },
|
{ title: "Mentions légales", href: "/mentions-legales", subitems: [] },
|
||||||
{
|
{
|
||||||
title: "Politique de confidentialité",
|
title: "Politique de confidentialité",
|
||||||
href: "/politique-de-confidentialite",
|
href: "/politique-de-confidentialite",
|
||||||
subitems: [],
|
subitems: [],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Développeur Web et Web Mobile",
|
title: "Développeur Web et Web Mobile",
|
||||||
type: navigationsTypes.CERTIFICATIONS,
|
type: navigationsTypes.CERTIFICATIONS,
|
||||||
position: "auto",
|
position: "auto",
|
||||||
links: [
|
links: [
|
||||||
{ title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
|
{ title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
|
||||||
{
|
{
|
||||||
title: "Activité Type 1",
|
title: "Activité Type 1",
|
||||||
href: "/certifications/dwwm/at1",
|
href: "/certifications/dwwm/at1",
|
||||||
subitems: [
|
subitems: [
|
||||||
{ title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
|
{ title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
|
||||||
{ title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
|
{ title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
|
||||||
{ title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
|
{ title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
|
||||||
{ title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
|
{ title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
|
||||||
{ title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
|
{ title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Activité Type 2",
|
title: "Activité Type 2",
|
||||||
href: "/certifications/dwwm/at2",
|
href: "/certifications/dwwm/at2",
|
||||||
subitems: [
|
subitems: [
|
||||||
{ title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
|
{ title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
|
||||||
{ title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
|
{ title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
|
||||||
{ title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
|
{ title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
|
||||||
{ title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
|
{ title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
|
||||||
{ title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
|
{ title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Front-end",
|
title: "Front-end",
|
||||||
type: navigationsTypes.DOCUMENTATIONS,
|
type: navigationsTypes.DOCUMENTATIONS,
|
||||||
position: "auto",
|
position: "auto",
|
||||||
links: [
|
links: [
|
||||||
{
|
{
|
||||||
title: "Introduction",
|
title: "React",
|
||||||
href: "/docs/frontend",
|
href: "/docs/react",
|
||||||
subitems: [],
|
subitems: [
|
||||||
},
|
{ title: "Introduction", href: "/docs/react" },
|
||||||
{
|
{ title: "Initialisation", href: "/docs/react/initialisation" },
|
||||||
title: "HTML",
|
{ title: "Syntaxe JSX", href: "/docs/react/jsx" },
|
||||||
href: "/docs/html",
|
{ title: "Premier composant", href: "/docs/react/premier-composant" },
|
||||||
subitems: [
|
{
|
||||||
{ title: "Introduction", href: "/docs/html" },
|
title: "State et cycle de vie",
|
||||||
{ title: "Balise <head>", href: "/docs/html/balise-head" },
|
href: "/docs/react/state-et-cycle-de-vie",
|
||||||
{ title: "Balises de base", href: "/docs/html/balises-de-base" },
|
},
|
||||||
{ title: "Attributs", href: "/docs/html/attributs" },
|
{ title: "Hooks", href: "/docs/react/hooks" },
|
||||||
{
|
{ title: "Le hook useContext", href: "/docs/react/use-context" },
|
||||||
title: "Intégrations et médias",
|
{ title: "Le hook useReducer", href: "/docs/react/use-reducer" },
|
||||||
href: "/docs/html/integrations-medias",
|
],
|
||||||
},
|
},
|
||||||
{ title: "Formulaires", href: "/docs/html/formulaires" },
|
{
|
||||||
],
|
title: "HTML",
|
||||||
},
|
href: "/docs/html",
|
||||||
{
|
subitems: [{ title: "Introduction", href: "/docs/html" }],
|
||||||
title: "React",
|
},
|
||||||
href: "/docs/react",
|
],
|
||||||
subitems: [
|
},
|
||||||
{ title: "Introduction", href: "/docs/react" },
|
{
|
||||||
{ title: "Initialisation", href: "/docs/react/initialisation" },
|
title: "Base de données",
|
||||||
{ title: "Syntaxe JSX", href: "/docs/react/jsx" },
|
type: navigationsTypes.DOCUMENTATIONS,
|
||||||
{ title: "Premier composant", href: "/docs/react/premier-composant" },
|
position: "auto",
|
||||||
{
|
links: [
|
||||||
title: "State et cycle de vie",
|
{
|
||||||
href: "/docs/react/state-et-cycle-de-vie",
|
title: "Merise",
|
||||||
},
|
href: "/docs/merise",
|
||||||
{ title: "Hooks", href: "/docs/react/hooks" },
|
og: { image: "/merise/og.webp" },
|
||||||
{ title: "Le hook useContext", href: "/docs/react/use-context" },
|
subitems: [
|
||||||
{ title: "Le hook useReducer", href: "/docs/react/use-reducer" },
|
{ title: "Introduction", href: "/docs/merise" },
|
||||||
],
|
{
|
||||||
},
|
title: "Dictionnaire de données",
|
||||||
],
|
href: "/docs/merise/dictionnaire-de-donnees",
|
||||||
},
|
},
|
||||||
{
|
{ title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" },
|
||||||
title: "Base de données",
|
{ title: "Modèle Logique de Données", href: "/docs/merise/mld" },
|
||||||
type: navigationsTypes.DOCUMENTATIONS,
|
{ title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
|
||||||
position: "auto",
|
],
|
||||||
links: [
|
},
|
||||||
{
|
],
|
||||||
title: "Merise",
|
},
|
||||||
href: "/docs/merise",
|
|
||||||
og: { image: "/merise/og.webp" },
|
|
||||||
subitems: [
|
|
||||||
{ title: "Introduction", href: "/docs/merise" },
|
|
||||||
{
|
|
||||||
title: "Dictionnaire de données",
|
|
||||||
href: "/docs/merise/dictionnaire-de-donnees",
|
|
||||||
},
|
|
||||||
{ title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" },
|
|
||||||
{ title: "Modèle Logique de Données", href: "/docs/merise/mld" },
|
|
||||||
{ title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export function doesLinkSubitemExist(
|
export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean {
|
||||||
link: NavigationLink,
|
return link.subitems.some((subitem) => subitem.href === subitemHref);
|
||||||
subitemHref: string,
|
|
||||||
): boolean {
|
|
||||||
return link.subitems.some((subitem) => subitem.href === subitemHref);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function findNavigationLink(
|
export function findNavigationLink(namespace: string, href?: string): NavigationLink | undefined {
|
||||||
namespace: string,
|
const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, "");
|
||||||
href?: string,
|
|
||||||
): NavigationLink | undefined {
|
|
||||||
const currentUrl = `/${namespace}/${href}`
|
|
||||||
.replace(/\/+/g, "/")
|
|
||||||
.replace(/\/$/, "");
|
|
||||||
|
|
||||||
const foundLink = navigation
|
const foundLink = navigation
|
||||||
.flatMap((section) => section.links)
|
.flatMap((section) => section.links)
|
||||||
.find((link) => {
|
.find((link) => {
|
||||||
return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
|
return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
|
||||||
});
|
});
|
||||||
|
|
||||||
return foundLink;
|
return foundLink;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Introduction au Frontend : Langages et technologies"
|
|
||||||
description:
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
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";
|
|
||||||
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
---
|
|
||||||
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.
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
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} />
|
|
||||||
),
|
|
||||||
};
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
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";
|
|
||||||
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
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";
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user