HTML, vocabulaire de base

Ce tutoriel n'en est pas vraiment un, puisque vous n'apprendrez pas à créer quelque chose de particulier à la fin de celui-ci. A quoi sert-il alors ? A savoir de quoi vous parlez quand vous parlez de "coder". En effet, connaitre les termes techniques et l'état "naturel" du HTML vous permettra de faire des recherches ciblées si vous êtes bloqué sur quelque chose, ou de détecter d'où vient un problème d'affichage, ou même de détecter qu'il y a un souci tout simplement.

Qu'est ce que le html ? Première approche simplifiée...

J'aime souvent comparer le html au squelette de votre page/zone. C'est un langage de balisage qui permet de structurer votre contenu de manière sémantique et visuelle. Oui oui, visuelle ! Même si l'on verra plus tard que c'est le css qui crée vraiment l'aspect visuellement beau d'une page/zone html...

Quand je parle de structuration visuelle, je veux dire qu'avec un html bien construit, votre contenu s'affichera proprement dans les navigateurs. Il faut savoir qu'un bon code html affichera votre contenu même sans css, et de manière claire. C'est a dire qu'il y aura des titres, des paragraphes, des sauts de lignes, des images... et pleins d'autres choses.

Sans le html, un texte mis en page sur un traitement de texte comme Word ou OpenOffice ne serait plus qu'un amas de lignes continu, toutes à la même taille et sans aucun retour à la ligne une fois affichés dans votre navigateur. Quand aux images, elles ne s'afficheraient surement pas... Et ne parlons même pas du gras, du souligné, de la couleur qui n'est même pas du ressort de l'html.

Qu'est ce qu'une balise ?

Tout d'abord, il n'y a pas une balise mais un certain nombre de balises. Néanmoins, elles ont toutes plus ou moins la même apparence déterminée par le langage utilisé. Vous avez surement peut-être déjà vu des trucs ressemblant à ça :

Code:

<div>

En effet, les balises html sont délimitées par les chevrons < et >. Elles contiennent un nom (je les détaillerai plus tard) et un certain nombre d'attributs (qu'on déterminera souvent suivant le nom de la balise...)

Les balises doubles

Vu le nom de leur catégorie, il est facile de deviner qu'elles vont donc par paire ! Le principe est donc de les ouvrir, d'y mettre votre contenu et de les fermer.

La balise ouvrante est donc formée des chevrons entourant le nom de la balise :

Code:

<nom>

La balise fermante est identique a un détail prés. Le / que l'on insère avant le nom :

Code:

</nom>

Cela ressemble au bbcode que l'on utilise souvent non ? Et pour cause, lui aussi est un langage de balisage. Enfin bref, ceci sera surement le sujet d'un autre tutoriel pourquoi pas ! Mais revenons à notre html.


Exemple flagrant, vous ne trouvez pas ? Non, moi non plus je vous l'accorde. La raison en est tres simple, j'ai utilisé une balise "vide de sens", c'est a dire neutre. Elle ne fait que englober un contenu en le renvoyant à la ligne. C'est sa seule utilité, et pourtant c'est une des balises les plus utilisées ! Parce que couplée avec css, elle devient redoutable. Mais cela c'est pour plus tard ! Ne soyez pas impatients !

Les balises simples, ou auto-fermantes.

Vous l'aurez donc compris, ce n'est qu'une seule balise. Elle fonctionne sensiblement pareil que les doubles à la différence qu'elle n'accepte donc pas de contenu textuel. Tout est indiqué dans ses attributs. Sa forme est la suivante :

Code:

<nom />

Elle s'ouvre, et se ferme avec le signe / avant le chevron fermant.


Et oui, le html permet de faire sauter des lignes aussi ! Magnifique non ? Héhéhé ! Ok, c'est pas si magique que ça vu d'un forum où il suffit simplement d'appuyer sur la touche entrée en rédigeant son message pour le faire... mais croyez-moi, quand vous montez votre page html en entière, cette balise vous servira bien quand vous voudrez passer à la ligne dans un paragraphe... Sans elle, que nenni ! Vous aurez beau appuyer sur votre touche entrée pour faire sauter des lignes, ça ne marchera pas...

Deux genre de balises ? Vraiment ?

Non, pas seulement. En fait, on peut aussi les classer en deux mode de structure. Les balises de type bloc et les balises de type en-ligne. Les premières créerons un bloc distinct avec son contenu. Les secondes seront dans la continuité du texte, sans déranger le flot du contenu avant et après les balises.

Comme la vue vaut cent explications voici ce que donne ce code :

Code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl turpis, luctus vestibulum sodales eu, imperdiet non leo. <span>ICI ON EST DANS UNE BALISE DE TYPE "EN-LIGNE". Elle ne fait pas passer a la ligne et reste dans la continuité du texte</span>Ut mattis, sem in pharetra vestibulum, dui enim ullamcorper ipsum, ac ornare quam mauris ultrices est. Sed in magna nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut velit diam.<div>UNE BALISE DE TYPE BLOC. Comme vous pouvez le voir, son contenu constitue un bloc qui passe a la ligne, et qui empeche le texte qui est a la suite de s'afficher sur la même ligne et ce même s'il y a de la place sur la ligne...</div> Integer sit amet tortor eu purus fermentum bibendum sed in elit. Pellentesque commodo eros at ipsum eleifend dapibus. Nulla at ipsum quam. Fusce posuere felis ut velit placerat bibendum. Cras dapibus massa eget quam pulvinar fringilla.

voici ce que ça donne:

Un dernier mot ? Oui, "Attribut"

Oui, parce que celui là, vous le retrouverez très souvent si la personne sait de quoi elle parle. Parce que sinon, les trucs et machins, ça reste pas très clair. Les attributs donc sont des mots clés insérés dans une balise pour lui attribuer (logique non ?) certaines caractéristiques.

Code:

attribut="valeur" ou  attribut='valeur'

Que vous mettiez des simples ou des doubles quotes ( " ou ' ) importe peu, le tout étant de rester cohérent d'une balise a l'autre sur un même document ^^

On les place donc dans la balise (ouvrante dans le cas des doubles) comme ceci :

Code:

<div name="ulysse">Heureux qui comme Ulysse...</div>

Voilà pour les bases de vocabulaire de l'html. Ceci n'en est qu'une approche simplifiée, loin d'être "pro". Mais déjà avec ceci, vous comprendrez que vous avez affaire à du html dans 9 cas sur 10 ! Et oui, il existe au moins un autre langage ressemblant au html qui pourrait vous tromper ! Mais il est rare de le croiser tant qu'on approfondit pas les choses. Ainsi je vous laisse assimiler ces bases de comprehension, et vous retrouve au prochain épisode ! On passe au plus intéressant ? Suivez-moi alors, nous y allons !

Definitions annexes :
Langage de balisage : qui est formé de balises. Par exemple BBCode est un langage de balisage, tout comme html.
Sémantique : qui a du sens, notamment pour les navigateurs et moteurs de recherche.