docs/html #25
@ -69,3 +69,89 @@ Elles permettent de structurer le contenu de la page et de créer une hiérarchi
|
|||||||
|
|
||||||
Il est important de respecter cette hiérarchie pour que le contenu soit facilement compréhensible par les utilisateurs et les moteurs de recherche.
|
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>
|
</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 />
|
||||||
@ -19,6 +19,95 @@ const htmlBasicBodySnippets = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
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 {
|
export default {
|
||||||
htmlBasicBody: () => <Snippet snippets={htmlBasicBodySnippets} />,
|
htmlBasicBody: () => <Snippet snippets={htmlBasicBodySnippets} />,
|
||||||
|
htmlBasicAnchor: () => <Snippet snippets={htmlBasicAnchorSnippets} />,
|
||||||
|
htmlBasicList: () => <Snippet snippets={htmlBasicListSnippets} />,
|
||||||
|
htmlBasicTable: () => <Snippet snippets={htmlBasicTableSnippets} />,
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user