fbpx
April 2, 2020
html marquee

Tutorial 23# Learn How To Use HTML Marquee The Easy Way

In this tutorial we will be learning How to Use HTML marquee the easy way. In our previous tutorial we learnt about how to Embed Multimedia in HTML web documents. If you haven’t gone through the tutorial you are really missing a lot fun. you can check it out using the link below.

Read previous Tutorial on: Tutorial #22 Learn How To Embed HTML Multimedia In Web Documents

What is HTML Marquee?

HTML marque are moving text or sliding piece of text that moves either horizontally or vertically on the website.

The HTML marquee and marquee tag is not valid or really supported in HTML5 but you can have the same text scrolling effect using css or javascript.

The syntax for the HTML marquee is shown below.

<marquee additional styling attributes........>
   text of image 
</marquee>

note: Please note that to understand html, css and javascript courses easily, you should be able to recall and understand the necessary syntax needed to execute a particular function.

List of attributes that work with HTML marquee

S/N attribute Description
i Width This determines the marquee width
ii Height This determines the marquee Height
iii behavior This determines the scrolling behavior of the marquee
iv Direction This determines the marquee direction e.g. up, down, left
v loop Used to determine the looping behavior of the marquee e.g. infinite looping
vi hspace This specify the horizontal space between the marquee
vii Bgcolor The is used to determine the background color of the marquee
viii vspace This specify the vertical space between the marquee
ix scrollamount This is used to specify the marquee text speed
x scrolldelay This is used to add delay in the marque scrolling

Examples on the use of HTML marquee

1# basic marquee example

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of marquee</title>
   </head>
	
   <body>
      <marquee>
         illustration of marquee movement 
      </marquee>


   </body>

</html>

Result

illustration of marquee illustration of marquee movement

Example two

Adding background color to marquee

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of marquee background color</title>
   </head>
	
   <body>
      <marquee    bgcolor='grey'      >
         illustration of marquee movement in grey background
      </marquee  >


   </body>

</html>

Result

illustration of marquee illustration of marquee movement in grey background

example three

Adding width to marquee (30% width)

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of marquee with 30% width</title>
   </head>
	
   <body>
      <marquee    width='30%'      >
         illustration of marquee with 30% width
      </marquee  >


   </body>

</html>

Result

illustration of marquee with 30% width illustration of marquee with 30% width

look at the above example to observe the start of the marquee is no longer from the edge

Example three

marquee with direction right

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of marquee with direction right</title>
   </head>
	
   <body>
      <marquee    direction="right"      >
        illustration of marquee with direction right
      </marquee  >


   </body>

</html>

Result

illustration of marquee with direction right illustration of marquee with direction right

Example 4

Marquee with direction down

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of marquee with direction down</title>
   </head>
	
   <body>
      <marquee    direction="down"      >
        illustration of marquee with direction down
      </marquee  >


   </body>

</html>

Result

illustration of marquee with direction down illustration of marquee with direction down

Conclusion

Now you understand the basics of HTML Marquee and you are really doing great. Lets move on to the next tutorial on HTML HEADER

Leave a Reply

Your email address will not be published. Required fields are marked *