Download - 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
Programming and Development Tools Web Programming
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
Programming and Development Tools Web Programming
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
Basic Tags in HTML 2.3-3
Programming and Development Tools Web Programming
<H3> Puzzle No. 2 </H3>
55555 = 55. Make the equation true by inserting any mathematical operator in-between the digits on the left of the equal symbol.
Heading tag
<H4> Puzzle No. 3 </H4>
666666 = 100. Make the equation true by inserting any mathematical operator in-between the digits on the left of the equal symbol.
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.
Basic Tags in HTML 2.3-4
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-5
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-6
Programming and Development Tools Web Programming
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>
Basic Tags in HTML 2.3-7
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-8
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-9
Programming and Development Tools Web Programming
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
Basic Tags in HTML 2.3-10
Programming and Development Tools Web Programming
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>
Basic Tags in HTML 2.3-11
Programming and Development Tools Web Programming
Lab Exercise
Figure 2.3.8: Web Page created using <P> tag
Self-Check Exercise 2.3.2
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>
Basic Tags in HTML 2.3-12
Programming and Development Tools Web Programming
<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.
Basic Tags in HTML 2.3-13
Programming and Development Tools Web Programming
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
Basic Tags in HTML 2.3-14
Programming and Development Tools Web Programming
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
Basic Tags in HTML 2.3-15
Programming and Development Tools Web Programming
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>
Self-Check Exercise 2.3.3
Activity 2.3.2
Basic Tags in HTML 2.3-16
Programming and Development Tools Web Programming
<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>
Basic Tags in HTML 2.3-17
Programming and Development Tools Web Programming
Programming and Development Tools Web Programming
Basic Tags in HTML 2.3-18
</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 <!-- and --> 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<!-- The following code displays the content using <P> tag -->
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
Basic Tags in HTML 2.3-18
Programming and Development Tools Web Programming
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>
Basic Tags in HTML 2.3-19
Programming and Development Tools Web Programming
<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.
2. Save the HTML file as Activity3.HTML in Activity folder.
Basic Tags in HTML 2.3-20
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-21
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-22
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-23
Programming and Development Tools Web Programming
</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
Basic Tags in HTML 2.3-24
Programming and Development Tools Web Programming
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.
2. Save the HTML file as Activity4.HTML in Activity folder.
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.
Basic Tags in HTML 2.3-25
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-26
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-27
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-28
Programming and Development Tools Web Programming
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
Basic Tags in HTML 2.3-29
Programming and Development Tools Web Programming
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
Basic Tags in HTML 2.3-30
Programming and Development Tools Web Programming
Lab Exercise
Lab Exercise 14: Open D3_5.html in Internet Explorer. The following code will be present in 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>
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.
Basic Tags in HTML 2.3-31
Programming and Development Tools Web Programming
Figure 2.3.20 : Character Entities
Self-Check Exercise 2.3.4
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.
Basic Tags in HTML 2.3-32
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-33
Programming and Development Tools Web Programming
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
Lab Exercise 16: Open D3_6.html in Internet Explorer. The following code will be present in D3_6.html.
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.
Basic Tags in HTML 2.3-34
Programming and Development Tools Web Programming
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:.
Basic Tags in HTML 2.3-35
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-36
Programming and Development Tools Web Programming
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..)
Basic Tags in HTML 2.3-37
Programming and Development Tools Web Programming
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 <!-- and --> 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.
Basic Tags in HTML 2.3-38
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-39
Programming and Development Tools Web Programming
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.
Basic Tags in HTML 2.3-40