GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs/html #25

Merged
GauthierWebDev merged 16 commits from docs/html into main 2025-05-13 13:37:11 +00:00
Conversation 0 Commits 16 Files Changed 16 +124 -52
5 changed files with 124 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e7ec34ea6a - Show all commits

23
app/layouts/prism.css
View File

@ -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;
} }

1
app/pages/+data.ts
View File

@ -25,6 +25,7 @@ export async function data(pageContext: PageContext) {
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(

40
app/pages/docs/html/+Page.mdx
View File

@ -5,6 +5,7 @@ tags: []
--- ---
import Callout from "@/components/Callout"; import Callout from "@/components/Callout";
import tabs from "./tabs";
HTML est un langage de balisage utilisé pour structurer le contenu des pages web. 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. Bien qu'il ne s'agisse pas d'un langage de programmation à proprement parler, il reste fondamental pour créer des sites web.
@ -14,7 +15,7 @@ Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de c
## 🤔 Qu'est-ce que le HTML ? ## 🤔 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. 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. Il s'agit du **squelette d'une page web**, qui définit la structure et le contenu de celle-ci.
<Callout type="question" title="Pourquoi HTML n'est pas un langage de programmation ?"> <Callout type="question" title="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. Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation.
@ -22,15 +23,32 @@ Il s'agit du squelette d'une page web, qui définit la structure et le contenu d
<Callout type="note" title="Langage de programmation" collapsible> <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. 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. Ces instructions peuvent inclure des calculs, des conditions, des boucles, etc.
Parmis les langages de programmation les plus connus, on peut citer :
- JavaScript
- Python
- Java
- C++
- C#
et bien d'autres !
</Callout> </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 !
</Callout>
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> </Callout>

52
app/pages/docs/html/tabs.tsx Normal file
View File

@ -0,0 +1,52 @@
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>
<!-- ... commme 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 d'une section -->
<section>
<!-- On indique un sous-titre -->
<h2>Voici un exemple de section</h2>
<!-- On indique un paragraphe -->
<p>Ceci est un exemple de paragraphe dans une section.</p>
</section>
<!-- On indique le début d'un pied de page -->
<footer>
<!-- On indique un texte de copyright -->
<p>&copy; 2023 Mon Site Web</p>
</footer>
</body>
</html>`,
},
];
export default {
htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
};

0
app/pages/docs/html/test.html Normal file
View File