diff --git a/glossaire.html b/glossaire.html index 5764bf9..57acad4 100644 --- a/glossaire.html +++ b/glossaire.html @@ -31,6 +31,8 @@ + + \ No newline at end of file diff --git a/recettes/01-creer-une-page-simple.html b/recettes/01-creer-une-page-simple.html index 789fcce..8820c57 100644 --- a/recettes/01-creer-une-page-simple.html +++ b/recettes/01-creer-une-page-simple.html @@ -61,9 +61,9 @@

Enregistrer le fichier avec un nom finissant par .html quelque part sur l'ordinateur.

-

Ouvrir le fichier ainsi créé

+

Ouvrir le fichier avec un navigateur (comme Firefox par exemple)

-

Note : L'actualisation de la page du navigateur est nécessaire a chaque modification du code

+

Note : L'actualisation de la page sur le navigateur est nécessaire à chaque modification du code

@@ -75,7 +75,7 @@

Personnalisation du contenu de la page

-

Modifier le titre principal de la page en modifiant le texte entre les balises <h1> et </h2>

+

Modifier le titre principal de la page en modifiant le texte entre les balises <h1> et </h1>

Modifier le contenu du premier paragraphe entre les balises <p> et </p>

diff --git a/recettes/02-creer-un-journal.html b/recettes/02-creer-un-journal.html index b70bb3f..4c7c6e6 100644 --- a/recettes/02-creer-un-journal.html +++ b/recettes/02-creer-un-journal.html @@ -36,9 +36,7 @@

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>
+            
<body>
     <h1>Journal d'une rescapée</h1>
     <p>Récits de survie et de découvertes.</p>
 
@@ -52,9 +50,7 @@
     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>
-
-<!-- ... -->

+</body>
@@ -64,94 +60,20 @@

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="".

+

Inscrire le nom du fichier de l'image 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>
+            
<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" />
-
-<!-- ... -->

+<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%);
-}
- -
- +

Ajuster la police du texte

+

Dans l'élément head de la page, ajouter un élément style qui donnera les indications de mise en page.

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 {
@@ -161,8 +83,47 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
 h1, h2, h3 {
     font-family: serif;
 }
+ + + + 
<!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 {
+            font-family: sans-serif;
+        }
+        
+        h1, h2, h3 {
+            font-family: serif;
+        }
+    </style>
+</head>
+<body>
+    <!-- ... -->
+</body>
+</html>
+
+
+ +
+

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: burlywood;
+}
@@ -191,6 +152,7 @@ h1 + p { 
h1 + p {
     font-size: 1.1rem;
     font-style: italic;
+    font-weight: bold;
 }
@@ -214,6 +176,39 @@ h1 + p {
+
+

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;
+}
+
+
+ +
+

Centrer le contenu 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;
+}
+
+ + +
+

Pour aller plus loin