HTML - SPLessons

HTML Marquee

Chapter 26

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Marquee

HTML Marquee

shape Introduction

This chapter demonstrates about the HTML Marquee which are used to display the scrolling part of the text in several directions, following are the concepts covered in this chapter.

  • Marquee

Marquee

shape Description

HTML Marquee is used to display the scrolling part of the text which can be scrolled in any of the direction depending upon the users requirements. The snippet code below demonstrates the simple syntax of the Marquee tag.

<marquee attribute-name="attribute-value" ... more attributes>
One or more lines for text or images.
</marquee>

Following are the some of the marquee tag attributes.

Attributes Description
width width defines the wide of the Marquee.
height height defines the height of the Marquee.
direction direction defines in which direction Marquee should scroll.
behavior behavior defines the type of scrolling.
scrollamount scroll amount defines how far the text scroll.
scrolldelay scroll delay defines the delay between each jump.
loop loop defines the time pf a loop which will be continued.
bgcolor bgcolor defines the background color of the text.
vspace vspace defines the vertical space around Marquee.
hapace hspace defines horizontal space around the Marquee.


shape Examples

The examples below demonstrates using the Marquee with different type of attributes. The code below demonstrates scrolling the text by using Marquee.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML marquee</title>
	</head>
	<body>
		<marquee>Simple Programming Tutorials.</marquee>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

The code below demonstrates the scroll text from right side by using direction attribute.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML marquee</title>
	</head>
	<body>
		<marquee direction="right">Simple Programming Lessons</marquee>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

The code below demonstrates scrolling the text from up by using the behavior and direction attributes is as shown.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML marquee</title>
	</head>
	<body>
		<marquee  behavior="scroll" direction="up">Simple Programming Lessons</marquee>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

The code below demonstrates scrolling the text along with the image is as shown below.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML marquee</title>
	</head>
	<body>
		<MARQUEE> Hi There! <IMG SRC="splessons.jpg" HEIGHT=33 WIDTH=82 ALT="splessons"> </MARQUEE>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

The code below demonstrates the text bouncing by using the behavior attribute.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML marquee</title>
	</head>
	<body>
		<marquee behavior="alternate">Simple Programming Lessons</marquee>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

The code below demonstrates giving the background to the text.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML marquee</title>
	</head>
	<body>
		<font color="WHITE"><marquee direction="left" style="background:RED">SPLessons</marquee></font>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape Key Points

  • Height should be given in value like 10 or 20%.
  • Direction values should be given in up, down, left or right.