Comment créer un bandeau défilant pour votre site web

Également appelés « marquees », les bandeaux défilants (tickers) traversent la largeur de l'écran pour afficher des messages conçus pour être lus et compris en un coup d'œil. Couramment utilisés à la télévision pour diffuser les titres de l'actualité ou les données boursières, ils apparaissent parfois sur le Web. Avec quelques lignes de code HTML et CSS, vous pouvez rapidement ajouter ce type de contenu à votre site.

Étape 1

Ouvrez votre page web et affichez son code HTML. Si vous utilisez un éditeur visuel comme Adobe Dreamweaver, ouvrez la page et cliquez sur la zone où vous souhaitez insérer le bandeau. Passez en mode « Code » pour voir le code HTML qui contrôle l'apparence de la page. Si vous utilisez un éditeur de texte, ouvrez votre page et descendez jusqu'à l'endroit où vous voulez ajouter le bandeau.

Étape 2

Appuyez sur la touche « Entrée » pour insérer une ligne vide.

Étape 3

Copiez et collez le code suivant sur la ligne vide :

<marquee style="background-color:#eee;border:1px solid #ccc">
  <p>Votre texte défilant ici</p>
</marquee>

Ce code définit un élément <marquee> qui fait défiler le contenu de droite vers gauche par défaut. Le paragraphe entre les balises d'ouverture et de fermeture est le contenu affiché.

Étape 4

Adaptez les paramètres du code à vos besoins de design. La balise d'ouverture <marquee> utilise des règles de style CSS pour définir une couleur de fond gris clair et une bordure de 1 pixel gris plus foncé. Toutes ces valeurs sont modifiables. Remplacez également le texte placeholder entre les balises <p> par votre propre texte ou vos images.

Étape 5

Enregistrez votre page et ouvrez-la dans un navigateur web. Le bandeau apparaît à l'emplacement choisi à l'étape 1.