Introduction to HTML

INIT 3 INTRODUCTION TO HTML

Structur
10 Introduction NOTES
3.1 Unit Objectives
3.2 History of HTML
32.1 HTML Generations
3.3 HTMLTerminology
3.3.1 HTML Documents
34 Working with HTML
3.5 Hyperlinks
Document
3.5.1 Anchor Tag
3.6 Designing a Home Page
3.7 Summary
3.8 Key Terms
3.9 Answers to Check Your
3.10 Questions and Exercises Progress

3.01NTRODUCTION
Hyperttxt Markup Language (HTML) is astructured language that describes the syntax
and structure of a document in a well-defined manne,. It is used to
that can create Web pages
include text, links pictures and even sound and video. It comprises two major
components, namely, hypertext and markup Hypertext is usedto read and navigate
the text or other information bykonnecting ifferent parts ofinformation together. Hence,
it facilitates establishing a linkin anon-lincar way and skipping from one topic to another
based on our interest/ Markup. on the other hand, means that HTML is simply agroup
of codes or instructions (called elements)hat deseribes the structure and format of a
document.
The main advantage ofHTML is that it does not require any additional software
to execute the code. In addition, it enables diferent multimeda components to be displayed
together on aWeb page. HTML is simple and easy to use, supported by most of the
browsers and does not require prior knowledge of any programming language.
In this unit, you will learn about HTML, its history and the tens used init
3.1 UNIT OBJECTIVES

After going through this unit, you will be able to:

" Understand what is Hypertext Markup Language (HTML)
" Trace the history of HTML and HTML generations
" Understand the terms used in HTML
" Outline the structure ofHTML document
" Worki with HTML document
" Create hyperlinks
" Design an effective home page Self-Instructional
Material 25
 OF HTML
3.2 HISTORY
duction to HTM1.

researcher at Conseil Europeen pour Recherché Nuol.

In CERN) Berner-Lee)a
laboratory,
1989, Tim Genva, Switzerland was assigned thetaskkofcreatinggahypertex
to scientific information. However. the
interface
NOTES environment to be used as an
information must be displayed in a similar wav on a
challenge for him was that this
operating systems, screen sizes and browsers
beino m
systems irespective of the developed thefirst version ofHTML/The main considerat
Asaresult Tim Berner-Lee delivery of content and its structure with little emphasie
while developing HTML was the browser. HTML was considered to be an applieat
the presentation which was left to Language (SGML), which serves as a base to defne
of StandardGeneralized Markup
amarkup language. )
3.2.1 HTML Generations
ofHTML were released and with each version ofHTMI
Over the years, many versions first version ofHTML was created using Standard
the number oftags has increased. The commonly used versions ofHTML
Generalized Markup Language (SGMLX`ome ofthe
are as follows:
shortcomings in the first version of HTML
"HTML 1.0: Because of several with the
released in 1990. This version can displayimages along
HTML 1.0 was
text.
specification from the earlier version and a
" HTML 2.0: This version includes
boxes, and buttons. It had been the
few new features such as list boxes, edit newer version. It was
standard for Web site design until the development of the
released in 1994.
2.0 as it has more features
" HTML 3.0: This version is a replacement for HTML
requirement. It was
to enhance the look of the Web pages as per the developer's
released in 1996.
the earlier
" HTML 3.2: This version provides many additional features over
versions. It enables developers to add images, tables, text around images and
display complex mathematic elements on the Web page. HTML3.2 was released
in 1997.
HTML 4.01: This version provides its developers with a facility to add style
sheets in aWeb page. It has widely introduced the concept of embedding scripting
languages in HTML. Hence, it is easier to add multimedia components in the
Web pages. HTML4.0I was released in 2000.
XHTML 1.0: This version is a combination of HTML and XML (Extensible
Markup Language). XHTML 1.0 was released in 2001.

3.3 HTML TERMINOLOGY

The basic terminologies associated with HTML document are elements, tags, and
attributes.

SelfInstructional
Material
Elepentsand Tags
Pementisaadistinctive component of document's Introduction to HTIL

by thestructure
lines, età Anelement
karzontal
is such as hcadings,
iits
attributes), content sidentified
and tag, It generally comprises paragaphs,
an opening
frvardslash /)For
example, closing tag. The closing tag is
cHÍ>lagis uset wbere <H1> is
as shown in Figure 3.1, to
the
preceded with a
define heading element, NOTES
e/H1> IS the closing tag. opening tag with ALIGN as the attribute and

Content
Opening tag
Closing tag
<H1 ALIGN
nCNTYAR"> THIS IS
HEADING </H1>
Attribute name Attribute value

HTML Element
Figure 3.I Understanding Elements
One of the key features
hat an element can contain oneofHTML is that the elements can be nested. This
or more elements within it. implies
Elements can beclassified into twotypes, namely,
dlemehts. container elements and empty
Container Elements: It is an element that has both opening and
tags. For example, to change acertain section ofthe to closing
tag <B> and the closing tag </B> is used. text bold, the opening
o Empty Elements: It is an element that has only the
the specific function without affecting the rest of the opening tag. It performs
document. For example,
the opening tág of'the HORIZONTAL RULE element
<HR> can be used
directly and does not require any closing tag.
Note:A tag'consists of aleft angle bracket (<), the tag name and a right
bracket (>). For example, <HR> is a tag where HR is the name of the tag angle
Attributes
Attributes proyide additional information such as alignment, font, colour, size of the text
or image, etcAn attribute is defined in a tág within the angle brackets after the tag
name. Each attribute has a name and a value. The value of an attribute is specified after
the name of the attribute and '=' (equal to sign). For example, <FONT
ALIGN="Center" sIZE="10"> aligns the textto centre with the text size as 10.
Here, <FONT> is the tag name, ALIGN and SIZE are its attributes and Center and 10
re the values ofthese attributes, respectively. Note that the value of theattributes may
or may not be specified within quotes. However, it is a good practice to use double
quotes to specify the attribute values.
Note: Although most of the HTML elements are not case-sensitive, their attributes
Can be sometimes case-sensitive.

Self-Instructional
Materia! 27
Introduction to HTML 3.3.1 HTML Documents
HTML Document, the structure ofa well written documen
Regardless ofthe content in declaration specifying the HTMI
<! DOCTYPE>
remains the same. It starts with the declaration is generally omitted. It is
followed
however, this
version uscd in the document; BODY elements that form the primary sections
NOTES HEAD and
by HTML element containing
ofHTML element.
HTML Element
tag and ends with </HTML> tag. It indicates
begins with <HTML>
An HTML document language. All the text and other HTML elements are
that the contents are in HTML
enclosed within this element.
element is
The syntax ofan HTML
<HTML>
...content of HTML document
</HTML>

HEAD Element
describes a document such as its title,
The HEAD element contains information that <HTML> tag. The
the opening
comments, scripts, style used, etc) It appears just afterHEAD
the element forms the first
content between the opening and closing tags of document.
section, that is, the header (or head) section of the
The syntax of the HEAD element is
<HEAD>
<TITLE>
.descriptive information of the document
</TITLE>
</HEAD>

The HEAD cement usually contains the TITLE element used to specify the title
ofthe document.
Note: The elements that you can specifiy inside the HEAD element are discuSsed in
detail in Chapter 04.
BODY Element

The BODY element contains the information which is to be displayed on a Web page
such as text, links, pictures, etc) along with the HTML elements to control the formatting
of the Web page. The <BODY> tag is placed exactly below the closing </HEAD> tag
andthe < / BoDY>tag is placed above the closing </HTML> tag. The content between
the opening and closing tags of BODYelement foms the second section., that is, the body
section of the document.
The syntax of the BODY element is
<BODY>

Content of the Web page

</BODY>

SelfInstructional
Material
 HTML
3.4VORKING WITH HTML D0CUMENT tr tuo mroduction to

To create and view an HTML document, following tools are required:

Text editor: It is a program that saves the files in plain text (ASCII Fomat), that NOTES
,withost any text formatting or special characters. The built-in text editors in
Windows such as Notepad and DOS edit can be used to create simple Web
pages,
" Web browser: It is used to display the Web pages that are created using HTML.
Some of the commonly used Web browsers are Microsoft Internet Explorer,
Netscape Navigator, etc.
Note: In this book, we will use Notepad to create Web pages and Internet Explorer
to view them.

vCreating and Saving HTML Document

To create an HTMLdocument in Notepad, follow these steps.
1. Click start, point to All Programs, then point to Accessories and then click
Notepad. This displays the Notepad window.
2. Type the HTML code in the Notepad window, as shown in Figure 3.2.
Untitled -Notepad
Fle Edt Format Yew lelb

<HTM>,
<HEAD>
<TITLE>
First Page
<TTILE>
<HEAD
<BODY>
Welcome to HTMILI
<BODY>
<HTMS,,4,:

Figure 3.2 HTML Code in Notepad

option in the File menu. Note that an
3. Next, save the file by clicking Save As with-. html or .htm extension. For
HTML document must always be saved Firstpage.htm
examplé, save this file as Firstpage.html or Check Your Progress
1. What major challenge
Viewing an HTML Document was Tim Bermer
saved, its output can be viewed in a Web Lee confronted
Once the HTML document is created and these steps:
follow with while creating
browser. To view the output ofthe HTML document, HTML?
the desktop. This displays the browser
1. Double click the Internet Explorer icon on 2. attrnoute
Where isdefined?
an
window. What does the
click the File menu and then click Open.
2. Once the browser window is opened,
HEAD clement
3.3).
Figure usually contain?
This displays the Open dialog box (see
Self-Instructional
Material 29
Introduction to HTML D(enton r cree ltere txpre

9) the lntent addn de docunet lold, d

Intenet Evpe open loryou vpesthelavghomww2fgoogle%Ecom
a19ASerchhldAvG Into e Morg
Open
DDpnWa Fod
NOTES
[Cce o

Unavailable, The Web

The page you are leoking far is curently or yOU may need
ste might be expernencing techncal dficulbes,
to dst your browser sebngs

Please try the foliowing

" Click the ARefresh buton, or try a0in teter
you typed the pape address in the Address bar, make
sue that it is spelled correcty.

tions he ranaertont
tab, cick Settings. The setings should match those
provided bY your iocal area network (UAN) administrotor or

e t n atnas are being deected.

You can set Microsot Windows to eraminn your network
nd automaically discover natwork eonnecion setbngs (f
nshled

Figure 3.3 Open Dialog Box

3. Click Browse to locate the saved HTML document.
4. Select the file to be opened, click Open and then click OK. The browser will
open the Web page as shown in Figure 3.4.
2 First Page - Microsoft Internet Explorer
Fle Edk ylew Favorites Tools Help

Back
Address]E: meenuBSTT(05)-203 Web Technologi Go Links

Welcome to HTMLI

a Done
My Computer

Figure 3.4 Viewing HTML Document

Note: You can view the HTML code (written in
Web page, by clicking Source on the View Notepad) of an already created
make changes in HTML code, and save the menu of Internet Explorer. You can also
edited changes, click Refresh button on file after making changes. To view the
display the Web page with latest the Toolbar or press FS key. This will
changes.
Self-Instructional
30 Material
3.5 HYPERLINKS Introduction to HTML

Oe of the most significant teatures of HTML is to provide links to text, images or

rces on the Web. The links or the hyperlinks allow us to jump
from one page to NOTES
another or from one section to another in the same page.A hyperlink can be an image,
inn or test that allows access to any information in the Web pages in anon-hierarchical
manner Clicking on the hyperlink opens the linked file stored in your computer or any
alher computer across the globe (when connected to the Internet).Web pages, when
linked, provide a faster access to the information enabling us to move back and forth
batween two documents or sections casily.

3.51 Anchor Tag

The <A>(or anchor) tag enables us to create hyperlinks in an HTML document. Creating
alink requires two main information the URLof the file or Web resource to which the
ink is to be created, and the text that will act as a"hyperlink" or "hotspot" on the Web
nage which the user can click to follow the link.
The syntax of the ANCHOR element is
<A HREF="URL"> Link text</A>7
Where, HREF 0s an attribute which takes the location of the file ("URL") as its value.
The text ("Link text") enclosed between the opening and the closing anchor tags is the
actual link to the page, which acts as ahotspot. Figure 3.5 shows the parts ofan ANCHOR
element.

Opening Anchor Address (Atribute Vaue) Closing Anchor

Tag Tag

d HREP="ht tp ://w. zËles I, com/home page. html">It lesl homepage</A>

Attribute Name Link Tex

Figure 3.5 Understanding ANCHOR Element

Some of theimportant attributes of ANCHORelement are HREF, NAME, TITLE,

TARGET, and ALT. These are discussed in Table 3.1.
A Table 3.1 Attributes ofANCHOR Element
Description Atibute Valve
Attribute
Name
HREF |It specifics the location of the file or resource that you want URL of the
to provide a link to. The location specified can be the same resource
computer or any other computer (if connccted to a network).
Symbolic name
NAME It specifies a location within the same document. It creates
NAME anchor which is used to jump direcily to a specific
setion in the same docuient. When the name attribute is
Specificd in the <A> tag, the value of the HREP attribute is
preceded by a '#symbol.
TITLE |It specifies the title of the file that is hyperlinked. Thein theInformation about
appears as a tool tip of the hyperlink link
information (or title)
the Web page.
TARGET It specifies the location, generally name of the frame where Name ofa frame
1.
the browser should load and display the linked file.
ALT
It specifies the altermative text to be displayed when an Alternative text
image used as a hyperlink is not displayed.
Self-Instructional
Material 31
 demonstrate the use ofANCHOR element
-oduction to HTMLJ Example 3.1: An HTML Code to
<HIML>
<HEAD>
<TITLE>ANCHOR ATTRIBUTES</TITLE>
NOTES </HEAD>
<BODY>
<HR>
ANCHOR Element</H2>
<H2> Attributes of
<HR> attributes of the ANCHOR
explains different
This example
of the attributes are discussed later
element. However, some
<BR><BR>
in the examples. Web sites,
of some of the popular
Here are links to home page page. <BR>
Click a link to go to the desired
TITLE="go to yahoo home page">Yahoo
<A HREF="www.yahoo.com"
</A><BR>
to rediff home page">Rediff
<A HREF="www.rediff.com TITLE="go
</A><BR>
TITLE="go to hotmail home
<A HREF="www.hotmail.com"
page">Hotmail </A><BR>
page">Google
<A HREF="Www. google.com TITLE="go to google home
</A><BR>
<A HREF="Www.orkut. com" TITLE="go to orkut home page"> Orkut
</A><BR><BR>

Note that: <BR>

* The text in blue colour are links, which when selected
takes

you to a specific location.<BR>

* When the mouse pointer is placed on a link, the pointer
changes to a hand symbol and a tooltip appears just below
it. <BR>
The tooltip generally provide some information about the
link. <BR>

</BODY>
</HTML>

Self-Instructional
Material
The output of the HTML code is Introduction to HTML

ANCHOR ATIRIBUTES Microsoft Internet Expkoret

Fle Ede yew Favortes Ioos tb

'sah avates LJA NOTES

Attributes of ANCHOR Element

Thas example explans dufferent attnbutes of the ANCHOR element However, sone of the attrbutes are
dscussed later n the examples

Here are anks to home page of some of the popar web sites. Chck a ink to go to the desred
page.
Yahoo
Redaff
Hotnal
Google
Orkut
Note that
The text in blue colour are anks, which when
selected takes you to a specihc location
When the mouse pomter is placed on a link, the pointer changes to a
below it hand symbol and a toolip apptars just
The tooltip generally provide some infommabon about
the nk

My Comoutar

In the above example, some of the most common HTML elements such as
<H1>,
HR>, and <BR> are used. The <H1> or HEADING element specifies that the content
is in heading form, <HR> adds a horizontal rule or bar, and <BR> inserts a break and
starts text from a new line. These are discussed in detail in subsequent chapters.
Changing Link Colour
In the Example 3.1, you might have noticed that the hyperlinked text or hypertext is
displayed as an underlined text in specific colour. The colour of the link indicates the
status of the link that is, whether the link is visited, unvisited or active link. The colour of
the hyperlink can be changed by specifying values for LINK, VLINK, and ALINK
attributes in the BODY elenment. The value of these attributes can be cither abrowser
dependent colour name or an equivalent hexadecimal number.
The syntax for using LINK, VLINK and ALINK attributes in BODY element is
<BODY LINK=" #rrggbb" VLINK=" #rrggbb" ALINK="#rrggbb">
Content of the document
</BODY>

The Table 3.2 describes the various attributes used for specifying colours ofthe
hyperlink.
Table 3.2 Atributes for Specifying Colours of Hiyperlink
Attribute Name Description Default Value
| LINK It specifies the colour for all unvisited links, that Blue
is, the links that are not clicked.
|ALINK |It specifies the colour for active link, that is, the Red
link currently being clicked by the user.
VLINK It specifies the colour all visited links, that is, Purple
the links that have bcen clicked at least once.
Self-Instructional
Materigl 33
 LINK, VLINK and ..
Introduction to HTML Example 3.2: An HTML code to demonstrate the use of
attributes
<HIM>
<HEAD>
<TITLE>LinkStatus</TITLE>
NOTES
</HEAD>
VLINK="green" ALINK="blue"><BR>
<BODY LINK="red" Status</H2><BR>
<H2>Understanding Link Colour and
<BR>
Observe the foll owing Link: Desktop</A></H3><BR>
<H3>Show <A HREF="C:\ Desktop">
Note that:<BR>
time), the link
you open the page (for the first
* When
colour is
link.<BR>
red and it is an unvisited
link, the link colour changes to blue colour and
* Click the
it is
<BR>
an active link. again to
specified location, come back
Once you visit the
the LinkStatus page.<BR>
green colour and it is a visited
* The link colour changes to
link, <BR>

</BODY>
</HTML>

The output of the HTML code is:

Tinkstatus Microolt Inteuet xplotet
Be Eok Yew Fgvortes Ioos Hep

Understanding Link Colour and Status

Observe the folowing Link

Show Desltop

Note that ink.

When you open the page (for the Erst ime), the nk colour is red and it is an unvisited
"CLck the nk, the link colour changes to blue colour and it is an active nk
"Once you visit the specified location, come back again to the LnkStatus pAge.
The Enk. colour changes to green colour and itis a visted ink

My Conmouter

Linking can be done in two ways, namely, internal linking and external linking.

Self-Instructional
Material
InternalLinking CTnta) Introduction to HTML
linking refers to the linking of
Intrnal specific sections in the same document./This
impliesthatt when a hyperlink in one section of the Web page is
locationon the same Webr page. Linking in the same clicked, it directs to a
document enables users to
e
informationfaster in very long
pages. It saves time and reduces effort to scrollaccess
down
NOTES
theentire Web page to access the information.
To create a link to a section in the
samne
aThe first ANCHORelement is specified document, two ANCHOR elements are
with the HREF attribute, while the other
he NAME attribute. The named anchor
rs a section of the Web page with a name,
formed by the second ANCHOR element
NCHOR element specifies a link that directs whereas
the HREF attribute in the first
the browser to the named anchor.
Thesyntax for using HREF attribute in ANCHOR element is
HREF="#section1"> Goto sectionl</A
The syntax for using NAME attribute in ANCHOR element is
section1">content of section</A>
Note: The value of the NAME attribute in the second ANCHOR
element should be
same as that of the HREF attribute in the first ANCHOR element.
Bxample33: An HTMLcode to demonstrate the use of NAME and HREF attributes of
ANCHOR element
HTML>
<HEAD>

<TITLE>Internal Linking!</TITLE>
</HEAD>
<BODY>
<H1>UNIFORM RESOURCE LOCATOR (URL) </H1>
<A NAME="TYPES OF URL"><FONT SIZE="+2">Types of URL</FONT></
ASBR>
1<A HREF="#ABSOLUTE URL"> Absolute URL</A><BR>
<A HRER= "#RELATIVE URL"> Relative URL</A><BR>
<HR SIZE="2 ">

<A NAME "ABSQLUTE URL">7B>Absolute URL</B</A><BR>

An absolute URL defines the exact location of the Web page
or any other resource on the Internet. For example, http: //
www.rediff.com/education/iit/home.htm. Here, the Web page
the
home.htm is stored under the folders '/education/iit on
Web server www.rediff.com. <BR>
<HR>
</B></A><BR>
|<A NAME="RELATIVE URL"> <B>Relative URL
In a relative URL, each part of a URL does not need to be
specified. You can abbreviate a URL by making it "relative
to the current location. Relative URLS are typically used
while creating a Web site in which the Web pages are referred
to each other. For example, suppose there exists a file
mypicture.gif residing in the image folder under the IIT
folder. The relative URL for the tile will be /images/
mypicture.gif.<BR>
Self-Instructional
Material 35
 Introduction to HTML. <A
HRER=*#TYPES of URL">Types of URL</A>
<HR>
</BODY>
</HTM>
NOTES
The output of the HTML code is

Internal Linking!- Microsoft laternet [xplorer

Ele Ed Yew Fgvortes [oos U

UNIFORM RESOURCE LOCATOR (URL)

Types ofURL
Absohte VRL
Relative URL
Absolute URL
An absolute URL defines the exact location of the web page or any otther resource on the Internet For exaple.
htp llwww rediff comleducatonuthome htrn Here, the web page hone
htrn is stored under the
folders leduc abionat
on the web server www.redf com

Relative URL
In arelative URL, each part of a URL does not need to be spectied You can abbreviate aURL by making it
relatrve" to the current locaton Relative URLS are typically used whale creating a
web ste in whuch the web
pages are referred to each other For exanple, suppore there easts a fle mypicture gaf residang h the image
mypictre g
folder under the IT folder The relative URI. for the fe wll be
Amages/mypicture gf
Types of URL

Done
YConputer

External Linking
External linking refers to linking between different Web pages. This implies that when
you click a hyperlink in one Web page, it opens another Web page, image, etc. As
discussed earlier, for creating hyperlinks the HREF attribute is specified. The value of
HREF is the URL ofthe file and it varies depending on the location of the file.
" Creating hyperlink to the file in the same folder: It requires
the file name in the URL. For instance, the URL " file .htmlspecifying only assigned to
HREF creates an hyperlink to a file named file . html in the same folder.
" Creating hyperlink to the file in a different folder: It requires
both the folder and the
specifying
filename in the URL, For instance, the URL "folder/
file.html " assigned to HREF creates an hyperlink to a file named
file .html located in adifferent folder.
"Creating hyperlink to the file on the Web: It requires specifying the absolute
URL indicating the hostname, folder and file name in the URL. For instance, the
URL "dghttp://www.server.com/ folder/file .html" assigned
to HREF creates an hyperlink to a file named file.html located on a Web
server.

ample 3.4: An HTMLcode to demonstrate extemal linking in a

<HTM> document
<HEAD>

Self-instructional
36 Material
 AITLE>External Linking</TITLE>
</HEAD> Introduction to HTML
RODY><FONT SIZE="+1 >
H2>A Web page
Tocations</H2><BR>containing hyperlinks to files at
different
NOTES

KA
HREF="linkl,html">Hyperlink
AARURL for creating the link
to file in the same
is folder</
etI><A HREF="java "linkl.html"</A></LI>
in different programming/filel.doc*>Hyperlink
folder</A><BR>|URL for creating the link
"java programming/filel.doc*</LI>
to file
is
LI><A HREF="http://www.ibnlive. in.com/news/filename.html">
HYperlink to file on the
link is Web</A><BR>URL for creating the
<LI><A
httpHREF"http://www.ibnlive.in.com
:/ www.ibnlive.Hyperlink
filename. html#section1
in.comtnews/filename.htm/news/
">
l to a specific section in
</LI>
a
file</A><BR>URL
wWww.ibnlive. in,
tor creating the link is http:L
</UL> com/news/filename.html#sectionl </LIS
</P>
</FONT>
</BODY>
</HTML>

The output of the HTML code is

Edetnat Linking MIcreoft Inter net Explárer
Be Ed Yyow Fvartes Iools Hep
Bak

A web page containing hyperlinks to files at different locations

Hyperluk to fle in the sanse folder

URL for ereating the link is "lakl. htunl"
Hyperunk to fle in iffereut folder
URL for creating tlse liuk is "jva progranning/flel. doe"
Hyperbk to fle on the Web
URL for creating tse link is "http://www.ibnlrve.il. consnews/fleuane.htunl
Hyperink to aspeçifi sechon in afle
URL for creating tlie liuk is "htp://www.ibnlive.iin.con/uews/flemnse.htbn#sectionl"
Check Your Progress
4 Name the tools
required to create
and view an
HTML document.
Done 3 MyConouter State the most
significant feature
of HTML.
hthis example, <UL> and <LI> elements are used to create an unordered list. Unordered 6. What does extemal
and ordered list are discussed in detail in Unit 5.
linking refer to?

Self-Instructional
Material 37
 Introduction to HTML Image asa Hyperlink
To make an i
Image can also be used as a hyperlink with the ANCHOR element.
closing tags of
a hyperlink. the IMAGE element is placed within the opening and
ANCHOR element.
NOTES a hyperlink is
an image as
The syntax to create <IMG> </A>
<A HREF=" ">
discussed in detail in Unit 4.
The IMAGE element is

HOME PAGE
3.6 DESIGNINGA
that you see when you open any Weh
/The home page or index page is the first pagepage provides basic information abou#
site. It acts as a user's guide to the site; as home
the site/ Note that if there is not much
the Web site and contains links to other pages of be the only page of
information to be displayed about the Web site, the home page may
site and enhancing its quality
the Web site. It is the most important page of a Web an effective home page
increases the value of the entire Web site. Thus, designing
guidelines which must be followed
should be the main concern. Following are some ofthe
while designing the home page.
"Identify and decide the purpose of both the Web site and the aim home page. For
of the home
instance, if the site is designed with an aim to sell product, the
pages that will
page woukd be to giveaproduct overview and to link visitors to the
help them to buy the product.
" The home page must fulfill requirements ofboth, the new
usersvisiting for the
first time and the repeat users-visiting the site again. It must contain separate
areas for both the users. The area which is meant for the new users must include
for
sufficient information describing what the site is all about. Whereas, the area
the repeat users must contain specific information and 'what's new' section as
the visitor already knows about the site.
" The text, links, pictures, sound and video that you want to include on the front
page must be selected keeping the purpose of the Web site in mind.
" Use appropriate layout and proper formatting while placing the content onto the
page. The labels ofthe links should be informative and clear.
"Add components such as, a tag line, search box, navigation menu and contact
information to make the page more effective.
" Certain options such as the subscription and membership option can be placed on
Check Your Progress
the home page to encourage the users to come back to the site again.
What is a home
" Keep check on the graphics used on the Web page. Minimize and optimize the
7

page?
graphics to enable faster loading oftheWeb site especially, the home page.
What does the
home page 3.7 SUMMARY
provide?
9. What should the
In this unit, you have learned that:
area for repcat
visitors in a home
page contain? " the
Hypertext Markup Language (HTML) is astructured language that deseribes
syntax and structure ofa document in a well-defined manner.
Self-Instructional
38 Material
 .1089, HTML was
Cauropeen pour Recherchédeveloped by Tim Berner-Lecc, a
TML was considered to Nucleaire
rescarcher at Conscil
(CERN) laboratory, Geneva, Introduction to HTML

be an
application of Standard Switzerland.
tanguage (SGML), which serves as a base to Generalized Markup
clement is a distinctive definea markup
component of document's structure suchlanguages
ragraphs, horizontal lines, as NOTES
eomprises an opening tag (and itsAn element is identified by the tag. It headings.
etc.
slements can be classified into twoattributes), content and closing tag. generally
elements. Container Element is antypes, namely, container elements and empty
element that has both opening and
os, Empty Element is an closing
element that has only the opening tag.
Atributes provide additional information such as
the text or image, etc. alignment, font, colour, size of
HTML clement contains HEAD and BODY
of HTML element. elements that form the primary sections
Text editor is a program that saves the
files in plain text (ASCII Format), that is,
Rihout any text formatting or special characters.
Web browser is used to display the Web
pages that are created using HTML.
The links or the hyperlinks allow us to jump from
section to another in the same page. one page to another or from one
The <A> (or anchor) tag enables us to
create hyperlinks in an HTML document.
Internal linking refers to the linking ofspecific sections in the
Bxternal linking refers to linking between different Web pages. same document.
Image can also be used as a hyperlink with the ANCHOR Clement.
The home page or index page is the first page that you see
when you open any
Web site. It acts as a user's guide to the site; as home page
provides basic
information about the Web site and contains links to other pages of the site.

3.8 KEY TERMS

HTML: Short for hyper text markup language, it is a structured language that
describes the syntax and structure of a document in a well-defined manner.
" Element: It is a distinctive component of document's structure such as headings,
paragraphs, horizontal lines, etc.
" Text editor: It is a program that saves the files in plain text (ASCII Fomat), that
is, without any text formatting or special characters.
" Internal linking: It refers to the linking of specificsections in the same document.
" Home page: Also known as index page, it is the first page that you see when you
open any Web site.

39 ANSWERS TO CHECK YOUR PROGRESS

1. The major challenge confronting Tim Berner Lee was that information had to be
displayed in asimilar way on all the systems iespective of theoperating systems,
Screen sizes and browsers being used. Sel-Instructional
Material 39