Compare commits
2 Commits
67c9732ee5
...
42e68472ed
| Author | SHA1 | Date | |
|---|---|---|---|
| 42e68472ed | |||
| 6031b88792 |
@ -17,7 +17,8 @@ Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de c
|
|||||||
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 ?">
|
## 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.
|
||||||
|
|
||||||
<Callout type="note" title="Langage de programmation" collapsible>
|
<Callout type="note" title="Langage de programmation" collapsible>
|
||||||
@ -27,7 +28,6 @@ Il s'agit du **squelette d'une page web**, qui définit la structure et le conte
|
|||||||
|
|
||||||
Si on regarde la définition d'un langage de programmation, on peut voir que le HTML ne correspond pas à cette définition.
|
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 !
|
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.
|
Mais bon... savoir ça c'est bien : mais ça ne va pas nous aider à créer des pages web.
|
||||||
|
|
||||||
@ -52,3 +52,57 @@ Voici un exemple de code HTML simple :
|
|||||||
|
|
||||||
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.
|
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>
|
||||||
|
|
||||||
|
### 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 !
|
||||||
@ -13,7 +13,13 @@ const htmlBaseSnippets = [
|
|||||||
|
|
||||||
<!-- On indique les paramètres de la page... -->
|
<!-- On indique les paramètres de la page... -->
|
||||||
<head>
|
<head>
|
||||||
<!-- ... commme le titre de la page... -->
|
<!-- ... 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>
|
<title>Mon super site</title>
|
||||||
|
|
||||||
<!-- ... et la description de la page... -->
|
<!-- ... et la description de la page... -->
|
||||||
@ -29,13 +35,14 @@ const htmlBaseSnippets = [
|
|||||||
<h1>Bienvenue sur ma page HTML</h1>
|
<h1>Bienvenue sur ma page HTML</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- On indique le début d'une section -->
|
<!-- On indique le début du contenu principal -->
|
||||||
<section>
|
<main>
|
||||||
<!-- On indique un sous-titre -->
|
<!-- On indique un sous-titre -->
|
||||||
<h2>Voici un exemple de section</h2>
|
<h2>Voici un exemple de contenu principal</h2>
|
||||||
|
|
||||||
<!-- On indique un paragraphe -->
|
<!-- On indique un paragraphe -->
|
||||||
<p>Ceci est un exemple de paragraphe dans une section.</p>
|
<p>Ceci est un exemple de paragraphe dans le contenu principal.</p>
|
||||||
</section>
|
</main>
|
||||||
|
|
||||||
<!-- On indique le début d'un pied de page -->
|
<!-- On indique le début d'un pied de page -->
|
||||||
<footer>
|
<footer>
|
||||||
@ -47,6 +54,31 @@ const htmlBaseSnippets = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
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 {
|
export default {
|
||||||
htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
|
htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
|
||||||
|
htmlAttributes: () => <Snippet snippets={htmlAttributesSnippets} />,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
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%");
|
||||||
@ -38,14 +37,8 @@ export function ReadProgressBar() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
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
|
|
||||||
class="bg-violet-300 h-full transition-all duration-300 ease-out"
|
|
||||||
style={{ width: width() }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user