2. Utiliser ma première balise

Vous vous en rappelez sûrement, mais à la fin du chapitre précédent, on avait codé notre première page Web, et je vous avais dit que ce n’était pas du “vrai” code HTML. Eh bien, nous allons voir maintenant comment coder “vraiment” en HTML.

Je vous rappelle, comme on l’avait vu au début de ce cours, que le HTML est un langage de balises et que chaque balise représente un élément de la page. Ainsi, pour écrire du texte, il faudrait que nous utilisions une balise “paragraphe”. Nous allons voir comment les utiliser.

Les balises respectent une syntaxe un peu spéciale. Il faut déjà savoir qu’elles vont par paires : il y a une balise ouvrante et une balise fermante, et entre les deux, on a son contenu. Mais un petit exemple s’impose :

<p> Bienvenue sur mon Pokédex </p>

Dans ce code, nous avons 3 parties :

  • La balise ouvrante : Elle est entourée par des crochets et contient son type, ici “p”. “p” est le type qui représente le paragraphe, mais il en existe plein d’autres : “<” + “p” + “>”.
  • Le contenu : Le texte qui sera affiché dans le paragraphe.
  • La balise fermante : elle respecte la même syntaxe que la balise ouvrante, à l’exception du “/” placé après le premier crochet.

En réalité, certaines balises fonctionnent un peu différemment : elles sont seules et n’ont pas de contenu. On les appelle les balises “auto-fermantes”. Nous reviendrons dessus plus tard.

Maintenant, il ne nous reste plus qu’à mettre un paragraphe dans notre fichier index.html vide. Vous pouvez même en mettre plusieurs :

<p>Pikachu : électrique</p>
<p>Bulbizarre : Plante, Poison</p>

Maintenant, vous n’avez plus qu’à contempler le travail en affichant votre site. 

Pour rappel, pour afficher votre site, vous devez dans un premier temps enregistrer le fichier, puis double-cliquer sur le fichier index.html dans votre explorateur de fichiers.

Bon, on a appris à utiliser des balises, et on a commencé le développement du Pokédex. C’est déjà pas mal. 🙂

Mais il manque encore un petit détail pour avoir du code plus “conventionnel”. C’est ce que nous verrons dans le prochain chapitre.