cuisine-du-web/livre-de-cuisine
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: cuisine-du-web:vincent-recettes
Branches Tags
cuisine-du-web:main
cuisine-du-web:recettes-vincent-2
cuisine-du-web:vincent-recettes
...
pull from: cuisine-du-web:main
Branches Tags
cuisine-du-web:main
cuisine-du-web:recettes-vincent-2
cuisine-du-web:vincent-recettes

12 Commits
vincent-re ... main

Author SHA1 Message Date
EpicKiwi
ca5305565e
Ajustement sur les conseils d'Alexander 2024-05-24 23:38:13 +02:00
EpicKiwi
57de34f53b
Ajout de l'index des couleurs 2024-05-24 23:01:54 +02:00
EpicKiwi
d5a3339997
Ajustements 2024-05-24 13:13:05 +02:00
EpicKiwi
6a49ed12fc
Corrections 2024-05-24 13:12:59 +02:00
EpicKiwi
65366f0446
Correction 2024-05-24 13:07:25 +02:00
EpicKiwi
2b706f3451
Ajout de certaines partie du journal 2024-05-24 13:02:05 +02:00
EpicKiwi
34bbb349ac
Ajout du aside pour donner des notes 2024-05-24 13:01:54 +02:00
EpicKiwi
c6211a8b8d
Ajout de la section "Ajuster les couleurs" et "Mettre en avant le premier paragraphe" 2024-05-24 12:35:15 +02:00
EpicKiwi
326409abea
Ajout de la recette de la galerie 2024-05-24 11:48:39 +02:00
EpicKiwi
94c7c5610e
Ajout d'un guide pour créer un journal 2024-05-03 13:30:32 +02:00
EpicKiwi
3a01303cfe
Suppression des liens en mode print 2024-05-03 13:23:10 +02:00
EpicKiwi
8819cf18ad
Ajout du QRcode en mode print 2024-05-03 13:21:11 +02:00
8 changed files with 750 additions and 14 deletions
Show Stats Expand all files Collapse all files

8
assets/qr-code.js Normal file
View File

File diff suppressed because one or more lines are too long

94
assets/style.css
View File

@ -90,7 +90,7 @@ small {
margin-right: 1ex; margin-right: 1ex;
} }
.guide > p:first-of-type:last-of-type::before { .guide > p:first-of-type:last-child::before {
content: "➔"; content: "➔";
} }
@ -128,3 +128,95 @@ pre {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
} }
.ressource qr-code {
display: none;
}
aside {
padding: 5px;
border: solid 1px black;
margin-left: 2rem;
margin-right: 2rem;
margin-top: 35px;
margin-bottom: 35px;
}
aside > :first-child {
margin-top: 0;
}
aside > :last-child {
margin-bottom: 0;
}
.guide aside::before {
content: "➔";
float: left;
margin-right: 1ex;
margin-left: 5px;
}
@media print {
header a {
display: none;
}
a {
color: inherit;
}
.ressource :not(h2) {
font-size: 10pt;
}
.ressource ul {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
flex-wrap: wrap;
width: 100%;
margin-bottom: 50px;
}
.ressource ul > * {
width: 200px;
}
.ressource li {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
text-align: center;
margin-bottom: 25px;
}
.ressource li a {
display: contents;
}
.ressource qr-code {
display: block;
width: 100px;
}
.ressource qr-code::part(img) {
width: 100%;
}
.ressource a::after {
content: attr(href);
display: block;
text-decoration: none;
font-size: 0.9em;
margin-top: 1em;
order: 0;
word-wrap: break-word;
opacity: 0.5;
width: 100%;
}
}

2
glossaire.html
View File

@ -31,6 +31,8 @@
</figure> </figure>
</article> </article>
<!-- TODO définir élément -->
</main> </main>
</body> </body>
</html> </html>

196
index-des-couleurs.html Normal file
View File

@ -0,0 +1,196 @@
<!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>Index des couleurs</title>
<style>
main > ul {
padding: 0;
list-style-type: none;
columns: 3;
}
</style>
</head>
<body>
<header>
<a href="..">Index des recettes</a>
</header>
<main>
<h1>Index des couleurs</h1>
<p>Cette page donne la liste du nom des couleurs utilisables sur le WEB.</p>
<ul>
<li><code>aliceblue</code></li>
<li><code>antiquewhite</code></li>
<li><code>aqua</code></li>
<li><code>aquamarine</code></li>
<li><code>azure</code></li>
<li><code>beige</code></li>
<li><code>bisque</code></li>
<li><code>black</code></li>
<li><code>blanchedalmond</code></li>
<li><code>blue</code></li>
<li><code>blueviolet</code></li>
<li><code>brown</code></li>
<li><code>burlywood</code></li>
<li><code>cadetblue</code></li>
<li><code>chartreuse</code></li>
<li><code>chocolate</code></li>
<li><code>coral</code></li>
<li><code>cornflowerblue</code></li>
<li><code>cornsilk</code></li>
<li><code>crimson</code></li>
<li><code>cyan</code></li>
<li><code>darkblue</code></li>
<li><code>darkcyan</code></li>
<li><code>darkgoldenrod</code></li>
<li><code>darkgray</code></li>
<li><code>darkgreen</code></li>
<li><code>darkgrey</code></li>
<li><code>darkkhaki</code></li>
<li><code>darkmagenta</code></li>
<li><code>darkolivegreen</code></li>
<li><code>darkorange</code></li>
<li><code>darkorchid</code></li>
<li><code>darkred</code></li>
<li><code>darksalmon</code></li>
<li><code>darkseagreen</code></li>
<li><code>darkslateblue</code></li>
<li><code>darkslategray</code></li>
<li><code>darkslategrey</code></li>
<li><code>darkturquoise</code></li>
<li><code>darkviolet</code></li>
<li><code>deeppink</code></li>
<li><code>deepskyblue</code></li>
<li><code>dimgray</code></li>
<li><code>dimgrey</code></li>
<li><code>dodgerblue</code></li>
<li><code>firebrick</code></li>
<li><code>floralwhite</code></li>
<li><code>forestgreen</code></li>
<li><code>fuchsia</code></li>
<li><code>gainsboro</code></li>
<li><code>ghostwhite</code></li>
<li><code>gold</code></li>
<li><code>goldenrod</code></li>
<li><code>gray</code></li>
<li><code>green</code></li>
<li><code>greenyellow</code></li>
<li><code>grey</code></li>
<li><code>honeydew</code></li>
<li><code>hotpink</code></li>
<li><code>indianred</code></li>
<li><code>indigo</code></li>
<li><code>ivory</code></li>
<li><code>khaki</code></li>
<li><code>lavender</code></li>
<li><code>lavenderblush</code></li>
<li><code>lawngreen</code></li>
<li><code>lemonchiffon</code></li>
<li><code>lightblue</code></li>
<li><code>lightcoral</code></li>
<li><code>lightcyan</code></li>
<li><code>lightgoldenrodyellow</code></li>
<li><code>lightgray</code></li>
<li><code>lightgreen</code></li>
<li><code>lightgrey</code></li>
<li><code>lightpink</code></li>
<li><code>lightsalmon</code></li>
<li><code>lightseagreen</code></li>
<li><code>lightskyblue</code></li>
<li><code>lightslategray</code></li>
<li><code>lightslategrey</code></li>
<li><code>lightsteelblue</code></li>
<li><code>lightyellow</code></li>
<li><code>lime</code></li>
<li><code>limegreen</code></li>
<li><code>linen</code></li>
<li><code>magenta</code></li>
<li><code>maroon</code></li>
<li><code>mediumaquamarine</code></li>
<li><code>mediumblue</code></li>
<li><code>mediumorchid</code></li>
<li><code>mediumpurple</code></li>
<li><code>mediumseagreen</code></li>
<li><code>mediumslateblue</code></li>
<li><code>mediumspringgreen</code></li>
<li><code>mediumturquoise</code></li>
<li><code>mediumvioletred</code></li>
<li><code>midnightblue</code></li>
<li><code>mintcream</code></li>
<li><code>mistyrose</code></li>
<li><code>moccasin</code></li>
<li><code>navajowhite</code></li>
<li><code>navy</code></li>
<li><code>oldlace</code></li>
<li><code>olive</code></li>
<li><code>olivedrab</code></li>
<li><code>orange</code></li>
<li><code>orangered</code></li>
<li><code>orchid</code></li>
<li><code>palegoldenrod</code></li>
<li><code>palegreen</code></li>
<li><code>paleturquoise</code></li>
<li><code>palevioletred</code></li>
<li><code>papayawhip</code></li>
<li><code>peachpuff</code></li>
<li><code>peru</code></li>
<li><code>pink</code></li>
<li><code>plum</code></li>
<li><code>powderblue</code></li>
<li><code>purple</code></li>
<li><code>rebeccapurple</code></li>
<li><code>red</code></li>
<li><code>rosybrown</code></li>
<li><code>royalblue</code></li>
<li><code>saddlebrown</code></li>
<li><code>salmon</code></li>
<li><code>sandybrown</code></li>
<li><code>seagreen</code></li>
<li><code>seashell</code></li>
<li><code>sienna</code></li>
<li><code>silver</code></li>
<li><code>skyblue</code></li>
<li><code>slateblue</code></li>
<li><code>slategray</code></li>
<li><code>slategrey</code></li>
<li><code>snow</code></li>
<li><code>springgreen</code></li>
<li><code>steelblue</code></li>
<li><code>tan</code></li>
<li><code>teal</code></li>
<li><code>thistle</code></li>
<li><code>tomato</code></li>
<li><code>transparent</code></li>
<li><code>turquoise</code></li>
<li><code>violet</code></li>
<li><code>wheat</code></li>
<li><code>white</code></li>
<li><code>whitesmoke</code></li>
<li><code>yellow</code></li>
<li><code>yellowgreen</code></li>
</ul>
<section class="ressource">
<h2>Pour aller plus loin</h2>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl"></qr-code>
hsl()
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/color-mix" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/color-mix"></qr-code>
color-mix()
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value"></qr-code>
&lt;color-value&gt;
</a></li>
</ul>
</section>
</main>
</body>
</html>

5
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -15,12 +15,15 @@
<ul> <ul>
<li><a href="recettes/01-creer-une-page-simple.html">Créer une page simple</a></li> <li><a href="recettes/01-creer-une-page-simple.html">Créer une page simple</a></li>
<li><a href="recettes/02-creer-un-journal.html">Créer un journal</a></li>
<li><a href="recettes/03-creer-une-galerie.html">Créer une galerie d'images</a></li>
</ul> </ul>
<hr> <hr>
<ul> <ul>
<li><a href="glossaire.html">Glossaire</a></li> <li><a href="glossaire.html">Glossaire</a></li>
<li><a href="index-des-couleurs.html">Index des couleurs</a></li>
</ul> </ul>
</main> </main>
</body> </body>

34
recettes/01-creer-une-page-simple.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/style.css"> <link rel="stylesheet" href="../assets/style.css">
<script src="../assets/qr-code.js"></script>
<title>Créer une page simple</title> <title>Créer une page simple</title>
</head> </head>
<body> <body>
@ -14,7 +15,7 @@
<main class="recette"> <main class="recette">
<h1>Créer une page simple</h1> <h1>Créer une page simple</h1>
<p>Ce guide donne les instructions pour creer un simple page web avec un titre et un court contenu.</p> <p>Ce guide donne les instructions pour créer une simple page web avec un titre et un court contenu.</p>
<figure class="resultat"> <figure class="resultat">
<img src="../images/hello-world.png" alt="Une fenetre de navigateur. Une simple page ouverte nommee 'bonjour internet' avec un titre 'bonjour le monde' et un court paragraph." /> <img src="../images/hello-world.png" alt="Une fenetre de navigateur. Une simple page ouverte nommee 'bonjour internet' avec un titre 'bonjour le monde' et un court paragraph." />
@ -27,8 +28,8 @@
<ul> <ul>
<li>Un ordinateur fonctionnel</li> <li>Un ordinateur fonctionnel</li>
<li> <li>
Un editeur de texte Un éditeur de texte
<small><a href="https://vscodium.com/">VSCodium</a> par exemple mais le bloc note du systeme fera l'affaire</small> <small><a href="https://vscodium.com/">VSCodium</a> par exemple mais le bloc note du système fera l'affaire</small>
</li> </li>
<li> <li>
Un navigateur web Un navigateur web
@ -41,7 +42,7 @@
<section class="guide"> <section class="guide">
<article> <article>
<p> <p>
Ouvrir l'editeur de texte et y coller le code HTML suivant. Ouvrir l'éditeur de texte et y coller le code HTML suivant.
</p> </p>
<pre><code>&lt;!DOCTYPE html&gt; <pre><code>&lt;!DOCTYPE html&gt;
@ -60,9 +61,9 @@
<p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p> <p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p>
<p>Ouvrir le fichier ainsi créé</p> <p>Ouvrir le fichier avec un navigateur (comme Firefox par exemple)</p>
<p class="note"><strong>Note</strong> : L'actualisation de la page du navigateur est necessaire a chaque modification du code</p> <p class="note"><strong>Note</strong> : L'actualisation de la page sur le navigateur est nécessaire à chaque modification du code</p>
</section> </section>
<section class="guide"> <section class="guide">
@ -74,19 +75,28 @@
<section class="guide"> <section class="guide">
<h3>Personnalisation du contenu de la page</h3> <h3>Personnalisation du contenu de la page</h3>
<p>Modifier le titre principal de la page en modifiant le texte entre les balises <code>&lt;h1&gt;</code> et <code>&lt;/h2&gt;</code></p> <p>Modifier le titre principal de la page en modifiant le texte entre les balises <code>&lt;h1&gt;</code> et <code>&lt;/h1&gt;</code></p>
<p>Modifier le contenu du premier pragraphe entre les balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code></p> <p>Modifier le contenu du premier paragraphe entre les balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code></p>
<p>Optionnel : Ajouter d'autres balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code> à la suite jusqu'a obtention du nombre de paragraphes voulu.</p> <p>Optionnel : Ajouter d'autres balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code> à la suite jusqu'à obtention du nombre de paragraphes voulu.</p>
</section> </section>
<section class="ressource"> <section class="ressource">
<h2>Pour aller plus loin</h2> <h2>Pour aller plus loin</h2>
<ul> <ul>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">Notions de base en HTML</a></li> <li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html">Anatomie d'un document HTML</a></li> <qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics"></qr-code>
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title">&lt;title&gt; : l'élément de titre du document</a></li> Notions de base en HTML
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html"></qr-code>
Anatomie d'un document HTML
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title"></qr-code>
&lt;title&gt; : l'élément de titre du document
</a></li>
</ul> </ul>
</section> </section>

280
recettes/02-creer-un-journal.html Normal file
View File

@ -0,0 +1,280 @@
<!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 un journal</title>
</head>
<body>
<header>
<a href="..">Index des recettes</a>
</header>
<main class="recette">
<h1>Créer un journal</h1>
<p>Ce guide donne les instructions pour créer une page web sous forme d'un journal d'activités comme une suite de titres et de paragraphes.</p>
<section class="ingredients">
<h2>Ingrédients <small>pour 1 page</small></h2>
<ul>
<li>Une <a href="./01-creer-une-page-simple.html">page simple</a> comme base</li>
<li>Un texte sous forme de journal</li>
<li>Quelques images (optionnelles)</li>
</ul>
</section>
<section class="guide">
<h2>Ajouter des sections</h2>
<p class="note">L'ensemble des opérations de cette partie sont effectuées dans l'élément <code>body</code> (entre les balises <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>)</p>
<p>Écrire le titre de la section entre des balises <code>&lt;h2&gt;</code> et <code>&lt;/h2&gt;</code>.</p>
<p>Écrire un paragraphe à la suite du titre entre des balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code>.</p>
<p>Ajouter autant de section que nécessaire pour écrire l'ensemble du texte.</p>
<p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p>
<pre><code>&lt;body&gt;
&lt;h1&gt;Journal d'une rescapée&lt;/h1&gt;
&lt;p&gt;Récits de survie et de découvertes.&lt;/p&gt;
&lt;h2&gt;Jour 1: Où suis-je ?&lt;/h2&gt;
&lt;p&gt;Je ne sais pas combien de temps j'ai passé, évanouie sur cette plage.
J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à manger.&lt;/p&gt;
&lt;h2&gt;Jour 2: Trouver un toit&lt;/h2&gt;
&lt;p&gt;J'ai trouvé de quoi manger et boire dans la forêt à côté de la plage.
Il y a de grands arbres et de nombreuses plantes; je ne me suis pas encore empoisonnée.
Je dois trouver un endroit où dormir, il faut trop froid la nuit.&lt;/p&gt;
&lt;p&gt;Il y a une grotte dans la falaise sur les hauteurs de la forêt,
je vais essayer d'aller voir s'il est possible de s'y installer.&lt;/p&gt;
&lt;/body&gt;</code></pre>
</section>
<section class="guide">
<h2>Ajouter des images</h2>
<p>Placer les images à côté du fichier <code>.html</code> créé dans l'étape précédente.</p>
<article>
<p>Ajouter le code suivant à l'endroit où l'image sera insérée.</p>
<pre><code>&lt;img src="" alt="" /&gt;</code></pre>
</article>
<p>Inscrire le nom du fichier de l'image entre les guillemets de <code>src=""</code>.</p>
<p>Écrire une courte description de l'image entre les guillemets de <code>alt=""</code>.
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>&lt;h2&gt;Jour 1: Où suis-je ?&lt;/h2&gt;
&lt;p&gt;Je ne sais pas combien de temps j'ai passé, évanouie sur cette plage.
J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à manger.&lt;/p&gt;
&lt;img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" /&gt;</code></pre>
</section>
<section class="guide">
<h2>Ajuster la police du texte</h2>
<p>Dans l'élément <code>head</code> de la page, ajouter un élément <code>style</code> qui donnera les indications de mise en page.</p>
<article>
<p>Définir la police de la page en <em>Sans-serif</em> et la police des titres en <em>Serif</em> en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
<pre><code>body {
font-family: sans-serif;
}
h1, h2, h3 {
font-family: serif;
}</code></pre>
<aside>
<p>Vous pouvez mettre le nom de n'importe quelle police installée sur l'ordinateur a la place de <code>serif</code> ou <code>sans-serif</code>.</p>
</aside>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;fr&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Journal&lt;/title&gt;
&lt;style&gt;
body {
font-family: sans-serif;
}
h1, h2, h3 {
font-family: serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... --&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</article>
</section>
<section class="guide">
<h2>Ajuster les couleurs de la page</h2>
<article>
<p>Ajuster la couleur de l'arrière-plan de la page en ajoutant le code suivant dans l'élément <code>style</code> précédente:</p>
<pre><code>body {
background-color: burlywood;
}</code></pre>
<aside>
<p>
Vous pouvez changer la couleur en modifiant le nom de la couleur après <code>background-color</code>.
Consultez <a href="../index-des-couleurs.html">l'index des couleurs</a> pour la liste de tous les noms de couleur.
</p>
</aside>
</article>
</section>
<section class="guide">
<h2>Mettre en avant le premier paragraphe</h2>
<article>
<p>Centrer le titre principal de la page en ajoutant le code suivant à l'élément <code>style</code> précédent:</p>
<pre><code>
h1 {
text-align: center;
}</code></pre>
</article>
<article>
<p>Contrer le paragraphe suivant le titre principal de la page en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
<pre><code>
h1 + p {
text-align: center;
}</code></pre>
</article>
<article>
<p>Ajouter un style particulier a ce même paragraphe en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
<pre><code>h1 + p {
font-size: 1.1rem;
font-style: italic;
font-weight: bold;
}</code></pre>
</article>
<aside>
<p>Vous pouvez ajuster la taille de la police en modifiant la valeur après <code>font-size</code> (tout en conservant l'unité <code>rem</code>).</p>
</aside>
<article>
<p>Ajouter de la marge au-dessus du titre principal et au-dessous du paragraphe qui le suit en ajoutant le code suivant dans l'élément <code>style</code> de la plage:</p>
<pre><code>h1 {
margin-top: 100px;
}
h1 + p {
margin-bottom: 100px;
}</code></pre>
<aside>
<p>Vous pouvez ajuster la marge en modifiant les valeurs après <code>margin-top</code> ou <code>margin-bottom</code> (tout en conservant l'unité <code>px</code>).</p>
</aside>
</article>
</section>
<section class="guide">
<h2>Centrer les images</h2>
<article>
<p>Ajouter le code suivant dans l'élément <code>style</code> définit précédemment.</p>
<pre><code>img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}</code></pre>
</article>
</section>
<section class="guide">
<h2>Centrer le contenu de la page</h2>
<article>
<p>Ajouter le code suivant dans l'élément <code>style</code></p>
<pre><code>body {
padding: 25px;
max-width: 1500px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}</code></pre>
</article>
<aside>
<p>Vous pouvez ajuster la valeur après <code>max-width</code> pour définir la largeur maximale que prendra la page (tout en conservant l'unité <code>px</code>).</p>
<p>Vous pouvez aussi ajuster la valeur de <code>padding</code> pour modifier la taille de la marge interne (tout en conservant l'unité <code>px</code>)</p>
</aside>
</section>
<section class="ressource">
<h2>Pour aller plus loin</h2>
<ul>
<!-- Donner quelques ressources pour aller plus loin -->
<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/Heading_Elements" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements"></qr-code>
&lt;h1&gt;-&lt;h6&gt; : les éléments de titre de section
</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>
&lt;img&gt; : l'élément d'image embarquée
</a></li>
</ul>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started#mettre_en_forme_des_%C3%A9l%C3%A9ments_html" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started#mettre_en_forme_des_%C3%A9l%C3%A9ments_html"></qr-code>
Mettre en forme des éléments HTML
</a></li>
<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/width" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/width"></qr-code>
width
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-width" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/max-width"></qr-code>
max-width
</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/font-family" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-family"></qr-code>
font-family
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-style" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-style"></qr-code>
font-style
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-size" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-size"></qr-code>
font-size
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/background-color" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/background-color"></qr-code>
background-color
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl"></qr-code>
hsl()
</a></li>
</ul>
</section>
</main>
</body>
</html>

145
recettes/03-creer-une-galerie.html Normal file
View File

@ -0,0 +1,145 @@
<!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>&lt;img src="" alt="" /&gt;</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>&lt;img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" /&gt;</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>&lt;style&gt;
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;
}
&lt;/style&gt;</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>
&lt;img&gt; : 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>