Comprenez les bases des langages du Web
Vous venez d'ouvrir WeWeb et vous avez envie de créer tout de suite : glisser un bouton, changer une couleur, voir le résultat. C’est normal, c'est la force du "No-Code".
Cependant, vous allez vite rencontrer une situation frustrante : vous voulez placer un élément à droite, mais il reste bloqué à gauche. Vous voulez agrandir une image, mais c'est tout le texte à côté qui bouge.
Pourquoi ? Est-ce que l'outil est cassé ?
Non. C'est simplement qu'il obéit à des règles invisibles : celles du code informatique. Même si WeWeb cache le code pour vous faciliter la vie, il ne l'efface pas. Pour maîtriser l'outil, vous n'avez pas besoin de savoir écrire ce code, mais vous devez comprendre sa logique.
Dans ce chapitre, nous allons voir comment est fabriquée une page web. Vous allez découvrir que derrière chaque joli site se cachent trois ingrédients simples : une structure (HTML), une organisation (Layout) et une décoration (CSS).
Comment fonctionne une page web ?
Imaginez une page web non pas comme une feuille de papier sur laquelle on dessine, mais plutôt comme une construction en LEGO. Chaque pièce doit s'emboîter dans une autre. Pour que votre navigateur (comme Chrome ou Safari) puisse afficher cette construction, il suit une recette précise composée de trois étapes.
L'HTML : Le squelette de votre page
La première étape, c'est la structure. C'est le rôle du langage HTML (HyperText Markup Language).
L'HTML ne s'occupe pas de la beauté de votre page. Il s'occupe de dire ce que sont les choses. Il définit les éléments bruts : "Ceci est un titre", "Ceci est un paragraphe", "Ceci est une image".
Imaginez que vous construisez une maison. L'HTML, c'est le gros œuvre : les fondations, les murs en béton, les poutres. À ce stade, la maison n'est pas peinte, il n'y a pas de meubles, c'est gris et brut. Mais sans cela, la maison s'écroule.
En HTML, et donc dans WeWeb, on place rarement un élément "dans le vide".
Vous avez une grande boîte (une Section).
Dedans, vous mettez une boîte moyenne (un Conteneur).
Dedans, vous mettez une petite boîte (un Bouton).
On utilise souvent des termes de famille pour décrire cela : la grande boîte est le Parent, et les éléments à l'intérieur sont ses Enfants.
Pourquoi est-ce important ?
Parce que si vous déplacez le Parent, tous les Enfants suivent ! C'est exactement comme un carton de déménagement : si vous portez le carton, les livres à l'intérieur viennent avec. Quand vous regardez le panneau de gauche (l'explorateur), vous voyez cette hiérarchie. Chaque fois que vous glissez un bloc dans un autre, vous créez cette relation Parent-Enfant sans écrire de code.
Le Layout : Ranger les affaires
Une fois que nous avons nos boîtes (HTML), il faut les ranger. Sur le Web, cette organisation s’appelle le layout (la mise en page) : c’est l’usage de certaines propriétés CSS (comme Flexbox) pour dire comment les éléments doivent se positionner les uns par rapport aux autres. Si vous ne donnez aucune instruction, les éléments HTML ont un comportement par défaut un peu bête : ils s'empilent les uns sous les autres, en haut à gauche. Pour créer un design moderne, vous devez dire au navigateur comment les organiser. En simplifiant, il existe deux grandes manières de ranger des éléments :
1. Verticalement : Les uns sous les autres (en colonne).
2. Horizontalement : Les uns à côté des autres (en ligne).
Si vous voulez aligner trois boutons côte à côte, vous ne devez pas essayer de forcer chaque bouton à bouger. Vous devez sélectionner la boîte qui les contient (le Parent) et lui dire : "Range tes enfants à l'horizontale".
Le CSS : La décoration
Nous avons la structure (la maison) et l'organisation (le placement des pièces). Maintenant, il faut rendre ça joli. C'est le travail du CSS (Cascading Style Sheets). Le CSS gère uniquement l'apparence :
La couleur du texte.
La police d'écriture.
Les bordures arrondies.
Les espaces entre les éléments (les marges).
Le CSS est comme la peinture, le papier peint et la décoration de votre maison. Il ne peut pas construire un mur (ça, c'est l'HTML), mais il peut le peindre en bleu.
Le DOM : L'arbre invisible
Pour finir, un petit mot technique. Quand votre navigateur lit le code HTML, il crée une représentation en mémoire qu'on appelle le DOM. C'est une sorte d'arbre généalogique de votre page. Chaque nœud de cet arbre représente un élément HTML (ou un bout de texte). Pourquoi je vous parle de ça ? Parce que WeWeb est un outil qui manipule cet arbre pour vous.
Quand vous changez une couleur dans WeWeb, l'outil va dire au navigateur : "Trouve la branche du bouton et peins-la en rouge".
Quand vous déplacez un bloc, WeWeb coupe une branche de l'arbre et la recolle ailleurs.
Vous n'avez pas besoin de voir cet arbre, mais savoir qu'il existe vous aide à comprendre que WeWeb n'est pas magique : c'est une télécommande pour piloter le navigateur.
JavaScript et Données : rendre cela vivant !
Nous avons construit les murs (HTML) et appliqué la peinture (CSS). Mais pour l'instant, notre maison est sans courant. Si vous appuyez sur un interrupteur, rien ne se passe. Pour rendre la page vivante et interactive, les développeurs utilisent un troisième langage : le JavaScript. Dans WeWeb, vous n'aurez pas besoin d'écrire de lignes de code complexes pour cela, mais vous manipulerez trois concepts qui en sont la traduction directe :
1. Les Workflows
En code : On écrit une fonction onClick.
Dans WeWeb : On crée un Workflow déclenché par un "Click".
2. Les Variables
Pour qu'une application fonctionne, elle doit se "souvenir" de certaines choses : est-ce que le menu est ouvert ? Est-ce que l'utilisateur est en "Dark Mode" ? Ces informations sont stockées dans des Variables.
3. Les Collections
Enfin, votre site aura besoin d'afficher des données réelles (liste de produits, utilisateurs) venant d'une base de données externe (comme Airtable ou Supabase). En développement classique, on appelle cela faire une requête API. Dans WeWeb, on crée simplement une Collection.
Maintenant que vous avez la vue d'ensemble complète (Structure, Style, Logique et Données), résumons tout cela.
À vous de jouer
Passons à la pratique. Nous n'allons pas encore ouvrir WeWeb, mais nous allons apprendre à "lire" une page web comme un pro. C'est une compétence essentielle appelée l'analyse structurelle.
Contexte
Imaginez que vous êtes sur un site de vente en ligne. Vous voyez une "Carte Produit" pour une paire de baskets. Visuellement, c'est un rectangle blanc avec :
Une photo de la chaussure en haut.
Le nom du modèle en dessous ("Air Max").
Tout en bas, le prix ("120€") à gauche, et un bouton "Acheter" à droite.
Consigne
Essayez de décrire cette carte en utilisant les trois concepts vus plus haut :
Structure (HTML) : Quelles sont les boîtes ?
Layout (Organisation) : Comment sont-elles rangées (vertical ou horizontal) ?
Style (CSS) : Qu'est-ce qui est purement décoratif ?
En résumé
Gardez en tête : boîtes (HTML) → rangement (Layout) → habillage (CSS).
Une page est un ensemble de boîtes imbriquées (Parents et Enfants).
On range les éléments soit en colonne (vertical), soit en ligne (horizontal). C'est le Parent qui décide du rangement.
La couleur, la taille et les bordures ne sont que de l'habillage.
WeWeb est une interface qui te permet de manipuler ces langages (HTML/CSS)
Dans le prochain chapitre, nous allons enfin ouvrir WeWeb et manipuler ces concepts directement dans l'interface. Préparez-vous à construire vos premières boîtes !
