94 lines
3.1 KiB
HTML
94 lines
3.1 KiB
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">
|
|
<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><!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>Dites bonjour à mon chat</p>
|
|
<img src="./monchat.jpg" alt="Une photo de mon chat" />
|
|
</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 à 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>
|
|
</section>
|
|
|
|
<section class="ressource">
|
|
<h2>Pour aller plus loin</h2>
|
|
<ul>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|