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

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: 800px;
            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 {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

Ajuster les couleurs de la page

Ajuster la couleur de l'arrière plan de la page en ajoutant le code suivant dans l'élément style précédente:

body {
    background-color: hsl(35.2, 69%, 83.5%);
}

Définir la police de la page en Sans-serif et la police des titres en Serif en ajoutant le code suivant dans l'élément style précédent:

body {
    font-family: sans-serif;
}

h1, h2, h3 {
    font-family: serif;
}

Mettre en avant le premier paragraphe

Contrer le titre principal de la page en ajoutant le code suivant a l'élément style précédent:


h1 {
    text-align: center;
}

Contrer le paragraphe suivant le titre principal de la page en ajoutant le code suivant dans l'élément style précédent:


h1 + p {
    text-align: center;
}

Ajouter un style particulier a ce meme paragraphe en ajoutant le code suivant dans l'élément style précédent:

h1 + p {
    font-size: 1.1rem;
    font-style: italic;
}

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 style de la plage:

h1 {
    margin-top: 100px;
}

h1 + p {
    margin-bottom: 100px;
}

Pour aller plus loin