Index des recettes

Créer un journal

Ce guide donne les instructions pour créer une page web sous forme d'un journal d'activités comme une suite de titres et de paragraphes.

Ingrédients pour 1 page

Ajouter des sections

L'ensemble des opérations de cette partie sont effectuées dans l'élément body (entre les balises <body> et </body>)

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

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

Ajouter autant de section que nécessaire 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écits de survie et de découvertes.</p>

    <h2>Jour 1: Où suis-je ?</h2>
    <p>Je ne sais 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 à côté de la plage.
    Il y a de grands arbres et de nombreuses plantes; je ne me suis pas encore empoisonnée.
    Je dois 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 s'il est possible de s'y installer.</p>
</body>

<!-- ... -->

Ajouter des images

Placer les images à côté 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 être écrit entre les guillemets de src="".

Écrire 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 sais 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" />

<!-- ... -->

Mettre certaines parties du texte en évidence

Entourer le texte à mettre en évidence d'une balise <strong> et </strong>

J'ai <strong>mal à la tête</strong> et j'ai <strong>faim</strong>

Centrer le contenu de la page

Dans l'élément head de la page, ajouter un élément style qui contiendra toutes les règles 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 voulus.

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

Centrer le titre principal de la page en ajoutant le code suivant à 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 même 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