Processus pratique

Ce “pas-à-pas” est dédié à montrer le processus de structuration d’un document HTML en vue de lui appliquer de la mise en forme CSS.

👉 Les exemples HTML et CSS sont commentés. Il faut afficher le code source des pages pour accéder aux commentaires (cmd/ctrl + U sous Firefox ou cmd/ctrl + maj + U pour Chrome).

Les exemples peuvent être téléchargés.

1 – Déterminer un espace de travail

Créer un dossier pour ranger les documents HTML (les pages) et les ressources associées (feuille de style, images, etc.). Voir HTML / Bien démarrer.

2 – Asssocier une feuille de style à un document HTML

Lire la section Appliquer du style, et utiliser la liaison décrite dans le point 3 (CSS externe).

Exemple #1 : HTML textuel non balisé

3 – Baliser le HTML

Pour pouvoir mettre en page et en forme le document, il faut commencer par déterminer sa structure grâce au balisage HTML.

Exemple #2 : HTML textuel balisé

Dans l’exemple 2, seul le contenu textuel brut est structuré en titres et en paragraphes. L’exemple 3 ajoute les informations d’italique (pour les titres de œuvres et des ouvrages) et les liens vers d’autres pages web.

Exemple #3 : HTML textuel balisé plus finement

4 – Structurer le HTML

Pour pouvoir structurer visuellement le document, il faut pouvoir découper le flux du texte en des éléments qui regroupent les informations en “sections”.

HTML propose de nombreuses balises dédiées : header pour les entêtes, footer pour le “pied de page”, main pour distinguer le contenu principal d’une page, article ou section pour diviser le contenu en différentes parties, voire div, balise non-sémantique (elle n’a pas de sens, contrairement aux autres précédement citées) qui permet simplement de diviser le contenu en blocs.

Exemple #4 : HTML textuel structuré en “sections”

5 – Associer les médias

À la base textuelle brute, on peut ajouter des médias : images, sons ou vidéos, qu’on peut intégrer directement dans le flux du texte, en entête des sections, ou en listes.

Exemple #5 : Ajout des médias

6 – Préciser le HTML

Pour pouvoir être plus facilement mis en forme, les éléments HTML peuvent recevoir des attributs qui vont permettre de les sélectionner plus précisément en CSS. En savoir plus sur les sélecteurs CSS (voir notamment class et id).

Exemple #6 : Ajout de classes et d’identifiants

L’attribut class sert à déterminer plusieurs éléments qui recevront une même mise en forme ; l’attribut id permet de déterminer des éléments uniques.

7 – Créer une sous-navigation

La présence d’attributs id sur les sections permet de créer une navigation à l’intérieur de la page : l’attribut href du lien doit correspondre à l’id de la section cible précédé par un #.

<a href="#introduction">aller à l’introduction</a>
<section id="introduction">…</section>

Exemple #7 : Navigation interne

8 – Principes typographiques

On peut commencer par produire des choix typographiques : déterminer la famille de caractères, le corps de texte et la hiérarchie typographique. Lire la page consacrée aux styles dédiés au texte, mais aussi les informations sur l’intégration de fontes web ou plus généralement les pages consacrées à la typo à l’écran.

👉 Les exemples CSS sont commentés. Il faut afficher le code source de la feuille de style pour accéder aux commentaires.

Exemple #8 : Styles typographiques

9 – Principes de mise en page

Si jusqu’ici, il n’y avait que peu de choix graphiques à produire, cette phase détermine des directions nécessairement subjectives.

Nous allons :

Exemple #9 : Mise en page

10 – Affiner la mise en forme

Objectifs :

Exemple #10 : Mise en page affinée

11 – Aller plus loin

Objectifs :

Exemple #11 : Aller plus loin

12 – Faire vibrer

Ces étapes ont permis de produire une mise en forme fonctionelle, assez simple et relativement efficace pour présenter le contenu. Rendre le contenu accessible et lisible est le premier enjeu du designer.

Une ambition supplémentaire, et également nécessaire, serait de transmettre à travers les formes graphiques et typographiques un supplément d’âme, qui rendrait mieux justice au contenu (ici, le travail de Vera Molnár), et produirait une vibration esthétique plus puissante.

Pour ce faire, une intention doit guider la mise en forme CSS – et quelques modifications mineures doivent être apportées à la structure HTML.

Exemple #12 : Vibration