HTML - La syntaxe
Introduction
HyperText Markup Language ( HTML ) est un langage de balisage, et non pas un langage de programmation, utilisé pour décrire la structure d'une page Web.
Il va donner un contexte et indiquer au navigateur internet (Firefox, Chrome, Edge, etc) ce qu'il doit faire avec vos données. Il est l'ossature sur lequel va reposer le CSS, le Javascript et même les langages de programmation côté serveur.
Pour se faire, nous allons écrire le code dans un fichier ayant l'extension ... « .html » . Ce fichier sera ensuite placé chez votre hébergeur web. Nous en reparlerons dans un autre article à venir.
Note :
Par contre, si votre fichier contient des langages de programmation, alors l'extension de votre fichier ne sera pas « .html » mais celui du langage. Par exemple, « .php » si le fichier contient du PHP.
Les données du HTML sont dites brutes, car il n'y a pas de présentation, pas de style. Toutes s'enchaînent les unes derrière les autres.
Le HTML5 ( 5 pour la cinquième version) suit les normes du W3C (World Wide Web Consortium).
La syntaxe du HTML
Les balises
Le HTML est composé de balises entre crochets angulaires : « <> ».
Par exemple, pour indiquer que l'on veut écrire un titre de haute importance :
<h1>Mon titre</h1>
ou le contenu d'un paragraphe :
<p>Le contenu de mon paragraphe</p>
Vous pouvez voir qu'il il y a une balise d'ouverture « < > » et une autre à la fin dite de fermeture « </ > ». Le « h1 » indique un titre de première importance, et le « p » indique un paragraphe. Il y a bien d'autres balises et nous en verront quelques unes dans d'autres articles à venir.
Voici des schémas pour que vous compreniez mieux.
Il y a une balise d'ouverture « <h1> » et une balise de fermeture « </h1> ». h1 est le nom de la balise. Entre les deux, nous avons le contenu. Le tout s'appelle un élément. Attention, certains éléments n'ont pas de balise fermante, car elles n'ont pas de contenu.
Cela sera par exemple le cas pour la balise « <br/ > » qui permet de faire un saut de ligne.
Les attributs
Les attributs combinés avec le nom de la balise permettent de décrire comment le navigateur va gérer le contenu de votre page.
<img src="Lien vers mon image" >
Dans ce cas, nous avons la balise image et son attribut « src ». Nous avons bien le chevron qui ferme la balise, mais il n'y a pas de balise de fermeture. Le tout représente un élément.
Les attributs doivent avoir un nom (ici, « src ») et avoir une valeur (dans notre cas, cela sera un lien vers l'image.)
Voici un autre exemple :
Les balises sont insensibles à la casse, c'est-à-dire que cela n'a pas d'importance qu'elles soient écrites en minuscule ou en majuscule. Après, il y a les habitudes des développeurs. Par exemple, j'ai toujours vu le Doctype écrit ainsi :
<!DOCTYPE html>
Le code source
Si vous êtes curieux (et dans ce cas, c'est une bonne chose et je vous y encourage) sachez que l'on peut voir le code HTML d'une page web. Cela s'appelle le code source. Voici les manières de le faire sur les principaux explorateurs internet comme Firefox, Chrome ou Edge :
- CTRL U sur PC ou Cmd + U sur un Mac;
- clique droit -> code source de la page ;
En plus, pour Firefox :
- La barre de menu (les trois barres horizontales) puis outils supplémentaires et code source de la page
Pour un non-initié, ce texte est un langage incompréhensible, mais pas pour votre explorateur web qui va le transformer en page lisible pour les visiteurs de votre site.
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...