Prêt à créer ta première page web en HTML ? On va te montrer comment démarrer pas à pas avec le langage de base du web et voir le résultat directement sur ton navigateur web préféré !
Dans ce tutoriel, nous utiliserons l’éditeur “Visual Studio Code” pour écrire notre code HTML. Le choix de l’éditeur n’a que peu d’importance, donc ne sois pas surpris si tu n’as pas la même interface que celle utilisée ici.
Créer son premier fichier HTML
Pour commencer, il faut créer le fichier HTML qui contiendra ton code. Ce fichier doit avoir l’extension .html pour indiquer qu’il s’agit d’un fichier HTML. Dans notre cas, nous allons l’appeler “index.html”, mais tu peux le nommer comme tu le souhaites tant que l’extension est .html : “test.html” ou “main.html”, par exemple.
Il existe deux méthodes pour créer ce fichier HTML :
1ère méthode :
- Ouvre ton éditeur de texte.
- Crée un nouveau fichier.
- Enregistre-le avec le nom que tu veux, de préférence dans un dossier qui contiendra tous les fichiers de ton projet (par exemple, un projet de site web).
2ème méthode :
- Rends-toi à l’emplacement sur ton ordinateur où tu souhaites créer le fichier. Préférablement dans un dossier qui contiendra le reste de ton projet.
- Ouvre ce fichier avec ton éditeur de texte, s’il n’est pas déjà ouvert, et écris du texte, n’importe quoi pour commencer, cela n’a pas d’importance.
Ensuite, visualise le résultat de ta page web directement sur ton navigateur web en double-cliquant sur le fichier .html ou en utilisant la fonction “Ouvrir avec” sur ton ordinateur. Ton texte s’affichera dans ton navigateur sans mise en forme, et il sera tout en une seule ligne, même si tu as sauté des lignes dans ton éditeur de texte.
Pour structurer ta page HTML, tu devras utiliser des balises pour encadrer le contenu de la page et lui donner une forme.
Si cette tâche semble trop ardue pour créer ton site web simplement, les développeurs de Codeur.com sont là pour t’aider à créer ton site web rapidement. Dépose ton projet sur Codeur.com et reçois les premiers devis de professionnels freelances en 15 minutes.
Les balises HTML
Les balises sont au cœur du langage HTML, elles permettent de structurer les pages. Toutes les balises se composent de 2 éléments au minimum :
- Les chevrons (un ouvrant et un fermant)
- Un nom
Une balise se définit ainsi, où “balise” est le nom de la balise : <balise>
Il existe deux types distincts de balises : les balises qui fonctionnent par paire et celles qui sont “orphelines”.
Les balises en paire
Ces balises sont utilisées en paire car elles encadrent un contenu (texte, d’autres balises, etc.). Voici comment les utiliser :
<titre>Bienvenue sur mon site web !</titre>La deuxième balise a une particularité : elle contient toujours un “/” après le chevron ouvrant. Cela indique la fin de l’encadrement. Dans notre cas, notre titre est ce qui est contenu entre les deux balises <titre></titre>, mais tout ce qui est avant ou après ces balises ne sera pas considéré comme un titre.
ceci est un texte qui n'est pas un titre <titre>Bienvenue sur mon site web !</titre>. Ce texte n'est pas un titre non plus.Les balises orphelines
Les balises orphelines sont seules et n’encadrent pas de contenu. Elles définissent généralement un élément HTML qui sera intégré à un endroit précis sur la page web.
Comme toutes les balises, elles sont composées d’un nom, de 2 chevrons, mais aussi d’un “/” avant le chevron fermant.
Voici à quoi ressemble une balise orpheline : <image />
Les attributs de balise HTML
Les attributs de balise sont les caractéristiques (ou options) des balises. Ils permettent de définir le fonctionnement d’une balise. Les attributs se placent après le nom de la balise et avant le chevron fermant de celle-ci, et ils sont associés à une valeur :
<balise attribut="valeur">contenu de la balise</balise>Chaque type de balise a des attributs communs avec d’autres balises, mais certaines balises ont des attributs qui leur sont uniques. Les attributs peuvent être facultatifs ou obligatoires pour le bon fonctionnement de la balise.
Par exemple, dans la balise qui te permettra d’ajouter une image à ta page, tu devras indiquer l’emplacement de l’image que tu souhaites afficher dans un attribut dédié à cette fonction.
<image source="C:/Documents/mon-image.jpg" />Les attributs de balise peuvent servir à indiquer un élément important pour le bon fonctionnement de la balise, mais ils peuvent aussi simplement ajouter une information complémentaire à la balise.
Dans le cas des balises fonctionnant par paire, les attributs doivent être mis uniquement dans la première balise (balise ouvrante). Tu ne dois pas écrire d’attributs dans la balise fermante, sinon ils ne seront pas pris en compte par le navigateur.
<titre nom="Mon titre" langue="fr">Bienvenue sur mon site web !</titre>La structure de base d’une page web HTML
Nous avons vu le fonctionnement des balises, maintenant nous allons voir les balises essentielles pour créer la structure de base de ta page. Cette structure est identique à chaque fichier HTML.
Voici à quoi ressemblerait notre fichier “index.html” avec les structures de base d’une page web :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<!-- Ton contenu ici -->
</body>
</html>Dans cet exemple, tu peux voir que les balises respectent un ordre d’ouverture et de fermeture. Par exemple, la balise <html> qui est ouverte avant la balise <head> se ferme avec </html> seulement après que la balise </head> ne soit écrite. Cet ordre est important à respecter, sinon ton site ne fonctionnera pas correctement.
<html>``<head>``</head>``<body>``</body>``</html>: ta page s’affichera correctement.<html>``<head>``</head>``<body>``</html>``</body>: ta page aura des problèmes d’affichage.
Voici quelques explications sur les balises utilisées dans cette structure de base :
<!DOCTYPE html>
Cette balise est indispensable pour que le navigateur comprenne que ton fichier est un document HTML. Elle doit être la première balise de ton fichier HTML, même avant tout commentaire.
<html>...</html>
Les balises <html> et </html> sont les balises principales de ton code, elles encadrent tout le contenu de la page web.
Les balises d’en-tête <head>...</head> et de corps <body>...</body>
L’élément html est principalement composé de deux autres éléments, head et body. Ils définissent l’en-tête et le corps de ta page, qui ont chacun une fonction précise.
- L’en-tête
head: il contient les méta-données de ta page, qui donnent des informations sur le document HTML. L’élémentheadn’a pas vocation à afficher du contenu à l’utilisateur. - Le corps
body: il contient le contenu à afficher à l’utilisateur, c’est la partie principale de la page où sera écrit la majorité du code.
La balise <meta />
Cette balise, toujours présente entre les balises <head>...</head>, permet de définir toutes les métadonnées du document qui ne peuvent pas être définies par des balises similaires à la balise <title></title>.
L’attribut charset="utf-8"
Dans notre balise <meta />, nous retrouvons un attribut charset, qui permet d’indiquer l’encodage utilisé dans le fichier HTML.
Les balises <title></title>
Ces balises permettent de définir le titre du document. Elles seront notamment utiles pour définir le texte à afficher dans l’onglet de la page dans un navigateur web.
Les commentaires
Tu peux écrire des commentaires dans ton code, qui serviront de notes pour toi-même ou pour d’autres personnes qui travailleront sur le code de la page. Les commentaires peuvent être utiles pour comprendre l’utilité d’une section, sans avoir à analyser à nouveau la page et son code dans son intégralité.
Les commentaires doivent être rédigés entre <!-- pour la balise ouvrante et --> pour la balise fermante.
Les balises “h1” et “p”
Ce sont des éléments HTML qui permettent de structurer ton contenu. L’élément “h1” permet de définir un titre et “p” un paragraphe.
Conclusion
Avec ces premiers éléments, tu peux créer la base de ta page web, interprétable par n’importe quel navigateur web (Chrome, Safari, Firefox, Microsoft Edge, etc.). La prochaine étape consistera à organiser le contenu de ta page grâce à des balises spécifiques comme “h1” ou “p”, que nous avons rapidement découvertes dans ce guide. Tu pourras ensuite mettre en page tes contenus HTML en découvrant les bases du CSS.
La création d’un site web peut être compliquée. Si la technique ne t’intéresse pas ou si tu n’as pas le temps d’apprendre les différents langages, n’hésite pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un freelance qui pourra t’accompagner.
