Éditeurs et outils HTML
Dans le chapitre précédent, nous avons appris que le HTML est un langage de balisage utilisé pour créer des pages web. Lors de la création de pages web, vous aurez besoin des outils et programmes suivants :
- un éditeur de texte ou HTML pour écrire et modifier le code source,
- un navigateur pour vérifier les résultats,
- un validateur - un programme spécial vérifiant la validité ou la correction syntaxique du code source.
Parlons-en en détail.
Éditeurs HTML
Il existe plusieurs éditeurs professionnels utilisés par les développeurs web pour coder. Cependant, tous les éditeurs ne répondent pas à tous vos besoins. Ainsi, un bon éditeur HTML doit disposer des fonctionnalités suivantes :
- la coloration syntaxique - afficher le texte, en particulier le code source, en différentes couleurs et polices,
- la prise en charge des onglets - garder plusieurs pages web ouvertes dans des onglets en même temps,
- la vérification d'un document HTML à la recherche d'erreurs,
- le repli de code - masquer de grands fragments de code pour n'afficher qu'un résumé ou la première ligne.
Les éditeurs HTML les plus populaires sont ceux listés ci-dessous :
Comme vous débutez, vous pouvez utiliser le Bloc-notes (Windows) ou TextEdit (macOS) pour écrire votre premier fichier. Cependant, comme ces éditeurs de base ne disposent pas de coloration syntaxique, nous vous recommandons de commencer avec un éditeur gratuit qui la prend en charge, tel que Visual Studio Code ou Notepad++. Voyons comment créer votre premier fichier.
Étape 1. Ouvrir le Bloc-notes sur votre ordinateur
Appuyez sur la touche Windows, tapez Bloc-notes, puis appuyez sur Entrée.
Étape 2. Écrire votre code
Écrivez ou copiez du code HTML.
Exemple de code HTML :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>Résultat
Étape 3. Enregistrer le document HTML
Allez dans Fichier dans le menu du Bloc-notes et choisissez Enregistrer sous. Donnez un nom à votre document en utilisant l'extension de fichier .htm ou .html. (Nous recommandons d'utiliser l'extension .html). Assurez-vous de définir l'encodage sur UTF-8 et de définir le menu déroulant Enregistrer sous sur Tous les fichiers pour empêcher Windows d'ajouter une extension .txt. Enregistrez le fichier dans un dossier dédié que vous devrez créer au préalable pour stocker tous vos documents HTML.
Étape 4. Vérifier le fichier HTML dans un navigateur
Ouvrez votre fichier HTML dans un navigateur (clic droit sur le fichier et choisissez Ouvrir avec).
Navigateur
Vous aurez besoin d'un navigateur pour vérifier les fichiers HTML. Pour commencer, n'importe quel navigateur, Google Chrome, Opera ou Firefox, suffira, mais plus tard, vous en aurez besoin de tous. En effet, chaque navigateur possède son propre moteur de rendu, et vous devrez vérifier votre code dans chacun d'eux. Les navigateurs modernes incluent également des outils de développement intégrés (appuyez sur F12), Chrome DevTools étant le plus largement utilisé pour inspecter et déboguer le HTML. Pour les tests multi-navigateurs, vous pouvez utiliser des services en ligne ou des machines virtuelles une fois votre projet en croissance.
Validateur
Une partie essentielle du processus de développement de pages web est la vérification de la validité du code HTML. Des validateurs, programmes ou services spéciaux peuvent être utilisés pour vérifier la validité ou la correction syntaxique d'un fragment de code ou d'un document.
Le service en ligne le plus courant est validator.w3.org. Entrez l'URL d'une page web, et le service vérifiera le code à la recherche d'erreurs, ou renverra un message confirmant que votre document est valide.
Pour vérifier la validité des fichiers locaux, vous pouvez utiliser des validateurs en ligne ou des linters intégrés dans des éditeurs modernes comme Visual Studio Code. Certains éditeurs fournissent également une vérification syntaxique en temps réel pendant la saisie.
Pratique
Parmi les propositions suivantes, quels éditeurs HTML sont recommandés selon le contenu fourni dans l'URL spécifiée ?