Sur cette page :

  1. Quelques balises utiles
    1. L’élément <base />
    2. Les scripts javascript
    3. Les objets
    4. Styles internes <style>
    5. Conclusion

11.1# L’élément <base />

Si vos pages sont organisées dans plusieurs dossiers et sous-dossiers, vos liens risquent de vous poser quelques soucis. Par exemple, vous devrez systématiquement ajouter ../ pour indiquer que la page liée se trouve dans le répertoire parent. À partir de quelques pages, la gestion des liens devient particulièrement fastidieuse.

L’élément <base /> permet de préciser l’adresse de référence de tous les liens de la page. Ainsi, en ajoutant (dans la balise <head> uniquement) cet élément :

  1. <base href="http://www.mondomaine.com/" />

le navigateur considérera que tous les liens sont indiqués relativement à cette adresse.

Prenons un exemple pour être plus clair. Vous travaillez sur la page htttp://www.mondomaine.com/articles/economie/article-10.html, et vous souhaitez faire un lien vers la page http://www.mondomaine.com/index.html (votre page d’accueil). Plusieurs solutions s’offrent à vous :

  1. <a href="http://www.mondomaine.com/index.html">Accueil</a>
  2. <a href="../../index.html">Accueil</a>

La première solution est peut-être la plus simple : indiquer une adresse absolue évite les risques de confusion. Mais si votre site est référencé sur plusieurs noms de domaines, comment les gérerez vous ? Alors nous nous orientons vers la deuxième solution : donner une adresse relative à la page : mais le problème reste sensiblement le même, en changeant l’organisation de vos pages, vous devrez éditer tous les liens de chaque page ayant été déplacée.

En utilisant la balise <base href="http://www.mondomaine.com" />, un lien <a href="index.html">Accueil</a> suffira, le navigateur comprendra en effet que index.html est une adresse définitivement à la racine de votre site.

11.2# Les scripts Javascript

Les scripts permettent d’effectuer des modifications dynamiques de la page, gérées par le navigateur. Pour ajouter un script à votre page, vous utiliserez l’élément <script></script>.

  1. <script type="text/javascript">
  2. document.alert("Hello World");

L’attribut type="text/javascript" est obligatoire.

L’inclusion de code Javascript dans la page peut causer des erreurs de validation si des caractères comme “<” ou “>” sont utilisés, pour contourner ce problème, il existe plusieurs méthodes :

  1. <script type="text/javascript">
  2. <!--
  3. document.alert("Hello World");
  4. //-->

Ici, nous utilisons le système des commentaires XML <!-- --> pour éviter des erreurs dans le code HTML. Cependant, pour éviter les erreurs avec Javascript, nous commentons également la dernière ligne à l’aide du mécanisme des commentaires de Javascript //. Cette méthode est malheureusement le bricolage le plus efficace.

La méthode la plus propre consiste à utiliser le mécanisme CDATA :

  1. <script type="text/javascript">
  2. <![CDATA[
  3. document.alert("Hello World");
  4. ]]>

Mais les vieux navigateurs ne comprennent pas toujours ce mécanisme, vous devrez alors à nouveau les commenter en Javascript…

  1. <script type="text/javascript">
  2. // <![CDATA[
  3. document.alert("Hello World");
  4. // ]]>

Cette dernière solution est techniquement la plus correcte, mais quoi qu’il en soit, nous sommes toujours obligés de bricoler.

Vous pouvez également inclure un fichier Javascript externe, qui est de loin la solution la plus propre :

  1. <script type="text/javascript" src="./javascript/hello-world.js"> </script>

Vous utiliserez toujours une balise double, même si dans ce cas l’élément script n’a pas de contenu, sinon certains navigateurs n’arriveront pas à l’interpréter correctement.

L’inconvénient majeur de l’inclusion est le coût en temps de chargement : le navigateur devra effectuer une requête de plus. En contrepartie, le mécanisme du cache permettra d’avoir besoin d’une seule requête pour ce fichier pendant toute la visite.

Certains utilisateurs désactivent Javascript. Dans ce cas, utilisez la balise <noscript> pour afficher du contenu affiché par le navigateur si Javascript n’est pas disponible. Soyez vigilant : cet élément ne peut pas contenir de contenu direct, il doit obligatoirement contenir pour enfant un élément bloc.

11.3# Les objets

La balise <object> doit normalement servir à insérer du contenu spécial dans la page : une animation flash, un applet Java, une vidéo… Bien que celle-ci soit normalisée, aucun navigateur ne l’utilise correctement.

Étant donné la complexité du problème que pose cette balise (chaque navigateur se comporte différemment selon le type de fichier à afficher), je ne vais parler que sommairement de son fonctionnement et vous laisser découvrir les bricolages à effectuer pour s’en sortir à peu près correctement.

Théoriquement, l’insertion d’un élément dynamique doit se faire en utilisant ces attributs :

  • data contient l’adresse du fichier à insérer
  • type contient le type mime du fichier
  • width contient la largeur de l’objet (en pixels)
  • height contient sa hauteur (en pixels également)

Le contenu de l’élément sera du contenu alternatif affiché si l’élément ne peut pas être affiché. <object> peut également contenir des éléments <param /> possédant deux attributs name et value qui permettent de transmettre des paramètres au lecteur chargé de manipuler l’objet.

11.4# Styles internes <style>

Enfin, avant d’attaquer les CSS, nous pouvons finir avec la balise <style></style> qui permet d’inclure directement des règles CSS dans la page. Cet élément est généralement placé dans l’en-tête <head> :

  1. <style type="text/css">
  2. body { background: #FFFFFF; }

11.5# Conclusion

Voilà, vous avez découvert au long de ces chapitres les bases du langage XHTML. Je vous conseille de vous entrainer avant de passer aux CSS. Pour vérifier que votre page est bien formée, utilisez l’outil de validation que propose le W3C.