Files

T

Cédrix 4da33d2aa9 publish: HTML / CSS : Créer un magazine

2026-05-15 16:37:18 +02:00

6.8 KiB

Raw Blame History

HTML / CSS : Créer un magazine

Tutoriel pas-à-pas pour réaliser une mise en page de type magazine avec HTML et CSS. Adapté en français du projet Magazine de la Raspberry Pi Foundation.

Objectifs pédagogiques

À la fin de ce projet, tu sauras :

structurer une page web avec des balises HTML ;
relier une feuille de style CSS à ta page ;
découper une page en deux colonnes ;
styliser des titres, des encadrés et des images ;
appliquer une rotation et une ombre portée à un élément ;
ajouter une petite animation pour finir.

Ce dont tu as besoin

un navigateur web (Firefox, Chrome, Edge…) ;
un éditeur en ligne comme trinket.io — l'environnement de départ se trouve à l'adresse https://trinket.io/embed/html/cef5e64bc0 ;
une image au format JPG ou PNG (par exemple une photo d'animal de compagnie).

Tu peux aussi travailler en local avec un simple éditeur de texte (VS Code, Geany, Notepad++) et créer deux fichiers dans le même dossier : index.html et style.css.

Étape 1 — Le squelette HTML et le titre

On commence par poser le squelette de la page et lui associer une feuille de style externe.

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>mon magazine</h1>
</body>
</html>

Dans style.css, on stylise le grand titre et le fond de la page :

h1 {
  text-align: center;
  color: white;
  background: teal;
  padding: 5px;
}

body {
  background: linear-gradient(to bottom right, lemonchiffon, white);
  padding: 15px;
  font-family: Carlito;
}

Ce que l'on a appris :

<link rel="stylesheet"> connecte le HTML à la feuille CSS ;
text-align, color, background et padding modifient l'apparence d'un élément ;
linear-gradient(...) crée un dégradé pour le fond.

Astuce : lemonchiffon est un nom de couleur CSS standard. Si tu écris lemnchiffon (oubli du o), le navigateur ignore la règle silencieusement.

Étape 2 — Créer les deux colonnes

Une mise en page de magazine, c'est souvent deux colonnes côte à côte. On les déclare dans le HTML…

<div class="column1"></div>
<div class="column2"></div>

… puis on les place avec du CSS :

.column1 {
  width: 48%;
  float: left;
}

.column2 {
  width: 48%;
  float: right;
}

Pourquoi 48 % et pas 50 % ? Pour laisser un peu d'air entre les deux colonnes. La propriété float indique au navigateur de placer le bloc à gauche ou à droite, et de laisser le reste du contenu s'écouler autour.

Étape 3 — Ajouter un premier article

Chaque article du magazine sera contenu dans une <div class="item">. On commence par un encart simple, dans la colonne de droite :

<div class="column2">
  <div class="item">
    <h2>Mignon le chaton !</h2>
  </div>
</div>

Et on stylise les titres h2 et les encadrés .item :

h2 {
  color: white;
  background: teal;
  padding: 5px;
  margin: 0px 0px 10px 0px;
  box-shadow: 2px 2px 2px gray;
  text-align: center;
}

.item {
  padding: 10px;
  margin-bottom: 10px;
  border: 3px dashed teal;
}

À retenir :

border: 3px dashed teal; crée une bordure en pointillés. Essaie aussi solid, dotted ou double pour comparer.
box-shadow ajoute une ombre portée. Les deux premières valeurs sont le décalage horizontal et vertical, la troisième le flou.

Étape 4 — Ajouter la photo

On insère une image à l'intérieur de l'encart, et on lui donne la classe photo pour la styliser à part :

<div class="item">
  <h2>Mignon le chaton !</h2>
  <img class="photo" src="chaton.jpg" />
</div>

Dans le CSS :

img {
  max-width: 100%;
}

.photo {
  box-shadow: 4px 4px 4px gray;
  transform: rotate(10deg);
}

Deux notions importantes ici :

max-width: 100% empêche l'image de déborder de son encart, quelle que soit sa taille d'origine ;
transform: rotate(10deg) incline l'image de 10 degrés vers la droite — comme une polaroïd collée de travers sur un cahier. Essaie -10deg pour la pencher dans l'autre sens.

Si tu travailles sur trinket.io, glisse ton image dans le panneau de fichiers à gauche et utilise exactement le même nom dans l'attribut src.

Étape 5 — Ajouter d'autres articles

Le principe est désormais simple : à chaque fois que tu veux un nouvel article, tu copies un bloc <div class="item">…</div> et tu remplaces son contenu. Tu peux les répartir librement entre column1 et column2.

Quelques idées d'éléments à mettre dans un .item :

un titre <h2> ;
un paragraphe <p> ;
une image avec la classe photo ;
une liste <ul> avec des <li>.

Étape 6 — Ajouter une petite animation (bonus)

Pour donner vie à la page, on peut faire vibrer légèrement la photo au survol de la souris. Voici un exemple de règle à ajouter au CSS :

.photo:hover {
  transform: rotate(-5deg) scale(1.05);
  transition: transform 0.3s ease-in-out;
}

:hover se déclenche quand le curseur passe sur l'élément ;
scale(1.05) agrandit l'image de 5 % ;
transition rend le changement progressif au lieu d'être brutal.

Le corrigé complet

`index.html`

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>mon magazine</h1>
<div class="column1"></div>
<div class="column2">
  <div class="item">
    <h2>Mignon le chaton !</h2>
    <img class="photo" src="chaton.jpg" />
  </div>
</div>

</body>
</html>

`style.css`

h1 {
  text-align: center;
  color: white;
  background: teal;
  padding: 5px;
}

body {
  background: linear-gradient(to bottom right, lemonchiffon, white);
  padding: 15px;
  font-family: Carlito;
}

.column1 {
  width: 48%;
  float: left;
}

.column2 {
  width: 48%;
  float: right;
}

img {
  max-width: 100%;
}

.photo {
  box-shadow: 4px 4px 4px gray;
  transform: rotate(10deg);
}

.item {
  padding: 10px;
  margin-bottom: 10px;
  border: 3px dashed teal;
}

h2 {
  color: white;
  background: teal;
  padding: 5px;
  margin: 0px 0px 10px 0px;
  box-shadow: 2px 2px 2px gray;
  text-align: center;
}

Pour aller plus loin

Remplace les float par Flexbox (display: flex sur le parent) : c'est la méthode moderne pour disposer des colonnes.
Essaie une grille à 3 colonnes avec CSS Grid (display: grid; grid-template-columns: 1fr 1fr 1fr;).
Ajoute une font depuis Google Fonts pour remplacer Carlito.
Rends ton magazine responsive avec une @media (max-width: 600px) qui repasse les colonnes en pleine largeur sur mobile.

Sources

Projet original : projects.raspberrypi.org/en/projects/magazine — Raspberry Pi Foundation, sous licence Creative Commons BY-SA 4.0.
Environnement d'édition : trinket.io.

6.8 KiB Raw Blame History