livre-de-cuisine/recettes/01-creer-une-page-simple.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 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>&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;Titre&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;👋 Salut !&lt;/h1&gt;
    &lt;p&gt;Bienvenue sur internet&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;title&gt;</code> et la balise <code>&lt;/title&gt;</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>&lt;h1&gt;</code> et <code>&lt;/h2&gt;</code></p>
            
            <p>Modifier le contenu du premier pragraphe entre les balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code></p>

            <p>Optionnel : Ajouter d'autres balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</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">
                    <qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics"></qr-code>
                    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" target="_blank">
                    <qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html"></qr-code>
                    Anatomie d'un document HTML
                </a></li>
                <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title" target="_blank">
                    <qr-code data="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title"></qr-code>
                    &lt;title&gt; : l'élément de titre du document
                </a></li>
            </ul>
        </section>

    </main>
</body>
</html>
Premiere recette 2024-03-29 14:00:40 +01:00			`<!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">`
Ajout du QRcode en mode print 2024-05-03 13:21:11 +02:00			`<script src="../assets/qr-code.js"></script>`
Premiere recette 2024-03-29 14:00:40 +01:00			`<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>`
Ajout du QRcode en mode print 2024-05-03 13:21:11 +02:00			`<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">`
			`<qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics"></qr-code>`
			`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" target="_blank">`
			`<qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html"></qr-code>`
			`Anatomie d'un document HTML`
			`</a></li>`
			`<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title" target="_blank">`
			`<qr-code data="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title"></qr-code>`
			`<title> : l'élément de titre du document`
			`</a></li>`
Premiere recette 2024-03-29 14:00:40 +01:00			`</ul>`
			`</section>`

			`</main>`
			`</body>`
			`</html>`