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

nouvelle recette: image

Browse Source
This commit is contained in:
Vincent F. 2024-04-02 23:15:33 +02:00
parent 11f120ba39
commit cbb307d61a
1 changed files with 93 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
recettes/02-ajouter-une-image.html Normal file
View File

@ -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>