105 lines
4.4 KiB
HTML
105 lines
4.4 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">
|
|
<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 créer une 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 éditeur de texte
|
|
<small><a href="https://vscodium.com/">VSCodium</a> par exemple mais le bloc note du système 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'éditeur 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 avec un navigateur (comme Firefox par exemple)</p>
|
|
|
|
<p class="note"><strong>Note</strong> : L'actualisation de la page sur le navigateur est nécessaire à 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></h1></code></p>
|
|
|
|
<p>Modifier le contenu du premier paragraphe 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'à 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>
|
|
<title> : l'élément de titre du document
|
|
</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html> |