Premiere recette
This commit is contained in:
commit
11f120ba39
GPG Key ID:
C4B28FD2729941CE
130
assets/style.css
Normal file
130
assets/style.css
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
:root {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > * {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a[href^=".."]::before {
|
||||||
|
content: "ᐊ";
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients h2 small {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recette > h1:first-of-type {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recette > h1:first-of-type + p {
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recette > h1:first-of-type ~ section:first-of-type {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recette .ingredients {
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recette > section {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide {
|
||||||
|
counter-reset: step;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide > article,
|
||||||
|
.guide > p:not(.note) {
|
||||||
|
counter-increment: step;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide > article > p:first-of-type::before,
|
||||||
|
.guide > p::before {
|
||||||
|
display: inline-block;
|
||||||
|
content: counter(step) ".";
|
||||||
|
margin-right: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide > p:first-of-type:last-of-type::before {
|
||||||
|
content: "➔";
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide > p.note::before {
|
||||||
|
content: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href*="glossaire.html#"] {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: underline dotted 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border-left: solid 1px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index h1 + ul {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index hr {
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
border-top: solid 1px black;
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index ul {
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
36
glossaire.html
Normal file
36
glossaire.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!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">
|
||||||
|
<title>Glossaire</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a href="..">Index des recettes</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Glossaire</h1>
|
||||||
|
|
||||||
|
<article id="balise">
|
||||||
|
<h2>Balise</h2>
|
||||||
|
<p>
|
||||||
|
En HTML, une balise commence par <code><</code> et finit par <code>></code>.
|
||||||
|
Elles decrivent le contenu d'une page web.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>La balise ouvrante</strong> : celle-ci se compose du nom de l'élément, entre deux chevrons (le premier ouvrant <code><</code> et le second fermant <code>></code>).</li>
|
||||||
|
|
||||||
|
<li><strong>La balise fermante</strong> : à la différence de la balise ouvrante, une barre oblique (slash) est ajoutée avant le nom de l'élément. Cela indique la fin de l'élément. Dans notre exemple, c'est l'endroit où le paragraphe s'arrête. Oublier cette balise fermante est une erreur qu'on fait souvent au début et qui peut déclencher des effets étranges et indésirables.</li>
|
||||||
|
</ul>
|
||||||
|
<figure>
|
||||||
|
<pre><code><p>Mon chat est très grincheux.</p></code></pre>
|
||||||
|
<caption>Exemple de balise <code>p</code> decrivant un paragraphe</caption>
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
images/hello-world.png
Normal file
BIN
images/hello-world.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
27
index.html
Normal file
27
index.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
<title>Index des recettes</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="index">
|
||||||
|
<h1>
|
||||||
|
Cuisine du web
|
||||||
|
<small>Livre de recette</small>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="recettes/01-creer-une-page-simple.html">Créer une page simple</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="glossaire.html">Glossaire</a></li>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
95
recettes/01-creer-une-page-simple.html
Normal file
95
recettes/01-creer-une-page-simple.html
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<!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">
|
||||||
|
<title>Créer une page simple</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a href="..">Index des recettes</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="recette">
|
||||||
|
|
||||||
|
<h1>Créer une page simple</h1>
|
||||||
|
<p>Ce guide donne les instructions pour creer un simple page web avec un titre et un court contenu.</p>
|
||||||
|
|
||||||
|
<figure class="resultat">
|
||||||
|
<img src="../images/hello-world.png" alt="Une fenetre de navigateur. Une simple page ouverte nommee 'bonjour internet' avec un titre 'bonjour le monde' et un court paragraph." />
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<section class="ingredients">
|
||||||
|
|
||||||
|
<h2>Ingrédients <small>pour 1 page web</small></h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Un ordinateur fonctionnel</li>
|
||||||
|
<li>
|
||||||
|
Un editeur de texte
|
||||||
|
<small><a href="https://vscodium.com/">VSCodium</a> par exemple mais le bloc note du systeme fera l'affaire</small>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Un navigateur web
|
||||||
|
<small>Par exemple <a href="https://www.mozilla.org/fr/firefox/new/">Firefox</a></small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="guide">
|
||||||
|
<article>
|
||||||
|
<p>
|
||||||
|
Ouvrir l'editeur de texte et y coller le code HTML suivant.
|
||||||
|
</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>Titre</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>👋 Salut !</h1>
|
||||||
|
<p>Bienvenue sur internet</p>
|
||||||
|
</body>
|
||||||
|
</html></code></pre>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<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 class="note"><strong>Note</strong> : L'actualisation de la page du navigateur est necessaire a chaque modification du code</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="guide">
|
||||||
|
<h3>Personnalisation du titre de la page</h3>
|
||||||
|
|
||||||
|
<p>Modifier le texte entre la <a href="../glossaire.html#balise">balise</a> <code><title></code> et la balise <code></title></code></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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 contenu du premier pragraphe entre les balises <code><p></code> et <code></p></code></p>
|
||||||
|
|
||||||
|
<p>Optionnel : Ajouter d'autres balises <code><p></code> et <code></p></code> à la suite jusqu'a obtention du nombre de paragraphes voulu.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="ressource">
|
||||||
|
<h2>Pour aller plus loin</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">Notions de base en HTML</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html">Anatomie d'un document HTML</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title"><title> : l'élément de titre du document</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user