Pour créer une page web en HTML, vous devez simplement créer un fichier avec l’extension .html. Vous pouvez ouvrir ce fichier dans votre navigateur en double-cliquant dessus.
Dans cet article, nous allons vous montrer les différentes étapes pour créer ce fichier HTML en utilisant Visual Studio Code, que vous pouvez télécharger.
Appropriez-vous les balises HTML
Le langage HTML utilise des balises pour structurer le contenu d’une page web. Les balises sont écrites entre des chevrons < et >. Sur un PC, vous pouvez utiliser la touche < pour le chevron ouvrant et Maj + < pour le chevron fermant. Sur un Mac, vous pouvez utiliser la touche < pour le chevron ouvrant et ⇧ + < pour le chevron fermant.
Les balises indiquent la nature du texte qu’elles entourent. Par exemple, la balise <title></title> représente le titre de la page, la balise <img> représente une image, et la balise <p></p> représente un paragraphe de texte.
Il existe deux types de balises : les balises en paires, qui ont une balise ouvrante et une balise fermante, et les balises orphelines, qui sont des balises uniques.
Les balises en paires
Les balises en paires s’ouvrent, contiennent du texte, puis se ferment. Par exemple, la balise <title></title> est une balise en paire qui encadre le titre de la page :
<title>Ceci est le titre de ma page</title>Les balises orphelines
Les balises orphelines sont utilisées pour insérer des éléments spécifiques à un endroit précis de la page, comme une image. Elles ne nécessitent pas de balise fermante et sont écrites de la manière suivante :
<img>Il était courant d’utiliser la syntaxe <img /> pour indiquer que la balise était autofermante, mais cette pratique est déconseillée. Si vous souhaitez utiliser cette syntaxe, assurez-vous d’inclure des guillemets autour des valeurs des attributs, par exemple : <img src="..." alt="...">.
Paramétrez vos balises avec des attributs
Dans les prochains chapitres, nous utiliserons des attributs en plus des balises. Les attributs fournissent des informations supplémentaires aux balises.
Un attribut est ajouté à la balise ouvrante d’une balise en paire ou directement à une balise orpheline. Par exemple, l’attribut src spécifie la source de l’image dans la balise <img> :
<img src="chemin/de/l'image.jpg" alt="Description de l'image">Utilisez la structure de base d’une page HTML
Pour écrire une véritable page web en HTML, vous devez utiliser une structure de base. Cela comprend les balises <html>, <head>, <body>, et d’autres balises essentielles.
Voici un exemple de structure de base d’une page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le titre de ma page</title>
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>La balise <html> englobe tout le contenu de la page web. Elle peut inclure les balises <head> et <body>. La balise <head> contient des informations supplémentaires pour le navigateur, telles que l’encodage de la page et le titre de la page. La balise <body> contient le contenu qui sera affiché à l’écran.
Il est conseillé de préciser la langue par défaut de votre site web en ajoutant l’attribut lang à la balise <html>, par exemple : <html lang="fr"> pour le français.
N’oubliez pas de fermer toutes les balises correctement pour éviter les erreurs de syntaxe.
Commentez votre code HTML
Il est important de commenter votre code HTML pour la clarté et la facilité de compréhension. Les commentaires ne sont pas affichés sur la page web et ne sont pas traités par l’ordinateur.
Pour ajouter un commentaire en HTML, utilisez la syntaxe suivante :
<!-- Ceci est un commentaire -->Les commentaires sont utiles pour vous rappeler le fonctionnement de votre page et pour fournir des indications aux autres développeurs qui examinent votre code source. Cependant, gardez à l’esprit que les commentaires sont visibles dans le code HTML source de la page une fois celle-ci mise en ligne.
À vous de jouer !
Maintenant que vous avez appris les bases du HTML, il est temps de mettre vos connaissances en pratique. Pour cet exercice, vous devez créer un fichier index.html et insérer la structure de base HTML. Assurez-vous également de modifier le contenu de la balise <title></title> pour afficher “Accueil – Robbie Lens Photographie”. N’oubliez pas d’ajouter un commentaire dans la balise <body></body>.
N’hésitez pas à consulter le corrigé de l’exercice précédent pour vous aider dans cette tâche.
Félicitations pour votre premier pas dans la création de sites web ! Dans le prochain chapitre, nous aborderons l’organisation du texte en HTML. Restez à l’écoute !
