HTML an Introduction

UNIT 5

Unit 5

HTML AN INTRODUCTION

Structure
5.0

Introduction

5.1

Objective

5.2

Introduction to URI

5.3

5.2.1

Fragment Identifier

5.2.2

Relative URIs

History of HTML
5.3.1

5.4

Standard Generalized Markup Language

Structure of HTML document

5.4.1

Switching between your Editor and Browser

5.5

Structuring your Web Page

5.6

Paragraph and Line Break Tags

5.7

Adding Comments

5.8

Formatting your Text

5.9

Creating Lists
5.9.1

The OL (Ordered List) Tags

5.9.2

The UL (Unordered List) Tag

5.9.3

Nesting Lists

5.9.4

Controlling How Ordered Lists are displayed

5.9.5

Creating a Multilevel Outline

5.9.6

Using Start and Value Attributes in an Ordered List

5.9.7

Controlling the Display of Unordered List

5.10

Creating Definition List

5.11

Creating HyperText Links

5.11.1
5.11.2
5.11.3
5.11.4

5.12

Linking to a File or Data Object

Linking to NON-WWW Files
Linking to a Place in the Same HTML File
Linking to a Place in Another HTML File

Creating Link Lists

5.12.1 Creating a Simple Link List

5.13

Inserting Inline Images

5.13.1 Using the Align Attribute in Inline Graphics
5.13.2 Setting the Height and Width of an Inline Image

Internet, HTML and MultiMedia

Page 75

HTML an Introduction

5.14

Creating Image Links

5.15

Horizontal Rules

Unit 5

5.15.1 Changing the Height of a Horizontal Rule

5.15.2 Changing between Shaded and Unshaded Horizontal Rule
5.15.3 Changing the Width of a Horizontal Rule
5.15.4 Setting the Alignment of a Horizontal Rule

5.16

Address Tag

5.17

Working with Text

5.17.1 Text Alignment

5.18

Changing Font Sizes and Colors

5.18.1 Setting Font Sizes
5.18.2 Setting the Base Font
5.18.3 Using the Small and Big tags
5.18.4 Changing the Font Color

5.19

Using a Background Image

5.20

Marquee Tag

5.21

Self Test

5.22

Exercise

5.23

Summary

5.0 INTRODUCTION
In this unit you are going to learn some basics of HyperText Markup Language
which is used to write HTML documents. Once you create an HTML document it
can be viewed in any browser. There are lot of web sites like xoom.com and
rediff.com, which provide web space for your personal web site. After finsihing
this chapter, you will be able to write web documents. Once you create your web
pages, you can upload these pages to your site using any FTP Software.

This

unit dicusses the basic tags required for creating the HTML document.
You will be learning how to use List and Hyperlink text effectively in your
document. You will also learn to format your document and to include images
in your document. Images will improve the appearance of your document.

Internet, HTML and MultiMedia

Page 76

HTML an Introduction

Unit 5

5.1 OBJECTIVE
After finishing this unit you will be able to:
Discuss about URI
Write your personal web page using Basic HTML elements.
Describe about HTML, BODY, HEAD AND heading elements of web page.
Figure out different HTML tags, including List and Hyperlink text element.

5.2 INTRODUCTION TO URI

The World Wide Web (Web) is a network of information resources. The Web
relies on three mechanisms to make these resources readily available to the
widest possible audience:
A uniform naming scheme for locating resources on the Web (URI)
Protocols for accessing resources over the Web (HTTP).
Hypertext for easy navigation among the resources (HTML).
Every resource available on the Web i.e. HTML document, image, video clip,
program, etc. has an address that may be encoded by a Universal Resource
Identifier, or "URI". URI's typically consist of three pieces:
The naming scheme of the mechanism used to access the resource.
The name of the machine hosting the resource.
The name of the resource itself, given as a path.
Consider the URI that takes you to the HTML 4.0 specification in World Wide Web:

http://www.w3.org/TR/REC-html40/
This URI may be read as follows: There is a document available via the HTTP
protocol, residing on the machine www.w3.org, accessible via the path
"/TR/REC-html40/". Other schemes you may see in HTML documents, include
"mailto" for email and "ftp" for FTP.
You may be familiar with the term "URL" and not the term "URI". URLs are a
subset of the more general URI naming scheme.
Internet, HTML and MultiMedia

Page 77

HTML an Introduction

Unit 5

5.2.1 Fragment Identifiers

Some URI's refers to a location within a page. This kind of URI ends with "#"
followed by an anchor identifier (called the fragment identifier). For instance, here
is a URI pointing to an anchor named section_2 in top.html page.
http://somesite.com/html/top.html#section_2

5.2.2 Relative URIs

A relative URI doesn't contain any naming scheme information. Its path generally
refers to a resource on the same machine as the current document. Relative
URIs may contain relative path components (e.g., ".." means one level up in the
hierarchy defined by the path), and may contain fragment identifiers.
Relative URIs are resolved to full URIs using a base URI. Base URI is specified
in the document Head. As an example of relative URI resolution, assume we
have the base URI "http://www.acme.com/support/intro.html". The relative URI in
the following markup for a hypertext link is
<A href="suppliers.html">Suppliers</A> would expand to the full URI
"http://www.acme.com/support/suppliers.html", while the relative URI in the
following markup for an image is
<IMG src="../icons/logo.gif" alt="logo"> would expand to the full URI
"http://www.acme.com/icons/logo.gif".
In HTML, URIs are used to:
Link to another document or resource.
Link to an external style sheet or script.
Create an image map.
Submit a form.
Create a frame document.
Cite an external reference.
Refer to metadata conventions describing a document.

Internet, HTML and MultiMedia

Page 78

HTML an Introduction

Unit 5

5.3 HISTORY OF HTML

HyperText Markup Language (HTML) is a method where ordinary text can be
converted into hypertext. It is a set of special codes included to control the layout
and appearance of the text. Technically, HTML is not a programming language. It
combines instructions within data to tell a display program called browser, how to
render the data that the document contains.
HTML is the character-based method for describing and expressing the
content. The content is pictures, text, sound and video clips.
It delivers the contents to multiple platforms.
It links document components or documents together to compose compound
documents.
Tim Berners-Lee developed HTML in early 1990 at CERN (Conseil European de
la Recherche Nucleaire), the European Particle Physics Laboratory in Geneva,
Switzerland. HTML is a public domain and not owned by anybody. The W3C
[World Wide Web Consortium www.w3.org] is the body, which controls the
HTML standards. The HTML Working Group comprises of industry leaders,
content providers and other leading experts who provide input on Web
accessibility and internationalization.
Tim Berners-Lee originally developed HTML, and was popularized by the Mosaic
browser. During 1990s it has blossomed with the explosive growth of the Web. During
this time, HTML has been extended in a number of ways. HTML 2.0 specification was
developed under the protection of the Internet Engineering Task Force (IETF) to codify
common practice in late 1994. HTML 3.0 proposed much richer version of HTML.
Despite never receiving consensus in standards discussions, these drafts led to the
adoption of a range of new features. The efforts of the World Wide Web Consortium's
HTML Working Group to codify common practice in 1996 resulted in HTML 3.2. HTML
4.0 extends HTML with mechanisms for style sheets, scripting, frames, embedding
objects improved support for right to left and mixed direction text, richer tables and
enhancements to forms, offering improved accessibility for people with disabilities.
Internet, HTML and MultiMedia

Page 79

HTML an Introduction

Unit 5

5.3.1 Standard Generalized Markup Language

HTML is a subset of SGML. SGML originated in 1960s at IBM to overcome the
problems in moving the documents across the multiple hardware platforms and
Operating Systems. IBM's efforts were called GML [General Markup Language].
Later in 1980 SGML came into existence.

5.4 STRUCTURE OF HTML DOCUMENT

HTML generally has 2 parts an on-code and an off-code, which contains the text
to be defined. Few tags do not require an off-code.
Syntax: <tagname>. </tagname>
The most important thing to keep in mind about HTML is that its purpose is not to
specify the exact formatting or layout of a web page, but rather to define and
specify the specific elements that make up a page such as the body of the text,
heading, paragraphs, line breaks, text elements and so on. You can use HTML to
define the composition of a web page, not the appearance.

5.4.1 Switching Between Your Editor and Browser

1. Load any editor. E.g., Notepad.
2. Create the HTML file and save it, with extension .htm or. html.
3. View it in any browser e.g., Internet Explorer or Netscape Navigator.
Tag or Tag element: refers to the HTML codes that define the element in an
HTML file, such as headings, images, paragraphs and list. There are two kinds of
tags the container tag and empty tag (HTML tags are inserted into a document
between < and > symbols. Tags are not case-sensitive).
Container Tag: These tags which bracket or contain text or other tag elements
are called container tags. These actually consist of two tags, a start tag and an
end tag which enclose the text they affect.
Empty Tag: These are standalone and do not bracket or contain text or any
other tag elements. An empty tag function is a standalone element within an
HTML documents and thus does not bracket or contain anything else.
Internet, HTML and MultiMedia

Page 80

HTML an Introduction

Unit 5

Attribute: Allows you to specify how web browsers should treat a particular tag.
An attribute is included within the actual tag, either within a start tag or an empty
tag. End tags should not contain attributes.
Syntax:

Attribute = value
E.g., align=center

Starting your Page Document tags: All HTML files should include at least
these tags:
The HTML tag

The Title tag

The Head tag

The Body tag

The HTML Tag: This tag defines the top-most element, identifying it as an HTML
document. It is a container tag that has a start and an end tag and all the other
tags and texts are nested within it.
Syntax: <HTML>
.
</HTML>
The Head Tag: This tag contains information about your HTML file. It may also
contain other tags that helps you to identify your HTML file to the outside world.
The Head Tag is nested within the HTML tag.
Syntax: <HTML>
<HEAD>
.
</HEAD>
</HTML>
Usually, the only tag contained within the head tag is the title tag. Other tags also
can be contained within the head tag but they are used less often.
The Title Tag: This tag is nested within the Head tag. It identifies your page to
the rest of the world. The tag output is displayed on your browsers title bar but
does not appear as part of the page.

Internet, HTML and MultiMedia

Page 81

HTML an Introduction

Unit 5

Syntax: <HTML>
<HEAD>
<TITLE>
Your Title: Describe your title
</TITLE>
</HEAD>
</HTML>
Title tag is a required element that you should include in each and every HTML
document. If you do not include a title, the title of your page appears in some
browsers as Untitled whereas in others just the URL for the page appears on
the browsers title bar.
The Body tag: This tag is the compliment of the Head tag and contains all of the
tags, or elements that a browser actually displays as the body of your HTML
document. Both the Head tag and the Body tag are nested within the HTML tag.
Body tag comes after the head tag, they denote a separate part of the HTML
document.
Syntax: <HTML>
<HEAD>
<TITLE>
My First Web page
</TITLE>
</HEAD>
<BODY>
.
</BODY>
</HTML>

5.5 STRUCTURING YOUR WEB PAGE

You can use headings to organize your web into hierarchical levels. Headings
also act as separators in a word processing document. The top level heading
(H1) actually is the title for your page, i.e., it is appears in a browser window at
the top of the web page. There are 6 levels of heading.

Internet, HTML and MultiMedia

Page 82

HTML an Introduction

Unit 5

You can also use a second-level heading (denoted by the H2 tag) to define a
major division in your page, and a third level heading (using the H3 tag) to define
a sublevel division within a major division. Most browsers support upto six
different levels.
<BODY>
<H1>This is a top-level Heading </H1>
<H2>This is a second-level Heading </H2>
<H3>This is a third-level Heading </H3>
<H4>This is a fourth-level Heading </H4>
<H5>This is a fifth-level Heading </H5>
<H6>This is a sixth-level Heading </H6>
</BODY>

5.6 PARAGRAPH AND LINE BREAK TAGS

The P (paragraph) and BR (break) tags lets you insert block and lines of text on
your page.
The P (Paragraph) tag:
The P tag is a container element, but with an implied ending. You do not have to
include the </P> end tag. Any following start tag that defines a new block
element implies the end of the tag. So, when you use the P tag, just insert the
<P> start tag at the beginning of a paragraph but leave off the </P> at the end.
Example:

<HTML>
<HEAD>
<TITLE>
MY FIRST WEB PAGE
</TITLE>
</HEAD>
<BODY>
<H1>MANIPAL ACADEMY OF HIGHER EDUCATION</H1>
<P>

Internet, HTML and MultiMedia

Page 83

HTML an Introduction

Unit 5

Manipal has already made a name in imparting professional education not only in
India, but also at the international level. Doctors, engineers, nurses, pharmacists
and other professionals from Manipal have made a mark wherever they have
gone to practice or work.
<P>
The Government of India conferred the deemed University status on Manipal on
June 1993, giving birth to the Manipal Academy of Higher Education, popularly
known as MAHE.
</BODY>
</HTML>

Figure 5.1

The BR (Line Break) tag:

The BR (Line Break) tag is an empty, or stand-alone, tag that simply inserts a
line break.
Example:

<P>For Further details contact <BR>

MAHE<BR>MANIPAL<BR>
Karnataka

Internet, HTML and MultiMedia

Page 84

HTML an Introduction

Unit 5

5.7 ADDING COMMENTS

The comment tag is a stand-alone tag that enables you to include messages for
your own or anyone elses future references. A comment always begins with a
<!-- and ends with a -- >
Example:

<! -- type your comments here -- >

5.8 FORMATTING YOUR TEXT

Using Italic and Bold Highlighting: HTML has two ways to include italic or bold
text on your web page. The first way involves using literal tags: the B (Bold) tags
and I (Italic). The second way is to use logical tags: the EM (emphasis) and
Strong (strong emphasis) tags. Most browsers displays the I (Italic) and EM
(Emphasis) tags identically, just as they display the B (Bold) and Strong (Strong
Emphasis) tags identically.
Block Quotes : The Blockquote (Block Quote) tag double-indents a block of text
from both margins.
Example:

<HTML>
<HEAD>
<TITLE>
MY FIRST WEB PAGE
</TITLE>
</HEAD>
<BODY>
<H1>MANIPAL ACADEMY OF HIGHER EDUCATION</H1>
<BLOCKQUOTE>
<P>

Manipal has already made a name in imparting professional education not only in
India, but also at the international level. Doctors, engineers, nurses, pharmacists
and other professionals from Manipal have made a mark wherever they have
gone to practice or work.

Internet, HTML and MultiMedia

Page 85

HTML an Introduction

Unit 5

<P>
The Government of India conferred the deemed University status on Manipal on
June 1993, giving birth to the Manipal Academy of Higher Education, popularly
known as MAHE.
</BLOCKQUOTE>
</BODY>
</HTML>

Figure 5.2

Preformatted text : The PRE (Preformatted text) tag is used to display a block
of preformatted text in a monospace, fixed-pitch font. You use the PRE tag to
display a block of text as is, including all spaces and hard returns. One of the
primary uses of the PRE tag is to display text in a tabular or columnar format in
which you want to make sure that the columns remain properly aligned.
Internet, HTML and MultiMedia

Page 86

HTML an Introduction

Example:

Unit 5

<HTML>
<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<PRE>
SALES FIGURES FOR FIRST QUARTER OF 1996
---------------------------------------------------------JANUARY FEBRUARY MARCH TOTAL
ANDERSON $ 10,200 $ 20,015 $ 14,685 $ 44,900
BAKER
30,500
25,885
50,225
106,610
PETERSON
15,900
20,115
18,890
54,905
WILSON
40,100
35,000
29,000
104,100
---------------------------------TOTALS
$ 96,700 $101,015 $ 112,800 $ 310,515
</PRE>
</BODY>
</HTML>

Figure 5.3

Internet, HTML and MultiMedia

Page 87

HTML an Introduction

Unit 5

5.9 CREATING LISTS

Headings and paragraph text elements are used more commonly than lists.
Many Web pages are nothing but lists of hypertext links. You can create two
types of list: Ordered and unordered. An ordered list is a numbered list, and an
unordered list is a bulleted list.

5.9.1 The OL (Ordered List) Tag

The OL (Ordered List) tag defines a sequentially numbered list of items. It is used
in conjunction with the LI (List Item) tag, which is used to tag the individual list
items in a list.
Example:

<HTML>
<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<OL>
<LI> COMPUTER CONCEPTS
<LI> MS-WINDOWS
<LI> MS-EXCEL
<LI> MS-WORD
<LI> FOXPRO
</OL>
</BODY>
</HTML>

Figure 5.4

Internet, HTML and MultiMedia

Page 88

HTML an Introduction

Unit 5

Notice that the LI tags do not have end tags in this example. The reason is that
the end tag (</LI>), like the end tag for the P tag is implied.

5.9.2 The UL (Unordered List) Tag

The UL (Unordered List) tag defines a bulleted list of items. The Li (List Item) lag
is nested inside the UL tag and defines each item within the list.
Example:

<HTML>
<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<UL>
<LI> COMPUTER CONCEPTS
<LI> MS-WINDOWS
<LI> MS-EXCEL
<LI> MS-WORD
<LI> FOXPRO
</UL>
</BODY>
</HTML>

Figure 5.5

Internet, HTML and MultiMedia

Page 89

HTML an Introduction

Unit 5

5.9.3 Nesting Lists

You can nest a list inside another list. The browser automatically indents nested
list levels. You can nest the same or different kinds of lists.
Example:

<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<UL>
<LI>SOFTWARE
<OL>
<LI> COMPUTER CONCEPTS
<LI> MS-WINDOWS
<LI> MS-EXCEL
<LI> MS-WORD
<LI> FOXPRO
</OL>
<LI> HARDWARE
<OL>
<LI> CPU
<LI> INPUT DEVICES
<LI> OUTPUT DEVICES
<LI> HARD DISK
<LI> FLOPPY DISK
</OL>
</UL>
</BODY>
</HTML>

Internet, HTML and MultiMedia

Page 90

HTML an Introduction

Unit 5

Figure 5.6

5.9.4 Controlling how Ordered Lists are Displayed

The TYPE attribute allows you to specify the number type for an ordered (OL)
list. Besides making it possible for you to specify a number type for a numbered
list, this attribute allows you to create multilevel outlines.
Specifying the Number Type: You can use the TYPE attribute to specify the
number type for an ordered (OL) list. The values that you can use with the TYPE
attribute are A, a, I, i, and 1 for specifying uppercase letters, lowercase
letters, uppercase roman numerals, lowercase roman numerals, or Arabic
numbers, respectively.
Example:

<OL TYPE=I>
<LI>This is item one.
<LI>This is item two.
<LI>This is item three.
<LI>This is item four.
</OL>

Internet, HTML and MultiMedia

Page 91

HTML an Introduction

Unit 5

5.9.5 Creating a Multilevel Outline

By applying different number types to the different levels of a nested ordered list,
you can create a multilevel outline.
Example:

<HTML>
<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<OL TYPE="I">
<LI>LEVEL ONE OUTLINE LEVEL.
<OL TYPE="A">
<LI>LEVEL TWO OUTLINE LEVEL.
<OL TYPE="1">
<LI>LEVEL THREE OUTLINE LEVEL.
<OL TYPE="A">
<LI>LEVEL FOUR OUTLINE LEVEL.
<LI>LEVEL FOUR OUTLINE LEVEL.
</OL>
<LI>LEVEL THREE OUTLINE LEVEL.
</OL>
<LI>LEVEL TWO OUTLINE LEVEL.
</OL>
<LI>LEVEL ONE OUTLINE LEVEL.
</OL>
</BODY>
</HTML>

Internet, HTML and MultiMedia

Page 92

HTML an Introduction

Unit 5

Figure 5.7

5.9.6 Using START and Value Attributes in an Ordered List

The START attribute in an OL start tag is used to start the numbering sequence
at a particular number. You can use the VALUE attribute in an LI tag to restart
the numbering sequence at a particular number.
For example, first start the numbering sequence at 3, and then restart it at 8, then
enter the following commands.
<OL START=3>
<LI>THIS SHOULB BE NUMBERED AS 3.
<LI>THIS SHOULD BE NUMBERED AS 4.
<LI VALUE =8>THIS SHOULD BE NUMBERED AS 8.
<LI>THIS SHOULD BE NUMBERED AS 9.
</OL>
The numbering sequence will be started or restarted using the current TYPE
attribute value.
Internet, HTML and MultiMedia

Page 93

HTML an Introduction

Unit 5

5.9.7 Controlling the Display of Unordered List

Specifying a Bullet Type: The TYPE attribute can be used to specify the type of
bullet for an unordered list. The values that you can use with the TYPE attribute
are disc, circle, and square. Only Netscape Navigator recognizes this
attribute.
Example:

<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<UL TYPE="SQUARE">
<LI>SOFTWARE
<UL TYPE="DISC">
<LI> COMPUTER CONCEPTS
<LI> MS-WINDOWS
<LI> MS-EXCEL
<LI> MS-WORD
<LI> FOXPRO
</UL>
<LI> HARDWARE
<UL TYPE="CIRCLE">
<LI> CPU
<LI> INPUT DEVICES
<LI> OUTPUT DEVICES
<LI> HARD DISK
<LI> FLOPPY DISK
</UL>
</UL>
</BODY>
</HTML>

Internet, HTML and MultiMedia

Page 94

HTML an Introduction

Unit 5

Figure 5.8

5.10 CREATING DEFINITION LISTS

The DL (definition List) tag allows you to create glossaries or list of terms and
definitions. A glossary consists of three tag elements: a tag to define the list (DL),
a tag to define the term (DT), and a tag to define the definitions (DD).
Example:

<HTML>
<HEAD>
<TITLE>DEFINITIONS LIST</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Hardware

Internet, HTML and MultiMedia

Page 95

HTML an Introduction

Unit 5

<DD>Is defined as physical or tangible equipments associated with computer

systems. Examples of hardware are Central Processing Unit, Input Devices,
Output Devices, and Secondary Storage Devices.
<DT>Software
<DD>Is a set of Programs. <DT>Peripherals
<DD>Equipments connected around the CPU.
</BODY>
</HTML>

Figure 5.9

Internet, HTML and MultiMedia

Page 96

HTML an Introduction

Unit 5

5.11 CREATING HYPERTEXT LINKS

One of the main reasons to create a Web page is to create links to other pages.
To do that, you need the A (Anchor) tag.
Hyperlink text is not only used to jump to and view another Web page, or jump to
a specific place in either the same web page or another Web page, but to display
an image, download a program, send an e-mail message, run a script, access a
database, telnet to server, and so on. You can use hypertext links to jump to
anything that has an address on the Internet, as long as you do not need a
password. The three basic kinds of hypertext links are:
Links to other HTML documents or data objects. These are by far the most
commonly used links on the Web. They allow you to jump from one Web page to
another, as well as to anything else that has an address on the Net (not just the
Web), such as Gopher files, FTP archives, and images.
Links to other places in the same HTML document. These links allow you to
jump from one place in the same Web page to another point on the same Web
page. Many Web pages have directories or table of contents at the beginning of
the page, allowing you to decide which part of the page you would like to view.
You just have to click the link to jump to that section of the page or document.
Links to places in other HTML documents. These links are quite similar to links
to places in the same document, except that you can jump to a certain section on
other pages i.e. you can click on a hypertext link and jump to some point halfway
down another Web page.
You use the A (Anchor) tag to anchor one or both ends of a hypertext links. The
first kind of link, where you link to another Web page or data object, requires only
one anchor. The second and third kinds of links, where you link to another place
in the same or another Web page, however, require both ends of the link, that is,
both a launch pad and a landing spot. This other end of a hypertext link,
where you link to a specific place in the same or another Web page, is often
called as a target anchor.
Internet, HTML and MultiMedia

Page 97

HTML an Introduction

Unit 5

Anatomy of the A (Anchor) Tag

The hypertext links is composed of three elements:
Start and end tags that enclose the whole link
The link target
The link text
Start and End tags

<A HREF=SUB.HTML>Go to Sub document </A>

Link Target

Link Text

The figure illustrates the three parts of a hypertext links.

The figure uses the HREF (Hypertext Reference) attribute to specify the URL or
address of the object of the link, which here is simply another Web page. Note
that the full address (URL) is not given, just the filename. This means that the
Web page being linked to is in the same directory as the Web page from where
the link is being made. If you want to form a link to a Web page on another
server, then the full URL should be specified.
When using the A (Anchor) tag, you must include the HREF attribute or the
NAME attribute. You use the NAME attribute, only when you want to create a
target link. Therefore, linking to another Web page or data object requires only
the A (Anchor) tag with the HREF attribute, whereas linking to another place in
the same or another Web page requires two A (Anchor) tags the first with the
HREF attribute and the second with the NAME attribute.
Internet, HTML and MultiMedia

Page 98

HTML an Introduction

Unit 5

5.11.1 Linking to a File or Data Object

You can form an HTML link to anything on the Web that has an address, or URL.
You can jump to Australia, or simply to a file residing in your own directory on
your own server. To create a hypertext link that jumps to a file that is not in your
own directory, include the entire URL of the file to which you want to jump.
Example:
<p>Click here to jump to <A HREF=SUB.HTML> subdocument </A>

5.11.2 Linking to NON-WWW Files

You can link to files other than just HTML files. Generally, your browser should
be able to directly display any ASCII text file, whether on a Web or a Gopher
server, and should also be able to display ZGIF or JPEG graphics. Other kinds of
files might require viewers or players, such as sound, animation, or video files.
One of the newest things, however, is support for streaming audio and animation
with RealAudio or Shockwave, which allows audio and animation clips to be
streamed (played while being downloaded) rather than downloaded first and then
played.

5.11.3 Linking to a Place in the Same HTML File

To link to another place in the same HTML file requires both an HREF anchor
and a NAME anchor. An HREF anchor that links to a NAME anchor has a special
form:
<A HREF=#anchorname>anchortext</A>
Notice the # symbol. In an HREF anchor, the # symbol is the only thing that
identifies the HREF attribute as the name of a NAME anchor rather than an
address or filename. (The # symbol combined with the following anchorname
sometimes is also called as a fragment identifier)

Internet, HTML and MultiMedia

Page 99

HTML an Introduction

Unit 5

The common uses for linking HREF and NAME anchors on the same page are:
A directory or table of contents that links to the major headings of a page.
Cross-references between different points in the text.
Links to footnotes at the bottom of the page.
The following is an example of creating a directory or table of contents that will
be displayed at the top of the Web page and that will then link to subheading
sections in the same document.
<HTML>
<HEAD>
<TITLE>Linking Pages</TITLE>
</HEAD>
<BODY>
<H2>USING HYPERTEXT LINKS </H2>
<P>
<A HREF="#PAGE"> LINKING TO ANOTHER PAGE OR FILE </A><BR>
<A HREF="#LOCAT">LINKING TO A PLACE ON THE SAME PAGE </A><BR>
<A HREF="#LOCPG">LINKING TO A PLACE ON ANOTHER PAGE </A><BR>
<H3>
<A NAME="PAGE">
LINKING TO ANOTHER PAGE OR FILE</A></H3>
<P>
YOU CAN FORM A LINK WITH ANYTHING ON THE WEB THAT HAS AN ADDRESS,
OR URL...
<BR>
<H3>
<A NAME="LOCAT">LINKING TO A PLACE ON THE SAME PAGE</A></H3>
<P>
YOU CAN FORM A LINK WITH ANOTHER PLACE ON THE SAME PAGE BY LINKING
AN HREF AND A NAME ANCHOR...<BR>
<H3>
<A NAME="LOCPG">LINKING TO A PLACE ON ANOTHER PAGE</A></H3>
<P>
YOU CAN NOT ONLY LINK TO ANOTHER HTML FILE, BUT TO A PLACE IN THAT
FILE...
</BODY>
</HTML>
Internet, HTML and MultiMedia

Page 100

HTML an Introduction

Unit 5

Figure 5.10

5.11.4 Linking to a Place in Another HTML File

You not only can make a hypertext link with another HTML file, but also with a
place in that HTML file, as long as you mark it with a NAME anchor. An HREF
anchor that links to a place in another HTML file:
<A HREF=ADDRESS#ANCHORNAME>ANCHORTEXT</A>
This actually combines the forms for linking to another page and linking to a
place on a page. First, the link is made to the address, which is either a URL or
filename of an HTML file, and then following the # sign, the link is made to the
place in that file that is marked by the NAME anchor corresponding to the
anchorname.
<P>Go to <A HREF=SUB.HTM#PARTTWO>Part Two</A>of the
<A HREF=SUB.HTM>How to use links</A> web page.
Internet, HTML and MultiMedia

Page 101

HTML an Introduction

Unit 5

5.12 CREATING LINK LISTS

A link list is just what it sounds like a list of hypertext links, usually bulleted, but
sometimes numbered. Because link lists are so universal, everybody should
know how to create them. To create a simple link list, all you have to do is
combine an unordered list and some hypertext links.

5.12.1 Creating a Simple Link List

In the simplest form of a link list, the text of each link comprises the entire list
item. Often the link text simply is the title of a Web page being linked, although
sometimes a little editing is necessary to make it more informative. No other
explanatory or descriptive text is included.
Example:

<HTML>
<HEAD>
<TITLE>LINK LIST</TITLE>
</HEAD>
<BODY>
<H2>COURSES</H2>
<UL>
<LI><A HREF="DCA.HTM">DCA</A>
<LI><A HREF="PG.HTM">PG DIPLOMA</A>
<LI><A HREF="ADVANCE.HTM">ADVANCED COURSES</A>
</UL>
</BODY>
</HTML>

Figure 5.11

Internet, HTML and MultiMedia

Page 102

HTML an Introduction

Unit 5

5.13 INSERTING INLINE IMAGES

The IMG (Image) tag allows you to display inline images on your Web page. The
term inline simply means that an image is inserted at a particular location, in a
line, within a Web page.
The most commonly used image format for inline images is the GIF format. All
current graphic Web browsers should be able to display GIF images as inline
images. Not all current graphical Web browsers support the JPEG graphics
format, which provides file compression and more colors than GIF.
The IMG (Image) tag is an empty or stand-alone, document element.
Syntax: <IMG SRC=imagefile>
The SRC (source) attribute is a required attribute that identifies the full or partial
address (URL) or just the name of the file to display.
Example:

<p>The inline graphics, FLOWERS.GIF, is displayed here:

<p><IMG SRC=FLOWES.GIF>

A p tag is placed in front of the IMG tag. The IMG tag does not form a new block
element here and would appear on the same line as the text that precedes it (that
is, unless you added the P tag here). In this case, however, you want the image
to appear below the line of text.
Using the ALT Attribute
You use the ALT attribute to provide an alternative to an image in the case of
someone using a text-only browser or using a graphical browser with images
turned off. The capability of turning off the display of images to help pages load
faster.
Example:

<p>The inline graphics, FLOWERS.GIF, is displayed here:

<p><IMG SRC=FLOWES.GIF ALT=A Sample Picture>

Internet, HTML and MultiMedia

Page 103

HTML an Introduction

Unit 5

5.13.1 Using the ALIGN Attribute In Inline Graphics

The ALIGN attribute allows you to position an inline image relative to the line of
text that it is on. All current graphical Web browsers recognize these values:
top, middle, and bottom.
Example:
<p>The image on this line <IMG ALIGN=TOP SRC=FLOWERS.GIF is topaligned.
<p>The image on this line <IMG ALIGN=MIDDLE SRC=FLOWERS.GIF is
middle-aligned.
<p>The image on this line <IMG ALIGN=BOTTOM SRC=FLOWERS.GIF is
bottom-aligned.

5.13.2 Setting the Height and Width of an Inline Image

The height and width of an inline image can be specified. Normally, a Web
Browser has to download an image before it allocates space for it on a Web
page. This means that if you have a relatively large graphic, everything else has
to wait until the image downloads.
If you set the dimensions of the graphic using the Height and WIDTH attribute of
the IMG tag, the browser can allocate space for the graphic, and then display the
remainder of the page without waiting for the graphic to download completely.
Example:

<IMG SRC=FLOWERS.GIF WIDTH=100%>

This will resize the graphics to fit horizontally within a browser window,
regardless of the screen resolution or the width of the browser. The height of the
image will also be resized correspondingly.

Internet, HTML and MultiMedia

Page 104

HTML an Introduction

Unit 5

5.14 CREATING IMAGE LINKS

Including an Image in a Link
Besides text, you can also include an inline image inside a hypertext link, which
causes the image to display a blue border, indicating that it is a hypertext link that
you or your users can click and activate.
Example:<p><A HREF=SUB.HTM>
<IMG SRC=FLOWERS.GIF>Both the image and the text is a link.</A>
Controlling the Border around an Image Link
The default width of the border around an image link is 2 pixels. The IMG tags
BORDER attribute allows you to specify a custom width for the border.
Example: <p><A HREF=SUB.HTM>
<IMG SRC=FLOWERS.GIF BORDER=10>
The border has been increased to 10 pixels. </A>

5.15 HORIZONTAL RULES

The HR (Horizontal Rule) tag is a stand-alone, or empty, document element that
allows you to add horizontal rules to your Web pages.

5.15.1 Changing the Height of a Horizontal Rule

To change the height of a horizontal rule, the SIZE attribute value in the HR tag
can be used. The value you set is the rules height, or thickness, in pixels. The
following example is used for creating a horizontal rule that is 10 pixels thick.
Example:

<p>This is a normal rule:

<HR>
<p>This is a 10-pixel thick horizontal :
<HR SIZE=10

Internet, HTML and MultiMedia

Page 105

HTML an Introduction

Unit 5

5.15.2 Changing Between Shaded and Unshaded Horizontal Rule

The default setting for a rule is shaded. To set an unshaded horizontal rule,
add the NOSHADE attribute to the HR tag.
Example:

<P>This is an unshaded, 15-pixel thick horizontal rule:

<HR SIZE=15 NOSHADE>

5.15.3 Changing the Width of a Horizontal Rule

You can also change the width of a horizontal rule, either by setting the width in
actual pixels or by specifying a percentage of the total width of the browser
window. By default, horizontal rules are centered in the browser window.
Following is an example of creating a 15-pixel sized horizontal rule with a width
that is 75 percent of a browsers window.
Example:

<P>This is a 75%wide, unshaded, 15-pixel thick horizontal rule:

<HR WIDTH=75% SIZE=15 NOSHADE>

5.15.4 Setting the Alignment of a Horizontal Rule

The ALIGN attribute in the HR tag is used to left-align or right-align a horizontal
rule (center-alignment is the default).
Example:

<P>This is a left-aligned, 50% wide, 20-pixel thick horizontal rule

(Shaded)
<HR ALIGN=LEFT WIDTH=50% SIZE=20>

5.16 ADDRESS TAG

The Address tag is used to define a signature block for Web page. It might
contain your name, title, organizational or business affiliation, as well as
information on how to contact you. A horizontal rule usually separates an
address from the rest of a Web page.
Example:

<HTML>
<HEAD>
<TITLE>Deemed University - MAHE</TITLE>
</HEAD>
<BODY>

Internet, HTML and MultiMedia

Page 106

HTML an Introduction

Unit 5

Manipal has already made a name in imparting professional education not only in India, but also at
the international level. Doctors, engineers, nurses, pharmacists and other professionals from
Manipal have made a mark wherever they have gone to practice or work. The Government of
India conferred the deemed University status on Manipal on June 1993, giving birth to the
Manipal Academy of Higher Education, popularly known as Mahe.

<HR>
<ADDRESS>
MANIPAL ACADEMY OF HIGHER EDUCATION
DEEMED UNIVERSITY
DISTANCE EDUCATION WING
MANIPAL
<A HREF="MAILTO:[email protected]">MAHE</A><BR>
</ADDRESS>
</BODY>
</HTML>

Figure 5.12

Internet, HTML and MultiMedia

Page 107

HTML an Introduction

Unit 5

The Mailto: protocol can also be used with HREF tag. When the user clicks this
link, the default mail system is activated. E-mail id specified wit h Mailto: is
automatically placed in the To: Text box as shown in figure below.

Figure 5.13

5.17 WORKING WITH TEXT

This section covers additional features available while working with text, including
text highlighting tags and right or center aligning paragraphs, headings, and other
document sections.
Text Highlighting Tags: HTML recognizes a number of additional character
rendering tags, including the SUP (Superscript), SUB (Subscript), U (Underline),
and STRIKE (Strikethrough) tags.
The SUP and SUB tags are highly useful tags that you should use wherever you
need superscripts or subscripts. The STRIKE command is more limited to using
the Web in workgroup document preparation processes, rather than for
displaying final renditions. The U tags is used for underline a word.
Internet, HTML and MultiMedia

Page 108

HTML an Introduction

Unit 5

Example:

<HTML>
<HEAD>
<TITLE>MY FIRST WEB PAGE</TITLE>
</HEAD>
<BODY>
<P>This is a regular text. <SUP>Use SUP for Superscripts.</SUP>This is
regular text.<SUB>Use SUB for subscripts.</SUB>This is a regular text. <U>Use
U for underlining. </U>This is a regular text. <STRIKE>Use Strike for
Strikethrough </STRIKE>
</BODY>
</HTML>

Figure 5.14

5.17.1 Text Alignment

You can align paragraphs, headings, and other document division in a number of
ways. You can use the ALIGN attribute with paragraphs or headings to centeralign, right-align, or left-align these elements.

Internet, HTML and MultiMedia

Page 109

HTML an Introduction

Unit 5

Using the ALIGN Attribute in Headings and Paragraphs

The Align attribute is used to center-align, or right-align headings and paragraphs
by using an attribute value of either center or right.
Example:

To center align a level-two heading

<H2 ALIGN=CENTER>Your Heading Here </H2>
To right-align level-two heading
<H2 ALIGN=RIGHT>Your Heading Here </H2>

Centering Text and Other Elements Using the Center Tag

The CENTER element is used to center-align text and other document elements.
Example:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Level-Two Heading</H2>
<p>This paragraph, and the level-two heading above it, is
centered using the center tag.
<UL>
<LI>First list item
<LI>Second list item
</UL>
</CENTER>
</BODY>
</HTML>

5.18 CHANGING FONT SIZES AND COLORS

The FONT tag allows you to specify the size and color of a section of text.

5.18.1 Setting Font Sizes

The FONT tag uses the SIZE attribute to change the size of a font. You can set
font sizes using absolute or relative size values.
Internet, HTML and MultiMedia

Page 110

HTML an Introduction

Unit 5

Setting Absolute Font sizes

There are seven absolute (or fixed) sizes, numbered from 1 to 7, that you can
set using the SIZE attribute of the FONT tag. The default is 3, which is the same
as regular paragraph text; 1 is the smallest and 7 is the largest, which means you
can set two absolute font sizes that are smaller than normal paragraph text and
four sizes that are larger. Each Web browser determines the actual sizes of
these fonts.
Example:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<p>
<FONT SIZE="1">Font Size 1. </FONT><BR>
<FONT SIZE="2">Font Size 2. </FONT><BR>
<FONT SIZE="3">Font Size 3. </FONT><BR>
<FONT SIZE="4">Font Size 4. </FONT><BR>
<FONT SIZE="5">Font Size 5. </FONT><BR>
<FONT SIZE="6">Font Size 6. </FONT><BR>
<FONT SIZE="7">Font Size 7. </FONT><BR>
</BODY>
</HTML>

Figure 5.15

Internet, HTML and MultiMedia

Page 111

HTML an Introduction

Unit 5

Setting Relative Font Sizes

You can set relative font sizes. Relative font size changes are indicated by
either a plus (+) or (-) sign preceding the SIZE attribute value. For instance,
FONT SIZE=+1 indicates a font size that is one size larger than the base font.
Because the default base font is the same as an absolute font size of 3, a relative
font of +1 would be the same as an absolute font size of 4 (3+1=4).
Example:

<P>
<Font SIZE=-2>Font size 2.</FONT> <BR>

Manipal has already made a name in imparting professional education not only in India,
but also at the international level. Doctors, engineers, nurses, pharmacists and other
professionals from Manipal have made a mark wherever they have gone to practice or
work.

5.18.2 Setting the Base Font

The BASEFONT tag allows you to change the size of the base font (paragraph
text). You can set it to any of the absolute font sizes, 1 through 7 (3 is the
default).
Example:

<BASEFONT SIZE=4>

5.18.3 Using the SMALL and BIG Tags

The simplest form of using these tags is to specify a font that is smaller or larger
than the default text font (or base font).
Example:

<P><SMALL>This is a small font. </SMALL><BR>

This is a normal font <BR>
<BIG>This is a big font. </BIG>

The SMALL font is the same as a font set with the FONT tags size=2 attribute
value and the BIG font is the same as font set with the FONT tags SIZE=4
attribute value. (The default text font is the same as the FONT tags SIZE=3
attribute value.)

Internet, HTML and MultiMedia

Page 112

HTML an Introduction

Unit 5

5.18.4 Changing the FONT Color

The FONT tag uses the COLOR attribute to change the color of a font.
Setting the Font Color Using Color Names : You can use any one of 16 color
names to specify a font color. Besides black and white, you also can specify
aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, and yellow.
Example:

<P><FONT SIZE=7>
<FONT COLOR=AQUA>
You can use any one of 16 color names to specify a font color.
</FONT>

Setting the Background, Text, and Link Colors: You can set the colors for the
background, text, and links by using the following attributes of the BODY tag:
BGCOLOR sets the background color
TEXT sets the text or (foreground) color
LINK sets the color of hypertext links
VLINK sets the color of visited links
ALINK sets the color of activated links (when you hold down the mouse
button on a link, without releasing it)
The general form for entering these attributes as color names is:
<BODY BGCOLOR=colorname TEXT= colorname LINK= colorname
VLINK= colorname ALINK= colorname>
Example:
<BODY BGCOLOR=AQUA TEXT=RED LINK=GREEN
VLINK=NAVY ALINK=MAROON>

Internet, HTML and MultiMedia

Page 113

HTML an Introduction

Unit 5

5.19 USING A BACKGROUND IMAGE

The Background attribute of the BODY tag allows you to specify a background
image. The Graphic file for the background image can be a GIF or JPEG image.
The general format for entering this attribute is as follows:
<BODY BACKGROUND=filename or URL>
Where filename is a GIF or JPEG file in the same directory as the Web page and
URL is a partial or absolute address of a GIF or JPEG file in a different directory
than the Web page.
Example:

<HTML>
<HEAD>
<TITLE>Deemed University - MAHE</TITLE>
</HEAD>
<BODY background="c:\amritha\formal.gif">

Manipal has already made a name in imparting professional education not only in India,
but also at the international level. Doctors, engineers, nurses, pharmacists and other
professionals from Manipal have made a mark wherever they have gone to practice or
work. The Government of India conferred the deemed University status on Manipal on
June 1993, giving birth to the Manipal Academy of Higher Education, popularly known as
MAHE.

<HR>
<ADDRESS>
MANIPAL ACADEMY OF HIGHER EDUCATION
DEEMED UNIVERSITY
DISTANCE EDUCATION WING
MANIPAL
<A HREF="MAILTO:[email protected]">MAHE</A><BR>
</ADDRESS>
</BODY>
</HTML>

Internet, HTML and MultiMedia

Page 114

HTML an Introduction

Unit 5

Figure 5.16

5.20 MARQUEE TAG

<MARQUEE> </MARQUEE>
This tag is unique to Internet Explorer. It displays the content as a moving text.
<MARQUEE BEHAVIOUR=MOTION DIRECTION=SCROLL DIRECTION
HEIGHT=PIXEL WIDTH=PIXEL BGCOLOR=COLOR LOOP=NUMBER
SCROLLDELAY=MILLISECONDS>
</MARQUEE>
Behaviour = motion type attribute sets the motion of the text within the
rectangular space set aside for the Marquee tag. The values can be
alternate, scroll or slide.
BGCOLOR = color this attribute establishes the color for the rectangular
space reserved for the Marquee tag.
Direction = scroll direction specifies the scrolling direction of the text.
Direction can be up, down, left or right.
Internet, HTML and MultiMedia

Page 115

HTML an Introduction

Unit 5

Height, width tag renders itself as a rectangular space on the page. You can
override the default size of this rectangle by assigning values to the HEIGHT
and width attributes. The default value for Height is determined by the font
size of the largest font assigned to the content in the MARQUEE.
Loop = number sets the number of times the Marquee text scrolls its
contents. After the final scroll, the content remains in a still or fixed positions.
If the scroll value is set to 1 or infinite scroll then the MARQUEE text
content scrolls infinitely.
Scrolldelay = milliseconds Increasing the scroll delay value slows the scroll
speed and decreasing the values makes scrolling go faster.
Example:

<MARQUEE BEHAVIOUR=SLIDE DIRECTION=LEFT

WIDTH=250 BGCOLOR=WHITE>
Watch out the text
</MARQUEE>

5.21 SELF TEST

1. HTML stands for:
a. HyperText Markup Language
b. HyperText Marking Language
c. HyperTechnical Markup Language
d. HyperTechnical Marking Language
2. The web relies on the following mechanisms to make its resource readily
available.
a. A uniform naming scheme

b. Protocols

c. Hypertext

d. All of the above

3. Every resource available on the Web has an address that may be encoded
by a:
a. URI

b. HTTP

c. Both A & B

d. None of the above

Internet, HTML and MultiMedia

Page 116

HTML an Introduction

Unit 5

4. The symbol that identifies the HREF attribute as the name of a NAME anchor
rather than an address or filename is:
a. &

b. $

c. #

d. !

5. URI is used to:

a. Link to another document or source

b. Create an image map

c. Cite an external reference

d. All of the above

6. In 1980,

came into existence.

a. GML

b. HTML

c. SGML

d. None of the above

7. The

element can be used to identify your HTML file to the

outside world.
a. Title

b. Body

c. Head

d. None of the above

8. There are

levels of heading in HTML.

a. Three

b. Four

c. Five

d. Six

9. The purpose of Markup is to:

a. Add hypertext capabilities

b. Enhance the document

c. Both a & b

d. None of the above

10. Which of the following tags do not require a terminator.

a. <U>

b. <BR>

c. <B>

d. None of the above

11. For obtaining ordered list use the tag:

a. <H1>

b. <UL>

c. <OL>

d. <ML>

12. The tag to give visual division between sections of the page, and which
causes the browser to draw an embossed line is;
a. <HL>

b. <HR>

c. <UR>

d. None of the above

Internet, HTML and MultiMedia

Page 117

HTML an Introduction

Unit 5

13. For a particular font its size attribute can be an absolute value ranging from:
a. 1-10

b. 1-9

c. 1-8

d. 1-7

14. Which one of the following tags is used to insert graphics in the web page.
a. <IMAGE>

b. <IMAGES>

c. <IMG>

d. <GRAPHICS>

15. URI stands for

5.22 EXERCISE
Create web pages having the following themes. Web page must look attractive.
A web page describing your town.
Personal web page, giving insight in to your personality.
Web page describing your interests.

5.23 SUMMARY
Now you would have understood what HTML is. Even though there are many
web authoring tools available there is nothing better than having a good
command over Hyper Text Markup Language. In this unit we have discussed
HTML, BODY, HEAD and different HEADING element in great detail. You can
create lists and hyperlinked text that allow you to navigate from one web page to
another.

ANSWERS TO SELF TEST 5.21

1. A

6. C

11. C

2. D

7. A

12. B

3. A

8. D

13. D

4. C

9. C

14. C

5. D

10. B

15. Universal Resource Identifier.

Internet, HTML and MultiMedia

Page 118