publish: HTML / CSS : Créer un magazine
This commit is contained in:
Cédrix
@@ -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": ""
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
<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).
|
|
||||||
@@ -1,15 +1,209 @@
|
|||||||
# HTML / CSS : Créer un magazine
|
# 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
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="style.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -17,8 +211,8 @@ Ci-dessous le corrigé.
|
|||||||
<div class="column1"></div>
|
<div class="column1"></div>
|
||||||
<div class="column2">
|
<div class="column2">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<h2>Mignon le chatton !</h2>
|
<h2>Mignon le chaton !</h2>
|
||||||
<img class="photo" src="kitten.jpg"/>
|
<img class="photo" src="chaton.jpg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -26,29 +220,30 @@ Ci-dessous le corrigé.
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
```CSS
|
### `style.css`
|
||||||
|
|
||||||
|
```css
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
background: teal;
|
background: teal;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(to bottom right, lemnchiffon, white);
|
background: linear-gradient(to bottom right, lemonchiffon, white);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-family: Carlito;
|
font-family: Carlito;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column1 {
|
.column1 {
|
||||||
width: 48%;
|
width: 48%;
|
||||||
float:left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column2 {
|
.column2 {
|
||||||
width: 48%;
|
width: 48%;
|
||||||
float:right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@@ -74,4 +269,18 @@ h2 {
|
|||||||
box-shadow: 2px 2px 2px gray;
|
box-shadow: 2px 2px 2px gray;
|
||||||
text-align: center;
|
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).
|
||||||
@@ -4,10 +4,18 @@
|
|||||||
"title": "HTML / CSS : Créer un magazine",
|
"title": "HTML / CSS : Créer un magazine",
|
||||||
"author": "cedric@abonnel.fr",
|
"author": "cedric@abonnel.fr",
|
||||||
"published": true,
|
"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",
|
"created_at": "2023-02-28 20:02:45",
|
||||||
"updated_at": "2023-02-28 20:02:45",
|
"updated_at": "2026-05-15 14:37:17",
|
||||||
"revisions": [],
|
"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": "",
|
"cover": "",
|
||||||
"files_meta": [],
|
"files_meta": [],
|
||||||
"external_links": [
|
"external_links": [
|
||||||
@@ -34,5 +42,11 @@
|
|||||||
"seo_title": "",
|
"seo_title": "",
|
||||||
"seo_description": "",
|
"seo_description": "",
|
||||||
"og_image": "",
|
"og_image": "",
|
||||||
"category": "Informatique"
|
"category": "Développement",
|
||||||
|
"tags": {
|
||||||
|
"tags": [
|
||||||
|
"HTML",
|
||||||
|
"CSS"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
<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 chatton !</h2>
|
||||||
|
<img class="photo" src="kitten.jpg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```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;
|
||||||
|
}
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user