nouvelle recette: image

2024-04-02 23:15:33 +02:00
1 changed files with 93 additions and 0 deletions
--- a/recettes/02-ajouter-une-image.html
+++ b/recettes/02-ajouter-une-image.html
@@ -0,0 +1,93 @@
 <!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>Ajouter une image à une page simple</title>
 </head>
 <body>
    <header>
        <a href="..">Index des recettes</a>
    </header>
    <main class="recette">
        <h1>Ajouter une image à une page simple</h1>
        <p>Ce guide donne les instructions pour creer un simple page web avec un titre, un court contenu et une image.</p>
        <figure class="resultat">
            <img src="../images/hello-world.png" alt="Une fenetre de navigateur." />
        </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>
                <li>
                    Une image
                    <small>Le mieux est de prendre une image à vous</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;Dites bonjour à mon chat&lt;/p&gt;
    &lt;img src="./monchat.jpg" alt="Une photo de mon chat" /&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 à 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>
        </section>
        <section class="ressource">
            <h2>Pour aller plus loin</h2>
            <ul>
            </ul>
        </section>
    </main>
 </body>
 </html>