03. Comment une page web est construite

Elementor écrit le code à votre place, mais il vous parle avec les mots de ce code : boîte, marge, pixel, balise, responsive. Ce chapitre les explique une fois pour toutes, sans exiger que vous écriviez la moindre ligne. Après lui, chaque réglage de l’éditeur aura un sens, au lieu d’être un bouton que l’on essaie au hasard.

3.1 — Trois langages et un navigateur

Quand vous ouvrez une page, votre navigateur (Chrome, Firefox, Safari, Edge) reçoit du serveur un texte écrit dans un langage appelé HTML. Ce texte décrit le squelette de la page : ici un titre, là un paragraphe, là une image, le tout rangé dans des boîtes qui en contiennent d’autres. Le navigateur reçoit ensuite un second texte, écrit en CSS, qui décrit l’habillage : la couleur du titre, la police du paragraphe, la largeur de l’image, l’espace entre les boîtes. Un troisième langage, JavaScript, ajoute le mouvement : un menu qui se déplie, une galerie qui défile, un formulaire qui vérifie une adresse e-mail avant l’envoi.

Le navigateur lit ces trois textes et dessine la page. C’est lui qui calcule où va chaque boîte, et il recommence chaque fois que la fenêtre change de taille. Elementor ne fait rien d’autre que produire ces textes à partir de vos gestes : quand vous déposez un Titre et que vous le colorez, il écrit la ligne de HTML et la ligne de CSS correspondantes. Vous ne les verrez jamais, mais savoir qu’elles existent explique bien des comportements.

3.2 — Tout est boîte

Pour le navigateur, chaque élément d’une page est un rectangle, même s’il ne dessine pas ses bords. Un paragraphe est une boîte ; une image est une boîte ; un bouton est une boîte. Et les boîtes s’emboîtent : le bouton est dans une boîte « bandeau d’accueil », qui est dans la boîte « contenu », qui est dans la boîte « page ». Cette imbrication est la clé de tout ce qui suit : quand vous réglerez la couleur de fond d’un Flexbox, c’est la boîte parente qui se colore, et ses enfants se posent dessus.

Par défaut, les boîtes se placent dans le flux : les unes sous les autres, de haut en bas, dans l’ordre où elles sont écrites, chacune occupant toute la largeur disponible. Une page web est donc naturellement une colonne. Mettre trois éléments côte à côte n’est pas le comportement par défaut : c’est une instruction que l’on donne à la boîte parente, et c’est précisément ce que font le Flexbox et la Grille d’Elementor (chapitre 09).

Presque toutes les pages vitrines partagent la même anatomie, de haut en bas : un en-tête (logo, menu, bouton), un bandeau d’accueil que l’on appelle souvent « héros », des sections de contenu (prestations, réalisations, témoignages), un appel à l’action et un pied de page. Deux largeurs cohabitent : certaines boîtes s’étendent d’un bord à l’autre de l’écran (« pleine largeur ») pour porter une couleur de fond, tandis que le contenu lisible est centré dans une zone plus étroite, la largeur de contenu, qu’Elementor fixe par défaut à 1140 pixels.

Voir les boîtes d’une vraie page

Tous les navigateurs contiennent un outil d’inspection qui révèle les boîtes de n’importe quel site, sans rien modifier sur le site consulté.

1. Ouvrez un site quelconque sur un ordinateur, dans Chrome, Edge ou Firefox.
2. Faites un clic droit sur un titre, puis choisissez Inspecter (Chrome, Edge) ou Examiner l’élément (Firefox). Un panneau s’ouvre.
3. Repérez la ligne surlignée : c’est la balise du titre, par exemple h1. Survolez les lignes voisines : sur la page, chaque boîte correspondante se colore, avec ses marges.
4. Remontez dans l’arborescence en survolant les lignes du dessus : la boîte parente, puis la section, puis header ou footer.
5. Réduisez la largeur de la fenêtre en la tirant par son bord : les boîtes côte à côte se réempilent. C’est le responsive à l’œuvre.

3.3 — Mesurer : pixels, pourcentages et unités relatives

Dans l’onglet Style d’Elementor, presque chaque valeur est accompagnée d’un sélecteur d’unité. Le pixel (px) est l’unité la plus intuitive : un point de l’écran, une valeur fixe. Le pourcentage (%) se calcule par rapport à la boîte parente : une image à 50 % occupe la moitié de sa colonne, quelle que soit la taille de l’écran. Les unités em et rem sont relatives à la taille du texte : 1rem vaut la taille de police de base du site, 16 pixels par défaut, si bien que 1.5rem donne 24 pixels. Les unités vw et vh valent un centième de la largeur ou de la hauteur de la fenêtre : un bandeau de 100vh occupe exactement la hauteur de l’écran, téléphone ou grand moniteur.

3.4 — Le responsive : un contenu, plusieurs largeurs

Le même contenu doit être lisible sur un téléphone tenu à la verticale, large de quelques centaines de pixels, comme sur un moniteur de bureau. On appelle responsive (on dit parfois « adaptatif ») une page dont les boîtes se réorganisent d’elles-mêmes selon la largeur disponible : trois cartes côte à côte sur ordinateur deviennent trois cartes empilées sur téléphone ; un menu horizontal se replie derrière une icône ; un titre de 48 pixels descend à 32.

Le navigateur ne devine rien : ce sont des règles que l’on écrit, et qu’Elementor permet d’écrire sans code. Il découpe les largeurs d’écran en paliers, les points de rupture (breakpoints) : par défaut, « ordinateur » au-delà de 1024 pixels, « tablette » de 768 à 1024, « mobile » jusqu’à 767. Un réglage fait sur la vue ordinateur s’applique aux écrans plus petits, sauf valeur propre donnée à la tablette ou au mobile. Le chapitre 12 y est consacré ; retenez que le responsive n’est pas une option à cocher à la fin, mais une manière de penser chaque boîte dès sa création.

3.5 — Le poids d’une page

Chaque page qu’un visiteur ouvre est un ensemble de fichiers qui transitent par le réseau : le HTML, le CSS, le JavaScript, les polices et surtout les images. Leur somme est le poids de la page, en kilooctets (Ko) ou en mégaoctets (Mo). Sur la plupart des sites vitrines, les images représentent la plus grande part de ce poids — souvent plus de la moitié, parfois les deux tiers ou davantage quand les photos ont été téléversées telles quelles depuis un téléphone, où une seule photo pèse couramment plusieurs mégaoctets.

Le poids commande le temps de chargement. Sur une connexion mobile en zone rurale, une page de plusieurs mégaoctets met de longues secondes à s’afficher, et le visiteur est parti avant. Le sujet est traité aux chapitres 14 et 33 ; retenez qu’une photo de bandeau bien préparée pèse quelques centaines de kilooctets, et que chaque widget, chaque police et chaque animation ajoutés ont un coût, même invisible à l’écran.

3.6 — La sémantique : dire ce que l’on est

Le HTML ne se contente pas de dessiner des boîtes : il dit ce qu’elles sont. Une boîte marquée header est un en-tête, nav une navigation, main le contenu principal, section une section, article un contenu autonome, aside un complément, footer un pied de page. De même, les titres sont hiérarchisés de h1 à h6 : un seul h1 par page, qui en énonce le sujet ; des h2 pour les grandes parties ; des h3 pour leurs subdivisions. Cet étiquetage s’appelle la sémantique.

Deux lecteurs y sont particulièrement attentifs. Les moteurs de recherche s’en servent pour comprendre de quoi parle la page : un h1 « Menuiserie sur mesure à Murol » dit plus qu’un texte en gros caractères sans balise. Les lecteurs d’écran, ces logiciels qui lisent la page à voix haute pour les personnes malvoyantes, permettent de sauter de titre en titre ou d’aller droit à la navigation ; sans balises, la page devient un bloc indistinct. Elementor vous donne la main sur ces étiquettes : le Titre atomique propose sa balise de H1 à H6, et le Flexbox comme le Bloc Div ont un réglage Balise HTML (HTML tag) qui vaut Div, Header, Section, Article, Aside ou Footer. Choisir la bonne ne coûte qu’un clic.

Une page web est une colonne de boîtes qui portent chacune une étiquette. Tout le travail de mise en page consiste à décider lesquelles se placent côte à côte, et jusqu’à quelle largeur.