Level no.11
Lecture no. 11
Marquee Tag in HTML
You can use marquee tag in html to make image or text scroll from left, right, top and bottom in html.
Marquee tag have attributes behavior is used to set the behavior of scrolling, description, scroll amount is used to specify speed of scrolling image/text and bgcolor attribute to change background color. Height attribute is used to specify height in marquee tag. We can use style tag as an attribute in marquee tag to change color of text.The marquee tag is set as left to right from default, but we can change the movement in description attribute.
Let's learn how to used them.
Syntax
For text (left/right) in description:
<marquee behavior="" description="left/right"> Hello Coding </marquee>
For image (left/right) in description:
<marquee behavior="" description="left/right">link of image </marquee>
For text (top/bottom) in description:
For top and bottom we use up and down keyword in html.
<marquee behavior="" description="up/down"> Hello World </marquee>
For image (top/bottom) in description:
<marquee behavior="" description="up/down">link of video </marquee>
For Background Color Attribute:
<marquee behavior="" description="left/right, top/bottom" bgcolor="red">Pakistan</marquee>
Height Attribute:
<marquee behavior="" description="left/right, top/bottom" height="90px">Pakistan</marquee>
Width Attribute:
For changing width in marquee tag we will assign number with % sign.
<marquee behavior="" description="left/right, top/bottom" widtht="40%">Pakistan</marquee>
Horizontal Space Attribute:
This attribute is used for changing position to horizontal in html using marquee attribute. The word hspace is used for horizontal space.
<marquee behavior="" description="left/right, top/bottom" hspace="50px">Pakistan</marquee>
Vertical Space Attribute:
This attribute is used for changing position to vertical in html using marquee attribute. The word vspace is used for horizontal space.
<marquee behavior="" description="left/right, top/bottom" vspace="60px">Pakistan</marquee>
Behavior Attribute:
<marquee behavior="alternate/scroll/slide" description="left/right, top/bottom" >Pakistan</marquee>
alternate: appear after scrolling.
scroll: after completing loop this will not appear.
slide: after completing loop this will stop at screen.
Code
For text:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<p>
<marquee behavior=" " description=""> link of image </marquee>
</p>
</body>
</html>
In this code I have not assign description. So the image is move from left to right because it's behavior is left as by default, but if we want to move it from right, top and bottom we will assign this in description attribute.
For image/video:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<p>
<marquee behavior=" " description=" right"> link of image/video </marquee>
</p>
</body>
</html>
Table tag in html
It is used for defining table in html.It consists of one <table></table> tag and one or more <tr></tr> and <td></td> tag.
The <tr></tr> tag is for table table row and <td></td> is for table cell. In head tag we use tag style attribute as tag to set border and background color of the table.
Syntax
<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Code:
<! DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
td{
border: 2px solid black;
}
}
table{
border-collapse: collapse;
}
</style>
<table>
<tr>
<td> Apple </td>
<td> Apricot </td>
<td> Avocado </td>
</tr>
<tr>
<td> Banana </td>
<td> Berries </td>
<td> Black Rasin </td>
</tr>
</table>
Output
| Apple | Apricot | Avocado |
| Banana | Berries | Black Raisin |
Comments
Post a Comment