Unit 2.3

Programming and Development Tools Web Programming

UNIT

2.3
Web Programming
Basic Tags in HTML

OBJECTIVES
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.

Benchmark Standard
Use the basic tags and their attributes to create professional-
looking Web pages.

Basic 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.



Figure 2.3.1: A Web Page using Heading Tags

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

Hands-On!

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>
Heading tag
</HEAD>
<BODY>
<H1 Align="Center"> The Puzzles </H1>
<H2> Puzzle No. 1 </H2> Heading tag

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




</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.



Note

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).

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.
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.

Best Programming Practise

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”> Paragraph tag
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.
</P>



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

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>

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

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.

Hands-On!
The following example describes the use of line breaks in HTML document.
Open the HTML file Break1.HTML.

<HTML>
<HEAD>
<TITLE> Line Breaks
Code without line
</TITLE> break

<BODY>
<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 Page using <BR> tag
In this source code, the content of the <BODY> tag is written in three different
lines. 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.

Figure 2.3.12 : Web Page using <BR> tag




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

Activity 2.3.2

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

Figure 2.3.13 : A Web page that explains the <BR> and <P> tags
2.3.4 Comments
Read the following program and identify the objective of the program. Correct
the mistakes, if any.

<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> Code without
comments
<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">
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
errors? If there are some comment statements that explain the code, it would
be 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 enclosed within the  symbols. An example
for a comment statement is:


2.3.5 Horizontal Rule
The horizontal rule is used to draw horizontal lines in your Web page as
shown in Figure 2.3.14.

Figure 2.3.14: Web Page with Horizontal Rule
In Figure 2.3.14, the different paragraphs of the page are separated by
horizontal lines. <HR> tag is used to draw horizontal lines. There is no end
tag for <HR> tag.


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.

For example, a horizontal rule of size 5, width 40% of the browser window,
with no shade and with left alignment can be printed using the following code
snippet:

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

Hands-On!

The following example describes the use of different attributes of <HR> tag:
Open the HTML file 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> Horizontal rule
</TITLE>
</HEAD>



<BODY>
<H1 Align="Center"> Horizontal Rule with Different
Attributes </H1>
<FONT Size="5">
Horizontal rule of size 5
<HR Size="5"> Draws a horizontal line
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

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

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>
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.
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.



Hands-On!

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> Scrolls in both the directions
<MARQUEE Behavior="Alternate" Height="120"
Width=”820” Bgcolor=”Green”>
The step-by-step instruction involved in solving a
problem is called Algorithm.
</MARQUEE> Sets the scrolling speed
<H2> Biometrics </H2>
<MARQUEE Scrolldelay=”1000”>
Biometrics is a technology of identifying the finger
prints, voice and facial patterns for authentication
purpose.
</MARQUEE> Scrolls in both the directions in the scrolling area
<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> Sets the size and background colour of the
scrolling area
<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>
Scrolls two times
<MARQUEE Loop="2">
Encryption is the process of converting data into a
form that cannot be understood by unauthorized
persons.



</MARQUEE>
<H2> File Server </H2>
Scrolls from left to right
<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 <MARQUEE
the scrolling area Height="120">
WIDTH Specifies the width of the <MARQUEE
scrolling area Width="120">
BEHAVIOR Specifies the style of <MARQUEE
scrolling. The values that Behavior=”Scroll”>
can be assigned to this
attribute are Alternate,
Scroll and Slide.
BGCOLOR Sets the background <MARQUEE
colour of the scrolling Bgcolor="Yellow">
area
SCROLLDELAY Sets the time for the text <MARQUEE
to scroll from one Scrolldelay=”1000”>
position to the next
immediate position



SCROLLAMOUNT Specifies the distance <MARQUEE
between two consecutive Scrollamount="100">
points of text while
scrolling. The greater the
SCROLLAMOUNT the
faster will be the speed of
scrolling
LOOP Specifies the number of <MARQUEE Loop="2">
times the text scrolls from
one end to the other end
in the text area
DIRECTION Specifies the direction of <MARQUEE
scrolling. By default, the Direction="Right">
text scrolls from right to
left in the scrolling area.
VSPACE Specifies the space <MARQUEE
between the scrolling text Vspace=”15”>
and the texts that scrolls
above and below the
scrolling text
HSPACE Specifies the distance <MARQUEE
between the scrolling Hspace="35">
area and the two ends of
the browser window
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

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
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.
2. Change the marquee background colour to green.
3. Change the direction of the scroll from right to left.



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.


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.

Note
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.

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

D3_5.html.

<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>

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.
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 GREEN BLUE
FF0000 00FF00 0000FF
YELLOW CYAN MAGENTA
FFFF00 00FFFF FF00FF
BLACK WHITE GRAY
000000 FFFFFF 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

D3_6.html.

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.



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.


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.


Unit 2.3

More Related Content

What's hot

Viewers also liked

Similar to Unit 2.3

More from Intan Jameel

Recently uploaded

Unit 2.3