Ajouter le code suivant à l'endroit où l'image sera insérée.
+<img src="" alt="" />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.
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;
+}