HTML from Scratch: Scrolling Text in HTML. Lesson #9 Overcod.net

HTML from Scratch: Scrolling Text in HTML. Lesson #9

Hello everyone! Let’s continue learning the basics of HTML. In this lesson, I will explain how to create a scrolling text (marquee) in an HTML document. This is a basic type of animation on a website without using graphic editors.

A scrolling text can be used to display news, promotions, advertisements, and even decorative design elements (such as moving clouds in the website header). You will find your own uses for this effect, and my task is to show you how to implement it in practice.

Tag for Creating Scrolling Text

To create scrolling text, use the following tag:

<marquee></marquee>

Example Code:

<html>
<head>
    <title>Scrolling Text</title>
</head>
<body>
    <marquee>This is scrolling text</marquee>
</body>
</html>

Configuring Attributes

Background Color

To change the background color of the scrolling text, add the bgcolor attribute:

<marquee bgcolor="#ccc">Scrolling Text</marquee>

Height and Width

To set the dimensions, use the width and height attributes:

<marquee bgcolor="#ccc" width="200px" height="40px">Scrolling Text</marquee>

Scroll Behavior

The behavior attribute defines how the text moves:

scroll — normal scrolling (default);
slide — stops when reaching the other edge;
alternate — moves back and forth between edges.

Example:

<marquee behavior="scroll">Normal scrolling</marquee>
<marquee behavior="slide">Scrolling text stops at the other edge</marquee>
<marquee behavior="alternate">Moves back and forth</marquee>

Scroll Direction

The direction attribute specifies the movement direction:

left — moves left (default);
right — moves right;
up — moves up;
down — moves down.

Example:

<marquee direction="right">Moving right</marquee>
<marquee direction="up" height="50px">Moving up</marquee>
<marquee direction="down" height="50px">Moving down</marquee>

Scrolling Speed

The scrollamount attribute determines the speed:

<marquee scrollamount="10">Fast scrolling</marquee>

The higher the value, the faster the movement.

Delay Between Steps

The scrolldelay attribute sets the pause between movements. A higher value slows down the scrolling:

<marquee scrolldelay="500">Slow scrolling</marquee>

Number of Loops

The loop attribute sets the number of animation cycles:

<marquee loop="3">Text will scroll three times</marquee>

Margins

The hspace attribute adds horizontal margins:

<marquee hspace="50">Scrolling text with margins</marquee>

Adding an Image

You can insert an image using the <img> tag:

<marquee direction="right"><img src="image.gif"></marquee>

Adding a Link

You can add a link inside the scrolling text:

<marquee>Visit our website <a href="https://www.overcod.net/">Overcod.net</a></marquee>

Full Example with a Link:

<html>
<head>
    <title>Scrolling Text</title>
</head>
<body>
    <marquee bgcolor="#ccc" behavior="alternate" direction="right" scrollamount="5" loop="2" hspace="10">
        Scrolling text on the blog <a href="https://www.overcod.net/">Overcod.net</a>
    </marquee>
</body>
</html>

That’s all for today! See you in the next lesson. Good luck!