update des balises

coursweb · May 15, 2024 · 36f337d · 36f337d
1 parent 6f9911e
commit 36f337d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 69 deletions.
diff --git a/10-html.md b/10-html.md
@@ -20,19 +20,6 @@ Le HTML n'est pas un langage de programmation, mais un langage de "marquage" (*m
 
 Le vocabulaire du langage HTML se compose de quelques 120 balises. Il n'est pas nécessaire de les connaître intégralement, certaines étant très spécifiques (p.ex. les balises des tableaux, ou des formulaires).
 
-Voici, pour commencer, les balises obligatoires pour un document HTML valide:
-
-* `<html>` : C'est la racine du document, se trouvant au début et à la fin du code.
-* `<head>` : L'en-tête, qui ne sera pas affiché, et contient diverses méta-informations (titre, auteur, mots-clés, liens vers des ressources à charger).
-* `<title>` : C'est le titre document. Il ne sera pas affiché dans le contenu de la page, mais dans la barre du navigateur (et dans les résultats de recherche Google).
-* `<body>` : Le corps du document. Tout le contenu visible se trouve dans cette balise.
-
-
-
-* L'hyperlien - `<a>` - qui permet de pointer vers une autre ressource en ligne.     
-* Les titres - `<h1>` à `<h6>` - permettant d'instaurer une structure interne à un document. Le H signifie *heading*.    
-* Le paragraphe - `<p>` - qui identifie un paragraphe de texte.
-
 Un exemple de balise hyperlien:
 
 ```html
@@ -41,48 +28,3 @@ Un exemple de balise hyperlien:
 
 Voir la liste des [balises les plus essentielles](balises-essentielles.html).
 
-
-### Balises structurantes
-
-Les nouvelles balises structurantes du HTML5: 
-
-- header  
-- section
-- article
-- nav
-- aside
-- footer
-
-Définitions:
-
-- **header** = Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
-- **section** = Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
-- **article** = Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
-- **nav** = Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
-- **aside** = Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu, mais qui peut apporter des informations supplémentaires.
-- **footer** = Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).
-
-
-## Pourquoi on ne peut pas mettre de DIV dans un P
-
-Historiquement, les éléments HTML peuvent se présenter de deux manières: sous forme de **bloc** ("block-level" elements) ou sous forme de **ligne** ("inline" elements). 
-
-Un élément "bloc" va toujours occuper toute la largeur à disposition, contrairement à l'élément "ligne", qui se limite à la place nécessaire, et tolère des éléments voisins. 
-
-Chaque élément possède un aspect par défaut, mais il est possible d'agir dessus avec la propriété CSS "display". On peut ainsi modifier simplement l'aspect d'un menu: en mode "display-bloc", ce sera un menu vertical. En mode "inline", cela devient un menu horizontal.
-
-Avec HTML5, ce mode binaire se complexifie, on se retrouve avec toute une liste de catégories de contenu: 
-
-- **Contenu de flux (Flow content)** - correspond de près au mode "block-level", et s'applique à la majorité des éléments. Notamment: `<div>`, `<article>`, `<blockquote>`, `<img>`, `<p>`...
-- **Contenu sectionnant (Sectioning content)** - les éléments qui définissent des sections: `<article>`, `<aside>`, `<nav>`, `<section>`
-- **Contenu de titre (Heading content)** - du contenu agissant comme en-tête: `<h1>`, `<h2>`, `<h3>` etc.
-- **Contenu phrasé (Phrasing content)** - le texte du document, tout ce qui peut être contenu dans un paragraphe, notamment: `<a>`, `<span>`. Correspond à peu près au mode "inline". Attention, `<a>` appartient à cette catégorie s'il contient *seulement* du contenu phrasé - sinon il devient Contenu de flux.
-- **Contenu intégré** - `<audio>`, `<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>`, `<video>`...
-- **Contenu interactif** - `<button>`, `<details>`, `<embed>`, `<iframe>`, `<keygen>`, `<label>`, `<select>`, et `<textarea>`.
-
-Là où cela devient important: certains éléments ne peuvent contenir *que* du "phrasing content". C'est le cas pour les balises `<p>` ou `<h1>`.  
-
-Plus d'informations: 
-
-- [La spécification HTML](https://dev.w3.org/html5/spec-preview/content-models.html).
-- *[Catégories de contenu](https://developer.mozilla.org/fr/docs/Web/HTML/Catégorie_de_contenu)*, documentation Mozilla Developer Network.
diff --git a/11-balises.md b/11-balises.md
@@ -12,11 +12,11 @@ Cette page présente une liste des balises HTML essentielles à connaître. Ce s
 
 -----|-----:
 `<section>` | Définit une section dans un document ([MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/section))
-`<article>` | Définit un article (un contenu autonome) ([MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/article))
-`<h1> - <h6>` | Définit un titre, sous-titre ou inter-titre (*headings*).
-`<header>` | Définit l'en-tête d'un document ou d'une section
-`<footer>` | Définit le pied d'un document ou d'une section 
-`<nav>` | Définit une section destinée à la navigation 
+`<article>` | Définit un article (une section de contenu indépendante) ([MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element/article))
+`<h1> - <h6>` | Définit un titre, sous-titre ou inter-titre (*heading*). Permet d'instaurer une structure interne à un document.
+`<header>` | Section d'introduction d'un article, d'une autre section ou du document entier (par exemple: en-tête de page)
+`<footer>` | Section de conclusion d'une section ou d'un article, voire du document entier (par exemple: pied de page) 
+`<nav>` | Une section destinée à la navigation, possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)
 
 Éléments de structure génériques:
 
@@ -27,12 +27,18 @@ Cette page présente une liste des balises HTML essentielles à connaître. Ce s
 ## Eléments de contenu
 
 -----|-----:
-`<a>` | Un hyperlien, avec l'attribut `href` indiquant la cible. 
+`<a>` | Un hyperlien, avec l'attribut `href` indiquant la cible. Permet de pointer vers une autre ressource en ligne
 `<p>` | Un paragraphe de texte 
 `<em>` | Du texte avec "emphase", rendu en italique. 
 `<strong>` | Du texte avec une importance forte, rendu en gras.
 `<br>` | Un retour de ligne simple (line break).
 
+Un exemple de balise hyperlien:
+
+```html
+<a href="https://example.com">Un Lien</a>
+```
+
 ## Listes
 
 Balises pour les listes:
@@ -74,19 +80,24 @@ Balises pour les médias:
 
 ## Balises générales ( méta-éléments)
 
-Ces balises se situent avant le contenu.
+Ces balises se situent avant le contenu. Certaines de ces balises sont obligatoires pour un document HTML valide:
 
 -----|-----:
 `<!DOCTYPE>` | Définit le type de document. Doit se trouver tout en début du code.
-`<html>` | Définit la racine d'un document HTML. Englobe tout le document. 
-`<head>` | Une section (invisible) en début de document, contenant des informations au sujet du document.
+`<html>` | Définit la racine d'un document HTML. Englobe tout le document (au début et à la fin du code). 
+* `<html>` : C'est la racine du document, se trouvant au début et à la fin du code.
+* `<head>` : L'en-tête, qui ne sera pas affiché, et contient diverses méta-informations au sujet du document (titre, auteur, mots-clés, liens vers des ressources à charger).
+* `<title>` : C'est le titre document. Il ne sera pas affiché dans le contenu de la page, mais dans la barre du navigateur (et dans les résultats de recherche Google).
+* `<body>` : Le corps du document. Tout le contenu visible se trouve dans cette balise.
+
+Eléments optionnels mais fréquents:
+
+-----|-----:
 `<meta>` | Définit des métadonnées.
-`<title>` | Définit le titre du document (affiché dans la barre du navigateur, pas dans le contenu de la page).
 `<link>` | Définit une relation entre un document et une ressource externe (le plus souvent, des feuilles de styles CSS).
 `<script>` | Définit un script qui sera exéctué par le navigateur.
 `<style>` | Définit des styles pour le document.
 `<!--...-->` | Définit un commentaire (code qui ne sera pas affiché).
-`<body>` | Délimite le contenu visible du document.
 
 Exemple:
 

diff --git a/90-FAQ.md b/90-FAQ.md
@@ -0,0 +1,29 @@
+---
+layout: page
+title: FAQ
+permalink: faq.html
+---
+
+## Pourquoi on ne peut pas mettre de DIV dans un P
+
+Historiquement, les éléments HTML peuvent se présenter de deux manières: sous forme de **bloc** ("block-level" elements) ou sous forme de **ligne** ("inline" elements). 
+
+Un élément "bloc" va toujours occuper toute la largeur à disposition, contrairement à l'élément "ligne", qui se limite à la place nécessaire, et tolère des éléments voisins. 
+
+Chaque élément possède un aspect par défaut, mais il est possible d'agir dessus avec la propriété CSS "display". On peut ainsi modifier simplement l'aspect d'un menu: en mode "display-bloc", ce sera un menu vertical. En mode "inline", cela devient un menu horizontal.
+
+Avec HTML5, ce mode binaire se complexifie, on se retrouve avec toute une liste de catégories de contenu: 
+
+- **Contenu de flux (Flow content)** - correspond de près au mode "block-level", et s'applique à la majorité des éléments. Notamment: `<div>`, `<article>`, `<blockquote>`, `<img>`, `<p>`...
+- **Contenu sectionnant (Sectioning content)** - les éléments qui définissent des sections: `<article>`, `<aside>`, `<nav>`, `<section>`
+- **Contenu de titre (Heading content)** - du contenu agissant comme en-tête: `<h1>`, `<h2>`, `<h3>` etc.
+- **Contenu phrasé (Phrasing content)** - le texte du document, tout ce qui peut être contenu dans un paragraphe, notamment: `<a>`, `<span>`. Correspond à peu près au mode "inline". Attention, `<a>` appartient à cette catégorie s'il contient *seulement* du contenu phrasé - sinon il devient Contenu de flux.
+- **Contenu intégré** - `<audio>`, `<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>`, `<video>`...
+- **Contenu interactif** - `<button>`, `<details>`, `<embed>`, `<iframe>`, `<keygen>`, `<label>`, `<select>`, et `<textarea>`.
+
+Là où cela devient important: certains éléments ne peuvent contenir *que* du "phrasing content". C'est le cas pour les balises `<p>` ou `<h1>`.  
+
+Plus d'informations: 
+
+- [La spécification HTML](https://dev.w3.org/html5/spec-preview/content-models.html).
+- *[Catégories de contenu](https://developer.mozilla.org/fr/docs/Web/HTML/Catégorie_de_contenu)*, documentation Mozilla Developer Network.