cedricAbonnel/abonnel-www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

draft: HTML / CSS : Créer un magazine

Browse Source
This commit is contained in:
Cédrix
2026-05-15 16:35:45 +02:00
parent bc2a6dfa01
commit cbb06f2831
3 changed files with 291 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.stats_cache.json
+1 -1
View File
@@ -1 +1 @@
{"readable":true,"pages":{"\/post\/installation-et-mise-en-service-d-une-borne-de-recharge-murale-goneo-7-4-kw":904,"\/post\/speedtest":812,"\/post\/compromission-de-jdownloader-6-7-mai-2026-analyse-indicateurs-et-procedure-de-detection":345,"\/post\/creer-un-magazine-html-css":332,"\/post\/afficher-les-dernieres-lignes-des-5-derniers-fichiers-modifies-des-sous-dossiers":264,"\/post\/upstart":258,"\/post\/handbrake":226,"\/post\/numero-episode-titre":195,"\/post\/home-assistant-la-version-2025-4-c-est-l-heure-de-continuer-les-tableaux-de-bord":153,"\/post\/savoir-si-postgresql-est-installe-sur-un-systeme":119,"\/post\/20231229-ssh-brutforce":111,"\/post\/turn":101,"\/post\/auto-heberger-son-serveur-mail-en-2026":98,"\/post\/file":96,"\/post\/2024-07-04-raspberry-pi-os-update":96,"\/post\/installer-php-fpm":94,"\/post\/wifi-manager":94,"\/post\/trash-restore":80,"\/post\/ordinateurs-personnels-fabriques-par-thomson-dans-les-80":75,"\/post\/changer-de-reseau-wi-fi-sur-un-raspberry-pi-en-toute-simplicite":74,"\/post\/usermod":72,"\/post\/la-maniere-la-plus-courte-d-utiliser-echo":69,"\/post\/programmer-esp32-avec-arduino-ide":65,"\/post\/dnf":59,"\/post\/installer-gscan2pdf-linux-mint-22":56,"\/post\/hack":55,"\/post\/tmux":55,"\/post\/structure-des-dossiers-d-un-projet-php":52,"\/post\/creer-une-image-iso-d-un-cd-rom":52,"\/post\/priorites-et-acces-au-reseau-en-4g-et-5g":51},"books":{"\/book\/esp":11,"\/book\/les-commandes-linux":8,"\/book\/linux-architecture-des-dossiers":5},"as":[{"asn":"","name":"LAN","country":"","hits":12686},{"asn":"14618","name":"AWS EC2 (us-east-1)","country":"US","hits":24},{"asn":"15169","name":"Google LLC","country":"US","hits":8},{"asn":"32934","name":"Meta Platforms Ireland Limited","country":"US","hits":3},{"asn":"16509","name":"AWS EC2 (us-east-1)","country":"US","hits":2},{"asn":"8075","name":"Microsoft Azure Cloud (eastus2)","country":"US","hits":2},{"asn":"3215","name":"Orange S.A.","country":"FR","hits":1},{"asn":"209372","name":"SIA \"Singularity Telecom\"","country":"FR","hits":1}]}
{"readable":true,"pages":{"\/post\/installation-et-mise-en-service-d-une-borne-de-recharge-murale-goneo-7-4-kw":904,"\/post\/speedtest":812,"\/post\/compromission-de-jdownloader-6-7-mai-2026-analyse-indicateurs-et-procedure-de-detection":345,"\/post\/creer-un-magazine-html-css":332,"\/post\/afficher-les-dernieres-lignes-des-5-derniers-fichiers-modifies-des-sous-dossiers":264,"\/post\/upstart":260,"\/post\/handbrake":226,"\/post\/numero-episode-titre":196,"\/post\/home-assistant-la-version-2025-4-c-est-l-heure-de-continuer-les-tableaux-de-bord":153,"\/post\/savoir-si-postgresql-est-installe-sur-un-systeme":119,"\/post\/20231229-ssh-brutforce":111,"\/post\/turn":101,"\/post\/auto-heberger-son-serveur-mail-en-2026":98,"\/post\/file":96,"\/post\/2024-07-04-raspberry-pi-os-update":96,"\/post\/installer-php-fpm":94,"\/post\/wifi-manager":94,"\/post\/trash-restore":80,"\/post\/ordinateurs-personnels-fabriques-par-thomson-dans-les-80":75,"\/post\/changer-de-reseau-wi-fi-sur-un-raspberry-pi-en-toute-simplicite":74,"\/post\/usermod":72,"\/post\/la-maniere-la-plus-courte-d-utiliser-echo":69,"\/post\/programmer-esp32-avec-arduino-ide":65,"\/post\/dnf":59,"\/post\/installer-gscan2pdf-linux-mint-22":56,"\/post\/hack":55,"\/post\/tmux":55,"\/post\/structure-des-dossiers-d-un-projet-php":52,"\/post\/creer-une-image-iso-d-un-cd-rom":52,"\/post\/priorites-et-acces-au-reseau-en-4g-et-5g":51},"books":{"\/book\/esp":11,"\/book\/les-commandes-linux":8,"\/book\/linux-architecture-des-dossiers":5},"as":[{"asn":"","name":"LAN","country":"","hits":12695},{"asn":"14618","name":"AWS EC2 (us-east-1)","country":"US","hits":42},{"asn":"15169","name":"Google LLC","country":"US","hits":14},{"asn":"32934","name":"Meta Platforms Ireland Limited","country":"US","hits":5},{"asn":"16509","name":"AWS EC2 (us-east-1)","country":"US","hits":3},{"asn":"8075","name":"Microsoft Azure Cloud (eastus2)","country":"US","hits":2},{"asn":"3215","name":"Orange S.A.","country":"FR","hits":1},{"asn":"209372","name":"SIA \"Singularity Telecom\"","country":"FR","hits":1}]}
81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.json
+4
View File
@@ -0,0 +1,4 @@
{
"title": "HTML / CSS : Créer un magazine",
"_updated_at": "2026-05-15 14:35:45"
}
81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.md
+286
View File
@@ -0,0 +1,286 @@
# 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](https://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
<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 :
```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;
}
```
**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…
```html
<div class="column1"></div>
<div class="column2"></div>
```
… puis on les place avec du CSS :
```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 :
```html
<div class="column2">
<div class="item">
<h2>Mignon le chaton !</h2>
</div>
</div>
```
Et on stylise les titres `h2` et les encadrés `.item` :
```css
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 :
```html
<div class="item">
<h2>Mignon le chaton !</h2>
<img class="photo" src="chaton.jpg" />
</div>
```
Dans le CSS :
```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 :
```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
<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`
```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](https://fonts.google.com) 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](https://projects.raspberrypi.org/en/projects/magazine/) — Raspberry Pi Foundation, sous licence Creative Commons BY-SA 4.0.
- Environnement d'édition : [trinket.io](https://trinket.io).