Quand tu ouvres un site web dans ton navigateur (Chrome, Firefox, Edge...), il se passe en réalité deux choses bien distinctes : ce que tu vois s'afficher à l'écran, et ce qui se passe « en coulisses », sur un ordinateur distant appelé serveur. On appelle ces deux parties le frontend et le backend.
Le frontend (« partie visible ») désigne tout ce que l'utilisateur voit et avec quoi il interagit directement dans son navigateur : la mise en page, les couleurs, les boutons, les images. Il est construit avec les langages HTML, CSS et JavaScript.
Le backend (« partie serveur ») désigne tout ce qui se passe sur l'ordinateur distant qui héberge le site : le traitement des données, la vérification d'un mot de passe, l'enregistrement d'un message dans une base de données. L'utilisateur ne le voit jamais directement.
Imagine un restaurant. La salle, où tu es installé, où tu vois la carte, la décoration et le serveur qui t'apporte ton plat, correspond au frontend : c'est la partie que le client perçoit directement. La cuisine, que tu ne vois jamais, où les plats sont réellement préparés à partir des ingrédients, correspond au backend : c'est là que le « travail » se fait réellement, à l'abri des regards.
Dans ce chapitre, tu vas découvrir les deux langages de base du frontend : HTML, qui structure le contenu d'une page, et CSS, qui définit son apparence.
HTML (HyperText Markup Language, « langage de balisage hypertexte ») est le langage utilisé pour écrire le contenu d'une page web. Ce n'est pas un langage de programmation à proprement parler : c'est un langage de balises qui décrit la structure d'un document (titres, paragraphes, images, liens...).
Une balise HTML est un mot-clé encadré par des chevrons, par exemple <p>. La plupart des balises fonctionnent par paire : une balise ouvrante <p> et une balise fermante </p> (avec un slash). Tout ce qui se trouve entre les deux constitue le contenu de la balise.
Toute page HTML respecte un squelette minimal, composé de quelques éléments indispensables :
Le tableau ci-dessous détaille le rôle de chacune de ces balises :
| Balise | Rôle |
|---|---|
<!DOCTYPE html> | Indique au navigateur que le document est écrit en HTML5 |
<html> | Balise racine qui contient toute la page |
<head> | Contient les informations invisibles (titre d'onglet, encodage des caractères...) |
<title> | Titre affiché dans l'onglet du navigateur |
<body> | Contient tout le contenu visible de la page |
À l'intérieur de la balise <body>, tu peux ajouter différentes balises pour structurer ton contenu : un titre, du texte, une image, un lien. Voici un exemple complet et fonctionnel :
Le tableau suivant présente les balises essentielles à connaître pour construire une page simple :
| Balise | Rôle |
|---|---|
<h1> à <h6> | Titres, du plus important (h1) au moins important (h6) |
<p> | Paragraphe de texte |
<img> | Insère une image (attributs src et alt) — balise sans fermeture |
<a> | Crée un lien hypertexte (attribut href) |
<ul> / <li> | Liste à puces et ses éléments |
<div> | Bloc générique servant à regrouper du contenu |
La balise <img> est une balise orpheline : elle ne s'écrit qu'une seule fois, sans balise fermante, car elle ne contient pas de texte. L'attribut alt est indispensable : il décrit l'image pour les personnes malvoyantes ou si l'image ne se charge pas.
CSS (Cascading Style Sheets, « feuilles de style en cascade ») est le langage qui définit l'apparence d'une page HTML : couleurs, tailles, polices, alignement, espacements... Si le HTML fournit le squelette, le CSS habille ce squelette.
Une règle CSS est composée d'un sélecteur (l'élément à styliser) suivi de déclarations entre accolades, chacune formée d'une propriété et d'une valeur séparées par deux-points :
| Propriété | Rôle |
|---|---|
color | Couleur du texte |
font-size | Taille de la police |
text-align | Alignement du texte (left, center, right, justify) |
background-color | Couleur de fond |
Pour relier une feuille CSS externe à une page HTML, on utilise la balise <link> à l'intérieur du <head>.
Reprenons la page HTML du point précédent et ajoutons-lui une feuille de style :
Résultat : le titre s'affiche en rouge et centré, le paragraphe est agrandi et centré, et l'image est réduite à 200 pixels de large puis centrée sur la page.
Il est temps de mettre en pratique ce que tu viens d'apprendre en réalisant ta propre page web de présentation.
Pour réaliser ton mini-projet, suis ces étapes dans l'ordre :
index.html sur ton ordinateur.<!DOCTYPE html>, <html>, <head>, <body>).<img>.style.css et stylise ta page (couleurs, tailles, alignement).Voici un exemple complet de mini page « À propos de moi » :
Cette page affiche un titre, une photo ronde, deux paragraphes de présentation et un lien de contact, le tout centré et mis en couleur grâce au CSS.
<!DOCTYPE html> et contient un <head> et un <body>.<h1>, <p>, <img> et <a> sont les briques de base d'une page.color), tailles (font-size) et alignement (text-align).<link> placée dans le <head>.Le code HTML suivant contient plusieurs erreurs (balises mal fermées ou mal imbriquées). Repère-les puis réécris le code correctement.
Le code contenait quatre erreurs :
<title> était fermée par </head> au lieu de </title>.<h1> était fermée par </h2> : les balises ouvrante et fermante doivent toujours correspondre.<p> n'était jamais fermée par </p>.<img> est une balise orpheline : elle ne doit pas être fermée par </img>. De plus, <html> et <body> étaient inversées à la fin du document.Voici le code corrigé :
Écris le code HTML complet d'une page qui affiche :
https://www.edutech-congo.comChaque élément demandé correspond à une balise précise : <h1> pour le titre, <p> pour le paragraphe et <a href="..."> pour le lien.
On te donne la page HTML suivante :
Écris le fichier style.css qui donne à cette page : un fond gris clair, un titre en couleur or, un paragraphe en bleu marine, et un contenu centré horizontalement.
La propriété background-color définit la couleur de fond (appliquée au sélecteur body pour toucher toute la page), color définit la couleur du texte de chaque élément, et text-align: center centre le contenu horizontalement.
Conçois une mini page web complète (HTML + CSS) pour présenter ton lycée. Elle doit contenir : un titre principal avec le nom du lycée, une image (le logo ou un bâtiment), un paragraphe de présentation, une liste d'au moins deux matières enseignées, et un lien vers un site externe. Stylise ensuite la page avec au moins trois règles CSS différentes.
Cette correction n'est qu'une proposition parmi d'autres : l'essentiel est de retrouver dans ta page les cinq éléments HTML demandés et au moins trois propriétés CSS différentes.
10 questions · Correction immédiate
Qu'est-ce que le « frontend » d'un site web ?
Qu'est-ce que le « backend » d'un site web ?
Que signifie le sigle HTML ?
Quelle ligne doit obligatoirement être la toute première d'un document HTML ?
Que fait ce code ? <a href="https://www.wikipedia.org">Wikipédia</a>
Quelle balise HTML permet d'insérer une image dans une page ?
Que signifie le sigle CSS ?
Que fait cette règle CSS ? h1 { color: red; text-align: center; }
Comment relie-t-on une feuille de style CSS externe à une page HTML ?
Pour styliser sa première page web personnelle, quel fichier doit-on créer en plus du fichier HTML ?