Faire défiler un texte en HTML

[sommaire]

La Balise

 Rappel : c’est cette indication codée, écrite entre < > qui vous permettra de mettre en forme votre texte, de lui faire adopter tel ou tel comportement. Pour des explications plus détaillées, voir l’introduction de l’article sur La structure générale d’une page (X)HTML.

Ici, il s’agit de faire défiler le texte situé entre la balise ouvrante <marquee> et la balise fermante </marquee>. Par défaut, si vous ne renseignez aucun attribut, le texte défile de droite à gauche, disparaissant une fois arrivé en bout de ligne pour réapparaître de l’autre côté.

Code

<marquee>Le texte à faire défiler</marquee>

Résultat

Le texte à faire défiler

Les attributs

**Définition

Un attribut est une instruction contenue à l’intérieur d’une balise et dont le but est de fournir une information supplémentaire sur la manière dont cette balise doit être interprétée.
[...]
À chaque balise correspond un jeu d’attributs ; certains attributs peuvent être utilisés par différentes balises. (Source : "Attribut", sur le Dico du Net).

Concernant la balise <marquee>, il est possible de paramétrer de nombreux éléments, qui modifient la manière dont le texte défile.

**Type de défilement

Il est commandé par l’attribut behavior.

• Défilement  : "scroll"

C’est le mode par défaut, dans lequel le texte défile de droite à gauche.

<marquee behavior="scroll">Le texte défile</marquee>

Le texte défile

• Défilement alterné : "alternate"

Le texte va et vient à droite et à gauche.

<marquee behavior="alternate">Le texte va et vient </marquee>

Le texte va et vient

• Glissement : "slide"

Le texte glisse de droite à gauche et s’arrête une fois arrivé en bout de ligne.

<marquee behavior="slide">Le texte glisse</marquee>

Le texte glisse

**Sens de défilement

L’attribut direction définit dans quel sens le texte défile.

• Vers la droite : "right"

<marquee direction="right">Le texte défile vers la droite </marquee>

Le texte défile vers la droite

• Vers la gauche : "left"

<marquee direction="left">Le texte défile vers la gauche</marquee>

Le texte défile vers la gauche

• Vers le haut : "up"

<marquee direction="up">Le texte défile vers le haut</marquee>

Le texte défile vers le haut

• Vers le bas : "down"

<marquee direction="down">Le texte défile vers le bas</marquee>

Le texte défile vers le bas

**Vitesse de défilement

L’attribut scrollamount définit la vitesse de déplacement du texte, exprimée en pixels. Plus le nombre de pixels est élevé, plus la vitesse est rapide.

• Très lente

<marquee scrollamount="1">Le texte se déplace très lentement>

Le texte se déplace très lentement

• Moyenne

<marquee scrollamount="5">Le texte se déplace un peu plus rapidement</marquee>

Le texte se déplace un peu plus rapidement

• Rapide

<marquee scrollamount="10">Le texte se déplace rapidement</marquee>

Le texte se déplace rapidement

• Très rapide

<marquee scrollamount="20">Le texte se déplace très rapidement</marquee>

Le texte se déplace très rapidement

**Zone de défilement

Il est possible de définir sa taille (hauteur, largeur) ainsi que sa couleur.

• Hauteur : height

Plus le chiffre, exprimé en pixels, est élevé, plus la hauteur est importante.

<marquee direction="up" height="20">Zone de défilement basse></marquee>

Zone de défilement basse

<marquee direction="up" height="100">Zone de défilement haute></marquee>

Zone de défilement haute

• Largeur : width

<marquee width="50">Zone de défilement étroite</marquee>

Zone de défilement étroite

<marquee width="400">Zone de défilement plus large</marquee>

Zone de défilement plus large

• Couleur  : bgcolor

Il est possible d’utiliser le nom des couleurs en anglais ou leur code hexadécimal : pour la correspondance entre les deux, voir notre tableau sur les codes couleurs HTML.

<marquee bgcolor="orange">Zone de défilement orange</marquee>

Zone de défilement orange

Comme pour tout type de texte, il est aussi possible de paramétrer la police de caractères, la couleur, la taille, la mise en page, etc. : sur ces aspects, voir notre article sur la mise en forme du texte en HTML.

À noter également que la balise <marquee> fonctionne avec les images.

Poursuivre votre lecture :

 La structure générale d’une page (X)HTML

 HTML, organiser le contenu de votre page : notions de base

 HTML, organiser le contenu de votre page : les balises de hiérarchisation