From 94c7c5610e159a0f4e8799623c5e08dd50a0f856 Mon Sep 17 00:00:00 2001 From: EpicKiwi Date: Fri, 3 May 2024 13:30:32 +0200 Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20guide=20pour=20cr=C3=A9er=20un?= =?UTF-8?q?=20journal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + recettes/02-creer-un-journal.html | 180 ++++++++++++++++++++++++++++++ 2 files changed, 181 insertions(+) create mode 100644 recettes/02-creer-un-journal.html diff --git a/index.html b/index.html index 98bbcad..7a721c9 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
diff --git a/recettes/02-creer-un-journal.html b/recettes/02-creer-un-journal.html new file mode 100644 index 0000000..694dbe5 --- /dev/null +++ b/recettes/02-creer-un-journal.html @@ -0,0 +1,180 @@ + + + + + + + + Créer un journal + + +
+ Index des recettes +
+ +
+ +

Créer un journal

+

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.

+ +
+

Ingrédients pour 1 page

+
    +
  • Une page simple comme base
    • +
  • Un texte sous forme de journal
    • +
  • Quelques images (optionnelles)
    • +
+
+ +

L'ensemble des operations de ce guide sont éfféctuée dans l'élément body (entre les balises <body> et </body>)

+ +
+

Ajouter des sections

+

Ecrire le titre de la section entre des balises <h2> et </h2>.

+

Ecrire un paragraphe à la suite du titre entre des balises <p> et </p>.

+

Ajouter autant de section que necessaire pour écrire l'ensemble du texte.

+

Enregistrer le fichier avec un nom finissant par .html quelque part sur l'ordinateur.

+ + 
<!-- ... -->
+
+<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>
+
+<!-- ... -->
+
+ +
+

Ajouter des images

+

Placer les images à coté du fichier .html créé dans l'étape précédente.

+
+

Ajouter le code suivant à l'endroit où l'image sera insérée.

+ 
<img src="" alt="" />
+
+

Inscrire le nom du fichier de l'image doit etre écrit entre les guillemets de src="".

+

Ecrire une courte description de l'image entre les guillemets de alt="". + Cette description remplacera l'image pour les personnes qui ne peuvent pas la voir ou si l'image ne peut pas charger.

+ + 
<!-- ... -->
+
+<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" />
+
+<!-- ... -->
+
+ +
+

Centrer le contenu de la page

+

Dans l'élément head de la page, ajouter un élément style qui contiendra toutes les regles de style de la page.

+
+

Ajouter le code suivant dans l'élément style

+ 
body {
+    padding: 25px;
+    max-width: 1500px;
+    width: 100%;
+    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+ +

Ajuster les valeurs de max-width et padding pour arriver aux espacements voulues.

+ + 
<!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>
+
+ +
+

Centrer les images

+
+

Ajouter le code suivant dans l'élément style définit précédemment.

+ 
img {
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+ +
+

Pour aller plus loin

+ + +
+ +
+ + \ No newline at end of file