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

Compare commits

base: cuisine-du-web:recettes-vincent-2
Branches Tags
cuisine-du-web:main cuisine-du-web:recettes-vincent-2 cuisine-du-web:vincent-recettes
..
compare: cuisine-du-web:vincent-recettes
Branches Tags
cuisine-du-web:main cuisine-du-web:recettes-vincent-2 cuisine-du-web:vincent-recettes

1 Commits
recettes-v ... vincent-re

Author SHA1 Message Date
Vincent Finance
cbb307d61a nouvelle recette: image 2024-04-02 23:15:33 +02:00
6 changed files with 97 additions and 272 deletions
Expand all files Collapse all files

8
assets/qr-code.js
View File

File diff suppressed because one or more lines are too long

71
assets/style.css
View File

@@ -90,7 +90,7 @@ small {
margin-right: 1ex;
}
.guide > p:first-of-type:last-child::before {
.guide > p:first-of-type:last-of-type::before {
content: "➔";
}
@@ -127,73 +127,4 @@ pre {
.index ul {
padding: 0;
list-style-type: none;
}
.ressource qr-code {
display: none;
}
@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;
page-break-inside: avoid;
}
.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%;
}
}

1
index.html
View File

@@ -15,7 +15,6 @@
<ul>
<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>
</ul>
<hr>

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

@@ -4,7 +4,6 @@
<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 page simple</title>
</head>
<body>
@@ -85,18 +84,9 @@
<section class="ressource">
<h2>Pour aller plus loin</h2>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics"></qr-code>
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>
<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#anatomie_dun_document_html">Anatomie d'un document HTML</a></li>
<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>
</ul>
</section>

93
recettes/02-ajouter-une-image.html Normal file
View File

@@ -0,0 +1,93 @@
<!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">
<title>Ajouter une image à une page simple</title>
</head>
<body>
<header>
<a href="..">Index des recettes</a>
</header>
<main class="recette">
<h1>Ajouter une image à une page simple</h1>
<p>Ce guide donne les instructions pour creer un simple page web avec un titre, un court contenu et une image.</p>
<figure class="resultat">
<img src="../images/hello-world.png" alt="Une fenetre de navigateur." />
</figure>
<section class="ingredients">
<h2>Ingrédients <small>pour 1 page web</small></h2>
<ul>
<li>Un ordinateur fonctionnel</li>
<li>
Un editeur de texte
<small><a href="https://vscodium.com/">VSCodium</a> par exemple mais le bloc note du systeme fera l'affaire</small>
</li>
<li>
Un navigateur web
<small>Par exemple <a href="https://www.mozilla.org/fr/firefox/new/">Firefox</a></small>
</li>
<li>
Une image
<small>Le mieux est de prendre une image à vous</small>
</li>
</ul>
</section>
<section class="guide">
<article>
<p>
Ouvrir l'editeur de texte et y coller le code HTML suivant.
</p>
<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;Titre&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;👋 Salut !&lt;/h1&gt;
&lt;p&gt;Dites bonjour à mon chat&lt;/p&gt;
&lt;img src="./monchat.jpg" alt="Une photo de mon chat" /&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</article>
<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 class="note"><strong>Note</strong> : L'actualisation de la page du navigateur est necessaire à chaque modification du code</p>
</section>
<section class="guide">
<h3>Personnalisation du titre de la page</h3>
<p>Modifier le texte entre la <a href="../glossaire.html#balise">balise</a> <code>&lt;title&gt;</code> et la balise <code>&lt;/title&gt;</code></p>
</section>
<section class="guide">
<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>
</section>
<section class="ressource">
<h2>Pour aller plus loin</h2>
<ul>
</ul>
</section>
</main>
</body>
</html>

180
recettes/02-creer-un-journal.html
View File

@@ -1,180 +0,0 @@
<!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 creer 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>
<p>L'ensemble des operations de ce guide sont éfféctuée dans l'élément <code>body</code> (entre les balises <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>)</p>
<section class="guide">
<h2>Ajouter des sections</h2>
<p>Ecrire le titre de la section entre des balises <code>&lt;h2&gt;</code> et <code>&lt;/h2&gt;</code>.</p>
<p>Ecrire 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 necessaire 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;!-- ... --&gt;
&lt;body&gt;
&lt;h1&gt;Journal d'une rescapée&lt;/h1&gt;
&lt;p&gt;Récis 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 sait 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 à coté de la plage.
Il y a de grands arbres et de nombreuses plantes; je ne me suis pas encore empoisonnée.
Je doit 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 si il est possible de s'y installer.&lt;/p&gt;
&lt;/body&gt;
&lt;!-- ... --&gt;</code></pre>
</section>
<section class="guide">
<h2>Ajouter des images</h2>
<p>Placer les images à coté 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 doit etre écrit entre les guillemets de <code>src=""</code>.</p>
<p>Ecrire 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;!-- ... --&gt;
&lt;h2&gt;Jour 1: Où suis-je ?&lt;/h2&gt;
&lt;p&gt;Je ne sait 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;
&lt;!-- ... --&gt;</code></pre>
</section>
<section class="guide">
<h2>Centrer le contenu de la page</h2>
<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.</p>
<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>
<p>Ajuster les valeurs de <code>max-width</code> et <code>padding</code> pour arriver aux espacements voulues.</p>
<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 {
padding: 25px;
max-width: 1500px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... --&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</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 {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}</code></pre>
</article>
</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>
</ul>
</section>
</main>
</body>
</html>