From 4da33d2aa9d214ec671990ee35455d3b6d83baf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9drix?= Date: Fri, 15 May 2026 16:37:18 +0200 Subject: [PATCH] =?UTF-8?q?publish:=20HTML=20/=20CSS=20:=20Cr=C3=A9er=20un?= =?UTF-8?q?=20magazine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../draft_overlay.json | 16 - .../draft_overlay.md | 286 ------------------ 81d594cb-295f-4cab-b333-975108afbdc8/index.md | 237 ++++++++++++++- .../meta.json | 22 +- .../revisions/0001.md | 77 +++++ 5 files changed, 318 insertions(+), 320 deletions(-) delete mode 100644 81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.json delete mode 100644 81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.md create mode 100644 81d594cb-295f-4cab-b333-975108afbdc8/revisions/0001.md diff --git a/81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.json b/81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.json deleted file mode 100644 index d879b9f..0000000 --- a/81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "title": "HTML / CSS : Créer un magazine", - "_updated_at": "2026-05-15 14:37:17", - "slug": "creer-un-magazine-html-css", - "published": true, - "published_at": "2023-02-28 20:02", - "category": "Développement", - "tags": { - "tags": [ - "HTML", - "CSS" - ] - }, - "seo_title": "", - "seo_description": "" -} diff --git a/81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.md b/81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.md deleted file mode 100644 index eafbb40..0000000 --- a/81d594cb-295f-4cab-b333-975108afbdc8/draft_overlay.md +++ /dev/null @@ -1,286 +0,0 @@ -# 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 - - - - - -

mon magazine

- - -``` - -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 :** - -- `` 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 -
-
-``` - -… 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 `
`. On commence par un encart simple, dans la colonne de droite : - -```html -
-
-

Mignon le chaton !

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

Mignon le chaton !

- -
-``` - -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 `
…
` 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 `

` ; -- un paragraphe `

` ; -- une image avec la classe `photo` ; -- une liste `

    ` avec des `
  • `. - ---- - -## É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 - - - - - - -

    mon magazine

    -
    -
    -
    -

    Mignon le chaton !

    - -
    -
    - - - -``` - -### `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). \ No newline at end of file diff --git a/81d594cb-295f-4cab-b333-975108afbdc8/index.md b/81d594cb-295f-4cab-b333-975108afbdc8/index.md index 03e387e..eafbb40 100644 --- a/81d594cb-295f-4cab-b333-975108afbdc8/index.md +++ b/81d594cb-295f-4cab-b333-975108afbdc8/index.md @@ -1,15 +1,209 @@ # HTML / CSS : Créer un magazine -Suivez le cours en ligne depuis l'adresse https:*projects.raspberrypi.org/en/projects/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. -La réalisation s'effectue depuis le site https:*trinket.io/embed/html/cef5e64bc0 +--- -Ci-dessous le corrigé. +## Objectifs pédagogiques -```HTML +À 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 - + + + +

    mon magazine

    + + +``` + +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 :** + +- `` 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 +
    +
    +``` + +… 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 `
    `. On commence par un encart simple, dans la colonne de droite : + +```html +
    +
    +

    Mignon le chaton !

    +
    +
    +``` + +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 +
    +

    Mignon le chaton !

    + +
    +``` + +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 `
    …
    ` 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 `

    ` ; +- un paragraphe `

    ` ; +- une image avec la classe `photo` ; +- une liste `

      ` avec des `
    • `. + +--- + +## É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 + + + @@ -17,8 +211,8 @@ Ci-dessous le corrigé.
      -

      Mignon le chatton !

      - +

      Mignon le chaton !

      +
      @@ -26,29 +220,30 @@ Ci-dessous le corrigé. ``` -```CSS +### `style.css` + +```css h1 { text-align: center; color: white; background: teal; padding: 5px; } - body { - background: linear-gradient(to bottom right, lemnchiffon, white); + background: linear-gradient(to bottom right, lemonchiffon, white); padding: 15px; - font-family: Carlito; + font-family: Carlito; } .column1 { width: 48%; - float:left; + float: left; } .column2 { width: 48%; - float:right; + float: right; } img { @@ -74,4 +269,18 @@ h2 { box-shadow: 2px 2px 2px gray; text-align: center; } -``` \ No newline at end of file +``` + +--- + +## 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). \ No newline at end of file diff --git a/81d594cb-295f-4cab-b333-975108afbdc8/meta.json b/81d594cb-295f-4cab-b333-975108afbdc8/meta.json index 44559c6..86b64ee 100644 --- a/81d594cb-295f-4cab-b333-975108afbdc8/meta.json +++ b/81d594cb-295f-4cab-b333-975108afbdc8/meta.json @@ -4,10 +4,18 @@ "title": "HTML / CSS : Créer un magazine", "author": "cedric@abonnel.fr", "published": true, - "published_at": "2023-02-28 20:02:45", + "featured": false, + "published_at": "2023-02-28 20:02", "created_at": "2023-02-28 20:02:45", - "updated_at": "2023-02-28 20:02:45", - "revisions": [], + "updated_at": "2026-05-15 14:37:17", + "revisions": [ + { + "n": 1, + "date": "2026-05-15 14:37:17", + "comment": "Catégorie modifiée, tags modifiés, contenu modifié", + "title": "HTML / CSS : Créer un magazine" + } + ], "cover": "", "files_meta": [], "external_links": [ @@ -34,5 +42,11 @@ "seo_title": "", "seo_description": "", "og_image": "", - "category": "Informatique" + "category": "Développement", + "tags": { + "tags": [ + "HTML", + "CSS" + ] + } } diff --git a/81d594cb-295f-4cab-b333-975108afbdc8/revisions/0001.md b/81d594cb-295f-4cab-b333-975108afbdc8/revisions/0001.md new file mode 100644 index 0000000..03e387e --- /dev/null +++ b/81d594cb-295f-4cab-b333-975108afbdc8/revisions/0001.md @@ -0,0 +1,77 @@ +# HTML / CSS : Créer un magazine + +Suivez le cours en ligne depuis l'adresse https:*projects.raspberrypi.org/en/projects/magazine/ + +La réalisation s'effectue depuis le site https:*trinket.io/embed/html/cef5e64bc0 + +Ci-dessous le corrigé. + +```HTML + + + + + + +

      mon magazine

      +
      +
      +
      +

      Mignon le chatton !

      + +
      +
      + + + +``` + +```CSS +h1 { + text-align: center; + color: white; + background: teal; + padding: 5px; +} + + +body { + background: linear-gradient(to bottom right, lemnchiffon, 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; +} +``` \ No newline at end of file