docs/html #25
@ -8,7 +8,7 @@
|
|||||||
.dark .token.rule,
|
.dark .token.rule,
|
||||||
.dark .token.pseudo-class,
|
.dark .token.pseudo-class,
|
||||||
.dark .token.important {
|
.dark .token.important {
|
||||||
color: #CB5FDE;
|
color: #cb5fde;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .token.comment,
|
.dark .token.comment,
|
||||||
@ -25,16 +25,16 @@
|
|||||||
.dark .token.attr-value,
|
.dark .token.attr-value,
|
||||||
.dark .token.class,
|
.dark .token.class,
|
||||||
.dark .token.string {
|
.dark .token.string {
|
||||||
color: #89CA6C;
|
color: #89ca6c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .token.property,
|
.dark .token.property,
|
||||||
.dark .token.tag {
|
.dark .token.tag {
|
||||||
color: #E3596F;
|
color: #e3596f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .token.function-variable {
|
.dark .token.function-variable {
|
||||||
color: #61AFEF;
|
color: #61afef;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Light mode */
|
/** Light mode */
|
||||||
@ -42,13 +42,13 @@
|
|||||||
.token.attr-value,
|
.token.attr-value,
|
||||||
.token.class,
|
.token.class,
|
||||||
.token.string {
|
.token.string {
|
||||||
color: #50A14F;
|
color: #50a14f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.function-variable,
|
.token.function-variable,
|
||||||
.token.generic-function,
|
.token.generic-function,
|
||||||
.token.function {
|
.token.function {
|
||||||
color: #4078F2;
|
color: #4078f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.module,
|
.token.module,
|
||||||
@ -56,28 +56,29 @@
|
|||||||
.token.rule,
|
.token.rule,
|
||||||
.token.pseudo-class,
|
.token.pseudo-class,
|
||||||
.token.important {
|
.token.important {
|
||||||
color: #A626A4;
|
color: #a626a4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.property,
|
.token.property,
|
||||||
.token.tag,
|
.token.tag,
|
||||||
.token.constant {
|
.token.constant {
|
||||||
color: #E55649;
|
color: #e55649;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.generic,
|
.token.generic,
|
||||||
.token.attr-name,
|
.token.attr-name,
|
||||||
|
.token.entity,
|
||||||
.token.boolean,
|
.token.boolean,
|
||||||
.token.number,
|
.token.number,
|
||||||
.token.class-name {
|
.token.class-name {
|
||||||
color: #C18401;
|
color: #c18401;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.comment,
|
.token.comment,
|
||||||
.token.combinator {
|
.token.combinator {
|
||||||
color: #A0A1A7;
|
color: #a0a1a7;
|
||||||
}
|
}
|
||||||
.token.operator,
|
.token.operator,
|
||||||
.token.builtin {
|
.token.builtin {
|
||||||
color: #0184BC;
|
color: #0184bc;
|
||||||
}
|
}
|
||||||
@ -104,6 +104,22 @@ export const navigation: NavigationSection[] = [
|
|||||||
type: navigationsTypes.DOCUMENTATIONS,
|
type: navigationsTypes.DOCUMENTATIONS,
|
||||||
position: "auto",
|
position: "auto",
|
||||||
links: [
|
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: "Formulaires", href: "/docs/html/formulaires" },
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "React",
|
title: "React",
|
||||||
href: "/docs/react",
|
href: "/docs/react",
|
||||||
|
|||||||
@ -7,39 +7,40 @@ import buildTitle from "./buildTitle";
|
|||||||
export type Data = Awaited<ReturnType<typeof data>>;
|
export type Data = Awaited<ReturnType<typeof data>>;
|
||||||
|
|
||||||
export async function data(pageContext: PageContext) {
|
export async function data(pageContext: PageContext) {
|
||||||
const config = useConfig();
|
const config = useConfig();
|
||||||
await docCache.waitingForCache(20000);
|
await docCache.waitingForCache(20000);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
exports: { frontmatter },
|
exports: { frontmatter },
|
||||||
urlParsed,
|
urlParsed,
|
||||||
} = pageContext;
|
} = pageContext;
|
||||||
const isRoot = urlParsed.pathname === "/";
|
const isRoot = urlParsed.pathname === "/";
|
||||||
|
|
||||||
config({
|
config({
|
||||||
title: buildTitle(isRoot ? undefined : frontmatter?.title),
|
title: buildTitle(isRoot ? undefined : frontmatter?.title),
|
||||||
description: frontmatter?.description,
|
description: frontmatter?.description,
|
||||||
});
|
});
|
||||||
|
|
||||||
let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
|
let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
|
||||||
if (cachePathname === "") cachePathname = "index";
|
if (cachePathname === "") cachePathname = "index";
|
||||||
|
|
||||||
const doc = docCache.get(cachePathname);
|
const doc = docCache.get(cachePathname);
|
||||||
|
console.log(doc);
|
||||||
|
|
||||||
if (!doc) {
|
if (!doc) {
|
||||||
console.error(
|
console.error(
|
||||||
`DocCache: No doc found for ${cachePathname}. This is a bug!`,
|
`DocCache: No doc found for ${cachePathname}. This is a bug!`,
|
||||||
"Please report it to the maintainers.",
|
"Please report it to the maintainers.",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
sections: doc?.sections || [],
|
sections: doc?.sections || [],
|
||||||
frontmatter,
|
frontmatter,
|
||||||
docs: docCache.orderByLastEdit({
|
docs: docCache.orderByLastEdit({
|
||||||
limit: 2,
|
limit: 2,
|
||||||
includedBasePaths: ["docs", "certifications"],
|
includedBasePaths: ["docs", "certifications"],
|
||||||
excludedFileNames: [cachePathname, "docs", "certifications"],
|
excludedFileNames: [cachePathname, "docs", "certifications"],
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
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";
|
||||||
|
|
||||||
108
app/pages/docs/html/+Page.mdx
Normal file
108
app/pages/docs/html/+Page.mdx
Normal file
@ -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.
|
||||||
|
|
||||||
|
<Callout type="note" title="Langage de programmation" collapsible>
|
||||||
|
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.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
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 :
|
||||||
|
- `<!DOCTYPE html>` : Indique au navigateur que le document est un fichier HTML.
|
||||||
|
- `<html>` : L'élément racine qui englobe tout le contenu de la page.
|
||||||
|
- `<head>` : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc.
|
||||||
|
- `<body>` : 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 :
|
||||||
|
|
||||||
|
<tabs.htmlBase />
|
||||||
|
|
||||||
|
<Callout type="question" title="C'est quoi la balise `<!-- -->` ?">
|
||||||
|
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.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
### La balise \<head\>
|
||||||
|
|
||||||
|
Dans l'exemple ci-dessus, on peut voir que la balise `<head>` contient plusieurs éléments importants :
|
||||||
|
|
||||||
|
- `<meta charset="UTF-8">` : 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.
|
||||||
|
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` : Indique au navigateur comment afficher la page sur les appareils mobiles. Cela permet de rendre la page responsive.
|
||||||
|
- `<title>` : 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 !
|
||||||
70
app/pages/docs/html/attributs/+Page.mdx
Normal file
70
app/pages/docs/html/attributs/+Page.mdx
Normal file
@ -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.
|
||||||
34
app/pages/docs/html/attributs/tabs.tsx
Normal file
34
app/pages/docs/html/attributs/tabs.tsx
Normal file
@ -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} />,
|
||||||
|
};
|
||||||
83
app/pages/docs/html/balise-head/+Page.mdx
Normal file
83
app/pages/docs/html/balise-head/+Page.mdx
Normal file
@ -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.
|
||||||
42
app/pages/docs/html/balise-head/tabs.tsx
Normal file
42
app/pages/docs/html/balise-head/tabs.tsx
Normal file
@ -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} />
|
||||||
|
),
|
||||||
|
};
|
||||||
204
app/pages/docs/html/balises-de-base/+Page.mdx
Normal file
204
app/pages/docs/html/balises-de-base/+Page.mdx
Normal file
@ -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 `<head>` 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 `<body>`.
|
||||||
|
|
||||||
|
## 🏗️ La balise \<body\>
|
||||||
|
|
||||||
|
La balise `<body>` 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 `<body>` :
|
||||||
|
|
||||||
|
<tabs.htmlBasicBody />
|
||||||
|
|
||||||
|
On peut voir que la balise `<body>` contient plusieurs éléments :
|
||||||
|
- `<h1>` : Un titre de premier niveau.
|
||||||
|
- `<p>` : Un paragraphe de texte.
|
||||||
|
- `<img>` : Une image.
|
||||||
|
- `<a>` : 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 :
|
||||||
|
|
||||||
|
- `<h1>` : Titre de premier niveau _(le plus important)_.
|
||||||
|
- `<h2>` : Titre de deuxième niveau.
|
||||||
|
- `<h3>` : Titre de troisième niveau.
|
||||||
|
- `<h4>` : Titre de quatrième niveau.
|
||||||
|
- `<h5>` : Titre de cinquième niveau.
|
||||||
|
- `<h6>` : 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.
|
||||||
|
|
||||||
|
<Callout type="warning" title="Styles par défaut des titres et sous-titres">
|
||||||
|
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 `<h1>` et applique-lui un style CSS pour le personnaliser.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
Il est recommandé d'utiliser une seule balise `<h1>` par page pour le titre principal.
|
||||||
|
Ni plus, ni moins !
|
||||||
|
|
||||||
|
En revanche, tu peux utiliser plusieurs balises `<h2>`, `<h3>`, etc. pour les sous-titres.
|
||||||
|
|
||||||
|
Les balises `<h2>` jusqu'à `<h6>` 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.
|
||||||
|
|
||||||
|
<Callout type="warning" title="Hierarchie des titres">
|
||||||
|
Il est préférable d'utiliser une balise `<h2>` pour un sous-titre qui suit un `<h1>`, et de ne pas sauter directement à un `<h3>` ou `<h4>`.
|
||||||
|
Cependant, tu peux totalement passer d'un `<h6>` à un `<h2>` 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.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
### 2. Paragraphes de texte
|
||||||
|
|
||||||
|
En reprenant l'exemple précédent, on peut voir que la balise `<p>` 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 :
|
||||||
|
- `<strong>`
|
||||||
|
- Indique un texte comme étant important _(sémantique)_.
|
||||||
|
- Par défaut _(selon le navigateur)_, le texte est affiché en gras.
|
||||||
|
- `<em>`
|
||||||
|
- Indique un texte comme étant mis en emphase _(sémantique)_.
|
||||||
|
- Par défaut _(selon le navigateur)_, le texte est affiché en italique.
|
||||||
|
- `<u>`
|
||||||
|
- Indique un texte comme étant souligné _(non sémantique)_.
|
||||||
|
- Par défaut _(selon le navigateur)_, le texte est affiché avec un soulignement.
|
||||||
|
- `<b>`
|
||||||
|
- Indique un texte comme étant en gras _(non sémantique)_.
|
||||||
|
- Par défaut _(selon le navigateur)_, le texte est affiché en gras.
|
||||||
|
- `<i>`
|
||||||
|
- Indique un texte comme étant en italique _(non sémantique)_.
|
||||||
|
- Par défaut _(selon le navigateur)_, le texte est affiché en italique.
|
||||||
|
|
||||||
|
<Callout type="question" title="Quelles sont les différences entre les balises `<strong>` et `<b>` ?">
|
||||||
|
La balise `<strong>` est utilisée pour indiquer que le texte est important, tandis que la balise `<b>` est utilisée pour appliquer un style de gras sans signification sémantique.
|
||||||
|
|
||||||
|
Il en est de même pour les balises `<em>` et `<i>` 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.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
## 🔗 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 `<a>` _(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 :
|
||||||
|
|
||||||
|
<tabs.htmlBasicAnchor />
|
||||||
|
|
||||||
|
## 🖼️ 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 `<img>`.
|
||||||
|
|
||||||
|
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 `<ul>` et `<ol>` sont utilisées pour créer des listes non ordonnées et ordonnées, respectivement.
|
||||||
|
|
||||||
|
- `<ul>` : Crée une liste non ordonnée _(avec des puces)_.
|
||||||
|
- `<ol>` : Crée une liste ordonnée _(avec des numéros)_.
|
||||||
|
|
||||||
|
On utilise la balise `<li>` pour définir chaque élément de la liste.
|
||||||
|
|
||||||
|
<tabs.htmlBasicList />
|
||||||
|
|
||||||
|
### 7. Tableaux
|
||||||
|
|
||||||
|
Les tableaux sont utilisés pour organiser des données sous forme de lignes et de colonnes.
|
||||||
|
Il existe deux catégories de balises pour les tableaux :
|
||||||
|
|
||||||
|
- **Structure essentielle**
|
||||||
|
- `<table>` : Définit le tableau.
|
||||||
|
- `<tr>` : Définit une ligne du tableau.
|
||||||
|
- `<td>` : Définit une cellule de données dans une ligne.
|
||||||
|
- `<th>` : Définit une cellule d'en-tête dans une ligne.
|
||||||
|
- **Structure optionnelle**
|
||||||
|
- `<thead>` : Définit l'en-tête du tableau.
|
||||||
|
- `<tbody>` : Définit le corps du tableau.
|
||||||
|
- `<tfoot>` : Définit le pied de page du tableau.
|
||||||
|
|
||||||
|
<tabs.htmlBasicTable />
|
||||||
|
|
||||||
|
## 📦 Divisions sémantiques
|
||||||
|
|
||||||
|
Les balises `<header>` _(à ne pas confondre avec la balise `<head>`)_, `<main>`, `<section>`, `<article>`, `<aside>` et `<footer>` fournissent un contexte sémantique pour différents types de contenu sur une page web.
|
||||||
|
|
||||||
|
Elles sont utilisées pour améliorer l'accessibilité, le référencement et la compréhension du contenu par les
|
||||||
|
navigateurs et les moteurs de recherche.
|
||||||
|
|
||||||
|
### 8. En-tête de page et de section
|
||||||
|
|
||||||
|
La balise `<header>` est utilisée pour définir l'en-tête d'une page ou d'une section.
|
||||||
|
|
||||||
|
### 9. Contenu principal
|
||||||
|
|
||||||
|
La balise `<main>` est utilisée pour définir le contenu principal de la page.
|
||||||
|
Elle ne peut être utilisée qu'une seule fois par page et doit contenir le contenu principal de la page, en excluant l'en-tête, le pied de page et les barres latérales.
|
||||||
|
|
||||||
|
### 10. Sections
|
||||||
|
|
||||||
|
La balise `<section>` regroupe un contenu thématique ou une sous-section de la page.
|
||||||
|
Elle est généralement utilisée pour diviser le contenu en sections logiques.
|
||||||
|
|
||||||
|
### 11. Articles
|
||||||
|
|
||||||
|
La balise `<article>` représente un contenu autonome, comme un article de blog ou une publication.
|
||||||
|
|
||||||
|
### 12. Contenu complémentaire
|
||||||
|
|
||||||
|
La balise `<aside>` est utilisée pour définir un contenu complémentaire ou secondaire, comme une barre latérale ou une citation.
|
||||||
|
|
||||||
|
### 13. Pied de page et de section
|
||||||
|
|
||||||
|
La balise `<footer>` est utilisée pour définir le pied de page d'une page ou d'une section.
|
||||||
|
|
||||||
|
### 14. Conteneurs génériques
|
||||||
|
|
||||||
|
La balise `<div>` est un conteneur générique utilisé pour regrouper des éléments sans signification sémantique.
|
||||||
|
Il s'agit d'une balise des plus courantes en HTML, mais qui est souvent utilisée à tort.
|
||||||
|
|
||||||
|
On préférera l'utiliser pour regrouper des éléments qui n'ont pas de signification sémantique ou lorsque l'on souhaite appliquer un style CSS à un groupe d'éléments.
|
||||||
|
Autrement, on utilisera les balises sémantiques appropriées pour donner du sens au contenu !
|
||||||
|
|
||||||
|
## 📚 Conclusion
|
||||||
|
|
||||||
|
Cet article a présenté quelques-unes des balises HTML les plus courantes utilisées pour structurer le contenu d'une page web.
|
||||||
|
|
||||||
|
Bien évidemment il en existe beaucoup d'autres, mais celles-ci sont les plus utilisées et les plus importantes pour créer une page web fonctionnelle et accessible.
|
||||||
113
app/pages/docs/html/balises-de-base/tabs.tsx
Normal file
113
app/pages/docs/html/balises-de-base/tabs.tsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { Snippet } from "@/components/Snippet";
|
||||||
|
|
||||||
|
const htmlBasicBodySnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple de la balise body",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head></head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Bienvenue sur mon site !</h1>
|
||||||
|
<p>Ceci est un exemple de page HTML.</p>
|
||||||
|
<img src="image.jpg" alt="Une image d'exemple">
|
||||||
|
<a href="https://www.example.com">Visitez notre site</a>
|
||||||
|
</body>
|
||||||
|
</html>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlBasicAnchorSnippets = [
|
||||||
|
{
|
||||||
|
name: "Lien hypertexte vers une page",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<a href="https://memento-dev.fr">Memento Dev</a>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Lien hypertexte vers une section de la même page",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<a href="#4-liens-hypertextes">4. Liens hypertextes</a>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlBasicListSnippets = [
|
||||||
|
{
|
||||||
|
name: "Liste non ordonnée",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<ul>
|
||||||
|
<li>Élément A</li>
|
||||||
|
<li>Élément B</li>
|
||||||
|
<li>Élément C</li>
|
||||||
|
</ul>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Liste ordonnée",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<ol>
|
||||||
|
<li>Élément 1</li>
|
||||||
|
<li>Élément 2</li>
|
||||||
|
<li>Élément 3</li>
|
||||||
|
</ol>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlBasicTableSnippets = [
|
||||||
|
{
|
||||||
|
name: "Tableau simple",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<table>
|
||||||
|
<tr>
|
||||||
|
<th>Nom</th>
|
||||||
|
<th>Âge</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Christophe</td>
|
||||||
|
<td>30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Élodie</td>
|
||||||
|
<td>25</td>
|
||||||
|
</tr>
|
||||||
|
</table>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Tableau avec structure",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Nom</th>
|
||||||
|
<th>Âge</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Christophe</td>
|
||||||
|
<td>30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Élodie</td>
|
||||||
|
<td>25</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Crédit : © Source</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
htmlBasicBody: () => <Snippet snippets={htmlBasicBodySnippets} />,
|
||||||
|
htmlBasicAnchor: () => <Snippet snippets={htmlBasicAnchorSnippets} />,
|
||||||
|
htmlBasicList: () => <Snippet snippets={htmlBasicListSnippets} />,
|
||||||
|
htmlBasicTable: () => <Snippet snippets={htmlBasicTableSnippets} />,
|
||||||
|
};
|
||||||
105
app/pages/docs/html/formulaires/+Page.mdx
Normal file
105
app/pages/docs/html/formulaires/+Page.mdx
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
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";
|
||||||
|
import tabs from "./tabs";
|
||||||
|
|
||||||
|
Les formulaires sont une partie essentielle du développement web, permettant aux utilisateurs d'interagir avec les pages en soumettant des données.
|
||||||
|
|
||||||
|
Dans cet article, nous allons explorer comment créer des formulaires interactifs à l'aide de HTML et aborder les éléments clés, les types d'entrées et la validation des données.
|
||||||
|
|
||||||
|
## 📝 Introduction aux formulaires HTML
|
||||||
|
|
||||||
|
La balise `<form>` en HTML est utilisée pour regrouper un ou plusieurs éléments de formulaire.
|
||||||
|
Ces éléments peuvent inclure des champs de texte, des cases à cocher et bien plus encore.
|
||||||
|
|
||||||
|
Pour créer un formulaire simple en HTML, il suffit d'ajouter la balise `<form>` autour des éléments du formulaire.
|
||||||
|
|
||||||
|
<tabs.htmlBasicEmptyForm />
|
||||||
|
|
||||||
|
## 🖱️ Éléments de formulaire HTML
|
||||||
|
|
||||||
|
Il existe plusieurs éléments clés qui facilitent la création de formulaires interactifs en HTML.
|
||||||
|
Voici quelques-uns des éléments les plus courants :
|
||||||
|
|
||||||
|
### Champs de texte
|
||||||
|
|
||||||
|
Les champs de texte permettent aux utilisateurs d'entrer du texte dans un formulaire. La longueur et le format du texte peuvent être précisés à l'aide des attributs HTML tels que `maxlength` et `pattern`.
|
||||||
|
|
||||||
|
<tabs.htmlControlledTextInput />
|
||||||
|
|
||||||
|
### Boutons radio
|
||||||
|
|
||||||
|
Les boutons radio permettent aux utilisateurs de sélectionner une seule option parmi un gropue d'options.
|
||||||
|
Chaque bouton radio doit avoir le même attribut `name` pour qu'ils soient regroupés et que l'utilisateur ne puisse en sélectionne qu'un seul parmi eux.
|
||||||
|
|
||||||
|
<tabs.htmlRadioButton />
|
||||||
|
|
||||||
|
### Cases à cocher
|
||||||
|
|
||||||
|
Les cases à cocher reprennent le même principe que les boutons radio, mais elles permettent aux utilisateurs de sélectionner plusieurs options.
|
||||||
|
Chaque case à cocher doit avoir un attribut `name` unique pour identifier la sélection de l'utilisateur.
|
||||||
|
|
||||||
|
<tabs.htmlCheckbox />
|
||||||
|
|
||||||
|
### Menu déroulant
|
||||||
|
|
||||||
|
Les menus déroulants permettent aux utilisateurs de choisir une ou plusieurs options parmi une liste de valeurs prédéfinies.
|
||||||
|
Chaque option est spécifiée à l'aide d'une balise `<option>` imbriquée dans la balise `<select>`.
|
||||||
|
|
||||||
|
<tabs.htmlSelect />
|
||||||
|
|
||||||
|
### Zone de texte
|
||||||
|
|
||||||
|
Les zones de texte permettent aux utilisateurs d'entrer plusieurs lignes de texte.
|
||||||
|
Elles sont créées à l'aide de la balise `<textarea>`, qui peut être configurée pour avoir une taille spécifique à l'aide des attributs `rows` et `cols`.
|
||||||
|
|
||||||
|
<tabs.htmlTextArea />
|
||||||
|
|
||||||
|
### Bouton d'envoi
|
||||||
|
|
||||||
|
Le bouton d'envoi permet aux utilisateurs de valider et d'envoyer les données du formulaire au serveur. Une fois que le formulaire est soumis, les données sont envoyées à l'URL spécifiée dans l'attribut `action` de la balise `<form>`.
|
||||||
|
|
||||||
|
Ce bouton est créé à l'aide de la balise `<button type="submit">` ou `<input type="submit">`.
|
||||||
|
|
||||||
|
<tabs.htmlSubmitButton />
|
||||||
|
|
||||||
|
## 🔄 Les types d'entrées pour les éléments du formulaire
|
||||||
|
|
||||||
|
Les champs de texte (`<input type="text">`) sont les plus courants, mais il existe d'autres types qui offrent des fonctionnalités supplémentaires.
|
||||||
|
|
||||||
|
Toujours dans la balise `<input>`, tu peux spécifier le type d'entrée à l'aide de l'attribut `type`.
|
||||||
|
Voici quelques types d'entrées courants :
|
||||||
|
|
||||||
|
- `text` : Champ de texte standard.
|
||||||
|
- `email` : Champ de texte pour les adresses e-mail.
|
||||||
|
- `password` : Champ de texte masqué pour les mots de passe.
|
||||||
|
- `number` : Champ de texte pour les nombres.
|
||||||
|
- `date` : Champ de texte pour les dates.
|
||||||
|
- `url` : Champ de texte pour les URL.
|
||||||
|
- `tel` : Champ de texte pour les numéros de téléphone.
|
||||||
|
- `color` : Sélecteur de couleur.
|
||||||
|
- `file` : Champ de texte pour le téléchargement de fichiers.
|
||||||
|
- `range` : Curseur pour sélectionner une valeur dans une plage.
|
||||||
|
|
||||||
|
## 🔐 Validation des données dans un formulaire HTML
|
||||||
|
|
||||||
|
La validation des données est essentielle pour garantir que les informations soumises par l'utilisateur sont correctes et complètes. HTML offre plusieurs méthodes de validation de données à l'aide d'attributs intégrés.
|
||||||
|
|
||||||
|
### Attributs de validation courants
|
||||||
|
|
||||||
|
- L'attribut `required` : Indique qu'un champ est obligatoire et doit être rempli avant la soumission du formulaire.
|
||||||
|
- L'attribut `minlength` : Définit la longueur minimale requise pour un champ de texte.
|
||||||
|
- L'attribut `maxlength` : Définit la longueur maximale autorisée pour un champ de texte.
|
||||||
|
- L'attribut `pattern` : Définit une expression régulière _(RegEx)_ que le champ doit respecter.
|
||||||
|
|
||||||
|
### Validation côté serveur
|
||||||
|
|
||||||
|
Bien que la validation des données côté client soit pratique et rapide à mettre en place, elle n'est pas suffisante pour garantir la sécurité et l'intégrité des données. Il est toujours essentiel de valider les données côté serveur avant d'autoriser leur traitement ou leur stockage dans une base de données.
|
||||||
|
|
||||||
|
## 📚 Conclusion
|
||||||
|
|
||||||
|
Les formulaires HTML sont un élément essentiel du développement web, permettant aux utilisateurs d'interagir avec les pages et de soumettre des données.
|
||||||
135
app/pages/docs/html/formulaires/tabs.tsx
Normal file
135
app/pages/docs/html/formulaires/tabs.tsx
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
import { Snippet } from "@/components/Snippet";
|
||||||
|
|
||||||
|
const htmlBasicEmptyFormSnippets = [
|
||||||
|
{
|
||||||
|
name: "Déclaration d'un formulaire HTML",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<form>
|
||||||
|
<!-- Éléments du formulaire -->
|
||||||
|
</form>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlControlledTextInputSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple d'un champ de texte contrôlé",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<input
|
||||||
|
type="text"
|
||||||
|
maxlength="20"
|
||||||
|
pattern="[a-zA-Z0-9]{1,20}"
|
||||||
|
>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlRadioButtonSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple d'un groupe de boutons radio",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<input
|
||||||
|
type="radio"
|
||||||
|
name="genre"
|
||||||
|
value="male"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="genre"
|
||||||
|
value="female"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="genre"
|
||||||
|
value="other"
|
||||||
|
>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlCheckboxSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple d'une case à cocher",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<input
|
||||||
|
type="checkbox"
|
||||||
|
name="newsletter"
|
||||||
|
value="subscribe"
|
||||||
|
>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Exemple d'un groupe de cases à cocher",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<input
|
||||||
|
type="checkbox"
|
||||||
|
name="interests"
|
||||||
|
value="sports"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="interests"
|
||||||
|
value="music"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="interests"
|
||||||
|
value="movies"
|
||||||
|
>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlSelectSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple d'une liste déroulante",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<select name="pays">
|
||||||
|
<option value="france">France</option>
|
||||||
|
<option value="espagne">Espagne</option>
|
||||||
|
<option value="italie">Italie</option>
|
||||||
|
<option value="allemagne">Allemagne</option>
|
||||||
|
<option value="royaume-uni">Royaume-Uni</option>
|
||||||
|
</select>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Exemple d'une liste déroulante avec plusieurs options",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<select name="langues" multiple>
|
||||||
|
<option value="francais">Français</option>
|
||||||
|
<option value="anglais">Anglais</option>
|
||||||
|
<option value="espagnol">Espagnol</option>
|
||||||
|
<option value="allemand">Allemand</option>
|
||||||
|
<option value="italien">Italien</option>
|
||||||
|
</select>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlTextAreaSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple d'une zone de texte",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<textarea name="commentaire" rows="4" cols="50">
|
||||||
|
</textarea>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlSubmitButtonSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple d'un bouton de soumission",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<button type="submit">Envoyer</button>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Exemple d'un input de type submit",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<input type="submit" value="Envoyer">`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
htmlBasicEmptyForm: () => <Snippet snippets={htmlBasicEmptyFormSnippets} />,
|
||||||
|
htmlControlledTextInput: () => (
|
||||||
|
<Snippet snippets={htmlControlledTextInputSnippets} />
|
||||||
|
),
|
||||||
|
htmlRadioButton: () => <Snippet snippets={htmlRadioButtonSnippets} />,
|
||||||
|
htmlCheckbox: () => <Snippet snippets={htmlCheckboxSnippets} />,
|
||||||
|
htmlSelect: () => <Snippet snippets={htmlSelectSnippets} />,
|
||||||
|
htmlTextArea: () => <Snippet snippets={htmlTextAreaSnippets} />,
|
||||||
|
htmlSubmitButton: () => <Snippet snippets={htmlSubmitButtonSnippets} />,
|
||||||
|
};
|
||||||
84
app/pages/docs/html/tabs.tsx
Normal file
84
app/pages/docs/html/tabs.tsx
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { Snippet } from "@/components/Snippet";
|
||||||
|
|
||||||
|
const htmlBaseSnippets = [
|
||||||
|
{
|
||||||
|
name: "Exemple de structure HTML de base",
|
||||||
|
codeLanguage: "html",
|
||||||
|
withLineNumbers: true,
|
||||||
|
code: `<!-- On indique au navigateur que le document est en HTML -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<!-- On indique la langue du document (ici, en français) -->
|
||||||
|
<html lang="fr">
|
||||||
|
|
||||||
|
<!-- On indique les paramètres de la page... -->
|
||||||
|
<head>
|
||||||
|
<!-- ... comme le jeu de caractères utilisé (UTF-8)... -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<!-- ... la compatibilité avec les navigateurs... -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<!-- ... le titre de la page... -->
|
||||||
|
<title>Mon super site</title>
|
||||||
|
|
||||||
|
<!-- ... et la description de la page... -->
|
||||||
|
<meta name="description" content="Ceci est un exemple de page HTML.">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<!-- On indique le début du corps de la page -->
|
||||||
|
<!-- Le corps de la page contient le contenu visible par l'utilisateur -->
|
||||||
|
<body>
|
||||||
|
<!-- On indique le début d'un en-tête -->
|
||||||
|
<header>
|
||||||
|
<!-- On indique le titre principal de la page -->
|
||||||
|
<h1>Bienvenue sur ma page HTML</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- On indique le début du contenu principal -->
|
||||||
|
<main>
|
||||||
|
<!-- On indique un sous-titre -->
|
||||||
|
<h2>Voici un exemple de contenu principal</h2>
|
||||||
|
|
||||||
|
<!-- On indique un paragraphe -->
|
||||||
|
<p>Ceci est un exemple de paragraphe dans le contenu principal.</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- On indique le début d'un pied de page -->
|
||||||
|
<footer>
|
||||||
|
<!-- On indique un texte de copyright -->
|
||||||
|
<p>© 2023 Mon Site Web</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const htmlAttributesSnippets = [
|
||||||
|
{
|
||||||
|
name: "Lien hypertexte",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<!-- On indique un lien hypertexte -->
|
||||||
|
<!-- \`href\` est l'attribut qui indique la destination du lien -->
|
||||||
|
<a href="https://www.example.com">Visitez notre site</a>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Image",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<!-- On indique une image -->
|
||||||
|
<!-- \`src\` est l'attribut qui indique l'URL de l'image -->
|
||||||
|
<!-- \`alt\` est l'attribut qui fournit une description de l'image -->
|
||||||
|
<img src="https://www.example.com/image.jpg" alt="Description de l'image">`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Classes CSS",
|
||||||
|
codeLanguage: "html",
|
||||||
|
code: `<!-- On applique plusieurs classes CSS à un élément -->
|
||||||
|
<div class="ma-classe autre-classe">`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
|
||||||
|
htmlAttributes: () => <Snippet snippets={htmlAttributesSnippets} />,
|
||||||
|
};
|
||||||
@ -1,51 +1,44 @@
|
|||||||
import { createEffect, createSignal } from "solid-js";
|
import { createEffect, createSignal } from "solid-js";
|
||||||
|
|
||||||
export function ReadProgressBar() {
|
export function ReadProgressBar() {
|
||||||
const articleContentElement: HTMLElement | null =
|
const articleContentElement: HTMLElement | null = document.getElementById("article-content");
|
||||||
document.getElementById("article-content");
|
if (!articleContentElement) return null;
|
||||||
if (!articleContentElement) return null;
|
|
||||||
|
|
||||||
const [width, setWidth] = createSignal("0%");
|
const [width, setWidth] = createSignal("0%");
|
||||||
|
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
const articleHeight = articleContentElement.scrollHeight;
|
const articleHeight = articleContentElement.scrollHeight;
|
||||||
const topPosition = articleContentElement.getBoundingClientRect().top;
|
const topPosition = articleContentElement.getBoundingClientRect().top;
|
||||||
const windowHeight = window.innerHeight;
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
if (articleHeight <= windowHeight) {
|
if (articleHeight <= windowHeight) {
|
||||||
setWidth("100%");
|
setWidth("100%");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const elementScrollTop = -topPosition;
|
const elementScrollTop = -topPosition;
|
||||||
const scrollableHeight = articleHeight - windowHeight;
|
const scrollableHeight = articleHeight - windowHeight;
|
||||||
const percentage = (elementScrollTop / scrollableHeight) * 100;
|
const percentage = (elementScrollTop / scrollableHeight) * 100;
|
||||||
const clampedPercentage = Math.max(0, Math.min(100, percentage));
|
const clampedPercentage = Math.max(0, Math.min(100, percentage));
|
||||||
|
|
||||||
setWidth(`${clampedPercentage}%`);
|
setWidth(`${clampedPercentage}%`);
|
||||||
};
|
};
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
window.addEventListener("scroll", handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
window.addEventListener("resize", handleScroll);
|
window.addEventListener("resize", handleScroll);
|
||||||
|
|
||||||
handleScroll();
|
handleScroll();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("scroll", handleScroll);
|
window.removeEventListener("scroll", handleScroll);
|
||||||
window.removeEventListener("resize", handleScroll);
|
window.removeEventListener("resize", handleScroll);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div aria-hidden="true" class="fixed inset-x-0 bottom-0 lg:top-0 z-50 h-1 w-full bg-violet-50 pointer-events-none">
|
||||||
aria-hidden="true"
|
<div class="bg-violet-300 h-full transition-all duration-300 ease-out" style={{ width: width() }} />
|
||||||
class="fixed inset-x-0 bottom-0 lg:top-0 z-50 h-1 w-full bg-violet-50 pointer-events-none"
|
</div>
|
||||||
>
|
);
|
||||||
<div
|
|
||||||
class="bg-violet-300 h-full transition-all duration-300 ease-out"
|
|
||||||
style={{ width: width() }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,38 +15,55 @@ import path from "node:path";
|
|||||||
type RemoveCommentRules = (root: Root) => void;
|
type RemoveCommentRules = (root: Root) => void;
|
||||||
|
|
||||||
const removeCommentRules: RemoveCommentRules = (root) => {
|
const removeCommentRules: RemoveCommentRules = (root) => {
|
||||||
root.walkComments((comment) => {
|
root.walkComments((comment) => {
|
||||||
comment.remove();
|
comment.remove();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const __dirname = path.resolve();
|
const __dirname = path.resolve();
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
prismjsVitePlugin({
|
prismjsVitePlugin({
|
||||||
languages: ["javascript", "typescript", "tsx", "jsx", "css", "html", "bash", "nginx", "sql"],
|
languages: [
|
||||||
}),
|
"javascript",
|
||||||
vike(),
|
"typescript",
|
||||||
vikeSolid(),
|
"tsx",
|
||||||
mdx({
|
"jsx",
|
||||||
jsxImportSource: "solid-jsx",
|
"css",
|
||||||
remarkPlugins: [remarkFrontmatter, remarkHeadingId, remarkExtractFrontmatter],
|
"html",
|
||||||
}),
|
"bash",
|
||||||
tailwindcss(),
|
"nginx",
|
||||||
telefunc(),
|
"sql",
|
||||||
],
|
"json",
|
||||||
css: {
|
],
|
||||||
postcss: {
|
}),
|
||||||
plugins: [...(process.env.NODE_ENV === "production" ? [removeCommentRules] : [])],
|
vike(),
|
||||||
},
|
vikeSolid(),
|
||||||
},
|
mdx({
|
||||||
build: {
|
jsxImportSource: "solid-jsx",
|
||||||
target: "es2022",
|
remarkPlugins: [
|
||||||
},
|
remarkFrontmatter,
|
||||||
resolve: {
|
remarkHeadingId,
|
||||||
alias: {
|
remarkExtractFrontmatter,
|
||||||
"@": __dirname,
|
],
|
||||||
},
|
}),
|
||||||
},
|
tailwindcss(),
|
||||||
|
telefunc(),
|
||||||
|
],
|
||||||
|
css: {
|
||||||
|
postcss: {
|
||||||
|
plugins: [
|
||||||
|
...(process.env.NODE_ENV === "production" ? [removeCommentRules] : []),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
target: "es2022",
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": __dirname,
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user