Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.
Par exemple, pour écrire "Bienvenue sur mon site !" en XHTML, comment on fait ? Bah, il suffit de le taper :
Bienvenue sur mon site !
Jusque-là, pas trop dur... Oui mais attendez, si c'était ça, ça serait trop simple et forcément ça serait pas rigolo ^^
Les balises
En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont
les balises.
Une balise commence par "
<" et se termine par "
>". Par exemple :
<balise>
Les balises sont
invisibles pour le visiteur,
elles servent de marqueurs pour indiquer quelque chose au navigateur.
Par exemple, une balise permet d'indiquer que tel texte est le titre de
votre page, cet autre texte est une citation etc etc...
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.
- Les balises existant par paire
: ce sont les plus courantes. On écrit la première balise, on tape du
texte, puis on "ferme" la balise en la réécrivant avec un slash devant "
/". Par exemple :
<titre>Bonjour ! Bienvenue sur mon super site !</titre>
La première balise <titre> indique le début du titre, et elle est refermée plus loin avec </titre>.
Le navigateur comprend que ce qui est entre <titre> et
</titre> est le titre de votre site web, et que celui-ci est
"
Bonjour ! Bienvenue sur mon super site !"
-
Les balises seules : elles sont un peu plus rares, mais il y en a quand même. On s'en sert en général pour insérer un élément dans une page.
Ce type de balise se termine toujours par un slash "
/", mais cette fois le slash se trouve à la fin de la balise. Par exemple la balise qui permet d'insérer une image :
<image />
Cette balise indique juste qu'il y a une image à cet endroit.
Les attributs
Les attributs sont un moyen de donner des précisions sur une balise. On
peut trouver des attributs sur les deux types de balises (par paire ou
seules).
Par exemple, prenons la balise seule <image />. C'est bien beau de dire qu'on insère une image, mais il faut quand même dire laquelle. On fera ça avec un attribut :
<image nom="soleil.jpg" />
Ici, l'attribut est "nom", et il a pour valeur "soleil.jpg". Cela
indique que l'image que l'on veut insérer s'appelle "soleil.jpg" tout
simplement.
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.
Exemple :
<citation date="21/07/1969">
C'est un petit pas pour l’homme‚ un bond de géant pour l’humanité.
</citation>
On ferme la balise en mettant simplement </citation> sans répéter les attributs.
Ce qu'on doit retenir
Je tenais à vous montrer un peu ce que sont ces "balises" que vous
allez rencontrer tout le temps par la suite, histoire que vous tiriez
pas trop la tronche quand vous allez en voir.
Bien entendu, j'ai inventé des noms de balises, en réalité <image
/> et compagnie n'existent pas. Mais vous allez avoir tout le temps
d'apprendre les vrais noms.
Avant de terminer cette petite partie théorique, je vais vous donner
ici quelques règles pas bien compliquées qu'il faudra retenir si vous
voulez faire une parfaite petite page web :
- Les balises existent soit par paires (<balise>
</balise> ) ; soit toutes seules, mais dans ce cas il faut mettre
un / à la fin de la balise (ex. : <balise /> )
- Les noms des balises et attributs s'écrivent toujours en minuscules (ex. : "citation, auteur, date")
- Les valeurs des attributs peuvent contenir des majuscules (ex. : "Neil Armstrong")
- S'il y a des attributs dans une balise fonctionnant par paire, on
ne les met que dans la balise ouvrante (cf : exemple ci-dessus).
Et maintenant, place à la pratque !
