2024-05-03 13:30:32 +02:00
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "../assets/style.css" >
< script src = "../assets/qr-code.js" > < / script >
< title > Créer un journal< / title >
< / head >
< body >
< header >
< a href = ".." > Index des recettes< / a >
< / header >
< main class = "recette" >
< h1 > Créer un journal< / h1 >
2024-05-24 13:07:25 +02:00
< p > 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.< / p >
2024-05-03 13:30:32 +02:00
< section class = "ingredients" >
< h2 > Ingrédients < small > pour 1 page< / small > < / h2 >
< ul >
< li > Une < a href = "./01-creer-une-page-simple.html" > page simple< / a > comme base< / li >
< li > Un texte sous forme de journal< / li >
< li > Quelques images (optionnelles)< / li >
< / ul >
< / section >
< section class = "guide" >
< h2 > Ajouter des sections< / h2 >
2024-05-24 13:02:05 +02:00
2024-05-24 13:07:25 +02:00
< p class = "note" > L'ensemble des opérations de cette partie sont effectuées dans l'élément < code > body< / code > (entre les balises < code > < body> < / code > et < code > < /body> < / code > )< / p >
2024-05-24 13:02:05 +02:00
2024-05-24 13:07:25 +02:00
< p > Écrire le titre de la section entre des balises < code > < h2> < / code > et < code > < /h2> < / code > .< / p >
< p > Écrire un paragraphe à la suite du titre entre des balises < code > < p> < / code > et < code > < /p> < / code > .< / p >
< p > Ajouter autant de section que nécessaire pour écrire l'ensemble du texte.< / p >
2024-05-03 13:30:32 +02:00
< p > Enregistrer le fichier avec un nom finissant par < code > .html< / code > quelque part sur l'ordinateur.< / p >
< pre > < code > < !-- ... -->
< body>
< h1> Journal d'une rescapée< /h1>
2024-05-24 13:07:25 +02:00
< p> Récits de survie et de découvertes.< /p>
2024-05-03 13:30:32 +02:00
< h2> Jour 1: Où suis-je ?< /h2>
2024-05-24 13:07:25 +02:00
< p> Je ne sais pas combien de temps j'ai passé, évanouie sur cette plage.
2024-05-03 13:30:32 +02:00
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>
2024-05-24 13:07:25 +02:00
< p> J'ai trouvé de quoi manger et boire dans la forêt à côté de la plage.
2024-05-03 13:30:32 +02:00
Il y a de grands arbres et de nombreuses plantes; je ne me suis pas encore empoisonnée.
2024-05-24 13:07:25 +02:00
Je dois trouver un endroit où dormir, il faut trop froid la nuit.< /p>
2024-05-03 13:30:32 +02:00
< p> Il y a une grotte dans la falaise sur les hauteurs de la forêt,
2024-05-24 13:07:25 +02:00
je vais essayer d'aller voir s'il est possible de s'y installer.< /p>
2024-05-03 13:30:32 +02:00
< /body>
< !-- ... --> < / code > < / pre >
< / section >
< section class = "guide" >
< h2 > Ajouter des images< / h2 >
2024-05-24 13:07:25 +02:00
< p > Placer les images à côté du fichier < code > .html< / code > créé dans l'étape précédente.< / p >
2024-05-03 13:30:32 +02:00
< article >
< p > Ajouter le code suivant à l'endroit où l'image sera insérée.< / p >
< pre > < code > < img src="" alt="" /> < / code > < / pre >
< / article >
2024-05-24 13:07:25 +02:00
< p > Inscrire le nom du fichier de l'image doit être écrit entre les guillemets de < code > src=""< / code > .< / p >
< p > Écrire une courte description de l'image entre les guillemets de < code > alt=""< / code > .
2024-05-03 13:30:32 +02:00
Cette description remplacera l'image pour les personnes qui ne peuvent pas la voir ou si l'image ne peut pas charger.< / p >
< pre > < code > < !-- ... -->
< h2> Jour 1: Où suis-je ?< /h2>
2024-05-24 13:07:25 +02:00
< p> Je ne sais pas combien de temps j'ai passé, évanouie sur cette plage.
2024-05-03 13:30:32 +02:00
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" />
< !-- ... --> < / code > < / pre >
< / section >
2024-05-24 13:02:05 +02:00
< section class = "guide" >
2024-05-24 13:07:25 +02:00
< h2 > Mettre certaines parties du texte en évidence< / h2 >
2024-05-24 13:02:05 +02:00
< p > Entourer le texte à mettre en évidence d'une balise < code > < strong> < / code > et < code > < /strong> < / code > < / p >
< pre > < code > J'ai < strong> mal à la tê te< /strong> et j'ai < strong> faim< /strong> < / code > < / pre >
< / section >
2024-05-03 13:30:32 +02:00
< section class = "guide" >
< h2 > Centrer le contenu de la page< / h2 >
2024-05-24 13:07:25 +02:00
< p > Dans l'élément < code > head< / code > de la page, ajouter un élément < code > style< / code > qui contiendra toutes les règles de style de la page.< / p >
2024-05-03 13:30:32 +02:00
< article >
< p > Ajouter le code suivant dans l'élément < code > style< / code > < / p >
< pre > < code > body {
padding: 25px;
max-width: 1500px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}< / code > < / pre >
< / article >
2024-05-24 13:07:25 +02:00
< p > Ajuster les valeurs de < code > max-width< / code > et < code > padding< / code > pour arriver aux espacements voulus.< / p >
2024-05-03 13:30:32 +02:00
< pre > < code > < !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;
2024-05-24 12:35:15 +02:00
max-width: 800px;
2024-05-03 13:30:32 +02:00
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
< /style>
< /head>
< body>
< !-- ... -->
< /body>
< /html> < / code > < / pre >
< / section >
< section class = "guide" >
< h2 > Centrer les images< / h2 >
< article >
< p > Ajouter le code suivant dans l'élément < code > style< / code > définit précédemment.< / p >
< pre > < code > img {
2024-05-24 12:35:15 +02:00
display: block;
2024-05-03 13:30:32 +02:00
max-width: 100%;
margin-left: auto;
margin-right: auto;
}< / code > < / pre >
< / article >
< / section >
2024-05-24 12:35:15 +02:00
< section class = "guide" >
< h2 > Ajuster les couleurs de la page< / h2 >
< article >
2024-05-24 13:07:25 +02:00
< p > Ajuster la couleur de l'arrière-plan de la page en ajoutant le code suivant dans l'élément < code > style< / code > précédente:< / p >
2024-05-24 12:35:15 +02:00
< pre > < code > body {
background-color: hsl(35.2, 69%, 83.5%);
}< / code > < / pre >
2024-05-24 13:02:05 +02:00
< aside >
< p > Vous pouvez ajuster la couleur à votre convenance en modifiant 3 valeurs numériques dans < code > hsl()< / code > .< / p >
< / aside >
2024-05-24 12:35:15 +02:00
< / article >
< article >
< p > Définir la police de la page en < em > Sans-serif< / em > et la police des titres en < em > Serif< / em > en ajoutant le code suivant dans l'élément < code > style< / code > précédent:< / p >
< pre > < code > body {
font-family: sans-serif;
}
h1, h2, h3 {
font-family: serif;
}< / code > < / pre >
2024-05-24 13:02:05 +02:00
< aside >
2024-05-24 13:07:25 +02:00
< p > Vous pouvez mettre le nom de n'importe quelle police installée sur l'ordinateur a la place de < code > serif< / code > ou < code > sans-serif< / code > .< / p >
2024-05-24 13:02:05 +02:00
< / aside >
2024-05-24 12:35:15 +02:00
< / article >
< / section >
2024-05-24 13:02:05 +02:00
< section class = "guide" >
2024-05-24 12:35:15 +02:00
< h2 > Mettre en avant le premier paragraphe< / h2 >
< article >
2024-05-24 13:02:05 +02:00
< p > Centrer le titre principal de la page en ajoutant le code suivant à l'élément < code > style< / code > précédent:< / p >
2024-05-24 12:35:15 +02:00
< pre > < code >
h1 {
text-align: center;
}< / code > < / pre >
< / article >
< article >
< p > Contrer le paragraphe suivant le titre principal de la page en ajoutant le code suivant dans l'élément < code > style< / code > précédent:< / p >
< pre > < code >
h1 + p {
text-align: center;
}< / code > < / pre >
< / article >
< article >
2024-05-24 13:07:25 +02:00
< p > Ajouter un style particulier a ce même paragraphe en ajoutant le code suivant dans l'élément < code > style< / code > précédent:< / p >
2024-05-24 12:35:15 +02:00
< pre > < code > h1 + p {
font-size: 1.1rem;
font-style: italic;
}< / code > < / pre >
< / article >
2024-05-24 13:02:05 +02:00
< aside >
2024-05-24 13:07:25 +02:00
< p > Vous pouvez ajuster la taille de la police en modifiant la valeur après < code > font-size< / code > (tout en conservant l'unité < code > rem< / code > ).< / p >
2024-05-24 13:02:05 +02:00
< / aside >
2024-05-24 12:35:15 +02:00
< article >
2024-05-24 13:07:25 +02:00
< p > 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 < code > style< / code > de la plage:< / p >
2024-05-24 12:35:15 +02:00
< pre > < code > h1 {
margin-top: 100px;
}
h1 + p {
margin-bottom: 100px;
}< / code > < / pre >
2024-05-24 13:02:05 +02:00
< aside >
2024-05-24 13:07:25 +02:00
< p > Vous pouvez ajuster la marge en modifiant les valeurs après < code > margin-top< / code > ou < code > margin-bottom< / code > (tout en conservant l'unité < code > px< / code > ).< / p >
2024-05-24 13:02:05 +02:00
< / aside >
2024-05-24 12:35:15 +02:00
< / article >
< / section >
2024-05-03 13:30:32 +02:00
< section class = "ressource" >
< h2 > Pour aller plus loin< / h2 >
< ul >
<!-- Donner quelques ressources pour aller plus loin -->
< li > < a href = "https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML" > < / qr-code >
Les images en HTML
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements" > < / qr-code >
< h1> -< h6> : les éléments de titre de section
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/HTML/Element/img" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/HTML/Element/img" > < / qr-code >
< img> : l'élément d'image embarquée
< / a > < / li >
< / ul >
< ul >
< li > < a href = "https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started#mettre_en_forme_des_%C3%A9l%C3%A9ments_html" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started#mettre_en_forme_des_%C3%A9l%C3%A9ments_html" > < / qr-code >
Mettre en forme des éléments HTML
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/padding" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/padding" > < / qr-code >
padding
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/width" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/width" > < / qr-code >
width
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/max-width" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/max-width" > < / qr-code >
max-width
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/margin" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/margin" > < / qr-code >
margin
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing" > < / qr-code >
box-sizing
< / a > < / li >
2024-05-24 12:35:15 +02:00
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/font-family" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/font-family" > < / qr-code >
font-family
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/font-style" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/font-style" > < / qr-code >
font-style
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/font-size" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/font-size" > < / qr-code >
font-size
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/background-color" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/background-color" > < / qr-code >
background-color
< / a > < / li >
< li > < a href = "https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl" target = "_blank" >
< qr-code data = "https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl" > < / qr-code >
hsl()
< / a > < / li >
2024-05-03 13:30:32 +02:00
< / ul >
< / section >
< / main >
< / body >
< / html >
