Aller au contenu

Hypertext Markup Language/Éléments de présentation

Leçons de niveau 14
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
Éléments de présentation
Icône de la faculté
Chapitre no 6
Leçon : Hypertext Markup Language
Chap. préc. :Listes
Chap. suiv. :Images
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Éléments de présentation
Hypertext Markup Language/Éléments de présentation
 », n'a pu être restituée correctement ci-dessus.

L'attractivité d’un site dépend en grande partie de son ambiance visuelle. Nous allons voir comment mettre un fond d'écran sur votre site et comment inclure des séparateurs horizontaux.

Les fonds d'écran

[modifier | modifier le wikicode]

Couleur de fond

[modifier | modifier le wikicode]

L'ajout d’une couleur de fond se fait par l'intermédiaire de l'attribut bgcolor de la balise <body>. La valeur de l'attribut bgcolor est une couleur. Pour plus d'information, sur les couleurs, consultez la table des couleurs.

En fonction de la couleur que vous choisissez, le texte risque de devenir illisible. Pour corriger ce problème, il existe l'attribut text de la balise <body> qui modifie la couleur du texte de la page. La valeur de l'attribut text est une couleur.

Prenons un exemple :

<html>
<head>
<title>Couleur de fond</title>
</head>
<body bgcolor="blue" text="white">
  Voilà une page écrite en blanc sur fond bleu
</body>
</html>

Cet exemple permet d'afficher une page ayant un fond de couleur bleu et le texte « Voilà une page écrite en blanc sur fond bleu » écrit en blanc.

Une image en fond d'écran

[modifier | modifier le wikicode]

Il est aussi possible d'ajouter une image en fond. Pour cela, on utilise l'attribut background de la balise <body>. La valeur de l'attribut background doit être une adresse qui peut être absolue ou relative[1].

Il est recommandé d’éviter les images trop lourdes qui augmentent le temps de chargement de la page. Cependant, une fois que l’image est chargée, elle passe dans la cache du navigateur et ne nécessitera plus de temps de chargement pour la session en cours.

Prenons un exemple :

<html>
<head>
<title>Image de fond</title>
</head>
<body background="images/fond.jpg" text="yellow">
 Voilà une page avec une image de fond
</body>
</html>

Les séparateurs horizontaux

[modifier | modifier le wikicode]

Le HTML intègre un élément intéressant de mise en page, la ligne horizontale. La ligne horizontale est introduite par la balise <hr> (hr signifie horizontal rule soit règle horizontale). Il n'y a pas de balise fermante associée.

Prenons un exemple :

 texte texte texte
<hr>
 texte texte texte

Cet exemple permet d'insérer une ligne horizontale entre les deux lignes de texte.

La balise <hr> dispose de nombreux attributs.

L'attribut size permet de définir l'épaisseur de la barre. La valeur de l'attribut size doit être une valeur numérique exprimée en pixels.

L'attribut width permet de définir la largeur de la barre. La valeur de l'attribut width est soit une valeur numérique exprimée en pixels soit une valeur numérique suivie du symbole % et alors la valeur correspond à la largeur de la barre en pourcentage de la fenêtre. On préférera cette deuxième méthode car la largeur de la barre s'adapte ainsi à la taille et à la résolution de l'écran de l'utilisateur.

L'attribut align permet de définir l'alignement de la barre. Les valeurs possibles sont left, center et right.

L'attribut noshade permet d'appliquer ou non un ombrage à la barre.

  1. Pour plus d'informations, voir Liens hypertextes