--- title: Écrire une simple page HTML slug: conflicting/Learn/Getting_started_with_the_web tags: - Beginner - CodingScripting - Guide - HTML - Learn - Web Development translation_of: Learn/Getting_started_with_the_web translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML original_slug: Apprendre/HTML/Écrire_une_simple_page_HTML ---
Dans ceta rticle, vous apprendrez à créer une page web simple grâce à {{Glossary("HTML")}}.
Prérequis : | Vous devez au préalable avoir un éditeur de texte et savoir comment ouvrir un fichier dans un navigateur. |
---|---|
Objectifs : | Créer une page web que vous pourrez visualiser dans votre navigateur. |
La plus simple des pages web est simplement un fichier {{Glossary("HTML")}} valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser {{Glossary("Balise","quelques balises")}} HTML et comment voir la page dans un navigateur.
Tout d'abord, assurez-vous d'avoir un navigateur web et un éditeur de texte avec lequel vous êtes à l'aise. Pour cet article, n'importe quel éditeur de texte conviendra (que ce soit Bloc-notes pour Windows, TextEdit pour Mac ou gedit pour GNU/Linux voire un autre). Une seule remarque : assurez-vous de bien créer des fichiers textes simples, sous TextEdit notamment, vous pouvez choisir l'option « Texte simple » dans le menu « Format ».
Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte puis saisissez le texte suivant :
<!DOCTYPE html> <html> <head> <title>Coucou</title> </head> <body> Cette page est une page toute simple </body> </html>
Vous pouvez éditer ce fichier comme vous le souhaitez en modifiant par exemple le texte dans les balises title
ou body
. Lorsque vous enregistrez le fichier, assurez-vous de l'enregister avec l'extension « .html ». Par exemple, le fichier peut être intitulé « ma_page.html ».
Une fois que vous avez enregistré ce fichier sur votre ordinateur, vous devriez obtenir quelque chose qui ressemble à cette capture (bien entendu, l'allure dépendra de votre système d'exploitation et de votre configuration) :
Si vous double-cliquez sur le fichier, celui-ci s'ouvrira dans votre navigateur. Pour ouvrir le fichier dans votre éditeur de texte afin de le modifier, vous pouvez cliquez-droit et choisir le logiciel avec lequel ouvrir le fichier (ici l'éditeur de texte) (sinon, vous pouvez glisser-déposer le fichier dans votre éditeur ou encore choisir de l'ouvrir depuis l'éditeur grâce à l'option « Ouvrir » qui se situe généralement dans le menu « Fichier »). Selon l'éditeur que vous utilisez, vous devriez avoir quelque chose qui ressemble à :
Dans votre explorateur de fichiers (Windows Explorer sur Windows, Finder sur Mac ou Fichiers sur Ubuntu), repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors le texte du fichier HTML que vous avez créé et l'onglet affiche le titre de la page. Selon le navigateur et la plateforme que vous utilisez, cela devrait ressembler à :
Vous pouvez voir le contenu de la page et le titre dans l'onglet. Toutefois, on voit qu'il n'y a pas de saut de ligne… intéressant.
Essayez de manipuler le fichier HTML dans tous les sens en ajoutant du texte, en retirant des morceaux pour voir ce que ça donne. Certaines modifications n'empêcheront pas la page de s'afficher dans le navigateur, d'autres en revanche casseront la page et causeront des problèmes d'affichage. Vous verrez alors que le navigateur essaie de corriger certains problèmes.
La première chose que vous devriez avoir remarqué est que le texte qui est affiché à l'écran est uniquement le texte qui n'est pas contenu entre des chevrons ouvrants et fermants (« < » et « > »). Tout le texte contenu entre ces chevrons forme des {{Glossary("balises")}} qui représentent la structure (ou le squelette) de la page. Tout le contenu affiché est situé à l'intérieur de ces balises.
Dans notre page d'exemple, on a deux sections : un en-tête contenu dans le bloc {{HTMLElement("head")}} et un « corps » contenu dans le bloc {{HTMLElement("body")}}. Le corps contient le texte qui est affiché sur la page.
Chaque balise possède une signification particulière et doit être utilisée à bon escient. Par exemple, {{HTMLElement("title")}} est utilisé afin d'indiquer le titre d'une page (qui peut être différent du nom utilisé pour le fichier). On remarque aussi que des balises sont imbriquées dans d'autres balises : {{HTMLElement("title")}} est par exemple contenue dans {{HTMLElement("head")}}.
Si vous souhaitez ajouter quelque chose à votre page, une image par exemple, vous devrez ajouter une balise pour l'image :
<!DOCTYPE html> <html> <head> <title>Coucou</title> </head> <body> Cette page est une page toute simple <img src="licorne.png" alt="Une image de licorne :)" /> avec une licorne </body> </html>
Pour obtenir ce résultat, il suffit d'éditer le fichier HTML vu précédemment et d'y ajouter la ligne suivante avec {{HTMLelement("img")}} :
<img src="licorne.png" alt="Une image de licorne :)" />
Cet élément peut être placé n'importe où dans l'élément {{HTMLElement("body")}}. N'oubliez pas de sauvegarder la page que vous avez modifiée !
Ensuite, vous devrez ajouter un fichier intitulé "licorne.png" dans le même répertoire que votre fichier HTML. Une fois que c'est fait, rafraîchissez la page dans votre navigateur web (ou réouvrez le fichier dans le navigateur. Vous devriez alors voir la page qui a changé et qui contient une image (n'oubliez pas de sauvegarder votre fichier HTML).
Note : Vous pouvez télécharger cette image depuis cette page en cliquant-droit sur l'image et en choisissant l'option « Enregistrer l'image sous » du menu contextuel.
Pour que cet exemple fonctionne, vous aurez besoin d'avoir les fichier organisés de cette façon sur votre ordinateur :
La page obtenue devrait alors ressembler à :
Vous avez pu voir que l'élément{{HTMLElement("img")}} avait des {{Glossary("attribut","attributs")}} : ceux-ci permettent de fournir des informations supplémentaires afin de construire l'objet à afficher (dans ce cas, un attribut permet de connaître le nom du fichier à utiliser pour l'image et un autre permet de fournir un texte alternatif qui peut être affiché lorsque l'image ne peut être chargée).
Cet exemple illustre comment ajouter une image ) votre page web mais vous pouvez utiliser des techniques semblables pour ajouter des musiques, des vidéos et d'autres éléments, rien qu'en utilisant HTML.
Comme vous avez pu le voir, cette page web n'est pas non plus un canon de beauté. Cela s'explique car HTML gère uniquement le contenu et sa signification (aussi appelée « sémantique »), il ne gère pas la mise en forme (le « design ») de la page.
{{Glossary("CSS")}} permet d'enjoliver le contenu en ajoutant des couleurs, en gérant des polices, la mise en page, etc. HTML serea suffisant pour créer des pages web simples. En revanche, pour créer des pages plus complexes ou plus attractives, il faudra appeler CSS voire {{Glossary("JavaScript")}} à la rescousse. HTML permet de construire le contenu, CSS permet de le mettre en forme et JavaScript permet de le rendre dynamique.
Utilisons CSS pour que le texte de la page soit affiché en bleu :
<!DOCTYPE html> <html> <head> <title>Coucou</title> <style> body { color: blue; } </style> </head> <body> <p>Voici du texte bleu</p> <img alt="Une image de licorne :)" src="licorne.png"/> </body> </html>
Ici, on a ajouté l'élément {{HTMLElement("style")}} à l'élément {{HTMLElement("head")}}. Celui-ci permettra de définir le CSS à appliquer au texte présent dans le corps de la page.
Vous aimeriez que votre texte soit souligné ? Vous pouvez ajouter la règle text-decoration: underline;
:
body { color: blue; text-decoration: underline; }
Si vous souhaitez que votre texte ait une taille donnée, vous pouvez ajouter font-size: 42px;
comme ceci :
body { color: blue; text-decoration: underline; font-size: 42px; }
Au final, le code obtenu ressemblera à :
<!DOCTYPE html> <html> <head> <title>Coucou</title> <style> body { color: blue; text-decoration: underline; font-size: 42px; } </style> </head> <body> <p>Voici du texte bleu</p> <img alt="Une image de licorne :)" src="licorne.png"/> </body> </html>
Si vous sauvegardez la page dans votre éditeur puis que vous rafraîchissez la page dans le navigateur, vous devriez pouvoir voir quelque chose comme :
Lorsque vous naviguez sur le Web, vous rencontrez souvent des {{Glossary("hyperliens","liens")}}. Ceux-ci permettent de naviguer de page en page. Comme nous l'avons vu avant, HTML s'occupe principalement du contenu d'une page. Or, les liens sont une forme de contenu. Autrement dit : il est possible de créer des liens en utilisant uniquement HTML.
Dans cet exercice, nous aurons besoin de deux fichiers HTML. Nous ajouterons un lien dans chacune de ces pages afin de pouvoir passer de l'une à l'autre.
Dans le premier fichier, vous pouvez conserver la même structure que précédemment. Le plus important est d'ajouter une nouvelle balise {{HTMLElement("a")}} de cette façon:
<!DOCTYPE html> <html> <head> <title>Page 1</title> </head> <body>Ici la page 1. <a href="page2.html" title="Vers la page 2">Que se passe-t-il page 2 ?</a></body> </html>
La deuxième page, quant à elle, contient un lien vers la première :
<!DOCTYPE html> <html> <head> <title>Page 2 :)</title> </head> <body>Ici la page 2. <a href="page1.html" title="Vers la page 1">Souhaitez-vous revenir vers la page 1 ? Cliquez-ici</a></body> </html>
Note : Assurez-vous que les noms de fichiers définis dans les balises {{HTMLElement("a")}} avec les attributs href
correspondent bien aux noms des fichiers que vous avez sur votre ordinateur.
Dans votre navigateur, vous pouvez alors naviguer entre les deux documents HTML. Ouvrez la première page dans le navigateur puis cliquez sur le lien pour accéder à la deuxième page et vice versa. Vous pouvez également utiliser le bouton « Précédent » de votre navigateur pour revenir à la page que vous consultiez précédemment.
Pour cet exercice, votre gestionnaire de fichiers devrait avoir deux fichiers HTML placés dans le même répertoire :
Dans le navigateur web, la page 1 ressemblera à :
Après avoir cliqué sur le lien, on arrive sur la page 2 :
Note : On remarque que le lien sur la page 2 est violet. De cette façon, le navigateur montre que vous avez déjà visité la page 1 (en quelque sorte, le navigateur garde en mémoire les pages et l'affiche de cette façon).
Si vous voulez, vous pouvez très bien continuer cet exercice avec plus de deux pages. Vous pouvez également poursuivre la lecture de cet article pour compléter ce que nous avons vu jusqu'à présent.
Dans cet exercice, nous ajouterons un lien dans le fichier HTML afin que le visiteur du site puisse se rendre facilement sur une autre page web complémentaire. Il est possible d'ajouter un lien vers n'importe quelle page publique sur le Web. Pour cet exemple, nous ajouterons un lien vers Wikipédia :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Ma page</title> </head> <body>Il était une fois,...Les licornes sont superbes... La fin. <a href="https://fr.wikipedia.org/wiki/Licorne" title="Page Wikipédia sur les licornes">Vous voulez en savoir plus sur les licornes ? Wikipédia est à portée de clic.</a></body> </html>
Dans le navigateur, cela devrait ressembler à :
Lorsque vous passez votre souris sur le lient, vous verrez que le texte contenu dans l'attribut {{htmlattrxref("title")}} est affiché dans une bulle d'informations. Ce texte peut être utilisé afin de fournir plus d'informations sur le lien pour aider l'utilisateur à déterminer s'il est utile de cliquer sur le lien ou non.
Rappel : À chaque fois que vous modifiez la page, n'oubliez pas de sauvegarder le fichier dans votre éditeur et de rafraîchir la page dans votre navigateur afin de visualiser vos modifications.