Ajout d'un guide pour créer un journal
This commit is contained in:
@@ -15,6 +15,7 @@
|
||||
|
||||
<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>
|
||||
|
||||
180
recettes/02-creer-un-journal.html
Normal file
180
recettes/02-creer-un-journal.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!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><body></code> et <code></body></code>)</p>
|
||||
|
||||
<section class="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>
|
||||
|
||||
<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><img src="" alt="" /></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><!-- ... -->
|
||||
|
||||
<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>
|
||||
|
||||
<img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" />
|
||||
|
||||
<!-- ... --></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><!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Journal</title>
|
||||
<style>
|
||||
body {
|
||||
padding: 25px;
|
||||
max-width: 1500px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ... -->
|
||||
</body>
|
||||
</html></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>
|
||||
<h1>-<h6> : 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>
|
||||
<img> : 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>
|
||||
Reference in New Issue
Block a user