Les quatre types de contenus de base
Il existe quatre premières balises HTML dont je voulais te parler, elles permettent une mise en forme basique d'un document.
Les titres
Un titre est un élément textuel pour préciser le contexte du contenu qui se trouve après. Il existe six niveaux de titre allant de 1 à 6, 1 étant le niveau le plus important, et 6 le moins important. La balise associée est <h[x]>> où [x] est le niveau du titre.
Ok, donc on peut mettre 6 titres par page maximum ?Non pas du tout, on peut en mettre à l'infini, en fait un titre niveau 1 est le niveau le plus important, on verra ça plus tard, mais pour le référencement web il est préférable de n'en avoir qu'un seul par page. Par contre il peut y avoir plusieurs titres de niveau 2 en dessous d'un titre de niveau 1. Par exemple si on écrivait une page HTML qui parle du HTML, on pourrait organiser la page comme cela :
On a bien un titre <h1>, en dessous plusieurs titres <h2> et l'un d'entre eux a même des titres <h3>. Attention tout de même, il est très important de conserver un ordre, c'est à dire qu'il ne faut pas avoir de balise <h3> s'il n'y a pas de <h2> avant dans la page.
D'accord, toujours dans l'ordre de 1 à 6 sans sauter d'étape donc. Effectivement comme tu le présentes on peut avoir beaucoup de titres dans une page.Les paragraphes
Cette balise est faite pour écrire des paragraphes de texte, elle est assez simple à utiliser. C'est la balise <p>
C'est quoi ce texte "Lorem ipsum blablabla" ? C'est totalement illisible.Je sais, c'est un lorem ipsum, c'est un texte très utilisé par les développeurs. Il ne veut rien dire du tout, mais il permet d'avoir un contenu à ajouter dans une page HTML pour tester l'affichage, en attendant d'avoir le texte définitif. C'est un gain de temps important sur le développement.
Ok, donc pas besoin de le lire ?Non pas besoin.
Les liens
Je t'en parlais tout à l'heure des liens. Ils permettent de faire la liaison entre plusieurs page, ce qui rend nos fichiers html de vrais fichiers HyperText. Un lien s'écrit avec la balise <a> et si tu te souviens je t'ai parlé d'attribut en XML.
Oui je me rappelle {"language":"text/html","content":"<balise attribut=\"valeur\">contenu</balise>","filename":""}
Tout à fait, hé bien la balise <a> a un attribut très important qui s'appelle "href", pour HyperText REFerence, cet attribut va permettre de définir à quelle ressource la balise fait référence.
La balise <a> a aussi un contenu, comme toute autre balise, ce contenu sera l'élément sur lequel cliquer pour être redirigé vers la ressource associée au lien.
Par exemple si on veut créer un lien qui redirige vers le site training-dev, on peut écrire la balise :
Ok j'ai tout compris, balise suivante ! Les images
On peut aussi ajouter des images dans une page html, car oui, que du texte, des titres et des liens, ce n'est pas très engageant. Pour cela il y a la balise <img> qui elle aussi possède un attribut src pour définir la source de l'image, c'est-à-dire l'endroit où se trouve l'image que tu souhaites afficher. Par exemple :
Mais... Tu n'as pas mis de balise de fermeture </img>, tu l'as oubliée ?Pas du tout, c'est ce que l'on appelle une balise auto-fermante (ou orpheline), il en existe quelques-unes qui n'ont tout simplement pas de contenu. Une image par exemple s'affiche par rapport à sa source, et n'as besoin de rien de plus, on ne va pas aller écrire du texte à l'intérieur d'une balise image, ça ne voudrait rien dire.
À l'origine, il fallait d'ailleurs le préciser en fermant la balise avec un slash de cette façon :
{"language":"text/html","content":"<img src=\"[...]\" />","filename":""}
Mais depuis HTML5 ce "/" n'est plus requis.
Ok c'est bon pour moi, je sais faire du HTML maintenant ! Ne te précipite pas trop, nous n'avons vu que les bases, il existe de nombreuses autres balises, nous allons essayer d'en faire le tour. J'ai terminé cette partie