Compare commits
2 Commits
d5a3339997
...
ca5305565e
| Author | SHA1 | Date | |
|---|---|---|---|
ca5305565e
|
|||
|
57de34f53b
|
@ -31,6 +31,8 @@
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<!-- TODO définir élément -->
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
196
index-des-couleurs.html
Normal file
196
index-des-couleurs.html
Normal file
@ -0,0 +1,196 @@
|
||||
<!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>Index des couleurs</title>
|
||||
<style>
|
||||
main > ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
columns: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="..">Index des recettes</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>Index des couleurs</h1>
|
||||
<p>Cette page donne la liste du nom des couleurs utilisables sur le WEB.</p>
|
||||
<ul>
|
||||
<li><code>aliceblue</code></li>
|
||||
<li><code>antiquewhite</code></li>
|
||||
<li><code>aqua</code></li>
|
||||
<li><code>aquamarine</code></li>
|
||||
<li><code>azure</code></li>
|
||||
<li><code>beige</code></li>
|
||||
<li><code>bisque</code></li>
|
||||
<li><code>black</code></li>
|
||||
<li><code>blanchedalmond</code></li>
|
||||
<li><code>blue</code></li>
|
||||
<li><code>blueviolet</code></li>
|
||||
<li><code>brown</code></li>
|
||||
<li><code>burlywood</code></li>
|
||||
<li><code>cadetblue</code></li>
|
||||
<li><code>chartreuse</code></li>
|
||||
<li><code>chocolate</code></li>
|
||||
<li><code>coral</code></li>
|
||||
<li><code>cornflowerblue</code></li>
|
||||
<li><code>cornsilk</code></li>
|
||||
<li><code>crimson</code></li>
|
||||
<li><code>cyan</code></li>
|
||||
<li><code>darkblue</code></li>
|
||||
<li><code>darkcyan</code></li>
|
||||
<li><code>darkgoldenrod</code></li>
|
||||
<li><code>darkgray</code></li>
|
||||
<li><code>darkgreen</code></li>
|
||||
<li><code>darkgrey</code></li>
|
||||
<li><code>darkkhaki</code></li>
|
||||
<li><code>darkmagenta</code></li>
|
||||
<li><code>darkolivegreen</code></li>
|
||||
<li><code>darkorange</code></li>
|
||||
<li><code>darkorchid</code></li>
|
||||
<li><code>darkred</code></li>
|
||||
<li><code>darksalmon</code></li>
|
||||
<li><code>darkseagreen</code></li>
|
||||
<li><code>darkslateblue</code></li>
|
||||
<li><code>darkslategray</code></li>
|
||||
<li><code>darkslategrey</code></li>
|
||||
<li><code>darkturquoise</code></li>
|
||||
<li><code>darkviolet</code></li>
|
||||
<li><code>deeppink</code></li>
|
||||
<li><code>deepskyblue</code></li>
|
||||
<li><code>dimgray</code></li>
|
||||
<li><code>dimgrey</code></li>
|
||||
<li><code>dodgerblue</code></li>
|
||||
<li><code>firebrick</code></li>
|
||||
<li><code>floralwhite</code></li>
|
||||
<li><code>forestgreen</code></li>
|
||||
<li><code>fuchsia</code></li>
|
||||
<li><code>gainsboro</code></li>
|
||||
<li><code>ghostwhite</code></li>
|
||||
<li><code>gold</code></li>
|
||||
<li><code>goldenrod</code></li>
|
||||
<li><code>gray</code></li>
|
||||
<li><code>green</code></li>
|
||||
<li><code>greenyellow</code></li>
|
||||
<li><code>grey</code></li>
|
||||
<li><code>honeydew</code></li>
|
||||
<li><code>hotpink</code></li>
|
||||
<li><code>indianred</code></li>
|
||||
<li><code>indigo</code></li>
|
||||
<li><code>ivory</code></li>
|
||||
<li><code>khaki</code></li>
|
||||
<li><code>lavender</code></li>
|
||||
<li><code>lavenderblush</code></li>
|
||||
<li><code>lawngreen</code></li>
|
||||
<li><code>lemonchiffon</code></li>
|
||||
<li><code>lightblue</code></li>
|
||||
<li><code>lightcoral</code></li>
|
||||
<li><code>lightcyan</code></li>
|
||||
<li><code>lightgoldenrodyellow</code></li>
|
||||
<li><code>lightgray</code></li>
|
||||
<li><code>lightgreen</code></li>
|
||||
<li><code>lightgrey</code></li>
|
||||
<li><code>lightpink</code></li>
|
||||
<li><code>lightsalmon</code></li>
|
||||
<li><code>lightseagreen</code></li>
|
||||
<li><code>lightskyblue</code></li>
|
||||
<li><code>lightslategray</code></li>
|
||||
<li><code>lightslategrey</code></li>
|
||||
<li><code>lightsteelblue</code></li>
|
||||
<li><code>lightyellow</code></li>
|
||||
<li><code>lime</code></li>
|
||||
<li><code>limegreen</code></li>
|
||||
<li><code>linen</code></li>
|
||||
<li><code>magenta</code></li>
|
||||
<li><code>maroon</code></li>
|
||||
<li><code>mediumaquamarine</code></li>
|
||||
<li><code>mediumblue</code></li>
|
||||
<li><code>mediumorchid</code></li>
|
||||
<li><code>mediumpurple</code></li>
|
||||
<li><code>mediumseagreen</code></li>
|
||||
<li><code>mediumslateblue</code></li>
|
||||
<li><code>mediumspringgreen</code></li>
|
||||
<li><code>mediumturquoise</code></li>
|
||||
<li><code>mediumvioletred</code></li>
|
||||
<li><code>midnightblue</code></li>
|
||||
<li><code>mintcream</code></li>
|
||||
<li><code>mistyrose</code></li>
|
||||
<li><code>moccasin</code></li>
|
||||
<li><code>navajowhite</code></li>
|
||||
<li><code>navy</code></li>
|
||||
<li><code>oldlace</code></li>
|
||||
<li><code>olive</code></li>
|
||||
<li><code>olivedrab</code></li>
|
||||
<li><code>orange</code></li>
|
||||
<li><code>orangered</code></li>
|
||||
<li><code>orchid</code></li>
|
||||
<li><code>palegoldenrod</code></li>
|
||||
<li><code>palegreen</code></li>
|
||||
<li><code>paleturquoise</code></li>
|
||||
<li><code>palevioletred</code></li>
|
||||
<li><code>papayawhip</code></li>
|
||||
<li><code>peachpuff</code></li>
|
||||
<li><code>peru</code></li>
|
||||
<li><code>pink</code></li>
|
||||
<li><code>plum</code></li>
|
||||
<li><code>powderblue</code></li>
|
||||
<li><code>purple</code></li>
|
||||
<li><code>rebeccapurple</code></li>
|
||||
<li><code>red</code></li>
|
||||
<li><code>rosybrown</code></li>
|
||||
<li><code>royalblue</code></li>
|
||||
<li><code>saddlebrown</code></li>
|
||||
<li><code>salmon</code></li>
|
||||
<li><code>sandybrown</code></li>
|
||||
<li><code>seagreen</code></li>
|
||||
<li><code>seashell</code></li>
|
||||
<li><code>sienna</code></li>
|
||||
<li><code>silver</code></li>
|
||||
<li><code>skyblue</code></li>
|
||||
<li><code>slateblue</code></li>
|
||||
<li><code>slategray</code></li>
|
||||
<li><code>slategrey</code></li>
|
||||
<li><code>snow</code></li>
|
||||
<li><code>springgreen</code></li>
|
||||
<li><code>steelblue</code></li>
|
||||
<li><code>tan</code></li>
|
||||
<li><code>teal</code></li>
|
||||
<li><code>thistle</code></li>
|
||||
<li><code>tomato</code></li>
|
||||
<li><code>transparent</code></li>
|
||||
<li><code>turquoise</code></li>
|
||||
<li><code>violet</code></li>
|
||||
<li><code>wheat</code></li>
|
||||
<li><code>white</code></li>
|
||||
<li><code>whitesmoke</code></li>
|
||||
<li><code>yellow</code></li>
|
||||
<li><code>yellowgreen</code></li>
|
||||
</ul>
|
||||
|
||||
<section class="ressource">
|
||||
<h2>Pour aller plus loin</h2>
|
||||
<ul>
|
||||
<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>
|
||||
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/color-mix" target="_blank">
|
||||
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/color-mix"></qr-code>
|
||||
color-mix()
|
||||
</a></li>
|
||||
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value" target="_blank">
|
||||
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value"></qr-code>
|
||||
<color-value>
|
||||
</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
<ul>
|
||||
<li><a href="glossaire.html">Glossaire</a></li>
|
||||
<li><a href="index-des-couleurs.html">Index des couleurs</a></li>
|
||||
</ul>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -61,9 +61,9 @@
|
||||
|
||||
<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 class="guide">
|
||||
@ -75,7 +75,7 @@
|
||||
<section class="guide">
|
||||
<h3>Personnalisation du contenu de la page</h3>
|
||||
|
||||
<p>Modifier le titre principal de la page en modifiant le texte entre les balises <code><h1></code> et <code></h2></code></p>
|
||||
<p>Modifier le titre principal de la page en modifiant le texte entre les balises <code><h1></code> et <code></h1></code></p>
|
||||
|
||||
<p>Modifier le contenu du premier paragraphe entre les balises <code><p></code> et <code></p></code></p>
|
||||
|
||||
|
||||
@ -36,9 +36,7 @@
|
||||
<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>
|
||||
<pre><code><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>
|
||||
|
||||
<!-- ... --></code></pre>
|
||||
</body></code></pre>
|
||||
</section>
|
||||
|
||||
<section class="guide">
|
||||
@ -64,94 +60,20 @@
|
||||
<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>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>.
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<h2>Ajuster la police du texte</h2>
|
||||
<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>
|
||||
<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 {
|
||||
@ -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 {
|
||||
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>
|
||||
|
||||
<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 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ... -->
|
||||
</body>
|
||||
</html></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>
|
||||
</section>
|
||||
|
||||
@ -191,6 +152,7 @@ h1 + p {
|
||||
<pre><code>h1 + p {
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}</code></pre>
|
||||
</article>
|
||||
|
||||
@ -214,6 +176,39 @@ h1 + p {
|
||||
</article>
|
||||
</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">
|
||||
<h2>Pour aller plus loin</h2>
|
||||
<ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user