Accueil > Technicité > Faire défiler un texte en HTML

Faire défiler un texte en HTML

samedi 5 mars 2011, par Anne-Renée Castex impression

Mots-clefs :: HTML :: Tutoriels ::

Insérer un texte défilant dans une page Web, que ce soit sur un site internet, un blog, ou une annonce eBay, peut vous permettre d’attirer l’attention de vos visiteurs, à condition bien sûr de ne pas en abuser. Voici la marche à suivre.


[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


© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common (diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).

carre_trans Avec les mêmes mots-clefs
puce Recherche avancée sur Google
puce Vie privée : sécurisez votre navigation internet
puce Sécurisez vos échanges sous Android : chatter protégé
puce Sécurisez vos échanges : chatter protégé
puce Vie privée : sécurisez vos recherches internet
puce Gérer ses adresses e-mail d’envoi sous Gmail.com
puce Recherche avancée ou de l’usage des booléens
puce Test du lecteur multimedia
puce HTML, la mise en forme du texte
puce HTML, organiser le contenu de votre page : les balises de hiérarchisation
puce HTML, organiser le contenu de votre page : notions de base
puce La structure générale d’une page (X)HTML
puce Optimiser son contenu pour le référencement
puce HTML 5 un premier brouillon publié.
puce Android et vie privée : Applications, permissions et localisation
puce Du vélo sous la pluie ou de l’art d’affronter les éléments
puce Microsoft étudiant : état des lieux des offres éducation 2013
puce 5 applications pour améliorer l’ergonomie de votre mobile Android.
puce Utiliser Python 101 : prise en main
puce Android : 5 applications pour améliorer votre productivité mobile.
puce Android : supprimer les sons de l’appareil photo du Galaxy Note 2.
Equipe Eclairement L'association
La lettre S'abonner
Facebook Twitter
Musique   arts visuels   Tutoriels pour débutant   Windows 7   Peinture   Europe   Installation   Bases de données   Métier   Anime   Société   Culture générale   Théâtre   Linux   Cours   HTML   Edito   Manga   Urbanisme   Histoire   Vie privée   Windows Mobile   Windows Vista   BD   Android   Photographie   Fable   Windows   Education   Microsoft Office   Poésie   Techniques   Cinéma   sport   Firefox   Recherche d’information bibliographique   Tutoriels   Droit   Pages Ouvertes   Roman   Séries TV   Spectacle   Littérature  
Eclairement © 1998 - 2012
Mentions légales - Contact - Partenaires