285 lines
13 KiB
HTML
285 lines
13 KiB
HTML
<!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>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<!-- ... --></code></pre>
|
|
</section>
|
|
|
|
<section class="guide">
|
|
<h2>Ajouter des images</h2>
|
|
<p>Placer les images à côté du fichier <code>.html</code> créé dans l'étape précédente.</p>
|
|
<article>
|
|
<p>Ajouter le code suivant à l'endroit où l'image sera insérée.</p>
|
|
<pre><code><img src="" alt="" /></code></pre>
|
|
</article>
|
|
<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>.
|
|
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>
|
|
<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" />
|
|
|
|
<!-- ... --></code></pre>
|
|
</section>
|
|
|
|
<section class="guide">
|
|
<h2>Mettre certaines parties du texte en évidence</h2>
|
|
<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>
|
|
|
|
<section class="guide">
|
|
<h2>Centrer le contenu de la page</h2>
|
|
<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>
|
|
<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>
|
|
|
|
<p>Ajuster les valeurs de <code>max-width</code> et <code>padding</code> pour arriver aux espacements voulus.</p>
|
|
|
|
<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;
|
|
max-width: 800px;
|
|
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 {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}</code></pre>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="guide">
|
|
<h2>Ajuster les couleurs de la page</h2>
|
|
|
|
<article>
|
|
<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>
|
|
<pre><code>body {
|
|
background-color: hsl(35.2, 69%, 83.5%);
|
|
}</code></pre>
|
|
<aside>
|
|
<p>Vous pouvez ajuster la couleur à votre convenance en modifiant 3 valeurs numériques dans <code>hsl()</code>.</p>
|
|
</aside>
|
|
</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>
|
|
<aside>
|
|
<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>
|
|
</aside>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="guide">
|
|
<h2>Mettre en avant le premier paragraphe</h2>
|
|
|
|
<article>
|
|
<p>Centrer le titre principal de la page en ajoutant le code suivant à l'élément <code>style</code> précédent:</p>
|
|
<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>
|
|
<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>
|
|
<pre><code>h1 + p {
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
}</code></pre>
|
|
</article>
|
|
|
|
<aside>
|
|
<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>
|
|
</aside>
|
|
|
|
<article>
|
|
<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>
|
|
<pre><code>h1 {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
h1 + p {
|
|
margin-bottom: 100px;
|
|
}</code></pre>
|
|
|
|
<aside>
|
|
<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>
|
|
</aside>
|
|
</article>
|
|
</section>
|
|
|
|
<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>
|
|
<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>
|
|
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html> |