-
-```
-
-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 `Mignon le chaton !
-
-…
` 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
- --- - - -``` - -### `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 - + + + +--Mignon le chaton !
-
- 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 +++``` + +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 `Mignon le chaton !
+
+…` 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é.
@@ -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 + + + + + + +-
Mignon le chatton !
-
+ Mignon le chaton !
+
mon magazine
+ +++ + + +``` + +```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++Mignon le chatton !
+
+
- `.
+
+---
+
+## É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é.