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:326409abeab127c17240567ca1b83c7e61098db5
Branches Tags
cuisine-du-web:main
cuisine-du-web:recettes-vincent-2
cuisine-du-web:vincent-recettes
...
compare: cuisine-du-web:d5a3339997f1c793a2fa567638fd55c5dd97e198
Branches Tags
cuisine-du-web:main
cuisine-du-web:recettes-vincent-2
cuisine-du-web:vincent-recettes

6 Commits
326409abea ... d5a3339997

Author SHA1 Message Date
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
3 changed files with 154 additions and 26 deletions
Show Stats Expand all files Collapse all files

25
assets/style.css
View File

@ -133,6 +133,30 @@ pre {
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;
@ -169,7 +193,6 @@ pre {
align-items: center;
text-align: center;
margin-bottom: 25px;
page-break-inside: avoid;
}
.ressource li a {

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

@ -15,7 +15,7 @@
<main class="recette">
<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">
<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." />
@ -28,8 +28,8 @@
<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>
Un éditeur de texte
<small><a href="https://vscodium.com/">VSCodium</a> par exemple mais le bloc note du système fera l'affaire</small>
</li>
<li>
Un navigateur web
@ -42,7 +42,7 @@
<section class="guide">
<article>
<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>
<pre><code>&lt;!DOCTYPE html&gt;
@ -63,7 +63,7 @@
<p>Ouvrir le fichier ainsi créé</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 du navigateur est nécessaire a chaque modification du code</p>
</section>
<section class="guide">
@ -77,9 +77,9 @@
<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 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 class="ressource">

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

@ -15,7 +15,7 @@
<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>
<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>
@ -26,31 +26,32 @@
</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 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;!-- ... --&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;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 sait pas combien de temps j'ai passé, évanouie sur cette plage.
&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 à coté de la plage.
&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 doit trouver un endroit où dormir, il faut trop froid la nuit.&lt;/p&gt;
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 si il est possible de s'y installer.&lt;/p&gt;
je vais essayer d'aller voir s'il est possible de s'y installer.&lt;/p&gt;
&lt;/body&gt;
&lt;!-- ... --&gt;</code></pre>
@ -58,19 +59,19 @@
<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>
<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 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>.
<p>Inscrire le nom du fichier de l'image doit être écrit 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;!-- ... --&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.
&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;
@ -78,9 +79,16 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
&lt;!-- ... --&gt;</code></pre>
</section>
<section class="guide">
<h2>Mettre certaines parties du texte en évidence</h2>
<p>Entourer le texte à mettre en évidence d'une balise <code>&lt;strong&gt;</code> et <code>&lt;/strong&gt;</code></p>
<pre><code>J'ai &lt;strong&gt;mal &agrave; la t&ecirc;te&lt;/strong&gt; et j'ai &lt;strong&gt;faim&lt;/strong&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>
<p>Dans l'élément <code>head</code> de la page, ajouter un élément <code>style</code> qui contiendra toutes les règles de style de la page.</p>
<article>
<p>Ajouter le code suivant dans l'élément <code>style</code></p>
<pre><code>body {
@ -93,7 +101,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
}</code></pre>
</article>
<p>Ajuster les valeurs de <code>max-width</code> et <code>padding</code> pour arriver aux espacements voulues.</p>
<p>Ajuster les valeurs de <code>max-width</code> et <code>padding</code> pour arriver aux espacements voulus.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;fr&quot;&gt;
@ -104,7 +112,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
&lt;style&gt;
body {
padding: 25px;
max-width: 1500px;
max-width: 800px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
@ -123,6 +131,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<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;
@ -130,6 +139,81 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
</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: hsl(35.2, 69%, 83.5%);
}</code></pre>
<aside>
<p>Vous pouvez ajuster la couleur à votre convenance en modifiant 3 valeurs numériques dans <code>hsl()</code>.</p>
</aside>
</article>
<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>
</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;
}</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="ressource">
<h2>Pour aller plus loin</h2>
<ul>
@ -172,6 +256,27 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<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>