Unit 3 – Basic Tags in HTML

Presentation 2

Web Programming

Objectives

At the end of this presentation, you will be able to• Decorate your page by inserting horizontal

lines• Scroll text across the Web page

Horizontal Rule

• <HR> tag is used to draw horizontal line.• Attributes of <HR> tag:

Size - Specifies the thickness of the line.Width - Specifies the width of the line.Align - Specifies the alignment of the line.Noshade- Removes the shade from

the line.• Example: <HR Size=”5” Width=”40%” Noshade Align=”Left”>

Hands On!

• Open the HTML file Hor_Rule.HTML in C:\HTML\Unit3\Hands On Folder

• This HTML document describes the use of different attributes of <HR> tag.

• The output is shown below:

Lab Exercise

8. Open D3_3.html in Internet Explorer.

a. View the source code in Notepad.

b. Which tag is used for draw a horizontal line in the Web page?

c. What are the attributes are used in the horizontal line?

Lab Exercise

9. Open D3_3.html in Internet Explorer. a. View the source code in Notepad.

b. Change the alignment of the last horizontal line to left.

c. Reduce the size of the second horizontal line size to 5.

d. Save the file and view the output in the browser.

Hands-On!

• Open the HTML file Scroll.HTML in C:\HTML\Unit3\ Hands On Folder

Scrolling Text

• <MARQUEE> tag makes the text move across the browser.

• Text is placed between <MARQUEE> and </MARQUEE> tags.

• Attributes of <MARQUEE> tag are Height, Width, Bahavior, Bgcolor, Scrolldelay, Scrollamount, Loop, Direction, Vspace and Hspace.

Lab Exercise

10.Open Welcome.html, add <HR> tag into the file and display the output as given in the following figure. Save the file and view the output in the browser.

Lab Exercise

11.Open D3_4.html in Internet Explorer. a. View the source code in notepad.b. Identify the tag which is used for scrolling

text?c. Find out the attribute that is used in

<MARQUEE> tag.

Lab Exercise

12. Open D3_4.html in Internet Explorer.

a. View the source code in Notepad.

b. Change the marquee background colour

to green.

c. Change the direction of the scroll from

right to left.

d. Save the file and view the output in the browser.

Lab Exercise

13. Open Welcome.html, add <MARQUEE> tag into the file and display the output as given in the following figure. Save the file and view the output in the browser.

Summary

In this presentation, you learnt the following:• <HR> tag is used to draw horizontal lines.• <MARQUEE> tag makes the text move

across the browser window.

Assignment

1. Name the tag used to scroll a text.

2. List the attributes of the <MARQUEE> tag.