cuisine-du-web/livre-de-cuisine
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajustement sur les conseils d'Alexander

Browse Source
This commit is contained in:
EpicKiwi 2024-05-24 23:38:13 +02:00
parent 57de34f53b
commit ca5305565e
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
3 changed files with 86 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
glossaire.html
View File

@ -31,6 +31,8 @@
</figure> </figure>
</article> </article>
<!-- TODO définir élément -->
</main> </main>
</body> </body>
</html> </html>

6
recettes/01-creer-une-page-simple.html
View File

@ -61,9 +61,9 @@
<p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p> <p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p>
<p>Ouvrir le fichier ainsi créé</p> <p>Ouvrir le fichier avec un navigateur (comme Firefox par exemple)</p>
<p class="note"><strong>Note</strong> : L'actualisation de la page du navigateur est nécessaire a chaque modification du code</p> <p class="note"><strong>Note</strong> : L'actualisation de la page sur le navigateur est nécessaire à chaque modification du code</p>
</section> </section>
<section class="guide"> <section class="guide">
@ -75,7 +75,7 @@
<section class="guide"> <section class="guide">
<h3>Personnalisation du contenu de la page</h3> <h3>Personnalisation du contenu de la page</h3>
<p>Modifier le titre principal de la page en modifiant le texte entre les balises <code>&lt;h1&gt;</code> et <code>&lt;/h2&gt;</code></p> <p>Modifier le titre principal de la page en modifiant le texte entre les balises <code>&lt;h1&gt;</code> et <code>&lt;/h1&gt;</code></p>
<p>Modifier le contenu du premier paragraphe entre les balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code></p> <p>Modifier le contenu du premier paragraphe entre les balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code></p>

165
recettes/02-creer-un-journal.html
View File

@ -36,9 +36,7 @@
<p>Ajouter autant de section que nécessaire pour écrire l'ensemble du texte.</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> <p>Enregistrer le fichier avec un nom finissant par <code>.html</code> quelque part sur l'ordinateur.</p>
<pre><code>&lt;!-- ... --&gt; <pre><code>&lt;body&gt;
&lt;body&gt;
&lt;h1&gt;Journal d'une rescapée&lt;/h1&gt; &lt;h1&gt;Journal d'une rescapée&lt;/h1&gt;
&lt;p&gt;Récits de survie et de découvertes.&lt;/p&gt; &lt;p&gt;Récits de survie et de découvertes.&lt;/p&gt;
@ -52,9 +50,7 @@
Je dois trouver un endroit où dormir, il faut trop froid la nuit.&lt;/p&gt; Je dois trouver un endroit où dormir, il faut trop froid la nuit.&lt;/p&gt;
&lt;p&gt;Il y a une grotte dans la falaise sur les hauteurs de la forêt, &lt;p&gt;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.&lt;/p&gt; je vais essayer d'aller voir s'il est possible de s'y installer.&lt;/p&gt;
&lt;/body&gt; &lt;/body&gt;</code></pre>
&lt;!-- ... --&gt;</code></pre>
</section> </section>
<section class="guide"> <section class="guide">
@ -64,94 +60,20 @@
<p>Ajouter le code suivant à l'endroit où l'image sera insérée.</p> <p>Ajouter le code suivant à l'endroit où l'image sera insérée.</p>
<pre><code>&lt;img src="" alt="" /&gt;</code></pre> <pre><code>&lt;img src="" alt="" /&gt;</code></pre>
</article> </article>
<p>Inscrire le nom du fichier de l'image doit être écrit entre les guillemets de <code>src=""</code>.</p> <p>Inscrire le nom du fichier de l'image entre les guillemets de <code>src=""</code>.</p>
<p>Écrire une courte description de l'image entre les guillemets de <code>alt=""</code>. <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> 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>&lt;!-- ... --&gt; <pre><code>&lt;h2&gt;Jour 1: Où suis-je ?&lt;/h2&gt;
&lt;h2&gt;Jour 1: Où suis-je ?&lt;/h2&gt;
&lt;p&gt;Je ne sais pas combien de temps j'ai passé, évanouie sur cette plage. &lt;p&gt;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.&lt;/p&gt; J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à manger.&lt;/p&gt;
&lt;img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" /&gt; &lt;img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" /&gt;</code></pre>
&lt;!-- ... --&gt;</code></pre>
</section> </section>
<section class="guide"> <section class="guide">
<h2>Mettre certaines parties du texte en évidence</h2> <h2>Ajuster la police du texte</h2>
<p>Entourer le texte à mettre en évidence d'une balise <code>&lt;strong&gt;</code> et <code>&lt;/strong&gt;</code></p> <p>Dans l'élément <code>head</code> de la page, ajouter un élément <code>style</code> qui donnera les indications de mise en page.</p>
<pre><code>J'ai &lt;strong&gt;mal &agrave; la t&ecirc;te&lt;/strong&gt; et j'ai &lt;strong&gt;faim&lt;/strong&gt;</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>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;fr&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Journal&lt;/title&gt;
&lt;style&gt;
body {
padding: 25px;
max-width: 800px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... --&gt;
&lt;/body&gt;
&lt;/html&gt;</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> <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> <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 { <pre><code>body {
@ -161,9 +83,48 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
h1, h2, h3 { h1, h2, h3 {
font-family: serif; font-family: serif;
}</code></pre> }</code></pre>
<aside> <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> <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> </aside>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;fr&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Journal&lt;/title&gt;
&lt;style&gt;
body {
font-family: sans-serif;
}
h1, h2, h3 {
font-family: serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... --&gt;
&lt;/body&gt;
&lt;/html&gt;</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: burlywood;
}</code></pre>
<aside>
<p>
Vous pouvez changer la couleur en modifiant le nom de la couleur après <code>background-color</code>.
Consultez <a href="../index-des-couleurs.html">l'index des couleurs</a> pour la liste de tous les noms de couleur.
</p>
</aside>
</article> </article>
</section> </section>
@ -191,6 +152,7 @@ h1 + p {
<pre><code>h1 + p { <pre><code>h1 + p {
font-size: 1.1rem; font-size: 1.1rem;
font-style: italic; font-style: italic;
font-weight: bold;
}</code></pre> }</code></pre>
</article> </article>
@ -214,6 +176,39 @@ h1 + p {
</article> </article>
</section> </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>Centrer le contenu de la page</h2>
<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>
<aside>
<p>Vous pouvez ajuster la valeur après <code>max-width</code> pour définir la largeur maximale que prendra la page (tout en conservant l'unité <code>px</code>).</p>
<p>Vous pouvez aussi ajuster la valeur de <code>padding</code> pour modifier la taille de la marge interne (tout en conservant l'unité <code>px</code>)</p>
</aside>
</section>
<section class="ressource"> <section class="ressource">
<h2>Pour aller plus loin</h2> <h2>Pour aller plus loin</h2>
<ul> <ul>