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

Correction

Browse Source
This commit is contained in:
EpicKiwi 2024-05-24 13:07:25 +02:00
parent 2b706f3451
commit 65366f0446
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
<main class="recette"> <main class="recette">
<h1>Créer un journal</h1> <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"> <section class="ingredients">
<h2>Ingrédients <small>pour 1 page</small></h2> <h2>Ingrédients <small>pour 1 page</small></h2>
@ -29,29 +29,29 @@
<section class="guide"> <section class="guide">
<h2>Ajouter des sections</h2> <h2>Ajouter des sections</h2>
<p class="note">L'ensemble des operations de cette partie sont éfféctuées dans l'élément <code>body</code> (entre les balises <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>)</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>Ecrire le titre de la section entre des balises <code>&lt;h2&gt;</code> et <code>&lt;/h2&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>Ecrire un paragraphe à la suite du titre entre des balises <code>&lt;p&gt;</code> et <code>&lt;/p&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 necessaire pour écrire l'ensemble du texte.</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> <p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p>
<pre><code>&lt;!-- ... --&gt; <pre><code>&lt;!-- ... --&gt;
&lt;body&gt; &lt;body&gt;
&lt;h1&gt;Journal d'une rescapée&lt;/h1&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;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; 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;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. 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, &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;/body&gt;
&lt;!-- ... --&gt;</code></pre> &lt;!-- ... --&gt;</code></pre>
@ -59,19 +59,19 @@
<section class="guide"> <section class="guide">
<h2>Ajouter des images</h2> <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> <article>
<p>Ajouter le code suivant à l'endroit où l'image sera insérée.</p> <p>Ajouter le code suivant à l'endroit où l'image sera insérée.</p>
<pre><code>&lt;img src="" alt="" /&gt;</code></pre> <pre><code>&lt;img src="" alt="" /&gt;</code></pre>
</article> </article>
<p>Inscrire le nom du fichier de l'image doit etre écrit entre les guillemets de <code>src=""</code>.</p> <p>Inscrire le nom du fichier de l'image doit être é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>É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> 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; <pre><code>&lt;!-- ... --&gt;
&lt;h2&gt;Jour 1: Où suis-je ?&lt;/h2&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; 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;img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" /&gt;
@ -80,7 +80,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
</section> </section>
<section class="guide"> <section class="guide">
<h2>Mettre certaines partie du texte en évidence</h2> <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> <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> <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>
@ -88,7 +88,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<section class="guide"> <section class="guide">
<h2>Centrer le contenu de la page</h2> <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> <article>
<p>Ajouter le code suivant dans l'élément <code>style</code></p> <p>Ajouter le code suivant dans l'élément <code>style</code></p>
<pre><code>body { <pre><code>body {
@ -101,7 +101,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
}</code></pre> }</code></pre>
</article> </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; <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;fr&quot;&gt; &lt;html lang=&quot;fr&quot;&gt;
@ -143,7 +143,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<h2>Ajuster les couleurs de la page</h2> <h2>Ajuster les couleurs de la page</h2>
<article> <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> <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 { <pre><code>body {
background-color: hsl(35.2, 69%, 83.5%); background-color: hsl(35.2, 69%, 83.5%);
}</code></pre> }</code></pre>
@ -162,7 +162,7 @@ h1, h2, h3 {
font-family: serif; font-family: serif;
}</code></pre> }</code></pre>
<aside> <aside>
<p>Vous pouvez mettre le nom de n'importe quel police installée sur l'ordinateur a la place de <code>serif</code> ou <code>sans-serif</code>.</p> <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> </aside>
</article> </article>
</section> </section>
@ -187,7 +187,7 @@ h1 + p {
</article> </article>
<article> <article>
<p>Ajouter un style particulier a ce meme paragraphe en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p> <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 { <pre><code>h1 + p {
font-size: 1.1rem; font-size: 1.1rem;
font-style: italic; font-style: italic;
@ -195,11 +195,11 @@ h1 + p {
</article> </article>
<aside> <aside>
<p>Vous pouvez ajuster la taille de la police en modifiant la valeur apres <code>font-size</code> (tout en conservant l'unité <code>rem</code>).</p> <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> </aside>
<article> <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> <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 { <pre><code>h1 {
margin-top: 100px; margin-top: 100px;
} }
@ -209,7 +209,7 @@ h1 + p {
}</code></pre> }</code></pre>
<aside> <aside>
<p>Vous pouvez ajuster la marge en modifiant les valeurs apres <code>margin-top</code> ou <code>margin-bottom</code> (tout en conservant l'unité <code>px</code>).</p> <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> </aside>
</article> </article>
</section> </section>