Le HTML (pour "Hyper Text Markup Language", ou « Langage de balisage hypertexte ») est un langage permettant de créer un document grâce à des codes spécifiques. Ces codes, dénommés « balises », permettent à l’ordinateur de traduire des bits et autres symboles en une interface lisible et compréhensible par l’Homme.
Le langage HTML n’est pas un langage de programmation : il s’agit juste d’interpréter du code « machine » facilement utilisable par l’Homme.
La quasi-totalité des sites web de l’Internet disposent de nombreuses pages HTML. Même IDEALOGEEK est fondé sur des pages HTML ! Il faut comprendre ici que ce langage doit être étudié et compris pour pouvoir continuer de développer des applications web (sites, programmes spécifiques et autres).
Structure d’une page HTML
Une page (et même un document) HTML contient trois balises impératives pour pouvoir être exploitable. Chaque balise est repérée par les sigles « < » (ouverture) et « > » (fermeture).
Pour qu’une page web puisse être conforme aux standards imposés par le W3C (une commission informatique mondiale indiquant les bonnes pratiques dans le monde de la programmation), vous devez avoir ces trois balises :
- <html> </html> : Début et fin du document HTML (Tout le contenu et donc toutes les autres balises HTML que vous utilisez dans votre document se trouvera entre ces balises « HTML ») ;
- <head> </head> : Délimite l’en-tête du document (Titre, scripts accessoires, informations complémentaires…) ;
- <body> </body> : Corps du document (votre contenu à proprement parlé).
En voyant et comptant correctement, on s’aperçoit qu’il y a en fait 6 balises de saisies : lorsque l’on dit « balise », il s’agit de l’ensemble d’une balise écrite… C’est-à-dire qu’il y a la « balise ouvrante » et la « balise fermante« . On délimite alors parfaitement le début et la fin vis-à-vis du contenu.
Il est aussi nécessaire d’y inclure le "Doctype". Ce Doctype permet de préciser aux navigateurs (mais aussi aux robots Google, Microsoft, etc) de quel type de format HTML la page en question a été conçue. Auparavant, il fallait écrire un Doctype de ce genre :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Aujourd’hui, le doctype n’est plus aussi contraignant qu’auparavant. Il faut écrire simplement cette ligne suivante, tout en haut de votre page HTML :
<!DOCTYPE html>
Beaucoup plus simple à retenir et très simple d’utilisation !!
Création de sa première page HTML
Maintenant que nous savons quelles sont les premières balises à utiliser pour créer un document HTML, il nous faut un logiciel pour créer ces pages. Il existe différents logiciels, chacun ayant leurs avantages et inconvénients, d’autres sont payants et certains ne le sont pas… Pour cela, je vous suggère d’utiliser Notepad++, qui est un excellent logiciel en tout point ! (colorisation du langage de programmation utilisé, nombreux langages détectés, interface simple et intuitive, logiciel très léger et j’en passe…. !!!). Sachez aussi que le Bloc-Notes de Windows est aussi « capable » de vous permettre de créer des documents / pages HTML !
Une page HTML peut être écrite en ce que l’on appelle du « texte brut«, donc sans avoir à écrire des fioritures en tout genre, pas besoin de mettre en gras, italique et compagnie… Il faut juste saisir le texte / contenu ! Rien de plus simple !
Trêve de bavardage, commençons notre première page HTML !
Nous avons vu très succinctement les balises <html>, <head> et <body>. Utilisons-les dès à présent !
Ouvrez un nouveau fichier texte vierge. Nous allons dès maintenant pouvoir le compléter avec les balises précédemment citées :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>À première vue, ce n’est pas spécialement très lisible, tout est regroupé dans un même tas, sans saut de ligne ni rien d’autre… Aménageons ce code ! Ce qui suit n’est qu’à titre d’information. Vous n’êtes pas obligé de suivre ces conseils, mais il est préférable de s’en inspirer pour avoir un code ayant une apparence un peu plus « professionnelle ».
Dans un premier temps, la chose à faire est de bien séparer chaque partie par une ligne vide. Ainsi, on voit facilement où est la partie <head> de la partie <body>.
Après quelques modifications, vous pouvez avoir ce genre de code « propre » :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Les parties sont bien délimitées et visibles au premier coup d’œil :
- <!DOCTYPE html> précise la version utilisée (dans notre exemple, HTML 5 qui est implicite dans le Doctype) ;
- <html> « entoure » entièrement toute la page HTML ;
- <head> se situe tout en haut de la page, puisqu’il s’agit de l’en-tête ;
- <body> nous permettra d’ajouter notre contenu ;
- </html> signifie la fin de la page HTML.
N’oubliez pas d’enregistrer le document que vous avez créé en le nommant (par exemple) « test.html » → Vous devez mettre l’extension ».HTML » pour que tous les navigateurs web puissent reconnaître le document comme étant une page web.
Si vous essayez d’ouvrir cette page dans un navigateur, vous risquez d’être déçu par le résultat… ! En effet, vous n’avez saisi que les balises permettant de structurer la page HTML, il n’y a pas de contenu à l’intérieur du <body>.
Ajoutez un texte quelconque entre les balises <body>, enregistrez les modifications, et testez une nouvelle fois la page dans votre navigateur.
Dans notre cas :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ma première page HTML... Elle fonctionne !
Elle n'est pas encore très jolie, mais tout va arriver petit-à-petit !
</body>
</html>La page affichée est blanche avec le texte que nous avons saisi… C’est tout bon ! À ce point-ci, vous savez dès à présent créer une page HTML, en lui attribuant une structure simple et surtout conforme aux normes !
Maintenant, il faut ajouter le contenu d’une part, mais aussi embellir notre page pour qu’elle soit plus agréable à l’œil… !