draft: HTML / CSS : Créer un magazine

.stats_cache.json

@@ -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

@@ -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

@@ -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).