Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html [2023/03/18 18:15] – [Balises] jcheron
+++ web:html [2024/08/22 10:50] (Version actuelle) – [Attributs] jcheron
@@ Ligne 3: / Ligne 3: @@
 Interprêté par le navigateur côté client pour produire le DOM (Document Object Model), structure arborescente d'objets constituant la page Web.
+<WRAP info round>
+**Bonnes pratiques** :\\
+  * Ne jamais restructurer un document pour en modifier la présentation en HTML (ex ajout de ''br'' pour passer des lignes)
+  * Respecter la normalisation et vérifier son code avec le validateur W3C
+</WRAP>
 ===== Elément =====
@@ Ligne 26: / Ligne 32: @@
 === block et inline ===
-Certains éléments sont définis à partir de balises de type **block**, c'est-à-dire que l'élément défini occupe toute la largeur de son conteneur dans le flux :
+Certains éléments sont définis à partir de balises de type **block**, c'est-à-dire que l'élément défini occupe toute la largeur de son conteneur dans le flux. \\
 C'est le cas par exemple des titres (''h1'', ''h2''...), des ''div'' ou des paragraphes (''p'')
+Par opposition aux éléments **inline**, qui trouvent leur place dans le flux : ''span'', ''strong''
 <sxh html>
 <h1>Un titre de niveau 1</h1>
@@ Ligne 68: / Ligne 75: @@
 </sxh>
+=== Attributs universels ===
+Ce sont ceux qui sont utilisables sur tous les éléments HTML, quelque soit leur type :
+^Attribut ^Rôle ^
+^id | Attribue un identifiant unique dans la page à l'élément, utilisé par les liens de type ancre, ou en javascript |
+^class | Permet de spécifier la ou les classes CSS associées, utilisable également en JS pour cibler un groupe d'éléments |
+^style | Permet de définir directement le style de l'élément, ce qui est une mauvaise pratique |
+^data-* | Permet d'ajouter un nouvel attribut (en remplaçant l'étoile par un nom, utilisable en JS, ou en CSS |
+Voir plus sur [[https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes|MDN attributs universels]]
 ==== Structure d'une page ====
@@ Ligne 86: / Ligne 104: @@
 </sxh>
+^Elément ^Rôle ^
+| **!doctype** | Version html utilisée (HTML5 dans ce cas |
+| **html** | Début de la page avec spécification obligatoire de la **lang** |
+| **head** | Permet de spécifier les en-têtes HTTP et les valeurs des balises meta, l'encodage par exemple |
+| **title** | Titre de la page apparant en titre d'onglet dans le navigateur |
+| **body** | Corps du document, défini le contenu qui sera affiché |
 ==== Normalisation ====
 Un document HTML doit respecter les standards définis par le W3C, correspondant à la version déclarée dans le **doctype**.
@@ Ligne 97: / Ligne 121: @@
   * La liste des balises permettant de définir les éléments d'une page est pré-définie (elle n'est pas extensible).
   * Les balises doivent repsecter une certaine hiérarchie (ul/li, table/tr/td...)
+  * Les balises doivent être fermées dans l'ordre dans lequel elles ont été ouvertes
 === Attributs ===
@@ Ligne 106: / Ligne 131: @@
 Le W3C propose un service de validation des contenus web créés : [[https://validator.w3.org/|W3C Validator]]
+==== Parties ====
+  * [[web:html:text-structure|]]
+  * [[web:html:liens|]]
+  * [[web:html:semantic|]]
+  * [[web:html:tableaux|]]
+  * [[web:html:formulaires|]]
+  * [[web:html:media|]]
+  * [[https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML|Balises meta]]
+  * [[web:html:debug|]]