Cours HTML 5 Les balises et leurs attributs

Cours HTML 5 Les balises et leurs attributs, tutoriel & guide de travaux pratiques en pdf.

Les balises et leurs attributs

Les pages HTML sont remplies de ce qu’on appelle des balises. Celles-ci sont invisibles à l’écran pour vos visiteurs, mais elles permettent à l’ordinateur de comprendre ce qu’il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci : <balise>
Les balises indiquent la nature du texte autour d’elles. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.
On distingue deux types de balises : les balises en paires et les balises orphelines.
Les balises en paires
Elles s’ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :
<titre>PPE2 CONCEPTION SITE WEB</titre>
On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l’ordinateur que tout ce qui n’est pas entre ces deux balises n’est pas un titre.

Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n’est pas nécessaire de délimiter le début et la fin de l’image, on veut juste dire à l’ordinateur « Insère une image ici ».
Une balise orpheline s’écrit comme ceci :
<image />
Notez que le / de fin n’est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas confondre avec le premier type de balise, il est recommander de rajouter ce / (slash) à la fin de la balise

Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L’attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :
<balise attribut= »valeur »>
A quoi ça sert ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l’image à afficher :
<image nom= »photo.jpg » />
L’ordinateur comprend alors qu’il doit afficher l’image contenue dans le fichier photo.jpg.
Dans le cas d’une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Voltaire :
<citation auteur= »Voltaire »> Il faut s’instruire dans la gaieté. Le savoir triste est un savoir mort. </citation>
Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais , nous allons les découvrir dans la suite de ce cours.