145 lines
5.7 KiB
HTML
145 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="../assets/style.css">
|
||
|
|
<script src="../assets/qr-code.js"></script>
|
||
|
|
<title>Créer une galerie d'images</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<a href="..">Index des recettes</a>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="recette">
|
||
|
|
|
||
|
|
<h1>Créer une galerie d'images</h1>
|
||
|
|
<p>Ce guide donne les instructions pour créer une page qui présente plusieurs images sur une grille.</p>
|
||
|
|
|
||
|
|
<section class="ingredients">
|
||
|
|
|
||
|
|
<h2>Ingrédients <small>pour 1 galerie</small></h2>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>Une <a href="./01-creer-une-page-simple.html">page simple</a> comme base</li>
|
||
|
|
<li>Quelques images</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="guide">
|
||
|
|
<h2>Ajouter les images</h2>
|
||
|
|
|
||
|
|
<p>Placer les fichiers d'images (jpg, png, etc.) dans le même dossier que la page HTML.</p>
|
||
|
|
|
||
|
|
<p>Dans l'élément <code>body</code>:</p>
|
||
|
|
|
||
|
|
<article>
|
||
|
|
<p>Ajouter le code suivant dans l'élément <code>body</code> pour insérer une image.</p>
|
||
|
|
<pre><code><img src="" alt="" /></code></pre>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<p>Insérer le nom du fichier dans l'attribut <code>src</code> entre les guillemets (<code>"</code>).</p>
|
||
|
|
|
||
|
|
<p>Ajouter un court texte de description de l'image dans l'attribut <code>alt</code> 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.</p>
|
||
|
|
|
||
|
|
<pre><code><img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" /></code></pre>
|
||
|
|
|
||
|
|
<p>Répéter cette opération pour toutes les images.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Disposer les images en grille</h2>
|
||
|
|
|
||
|
|
<article>
|
||
|
|
<p>Dans l'élément <code>head</code> de la page, ajouter un élément <code>style</code> qui contiendra toutes les regles de style de la page. Comme dans le code suivant :</p>
|
||
|
|
<pre><code><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></code></pre>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article>
|
||
|
|
<p>Ajuster selon l'envie :</p>
|
||
|
|
<ul>
|
||
|
|
<li>Le nombre de colonnes en ajoutant (ou retirant) des valeurs dans <code>grid-template-columns</code>.</li>
|
||
|
|
<li>L'espacement entre les cases en changeant la valeur de <code>gap</code>.</li>
|
||
|
|
<li>Les marges externes en ajustant la valeur de <code>margin</code>.</li>
|
||
|
|
<li>Les marges internes en ajustant la valuer de <code>padding</code>.</li>
|
||
|
|
</ul>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="ressource">
|
||
|
|
<h2>Pour aller plus loin</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML"></qr-code>
|
||
|
|
Les images en HTML
|
||
|
|
</a></li>
|
||
|
|
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img"></qr-code>
|
||
|
|
<img> : l'élément d'image embarquée
|
||
|
|
</a></li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/padding" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/padding"></qr-code>
|
||
|
|
padding
|
||
|
|
</a></li>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/margin" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/margin"></qr-code>
|
||
|
|
margin
|
||
|
|
</a></li>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing"></qr-code>
|
||
|
|
box-sizing
|
||
|
|
</a></li>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout"></qr-code>
|
||
|
|
Grilles CSS (CSS Grid)
|
||
|
|
</a></li>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/gap" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/gap"></qr-code>
|
||
|
|
gap (grid-gap)
|
||
|
|
</a></li>
|
||
|
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/align-items" target="_blank">
|
||
|
|
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/align-items"></qr-code>
|
||
|
|
padding
|
||
|
|
</a></li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|