HTML Basics for Beginners
HTML Basics for Beginners
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.
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> 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.
In order to modify the webpage, either open the web page and click on View →source or
open the webpage with notepad.
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:
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.
C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help Close Tab (Ctrl+W)
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.
The following example will help you understand the use of FONT tag.
This in in Antiqua typeface Red Green Blue this text is 5 points big this text is 3 points smaller than regular text
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
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
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>
C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
File Edit View Favorites Tools Help
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>.
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
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:
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.
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
<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
apples
oranges
guava
C:\Users\HP\Music\Desktop\tables.html
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
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
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.
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.
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”
For example7:
An image of height 150 pixels and width 200 pixels is inserted on webpage as:
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.
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:
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.
<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.
C:\Users\HP\Music\Desktop\audio.html
one corner of the web page as shown in the File Edit View Favorites Tools Help
C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
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:
C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
Play
C:\Users\HP\Music\Desktop\audio.html C:\Users\HP\Music\Desktop...
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.
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>
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.
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”>
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” .
<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.
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.
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>
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.
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:
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.
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
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.
22:38
13-03-2013
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.
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>
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>
</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>
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
Monuments in Delhi
� Akshardham Temple
� Lotus Temple
� Iskon Tempe
� Birla Mandir
� Rajghat
� India Gate
� Rastrapati Bhawan
Infrastructure in Delhi
Museums in Delhi
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
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.
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
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:
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.
Before we discuss in detail how to use the security tools, here are some of the guiding
principles to use the computers securely.
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.
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.
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.
“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.”
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.
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.
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:
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.
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.
<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,
<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>
Contact US
<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
©</b></font><br><br>
<center><hr = 2><font face=”trebuchet ms” size=2 color=”black”>Copyrights © Tom &
Jerry<br>All Rights Reserved </center></font>
<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
<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>
Contact Us
Phone No - 2521350, 2341083
Copyright @ All rights reserved
Owned by ABC WORLD, New Delhi
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 © 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 © 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
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
© $G & €V </b></font></center>
</body>
</html>
Eating Paradise
Home Videos Contact Us
<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
© Health Department<br></b></font></center>
</body>
</html>
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 ©
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
© 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
• 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>
<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> <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
<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>
Projects 123
<hr><p align=”center”><font face = “trebuchet ms” size = 2 color = “black”>
Home | Privacy Policy | Terms of Service | Feedback <br>
2010 © Festivals Of India | All Rights Reserved
</font>
</body>
</html>
Diwali.htm
file:///C:/Users/savi/Desktop/Festivals%20Of%India/diwali.htm
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
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>
</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>
<u>Holi</u>:</font>
<ul><font face = “trebuchet ms” color = “white” size = 4>
Please Give your valuable feedback about what you feel about my webpage!!!
Nice na?????
Click here to go back to the main page!!!
<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 © Festivals Of India | All Rights Reserved<br>
</font>
</body>
</html>