<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>
<sectionclass="ingredients">
<h2>Ingrédients <small>pour 1 page</small></h2>
<ul>
<li>Une <ahref="./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><body></code> et <code></body></code>)</p>
<sectionclass="guide">
<h2>Ajouter des sections</h2>
<p>Ecrire le titre de la section entre des balises <code><h2></code> et <code></h2></code>.</p>
<p>Ecrire un paragraphe à la suite du titre entre des balises <code><p></code> et <code></p></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><!-- ... -->
<body>
<h1>Journal d'une rescapée</h1>
<p>Récis de survie et de découvertes.</p>
<h2>Jour 1: Où suis-je ?</h2>
<p>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.</p>
<h2>Jour 2: Trouver un toit</h2>
<p>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.</p>
<p>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.</p>
</body>
<!-- ... --></code></pre>
</section>
<sectionclass="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>
<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>
</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>
</article>
</section>
<section>
<h2>Mettre en avant le premier paragraphe</h2>
<article>
<p>Contrer le titre principal de la page en ajoutant le code suivant a 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 meme 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>
<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>
