Unit 2.3

Programming and Development Tools Web Programming

2.3UNIT

Web Programming Basic Tags in HTML

OBJECTIVES

B

B

This unit helps you to experiment the various tags and attributes to create attractive Web pages. At the end of this unit, you will be able to

Add headings to your Web page. Align text as paragraphs in Web pages. Add blank lines to your Web page. Make your HTML code readable by adding comments. Decorate your page by inserting horizontal lines. Scroll text across the Web page. Add special characters to your Web page. Add colours and background pictures to enrich your Web page.

enchmark Standard Use the basic tags and their attributes to create professional-

looking Web pages.

asic Tags in HTML 2.3-1


Let us Revise!

1. Give the expansion of HTML. 2. List the steps to create and execute a HTML document. 3. Write the structure of HTML document. 4. Define the term Tag.

Introduction You know that the source of a Web page is a HTML document. Reading this unit, you will realize that the code behind an attractive Web page is a simple HTML code. HTML uses tags, which are nothing but codes that specifies how a Web page should appear. There are various tags that are used to display the text, images, lists, buttons and links on the Web pages. In this unit, you will learn some of the basic tags of HTML.

2.3.1 Headings You might have seen different headings in online newspapers and magazines. Almost all topics in a newspaper begin with a heading. Figure 2.3.1 shows a Web page with different headings.

Basic Tags in HTML 2.3-2


Figure 2.3.1: A Web Page using Heading Tags

In HTML, you can create headings of different sizes using heading tag.

The following example describes how to add headings in your Web page. Open the HTML file Heading.HTML in Hands On Folder. <HTML>

<HEAD>

<TITLE>

Headings

</TITLE>

</HEAD>

<BODY>

<H1 Align="Center"> The Puzzles </H1>

Hands-On!

Heading tag

<H2> Puzzle No. 1 </H2>

55555 = 100. Make the equation true by inserting any mathematical operator in-between the digits on the left of the equal symbol.

Heading tag





Heading tag



Heading tag

</BODY>

</HTML>

Code Sample 2.3.1 Open the above HTML document in Internet Explorer. The output is shown in Figure 2.3.2.

Figure 2.3.2: A Page using Heading Tags

Figure 2.3.2 shows a Web page that displays three puzzles under three sub-headings and a main heading. You are not going to solve the puzzles. Just have a deep look at the headings. The main heading is ‘The Puzzles’ and the sub-headings are Puzzle No. 1, Puzzle No. 2 and Puzzle No. 3. The headings are bold and also of different sizes.



When you view the code, you can identify that the heading The Puzzles, enclosed between <H1> and </H1> tags. The text enclosed within H1 displays a heading of maximum size. The size of the headings produced by <H2>, <H3> and so on decreases respectively. The tags <H1>, <H2>, <H3>, <H4>, <H5> and <H6> are the heading tags. The text that has to be given as the heading is enclosed within the opening and closing heading tags. <H1> tag produces a heading of largest size. <H6> produces a heading of smallest size. In Figure 2.3.2, you can see that all the sub-headings are aligned to the left. You can change the alignment of the heading using ALIGN attribute of heading tag.

Note An attribute is a property that enhances the effect of a tag.

The Align attribute enhances the appearance of the headings in the Web page by aligning the heading. Values for the Align attribute:

• Left • Right • Center

For example, Align=”Left” will align the text to the left in the browser window.

Note The default alignment for heading tag is left. So, the heading will be aligned to the left, if the ALIGN attribute is omitted in the heading tag. In Figure 2.3.2, the heading The Puzzle can be aligned to the left by using the attribute Align as follows. <H1 Align=”Left”> The Puzzle </H1>. Here, H1 is the heading tag and Align is the attribute of the heading tag. The Align attribute takes the value Left to position the text in the left of the browser window.



HTML is not a case-sensitive language. Hence the tags and attributes that you specify in HTML file can be of any case (lowercase or uppercase).

Note

Self-Check Exercise 2.3.1

Identify the tags and attribute values used in each line of the following Web page.

Figure 2.3.3: Six Levels of Heading Tag

Activity 2.3.1

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

2. Save the HTML file as Activity1.HTML in Activity folder.



Figure 2.3.4 : A Web Page that explains the Heading Tag Lab Exercise

Lab Exercise 1: Open D3_1.html in Internet Explorer. The following code will be present in D3_1.html.

<HTML>

<HEAD>

<H1 ALIGN = CENTER> HEADING TAG </H1>

<TITLE>Six Headings</TITLE>

</HEAD>

<BODY>

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>

<H6>Heading 6</H6>

</BODY>

</HTML>



1. View the source code in Notepad. 2. Identify the tag, which is used to display Heading 1 in the source code of D3_1.html 3. Name the attribute used to display the Heading Tag with centre alignment. 4. Underline the tag, which is used to display Heading 4 in the source code of D3_1.html.

Lab Exercise 2: Open D3_1.html in Internet Explorer. View the source code in Notepad. 1. View the source code in Notepad. 2. Edit the style of Heading 1 from <H1> to <H3>. 3. Change the alignment of Heading 2 to centre align. 4. Change the alignment of Heading 3 to right align. 5. Save the source code file and refresh the Web page.

Lab Exercise 3: Write HTML code to display the output as given in the following Figure 2.3.5

using the <HEAD> tag.

Figure 2.3.5: Headings

Lab Exercise 4: Open Welcome.html that you have created under the folder in your name in

C:. Add <HEAD> tag into the file and display the output as given in the following Figure 2.3.6. Save the file and view the output in the browser.



Figure 2.3.6: Welcome to Malaysia

2.3.2 Paragraph You have learned about the different types of Internet connections in the first unit. Create a HTML document with the heading Types of Internet Connection and the types of Internet connections elaborated in different paragraphs below the heading.



Figure 2.3.7: Web Page without using the <P> Tag

Your page will look more or less like the one displayed in Figure 2.3.7. The source code of the above page is as follows: <HTML>

<HEAD>

<TITLE>

Headings

</TITLE>

</HEAD>

<BODY>

<H1 Align="Center"> Types of Internet Connection </H1>

The computer users at home and small companies prefer dial-up access because it is an easy and inexpensive way of connecting to the Internet. But the speed in this type of connection is less than 56 kbps (kilobits per second). In this connection, the MODEM in your computer is connected to the Internet by using a standard telephone line.

In Broadband connection, the MODEM in your computer is connected to the Internet through a cable TV line. The speed in this type of connection is around 1000 kbps which is faster when compared to dial-up connection.

In Digital Subscriber Line (DSL) and Integrated Services Digital Network (ISDN), your computer is connected to the



Internet through the copper telephone line. Here, your computer is connected to the Internet 24 hours a day.

Wireless Internet access technologies are also available that connect Internet with PDAs, notebook computers and smart phones. A wireless connection is established using satellite and cellular radio network.

</BODY>

</HTML>

Code Sample 2.3.2

Though you have written the content in different paragraphs, it appears as continuous text in the browser window. This is because the browser does not consider the line breaks you have given by pressing the Enter key, while typing the content. <P> tag is used for creating paragraphs. Whenever the browser encounters a <P> tag a new paragraph is created from that point. The end of the paragraph is marked by </P>, which is optional.

Even though the closing tag is optional, it is better to add the closing tag to improve the readability.

The Align attribute can be used along with the <P> tag to align the paragraph to the left, right, center or justify. For example, the following segment of HTML document displays the Web page with the paragraph aligned to the right. <P Align=”Right”>

In Broadband connection, the MODEM in your computer is connected to the Internet through a cable TV line. The speed in this type of connection is around 1000 kbps which is faster when compared to dial-up connection.

Best Programming Practise

Paragraph tag

</P>



Lab Exercise

Figure 2.3.8: Web Page created using <P> tag


Write the tag with its attribute that you will insert to align the four paragraphs as given in Figure 2.3.8.

First paragraph should be left aligned. Second paragraph should be right aligned. Third paragraph should be centred. Fourth paragraph should be justified.

Lab Exercise 5: Open D3_2.html in Internet Explorer. The following code will be present in D3_2.html. View the source code in Notepad. <HTML>

<HEAD>

<TITLE>

Paragraph and Blank Return Tags

</TITLE>

</HEAD>

<BODY>

<H1 Align="CENTER"> Paragraph Tag </H1> <BR>



<P>This is paragraph aligned with the default value.

<P Align="right">This is a paragraph aligned to the right

<P Align="left">This is paragraph aligned to the left.

<P Align="center">This is paragraph centered. </P>

Learning HTML gives tremendous joy. <BR>

Because it is easy, gentle and also much helpful.

</BODY>

</HTML>

1. View the source code in Notepad. 2. Identify the tag which is used to create paragraph? 3. Identify and list the different values given for the align attribute in the HTML document.

Lab Exercise 6: Write a HTML code to display the output as given in the following Figure 2.3.9 using <P> tag.

Figure 2.3.9: Paragraph Alignment

Lab Exercise 7: Open Welcome.html that you have created under the folder in your name in

C:. Add <P> tag into the file and display the output as given in the following Figure 2.3.10. Save the file and view the output in the browser.



Figure 2.3.10: Welcome to Malaysia

2.3.3 Line Breaks You know that paragraph tag is used to break content into different paragraphs. But line breaks are used to start a new line within the current paragraph. It can also be used to create blank lines.

The following example describes the use of line breaks in HTML document. Open the HTML file Break1.HTML. <HTML>

<HEAD>

<TITLE> Line Breaks

</TITLE>

<BODY>

Hands-On!

Code without line break

<H1> Conduct </H1>

Who loses conduct loses love

Who loses love loses self-confidence

Who loses self-confidence loses his life.

</BODY>

</HTML>

Code Sample 2.3.3



The output of the above code is shown in Figure 2.3.11.

Figure 2.3.11 : Web ge using <BR> tag In this source cod n three different

Figure 2.3.12 : Web ge using <BR> tag

Pa

e, the content of the <BODY> tag is written ilines. However, it is displayed continuously in the browser window. This is because more than one space given in the source code is treated as one space by the browser. <BR> tag is used to insert the line breaks. If you want a sentence to be printed in the next line, then it should be preceded by <BR> tag. <BR> tag does not have any end tag. The same Web page using <BR> tag is shown in Figure 2.3.12.

Pa



Identify the lines where you will insert the <BR> tag in the code to display the Web page shown in Figure 2.3.12.

2. tivity2.HTML in Activity folder.

1. Create a Web page that explains the use of <BR> tag and <P> tag as

shown in Figure 2.3.13. Save the HTML file as Ac

Figure 2.3.13 : A Web page that explains the <BR> and <P> tags

2.3.am and identify the objective of the program. Correct

4 Comments

Read the following progrthe mistakes, if any. HTML> <

<HEAD><TITLE> Scrolling Text </TITLE></HEAD>

<BODY>

<H1 Align="Center"> Terms related to IT </H1>

<H2> Algorithm </H2>


Activity 2.3.2



<MARQUEE Behavior="Alternate" Height="120"

Width=”820” Bgcolor=”Green”>

The step-by-step instruction involved in solving a

problem is called Algorithm.

</MARQUEE>

<H2> Biometrics </H2>

<MARQUEE Scrolldelay=”1000”>

Biometrics is a technology of identifying the

finger prints, voice and facial patterns for

authentication purpose.

</MARQUEE> Code without comments

<H2> C# </H2>

<MARQUEE Scrollamount="100" Behavio > r=”Slide”

ng lan C# is an object-oriented programmi guage that

has the features of C++, Java and Visual Basic.

</MARQUEE>

<H2> Database </H2>

<MARQUEE Bgcolor="Yellow" Hspace="35" Vspace=”15”>

A database is a collection of information that is

organized so that it can easily be accessed,

managed, and updated.

</MARQUEE>

<H2> Encryption </H2>

<MARQUEE Loop="2">

Encryption is the process of converting data into

a form that cannot be understood by unauthorized

persons. The reverse process of converting

encrypted data back into its original form is

called Decryption.

</MARQUEE>

<H2> File Server </H2>

<MARQUEE Direction="Right">

It is a server computer where the data files are

stored so that the other computers can access

these data in the network.

</MARQUEE>

</BODY>





</HTML>

Can you identify for what purpose it is written? Also, is it easy to identify the ere are some comment statements that explain the code, it would

sed within the  symbols. An example

rizontal Rule he horizontal rule is used to draw horizontal lines in your Web page as

In Figure 2.3.14, the different paragraphs of the page are separated by horizontal lines ere is no end tag for <HR> tag.

errors? If thbe easy to understand the code. So, comments can be added to improve the readability and also to identify the errors in case of lengthy source codes. The comments are ignored by the browser. Hence the comments will appear in the HTML code, but it will not be displayed in the browser. They are added for the benefit of the programmers. The comment should be enclo

r a comment statement is: fo

2.3.5 HoTshown in Figure 2.3.14.

Figure 2.3.14: Web Page with Horizontal Rule

. <HR> tag is used to draw horizontal lines. Th



Attributes of <HR> tag:

Size - Specifies the thickness of the line. ecifies the width of the line.

Align - Specifies the alignment of the line. e

For x hor he browser window, wit o d w g the following code nippet:

Width - Sp

Noshad - Removes the shade from the line.

e ample, a izontal rule of size 5, width 40% of th n shade an ith left alignment can be printed usin

s <HR Size=”5” Width=”40%” Noshade Align=”Left”>.

Hands-On!

TOpen the HTML file

he following example describes the use of different attributes of <HR> tag: Hor_Rule.HTML in Hands On Folder.

Figure 2.3.15: Web Page using attributes of <HR> tag

The HTML source code for the above page is as follows: <HTML>

<HEAD>

<TITLE>

</TITLE>

Horizontal rule

</HEAD>



<BODY>

<H1 Align="Center"> Horizontal Rule with Different Attributes </H1>

<FONT Size="5">

Horizontal rule of size 5

<HR Size="5">

Horizontal rule of size 10 and width 50% of the browser window

<HR Size="10" Width="50%">

Horizontal rule of size 15, width 75%, noshade and aligned left

<HR Size="10" Width="75%" Noshade Align="Left">

Horizontal rule with default values<HR>

</FONT>

</BODY>

</HTML>

Code Sample 2.3.4

Activity 2.3.3

Draws a horizontal line

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




Figure 2.3.16: A Web page that explains the <HR> tag

Lab Exercise

Lab Exercise 8: Open D3_3.html in Internet Explorer. The following code will be present in D3_3.html. View the source code in Notepad.

<HTML>

<HEAD>

<H1 Align="CENTER"> Horizontal Rule</H1>

<TITLE> Horizontal Rule </TITLE>

<BODY>

HR tag is used to draw horizontal lines. Default horizontal line.

<HR>

Horizontal line size and noshade attribute.

<HR Size=10 Noshade>

Horizontal line width and align attribute.

<HR Width =50% Align="CENTER">

</BODY>

</HTML>

1. View the source code in Notepad. 2. Identify the tag which is used for draw a horizontal line in the Web page.



3. Name the attributes are used in the horizontal line.

Lab Exercise 9: Open D3_3.html in Internet Explorer. View the source code in Notepad. 1. View the source code in Notepad. 2. Change the alignment of the last horizontal line to left. 3. Reduce the size of the second horizontal line size to 5. 4. Save the file and view the output in the browser.

2.3.6 Scrolling Text You might have seen the text scrolling across the advertisement hoardings. Similarly, you can see texts scrolling across the browser window after executing the following program.



The following example explains how to scroll a text across a Web page. Open the HTML file Scroll.HTML in Hands On Folder. <HTML> <HEAD> <TITLE> Scrolling Text </TITLE> </HEAD> <BODY> <H1 Align="Center"> Terms related to IT </H1> <H2> Algorithm </H2> <MARQUEE Behavior="Alternate" Height="120"

Width=”820” Bgcolor=”Green”> The step-by-step instruction involved in solving a problem is called Algorithm. </MARQUEE> <H2> Biometrics </H2> <MARQUEE Scrolldelay=”1000”> Biometrics is a technology of identifying the finger prints, voice and facial patterns for authentication purpose. </MARQUEE> <H2> C# </H2> <MARQUEE Scrollamount="100" Behavior=”Slide”> C# is an object-oriented programming language that has the features of C++, Java and Visual Basic. </MARQUEE> <H2> Database </H2> <MARQUEE Bgcolor="Yellow" Hspace="35" Vspace=”15”> A database is a collection of information that is organized so that it can easily be accessed, managed, and updated. </MARQUEE> <H2> Encryption </H2> <MARQUEE Loop="2">

Hands-On!

Scrolls in both the directions

Sets the scrolling speed

Scrolls in both the directions in the scrolling area

Sets the size and background colour of the scrolling area

Scrolls two times

Encryption is the process of converting data into a form that cannot be understood by unauthorized persons.



</MARQUEE> <H2> File Server </H2> <MARQUEE Direction="Right"> It is a server computer where the data files are stored so that the other computers can access these data in the network. </MARQUEE> </BODY> </HTML>

Code Sample 2.3.5

This effect of scrolling can be set to the text in your Web page using the <MARQUEE> tag. The Marquee tag makes the text move across the browser window. The text that has to be scrolled should be placed between <MARQUEE> and </MARQUEE> tags. There are different attributes that enhance the effect of <MARQUEE> tag. The attributes of the <MARQUEE> tag are given in the Table 2.3.1:

Attribute Function Example HEIGHT Specifies the height of

the scrolling area <MARQUEE Height="120">

WIDTH Specifies the width of the scrolling area

<MARQUEE Width="120">

BEHAVIOR Specifies the style of scrolling. The values that can be assigned to this attribute are Alternate, Scroll and Slide.

<MARQUEE Behavior=”Scroll”>

BGCOLOR Sets the background colour of the scrolling area

<MARQUEE Bgcolor="Yellow">

SCROLLDELAY Sets the time for the text to scroll from one position to the next immediate position

<MARQUEE Scrolldelay=”1000”>

Scrolls from left to right



SCROLLAMOUNT Specifies the distance

between two consecutive points of text while scrolling. The greater the SCROLLAMOUNT the faster will be the speed of scrolling

<MARQUEE Scrollamount="100">

LOOP Specifies the number of times the text scrolls from one end to the other end in the text area

<MARQUEE Loop="2">

DIRECTION Specifies the direction of scrolling. By default, the text scrolls from right to left in the scrolling area.

<MARQUEE Direction="Right">

VSPACE Specifies the space between the scrolling text and the texts that scrolls above and below the scrolling text

<MARQUEE Vspace=”15”>

HSPACE Specifies the distance between the scrolling area and the two ends of the browser window

<MARQUEE Hspace="35">

Table 2.3.1: Attributes of <MARQUEE> tag Activity 2.3.4

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


Scrolling Text The Tag The tag used to scroll text across the browser window is <MARQUEE> tag. Attributes HEIGHT This attribute specifies the height of the scrolling area. WIDTH This attribute specifies the width of the scrolling area. BEHAVIOR This attribute specifies the style of scrolling. The values that can be assigned to this attribute are Alternate, Slide and Scroll.



If BEHAVIOR = Alternate, the text scrolls from right to left and left to right alternatively within the scrolling area. (Make this text scroll to and fro within the scrolling area). If BEHAVIOR = Slide, the text scrolls from right to left and stops or slides in the left-most portion of the scrolling area. (Make this text slide from right to left). The default value of Behavior attribute is Scroll. If this attribute is omitted or set to Scroll the text keeps scrolling from right to left indefinitely in the scrolling area. (Make this text scroll from right to left indefinitely). BGCOLOR This attribute sets the background colour of the scrolling area. (Set the background colour of this scrolling area to Yellow). SCROLLDELAY This attribute sets the time for the text to scroll from one position to the next immediate position. (Slow down the scrolling of this text). SCROLLAMOUNT This attribute specifies the distance between two consecutive points of text while scrolling. The greater the SCROLLAMOUNT the faster will be the speed of scrolling. (Make this text scroll faster). LOOP This attribute specifies the number of times the text scrolls from one end to the other end in the text area. By default, the text scrolls indefinitely. (Make this text scroll 5 times). DIRECTION As the name suggest, this attribute specifies the direction of scrolling. By default, the text scrolls from right to left in the scrolling area. (Make this text scroll from left to right). Example In this page, the text below the heading Behavior scrolls to and fro within the text area because of the tag <MARQUEE Behavior=”Alternate”> ……… </MARQUEE>.

Lab Exercise

Lab Exercise 10: Open Welcome.html that you have created under the folder in your name in C:. Add <HR> tag into the file and display the output as given in the following Figure 2.3.17. Save the file and view the output in the browser.



Figure 2.3.17 : Welcome to Malaysia Lab Exercise 11: Open D3_4.html in Internet Explorer. The following code will be present in

D3_4.html. <HTML> <HEAD> <TITLE> Scrolling Text </TITLE> </HEAD> <BODY> <MARQUEE Bgcolor="Red" Width = 100% Height=10%> <H2> WISH YOU A HAPPY NEW YEAR </H2> </MARQUEE> </BODY> </HTML>

1. View the source code in notepad. 2. Identify the tag which is used for scrolling text. 3. Name the attribute that is used in <MARQUEE> tag.

Lab Exercise 12: Open D3_4.html in Internet Explorer.

1. View the source code in Notepad. 2. Change the marquee background colour to green. 3. Change the direction of the scroll from right to left. 4. Save the file and view the output in the browser.



Lab Exercise 13: Open Welcome.html that you have created under the folder in your name in C:. Add <MARQUEE> tag into the file and display the output as given in the following Figure 2.3.18. Save the file and view the output in the browser.

Figure 2.3.18 : Welcome to Malaysia

2.3.7 Character Entities Create a HTML document that displays the HTML code to print a name, say Rabiah. That is, you have to create a page as shown in Figure 2.3.19.



Figure 2.3.19 : Web Page displaying HTML code

Probably, you may think of a code segment as given below, which is incorrect. <BODY> <H1> HTML code to print Rabiah </H1> <HTML> <HEAD> <TITLE> HTML code </TITLE> </HEAD> <BODY> RABIAH </BODY> </HTML> </BODY>

If you run the above code, the code to print the name, Rabiah will not be displayed. Instead, the name Rabiah itself will be displayed. This is due to the following reason: The symbols < and > specifies some special meaning to the browser. The < symbol indicates the browser that the word followed is a tag name and > symbol indicates the end point of the tag name. Therefore, the words <HEAD>, <TITLE> etc. are not considered as ordinary words but as tag



names. So, to represent the characters, such as < and >, the Entity references are used. The Entity references are the symbolic representation of the characters. These symbols are used instead of characters. 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 <HTML> where lt stands for lesser than symbol and gt stands for greater than symbol.

There are also entity references for some of the special characters, such as pound symbol and Yen symbol that are not found in the keyboard.

Note

Entity references for symbols that cannot be used directly to display them in the browser are given in Table 2.3.2.

Symbol Entity reference Explanation < < Lesser than > > Greater than & & Ampersand “ " Quotation mark

Space No break space £ £ Pound symbol ¥ ¥ Yen symbol © © Copyright symbol

™ ™ Trade mark symbol

® ® Registered symbol ± ± Plus or minus symbol ½ ½ Fraction 1 upon 2

Table 2.3.2: Entity references



Lab Exercise


<HTML> <HEAD> <H1 Align="CENTER"> Character Entity </H1> <TITLE> Character Entity </TITLE> </HEAD> <BODY> Copyright ©<br> Ampersand &<br> Trademark ™<br> Register ®<br> Plus or Minus ±<br> Example for No-break space </BODY> </HTML>

1. View the source code in Notepad. 2. Name the entity reference which is used for Copyright symbol. 3. Identify the entity reference for Plus or Minus symbol. 4. Name the entity reference for Trade Mark symbol. 5. Highlight entity reference is used for Register symbol. 6. Highlight the symbol for Ampersand.

Lab Exercise 15: Write a HTML code to display the output as given in the following Figure 2.3.20 using character entities.



Figure 2.3.20 : Character Entities


Write HTML code segment to display the text given below: 1. <HTML> 2. 500¥ 3. Area of triangle = ½ bh

2.3.8 Colour, Colour Values and Colour Names Knowledge about adding colours is of great importance in HTML to create colourful and eye-catching Web pages. The following example describes how to add colours to the background of a Web page Create a HTML document with the text given in the Web page in Figure 2.3.15. To specify a background colour, modify the <BODY> tag as <BODY Bgcolor="Green" Text="Yellow">. The output when you run the file is shown in Figure 2.3.21.



Figure 2.3.21 : Web Page with coloured background

From Figure 2.3.21, it is clear that the attributes Bgcolor and Text are the attributes of the <BODY> tag.

Bgcolor attribute specifies the background colour of the page. The background colour of the above page is set to Green, which is the hexadecimal code for a shade of green.

The text colour of the above page is set to Yellow. The colours can also be specified in the form of colour values instead of colour names. The hexadecimal colour value for Green is 336600 where 33 represent the Red component, 66 represent Green and 00 represent Blue. For example, the colour value for White is FFFFFF and for Black is 000000. Some of the colours and their values are given in Figure 2.3.22.

RED FF0000

GREEN 00FF00

BLUE 0000FF

YELLOW FFFF00

CYAN 00FFFF

MAGENTA FF00FF

BLACK 000000

WHITE FFFFFF

GRAY 808080

Figure 2.3.22 : Colour Names and Values

Pictures can also be added as background of a page. Figure 2.3.23 shows the same page with picture as a background.



Figure 2.3.23: Web Page with a picture as background

To add a picture as a background instead of colour, replace BGCOLOR with BACKGROUND attribute as follows: <BODY Background=”c:\Internet.jpg”> The value for the Background attribute is a picture file along with its location. In the above example, the picture file, Internet.jpg is located in the c: drive. The background of the page will be blank, if the picture file is not in the specified location.

Lab Exercise


1. View the source code in Notepad. 2. Identify the tag which is used to change the background and text colour of the above

Web page. 3. Change the background colour to pink and text colour to black. 4. Save the file and view the output in the browser.



Lab Exercise 17: Open Welcome.html that you have created under the folder in your name in C:. Add background attribute into the <BODY> tag and display the output as given in the following Figure 2.3.24. Save the file and view the output in the browser.

Figure 2.3.24 : Welcome to Malaysia

Lab Exercise 18: Write a HTML code to display the output as given in the following Figure

2.3.25 using <H1>,<BODY> <HR> and <MARQUEE>. Save the file as Malaysia.html under the folder in your name in C:.



Figure 2.3.25 : Information about Malaysia

Activity 2.3.5

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

2. Save the HTML file as Activity5.html in Activity folder.



Figure 2.3.26 : A Web page that explains the structure of HTML document

Figure 2.3.27: Continuation of the Web page (Figure 2.3.26 contd..)



Technical Terminologies

Attribute - Property that enhances the effect of a tag. Entity reference - Symbolic representation of the characters. Comments - Added to improve the readability and also to identify

the errors in case of lengthy source codes. Colour values - Hexadecimal values for the colour names.

Summary In this unit, you learnt that

The tags <H1>, <H2>, <H3>,<H4>, <H5> and <H6> are the heading tags.

<P> tag is used for creating paragraphs. <BR> tag can be used to insert the line breaks. The comment should be enclosed within the  symbols. <HR> tag is used to draw horizontal lines. <MARQUEE> tag makes the text move across the browser window. Entity references are the symbolic representation of the characters. Bgcolor attribute of <BODY> tag specifies the background color of the

page. Text attribute of <BODY> tag specifies the text color. Background attribute of <BODY> tag specifies the background picture

of the page.



Assignment

I. Solve the following crossword: 1

2 3 4 5

6

7

8

9

10

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.

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. II Answer the following questions:

1. Name the attribute used to change the alignment of a paragraph. 2. Write about the use of <BR> tag. 3. Give the purpose of adding comments. 4. Name the tag which is used to scroll a text. 5. Write the use of character entities. 6. Give the tag and attribute used to add a picture to the background of

the browser window.



Criterion Referenced Test Instruction: Students must evaluate themselves to attain the list of

competencies to be achieved. Name: Subject: Programming and Development tools Unit: Basic tags in HTML Please tick [ √ ] the appropriate box when you have achieved the respective competency. Date Basic tags in HTML C1 C2 C3 C4 C5 C6 C7 C8 Comment

Competency codes C1 = Write the purpose of heading tags. C2 = Insert paragraphs and align them. C3 = Insert Line Breaks in your Web pages. C4 = Insert comment statement in your Web pages. C5 = Insert horizontal lines in your Web page. C6 = Use <MARQUEE> and its attributes. C7 = Identify the character entities for different symbols C8 = Add colours and pictures to your Web page.

Technology

Unit 2.3