Ajouter le code suivant à l'endroit où l'image sera insérée.
<img src="" alt="" />
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.
L'ensemble des operations de ce guide sont éfféctuée dans l'élément body
(entre les balises <body>
et </body>
)
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>
<!-- ... -->
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" />
<!-- ... -->
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>
Ajouter le code suivant dans l'élément style
définit précédemment.
img {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}