HTML Basics: Structure and Creation of a Web Page</TITLE

Programming and Development Tools Web Programming

UNIT

2.2
Web Programming
HTML Basics

OBJECTIVES
This unit helps you to create HTML documents and familiarise the structure
of HTML documents.
At the end of this unit, you will be able to
Outline the structure of HTML document
Create HTML document
Benchmark standard
Execute HTML document in a Web browser
Edit the errors in HTML document
Acquainted with the creation of HTML document

Benchmark Standard
Describe the structure of HTML document.
Publish simple HTML documents in a Web browser without any
error.

HTML Basics 2.2-1


Let us Revise!

1. List the requirements to get Internet connection.
2. List any five search engines.
3. Define the term E-commerce.
4. Write the use of Forward button in Internet Explorer.
5. Expand WWW and URL.

Introduction
You learnt that a Web page is an electronic document that contains
information in the form of text, pictures, graphics, audio and video. The Web
pages are displayed by a Web browser in the browser window. The Web
browser reads the instructions from a file and displays the document in the
browser window according to the instructions. This can be better understood
from the pictorial representation given in Figure 2.2.1.

<html><head>
<script language=javascript>
B
var now=new r
Date,t1=0,t2=0,t3=0,t4=0,t5=
0,t6=0,ie5=0,hp=0,ao=0,cc=''; o
t1=now.getTime();
function err(a,b,c) {
w
var img=new Image; s
img.src='http://srd.yahoo.com
/hp5- e
err/'+escape(a)+','+escape(b)+
','+escape(c)+'/*1'; r Web Page

An example HTML program

Figure 2.2.1: Creation of a Web page

The file from which the browser reads the instructions is the HTML file. The
language in which the instructions are given is the Hypertext Mark-up Language,
shortly referred to as HTML.

Note

Hypertext refers to the text that is linked to other documents and mark-up language refers to
the instructions.

HTML Basics 2.2-2


HTML is a language that instructs the browser how to display the contents of
a Web page in the browser window.

2.2.1 Structure of HTML
You know how to create and execute a HTML document. The code in the
HTML document has a specific structure. The structure of HTML document is
shown in Figure 2.2.2.
<HTML>

<HEAD>

<TITLE> Head
------------ Section
</TITLE>

</HEAD>

<BODY>
--------------
--------------
Body
--------------
Section
--------------
--------------
</BODY>

</HTML>

Figure 2.2.2: Structure of a HTML Document

The <HTML> tag specifies the browser that the code enclosed between
<HTML> and </HTML> is a HTML code. The HTML code is mainly divided
into two sections namely HEAD section and BODY section.

HEAD Section
The HEAD section contains some fundamental information about the Web
page. The browser interprets and executes the HEAD section and then moves
to the BODY section. The HEAD section is enclosed between <HEAD> and
</HEAD> tags. The <TITLE> tag is placed inside the HEAD section. The

HTML Basics 2.2-3


text you give in the TITLE section will appear in the title bar of the browser
window. The title of the Web page is given in the TITLE section.
BODY section
The BODY section contains the actual content to be displayed in the browser
window. This section contains the tags that specify how the content should be
displayed. The BODY section is enclosed between the <BODY> and
</BODY> tags.
Creating and Executing a HTML Document
You can type the source code (HTML code) in a notepad application and view
it as a Web page in the browser.

Hands-On!

Follow the steps given below to create a HTML document:
1. Open Notepad by choosing Start All Programs Accessories
Notepad.
2. Type the HTML code as follows.
<HTML>
<HEAD>
<TITLE> The Mind </TITLE>
</HEAD>
<BODY>
<FONT SIZE=5> <CENTER>
<H1 ALIGN=CENTER> The Mind </H1>
Great minds think about ideas
<BR> Medium minds speak about happenings
<BR> Small minds gossip about others.
</FONT></CENTER>
</BODY>
</HTML>
Code Sample 2.2.1
3. Save the file. For example, save the file as Structure.html in
C:HTMLUNIT2Misc folder.

Creating a Virtual Directory
You know that IIS is a Web server that stores the HTML documents to be
viewed in a Web browser. To store HTML documents in IIS, you have to
create a directory known as Virtual Directory.

HTML Basics 2.2-4


Hands-On!

Steps to create a Virtual Directory
1. Click Start Control Panel.
2. Select Performance and Maintenance
3. Select Administrative tools
4. Select IIS. Internet Information Services dialog box is displayed.
In the left pane, right click Default Web site in the Web sites folder and select
New Virtual Directory. Virtual Directory Creation Wizard is displayed.

Figure 2.2.3: Virtual Directory Creation Wizard

HTML Basics 2.2-5


5. Click the Next button.

Fig
ur
e
2.2
.4:
Vir
tua
l
Dir
ect
or
y
Ali
as

6. I
n

t
h
e Alias text box, type the Virtual Directory name, say School and click

the Next button.

HTML Basics 2.2-6


Figure 2.2.5: Web Site Content Directory
7. In the Web site content directory page, browse and select the path of
the directory that contains the HTML files, say C:HTML.

Figure 2.2.6: Access Permissions
8. With the default settings in the Access Permissions page, click the
Next button.

HTML Basics 2.2-7


Figure 2.2.7: Virtual Directory Creation Wizard
9. Click Finish to complete the Virtual Directory Creation wizard.

To view the Web page, open Internet Explorer and type the URL of the Web
page created, in the address bar and press the Enter key. For example,
http://localhost/HTML/Misc/Structure.HTML.

Tip

You can open the Internet Explorer by double clicking the Internet Explorer icon on the
desktop.

The browser interprets the instructions given in the HTML file. After
interpretation, the Web page is displayed in the browser window as shown in
Figure 2.2.8.

Figure 2.2.8: Web Page in a Browser Window

Tip

You can also execute a HTML document by typing its filename preceded by its path in the
address bar and pressing the Enter key.

The steps required to create and execute a HTML document can be
summarised as follows:
1. Open Notepad.

HTML Basics 2.2-8


2. Type the HTML code.
3. Save the file with extension .HTML and close Notepad.
4. Open Internet Explorer
5. Select your HTML file.

Note
If there is any error in your HTML code, it will not be pointed out by the browser. Instead of
pointing out the error, the browser neglects the effect of that tag in the Web page.

HTML Basics 2.2-9


Lab Exercise

Lab Exercise 1: Open D2_1.html in Internet Explorer. The following code will be present in
D2_1.html.
<HTML>
<HEAD> Welcome
<TITLE> First Web Page </TITLE>
</HEAD>
<BODY>
This is my First Web Page
</BODY>
</HTML>

1. Identify the tag, which is used to display First Web Page in the title bar.
2. Write the tag used to display Welcome in the source code of D2_1.html.
3. Highlight the tag used do display the contents of the Web page.

Correcting Mistakes in a HTML Document
A Web page is created using the HTML code. If there are any errors in the
HTML code, it should be rectified by making the corrections in the source
code (HTML file).
You can rectify the mistakes in the HTML code by performing the following
steps:
1. Click the View menu and choose Source option. The source code
(HTML code) of the Web page gets opened in the Notepad file.
2. Make the necessary corrections.
3. Save and close the file.
4. Click the Refresh button in the Standard Buttons toolbar of the
Internet Explorer.
The error-free page is displayed in the Internet Explorer.

Tags
The instructions given to a Web browser are called Tags. The tags are
enclosed within angled brackets (< >). There are two types of tags. They are
Starting tag - The starting tag indicates the starting point of the text
in the Web page to which the effect of the tag should be applied.

HTML Basics 2.2-10


The starting tag is enclosed within angled bracket. For example,
<HEAD>.
Ending tag. - The ending tag indicates the ending point of the text to
which the effect of the tag will be applied. The ending tag is
enclosed by angled brackets and is preceded by a slash (/). For
example, </HEAD>.

The effect of the tag is applied to the content, which is placed inside the
starting and ending tags.

Note

There are few tags, which do not require the ending tag.

Self-Check Exercise 2.2.1

List the errors in the following HTML code and justify it with your answers:

<HTML>
<HEAD>
<TITLE> The Mind
</HEAD>
</TITLE>
</BODY>
Great minds think about ideas
Medium minds speak about happenings
Small minds gossip about others.
<BODY>
</HTML>
Code Sample 2.2.2

Note
Any number of tags can be nested within each other. But the starting and ending tags of one
tag should be completely inside the other.

HTML Basics 2.2-11


Lab Exercise

Lab Exercise 2: Open D2_1.html in Notepad
1. Change title as Welcome to My First Web Page. Display the output in Internet Explorer.
2. Remove the <Title> tag from D2_1.html and save the file. Display the output in Internet
Explorer and observe the difference.
3. Change the head tag to Welcome to HTML page. Display the output in Internet Explorer
and observe the difference.
4. Change the body text to This is my First HTML page. Display the output in Internet
Explorer and observe the difference.
Lab Exercise 3: Write a HTML code to display the output as given in the following Figure
2.2.8.

Figure 2.2.8: Simple HTML Page

Lab Exercise 4: Write a HTML code to display the output as given in the following Figure
2.2.9. Create a folder with your name and save the file as Welcome.html under this folder. For
example C:RoslinaWelcome.html. Create a virtual directory with the name as Site and attach
the folder (Roslina) which you have created.

HTML Basics 2.2-12


Figure 2.2.9: Welcome to Malaysia

Activity 2.2.1

1. Search for the sites that provide information about various mark-up
languages.
2. Create and view a HTML document as Web page that lists the
importance of HTML.

Summary
In this unit, you learnt that
A Web page is an electronic document that contains information in
the form of text, pictures, audio and video.
HTML is a language that instructs the browser how to display the
contents of a Web page in the browser window.
The source code of a Web page can be viewed by selecting View
Source in the Internet Explorer.
The structure of HTML document consists of <HTML> tag in which
the <HEAD> tag and <BODY> tags are placed.
The instructions given to a Web browser are called Tags.
The text given in the TITLE section will appear in the title bar of the
browser window.

HTML Basics 2.2-13


Assignment

I. Solve the following crossword:

1

2 3

4 5

6 7 8

9

10

Across
2. Button to re-execute HTML document after correction.
4. Place the actual content of the Web page in this tag.
5. Instructions given to the browser.
6. Select this option from the file menu to open the HTML document.
7. ________ is a mark-up language.
9. Select this from the View menu to see the source code of the Web
page displayed.
10. Tags are placed between these brackets.

Down
1. Place the title tag inside this tag.
3. The special character that differentiates the starting and ending tag.
4. __________interprets the HTML document and displays the Web
page.
8. Tag to display the text in the title bar of the browser

HTML Basics 2.2-14


II Answer the following questions:
1. Give the expansion of HTML.
2. List the steps to be followed while correcting the errors in a HTML
document.
3. List the steps to be followed in creating a virtual directory.
4. Define the term Tag.

HTML Basics 2.2-15


Criterion Referenced Test

Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development tools
Unit: HTML Basics

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.
Date HTML Basics
C1 C2 C3

Comment

Competency codes:

C1 = Write the structure of HTML.
C2 = Create a simple HTML document and execute it.
C3 = Edit the HTML document and refresh the Web page.

HTML Basics 2.2-16

HTML Basics: Structure and Creation of a Web Page</TITLE

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie HTML Basics: Structure and Creation of a Web Page</TITLE

Ähnlich wie HTML Basics: Structure and Creation of a Web Page</TITLE (20)

Mehr von Intan Jameel

Mehr von Intan Jameel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML Basics: Structure and Creation of a Web Page</TITLE