Cours / Tutorials - Des balises XHTML un peu particulières
Liens, retours à la ligne, séparations et images
Une première balise avec paramètres : les liens
Jusque là, nous avions vu comment créer des pages, mais pas comment passer de l'une à l'autre. Ceci va se faire avec la balise <a>. Le texte qui doit servir de lien se place entre l'ouverture <a> et la fermeture de la balise </a>, comme ceci :
Pour aller sur la page du premier exercice, cliquez <a>ici</a>.
Mais comment indiquer au lien vers quelle page il doit rediriger le visiteur ? La balise <a> accepte donc des paramètres dont le plus important est "href". Ce paramètre sert à indiquer l'url (adresse) de la page à visiter lorsque l'on clique sur le lien. Il y a un deuxième paramètre qui est "title". Lorsque vous restez sans cliquer et sans bouger une ou deux secondes sur un lien hypertexte, il peut apparaitre une petite phrase. Celle-ci a été écrite avec le paramètre "title". Ces deux paramètres sont OBLIGATOIRES, même si vides, et toujours en minuscule !
Pour aller sur la page du premier exercice, cliquez <a href="1-hello.htm" title="ma premiere page html">ici</a>.
Important, si vous ne souhaitez pas renseigner le "title", laissez-le vide mais inscrivez le quand même.
Pour aller sur la page du premier exercice, cliquez <a href="1-hello.htm" title="">ici</a>.
Exercice :
Créer une page "sommaire" pour tous les exemples et exercices réalisés jusqu'ici.
Quelques balises "différentes"
Vous vous souvenez, nous avions vu que toutes les balises se présentaient sous la forme <balise> et se fermaient </balise>… C'était faux !
En fait, il y a quelques exceptions que vous allez trouver plutôt logiques finalement.
Ces balises se ferment en même temps qu'elles s'ouvrent et se présentent donc sous la forme : <balise />
Notez bien le "/>"
Le retour à la ligne
La première exception est la balise qui sert à faire un retour à la ligne dans un paragraphe. Ce retour à la ligne n'a pas besoin de contenir quoi que ce soit. Cette balise est <br />
La ligne de séparation
La seconde exception, très proche du retour à la ligne, est la ligne de séparation. Elle "dessine" un trait qui traverse la page et se présente : <hr />.
Les images
Il nous manquait un élément important de tout site Internet : les images… Celle-ci, <img /> se présente sous la même forme que les deux balises précédentes mais on y ajoute des "paramètres". Comme tous les paramètres, ils doivent être en minuscule. Comme pour la balise <a>, nous allons voir ici les deux paramètres obligatoires :
<img src="toto.jpg" alt="la tête à toto" />
A l'instar du paramètre title pour la balise <a>, le paramètre alt de la balise <img /> sert à afficher une info-bulle lors du survol de l'image. Il est obligatoire, si vous ne souhaitez pas d'info-bulle, laissez le vide alt="", mais inscrivez le.
Note : L'image ou photo "toto.jpg" de l'exemple ci-dessus doit se trouver dans le même dossier que votre page .htm. Pour naviguer entre les dossiers, utilisez ce qui s'appelle un chemin (path) relatif. Par exemple, pour désigner le dossier en dessous ("blog-webmaster" dans notre arborescence), écrivez "./../nom du fichier.jpg". "./" indique le dossier actuel de la page .htm, ../ indique le dossier en dessous. Vous pourriez encore remonter d'un dossier et aller dans celui "windows" (si vous avez créé "blog-webmaster" à la racine de votre disque dur "C:"). Cela donnerait "./../../windows/nom du fichier.jpg"
Ce ne sont pas des balises mais des caractères
Il faut également savoir que vous ne devriez pas utiliser de caractères accentués et "&" dans vos pages xhtml. De plus, si vous avez déjà essayé de séparer deux mots de plus d'un espace, vous avez remarqué que cela ne fonctionnait pas. Le caractère d'espacement s'écrit : Pour plusieurs espaces, il faudra écrire cette combinaison plusieurs fois. Nous verrons prochainement comment tout traiter automatiquement. Un exemple de caractère accentué en attendant : à = &agrav; tandis que "&" s'écrit &
Vous remarquez que tous commencent par "&" et se termine par un ";" avec entre les deux, une combinaison de lettres.
<< Cours précédent Sommaire des cours XHTML Suite >>