Ajustements

assets/style.css

@@ -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 {

recettes/01-creer-une-page-simple.html

@@ -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
+                    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>
                     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">

recettes/02-creer-un-journal.html

@@ -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 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>Ajouter autant de section que necessaire pour écrire l'ensemble du texte.</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>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>
 
             <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>