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" >
2024-05-03 13:21:11 +02:00
< script src = "../assets/qr-code.js" > < / script >
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 >
2024-05-24 13:12:59 +02:00
< p > Ce guide donne les instructions pour créer une simple page web avec un titre et un court contenu.< / p >
2024-03-29 14:00:40 +01:00
< 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 >
2024-05-24 13:12:59 +02:00
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 >
2024-03-29 14:00:40 +01:00
< / 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 >
2024-05-24 13:12:59 +02:00
Ouvrir l'éditeur de texte et y coller le code HTML suivant.
2024-03-29 14:00:40 +01:00
< / 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 >
2024-05-24 23:38:13 +02:00
< p > Ouvrir le fichier avec un navigateur (comme Firefox par exemple)< / p >
2024-03-29 14:00:40 +01:00
2024-05-24 23:38:13 +02:00
< p class = "note" > < strong > Note< / strong > : L'actualisation de la page sur le navigateur est nécessaire à chaque modification du code< / p >
2024-03-29 14:00:40 +01:00
< / 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 >
2024-05-24 23:38:13 +02:00
< p > Modifier le titre principal de la page en modifiant le texte entre les balises < code > < h1> < / code > et < code > < /h1> < / code > < / p >
2024-03-29 14:00:40 +01:00
2024-05-24 13:12:59 +02:00
< p > Modifier le contenu du premier paragraphe entre les balises < code > < p> < / code > et < code > < /p> < / code > < / p >
2024-03-29 14:00:40 +01:00
2024-05-24 13:12:59 +02:00
< p > Optionnel : Ajouter d'autres balises < code > < p> < / code > et < code > < /p> < / code > à la suite jusqu'à obtention du nombre de paragraphes voulu.< / p >
2024-03-29 14:00:40 +01:00
< / section >
< section class = "ressource" >
< h2 > Pour aller plus loin< / h2 >
< ul >
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 >
2024-03-29 14:00:40 +01:00
< / ul >
< / section >
< / main >
< / body >
< / html >
