HTML & CSS : Edition pages Web

Un document HTML est essentiellement une structure hiérarchisée constituée d'éléments imbriqués les uns dans les autres et rendus visibles grâce à un navigateur Web. Chaque élément, dont la dénomination qui le caractérise est représentative de sa fonction, s'identifie par une balise ouvrante <nom_de_l'élément> et une balise fermante </nom_de_l'élément>, est conçu pour contenir d'autres éléments qui, comme lui, contiendra de nouveaux éléments, créant ainsi une arborescence descendante dont chacune des branches se termine par une chaîne de caratères ou par un élément spécial appelé "élément vide", car ne pouvant contenir de nouveaux éléments, et reconnaissable par sa balise auto-fermante <nom_de_l'élément/>.

La compréhension de cette structure hiérarchisée et de la sémantique qui associe chaque nom d'élément à une fonction précise est cruciale pour la création de pages Web bien structurées, fonctionnelles et accessibles sur différents navigateurs, et cela quel que soit le paramétrage des agents utilisateurs ou des agents d'accessibilité. Cette page vous en donne donc une présentation synthétique.

Tout au long de cette page, le sigle ^MDN, qui est apposé en fin de titre, renvoie vers la page correspondante du site de ressources pour développeurs Web édité par la fondation MOZILLA.

Elément de structuration du code

DOCTYPE : Type de document

Syntaxe: <!doctype html>
Premier élément à figurer sur la page de code, non obligatoire, mais indique par convention au développeur le langage et sa version utilisé pour la construction de la page WEB.
Elément "vide", n'a pas de balise fermente.

HTML : Zone de code HTML

Syntaxe: <html attr="##"> ## </html>
Elément de base encadrant le codage HTML; Tout élément extérieur à celui-ci ne sera pas interprété par le navigateur comme étant du code HTML.
Lui sont généralement associé des attributs de langue.

HEAD : En-tête de métadonnées

Syntaxe: <head attr="##"> ## </head>
Fournit des informations générales pour le bon affichage de la page, il ne doit pas être modifié.

BODY : Corps du document

Syntaxe: <body attr="##"> ## </body>
Représente le contenu principal de la page, tous blocs et éléments visible à l'écran sont à positionner à l'intérieur de celui-ci.
Il ne peut y avoir qu'un élément "BODY" par page.

Synthese: exemple de code HTML

<!doctype html> <html> <head> code </head> <body> code </body> </html>

Eléments de structuration de la page ^MDN

Sont disposés à l'intérieur de l'élément "BODY"; sont par défaut de type "BLOCK", ils sont affichés les uns en dessous des autres.

HEADER : En-tête du document

Syntaxe: <header attr="##"> ## </header>
On y trouve le logo, le slogan du site.
Peut contenir la banière de navigation.

NAV : Banière de navigation

Syntaxe: <nav attr="##"> ## </nav>
Identifie les zones où se trouvent les banières de navigation.
Peut être positionnée à l'intérieur d'un élément "HEADER".

ASIDE : Section complémentaire

Syntaxe: <aside attr="##"> ## </aside>
Regroupe toutes informations complémentaires au site sans lien direct avec le contenu principal.
Est généralement positionnée sous forme de bande verticale sur un des côtés du site.

MAIN : Contenu principal du site

Syntaxe: <main attr="##"> ## </main>
Regroupe tous le contenu directement en relation avec le sujet principal du site.
Il ne peut y avoir qu'un seul élément "MAIN" affichable par page.

SECTION : Section thématique ^MDN

Syntaxe:

<section attr="##"> Eléments HTML </section>

Description et utilisation:

Regroupe des contenus ayant une même thématique;
Peuvent être associés à une URN, déclarée grâce à l'attribut id.

FOOTER : Pied de page

Syntaxe: <footer attr="##"> ## </footer>
Section de pied de page du site.
Généralement reprend des liens vers les crédits et mentions légales, ainsi que vers certaines pages non listées dans le menu.

DIV : Conteneur universel de type "BLOCK"

Syntaxe: <div attr="##"> ## </div>

Synthese: exemple de code HTML pour page Web

<body> <header> image, texte </header> <nav> Menu de navigation </nav> <aside> liens, images </aside> <main> <section> code </section> <section> code </section> </main> <footer> liens, texte </footer> </body>

Eléments de structuration et mise en valeur du contenu

Les élements suivant permettent de structurer et hiérarchiser le contenu d'une page Web. Ils contribuent à améliorer l'expérience utilisateur (UX), l'accessibilité numérique ainsi que le référencement naturel (SEO).

Titres de sections (balises <h1> à <h6>)^MDN
- Amélioration de l'Expérience Utilisateur (UX):
  - Permettent de structurer visuellement le contenu en délimitant chaque section et sous-section;
  - Mettent en évidence l'importance relative des différentes parties de la page, aidant ainsi les utilisateurs à naviguer plus facilement.
- Amélioration du Référencement naturel (SEO):
  - Aident les moteurs de recherche à comprendre la structure du contenu et à identifier les idées-clés de chaque section;
  - Facilitent l'indexation et contribuent à améliorer le classement de la page dans les résultats de recherche, en particulier s'ils contiennent des mots-clés pertinents.
- Conseils pour une utilisation optimale:
  - Utiliser une seule balise <h1> par page pour le titre principal (représentant l'idée principale ou le sujet de la page);
  - Respecter la hiérarchie des titres : utiliser <h2> pour les sections principales, puis <h3> pour les sous-sections, et ainsi de suite jusqu'à <h6>, sans sauter de niveaux;
  - Inclure des mots-clés pertinents et concis dans les titres pour optimiser le SEO, tout en gardant le texte des titres compréhensible pour l'utilisateur.
  - Ne pas trop allonger les titres pour qu'ils restent efficaces et lisibles.
- Propriétés diverses des titres:
  - Les titres sont des éléments de type block: ils occupent toute la largeur disponible et sont suivis et précédés d'un retour à la ligne automatique;
  - Par défaut, chaque niveau de titre a une taille de police différente, permettant de signaler visuellement la hiérarchie du contenu.
- Exemples de codage des titres:
  <h1>Titre principal de la page</h1>
  
  <h2>Titre d'une section principale</h2>
  
  <h3>Titre d'une sous-section</h3>
- Exemple d'apparence (rendue visuelle par défaut):
```
              Titre principal de la page
              Titre d'une section principale
              Titre d'une sous-section
            
```
Paragraphe (balise <p>)^MDN
- <p attr="##"> Texte </p>
- Représente un paragraphe de texte.
Enumération ordonnée (balise <ol>)^MDN
- <ol attr="##"> <li> Texte </li> </ol>
- Est constitué d'éléments LI précédés d'un caractère ordinal (lettre ou chiffre)
- type: définit le type numérotation (a, A, i, I, 1);
- reversed: indique l'ordre de la numérotation (croissante ou décroissante);
- start: indique le point de départ pour la numérotation.
Enumération non ordonnée (balise <ul>)^MDN
- <ul attr="##"> <li> Texte </li> </ul>
- Est constitué d'élements "LI" non ordonnés.
- type: définit le style de puces utilisées pour la liste (cercle, disque ou carré);
Liste (balise <li>)^MDN
- <li attr="##"> Texte </li>
- Se place à l'intérieur d'un élément OL ou UL;
- S'affiche précédé d'une puce ou d'un caractère ordinal;

Eléments de structuration du texte, images ou vidéos

Propriétés générales:

Sont par défaut de type "IN-LINE", s'affichent les uns après les autres sur une même ligne.

PICTURE : Images web responsive

Syntaxe: <picture attr="##"> ## </picture>
S'adapte automatiquement aux différents écrans d'affichage.
Contient des éléments "IMG".

SPAN : Conteneur universel de type "IN-LINE"

Syntaxe: <span attr="##"> ## </span>
Délimite une zone de texte de même format ou police, peut être associée à une classe de format de texte.

Éléments interactifs^MDN

Les éléments interactifs sont spécialement conçus pour une interaction avec l'utilisateur (saisie de données, exécution de fonction, renvoi vers un hyperlien...). Cette interaction peut se faire grâce à un clavier via la touche [TAB], une souris, un écran ou un pavé tactile. Ils sont également conçus pour interagir avec des technologies d'accessibilité comme les commandes vocales.

Ancre (balise <a>)^MDN
- Fonction : Créer un hyperliens vers une ressource en ligne.
- Exemple de codage : <a href="" target="_self"> Nom du lien </a>.
- Exemple d'apparence : Nom du lien
- Contient généralement du texte ou du contenu intégré (image, vidéos,...)
- Est de type Inline, il s'affiche à la suite du texte ou de l'élément qui le précède.
- L'attribut obligatoire href définit l'hyperlien vers lequel il pointe.
- L'attribut target définit où ouvrir la page liée : dans le contexte de navigation actuel (target="_self", valeur par défaut) ou dans une nouvelle fenêtre ou onglet (target="_blank", etc...).
Bouton (balise <button>)^MDN
- Fonction : Permettre à l'utilisateur de déclencher une action (envoie de formulaires, ouverture de boîtes de dialogue, exécution de fonctions définis par des scripts, etc...)
- Exemple de codage : <button type="button""> Nom de la fonction </button>.
- Exemple d'apparence :
- Contient généralement du texte ou du contenu intégré (image, vidéos,...)
- Est de type Inline, il s'affiche à la suite du texte ou de l'élément qui le précède.
- Peut être associé à un formulaire en étant intégré à l'intérieur d'un élément <form> ou grâce à l'attribut form.
- L'attribut type en définit le comportement en cas d'interaction avec l'utilisateur: envoie des données du formulaire auquel il est associé (type="submit"), réinitialisation des contrôles du formulaire auquel il est associé (type="reset"), déclenchement d'événements définis par des scripts clients(type="button").
Détails (balise <details>)^MDN
- Fonction : Permettre à l'utilisateur d'afficher à l'écran des informations complémentaires.
- Exemple de codage : <details open> Informations complémentaires </details>.
- Exemple d'apparence :
  Informations complémentaires
- Contient généralement du texte ou du contenu intégré (image, vidéos,...)
- Est de type Block-Level, un retour à la ligne le sépare du texte ou de l'élément qui le précède.
- L'attribut open, lorsqu'il est présent, définit par défaut l'affichage à l'écran des informations complémentaires, lorsqu'il est absent ces dernières ne s'affichent qu'après interaction avec l'élément.
Saisie de Données (balise <input>)^MDN
- Fonction : Permettre à l'utilisateur la saisie de données.
- S'affiche sous diverses formes en fonction de la valeur de son attribut type:
- Appartient à la famille des éléments vides, il n'a qu'une balise ouvrante et ne peut contenir aucun élément.
- Est de type Inline, il s'affiche à la suite du texte ou de l'élément qui le précède.
- Peut être associé à un formulaire en étant intégré à l'intérieur d'un élément <form> ou grâce à l'attribut form.
Sélection (balise <select>)^MDN
- Fonction : Proposer à l'utilisateur une liste d'options à choisir.
- Exemple de codage :<select multiple size="3"> <option> Option par défaut </option> <option> Autre option </option> </select>
- Exemple d'apparence :
- Contient des éléments <option> qui définissent chacune des options sélectionnables.
- Est de type Inline, il s'affiche à la suite du texte ou de l'élément qui le précède.
- Peut être associé à un formulaire en étant intégré à l'intérieur d'un élément <form> ou grâce à l'attribut form.
- L'attribut multiple autorise le choix de plusieurs options simultanément.
- L'attribut size définit la taille d'affichage de la fenêtre en nombre de ligne.
Zone de Texte (balise <textarea>)^MDN
- Fonction : Permettre la saisie de texte libre.
- Exemple de codage : <textarea rows="1" cols="18" maxlength="50"> texte par défaut </textarea>
- Exemple d'apparence : Texte par défaut
- Contient du texte libre et éventuellement des icones (éléments image ou vidéos)
- Est de type Block-Level, un retour à la ligne le sépare du texte ou de l'élément qui le précède.
- Peut être associé à un formulaire en étant intégré à l'intérieur d'un élément <form> ou grâce à l'attribut form.
- Les attributs rows, cols ou maxlength définissent respectivement la taille de la fenêtre en nombre de lignes, en nombre de colonnes ou la quantité maximale de caractères pouvant être saisie.
Cas des éléments associés à un formulaire^MDN
- Les éléments <button>, <input>, <object>, <select> et <textarea> peuvent transmettre des données lors de l'envoie du formulaire.
- Les éléments <input>, <output>, <select> et <textarea> peuvent être impactés par une ré-initialisation du formulaire.
- Les éléments <button>, <option>, <select>, <textarea> et <input> possèdent un attribut disabled et peuvent être rendus non modifiable et non interactif par fonction ou par héritage de propriétés de leur contenant.

Eléments vides

Eléments HTML qui ne peuvent contenir d'autres éléments. ils n'ont pas de balises fermantes.

Le texte peut être considéré comme un élément vide particulier qui n'a ni balise ouvrante, ni balise fermante.

IMG : Image embarquée

Syntaxe: <img src="##" attr="##" />
Permet d'intégrer une image dans la page.
Attribut obligatoire: src="##" ayant pour valeur le chemin vers l'image intégré.
Attribut facultatif: alt="##" ayant pour valeur une description textuelle de l'image qui sera affichée à l'écran si celle-ci ne peut être chargée.

Feuilles de Style en Cascade

Le Cascading Style Sheets (CSS) est un des langages de base du World Wide Web. Il vient en complément du langage HTML en offrant de multiples possibilités de mises en formes des élements constituants un document électronique et de leurs contenus.

Propriété "display"

display:block; L'élément "block" ainsi défini se positionnera sur une nouvelle ligne.

display:inline; L'élément "inline" ainsi défini se positionnera en suivant sur la même ligne que l'élément qui le précéde.

Propriété "float"

float:right; L'élément sera positionner à l'extrème droite de son conteneur ou jouxtera l'élément le plus proche sur sa droite.

float:left; L'élément sera positionner à l'extrème gauche de son conteneur ou jouxtera l'élément le plus proche sur sa gauche.

float:none; Valeur par défaut, l'élément n'est pas un élément flottant.

Propriétés "height"

height:200; Définit la hauteur de l'élément. Dans l'exemple la hauteur vaut 200px, l'unité px étant sous entendue.

Propriétés "margin"

margin-top: xxx ; Définit la valeur "xxx" pour la marge haute appliquée à l'élément.

margin-bottom: xxx ; Définit la valeur "xxx" pour la marge basse appliquée à l'élément.

margin-right: xxx ; Définit la valeur "xxx" pour la marge appliquée à droite de l'élément.

margin-left: xxx ; Définit la valeur "xxx" pour la marge appliquée à gauche de l'élément.

La marge se mesure en partant de la bordure de l'élément; les unités de valeur possible pour la marge sont : px, em, % et auto.

Propriétés "padding"

padding-top: xxx ; Définit l'espace "xxx" entre le contenu d'un élément et sa bordure haute.

padding-bottom: xxx ; Définit l'espace "xxx" entre le contenu d'un élément et sa bordure basse.

padding-right: xxx ; Définit l'espace "xxx" entre le contenu d'un élément et sa bordure droite.

padding-left: xxx ; Définit l'espace "xxx" entre le contenu d'un élément et sa bordure gauche.

Les unités de valeur possible pour ces propriétés sont : px, em, % et auto.

Propriétés "width"

width:30%; Définit la largeur de l'élément. Dans l'exemple la largeur de l'élément représente 30% de la largeur de son conteneur.

Unités de propriétés

Les propriétés ci-dessus de dimensionnement d'éléments ont pour unités de valeurs:

px Valeur absolue en pixel (exemple d'écriture: "10px").

em Valeur proportionnelle à la taille de l'élément (exemple d'écriture: "5em").

% Valeur relative à la largeur du bloc englobant le plus proche (exemple d'écriture: "30%").

auto Dimensionne automatiquement la propriété.

Propriété "color"

color:red; Permet de définir la couleur de l'élément directement par son nom; il existe en CSS 140 couleurs nommées.

color:#FF0000; Permet de définir la couleur de l'élément en hexadécimal (couleur rouge dans l'exemple).

color:rgb(255,0,0); Permet de définir la couleur de l'élément par son code RGB (couleur rouge dans l'exemple).