m02 un03 p03

Post on 20-Jan-2015

347 Views

Category:

Technology

2 Downloads

Preview:

Click to see full reader

DESCRIPTION

 

TRANSCRIPT

Web Programming

Unit 3 – Basic Tags in HTML

Presentation 3

Objectives

At the end of this presentation, you will be able to• Add special characters to your Web page• Attract the users by adding colours and

background pictures to your Web page

Character Entities

• To represent the characters, such as < and >, the Entity references are used.

•The Entity references have 3 parts. They are:

•The leading ampersand (&) symbol,•An entity name and•The Semicolon (;)

•For example, to display <HTML> in a Web page the code is &lt;HTML&gt;

Character Entities

• Entity References

Lab Exercise

14. Open D3_5.html in Internet Explorer.

a. Identify the entity reference which is used for Copyright symbol?

b. Identify the entity reference for Plus or Minus symbol.

c. Find out the entity reference for Trade Mark symbol.

d. What entity reference is used for Register symbol?

e. Identify the symbol for Ampersand.

Lab Exercise

15. Write a HTML code to display the output as given in the following figure using character entities.

Activity 2.3.1

• Create a Web page that explains the heading tags as shown in Figure.

• Save the HTML file as Activity1.HTML in C:\HTML\Unit 3\Activity folder.

Activity 2.3.2

• Create a Web page that explains the use of <BR> tag and <P> tag as shown in Figure.

• Save the HTML file as Activity2.HTML in C:\HTML\Unit 3\Activity folder.

Colour Values and Name

• BGCOLOR attribute of the <BODY> tag specifies the background colour of the page.

• The Colour can be specified in the form Colour values or Colour names.

RED FF0000

GREEN 00FF00

BLUE 0000FF

YELLOW FFFF00

CYAN 00FFFF

MAGENTA FF00FF

BLACK 000000

WHITE FFFFFF

GRAY 808080

Colour Values and Name

• Background attribute of the <BODY> tag specifies the background picture of the page.

• Example:<BODY BACKGROUND=”c:\Internet.jpg”>

Lab Exercise

16. Open D3_6.html in Internet Explorer. a. View the source code in notepad.b. Identify the tag which is used to change

the background and text colour of the above Web page?

c. Change the background colour to pink and text colour to black.

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

Lab Exercise

17.Open Welcome.html, add background attribute into the <BODY> tag and display the output as given in the following figure. Save the file and view the output in the browser.

Lab Exercise

18. Write a HTML code to display the output as given in the following figure using <H1>,<BODY> <HR> and <MARQUEE> and save the file as Malaysia.html and view the output in the browser.

Activity 2.3.3

• Create a Web page that explains the use of comment and <HR> tag as shown in Figure. Add comments in your HTML file.

• Save the HTML file as Activity3.HTML in C:\HTML\Unit 3\Activity folder.

Activity 2.3.3 Contd.

Activity 2.3.4

• Create a Web page with the content given below. The conditions you have to follow while creating the Web page is given within brackets.

• Save the HTML file as Activity4.HTML in C:\HTML\Unit 3\Activity folder.

Activity 2.3.5

• Create a Web page that explains the structure of HTML document as shown in Figure. The continuation of the page is shown in Figure.

• Save the HTML file as Activity5.HTML in C:\HTML\Unit 3\Activity folder.

Summary

In this presentation, you learnt the following:• Entity references are the symbolic

representation of the characters.• Bgcolor attribute of <BODY> tag specifies

the background color of the page.• Background attribute of <BODY> tag

specifies the background picture of the page.

Assignment

I. Solve the following crossword:

Assignment

• Across

6. Attribute of <MARQUEE> tag to scroll the text to and fro in the scrolling area.

8. To draw a horizontal line.

9. Attribute to specify the number of times

to scroll.

10. Character entity name to display the ¥

symbol.

Assignment

• Down

1. To scroll across the browser window.

2. Name of character entity to leave space.

3. Use of <P> tag.

4. Attribute of <MARQUEE> tag to

specify the direction of scrolling.

5. Character entity reference ends with

this.

7. To print in the next line.

top related