Ajouter le code suivant dans l'élément body pour insérer une image.
<img src="" alt="" />Créer une galerie d'images
+Ce guide donne les instructions pour créer une page qui présente plusieurs images sur une grille.
+ +Ingrédients pour 1 galerie
+ +-
+
- Une page simple comme base +
- Quelques images +
Ajouter les images
+ +Placer les fichiers d'images (jpg, png, etc.) dans le même dossier que la page HTML.
+ +Dans l'élément body:
Insérer le nom du fichier dans l'attribut src entre les guillemets (").
Ajouter un court texte de description de l'image dans l'attribut alt entre les guillemets.
+ Cette description remplacera l'image pour les personnes qui ne peuvent pas la voir ou si l'image ne peut pas charger.
<img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" />Répéter cette opération pour toutes les images.
+Disposer les images en grille
+ +Dans l'élément head de la page, ajouter un élément style qui contiendra toutes les regles de style de la page. Comme dans le code suivant :
<style>
+ body {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: min-content min-content min-content;
+ grid-auto-rows: 1fr;
+ gap: 5px;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ padding: 5px;
+ box-sizing: border-box;
+ background: black;
+ color: white;
+ }
+
+ h1, p {
+ grid-column: 1 / 5;
+ margin: 0;
+ padding: 10px 25px;
+ }
+
+ img {
+ width: 100%;
+ }
+
+ img:first-of-type {
+ grid-column: 1 / 5;
+ }
+</style>Ajuster selon l'envie :
+-
+
- Le nombre de colonnes en ajoutant (ou retirant) des valeurs dans
grid-template-columns.
+ - L'espacement entre les cases en changeant la valeur de
gap.
+ - Les marges externes en ajustant la valeur de
margin.
+ - Les marges internes en ajustant la valuer de
padding.
+