Télécharger le PDF du cours
L’enregistrement de notre fichier
Maintenant que nous avons établi les bases, nous allons pouvoir commencer à coder ensemble.
Pour cela, commencez par ouvrir votre éditeur de texte puis créez un nouveau fichier vide. Par défaut, votre fichier devrait être un fichier au format .txt, c’est-à-dire un simple fichier texte.
La plupart des éditeurs de texte proposent aujourd’hui des fonctionnalités nous aidant à coder plus rapidement et à créer un meilleur code.
Parmi ces fonctionnalités, on peut notamment citer l’auto complétion des balises HTML qui correspond à l’écriture automatique de la balise fermante d’un élément dès la déclaration de la balise ouvrante (pour un élément constitué d’une paire de balises) ou encore la vérification automatique de la validité du code écrit.
Pour que ces fonctionnalités s’activent, il va cependant falloir que notre éditeur de texte sache quel langage de code est utilisé dans notre page.
Pour le lui indiquer, nous avons deux façons de procéder : on peut soit déjà enregistrer notre fichier avec la bonne extension c’est-à-dire ici .html, soit préciser le langage utilisé dans l’un des onglets de l’éditeur (si vous cherchez bien, vous devriez voir quelque part une liste de langages informatiques proposés).
Ici, nous allons utiliser la méthode la plus simple qui va être d’enregistrer notre fichier. Pour cela, allez dans l’onglet « fichier » puis « enregistrer sous » ou utilisez le raccourci CMD+SHIFT+S (pour Mac) ou CTRL+SHIFT+S (pour Windows).
Pour la suite de ce cours, je vous propose de créer un dossier qu’on va appeler « cours » sur votre bureau. Nous allons enregistrer nos différents fichiers dans ce dossier.
Il y a quelques règles à respecter lorsqu’on enregistre un fichier de code : le nom du fichier ne doit pas contenir d’espace ni de caractères spéciaux (pas de caractères accentués ou de ponctuation ni de sigles) et doit commencer par une lettre. Ici, on peut enregistrer notre fichier sous le nom cours.html par exemple pour faire très simple.
Dès que votre fichier est enregistré au bon format, nous allons retourner dans notre éditeur et écrire la structure minimale d’une page HTML. Notre éditeur sait maintenant qu’on écrit en HTML et va donc certainement utiliser une palette de couleurs, l’auto-complétion, etc. pour nous aider à coder.
Ensuite, nous allons ajouter un grand titre dans notre page et un paragraphe en utilisant respectivement les éléments h1 et p.
See the Pen Cours HTML CSS 2.3 by Pierre (@pierregiraud) on CodePen.
Note : Ce que vous voyez ci-dessus est l’éditeur en ligne CodePen. Avec cet éditeur, il n’est pas nécessaire d’écrire toute la structure d’une page HTML mais nous allons nous contenter d’écrire le code qu’on souhaite placer dans l’élément body. En effet, CodePen se charge de créer la structure autour. Cet éditeur vous permet de voir mes codes HTML, CSS et le résultat immédiatement. Vous pouvez également copier-coller les différents codes ou les modifier directement dans CodePen pour voir immédiatement le résultat de vos actions. Faites bien attention néanmoins (surtout au début) à ne pas oublier qu’une page HTML pour être valide doit toujours posséder la structure minimale vue au chapitre précédent et à ne pas l’oublier lorsque vous codez dans votre éditeur !
Dès que votre page est prête, nous allons l’enregistrer à nouveau pour ensuite l’afficher dans notre navigateur.
Afficher le résultat d’un code HTML dans le navigateur
Pour afficher notre fichier dans le navigateur, nous allons aller le chercher dans notre dossier puis effectuer un clic droit dessus et choisir « ouvrir avec… » + le navigateur de votre choix.
Voici le résultat que vous devriez avoir :
Une petite astuce ici : si jamais c’est votre éditeur qui est le programme choisi par défaut pour ouvrir votre fichier de code HTML et non pas votre navigateur, je vous invite à définir le navigateur comme programme par défaut. Ainsi, vous n’aurez plus qu’à double cliquer sur le fichier en question pour qu’il s’ouvre automatiquement dans le navigateur.
