HTML Premiers Pas - Tutoriel HTML
HTML est un langage assez simple, tous les étudiants des filières techniques et littéraires l’apprennent à l’université, et je pense qu’il est désormais enseigné dans la plupart des écoles. C’est simple car HTML n’est même pas un langage de programmation.
HTML est un langage de balisage : ce que nous écrivons s’affiche à l’écran. Il n’y a pas d’algorithmes, de schémas, de boucles, de variables, de classes, juste du texte, du texte, du texte. En HTML, il n’y a que des balises, et en réalité pas beaucoup, et parmi celles-ci, celles utilisées fréquemment sont moins d’une trentaine. Donc si vous voulez apprendre un langage proche des langages de programmation, HTML est un bon choix.
Pour commencer à créer des documents au format HTML, il vous faut un programme Bloc-notes (inclus dans Windows, Linux) et un navigateur pour visualiser le document (Firefox, Opera, Chrome ou Internet Explorer). Pour l’éditeur de texte sous Windows, j’utilise notepad++.
Je pense que ces quelques lignes suffisent à préparer l’apprentissage, rien d’autre n’est nécessaire, alors commençons.
Mon premier document HTML
Les documents HTML sont des fichiers texte ordinaires, comme les fichiers readme.txt ou autres fichiers avec extension .txt.
Note :
Qu’est-ce qu’une extension ?
Les extensions de fichiers sont une particularité surtout des systèmes d’exploitation avec interface graphique. Leur but principal est d’indiquer au système quel programme doit ouvrir tel fichier. Nous ne parlerons pas des extensions pour fichiers exécutables, car l’interpréteur de commandes du système est lui-même un programme qui travaille avec des fichiers ayant des extensions telles que .COM, .EXE, .BAT, .CMD, .VBS.
Pour les documents HTML, nous utiliserons les extensions .HTML, .HTM.
Il est temps de créer un document. Rendez-vous dans le dossier voulu, faites un clic droit dans un espace vide :
Sélectionnez création d’un document texte. Nommez le fichier index.html, vous pouvez aussi utiliser l’extension .htm.
Il est possible que votre système n’autorise pas la saisie de l’extension et que le fichier soit enregistré sous le nom index.txt. Dans ce cas :
- Ouvrez ce fichier index.txt avec le Bloc-notes.
- Dans le menu Fichier → Enregistrer sous.
- Dans la fenêtre qui s’ouvre, vous pouvez maintenant saisir l’extension souhaitée.
Maintenant que le fichier index.html est créé, ouvrez-le dans le Bloc-notes et commencez à créer la structure HTML.
Le balisage HTML est créé à l’aide des balises. Les balises ont cette forme :
<tag>Quelque texte</tag>
On commence par la première balise appelée balise ouvrante, c’est un mot entouré par les signes inférieur et supérieur. Ces signes ne se prononcent pas, on dit simplement « c’est la balise tag ».
Commençons par la balise la plus simple <html></html>. C’est la balise principale, elle marque le début et la fin du document html :
<html> </html>
On peut écrire les balises en ligne, mais c’est plus pratique de les aligner verticalement, dans ce cas notepad++ met en évidence les balises.
Ensuite, à l’intérieur de la balise <html>, on place la balise <body></body>. Body est le corps de notre document au sens propre. Tout ce que l’on voit dans le navigateur est à l’intérieur de la balise body. J’ai presque oublié le navigateur. Modifions le contenu du fichier index.html et sauvegardons-le.
<html> <body> </body> </html>
Regardez comment j’ai indenté la balise body avec deux espaces pour améliorer la lisibilité du document HTML. Maintenant sauvegardez le document et ouvrez-le dans un navigateur.
Vous devriez voir un écran vide, ce qui est normal car nous n’avons pas encore ajouté de texte au document.
Ajoutons donc du texte, juste entre les balises body.
<html>
<body>
HTML mes premiers pas
</body>
</html>
Sauvegardez le document et rafraîchissez la page dans le navigateur. Le texte « HTML mes premiers pas » apparaît. Tout cela parce que nous l’avons placé dans la balise body, ni au-dessus ni en-dessous, mais bien à l’intérieur.
Vous avez sans doute remarqué que le titre affiché dans l’onglet du navigateur est simplement « Mozilla Firefox », c’est-à-dire que notre document n’a pas de titre. Corrigeons cela en ajoutant un titre.
Les titres sont ajoutés à l’intérieur d’une autre balise <head></head>. La balise <head> est placée au-dessus de body :
<html>
<head>
</head>
<body>
HTML mes premiers pas
</body>
</html>
Si vous sauvegardez et actualisez maintenant, rien ne change, car il faut ajouter dans head la balise <title></title>, qui définit le titre :
<html>
<head>
<title>HTML premiers pas drupalbook.org</title>
</head>
<body>
HTML mes premiers pas
</body>
</html>
Sauvegardez, actualisez dans le navigateur, et voilà, notre document a un titre.
Je pense que cela suffit pour cette leçon d’introduction, nous aborderons beaucoup d’autres choses dans les prochaines leçons.