0% found this document useful (0 votes)
50 views73 pages

HTML Basics for Beginners

Uploaded by

suresh.lohan123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
50 views73 pages

HTML Basics for Beginners

Uploaded by

suresh.lohan123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 73

Chapter 4

Introduction to HTML

Learning Objectives
By the end of this chapter, learner will be able to:
• Understanding of basic structure of HTML
• Learning of various container and empty tags
• Learn various html tags and their syntax.
• Understanding of formatting elements of HTML

Introduction
HTML refers to Hypertext Markup Language. There is a special kind of text used by
web browsers that represents the data. This data may be in the form of letters, images,
audios or videos. This special text is given emphasis, which some people may say, it
is marked up through a link to the other documents. Thus a page formed using the
special text is called a document or a webpage. A webpage can get opened in a web
browser. The web browser accesses the web page from the web server (a place which
holds most of the webpages). A web server may be placed anywhere in the world. This
means that a web browser can access a webserver only if it connects to internet (network
of networks across globe). The HTML was founded by the group called “World Wide
Web Consortium” in 1990.

1. Overview of HTML
1.1. Who Invented HTML
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose
was to make it easier for scientists at different university to gain access to each other’s
research documents.

1.2 A Brief history


HTML is not an invention but an improved version of Standard Generalised Markup
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining
and creating descriptive markup language.

58 Information and Computer Technology


1.3 What tools do you need?
To get started with html documents, only two basic things are required
• A text editor/HTML editor
• A Web Browser

1.4 Tags and Attributes


The World Wide Web Consortium has given a set of standards while building the HTML
language. The W3C uses some special words to define an action.

A tag is a special word enclosed in angle-brackets < >. A tag tells the browser to perform
an action as asked by the special word. The special word may be written either in lower
case or upper case. The browser will respond to both the cases equally.

The HTML tags are normally comes in pair of start and end tag(an opening tag and closing
tag). While the start tag is written in the beginning of the element as <SpecialWord>, the
end tag is written at the completion of the element as </SpecialWord>.

For example: When you want to begin with writing source code using HTML, you write
the start tag as <HTML> and when you have completely written in the HTML document
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed
by HTML in angled brackets.

The characteristics or the features of a tag are defined by an attribute. An attribute is used
inside a tag. An attribute always takes a value to help the browser perform the specific
task in a particular direction. There may be more than one attribute used inside a tag.

An element is a combination of a start tag, the text(we also use text to insert graphics)
and the end tag.

For example:
<body> element begins with start tag, followed by text and ends with end tag.</body>

In simple words, one can equate an element to a block, a tag to an instruction and an
attribute to an extension to a instruction.

Container of Tags: One set of tags may contain another set of tags. This is called nesting
of tags. The second block of tags is always contained in first block as shown below:

<TAG1> <TAG2>……………</TAG2> </TAG1>

<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second
block of tags.

Introduction to HTML 59
2. Structure of HTML document
The basic structure of HTML document is shown below:

<HTML>
<HEAD>
<TITLE> The Structure of HTML Document </ First section
TITLE>
</HEAD>
<BODY>
The Body of the HTML Document
Second section
</BODY>
</HTML>

The basic structure of the HTML document is divided into two sections namely, the head
and the body. The browser enters the first section after executing the start tag of HTML
(telling the browser to begin interpreting the HTML commands) and start tag of HEAD.
The first section helps in changing the heading on the title bar of the HTML document
(the webpage). The starting of the heading is shown after the start tag of TITLE and the
end is shown by </TITLE>. The end tag of HEAD i.e. </HEAD> tells the browser that
the end of first section has come.

The second section begins with the start tag of BODY. The data on the webpage is displayed
through the tags used in this section. The end tag of BODY i.e. </BODY> tells the browser
that no more data is to be inserted on the webpage and the end of the web document
has come. After the completion of this section, the slash HTML or the end tag of HTML
tells the browser to stop looking for HTML commands. This implies that any tag used
after the end tag of HTML will not be interpreted by the browser and so no action will
be performed.

Please Note: All the sentences containing any number of whitespaces written inside a tag
within the body element will appear as written in the HTML code. Any whitespace inserted
outside the tag within the body element will be interpreted as null, void or amounting to
nothing by the browser. That is, such whitespaces outside the tag will not appear anywhere
on the webpage.

3. Saving the HTML document


When you have finished writing the HTML code in the text editor, click on File menu and
select Save option. This opens a window, which asks you to save the file in a folder and

60 Information and Computer Technology


give a name and an extension to the file. The extension in this file will be .html or .htm.
(e.g. basic.htm or firstHTMLDocument.html). This will turn the file into a webpage.

In order to modify the webpage, either open the web page and click on View →source or
open the webpage with notepad.

4. Container and Empty Tags


Before we proceed further to formatting tags, it is necessary for you to understand the
difference between the container and the empty tag. A container tag has both the start
and the end tag. The text or the graphic is inserted inside the beginning and end tag of
the container tag. For example: <body>This is a container tag</body>. The <BODY> tag
here is a container tag which has both the beginning and the ending tag and the text in
between both the tags.

The empty tag is a stand-alone tag. This implies that such a tag has beginning but no
ending tag. For example: The <BR> tag is used for adding one line break. Such a tag does
not need an end so as to tell the browser, that end of line break has come because there is
no need. Such a tag is called empty tag. HR is another empty tag. This tag is used to insert
a horizontal rule on the web page. Comment tag is also an empty tag. This tag is ignored
by the browser. This tag is used to increase the readability of the HTML source code. With
this tag, you can insert a description about a command. This is written as : <!--, followed
by description or remark on a command, followed by -->. For example: <!-- Hello -->
<BODY>…</BODY>
The second section of the webpage begins with the <BODY> tag. This defines the visible
section of the document. It has a number of attributes which controls the overall appearance
of the document. The attributes that are used with this tag are listed below in the table:

Attribute of the <body> tag Description


BGCOLOR The background of the webpage is displayed with a color that
has been taken as value by this attribute.
BACKGROUND The background of the webpage is displayed with an image
whose address is taken as value by this attribute.
TEXT Specifies the color of the text in the document.
LINK Defines the color of the link in the document
ALINK Defines the color of the active link in the document
VLINK Defines the color of the visited link in the document

Introduction to HTML 61
4.1 Formatting Elements
In a web page, the text is an important component especially when there is no picture
or graphic. It becomes therefore necessary to change the style of text at every paragraph,
so that they become presentable. There are a number of tags that help you to format the
text.

4.1.1 <Heading Tags>


Heading tag is used to display the heading or the main topic on the web page. This tag
varies from H1 to H6. This is a container tag. The heading tag <H1> shows the heading
with the largest font size. As you increase the number in the heading tag, the font size
goes down as shown in the example given below:

<H1> This text is in largest font i.e. H1 font </H1>


<H2> This text is in larger font i.e. H2 font </H2>
<H3> This text is in medium large font i.e. H3 font </H3>
<H4> This text is in medium small font i.e. H4 font </H4>
<H5> This text is in smaller font i.e. H5 font </H5>
<H6> This text is in smallest font i.e. H6 font </H6>
The above code produces the following output:

C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help Close Tab (Ctrl+W)

This text is in largest font i.e. H1 font


This text is in largest font i.e. H1 font
This text is in medium large font i.e. H3 font
This text is in medium large font i.e. H3 font

This text is in smaller font i.e. H5 font

This text is in medium large font i.e. H6 font

02:26
06-03-2013

We can see from the output that the size of the font keeps decreasing as one increases the
number in the heading tag.

62 Information and Computer Technology


4.1.2 The <FONT> tag
The FONT tag is a container tag that has a number of attributes listed below in the
table

Attribute of the <font> tag Description


FACE Sets the text to the name of the font used as its value.
SIZE Decides the scale of the text. It can range between -7 and
+7.
COLOR Changes the color of the text written inside the container
tag.

The following example will help you understand the use of FONT tag.

<font face=”Book Antiqua”>This is in Antiqua typeface</font>


<font color=”#ff0000”>Red</font>
<font color=”#00ff00”>Green</font>
<font color=”#0000ff ”>Blue</font>
<font size=+5> this text is 5 points big</font>
<font size=-3> this text is 3 points smaller than regular text </font>

The above code produces the following output:


�le:///C:/Users/RES_4/Desktop/test.html

This in in Antiqua typeface Red Green Blue this text is 5 points big this text is 3 points smaller than regular text

Please Note: The face name is case insensitive.

Font tag can be nested. We can understand this by an example.

<font size=+3>N<font color=red>e</font><font color=blue>s</font><font


color=green>t</font></font>

Introduction to HTML 63
The above produce the following output:

C:\Users\HP\Music\Desktop\tables.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help

Nest

4.1.3. Entering Paragraph Text on your Web page


A paragraph can be written on the web document using the <p> tag. This is a container
tag, though the </p> tag is optional. It uses one attribute called align that takes the value
left, right or center.

<FONT SIZE=+4><P ALIGN=”CENTER”>


This paragraph is centered.
</P>
</FONT>

In the above code, the align attribute takes the value center. The output of the above code
is:

C:\Users\HP\Music\Desktop\tables.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help

This paragraph is centered

4.1.4.The CENTER tag


Is needed to place the text in the center. Sometimes it may not be possible to use align
attribute again and again along with a tag. Then it is better to use nested form of center
tag once and use other tags inside the opening and closing center tags.

For example:
<center>
<font size=+2> the text will be center aligned because center tag is used.
<br>
The size of the text will be 2 points greater than the normal font size.
<br>
<hr>
<br>
<p>

64 Information and Computer Technology


With the P tag, we can begin a paragraph. The end of paragraph arises when the browser
sees the forward slash followed by P.
</p>
</font>
</center>

The above code produces the following output:

C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help

the text will be center aligned because center tag is used.


The size of the text will be 2 points greater than the normal font size.

With the P tag, we can begin a paragraph. The end of paragraph arises when the browser sees the forward slash followed by P.

02:45
06-03-2013

Please note: In the above output, the line that separates the font tag with the paragraph
tag has been placed on the webpage using <hr> tag. The <hr> tag is an empty tag, similar
to <br>.

4.1.5. Bold, italics and underline


There are other tag that help in changing the style of the font. They make the text boldface,
italics and underlined. They are shown in the table below:
Tags Meaning
<B>, </B> Bold text
<I>, </I> Italic text
<U>, </U> Underlined text
For Example
The following code uses tag <I> in combination with header tag <H1>.

<H1><I>Heading Tag H1 is used with the Italics Tag</I></H1>


<B><I>Both the boldface and italics tags are used as nested tags</I></B>

Introduction to HTML 65
The above code produces the following output:

C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help

Heading Tag H1 is used with Italics Tag


Both the boldface and italics tags are used as nested tages

02:32
06-03-2013

4.1.6 The following table gives a list of tag used in the chapter, with their
example and the output:

S. No. Start tag End Tag Example Output


1 <h3> </h3> <H3>Use H1 or H2 or H3 etc. for Use H1 or H2 or H3
headings</H3>It automatically adds etc. for headings It
a paragraph break after the heading. automatically adds a
paragraph break after
the heading.
2 <font </font> You can <font face=”Verdana, Arial, You can change the
face=”Arial”> Helvetica, sans-serif ”>change the actual font used to
actual font used to some extent some extent within
within your text.</font> In this your text. In this
instance, the browser will attempt to instance, the browser
use “Arial”; if not, it will ignore the will attempt to use
instruction. “Verdana” if the
computer has it;
if not, “Arial”; if
not, “Helvetica”; if
not, a generic sans-
serif font; if not,
it will ignore the
instruction.

66 Information and Computer Technology


S. No. Start tag End Tag Example Output
3 <font </font> Increases <font size=+2>font size</ Increases font size
size=+2> font> by the amount of the number. by the amount of the
You can also use <font size=- number. You can also
2>negative</font> numbers. use negative numbers.
4 <font color = </font> You can <font You can change the
“#0000FF”> color=”#0000FF”>change the font font color within
color</font> within your text. your text.
5 <p </p> Right aligned paragraph. <p Right aligned
align=right> align=right>You can use the “p” tag paragraph.
as a container to align text to the You can use the “p”
right</p> tag as a container to
align text to the right
6 <center> </center> <center>Centers the text</center> Centers the text
7 <b> </b> This is for <b>bold</b> text This is for bold text
8 <i> </i> This is for <i>italic</i> text This is for italic text

Summary
1. The World Wide Web Consortium has given a set of standards while building the HTML
language.
2. The basic structure of the HTML document is divided into two sections namely, the head
and the body.
3. A container tag has both the start and the end tag.
4. HR is another empty tag. This tag is used to insert a horizontal rule on the web page.
5. Heading tag is used to display the heading or the main topic on the web page. This tag varies
from H1 to H6.
6. A paragraph can be written on the web document using the <p> tag. There
7. Bold, Italic and Underline are those tags that help in changing the style of the font.

Introduction to HTML 67
Exercise
A. Name the tag used for:-
1. Inserting a section break
2. Marking up text to appear bold
3. Marking up text to appear italic
4. To change the font size of the entire html document.
5. To write a paragraph aligned to the right side of the page.

B. Correct the errors in the following HTML code:


<HTML>
<TITLE> My first program
<BODY>
<P Align=”centre”> This is my first web program </P>
<HEAD>
<HTML>

C. Multiple choice Questions


1. Html uses
(a) Pre specified tags (b) User defined tags
(c) Fixed tags (d) Tags used for linking
2. What is the correct html tag for inserting a line break?
(a) <break> (b) <br>
(c) <lb> (d) <line break>
3. Choose the correct HTML tag to make the text bold
(a) <bold> (b) <b>
(c) <large> (d) <Big>
4. Choose the correct html tag for the largest heading
(a) <h1> (b) <heading>
(c) <head> (d) <h6>
5. How many blank line breaks will a browser create if you enter four <br> tag
(a) 5 (b) None
(c) 3 (d) 4

D. State True or False:-


1. Html is a case sensitive language.

68 Information and Computer Technology


2. SGML is an improved version of HTML.
3. A tag is a special word enclosed in angle-brackets < >.
4. HTML is divided into 3 sections head, title and body.
5. VLINK defines the link of active link.

E. Answer the following questions:-


Q.1. What is font tag? Name the various attributes of font tag.
Q.2. Difference between <br> and <hr> tag.
Q.3. Differentiate between LINK, ALINK and VLINK.
Q.4. Explain heading tag with the help of a suitable example.
Q.5. Difference between container tag and empty tag.
Q.6. Write down the basic structure of HTML document.
Q.7. How do you create a comment tag?
Q.8. Name and explain any 2 attributes of body tag.
Q.9. Name the tools required to create a html document.
Q.10. Write a short note on HTML.

F. Lab Session
❖ Create a HTML document to print your name 5 times in 5 different fonts.
❖ Write a HTML document to display the name of school in bold and italic both.
❖ Create a HTML document containing three paragraphs with different alignments.
❖ Create HTML document containing different heading tags.

Introduction to HTML 69
Chapter 5
HTML II

Learning Objectives
By the end of this chapter, learner will be able to:
• Differentiate the different types of lists created in HMTL.
• Display the data using Lists tag available in HTML.
• Link web pages using <A> tag.
• Insert audio & Video in a web page to make it more interactive.
• Insert images in a web page.
• State the purpose of Inline & external images.
• Use images and Email addresses as hyperlinks.

Introduction
As we have already discussed in previous chapter about HTML. Hypertext Markup Language
is used by web browsers that represents the data. In this chapter, we will cover advance
formatting tags of HTML such as Lists, inserting images, videos, music and creating links
between two or more webpages.

1. HTML Lists
Lists provide the information in a structured and easy to read format. The data item on
the webpage can catalogued or indexed. The index that is formed using numbers like
1,2,3,…or symbols like →, b, ∞ is called a List in HTML. These lists help in formatting
the data and put them in a particular order. There are three types of lists that you can
use in HTML. They are:
❖ UL - creates an unordered or bulleted list
❖ OL - creates an ordered or numbered list
❖ DL - creates a definition or glossary list

The first two are very similar in structure, while definition lists have a unique setup. To create
either kind, first specify the start of a list and then identify each line item in the list

1.1 Unordered List <ul> ….</ul>


It classifies the data items that have equal importance i.e. none of the data items are
ranked. They are identified by a symbol. It may be a □ square, a ○ circle or a ● disc. The

70 Information and Computer Technology


attribute TYPE helps in using the symbols to create a list. This attribute takes the value
as the name of the symbol.

<ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>

This is a container tag. It has both the opening and the closing tag. However the closing tag
is optional. The listing is created under it using the <li> tag. Again <li> tag is a container
tag. The data item to be listed is input between the opening <li> and the closing </li> tag
as shown in the following example:

For Example1:
<body>
<ul>
<li>apples </li>
<li>oranges</li>
<li>guava </li>
</ul>
</body>
In the above code the data item comprises of the fruits that have equal importance to the
user. They are listed using unordered list. When you do not use the attribute named type,
the default symbol is used i.e. disc. The output of the above code is:

C:\Users\HP\Music\Desktop\tables.html C:Users\HP\Music\Desktop...
File Edit View Favorites Tools Help

� apples
� oranges
� guava

17:53
06-03-2013

HTML II 71
If you want to change the symbol to circle, use the following code:

For Example2:
<body>
<ul type =”circle”>
<li>apples </li>
<li>oranges</li>
<li>guava </li>
</ul>
</body>
The output of the above code is:

C:\Users\HP\Music\Desktop\tables.html

File Edit View Favorites Tools Help

apples
oranges
guava

1.2 Ordered Lists <ol> … </ol>


It classifies the data items that do not have equal importance. All the data items are ranked.
The ranking can be done using the numbers, the roman letter or alphabets. The default
symbol is number. In case you want to change to other symbols of ordered list, you can
use the attribute. The attributes used with this tag are given in the table below:
Attributes of <ol> tag Description
TYPE Changes the symbol used with the list. It takes the value as the
symbol itself i.e. it can be “a” or “A” or “I” or “i” or “1”.
START Begins the list with value specified. It takes the value of the
symbol from where to begin the list
For example 3:
<body>
<ol>
<li>Get up in the morning</li>
<li>Brush your teeth</li>
<li>Take the bath</li>
<li>Eat the breakfast</li>
<li>Get ready to go to school</li>
</ol>
</body>

72 Information and Computer Technology


The above code produces the following output. Notice that the symbol used to create the
list is number. Thus number becomes the default symbol.

C:\Users\HP\Music\Desktop\tables.html

File Edit View Favorites Tools Help

1. Get up in the morning


2. Brhsh your teeth
3. Take the bath
4. Eat the breakfast
5. Get ready to go to school

The start attribute allows you to further customize an ordered list by setting a new starting
digit for the ordered list element as can be seen in the following example:

For example 4:
<body>
<ol start=”4” >
<li>Get up in the morning</li>
<li>Brush your teeth</li>
<li>Take the bath</li>
<li>Eat the breakfast</li>
<li>Get ready to go to school</li>
</ol>
</body>

The above code produces the following output. Notice that the list begins from number
4 and the sequence is maintained after it.

C:\Users\HP\Music\Desktop\tables.html

File Edit View Favorites Tools Help

4. Get up in the morning


5. Brhsh your teeth
6. Take the bath
7. Eat the breakfast
8. Get ready to go to school

The type attribute changes the symbol as shown in the following example.

HTML II 73
For example 5:
<body>
<ol type = “a”>
<li>Get up in the morning</li>
<li>Brush your teeth</li>
<li>Take the bath</li>
<li>Eat the breakfast</li>
<li>Get ready to go to school</li>
</ol>
</body>

The output of the above code is given below. Notice that the symbol has changed from
default number to the alphabet.

C:\Users\HP\Music\Desktop\tables.html

File Edit View Favorites Tools Help

a. Get up in the morning


b. Brhsh your teeth
c. Take the bath
d. Eat the breakfast
e. Get ready to go to school

1.3 Definition Term Lists <dl> …. </dl>


Definition lists (<dl>) are the list elements that have an array of tags. The list prepared
by <dl> tag is similar to a dictionary. The other tags used with this are <dt> to define the
definition term and the <dd> for the definition of the list item.

C:\Users\HP\Music\Desktop\tables.html
File Edit View Favorites Tools Help

Clairvoyance
French work for ability to see events in the future.
Esprit de corps
French work for feeling fo pride and loyalty.

74 Information and Computer Technology


For example 6:
<dl>
<dt>clairvoyance</dt>
<dd>French word for ability to see events in the future.</dd>
<dt><b>Esprit de corps</b></dt>
<dd>French word for feeling of pride and loyalty.</dd>
</dt>
</dl>

The above code produces the following output. The opening <dl> tag starts the definition
list. The container <dt> tag opens the definition terms like Clairvoyance and Esprit de
corps. While the first word is in regular font, the second word is in boldface because
another container tag <b> is nested inside <dt> tag. The meaning of the definition term
is provided by <dd> definition description. Notice that the container tag <dd> presents
the definition description below definition term slightly right tabbed as shown in the
output window.

2. Image
2.1 Meaning of Image
An image add a flair to a webpage. The image in a web page is a drawing painted through
paintbrush or a photograph taken through a digital camera or a clipart. There are 2 types
of types of images. They are i) inline image ii) external image. The inline image is shown
when the webpage is opened in the browser. On the other hand, the external image is
shown only when demanded by the user by clicking on a link.

2.2 Inserting an inline image to the webpage


You can insert an image using the <IMG> tag. This tag does not have an end tag. The
basic syntax of <IMG> tag is given below:

<img src = “ address or the path to the image file”


width= “ ”
height= “ ”
alt= “ ”
longdesc= “htmlfilename”>

Let us discuss the attributes one by one:

HTML II 75
2.2.1 SRC
The address or the path to the image is taken as value by SRC attribute. Let us discuss the
cases of different addresses that can be accepted by SRC attribute.

Case1
If you have saved “Flower.jpg” in “Documents” folder, then the address would be: “C:\My
documents\My Pictures\Flower.jpg”

Case2
If you have saved “Flower.jpg” in the same folder as the HTML document, then the address
would be: “Flower.jpg”

Case3
If “Flower.jpg” is not in your computer but is saved in folder ‘images’ of the Web server
of yahoo, then the address would be:
“http://www.yahoo.com/images/flower.jpg”

2.2.2 Width and Height


The width and the height attribute defines the boundaries of image. The value can be an
absolute number (recognized as pixels) or in percentage (in proportion to the size of web
window).

For example7:
An image of height 150 pixels and width 200 pixels is inserted on webpage as:

<img src=”flower.jpg” width=”200” height=”150”>

The output of the above code is as under. It displays an image of two white flowers on the
web page.

Note
The image is made of pixels. When you increase
the size of the image, the resolution of the image
gets decreased. This makes the image less clearer
to view. The width and height aren’t strictly
necessary but help to speed the display of your
Web page.

76 Information and Computer Technology


2.2.3 ALT
When the image does not get download (due to heavy traffic or unsupportive browser), the
user may expect a description of the image. The “alt” attribute is used for such purposes
as shown here:

For example 8:
<img src=”flower.jpg” width=”200” height=”150” alt=”Two White Roses”>

2.2.4. Longdesc
If the description is too long, you can even attach an html file, in another attribute called
“longdesc”. This attribute is complementary to “alt” attribute as shown:

For example 9:

<img src=”flower.jpg” width=”200” height=”150” alt=”White Roses” longdesc=”abc.html”>

2.2.5 Align
You can use the “align” attribute to place the image on left or right side of the webpage.
If the align attribute is set to left, the image floats to the left margin. If it is set to right,
the image floats to the right margin.

For example 10:

<p>
<img src=”flower.jpg” alt=”White Roses” width=”32” height=”21” align=”left”> The image will
be flowed to the left side of the webpage and this text will therefore be placed on right side.
</p>

In the above code the paragraph tag <p> helps in forming the paragraph to be displayed
along with the image on the webpage. “Alt” attributes describes the image when the image
cannot be displayed by the browser. “Height” and “width” attribute decides the area of
the image on the web page and the “align” attribute defines the position of the image on
the web page. Since the image is set to the left side, the text flows towards the right side
as seen in the output below:

 e Image will be flowed to the ldft side of the webpage and this text will therefore
Th
be places on right side.

HTML II 77
2.3 Inserting external image
Note
An external image may be required in any of the
The external image can be
following situation:
inserted on the webpage using
an anchor tag which may be
1. When the image formats like BMP or PICT are
learnt from the later section of
not supported by the browsers. Most browsers
the chapter.
support either GIF format or JPG format.
2. When an image is to be viewed in text-only browser.
3. When you want to see the larger size of the inline image.

2.4 Inserting audio or video


When you prepare a webpage, an audio or moving picture makes the page impressive
and pleasing. When you want to show the operations of your business, you can do so by
inserting a movie. Both the audio and video can be inserted using a plug-in. A plug-in
is a small computer program that extends the standard functionality of the browser. You
can insert such plug-in using the <embed> tag. The embed tag acts as container to non-
HTML resource.

2.4.1. The <embed> Element to insert audio


The <embed> tag defines a container for external (non-HTML) content. The non-HTML
contents are the objects other than the text and the graphics used in HTML. They are sound
effects, the video clips and moving pictures. If you want to insert a song at the background
of the webpage, use the following code to embed a MP3 file in the webpage.

For example 11:


<embed height=”50” width=”100” src=”titanic.mp3”>
The above code displays an audio player (of the dimensions as specified in the code) on
one corner of the web page as shown in the output. The songs begin to play, the moment
the webpage gets opened. However, the user can stop or pause the song whenever he so
desires. If you want to place the audio player in the center, you can use the center element
since it does not have another attribute to place it in center of the window.

C:\Users\HP\Music\Desktop\audio.html

File Edit View Favorites Tools Help

78 Information and Computer Technology


2.4.2. The “control” and “autoplay” Attribute of <audio> tag.
The “autoplay” attribute of <audio> specifies that the audio will start playing as soon as it
is ready. The song inserted at the background of the webpage, use the following code to
embed and auto play a MP3 file in the webpage.

For example 12:


<audio controls autoplay>
<embed height=”50” width=”100” src=”titanic.mp3”>
</audio>

The above code displays an audio player on C:\Users\HP\Music\Desktop\audio.html

one corner of the web page as shown in the File Edit View Favorites Tools Help

output. The songs begin to play automatically,


the moment the webpage gets opened.

2.4.3. Inserting video


To make the webpage more interactive, you can insert a video in addition to sound in the
webpage. The video may be in the form of a video clip, or a video movie. A video file is
recognized by the extension .mp4 or .avi. use the following code to insert the video movie
at one corner. If you want to place the player in the center of the webpage, you can use
the center tag as shown below:
For example 12:
<body>
<center>
<embed height=”250” width=”320” src=”movie.mp4”>
<br> <hr>
</center>
</body>

The above code produces the following output:

C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...

File Edit View Favorites Tools Help

Play

HTML II 79
2.4.4 Inserting video using “control” attribute
The “control” attribute specifies that video controls should be displayed (such as a play/
pause button etc). Use the following code to insert the video movie in the webpage, you
can use the “control: attribute with embed tag as shown below:

For example 12:


body>
<center>
<video controls>
<embed height=”250” width=”320” src=”movie.mp4”>
</video>
</center>
</body>

<The above code produces the following output:

C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...

File Edit View Favorites Tools Help

Play

2.4.5. Inserting video using “preload” attribute


This attribute was formerly known as “autobuffer” and it was an boolean attribute as
“controls”.
❖ none - do not buffer video file automatically.
❖ metadata - only buffer the metadata of video
❖ auto - buffer video file before it gets played.
Use the following code to insert the video movie in the webpage, you can use the “preload”
attribute with embed tag as shown below:

80 Information and Computer Technology


For example 12:
<body>
<center>
<video controls preload=”none”>
<embed height=”250” width=”320” src=”movie.mp4”>
</video>
</center>
</body>

The above code produces the following output:

C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...

File Edit View Favorites Tools Help

Play

3. LINKING
You can add more than one page in your website. These additional pages are linked to
the home page via a text or a picture. This linking is done using an anchor element in
HTML.

3.1 Anchor Element: <a> ….. </a>


An anchor element is used to create a hyperlink in a webpage. The word anchor has come
from the function performed by anchor in a ship. As an anchor supports the ship when
it reaches the shore, similarly, the document linked supports the text or the picture on
the homepage.

An anchor element consists of three parts.


1. The start tag <a> containing the attribute like href (mandatory), target (optional),
name (optional)
2. The text or the image to be hyperlinked
3. The end tag </a>.

HTML II 81
The basic syntax of anchor tag is:
<a href = “Address of the supporting web page”
target = “_blank or _top”
name = “text”>
text acting as hyperlink
</a>

The attributes of anchor tag are href, name and target. Let us discuss them:
1. HREF: The meaning of href is hypertext reference. This attribute is mandatory in anchor
tag. The href attribute takes the value as the address of the supporting document. Both
the relative and the absolute links can act as values to the href attribute.
For Example 13:
<a href =”http://www.w3.org/”>website of W3C</a>

To link to a page on another Web site you need to give the full web address. Such type
of link is absolute as it specifies both the protocol name i.e. “http” and the hostname i.e.
www.w3.org.
The relative link can only link to a page from the same site. If you were linking to a page
in the same folder, the href would be just “page1.html” as shown below:.
<a href=”page1.html”>
2. TARGET: The target attribute helps in opening a web page. The value “_blank” opens
the webpage in a new browser window. The value “_top” opens the linked webpage
in the currently active browser window.
For example 14
If you want to open the webpage in a new window, following code is to be used.
<a href=”http://www.google.com” target=”_blank”>Search Engine</a>

If you want to open the linked webpage in the same browser window as the current one,
following code is to be used:
<html>
<body>
<p>Open the webpage in a the current window</p>
<a href=”http:// www.google.com /” target=”_top”> Want to Google! </a>
</body>
</html>

82 Information and Computer Technology


The above code will open the webpage of google on clicking the link “Want to Google”
in the same browser window as the existing window. It will not open a new window to
load the webpage of google.com
3. NAME: NAME attribute gives a name to the anchor tag. This attribute takes the value as
“text string”. This helps in linking to a specific section within the webpage that has been
named.
For example 15:
If you have a long webpage with a section about “sales”, this section can be given a name
using name attribute as shown below. The purpose of the name is that another anchor can
link to the named anchor.
<A name=”salessection”>Sales Order Set Up</A>

Linking to the named anchor:


To link to a named anchor, add a hash mark (#) to the end of the Uniform Resource
Locator of the webpage followed by the name of the section, it will open.

For example 16:


To link to a section named “salessection” within the page called namedexample.html,
the following code is used:
<A href=”namedexample.html#salessection”>Sales</A>

If the link is to a named anchor in the same webpage then you don’t need the file name
of the webpage, just the hash mark and the name of the anchor.

For example 17:


To link to the salessection in our existing webpage, the following code is to be used:
<A href=”#salessection”>Sales</A>

Please Note:
The named anchor itself doesn’t have a hash mark <A name=”salessection”>
A link to the named anchor always has a hash mark. <A href=”#salessection”>

3.2 E-mail link


You can create an e-mail link on your page. The browser will read an e-mail link, using
the value starting with “mailto:” rather than http://, with your e-mail address rather than
a web address. The syntax is given below:
<A HREF=”mailto:[email protected]”>E-mail the username</A>

HTML II 83
For Example 18:
You want to create an email link to yourself, then the code would be:
<A href=”mailto:[email protected]”>E-mail to myself!</A>

When the user would click on the link “E-mail to myself!”, the mailbox of gmail will get
opened with the address [email protected] after the field “To” .

3.3 Image as a Link


The basic syntax to create an image link is:

<a href=”address of the file to be opened when you click on the image”>
<img src=“address of the image file” alt=”text to be displayed when image is not loaded”>
</a>

The attribute src in <img> tag takes the value of the address to the image whereas, href
attribute takes the value of the address of the HTML document that will be loaded when
you click on the image.

For example 19:


You want to open the website of Facebook when somebody click on the image that is
called Facebook.jpg, then the code would be:
<a href= https://www.facebook.com/>
<img src= “facebook.jpg””>
</a>

3.4. Colors of the link


You can set the color of text that acts as a link using <body> tag. The general syntax is:
<body link =”#hexadecimal code of the color or the nameofcolour”
vlink=”#hexadecimal code of the color or the nameofcolour “
alink=”#hexadecimal code of the color or the nameofcolour “>
In the above code, the link attribute in the <body> tag is a standard link. It is a text link
that has not been clicked by the user, yet. It appears in its standard color i.e. blue whose
hexadecimal code is 0000FF.

The vlink attribute in the <body> tag is a visited link. It is a text link that has been clicked
by user at least once. The standard colour of this link is purple whose hexadecimal code
is 800080.

84 Information and Computer Technology


The alink attribute in the <body> tag is an active link. It is a text link that may change
its colour when the user brings the mouse over it. The standard colour of this link is red
whose hexadecimal code is FF0000.

For example 20:


If you want to set the colour of the link to red, alink to green and vlink to pink as against
their standard colours, use the following code:

<BODY link=”red” alink=”green” vlink=”pink”>


For example 21:
If you want to use a hexadecimal number for the above Note
colours, following will be the code: The hexadecimal code of
<body link=”#FF0000” alink =”#04B45F” vlink =”#FF00FF” > the colour can be seen
from the website: http://
html-color-codes.info/

Summary
❖ Lists provide the information in a structured and easy to read format. There are three types
of lists : OL,UL & DL.
❖ UL tag classifies the data items that have equal importance i.e. none of the data items are
ranked. They are identified by a symbol. It may be a □ square, a ○ circle or a ● disc.
❖ OL tag classifies the data items that do not have equal importance. The data items in a list are
represented using numbers, the roman letter or alphabets. The default symbol is number.
❖ Definition lists (<dl>) are the list elements that have an array of tags. The other tags used
with this are <dt> to define the definition term and the <dd> for the definition of the list
item.
❖ The image in a web page is a drawing painted through paintbrush or a photograph taken
through a digital camera or a clipart. There are 2 types of types of images: i) inline image
ii) external image.
❖ The <embed> tag defines a container for external (non-HTML) content. They are sound
effects, the video clips and moving pictures.
❖ An <a> (anchor) tag is used to create a hyperlink in a webpage. An anchor element consists
of three parts : (1) href (mandatory), target (optional), name (optional), (2) the text or the
image to be hyperlinked and (3) the end tag </a>.
❖ An e-mail link can be created in a web page using mailto: attribute.

HTML II 85
Exercise
A. Multiple Choice Questions:
1. What is the correct html command for inserting an image?
(a) <image src=”image.gif”>
(b) <img> image.gif</img>
(c) <img src=”image.gif”>
(d) <img href=”image.gif>
2. Which one of the following is the list type that will create a bulleted list?
(a) Unordered (b) Option
(c) Decorated (d) Ordered
3. Which html tag is use to render text as italics?
(a) <b></b> (b) <i></i>
(c) <ital></ital> (d) Text style=”italics”
4. We can view the source code of html in
(a) Notepad (b) Power point
(c) Excel (d) Paint
5. To wrap the text to the next line, the tag used for
(a) <BR> (b) <P>
(c) <I> (d) <LI>

B. Give one line code for the following


(a) To make “My School Web Page” as the title of a web page.
(b) To change the background color of a web page to blue.
(c) To insert a horizontal line of yellow color
(d) To insert an image pic1.jpg onto web page .
(e) To insert the list as given below:
(i) SHIVANK
(ii) SARTHAK
(iii) SANYAM

C. From the list given below pick the correct answer:


BGCOLOR, HEAD, HTML, VLINK, P, FONT, SIZE, I
(a) This attribute defines the size of the text in the font element.
(b) This attribute changes the background color of a web page.
(c) This tag displays text in italic.

86 Information and Computer Technology


(d) This element identifies the document as an HTML document.
(e) This element defines the HTML header and does not affect the appearance of the
document.
(f) This element is used to insert a line break with extra spaces in the starting.
(g) This element changes the color of the visited link.
(h) This element displays text or characters in a specific style and size.

D. Answer the following questions


Q.1. What is the difference between ordered list and unordered list?
Q.2. Distinguish between href and name attributes of <A> tag with the help of each.
Q.3. Define Definition term with the help of a suitable example
Q.4. Which three tags are used to create definition lists?
Q.5. Differentiate <BODY BACKGROUND> and <IMG> Tag.
Q.6. Your school’s web address is www.littlebuds.com. You want to create a link to this web
site from your web page. Write the HTML code you will use to do this.
Q.7. Difference between <A> as an anchor and <A> as a link
Q.8. Create an ordered list of the name of the subjects you study in school.
Q.9. Name and explain the various attributes of <UL> tag.
Q.10. How can we set the color of text that acts as a link in a web page? Explain with the help
of an example.

E. Lab Session
1. Shivank wants to make a list of vegetables in a web page. He has typed all vegetables
name without any formatting. Suggest the type of list for his web page?
2. Write an HTML document to print name of your friends in an unordered format.
3. Create an unordered list of your hobbies.
4. Neha’s parents wants to create a web page as an invitation for his Graduation Party and
send this to all his friends. Can you help them in designing this invitation using the details
given below:
(a) Title as “Party”.
(b) Web page color as Yellow
(c) Pic1.jpg as an image in the center of the page.
(d) “lets Rock” as the heading below the image in red color
(e) With 2 lines break place the text of size 12 and color BLUE

HTML II 87
5. Create a website for Travel & Tourism company, which should include 3-4 webpages.
6. Create a homepage for your school website that includes the following:
(a) Title
(b) Image of school building
(c) List of school activities
(d) Video of School infrastructure
(e) Photo gallery

Project in HTML
Suppose we want to create the following website showing the various features of city Delhi,
then we need a homepage (first page that gets loaded) and the additional pages that are linked
to the homepage. The following figure shows the homepage prepared by the basic tags studies
in the syllabus. This homepage is called webpage.html.

C:\Users\HP\Music\Desktop\HTML Project-1\webpage.html

My City Delhi
This is my homepage. This page describes about the Delhi City.

Delhi is the capital of India, the country with many traditions and diversifications in clothing, food
habits and culture, yet it is united and still rising higher in terms of name and technology.

Delhi is the heart of India.

While Connaught place and India Gate are place in center of Delhi,

Lotus Temple, shows the way to Southern part of Delhi also called New Delhi,

The Red Fort shows the way to the Northern part of Delhi. called the Old Delhi.

All the images except the first image (map of Delhi) are hyperlinks. That is, when the user
places the cursor above the image, the image will display its name. On clicking the first image
of Connaught place the file, Connaught.html gets loaded in a different window.Similarly, Lotus.
html gets opened when the user clicks on image of lotus temple, redfort.html is loaded when
the image redfort.jpg is clicked and Indiagate.html gets loaded in a different window when user
clicks of Indiagate.jpg.
In order to prepare individual HTML files, insert the image using IMG tag and then type the
text for each in paragraph tag. The individual HTML files are given below. While Connaught.
html is:

88 Information and Computer Technology


C:\Users\HP\Music\Desktop\HTML Project-1\CONNAUGHT.HTML

CONNAUGHT PLACE
Connaught Place, also
called as CP, is located
at the heart of New Delhi.
It was built in the same
year as India gate i.e.
1931. It depicts the style
of British architecture
which was very planned
and well structured.

In the memory of late


Prime Minister, Mr. Rajiv
Gandhi, the Delhi
government renamed it
Rajiv Chowk.

Connaught place
happens to be the
commercial hub of Delhi.
People living in Delhi and
outside Delhi love to
come to CP for shopping
and entertainment. Be it

Redfort.html looks like:

C:\Users\HP\Music\Desktop\HTML Project-1\redfort.html

RED FORT
The Red fort also know as Lal Qila is a 17th century fort constructed by the Mughal
emperor, Shah Jahan city of Delhi, India that served as the residence of the Mughal
emperor, Shah Jahan city of Delhi, India that served as the residence ofthe Mughal
Emperors. The fort was the place for Mughal emperor Shah Jahan’s new capital,
Shahajahanabad, the seventh city in the Delhi site. He moved his capital here from Agra in
a move designed to bring prestige to his reign.
It served as the capital of the Mughals until 1857, when Mughal emperor Bahadur Shah Zafar was exiled by the British
Indian government.

The Red Fort derives its name from the extensive use of red sandstone on the massive walls that surround the fort.

Every year on 15 August, the Independence day of India from the British Prime Minister hoists the national flag at the Red
Fort, followed by a nationally broadcast speech.

The Red Fort is one of the most popular tourist destinations in Old Delhi, attracting thousands of visitors every year. Today
a sound and light show describing Mughal history is a tourist attraction in the evenings.

It also happens to be the largest monument in Old Delhi.

22:38
13-03-2013

The lotus.html is:

C:\Users\HP\Music\Desktop\HTML Project-1\lotus.HTML

LOTUS TEMPLE
Lotus Temple, is located in New Delhi, India. It is a Bahai House of Worship completed in 1986. It is
noted for its flowerlike shape.

It is one of the attractions in the city. The Lotus Temple has won numerous architectural awards.
Inspired by the lotus flower, the design for the House of Worship in New Delhi is composed of 27 free-
standing marble clad “petals” arranged in clusters of three to form nine sides. The nine doors of the Lotus
Temple open onto a cental hall.

It is capable of holding up to 2.500 people.

22:39
13-03-2013

HTML II 89
The indiagate.html is:

C:\Users\HP\Music\Desktop\HTML Project-1\indiagate.html

INDIA GATE
The India Gate is the national monument of India. Situated in the heart of New Delhi, it was
designed by Sir Edwin Lutyens.

It was built in 1931. It was originally known as the All India War Memorial, it is a prominent
landmark in Delhi and commemorates of 90.000 soldiers of the Britihs Indian Army who lost
their lives in World War I and the Third Anglo-Afghan War.

It is composed of red and pale sandstone and granite. Today, India Gate is the site of the
Indian Army’s Tomb of the Unknown Soldier, known as Amar Jawan Jyoti. the meaning of
Amar Jawan Jyoti is “the flame of the immortal soldier”

The India Gate is the famous picnic spot for families living in Delhi.
Children enjoy playing and swimming in the Children’s park which is
just a few footsteps from the India Gate. you can see many families
enjoying in the grounds around the India Gate.

This project consists of a homepage and 4 linked pages, for sake of simplicity. The homepage
has most of the images, the hyperlinks and the bulletted list, the use of empty tags like <br>
and <hr>.
The additional pages may not contain the mixture of many tags if the project is small (as in
the present case). For your convenience the the code of individual HTML documents are also
provided:

Connaught.html

<html>
<head>
<title>About Connaught Place</title>
</head>
<body Text=”darkblue”>
<h1 align=”center”> CONNAUGHT PLACE </h1>
<font face=”arial”>
<img src=”connaughtnight.jpg” align=”left”>
<p><b>Connaught Place</b>, also called as <b>CP</b>, is located at the
heart of New Delhi.
It was built in the same year as India gate i.e. <b>1931</b>.
It depicts the style of British architecture which was very
planned and well structured.
<p>In the memory of late Prime Minister, Mr. Rajiv Gandhi,
the Delhi Government renamed it <b>Rajiv Chowk</b>. </p>
<p>

90 Information and Computer Technology


Connaught place happens to be the commercial hub of Delhi.
People living in Delhi and outside Delhi love to come to CP for
<i>shopping</i> and <i>entertainment</i>.
Be it anything from the restaurant, to the road side handicraft shop, to
a national or international bank,
you would find everything here, right from a grocery store to a car
showroom.
you can also find the offices of tours operators and airlines in India.
<p>
Markets and shops in Connaught place are structured in the <b>inner</b>
and <b>outer circle</b>.
Connaught place provides the best resource to shop with a number of options
available.
Connaught place is surrounded by Panchkula Marg, Kasturba Gandhi Marg, Baba
Khadak Singh Marg and Barakhamba Marg.
</body>
</html>

Lotus.html
<html>
<head>
<title>Lotus Temple</title>
</head>
<body bgcolor=”lightblue”>
<h1 align=”center”> LOTUS TEMPLE </h1>
<font face=”arial”>
<img src=”lotus.jpg” align=”left”>
<p><b>Lotus Temple</b>,
is located in New Delhi, India.
It is a Bahái House of Worship completed in 1986. It is noted for its
flowerlike shape.
<p>It is one of the attractions in the city.
The Lotus Temple has won numerous architectural awards.
<p>
Inspired by the lotus flower, the design for the House of Worship in New
Delhi is composed of 27 free-standing marble clad “petals” arranged in
clusters of three to form nine sides.
The nine doors of the Lotus Temple open onto a central hall.
<img src=”ariallotus.jpg” align=”right” alt=”Arial view of Lotus Temple”>
<p>It is capable of holding up to 2,500 people.

</body>
</html>

HTML II 91
Redfort.html
<html>
<head>
<title>
Red Fort</title>
</head>
<body bgcolor=”pink” text=”Brown”>
<img src=”redfort.jpg” align=”left”>
<h1 align=”center”> RED FORT </h1>
<font face=”arial” size=”4”>
<p>The Red Fort also known as LalQila is a 17th century fort
constructed by the Mughal emperor, Shah Jahan
city of Delhi, India
that served as the residence of the Mughal Emperors.
The fort was the palace for Mughal Emperor Shah Jahan’s new capital,
Shahjahanabad, the seventh city in the Delhi site.
He moved his capital here from Agra in a move designed to bring
prestige to his reign.
<p>It served as the capital of the Mughals until 1857,
when Mughal emperor Bahadur Shah Zafar was exiled
by the British Indian government.
<p> The Red Fort derives its name from the extensive use of red sandstone
on the massive walls that surround the fort.
<p>Every year on 15 August, the Independence day of India from the
British,
Prime Minister hoists the national flag at the Red Fort, followed by a
nationally broadcast speech.
<p>The Red Fort is one of the most popular tourist destinations in Old
Delhi,
attracting thousands of visitors every year. Today, a sound and light show
describing Mughal history is a tourist attraction in the evenings.
<p>
It also happens to be the largest monument in Old Delhi.

</font>
</body>
</html>

92 Information and Computer Technology


Indiagate.html
<html>
<head>
<title>
India Gate
</title>
</head>
<body>
<img src=”indiagate.jpg” align=”right”>
<h1 align=”center”> INDIA GATE</h1>
<font face=”Comic Sans MS” color=”DarkBlue”>
<p>The India Gate is the national monument of India.
Situated in the heart of New Delhi,
it was designed by Sir Edwin Lutyens.
<p>It was built in 1931.
It was originally known as the All India War Memorial,
it is a prominent landmark in Delhi and commemorates the 90,000 soldiers
of the British Indian Army who lost their lives in World War I
and the Third Anglo-Afghan War.
<p>It is composed of red and pale sandstone and granite.
Today, India Gate is the site of the Indian Army’s Tomb
of the Unknown Soldier, known as Amar JawanJyoti.
The meaning of Amar JawanJyoti is “the flame of the immortal soldier”.
<hr>
<img src=”indiagateatnight.jpg” width=”40%” height=”50%” align=”left”>
<p>The India Gate is the famous picnic spot for families living in
Delhi.
Children enjoy playing and swinging in the <a href=”chidrenpark.html”
target=”_blank”>Children’s park
</a>which is just a few footsteps from the India Gate.
You can see many families enjoying in the grounds around the India
Gate.

</body>
</html>

HTML II 93
And the homepage named webpage.html is:
<html>
<head>
<title>Visit Delhi</title>
</head>
<body bgcolor=”lightgreen” text=”darkblue”>
<center>
<font face=”Bookman Old Style”>
<img src=”delhimap.jpg” align=”left”>
<h1 align=”center”> My City Delhi </h1></font>
<font size=”4”>
<p>This is my homepage.
This page describes about the Delhi City.
<p>Delhi is the capital of
<b><font color=”Magenta”> India </font></b>,
the country with many traditions
and diverisifications in clothing,
food habits and culture, yet
it is united and still rising higher in
terms of name and technology.</p>
<p>
Delhi is the <font color=”red”>heart </font> of India.
</p>
<hr>
<p><font color=”Black”>
While <b>Connaught place </b> and <b> India Gate </b>are place in <i>center</
i> of Delhi,</p>
<p><b>Lotus Temple</b>, shows the way to Southern part of Delhi also called
<i>New Delhi</i>,
<p><b>The Red Fort</b> shows the way to the Northern part of Delhi, called
the <i>Old Delhi</i>.
</font></p>
</center>
<a href=”indiagate.html” target=”_blank”><img src=”indiagate.jpg” align=”right”
alt=”The Indian Gate”></a>
<a href=”connaught.html” target=”_blank”><img src=”connaught.jpg” align=”left”
alt=”CP”></a>
<a href=”redfort.html” target=”_blank”><img src=”redfort3.jpg”align=”right”
alt=”LalQuila”></a>
<a href=”lotus.html” target=”_blank”><img src=”lotust.jpg” align=”left”
alt=”Lotus Temple”></a>
<br><br><br><br><br><br><br><br><br><br>
<hr>
<b> Monuments in Delhi</b>

94 Information and Computer Technology


<ul>
<li>Akshardham Temple</li>
<li>Lotus Temple</li>
<li>Iskon Temple </li>
<li>Birla Mandir</li>
<li>Rajghat</li>
<li>India Gate</li>
<li>RastrapatiBhawan</li>
</ul><b> Infrastructure in Delhi</b>
<ul>
<li>Delhi Metro Rail</li>
<li>Airport</li>
<li>Hotels</li>
</ul><b>Museums in Delhi</b>
<ul><li> International Dolls Museum</li>
<li>National Museum</li>
<li>National Railway Museum</li>
<li>National Science Center</li>
</ul>
</font>
</body>
</html>

Notice in the homepage, there is use of unordered list. This is to show the various features of
Delhi.

C:\Users\HP\Music\Desktop\HTML Project-1\wepage.html

File Edit View Favorites Tools Help

Monuments in Delhi

� Akshardham Temple
� Lotus Temple
� Iskon Tempe
� Birla Mandir
� Rajghat
� India Gate
� Rastrapati Bhawan

Infrastructure in Delhi

• Delhi Metro Rail


• Airport
• Hotels

Museums in Delhi

• International Dolls Museum


• National Museum
• National Railway Museum
• National Science Center

The bottom portion of homepage is as under:


You can see that in the above homepage, everything is vertically aligned. This is due to the fact
that important tags like table and frameset has not been used. These will be used in the syllabus
next year. Hence, using the basic tags, a simple project can only be undertaken. Therefore,
prepare the above project and implement your ideas to expand it further.

HTML II 95
Chapter 6
Security Threats and Safety
Measures
Learning Objectives
By the end of this chapter, learner will be able to:
• Name the different kinds of software licensing available
• Differentiate between freeware and open source software
• State how the use of shareware software is different from that of freeware software
• Differentiate between copyright and licensing
• Define cyberethics, cybersafety and cybersecurity
• State the purpose of cookies
• Tabulate the different phases of cyber ethics evolution
• List precautions that can be taken to ensure cyber safety
• Identify the different kinds of threats to cyber security
• State ethical behaviour to be followed as a cyber citizen
• Identify the different categories of cyber crime

Introduction
With the wide spread use of internet, networks and computers have
become increasingly susceptible to threats. These threats destroy data
as well the programs that computers use. The objective of these
threats is to destroy the data and to steal the vital information stored
in computers. This information is used by the attackers for their
benefit. We occasionally hear about the data theft from credit card
companies or banks, which lead to major financial losses. Also sometimes individual
users are fooled in to giving their personal and sensitive information such as passwords
or bank data leading to financial loss. This chapter shows various threats that computers
and networks face.

1. Viruses
A computer virus is a program usually hidden within another simple program. It produces
copies of itself and inserts them into other programs or files, in turn destroying the data
and performing other malicious actions. Computer viruses are never naturally occurring;
they are always man-made. Once created and released, however, their spread does not

96 Information and Computer Technology


remain directly under our control. While developing the viruses, programmers have
specific target in mind such as data theft or destruction of software, which runs the
computers. The virus can be transferred hidden in files, programs or even in disks. The
viruses can be of different kind but a common virus is macro virus, which is discussed
in detail here.

1.1 Macro Viruses


A simple macro is series of programming steps that are stored in a single location. Macro
allows automation of many actions with only a single keystroke. These can be embedded
in the program files. Many programs, such as Word and excel allow you to record a series
of keystrokes and menu selections and then save them to a file. This helps eliminate
doing the same action several times increasing efficiency. Macro viruses created with the
intention of fooling the user can deceive them in sharing confidential information. This
information can be used by the Macro to damage the computer data or software. The
virus using macro files are most popular as they are:
❖ Easy to write.
❖ Can infect more people faster as they exchange documents and data frequently
❖ Can easily infect any computer capable of running Office and Internet
Macro viruses can corrupt data, create new files, move text, flash colors, insert pictures,
send files across the Internet, and format hard drives. Macro viruses are increasingly used
as transport mechanisms to drop off even nastier bugs. Macro viruses modify registries,
forward copies of it through emails, look for passwords, copy documents, and infect other
programs. Macro viruses can do a lot of different damage in a lot of different ways.
Example of macro Virus is Wazzo, W97M etc.

2. Worms
Worms are very similar to viruses in the manner that they are computer programs that
replicate copies of themselves (usually to other computer systems via network connections).
Viruses often, but not always, contain some functionality that will interfere with the normal
use of a computer or a program. Unlike viruses, however, worms exist as separate entities;
they do not attach themselves to other files or programs. Because of their similarity to
viruses, worms are also often referred to as viruses. Some examples of the worst Worms
that impacted the web are as follows:
1. Jerusalem is one of the earliest worms that spread in 1987. It is also one of the most
commonly known viruses. It used to delete files that were executed on each Friday
the 13th. It was first detected in the city of Jerusalem.

Security Threats and Safety Measures 97


2. In 1991, thousands of machines running MS-DOS were hit by a new worm,
Michelangelo. The virus would overwrite the hard disk or change the master boot
record of infected hosts.
3. In 2007 Storm Worm hit the computers. Once hit, your machine becomes part of a
large botnet which performs automated tasks that range from gathering data on the
host machine, to sending infected emails to others. About 1.2 billion emails were
sent from the infected computers propagating infection.
Since Worms spread mostly through the email attachments, the best ways to avoid them
is using caution in opening emails. If the email is from an unidentified source, it is always
best to delete it. Most of the time worms attach themselves to email. Even the sender of
email does not recognize what they have forwarded, as emails are sent automatically using
all contact information in the user’s profile.

3. Trojan horses
A Trojan horse is a program that claims to rid your computer of viruses but instead
introduces viruses into the system. Since they look like sincere programs they are referred
as Trojan like the Trojan horse of Greek mythology. The Trojan program does not attach
itself to the files like a virus nor replicate itself like a worm but it does provide unauthorized
access to user’s computer.

They are mostly spread through internet downloads and online gaming programs. They
mostly affect the targeted computers. The trojan program prompts you to do the normal
functions such as inputting your email address or profile name. You do so, not knowing
that, you have provided access to the malicious software. This software is capable of taking
over the functionality of your computer. An infected computer will begin to operate slowly
and will exhibit pop-ups from time to time. Eventually the computer will cease to operate,
or crash.

The best way to avoid the Trojans is to adopt safe download practices. If you are not sure of
the website safety, then it is probably best not to download any program from that source.

An example of the Trojan horse was “I love you” which infected several computers in USA
and Asia, completely damaging the data of millions of computers

4. Spyware
A Spyware as the name suggest is a program used to spy on the computer system. This
program will try to get all the confidential and sensitive information such as your bank

98 Information and Computer Technology


account numbers, passwords etc. Then this confidential data is misused to access user’s
accounts. Spyware can also change the configuration of your computer, generally without
obtaining your consent first.

There are a number of ways Spyware or other unwanted software can get on to computer.
A common trick is to covertly install the software during the installation of other software
that is being downloaded such as music or video or a file-sharing program.

Once installed, the Spyware monitors user activity on the Internet and transmits that
information in the background to someone else. Spyware can also gather information
about e-mail addresses and even passwords and credit card numbers.

SpyWare sends information back to the spy ware’s home base via the user’s Internet
connection, thus it eats user’s internet bandwidth. SpyWare applications running in the
background can lead to system crashes or general system instability as they use memory
and system resources of the user’s computer.

SpyWare have the ability to monitor keystrokes, scan files on the hard drive, snoop other
applications, such as chat programs or word processors. It also installs other SpyWare
programs, read cookies, change the default home page on the Web browser. While doing
so, it consistently relays this information back to the SpyWare author who will either sell
the information to another party or use it for advertising/marketing purposes.

Some of the common Spywares are CoolWebSearch, Internet optimizer and Zango

5. Malware
Malware is short for “malicious software.” Malware is any kind of unwanted software that
is installed without your adequate consent. The intent of the malware is to damage the
data or functionality of the computer or network. In fact all the threats mentioned above
such as virus, Trojans etc are examples of Malware.

6. Spams
The term “spam” refers to unsolicited commercial email (UCE) or unsolicited bulk email
(UBE). It is flooding the Internet with many copies of the same message, in an attempt
to force the message on people who would not otherwise choose to receive it. It is also
referred as junk email. Unsolicited email mostly contains advertisements for services or
products. However most of the spams are from marketers or user who are trying to deceive
the users. The most commonly seen spam includes the following:

Security Threats and Safety Measures 99


❖ Phishing scams, a very popular and dangerous form of email fraud
❖ Foreign bank scams or advance fee fraud schemes
❖ Other “Get Rich Quick” or “Make Money Fast” (MMF) schemes
❖ Quack health products and remedies
Spam emails is not only unwanted, it clogs your email accounts and uses unnecessary
server space. This creates burden on servers in the businesses. Since Internet is a public
platform, it is never possible to completely stop the Spam email. However precaution
can be taken while looking at an unknown email addresses. Most of the email hosts can
identify such users and help filter them.

Spam costs the sender very little to send -- most of the costs are paid for by the recipient
or the carriers rather than by the sender. It is because of these additional costs that most
of the hosts are very keen that users use spam filters as well as report spams so they can
be stopped.

7. Hackers and crackers


Hackers and crackers are the software programmers who use dubious
ways to get control over your computer and systems. The intent of
both hackers and crackers is to gain control over your computer so
that they can get the sensitive confidential information. They then use
this information against you by stealing money, personal data, pictures,
bank details and government military information, so on and so forth.
This information can either be sold for money or hackers access account
themselves to rob you directly. Originally hackers were the gifted programmers who gain
access to the systems or network to show case the security loopholes to the administrators.
Later the term cracker was coined for such activist who had intentions of doing malicious
activities. Crackers have an end goal of destroying data and network for personal monetary
gains.

8. Anti Virus Tools


Anti Virus tools are the software programs that help us detect the virus in emails or files
and hence protect our computers. These tools can detect virus, worms, Trojans as well as
spyware and adware. They block us from visiting unsafe websites, and also downloading
unsafe programs from such websites. They protect us from identity thefts and threats
from phishing websites. There are several commercial antivirus softwares available such
as Norton, Mcafee, K7, Quickheal etc.

100 Information and Computer Technology


9. Data Backup and security
As we discussed earlier, there are threats to the computers that
are sometimes hard to avoid. Unknowingly we may open an email
that may have virus attachments and can destroy all the program
and data on our computer. That is why to protect ourselves from
such unknown threat; we need to assure backing up the data.
The basic principal on data back up is very simple, just make
another copy of the data and keep it elsewhere than on the same
computer. This guarantees that once the data on your computer gets corrupted due to a
threat, you can reload the data again on your computer once it has been rectified. These
days you have external hard drives which can back up data. Also most of the smart devices
are also used to back up the data.

Before we discuss in detail how to use the security tools, here are some of the guiding
principles to use the computers securely.

1. Using Security software such as Norton antivirus, Symantec etc.


2. Never share passwords
3. Beware of email attachments form unknown sources
4. Do not randomly download material from websites which has not been checked for
security
5. Never propagate hoax or chain emails
6. Always logout your laptop or computer
7. Restrict remote access
8. Frequently back up important data and files
9. Use encryption or sites that use encrypted data

There are several security tools available which help us protect against all sorts of threats
mentioned above. In brief, the tools are available for antispam, antivirus, firewalls, encryption
tools, password managers and cleanup tools.

First Recorded Computer Crime


In 1820, Joseph-Marie Jacquard, a textile manufacturer in France, produced the loom. This
device allowed the repetition of a series of steps in the weaving of special fabrics. This
resulted in a fear amongst Jacquard’s employees that their traditional employment and

Security Threats and Safety Measures 101


livelihood were being threatened. They committed acts of sabotage to discourage Jacquard
from further use of the new technology. This is the first recorded cyber crime!

Viruses
Case 1: Brain (in its first incarnation written in January 1986) is considered to be the first
computer virus for the PC. The virus is also known as Lahore, Pakistani, Pakistani Brain, Brain-A
and UIUC. The virus was written by two brothers, Basit and Amjad Farooq AM, who lived in
Lahore, Pakistan. The brothers told TIME magazine they had written it to protect their medical
software from piracy and was supposed to target copyright infringers only.
The virus came complete with the brothers’ address and three phone numbers, and a message
that told the user that their machine was infected and for inoculation the user should call
them.
When the brothers began to receive a large number of phone calls from people in USA, Britain,
and elsewhere, demanding them to disinfect their machines, the brothers were stunned and
tried to explain to the outraged callers that their motivation had not been malicious.
They ended up having to get their phone lines cut off and regretted that they had revealed
their contact details in the first place. The brothers are still in business in Pakistan as internet
service providers in their company called Brain Limited.
Introduces or causes to be introduced any viruses or contaminant in that case, suit filed under
Chapter IX of IT Act i.e. Section 43 as a Civil Wrongs under IT Act

Worms
Case 1: The 1988 Internet Worm was the first major worldwide computer security incident
where malware (software that is malicious) propagated throughout the internet. This worm
infected Unix servers, taking advantage of different types of vulnerability in installed code such
as Sendmail and finger. The lessons from that incident are still valid and, surprisingly perhaps,
the vulnerabilities identified that allowed the worm to cause such problems are still present
in some modern software.
The perpetrator of the 1988 Internet worm (Robert Morris, a graduate student at Cornell
University) meant no harm but was experimenting with what was possible. He is now a respected
computer science researcher. Security authorities no longer accept such an excuse so you
should not attempt any such security ‘experiments’.
Case 2: Probably the world’s most famous worm was the Internet worm let loose on the
Internet by Robert Morris sometime in 1988. The Internet was, then, still in its developing
years and this worm, which affected thousands of computers, almost brought its development
to a complete halt. It took a team of experts almost three days to get rid of the worm and in
the meantime many of the computers had to be disconnected from the network.

102 Information and Computer Technology


Trojan horses
Case 1: Hacker sentenced to 21 months jail in TKBot Trojan horse case, Sophos reports
An American hacker has been sent to jail after using a Trojan horse to break into innocent
internet users’ computers.
Raymond Paul Steigerwalt, from Indiana, has been sentenced to 21 months in jail for his
involvement in an international hacking gang which broke into computers around the world,
including PCs at the United States Department of Defense, with a Trojan horse.
Steigerwalt, 21, was a member of the international “Thr34t-Krew” hacking gang which launched
a Trojan horse designed to break into internet-connected computers. TheTroj/TKBot-A Trojan
horse (also known as the TKWorm) exploited a vulnerability that is found on some Microsoft
IIS web servers.
At least two computers belonging to the Department of Defense were infected and damaged
by the malicious code. Between October 2002 and 7 March 2003, Steigerwalt and other
members of the Thr34t-Krew gang were able to remotely control infected computers without
the knowledge of the computers’ owners.
Steigerwalt, who pleaded guilty to the charges, has been ordered to pay $12,000 to the
Department of Defense for damage caused by the Trojan horse
Case 2: A young lady reporter was working on an article about online relationships. The article
focused on how people can easily find friendship and even love on the Internet. During the
course of her research she made a lot of online friends. One of these ‘friends’ managed to
infect her computer with a Trojan.
This young lady stayed in a small one bedroom apartment and her computer was located in
one corner of her bedroom. Unknown to her, the Trojan would activate her web camera and
microphone even when the Internet was switched off. An year later she realized that hundreds
of her pictures were posted on pornographic sites around the world!

Spyware
‘Loverspy’ Spyware Creator Now Most Wanted Internet Criminal on FBI’s List
Carlos Enrique Perez-Melara, an ex-student of certain San Diego-situated college, was lately listed on Federal
Bureau of Investigation’s (FBI) list of Internet criminals, who were most wanted, because he had created
“Loverspy” one notorious spyware also called “Email PI,” published theverge.com dated November 7, 2013.

Perez-Melara, aged 33, had developed the malware valuing $89 such that it would catch a person who acted
deceitfully while pretending to love. It dispatched one e-greeting card to the suspected deceiver which if viewed
would plant one especially harmful Trojan capable of seizing e-mail ids, keystrokes, IM (instant messages) as
well as movie from the victim’s web-based camera. Following the Trojan’s planting, the contaminated PC fully
came under the control of the hacker.

Security Threats and Safety Measures 103


Spams
Sanford Wallace, 43, also known as “Spamford Wallace” and “David Frederix”, was arrested in
Las Vegas on Thursday. Wallace is accused of hacking into 500,000 accounts to harvest friend
lists between November 2008 and March 2009. He allegedly used the compromised lists to
make more than 27 million unsolicited postings on Facebook walls that appeared to come
from friends.
If targets clicked on links within the messages, they were presented with a website designed
to fool them into handing over their full name, email address and password, prosecutors
said. Finally they would be redirected to affiliate websites that would allegedly pay Wallace
“substantial revenue” for traffic.
The scheme relied on vulnerabilities that Wallace discovered in Facebook’s spam filters,
according to the indictment.
“To accomplish his scheme, Wallace first tested his spamming capabilities between two Facebook
accounts,” it said.
“[He] used a fake Facebook account of ‘David Frederix’ and his legitimate ‘Sanford Masterwb
Wallace’ account to test variations of spam messages in order to evade Facebook’s filtering
mechanisms.
“Once Wallace evaded Facebook’s spam filters he employed an automatic scripting process to
sign into a compromised Facebook user’s account, retrieve a list of all the user’s friends, and
then post a spam message to each of the user’s friend’s Facebook walls.”
Wallace is now indicted on a total of 11 charges of fraud, intentional damage to a protected
computer, and criminal contempt.
The contempt charges relate to an earlier civil case brought against Wallace by Facebook
itself.
A federal judge awarded the dominant social network $711m in damages in October 2009. The
firm did not expect Wallace to pay, but the judge also ordered him not to log in to Facebook.
According to Thursday’s indictment he “wilfully and knowingly” breached that order.
Wallace, who first gained notoriety as a spammer in the 1990s and also lost a civil case brought
against him by MySpace in 2008, was released on $100,000 bail. He faces up to three years
in jail and a $250,000 fine for each of the six fraud charges and up to 10 years in jail for each
of the three charges of intentional damage to a protected computer.
Facebook welcomed the arrest.
“We applaud the efforts of the US Attorney’s Office and the FBI to bring spammers to justice,”

“Two years ago, Facebook sued Wallace and a federal court ordered him to pay a $711 million
judgment for sending unwanted messages and wall posts to people on Facebook. Now Wallace
also faces serious jail time for this illegal conduct.”

104 Information and Computer Technology


Hackers and Crackers
An engineering dropout and global hacker, is in the CBI net. He is part of a global network of
hackers and was arrested from Pune following a tip-off from the FBI. He was flown to New
Delhi in the evening.
This is for the first time that a global network of cyber hackers has been traced to India.
Investigating agencies of China, Romania and the United States collaborated with the CBI to
pounce upon the 32-year-old professional hacker who, a source said, had compromised more
than 1,000 internet accounts around the world.
The CBI claims that his hacking syndicate has been active in India since 2011, and that he has
confessed to hacking 950 foreign email accounts besides 171 in India. He was arrested from
his house in Pune and taken to New Delhi on a transit-remand for further questioning.
The CBI tracked him down after the FBI passed on information on the global network of cyber
hackers. Simultaneous raids were conducted in Mumbai and Ghaziabad.
This is not the first time he has been arrested. In 2003, he was arrested by the Mumbai police
for defrauding a Mumbai-based credit card processing company of nearly Rs9 lakh when he
was only 21 and pursuing a degree in engineering in Pune. At that time, he was operating
a website designing services start-up www.mafiaz.com. During investigation, police found
several fictitious names of clients and bank account numbers in his computer.
“Though he has claimed to have hacked into the email accounts of over 900 people globally,
the kind of clientele whom he was serving is still to be established. From identify theft to
corporate rivalry, he was serving all types of clients,” a CBI officer said. But he hacked only
email accounts and not bank accounts.
CBI claimed that he was operating through two websites — www.hirehacker.net and www.
anonymity.com — and was charging between $250-500 for his service. He was paid via Western
Union money transfer and Paypal. He used to send the money to his father and girlfriend.
“As part of an international law enforcement operation, the CBI has registered two cases against
suspected operators of hacking websites. Similar operations are being conducted in Romania,
China and the US. It is suspected that the number of email accounts hacked may be much
larger once the data is collected and the accused are interrogated,” a CBI officer said.
The hacker’s clientele included jilted lovers and corporate entities. After registering the cases,
the CBI carried out searches in two locations in Mumbai and one each in Pune and Ghaziabad
for violations of various sections of the IT Act and section 379 of the IPC.

Sections applicable in hacking


Hacking is punishable under section 66 read with section 43 of the Information Technology
Act, 2000.
Punishment/Fine
The person can be punished with up to three years imprisonment or fine up to Rs5 lakh or
both.
***Name of hacker Hidden purposefully

Security Threats and Safety Measures 105


Summary of Sections Applicable for Cyber Crimes
Cyber Crime ITAA 2008 Act Section’s -IPC Section’s
Email spoofing 66D- 416,417,463,465,419
Hacking 66,43-378,379,405,406
Web-jacking 65 -383
Virus attacks 43,66
Logic bombs 43,66
Salami attacks 66
Denial of Service attacks 43
Email bombing 66
Pornography & Child Pornography 67, 67B -292,293,294
Bogus websites, cyber frauds 420
Forgery of electronic records 463, 465, 470, 471
Sending defamatory messages by email 66A- 499, 500
Sending threatening messages by email 66A -503, 506
Financial Crime 415,384,506,511
Cyber Terrorism 66F -153A, UAPA 15-22
Identity Theft 66C-417A, 419A
Website Defacement 65 -463,464,468,469

Summary
❖ A computer virus is a program usually hidden within another simple program.
❖ Macro viruses created with the intention of fooling the user can deceive them in sharing
confidential information.
❖ Worms are very similar to viruses in the manner that they are computer programs that
replicate copies of themselves.
❖ A Trojan horse is a program that claims to rid your computer of viruses but instead introduces
viruses into the system.
❖ A Spyware is a program used to spy on the computer system to get all the confidential and
sensitive information such as your bank account numbers, passwords etc.
❖ Malware is any kind of unwanted software that is installed without your adequate
consent.
❖ Spam emails is not only unwanted, it clogs your email accounts and uses unnecessary server
space. It is also referred as junk email.
❖ Hackers were the gifted programmers who gain access to the systems or network to show
case the security loop holes to the administrators.
❖ Cracker was coined for such activist who had intentions of doing malicious activities.

106 Information and Computer Technology


Exercise

A. Multiple Choice Questions


1. Which of the following is an anti-virus program
(a) Norton (b) Quick heal
(c) K7 (d) All of these
2. All of the following are examples of real security and privacy threats except:
(a) Hackers (b) Spam
(c) Virus (d) Worm
3. Trojan horses are very similar to virus in the matter that they are computer programs
that replicate copies of themselves.
(a) True (b) False
4. _____________ monitors user activity on internet and transmit that information in the
background to someone else.
(a) Malware (b) Adware
(c) Spyware (d) None of these
5. Viruses are __________.
(a) Man made (b) Naturally occur
(c) Machine made (d) All of the above
6. Firewall is a type of ____________.
(a) Virus (b) Worm
(c) Security threat (d) None of the above
7. Unsolicited commercial email is known as ____________.
(a) Spam (b) Virus
(c) Malware (d) Spyware

B. Match the following


(1) Virus (a) “Get Rich Quick” Scheme
(2) Worm (b) Cool Web Search
(3) Trojan Horse (c) I Love You
(4) Spyware (d) Jerusalem
(5) Spam (e) Wazzo

C. Answer the following questions:


Q.1. While working on the computer, you notice that the system is working very slowly, files are
corrupted, default home page on the web browser has changed, lot memory is consumed,
and unnecessary pop-ups are coming. What can be the probable reason?

Security Threats and Safety Measures 107


Q.2. You have very important data on your computer. How will you ensure that this data
remains safe?
Q.3. Differentiate between virus, worms and Trojan horses.
Q.4. How is a hacker different from a cracker?

D. Lab Session
❖ Search the internet for various new viruses and worms that surfaced in last year.
❖ Research various email spams that are sent out these days. How many of these have
you seen which are related to banks? Please visit bank websites and identify if they have
messages about spams.
❖ Make a list of security tools available for your computer by researching on the internet
and t ell what all threats they protect you from.
❖ Make a list of different anti-virus programs available today, along with their pricing and
protection features.
❖ Scan your system to find out different security threats infecting your computer.
❖ Do a survey and find out how many people are comfortable making payments online.
If they are not, find reasons for the same. Also suggest them the ways to make online
payments safe.

108 Information and Computer Technology


Chapter 7
Project

Once you have understood all the tags of HTML and the basics of GIMP, you are ready to
make web applications. The following specifications must be considered while developing
a web site:

1. Identify the problem.


2. Once you have analyzed the problem, you will have a clear idea about the web pages
to be created.
3. When designing your site, pay attention to layout, typography and images.
4. Always use standard Font styles in your web site so that all the browsers should
support them.
5. Site should exhibit strong design, user-friendly navigation, clear and consistent layout,
and professional appearance.
6. Your site should exhibit proper use of background and font colours.
7. Website must include at least one image , it can be a scanned photo, a digital
photograph, or a graphic/artwork created by you.
8. You may use other images, but they must not violate copyright laws.
9. All images must have alt tags, be well placed, and working correctly.
10. Each page must have an appropriate title.
11. Each page must have a consistent navigation menu containing functional links to all
other main pages
12. Visit every page and check to make sure all links work correctly.
13. Test your site behaviour across multiple browsers (e.g. Internet Explorer, Firefox,
Safari, etc.) and different operating systems (e.g. Windows, iOS).
After following all the instruction now you are ready to publish your website on web
server.

Projects 109
Sample Case Studies
1. Develop a website of your favourite cartoon character. The Home page should
consists of the information of the character. It should also offer link to other web
pages and each of these web pages should contain a link to home page and to the
various html pages required in your site. Use Gimp software to give various effects
to the images to be included in the website.

Home | Tom | Jerry | About Us | Video | Contact Us

Introduction
Tom and Jerry is an American series of theatrical animated cartoon films created by William Hanna and Joseph Barbera
for Metro-Goldwyn-Mayer, centering on a never-ending rivalry between a cat (Tom) and a mouse (Jerry) whose chases
and battles often cartoon studio in Hollywood between 1940 and 1957, when the animation unit was closed. the original
series is notable for having won the Academy Award for Animated Short Film seven times, tying it with Walt Disney’s
silly Symphonies as the theatrical animated series with the most Oscars. A longtime television staple, Tom and Jerry has a
worldwide audience that consists of children, teenagers and adults, and has also been recognized as one of the most
famous and lingest-lived rivalries in American cinema.

Copyrights@tom & Jerry


All Rights Reserved
Owned By IP WORLD

<html>
<head>
<title>:::Tom $ Jerry:::</title>
</head>
<body bgcolor=#7aafef alink=”green” vlink=”white” link=”red”>
<center><embed src=”audio.mp3” autostart=”true” height=1 width=1 ></center></
embed>
font face=”trebuchet ms” size=8 color=”black”><i>Tom $ Jerry</i></font>
<center><font face=”trebuchet ms” size=4 color=”white”><a href=”1.htm” >Home</a> |
Tom | Jerry | About Us | <a href=”3.htm” >Video</a> | <a href=”2.htm”>Contact Us</
a></font></center>
<font face=”tr ebuchet ms” size=4 color=”black”><h2>Introduction</h2>
Tom and Jerry is an American series of theatrical animated cartoon films created by William
Hanna and Joseph Barbera for Metro-Goldwyn-Mayer, entering on a never-ending rivalry
between a cat (Tom) and a mouse (Jerry) whose chases and battles often involved comic
violence. Hanna and Barbera ultimately wrote and directed one hundred and fourteen
Tom and Jerry shorts at the MGM cartoon studio in Hollywood between 1940 and 1957,

110 Information and Computer Technology


when the animation unit was closed. The original series is notable for having won the
Academy Award for Animated Short Film seven times, tying it with Walt Disney’s Silly
Symphonies as the theatrical animated series with the most Oscars. A longtime television
staple, Tom and Jerry has a worldwide audience that consists of children, teenagers and
adults, and has also been recognized as one of the most famous and

longest-lived rivalries in American cinema.

<img src=”5.jpg” height=180>


<img src=”1.jpg” height=100 width=100>&nbsp;<img src=”2.jpg” height=100
width=100>&nbsp;<img src=”3.jpg” height=100 width=100>&nbsp;<img src=”4.jpg”
height=100 width=100>&nbsp;<img src=”5.jpg” height=100 width=100>&nbsp;<img
src=”1.jpg” height=100 width=100>&nbsp;<img src=”2.jpg” height=100
width=100>&nbsp;<img src=”3.jpg”height=100 width=100>&nbsp;<img src=”4.jpg”
height=100 width=100>&nbsp;<img src=”5.jpg” height=100 width=100>&nbsp;<img
src=”4.jpg” height=100 width=100>&nbsp;<img src=”5.jpg” height=100 width=100>
<hr = 2><center><font face=”trebuchet ms” size=2 color=”black”>Copyrights © Tom &
Jerry<br>All Rights Reserved<br>Owned By IP WORLD</center></font>
</body>
</html>

Home | Tom | Jerry | About Us | Video | Contact Us

Copyrights@tom & Jerry


All Rights Reserved

<html>
<head>
<title>:::Tom $ Jerry:::</title>
</head>
<body alink=”white” vlink=”white” link=”white” bgcolor=#7aafef>

Projects 111
<img src=”1.jpg” height=200 >
<font face=”trebuchet ms” size=8 color=”black”><i>Tom $ Jerry</i></font>
<center><font face=”trebuchet ms” size=4 color=”white”><a href=”1.htm”>Home</a> |
Tom | Jerry | About Us | <a href=”3.htm”>Video</a> | <a href=”2.htm”>Contact Us</
a></font></center>
<center><embed src=”1.avi” height=300 width=300><hr = 2><center><font face=”trebuchet
ms” size=2 color=”black”>Copyrights © Tom & Jerry<br>All Rights Reserved </center></
font>
</body>
</html>

Home | Tom | Jerry | About Us | Video | Contact Us

Contact US

IPWS Paschim Vihar ©

Copyrights@Tom & Jerry


All Rights Reserved

<html>
<head>
<title>:::Tom $ Jerry:::</title>
</head>
<body alink=”white” vlink=”white” link=”white” bgcolor=#7aafef>
<img src=”1.jpg” height=200 ></td><td align=”right” valign=”bottom”><font
face=”trebuchet ms” size=8 color=”black”><i>Tom $ Jerry</i></font>
<center><font face=”trebuchet ms” size=4 color=”white”><a href=”1.htm”>Home</
a> | Tom | Jerry | About Us | <a href=”3.htm”>Video</a> | <a href=”2.htm”>Contact
Us</a></font></center></td></tr></table><center><br><br><br><br><center><font
face=”trebuchet ms” size=4 color=#000000><b>Contact Us<br><br>IPWS Paschim Vihar
&copy;</b></font><br><br>
<center><hr = 2><font face=”trebuchet ms” size=2 color=”black”>Copyrights © Tom &
Jerry<br>All Rights Reserved </center></font>

112 Information and Computer Technology


</body>
</html>
2. Develop a website of any personality related to the Bollywood music of your choice.
The Home page should consist of the information of the person. It should also offer
link to the other web pages containing his contribution to the industry and each of
these web pages should contain a link to home page and to the various html pages
required in your site.Use Gimp software to give various effects to the images to be
included in the website.

<html>
<body bgcolor=#800000 link=#800000 alink=#000000 vlink=#800000>
<img src=main.jpg height=160 width=250>
<font face=”Calligraph421 BT” color=000000 size=7><b><i>
<img src=9.jpg height=50 width=80> The Legendary Kishor Kumar&nbsp;
<img src=10.jpg height=50 width=80>
<br><br>
<font face=”trebuchet ms” size=5 color=#ffffff>
<h2>Introduction</h2></font>

Projects 113
<font face=”Calligraph421 BT” size=4.5 color=#ffffff>Kishore Kumar (4 August 1929 – 13
October 1987), born Abhas Kumar Ganguly was a popular Indian film playback singer.
He is also known as an actor, lyricist, composer, producer, director, screenwriter and
scriptwriter. Kishore Kumar sang in many Indian languages including Bengali, Hindi,
Marathi, Assamese, Gujarati, Kannada, Bhojpuri, Malayalam and Oriya. He won 8 Filmfare
Awards for Best Male Playback Singer and holds the record for most number of Filmfare
Awards won in that category. He was awarded the “Lata Mangeshkar Award” by the Madhya
Pradesh government and from that year onwards, the Madhya Pradesh Government initiated
a new award called the “Kishore Kumar Award” for contributions to Hindi cinema.
</font>
<img src=1.jpg height=250 width=350>
<br>
<img src=2.jpg height=200 width=350>
<font face=”Calligraph421 BT” color=#ffffff size=4.5>
After Ashok Kumar became a big star in Hindi films, the Ganguly family used to visit
Bombay regularly. Kishore Kumar’s first film as an actor was Shikari (1946), in which
Ashok Kumar played the lead role. Music director Khemchand Prakash gave Kishore
Kumar a chance to sing “Marne ki duayen kyon mangu” for the film Ziddi (1948). After
this, Kishore Kumar got many other assignments, but he was not very serious about a
film career. In 1949, he decided to settle in Mumbai.Kishore Kumar played hero in the
Bombay Talkies film Andolan (1951), directed by Phani Majumdar. Although Kishore
Kumar got some assignments as an actor with help of his brother, he was more interested
in becoming a singer.
</font>
<br><marquee height=135 width=100% bgcolor=#FCAC28 scrollamount=”20”><img
src=1.jpg height=130 width=130><img src=7.jpg height=130 width=130><img src=2.
jpg height=130 width=130><img src=3.jpg height=130 width=130><img src=4.jpg
height=130 width=130><img src=5.jpg height=130 width=130><img src=6.jpg height=130
width=130></marquee><table bgcolor=#ffcf28 width=100%><tr><td align=center>
<center><font face=”calibri” size=4 color=#fcac28><a href=1.html >Home</a>|<a href=2.
html >Videos</a>|<a href=3.html >Contact Us</a></center></font></td></tr></table>
</body>
</html>

114 Information and Computer Technology


<html>
<head>
<title>Kishore Kumar::Videos</title>
</head>
<body bgcolor=#800000 link=#fcac28 alink=white vlink=#fcac28>
<img src=main.jpg height=180 width=250 align= right><font face=”Calligraph421 BT”
color=#ffffff size=7><b><i><img src=9.jpg height=50 width=80> The Legendary Kishor
Kumar<img src=10.jpg height=50 width=80><b><i></font><br><br><br><br><center>
<embed src=Video1.mp4 height=300 width=350></center><center><embed src=Video2.
mp4 height=300 width=350></center>
<br>
<center>
<font face=”calibri” size=4 color=#800000><a href=1.html >Home</a>|<a href=2.html
>Videos</a>|<a href=3.html >Contact Us</a></font></center>
<br>
<br>
</body>
</html>

Contact Us
Phone No - 2521350, 2341083
Copyright @ All rights reserved
Owned by ABC WORLD, New Delhi

Copyright@Olidk Mayaal Codiek kd


(reserved by ABC World)

Projects 115
<html>
<head>
<title>::KishorKumar::-Contact Us</title>
</head>
<body bgcolor=#800000 link=white alink=white vlink=white>
<center><font face=”bahaus 93” size=6 color=”white”><b>Contact Us</b></font><font
face=”bahaus 93” size=5 color=”white”><br>Phone No = 25261350, 42341083
<br>Copyright &copy; All rights reserved<br>Owned by ABC WORLD, New Delhi</
center><br><hr size=10 width=100% color=#fcac28><center><font face=”trebuchet ms”
size=2 color=#ff0000><b>Copyright &copy; Old Singers Collection<br>Owned by ABC
WORLD</b></font></center>
</body>
</html>
3. Create a Website for the food point displaying information about nutritious food
items. The Home page should consist of the information of the food items available
in the food point. It should also offer link to the other web pages and each of these
web pages should contain a link to home page and to the various html pages required
in your site. Use Gimp software to give various effects to the images to be included
in the website.

Eating Paradise
Home Videos Contact Us

Introduction
Food is any substance consumed to provide nutritional support for the body. It is usually of plant or animal origin, and contains
essential nutrients, such as carbohydrates, fats, proteins, vitamins, or minerals. The substance is ingested by an organism and
assimilated by the organism’s cells in an effort to produce energy, maintain life, or stimulate growth. Historically, people secured
food through two methods: hunting and gathering, and agriculture. Today, most of the food energy consumed by the world
population is supplied by the food industry.

The term health food si generally is used to describe foods that are cnsidered to be benecial to health, beyond a normal healthy
diet required for human nutrition. However, the term is not precisely dened by national regulatory agencies such as the U.S.
Food and Drug Administration. “Health food” is sometiems used as an umbrella term encompassing natural foods, organic foods,
whole foods, and sometimes dietary supplements. Such products are sold inhealth food stores or in the health/organic sections of
supermakets

Copyright©SG & EV

116 Information and Computer Technology


<html>
<head>
<title>::Healthy Food::</title>
</head>
<body bgcolor=#abe764 link=white alink=white vlink=white>
<img src=16.jpg height=150 width=400>
<font face=”Calligraph421 BT” size=12 color=#001e16>Eating Paradise
</font>
<br>
<font face=”calibri” size=4 color=#ffffff><center>
<a href=1.html>Home</a> | <a href=2.html>Videos</a> | <a href=3.html>Contact Us</
a></center></font><br><br>
<font face=”trebuchet ms” size=5 color=#002f00><h2>Introduction</h2></font><font
face=”Calligraph421 BT” size=4.5 color=#001e16>Food is any substance consumed to
provide nutritional support for the body. It is usually of plant or animal origin, and
contains essential nutrients, such as carbohydrates, fats, proteins, vitamins, or minerals.
The substance is ingested by an organism and assimilated by the organism’s cells in an
effort to produce energy, maintain life, or stimulate growth. Historically, people secured
food through two methods: hunting and gathering, and agriculture. Today, most of the
food energy consumed by the world population is supplied by the food industry.</font>
<img src=healthy-food-pic.jpg height=190 width=250>
<br>
<img src=vegetables_healthy_food.17114320.jpg height=190 width=250>
<font face=”Calligraph421 BT” size=4.5 color=#001e16><br><br>The term health food is
generally is used to describe foods that are considered to be beneficial to health, beyond
a normal healthy diet required for human nutrition. However, the term is not precisely
defined by national regulatory agencies such as the U.S. Food and Drug Administration.
“Health food” is sometimes used as an umbrella term encompassing natural foods, organic
foods, whole foods, and sometimes dietary supplements. Such products are sold inhealth
food stores or in the health/organic sections of supermarkets.</font>
<br><marquee height=135 width=100% onmouseover=”this.stop()” onmouseout=”this.
start()” bgcolor=#002f00 scrollamount=”20”><img src=1.jpg height=130 width=130><img

Projects 117
src=2.jpg height=130 width=130><img src=3.jpg height=130 width=130><img
src=4.jpg height=130 width=130></marquee><br><hr size=10 width=100%
color=#fcac28><center><font face=”trebuchet ms” size=2 color=#ff0000><b>Copyright
&copy; &#36;G &amp; &euro;V </b></font></center>
</body>
</html>

Eating Paradise
Home Videos Contact Us

Copyright @ Health Department

<html>
<head>
<title>::Healthy Food::-Videos</title>
</head>
<body bgcolor=#abe764 link=white alink=white vlink=white>
<table width=100%><tr><td align=left valign=bottom><img src=16.jpg height=150
width=400></td><td align=right valign=bottom><font face=”Calligraph421 BT” size=12
color=#001e16>Eating Paradise</td></font></tr></table><br><table bgcolor=#001e16
height=80 width=100%><tr><td><font face=”calibri” size=4 color=#001e16><center><a
href=1.html>Home</a>|<a href=2.html>Videos</a>|<a href=3.html>Contact Us</
a></center></font></td></tr></table><br><br><br><br><table width=100%><tr
align=center><td align=center valign=middle width=100%><center><embed src=food.
mp4 height=300 width=350></center></td></tr></table><br><hr size=10 width=100%
color=#fcac28><center><font face=”trebuchet ms” size=2 color=#ff0000><b>Copyright
&copy; Health Department<br></b></font></center>
</body>
</html>

118 Information and Computer Technology


Eating Paradise
Home Videos Contact Us

Contact Us
Copyright @ All rights reserved
Owned by ABC Food Co.

Copyright@Health Department

<html>
<head>
<title>::Healthy Food::-Contact Us</title>
</head>
<body bgcolor=#abe764 link=white alink=white vlink=white>
<img src=16.jpg height=150 width=400 align=right ><font face=”Calligraph421 BT”
size=12 color=#001e16>Eating Paradise</font>
<br>
<font face=”calibri” size=4 color=#001e16><center><a href=1.html>Home</a>|<a href=2.
html>Videos</a>|<a href=3.html>Contact Us</a></center></font>
<br><br><br><br><center><font face=”bahaus 93” size=6 color=#000000><b>Contact
Us</b></font>c <font face=”bahaus 93” size=4 color=”black”><br>Copyright &copy;
All rights reserved<br>Owned by ABC Food Co.</center><br><hr size=10 width=100%
color=#fcac28><center><font face=”trebuchet ms” size=2 color=#ff0000><b>Copyright
&copy; Health Department </b></font></center>
</body>
</html>
4. Create a website depicting different festivals of India. The Home page should have
links of all festivals of India . It should also offer link to the other web pages and
each of these web pages should contain a link to home page and to the various html
pages required in your site. Use Gimp software to give various effects to the images
to be included in the website.

Projects 119
Festivals Of India
Home | ContactUs | Typesof Festivals | Feedback

Photo Gallery

Live the Moments ....


Some Famous Festivals:

• Diwali
• Dusshera
• Holi
• Eid
• Christmas
• Pongal
• Oman
• Raksha Bandhan
• Janamashtmi
• Navratri
Indian Festivals celebrated by varied cultures and through their special rituals add to the
• Maha Shivartri
colours of Indian Heritage. Some festivals welcome the seasons of the year, the harvest, the • Ram Navami
rains, or the full moon. Others celebrate religious occasions, the birthdays of divine beings
saints, and gurus (reversed teachers), or the advent of the New year. A number of these festivals
are common to most parts of India, however they are celebrated differently in different parts of
the country....

<html>
<head>
<title></title></head>
<body link = “blue” vlink = “purple” alink = “blue” border=1>
<img src = “r.gif ” height = 50 width = 35% border = 2><font face = “trebuchet ms” color
= “maroon” size = 30><p align = “right”><i><u> Festivals Of India </u></i></font>
<br>
<font face = “trebuchet ms” color = “maroon” size = 4><p align = “center”> Home |
<a href = “2nd page.htm”>Contact Us </a>| Types of Festivals | <a href = “Feedback.
htm”>Feedback</a></font>
<hr>
<font face = “trebuchet ms” size = 3 color = “maroon”>Photo Gallery </font>
<marquee scrollamount = 8 behavior = “scroll” loop = 100>
<img src = “b.jpg” height = 100 width = 100>
<img src = “c.jpg” height = 100 width = 100>
<img src = “e.jpg” height = 100 width = 100>
<img src = “f.jpg” height = 100 width = 100>
<img src = “g.png” height = 100 width = 100>

120 Information and Computer Technology


<img src = “h.jpg” height = 100 width = 100>
<img src = “i.jpg” height = 100 width = 100>
<img src = “k.jpg” height = 100 width = 100>
<img src = “j.jpg” height = 100 width = 100>
<img src = “l.jpg” height = 100 width = 100>
<img src = “m.gif ” height = 100 width = 100>
<img src = “n.jpg” height = 100 width = 100>
<img src = “o.jpg” height = 100 width = 100>
<img src = “p.jpg” height = 100 width = 100>
<img src = “q.gif ” height = 100 width = 100>
<img src = “s.jpg” height = 100 width = 100>
</marquee></td></tr></table>

<font face = “trebuchet ms” color = “white” size = 6 valign = “middle” ><p align = “center”>
Live the Moments .....</font>
<font face = “trebuchet ms” color = “maroon” size = 5>&nbsp;&nbsp;&nbsp; <u>Some
Famous Festivals</u>:</font>
<ul><font face = “trebuchet ms” color = “white” size = 5><i>
<li><a href=”Diwali.htm”> Diwali</a>
<li><a href=”Dusshera.htm”> Dusshera</a>
<li><a href=”Holi.htm”> Holi</a>
<li> Eid
<li> Christmas
<li> Pongal
<li> Oman
<li> Raksha Bandhan
<li> Janamashtmi
<li> Navratri
<li> Maha Shivratri
<li> Ram Navami
</i></font></ul>
<br><p align=”center”><img src = “a.jpg” height = 250 width = 250 border = 3>

Projects 121
<br>
<br>
<br>
<font face = “trebuchet ms” color = “Blue” size = 4><p align = “justify”><i>Indian Festivals
celebrated by varied cultures and through their special rituals add to the colours of Indian
Heritage. Some festivals welcome the seasons of the year, the harvest, the rains, or the
full moon. Others celebrate religious occasions, the birthdays of divine beings, saints, and
gurus (revered teachers), or the advent of the New Year. A number of these festivals are
common to most parts of India, however they are celebrated differently in different parts
of the country.....</i></font>
<br>
</body>
</html>
2nd page.htm

file///C:Users/Savi/Desktop/Festivals%200%India/2nd%20page.htm

Festivals of India
Home | About Us | Types of Festivals | Feedback
Photo Gallery

Conctact Us at:
ABC Corporations
Connaught Place - 110085

And know the traditions of all Fesitvals and their Festivities

Home | Privacy Policy | Terms of Service | Feedback


2010@festivals of India | All right Reserved

<html><head><title></title></head>
<body link = “blue” vlink = “purple” alink = “blue”>
<img src = “u.jpg” height = 100 width = 35% border = 2>
<font face = “trebuchet ms” color = “maroon” size = 30><p align = “right”><i>Festivals
Of India</i></font>
<br>
<font face = “trebuchet ms” color = “maroon” size = 4><p align = “center”><a href
= “Main Page.htm”> Home </a>| About Us | Types of Festivals | <a href=”Feedback.
htm”>Feedback</a></font></td></tr></table>

122 Information and Computer Technology


<font face = “trebuchet ms” size = 3 color = “maroon”>Photo Gallery </font>
<marquee scrollamount = 8 behavior = “scroll” loop = 100>
<img src = “b.jpg” height = 100 width = 100>
<img src = “c.jpg” height = 100 width = 100>
<img src = “e.jpg” height = 100 width = 100>
<img src = “f.jpg” height = 100 width = 100>
<img src = “g.png” height = 100 width = 100>
<img src = “h.jpg” height = 100 width = 100>
<img src = “i.jpg” height = 100 width = 100>
<img src = “k.jpg” height = 100 width = 100>
<img src = “j.jpg” height = 100 width = 100>
<img src = “l.jpg” height = 100 width = 100>
<img src = “m.gif ” height = 100 width = 100>
<img src = “n.jpg” height = 100 width = 100>
<img src = “o.jpg” height = 100 width = 100>
<img src = “p.jpg” height = 100 width = 100>
<img src = “q.gif ” height = 100 width = 100>
<img src = “s.jpg” height = 100 width = 100>
</marquee></td></tr></table>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<img src = “t.jpg” height = 200 width = 200 border = 3>
<font face = “trebuchet ms” color = “maroon” size = 4><align = “right”>
Contact Us at : <br>
ABC Corporations <br>
Connaught Place - 110085 <br>
And know the traditions of all Festivals and their Festivities
</font>
<br>

Projects 123
<hr><p align=”center”><font face = “trebuchet ms” size = 2 color = “black”>
Home | Privacy Policy | Terms of Service | Feedback <br>
2010 &copy Festivals Of India | All Rights Reserved
</font>
</body>
</html>
Diwali.htm

file:///C:/Users/savi/Desktop/Festivals%20Of%India/diwali.htm

Diwali - The Holiest Hindu Festival


Home | About Us | Typesof Festivals | Feedback

Enjoy the Moment.... Diwali:

Deepavali or Diwali, popularly known as the “festival of lights,” is primarily a five day Hindu
festival which startes on Dhanteras, Celebrated on thirteenth lunar day of Krishna paksha
(dark fortninght) of the Hindu calendar month Ashwin and ends on Bhaubeej, celebreted on
second lunar day of Shukla paksha (bright fortnigh) of the Hindu calendar month Kartik. In the
Gregorian calendar, Diwali falls between mid-October and mid-Novermber. Diwali is an
official holiday in India, Nepal, Sri Lanka, Myanmar, Mauritius, Guyan, Trinidad & Tobago,
Suriname, Malaysia, Singapore and Fiji...

.
13:57
05-03-2013

<html><head><title></title></head>
<body link = “blue” vlink = “purple” alink = “blue”>
<table height = 100 width = 100% bgcolor = “Yellow” cellpadding = 10><tr><td width=35%
height=100><img src = “Diwali 3.jpg” height = 100 width = 35% border = 2></td><td
width = 90% height = 100 valign = “middle”><font face = “trebuchet ms” color = “maroon”
size = 30><p align = “right”><i>Diwali - The Holiest Hindu Festival</i></font></td></
tr></table>
<br>
<table width = 100% height = 35 bgcolor = “#F2AC28”><tr><td width = 100% height
= 35 valign = “middle”><font face = “trebuchet ms” color = “maroon” size = 4><p align

124 Information and Computer Technology


= “center”><a href = “Main Page.htm”> Home </a>| About Us | Types of Festivals | <a
href=”Feedback.htm”>Feedback</a></font></td></tr></table>
<br>
<hr>
<table width = 100% cellpadding = 30><tr><td width = 65% bgcolor = “maroon”><font
face = “trebuchet ms” color = “white” size = 6 valign = “middle” ><p align = “center”>
Enjoy The Moments .....</font></td>
<td width = 35% height = 100% bgcolor = “Pink” rowspan = 2>
<font face = “trebuchet ms” color = “maroon” size = 5>&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp; <u>Diwali</u>:</font>
<ul><font face = “trebuchet ms” color = “white” size = 4>
<li><img src=”Diwali 2.jpg” height=250 width=300>
<br><br>
<li><img src=”Diwali 4.jpg” height = 250 width = 300>
</font></ul></td></tr>
<tr><td height=100 valign=”top”><br><p align=”center”><img src = “Diwali 1.jpg” height
= 300 width = 300 border = 3>
<br>
<br>
<font face = “trebuchet ms” color = “Blue” size = 4><p align = “justify”><i>Deepavali or
Diwali, popularly known as the “festival of lights,” is primarily a five day Hindu festival
which starts on Dhanteras, celebrated on thirteenth lunar day of Krishna paksha (dark
fortnight) of the Hindu calendar month Ashwin and ends on Bhaubeej, celebrated on
second lunar day of Shukla paksha (bright fortnight) of the Hindu calendar month Kartik.
In the Gregorian calendar, Diwali falls between mid-October and mid-November. Diwali
is an official holiday in India, Nepal, Sri Lanka, Myanmar, Mauritius, Guyana, Trinidad
& Tobago, Suriname, Malaysia, Singapore and Fiji..</i></font>
</td></tr>
</table>
<br>
</body>
</html>

Projects 125
<html><head><title></title></head>
<body link = “blue” vlink = “purple” alink = “blue”>
<table height = 100 width = 100% bgcolor = “Grey” cellpadding = 10><tr><td width=35%
height=100><img src = “Dusshera 4.gif ” height = 100 width = 35% border = 2></td><td
width = 90% height = 100 valign = “middle”><font face = “trebuchet ms” color = “maroon”
size = 30><p align = “right”><i>Dussehra-Victory Over Evil!!!</i></font></td></tr></
table>
<br>
<table width = 100% height = 35 bgcolor = “#F2AC28”><tr><td width = 100% height
= 35 valign = “middle”><font face = “trebuchet ms” color = “maroon” size = 4><p align
= “center”><a href = “Main Page.htm”> Home </a>| About Us | Types of Festivals | <a
href=”Feedback.htm”>Feedback</a></font></td></tr></table>
<br>

126 Information and Computer Technology


<hr>
<table width = 100% cellpadding = 30><tr><td width = 65% bgcolor = “Light Blue”><font
face = “trebuchet ms” color = “white” size = 6 valign = “middle” ><p align = “center”>
Enjoy The Moments .....</font></td>
<td width = 35% height = 100% bgcolor = “#F2AC28” rowspan = 2>
<font face = “trebuchet ms” color = “maroon” size = 5>&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp; <u>Dussehra</u>:</font>
<ul><font face = “trebuchet ms” color = “white” size = 4>
<li><img src=”Dusshera 2.jpg” height=250 width=300>
<br><br>
<li><img src=”Dusshera 3.jpg” height = 250 width = 300>
</font></ul></td></tr>
<tr><td height=100 valign=”top”><br><p align=”center”><img src = “Dusshera 1.jpg”
height = 300 width = 300 border = 3>
<br>
<br>
<font face = “trebuchet ms” color = “Blue” size = 4><p align = “justify”><i>Vijayadashami
also known as Dashahara, Dussehra, Dashain (in Nepal), Navratri or Durgotsav is one of
the most important Hindu festivals celebrated in various forms, across India, Nepal and
Bangladesh.
The name Dussehra is derived from Sanskrit Dasha-hara literally means removal of ten
referring to Lord Rama’s victory over the ten-headed demon king Ravana. The day also
marks the victory of Goddess Durga over the demons Mahishasur. The name Vijayadashami
is also derived from the Sanskrit words “Vijaya-dashmi” literally meaning the victory on
the dashmi</i></font>
</td></tr>
</table>

</body>
</html>

Projects 127
<html><head><title></title></head>
<body link = “blue” vlink = “purple” alink = “blue”>
<img src = “Holi 1.jpg” height = 100 width = 35% border = 2>
<font face = “trebuchet ms” color = “maroon” size = 30><p align = “right”><i>Holi - The
Festival Of Colors</i></font>
<br>
<font face = “trebuchet ms” color = “maroon” size = 4><p align = “center”><a href
= “Main Page.htm”> Home </a>| About Us | Types of Festivals | <a href=”Feedback.
htm”>Feedback</a></font>
<br>
<hr>
<font face = “trebuchet ms” color = “White” size = 6 valign = “middle” ><p align =
“center”> Enjoy The Moments .....</font>
<font face = “trebuchet ms” color = “Black” size = 5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; <u>Holi</u>:</font>
<ul><font face = “trebuchet ms” color = “white” size = 4>

128 Information and Computer Technology


<li><img src=”Holi 2.jpg” height=250 width=300>
<br><br>
<li><img src=”Holi 3.jpg” height = 250 width = 300>
</font></ul>
<br><p align=”center”><img src = “Holi 4.jpg” height = 300 width = 300 border = 3>
<br>
<br>
<font face = “trebuchet ms” color = “Blue” size = 4><p align = “justify”><i>Holi is a
religious spring festival celebrated by Hindus, as a festival of colours. It is primarily observed
in India and Nepal. It is observed by the minority Hindus in Bangladesh and Pakistan
as well in countries with large Indic diaspora populations following Hinduism, such as
Suriname, Malaysia, Guyana, South Africa, Trinidad and Tobago, the United Kingdom, the
United States, Mauritius, and Fiji. It is also known as Phagwah and Festival of Colours,
or as Doajatra in Odisha and Dol Jatra or Basantotsav in West Bengal and Assam..</i></
font>
<br>
</body>
</html>
Feedback.htm
file:///C:Users/Savi/Desktop/Festivals%2001%20India/Feedback.htm

Please Give your valuable feedback about what you feel about my webpage!!!
Nice na?????
Click here to go back to the main page!!!

Home | Pvivacy Policy | Terms of Service | Feedback


2010 @ Festivals of India | All Rights Reserved

<html><head><title></title></head>
<body link = “blue” vlink = “purple” alink = “blue” bgcolor=”F2AC28”>
<font face=”Comic sans ms” size =5>
<i><u>Please Give your valuable feedback about what you feel abour my webpage!!!<br>
Nice na?????<br>
<font face=”comic sans ms” size=5><center>
<a href = “Main Page.htm”>Click here to go back to the main page!!!</a>
</center></font>
<hr>
<ul type=”disc”>

Projects 129
<li>
<li>
<li>
<li>
<li>
</ul>
<img src = “v.png”>
<hr><hr>
<p align=”left”><img src=”d.jpg”>
<p align=”center”><font face = “trebuchet ms” size = 2 color = “black”>
Home | Privacy Policy | Terms of Service | Feedback <br>
2010 &copy Festivals Of India | All Rights Reserved<br>
</font>
</body>
</html>

130 Information and Computer Technology

You might also like