PRACTICAL FILE OF COMPUTER

APPLICATION -II
BBA 4th SEMESTER
ANY GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

NEW DELHI INSTITUTE OF MANAGEMENT

SUBMITTED TO: Mr. SHAILENDRA KUMAR

SUBMITTED BY: AASHISH GUPTA

1|Page
ACKNOWLEDGEMENT
Concentration, dedication and application are necessary but not
sufficient to achieve any goal. There must be awarded by proper
guidance, assistance and cooperation of any senior person to make it
enable.

Gratitude is short lived but when put in black and white; one hopes it
to enjoy a longer life. Many people have given their valuable time and
ideas and assistance, I cannot forget their whole hearted support,
which has given me as an expert and learned supervision of
MR.SHAILENDRA KUMAR (Faculty of IT).

Lastly, I thanks to all those who have directly or indirectly helped me

in completion of the project report.

AASHISH GUPTA

(BBA 4th SEMESTER)

2|Page
 CERTIFICATE
This is to certify that AASHISH GUPTA pursuing BBA (gen) from
NEW DELHI INSTITUTE OF MANAGEMENT has completed this file
under my supervision and guidance. She has taken care of all necessary
aspects and shown interest and utmost sincerity during the
completion of the practical file to my full satisfaction.

I clarify that the practical file is up to my expectation and as per the

guidance laid down by GURU GOBIND SINGH INDRAPRASTHA
UNIVERSITY.

MR.SHAILENDRA KUMAR

(Asst professor)

3|Page
 INDEX

S.no. Topic Teacher’s Sign.

1. Introduction to HTML
(a)Explain
TOPIC container and empty tag with
example
(b)Write basic program of HTML with
output

2. A) Explain font tag with their attributes,

B) Write HTML code to change the Font
Color,size and font face of paragraph
C)
3. Explain different types of list in brief.
D) Write HTML code to demonstrate Ordered
List,Unordered list and nested list.
E)
4. Write syntax of image tag. Also explain
different extentions of image

5. Explain table tag with their attributes.

Write HTML code to design tables with
different design

6. Explain link/anchor tag with examples

7. Explain form
Write HTML code to design sign up form

8. Write HTML code to design an online

railway reservation form.
9. Write HTML program to design an online
e-commerce company web page

10. Write HTML program to design a

webpage of a “FOOD CORNER”.

4|Page
11. Explain CSS with example

12. Write HTML code to design a Website.

1. Introduction to HTML

5|Page
Hypertext Markup Language (HTML) is the standard markup
language for creating web pages and web applications. With Cascading
Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone
technologies for the World Wide Web.[4] Web browsers receive HTML
documents from a web server or from local storage and render them into
multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the
document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects, such as interactive forms, may be
embedded into the rendered page. It provides a means to
create structured documentsby denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.
Tags such as <img /> and <input /> introduce content into the
page directly. Others such as <p>...</p> surround and provide
information about document text and may include other tags as sub-
elements. Browsers do not display the HTML tags, but use them to
interpret the content of the page.
HTML can embed programs written in a scripting language such
as JavaScript which affect the behavior and content of web pages.
Inclusion of CSS defines the look and layout of content. The World Wide
Web Consortium(W3C), maintainer of both the HTML and the CSS
standards, has encouraged the use of CSS over explicit presentational
HTML since 1997.

(a)Explain container and empty tag with example

Container and Empty Tags:

The first thing you should notice about these HTML tags is that all tags are
enclosed in angle brackets ‘<‘ and ‘>’. This is how HTML recognizes tags. If you
do not use the brackets, then a Web browser will assume your commands to be
a text that you want displayed, even if that text is the same as an HTML
command.
While a Web browser would consider the following to be a tag –
<HTML>

6|Page
That same Web browser would interpret the following as text to be displayed
on-screen:
HTML
Tags are not case-sensitive and hence they need not be uppercase. However, if
you type them as uppercase it makes them stand out from the rest of the
text. Since tags are not considered text by the browsers, they do not show
up in the Web Page.

Container Tags
Those tags which have the form <TAG> and </TAG> are called container tags.
They hold or contain, the text and other HTML elements between the two
tags. The <TITILE>, <HTML>, <HEAD>, and <BODY> tags are all container
tags.
The syntax for container tags is
<TAG>Text or other HTML elements go here</TAG>

Empty Tags
Some tags that do not require ‘</>’ tags are called empty tags. An example of
this is the <HR> or horizontal rule tag, <Area>, <Frame>, <Img>. This tag
draws a line across the width of your document. Consider the following
listing

Example:

<HTML>
<HEAD>
<TITLE>Horizontal Line</TITLE>
</HEAD>
<BODY>
The following is a horizontal line:
<HR>
The rest of this is just more text
</BODY>
</HTML>

(b)Write basic program of HTML with output

This is the code used to make the page:

7|Page
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<HR>
<a href="http://somegreatsite.com">Link Name</a>
is a link to another nifty site
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
Send me mail at <a href="mailto:[email protected]">
[email protected]</a>.
<P> This is a new paragraph!
<P> <B>This is a new paragraph!</B>
<BR> <B><I>This is a new sentence without a paragraph break, in bold
italics.</I></B>
<HR>
</BODY>
</HTML>

2. Explain font tag with their attributes

8|Page
When writing in HTML, the <font> tag was an inline element used to change
certain qualities of a block of text on a web page. It was useful for changing
a font's size, face, and color.
Within an HTML tag, an attribute dictates certain aspects of an HTML element.
Attributes are made up of a name and value pair; all tags support standard attributes.
The <font> tag is deprecated, but at one time it utilized the unique attributes contained
in the following table.
Attribute Description

color Designates the color of text

face Designates the look of text

size Designates the size of text

Write HTML code to change the Font Color,size and font face of
paragraph

html>

<head>

<title>

</title>

</head>

<body bgcolor = "GREEN">

<h1 font color ="blue face= "arial size ="5"><u><b> <marquee bgcolor="pink"

direction="left loop" ="5"> INDRAPRASTHA

UNIVERSITY...!!</marquee></b></u></font></h1>

<br><br>

<h2 font color ="brown face = "times new roman"

size="4"><u><b><i><marquee bgcolor="white"

direction="right"loop ="4"> NATIONAL INTEGRATION

</marquee></b></u></font></h1>
9|Page
<br><br><br><br>

the govt. of nct of delhi established its first university with the name guru
gobind singh indraprastha university

in 1998.it is a teaching and affiliating university with the explicit objective of

facilitating and promoting studies,research

and extention work,in emerging areas of higher education with focus on

professional education,for example engineering,technology

management studies,medicines,pharmacy,nursing,educaton,law etc.and also

to achieve excellence in these and connected fields and

other matters connected or incidential thereto."

</body>

</html>

3. Explain different types of list in brief

10 | P a g e
1. Unordered list: an unordered list start with tag <UL> & ends with
</UL> each list item starts with tag <LI> & is to be closed </LI>

Type= fill round

 It will give a solid round black bullet.

Type= square

 It will give a solid square black bullet.

Example:

<UL type= fillround>

<LI> mouse </LI>

<LI> floppies </LI>

</UL>

2. Ordered list: an ordered list starts with tag <OL> & ends with </OL>,
each list item starts with tag <LI> & is to be closed </LI>.

Type = 1

 It will give counting numbers.

Type = A

 It will give uppercase letters.

Type = a

 It will give lowercase letters.

Type = I

 It will give uppercase roman number.

Type = i

 It will give lowercase roman number.

i. Start: alters the numbering sequence , it can be any numeric value.

11 | P a g e
 ii. Value: changes the numeric sequence in the middle of an OL. It is
to be specified with <LI> tag.

Example: <OL type= “I” start= III>

<LI> floppies </LI> </OL>

3. Definition lists: starts with <DL> tag & ends with </DL>, it consists of
two parts. Def. term and def. description.

Example: <DL>

<DT> keyboard </DT>

<DD> input device </DD> </DL>

4. Nested ordered list: we can also combine or nested lists one inside the
others.
5. Directory list: the directory lists are depreciated. It was designed to be
used for creating multicolumn directory list. It has the same structure as
unordered lists. A directory list begins with <DIR> element immediately
followed by the <LI> element & list item to be displayed.

<DIR> <LI>--------</LI> </DIR>

HTML code to demonstrate Ordered List, Unordered list and nested list.

<html>

<head>

<title>

</title>

</head>

<body bgcolor ="pink">

<h1 font color ="orange" face ="arial"><u><b><marquee bgcolor = marquee

direction =left

loop =7> COURSES OFFERED BY GGSIPU </marquee> </u></b></font></h1>

<font size ="5" face ="time new roman">

12 | P a g e
<ol type ="1" start ="1">

<li><font color = "purple"> MBA </font>

<li><font color = "red"> M.TECH </font>

<li><font color = "green"> B.TECH </font>

<li><font color = "blue"> M.PHILL </font>

<li><font color = "yellow"> BBA </font>

<ul type ="fillround">

<li><font color ="aqua"> BBA(G) </font>

<li><font color ="lime">BBA(MOM) </font>

<li><font color ="teal"> BBA(B&T) </font>

<li><font color ="beige">BBATTM) </font>

</li></ul>

<li><font color = "purple"> MARKETNG RESEARCH </font>

<li><font color = "red"> MECHANICAL </font>

<li><font color = "green"> PSYCHOLOGY </font>

<li><font color = "blue"> MARKETING MANAGEMENT </font>

<li><font color = "yellow"> HUMAN RESOURCE </font>

</li>

</ol>

</body>

<html>

13 | P a g e
 4. Write syntax of image tag. Also explain different
extensions of image

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

The src attribute specifies the URL (web address) of the image:

<img src="url">

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

14 | P a g e
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of

the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Extensions of image
ID
An SGML identifier used as the target for hypertext links or for naming
particular elements in associated style sheets. Identifiers are NAME tokens
and must be unique within the scope of the current document.

LANG
This is one of the ISO standard language abbreviations, e.g. "en.uk" for the
variation of English spoken in the United Kingdom. It can be used by
parsers to select language specific choices for quotation marks, ligatures and
hypenation rules etc. The language attribute is composed from the two letter
language code from ISO 639, optionally followed by a period and a two
letter country code from ISO 3166.

CLASS
This a space separated list of SGML NAME tokens and is used to subclass
tag names. By convention, the class names are interpreted hierarchically,
with the most general class on the left and the most specific on the right,
where classes are separated by a period. The CLASS attribute is most
commonly used to attach a different style to some element, but it is
recommended that where practical class names should be picked on the
basis of the element's semantics, as this will permit other uses, such as
restricting search through documents by matching on element class names.
The conventions for choosing class names are outside the scope of this
specification.

SRC (Source)
The SRC attribute specifies the URI for the image to be embedded. Its
syntax is the same as that of the HREF attribute of the <A> tag. SRC is
mandatory.

MD
Specifies a message digest or cryptographic checksum for the associated
graphic specified by the SRC attribute. It is used when you want to be sure

15 | P a g e
 that the image is indeed the same one that the author intended, and hasn't
been modified in any way. For instance,
MD="md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ", which specifies an
MD5 checksum encoded as a base64 character string. The MD attribute is
generally allowed for all elements which support URI based links.

WIDTH
Optional suggested width for the image. By default, this is given in pixels.

HEIGHT
Optional suggested height for the image. By default, this is given in pixels.

UNITS
This optional attribute specifies the units for the width and height attributes.
It is one of: units=pixels (the default) or units=en (half the point size).

ALIGN
Take values TOP or MIDDLE or BOTTOM, defining whether the top or
middle or bottom of the graphic should be aligned with the baseline for the
text line in which the IMG element appears.

With ALIGN=LEFT, the graphic will float down and over to the current left
margin, and subsequent text will wrap around the right hand side of the
graphic. Likewise for ALIGN=RIGHT, the graphic aligns with the current
right margin and, and text wraps around the left. It is inappropriate to use
this feature for larger graphics as these are best represented with the FIG
element.

ALT (Alternate text)

Optional alternative text as an alternative to the graphics for display in text-
only environments. The alt text can contain entities e.g. for accented
characters or special symbols, but it can't contain markup. The latter is
possible, however, with the FIG element.

16 | P a g e
 5. Explain table tag with their attributes

The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr>, <th>,
and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the
<td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>,
<tfoot>, and <tbody> elements.

Tables in HTML pages are created by using multiple HTML tags with specific
attributes defining table structure.
I have prepared HTML table attributes list, please feel free to use it as cheat sheet
for crafting HTML tables and forms.

Table Attribute List

Define Table: <TABLE></TABLE>
Columns to Span: <TH COLSPAN=?>
Rows to Span: <TH ROWSPAN=?>
Desired Width: <TH WIDTH=?> – (in pixels)
Width Percent: <TH WIDTH="%"> – (percentage of table)
Cell Color: <TH BGCOLOR="#$$$$$$">
Table Caption: <CAPTION></CAPTION>
Alignment: <CAPTION ALIGN=TOP|BOTTOM> – (above/below table)
Table Border: <TABLE BORDER=?></TABLE>
Cell Spacing: <TABLE CELLSPACING=?>
Cell Padding: <TABLE CELLPADDING=?>
Desired Width: <TABLE WIDTH=?> – (in pixels)
Width Percent: <TABLE WIDTH="%"> – (percentage of page)
Table Row: <TR></TR>
Alignment: <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Table Cell: <TD></TD> – (must appear within table rows)
Alignment: <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
No linebreaks: <TD NOWRAP>
Columns to Span: <TD COLSPAN=?>
Rows to Span: <TD ROWSPAN=?>
Desired Width: <TD WIDTH=?>
Width Percent: <TD WIDTH="%"> – (percentage of table)
Cell Color: <TD BGCOLOR="#$$$$$$">
Table Header: <TH></TH> – (same as data, except bold centered)
Alignment: <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM

17 | P a g e
VALIGN=TOP|BOTTOM|MIDDLE>
No Linebreaks: <TH NOWRAP>

Write HTML code to design tables with different design

A) Row Span
<table border="10" bgcolor="blue">

<caption EXPENDITURE</caption>

<tr> <td rowspan=2 align="center"> <b> food </b></td>

<td>chowmien</td>

<td>align="right"> Rs.60</td>

</tr>

<tr><td> SPRING ROLL </TD>

<td align ="right"> Rs.45</td>

</tr>

<tr><td rowspan =3 align ="center"> <b> vehicles </b> </td>

<td> bike </td>

<td align ="right"> Rs.84000 </td>

</tr>

<tr><td> car </td>

<td> align ="right"> Rs.640000 </td>

</tr>

<tr><td> SCOOTER </td>

<td align ="right"> Rs. 389000 </td>

</tr>

<tr> <td colspan=2 align="center"> <b> total </b> </td>

<td align = "right"> Rs.850780 </td>

</tr>

18 | P a g e
</table border>

B) COLOR Span
<table bgcolor="#00FF00">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

</table>

C) BORDER IMG

19 | P a g e
20 | P a g e
 6 . Explain link/anchor tag with examples
The <link> element is used to define a relationship between an HTML document and
an external resource. This element is most commonly used to define the relationship
between a document and one or more external CSS style sheets.

When most people talk about links on the web, they mean anchor links — a link
within the content of a page, which is anchored to a piece of text, or an image. But
you can also define a link from one document to another, using the <link> tag. This
allows you to import the contents of a script or resource, such as a stylesheet, into
your HTML document. You can then control the appearance or behaviour of all
pages by altering the content in your linked resource page.
The <link> element can also be used to link different versions of a page together.
<html>

<head>
<title>HTML link Tag</title>
<link rel = "stylesheet" href = "stylenew.css">
</head>

<body>
<div id = "contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>

</html>

21 | P a g e
 7.Explain form
Write HTML code to design sign up form

A webform, web form or HTML form on a web page allows a user to enter data that is sent
to a server for processing. Forms can resemble paper or database forms because web
users fill out the forms using checkboxes, radio buttons, or text fields.

<html>

<head>

<title>Yahoo! Registration</title>

</head>

<body>

<h1>Yahoo!Sign up Form</h1><hr size=4>

<img src="yahoo-us.gif" align= center></img>

<br clear=left>Hi there!

We'll get you set up on Yahoo! in three easy steps! Just answer a few simple questions, select an ID
and password, and you'll be all set.

<form>

First Name:

<input type="Text"name="First Name">

<br>

Last Name:

<input type="Text"name="Last Name">

<br>

Gender:

<select name="gender">

<option>choose one</option>

<option>Male</option>

<option>Female</option>

</select>

<br>

22 | P a g e
Birthday:

<select name="month">

<option>select month</option>

<option>January</option>

<option>February</option>

<option>March</option>

<option>April</option>

<option>May</option>

<option>June</option>

<option>July</option>

<option>August</option>

<option>September</option>

<option>October</option>

<option>November</option>

<option>December</option>

</select>

DAY:

<input type="number"size="2"maxlength="2">

Year:

<input type="number"size="4"maxlength="4">

<br>

Country:

<input type="memo"size="25"maxlength="25"><br>

Postal Code:

<input type="number"size="6"maxlength="6"><br>

Yahoo! ID and Email:

<input type="memo"size="25"maxlength="25"@yahoo.com>

23 | P a g e
<br>

Password:

<input type="memo"size="10"maxlength="10"><br>

Re-Type Your Password:

<input type="memo"size="10"maxlength="10"><br>

Alternate Email:

<input type="memo"size="50"maxlength="50"><br>

Security Question:

<select name=" Security Question">

<option>-select one-</option>

<option>What is your pet's name?</option>

<option>What is your favourite dish?</option>

<option>Where did you meet your spouse?</option>

<option>Who is your favourite actor/actress?</option>

<option>What was the name of your first school?</option>

<option>Who was your childhood hero?</option>

<option>Do you pray?</option>

</select><br>

Your Answer:

<input type="memo"size="40"maxlength="40"><br>

Do you agree?:

I have read and agree to the Yahoo! Terms of Service.

<input type="checkbox"><br>

<CENTER>

<INPUT TYPE = "button" VALUE="Submit">

<INPUT TYPE = "reset" VALUE="Clear form">

</CENTER>

24 | P a g e
</FORM>

</BODY>

</HTML>

25 | P a g e
 8.Write HTML code to design an online railway reservation form
<html>

<head>

<title>Ques No.7 Write a code in HTML to design a ONLINE RESERVATION FORM.</title>

</head>

<body bgcolor="orange">

<font size=7 font color="silver">

<center><b><u><i>

ONLINE RESERVATION FORM

</b></u></i></center></font>

<br><br>

<table>

<tr>

<td><b><font size=4 font color="blue">DATE</td><td><INPUT TYPE="text" NAME="dd"

value="date">

<INPUT TYPE="text" NAME="mm" value="month">

<INPUT TYPE="text" NAME="yy" value="year">

</td>

</tr>

<tr>

<td><b><font size=4 font color="blue">FROM</td><td><INPUT TYPE="text" NAME="PO" value=""

style="width:200px;"></td></tr>

<tr>

<td><b><font size=4 font color="blue">TO</td><td><INPUT TYPE="text" NAME="PO" value=""

style="width:200px;"></td></tr>

<tr>

<td><b><font size=4 font color="blue">CLASS</td><td>

<select>

26 | P a g e
 <option>Select Class</option>

<option>First Class AC(1A)</option>

<option>First Class (FC)</option>

<option>AC 2-TIER SLEEPER(2A) </option>

<option> AC CHAIR CAR(CC)</option>

<option> SLEEPER CLASS(SL)</option>

</select>

</td>

</tr>

<tr>

<td><b><font size=4 font color="blue">TRAIN NAME</td><td><INPUT TYPE="text" value=""

style="width:200px;"></td></tr>

<tr>

<td><b><font size=4 font color="blue">TRAIN NO.</td><td><INPUT TYPE="text" value=""

style="width:200px;"></td></tr>

</table>

<br>

<br>

<b><u>PAYMENT VIA:</b></u>

<input type=radio name="a" value="cash on delivery"> CASH ON DELIVERY

<input type=radio name="b" value="credit card"> CREDIT CARD</form>

<br>

<br>

<b><u>TICKET TYPE:</b></u>

<input type=radio name="ticket type" value="i-ticket">I-TICKET

<input type=radio name="ticket type" value="e-ticket">E-TICKET

<br>

<br>

27 | P a g e
<br>

<br>

<center><form>

<input type="button" value="ACCEPT">

<input type="button" value="CANCEL">

</body>

</html>

28 | P a g e
 9. Write HTML program to design an online e-commerce company web
page

<html>

<head>

</head>

<body>

<form>

<center>

<p><Image src="IPL.jpg"></p>

</center>

<h1 align = center> <font face="Bookman Old Style">ONLY ONLINE SHOPPING SITE</font></H1>

<H2 ALIGN = CENTER><font face="Bookman Old Style">For tickets of IPL Matches</font></H2>

<img src= "TEAMS.jpg" ALIGN = RIGHT alt="TEAMS">

<br>

<br>

<font face="Bookman Old Style">First Name </font>

<input type = "text" value="" size="28" name="1"><br><br>

<font face="Bookman Old Style">Last Name </font>

<input type = "text" value="" size="28" name="11"><p>

<font face="Bookman Old Style">Address</font><br>

<textarea rows = 5 cols = 30 name="ADDRESS"></textarea>

<br><br>

<font face="Bookman Old Style">Phone </font>

<input type = "text value = ""size="16" name="12">

<br><br><image src="DD VS MI.jpg" alt= "DD VS MI"align="right">

<font face="Bookman Old Style"> Matches

<select>

29 | P a g e
<option> Choose among the Following...</option>

<option> DELHI VS BANGALORE on 30/05/08</option>

<option> MUMBAI VS KOLKATA on 6/06/08</option>

<option> RAJASTHAN VS PUNJAB on 9/06/08</option>

<option> HYDERABAD VS CHENNAI on 10/06/08</option>

</select>

<br><br>

Number of tickets

<select>

<option>00</option>

<option>01</option><option>02</option>

<option>03</option><option>04</option><option>05</option></select><i>

<font size="2">If more than 5 please specify the number here</font></i>

<input type = "text" value = "" size="4" name="13"><br><BR>

Price <font color="#9900CC">US $ 228 <i>per ticket.</i></font><BR>

<BR>

Payment via<br>

<input type = radio value = "">Draft <br>

<input type = radio value = "">Credit Card </font>

</p>

<font face="Bookman Old Style"> Payment Details:</font><br>

<font face="Bookman Old Style">1.Draft is payable under the name of WWE

Championship.</font><br>

<font face="Bookman Old Style">2.Credit card details:<br>

Credit card number <input type = "text" value = "" size="20"> </font>

<font face="Bookman Old Style"> of

<input type = "text" value = "" size="20" name="14">Company<BR>

30 | P a g e
<BR>

<CENTER>

<input type = "button" value="Submit">

<input type = "Reset" >

</CENTER>

</form>

</font>

</body>

</html>

31 | P a g e
10. Write HTML program to design a webpage of a “FOOD CORNER”.
<html>

<head>

<title> Homepage </title></head>

<body link="blue" vlink="red" alink="black"><center>

<img src="pizza.jpg" width="171" height="150"><br>

<hr size="5" color="red" width="80%"><br>

<h4><a href="home.html">Home</a> |<a href="speciality.html"> Speciality </a>

<marquee><image src="ph2.jpg"><image src="ph3.jpg">

<image src="ph4.jpg"><image src="ph5.jpg">

<image src="ph6.jpg"><image src="ph7.jpg">

</marquee><br>

<p>Pizza Hut is an American restaurant chain and international franchise that offers different styles of pizza
along with side dishesincluding salad, pasta, buffalo wings, breadsticks, garlic bread and desserts. Corporately
known as Pizza Hut, Inc., it is a subsidiary of Yum! Brands, Inc., the world's largest restaurant company. As of
2012, there were more than 6,000 Pizza Hut restaurants in the United States, and more than 5,139 store locations
in 94 other countries and territories around the world.

In North America, Pizza Hut sells "Stuffed crust" pizza, with the outermost edge wrapped around a cylinder of
mozzarella cheese; "Hand-Tossed", more like traditional pizzeria crusts; "Thin 'N Crispy", a thin, crisp dough
which was Pizza Hut's original style; "Dippin' Strips pizza", a pizza cut into small strips that can be dipped into
a number of sauces; and "The Edge pizza", where the toppings nearly reach to the edge of the pizza. There was
also formerly a crust that was not as thick as Pizza Hut's pan pizza, and not as thin as its thin crust. This crust
was used on the Full House XL pizza and discontinued in 2007. </p>

</body>

</html>

32 | P a g e
 11. Explain CSS with example

What Is CSS?
Most web pages are made from HTML, or hypertext markup language. This is the standard way
to decorate plain web text with fonts, colors, graphic doodads, and hyperlinks (clickable text that
magically transports the user somewhere else). But websites can get really big. When that
happens, HTML is a very hard way to do a very easy thing. CSS (cascading style sheets) can
make decorating web sites easy again!
Think of CSS as a kind of computer dress code. CSS mainly does just one thing: it describes
how web pages should look. Even better, CSS can be easily separated from HTML, so that the
dress code is easy to find, easy to modify, and can rapidly change the entire look of your web
site. Like a dress code at school, you can change your CSS and the look of your students will
change with it. Style sheets allow you to rapidly alter entire websites as you please, just like a
fashion craze allows people to change with the times yet remain the same people.
A really neat thing about CSS, is that it cascades. Each style you define adds to the overall
theme, yet you can make the most recent style override earlier styles. For example, with CSS we
can start by saying we want all of our text 12px (12 units) high. Later we can say we want it to be
red, too. Still later, we can tell it we want one phrase to be in bold or italics, or blue rather than
red.

Three Types of CSS

CSS comes in three types:

 In a separate file (external)

 At the top of a web page document (internal)
 Right next to the text it decorates (inline)

External style sheets are separate files full of CSS instructions (with the file extension .css).
When any web page includes an external stylesheet, its look and feel will be controlled by this
CSS file (unless you decide to override a style using one of these next two types). This is how
you change a whole website at once. And that's perfect if you want to keep up with the latest
fashion in web pages without rewriting every page!
Internal styles are placed at the top of each web page document, before any of the content is
listed. This is the next best thing to external, because they're easy to find, yet allow you to
'override' an external style sheet -- for that special page that wants to be a nonconformist!
Inline styles are placed right where you need them, next to the text or graphic you wish to
decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real
freedom to specify each web page element.
<html>

<head>
<title>HTML CSS</title>
</head>

<body>

33 | P a g e
 <p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>

</html>

34 | P a g e
 13. Write HTML code to design a Website
<html>
<head>
<title>TOURISM IN INDIA</title>
</head>
<body>
<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5">Wonders of the World </marquee></b></u></font></h1>
<hr>
<br>
<p>
The tourism industry of India is economically important and grows rapidly. The World
Travel & Tourism Council calculated that tourism generated INR6.4 trillion or 6.6% of the
nation's GDP in 2012. It supported 39.5 million jobs, 7.7% of its total employment. The
sector is predicted to grow at an average annual rate of 7.9% from 2013 to 2023. This gives
India the third rank among countries with the fastest growing tourism industries over the next
decade. India has a large medical tourism sector which is expected to grow at an estimated
rate of 30% annually to reach about ₹ 95 billion by 2015.
According to provisional statistics 6.29 million foreign tourists arrived in India in 2011, an
increase of 8.9% from 5.78 million in 2010. This ranks India as the 38th country in the world
in terms of foreign tourist arrivals. Domestic tourist visits to all states and Union Territories
numbered 1,036.35 million in 2012, an increase of 16.5% from 2011. The most represented
countries are the United States (16%) and the United Kingdom (12.6%). In 2011
Maharashtra, Tamil Nadu and Delhi were the most popular states for foreign tourists.
Domestic tourists visited the states Uttar Pradesh, Andhra Pradesh and Tamil Nadu most
frequently. Chennai, Delhi,Mumbai and Agra have been the four most visited cities of India
by foreign tourists during the year 2011. Worldwide, Chennai is ranked 41 by the number of
foreign tourists, while Delhi is ranked at 50, Mumbai at 57 and Agra at 65 and Kolkata at 99.
</p>
<br><br>
<a href="contents.htm"><b>Contents<b></a><br>
<OL type="1">
<li>Kashmir</li>
<li>Goa</li>
<li>Jaipur and Udaipur</li>
<li>Kanyakumari</li>
<li>Agra</li>
</ol>
</body>
</html>

35 | P a g e
Contents.htm

Coding

<html>

<head>

<title>Contents</title>

</head>

<body bgcolor="yellow">

<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5">Contents</marquee></b></u></font></h1>

<hr>

<br>

<OL type="1">

<li><a href=mir.htm"><b>KASHMIR <b></a></li>

<li><a href="goa.htm"><b>GOA<b><a></li>

<li><a href="jaipur.htm"><b>JAIPUR AND UDAIPUR<b></a></li>

<li><a href="kumari.htm"><b>KANYAKUMARI<b></a></li>

36 | P a g e
<li><a href="agra.htm"><b>AGRA<b></a></li>

</ol>

</body>

</html>

KASHMIR.HTML

Coding
<html>

<head>

<title> KASHMIR </title>

</head>

<body>

<body link="blue" vlink="red" alink="black"><center>

<img src="k.jpg" width="200" height="200"><br>

<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5"> KASHMIR</marquee></b></u></font></h1>

<hr>

<br>

<p>

The Paradise on Earth, Kashmir's major attraction lies in its scenic beauty, snow clad peaks,
lush green valleys, Alpine villages, cascading waterfalls, flower gardens etc. Kashmir is a
destination worth visiting, during winter season where you can enjoy the boat ride on
picturesque Dal Lake. The other major attractions are Gulmarg, Srinagar, Sonmarg, Nagin
Lake, Pari Mahal, Shankracharya shrine and Pehalgam.

37 | P a g e
In the first half of the 1st millennium, the Kashmir region became an important centre of
Hinduism and later ofBuddhism; later still, in the ninth century, Kashmir Shaivism arose In
1349, Shah Mir became the first Muslim ruler of Kashmir, inaugurating the Salatin-i-Kashmir
or Swati dynasty. For the next five centuries, Muslim monarchs ruled Kashmir, including the
Mughals, who ruled from 1526 until 1751, and the Afghan Durrani Empire, which ruled from
1747 until 1820. That year, the Sikhs, under Ranjit Singh, annexed Kashmir. In 1846, after
the Sikh defeat in theFirst Anglo-Sikh War, and upon the purchase of the region from the
British under the Treaty of Amritsar, the Raja of Jammu, Gulab Singh, became the new ruler
of Kashmir. The rule of his descendants, under the paramountcy (or tutelage) of the British
Crown, lasted until 1947, when the former princely state became a disputed territory.

</p>

</body>

</html>

GOA.HTML

CODING
<html>

<head>

<title>GOA</title>

</head>

<body>

<body link="blue" vlink="red" alink="black"><center>

<img src="GOA.jpg" width="250" height="200"><br>

38 | P a g e
<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5">GOA</marquee></b></u></font></h1>

<hr>

<br>

<p>

Goa is India's smallest state by area and the fourth smallest by population. Located in West
India in the region known as the Konkan, it is bounded by the state of Maharashtra to the
north, and by Karnataka to the east and south, while the Arabian Sea forms its western coast.
Goa is India's richest state with a GDP per capita two and a half times that of the country as a
whole

Goa, the smallest state of India is known for its exotic beaches with amazing sunset view,
golden sand and coconut palms playing with the wind. If having a great time with a dear one
is on your mind, Goa is the perfect place for togetherness. Tasty seafood, parasailing, wind
surfing and water-skiing facilities make the beaches of Goa a core fun place. Alorna Fort,
Ancestral Goa Museum, Arvalam Waterfalls, Chapora Fort and Calangute beach are some of
the popular destinations in Goa. Panaji is the state's capital, while Vasco da Gama is the
largest city. The historic city of Margao still exhibits the cultural influence of the Portuguese,
who first landed in the early 16th century as merchants and conquered it soon thereafter. Goa
is a former Portuguese province; the Portuguese overseas territory of Portuguese India existed
for about 450 years until it was annexed by India in 1961.

Goa is visited by large numbers of international and domestic tourists each year for its
beaches, places of worship and world heritage architecture. It also has rich flora and fauna,
owing to its location on the Western Ghats range, which is classified as abiodiversity hotspot.

</p>

</body>

</html>

39 | P a g e
JAIPUR AND UDAIPUR.HTML

CODING
<html>

<head>

<title>JAIPUR AND UDAIPUR</title>

</head>

<body>

<body link="blue" vlink="red" alink="black"><center>

<img src="jaipur.jpg" width="250" height="200"><br>

<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5"> JAIPUR AND UDAIPUR </marquee></b></u></font></h1>

<hr>

<br>

<p>

Jaipur and Udaipur, located in Rajasthan gives us an insight into the rich cultural and artistic
traditions of the state. Hawa Mahal or 'Palace of Winds', located in Jaipur , designed in the
form of the crown of Lord Krishna is a beautiful construction, which draws tourists from all
over the country. This pyramid shaped monument with 953 small windows stands as the
entrance to the City Palace, Jaipur and is a notable sight here. The Lake Place of Udaipur is
one of the most beautiful palaces in the world, which is now converted into a hotel equipped
with 66 rooms and 17 suites. Udaipur pronunciation is a city, a municipal corporation and
the administrative headquarters of the Udaipur district in the state of Rajasthan in western
India. It is located 403 kilometres (250 mi) southwest of the state capital, Jaipur and 250 km
(155 mi) northeast from Ahmedabad. Udaipur is the historic capital of the kingdom of Mewar
in the former Rajputana Agency. TheSisodia clan of Rajputs ruled the Mewar and its capital
was shifted from Chittorgarh to Udaipur after founding city of Udaipur by Maharana Uday
Singh. The Mewar province became part of Rajasthan after India became independent.

Apart from its history, culture, and scenic locations, it is also known for its Rajput-era
palaces. The Lake Palace, for instance, covers an entire island in the Pichola Lake. Many of
the palaces have been converted into luxury hotels. It is often called the "Venice of the East",
and is also nicknamed the "Lake City" or "City of Lakes". Lake Pichola, Fateh Sagar Lake,
Udai Sagar and Swaroop Sagar in this city are considered some of the most beautiful lakes in
the state.

</p>

40 | P a g e
</body>

</html>

KANYAKUMARI.HTML

CODING
<html>

<head>

<title> KANYAKUMARI </title>

</head>

<body>

<body link="blue" vlink="red" alink="black"><center>

<img src="kanya.jpg" width="250" height="200"><br>

<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5"> KANYAKUMARI </marquee></b></u></font></h1>

<hr>

<br>

<p>

Kanyakumari which is also known as Cape Comorin is the place where the three humungous
water bodies namely, Indian Ocean, Arabian Sea and Bay of Bengal meet up. People cannot
stop gazing at the darkening horizon and enjoy the moments of solitude. Sunset is more

41 | P a g e
spectacular than a sunrise here and witnessing the setting of the sun makes up for a serene
holiday. Lakhs of tourist, round the year are lured by the serene beauty of this place and the
spectacles of sunrise and sunset.

Kanyakumari , formerly known as Cape Comorin, is a town in Kanyakumari District in the

state ofTamil Nadu in India.It lies at the southernmost tip of mainland India (the southern
extremity of India as a whole being Indira Point on Great Nicobar Island). Cape Comorin is
the southern tip of the Cardamom Hills, an extension of the Western Ghats range along the
west coast of India. The nearest major city is Nagercoil, the administrative headquarters of
Kanyakumari District, 22 km (14 mi) away. Kanyakumari was one of the important towns of
the ancient Tamilakam (Sangam period) and is a popular tourist destination. It was ranked the
best placed state by the Eleventh Finance Commission for its infrastructure and ranked on top
for the best quality of life in India by the National Commission on Population based on the 12
Indicators.

</p>

</body>

</html>

AGRA.HTML

CODING

<html>

<head>

<title>AGRA</title>

42 | P a g e
</head>

<body>

<body link="blue" vlink="red" alink="black"><center>

<img src="agra.jpg" width="250" height="200"><br>

<h1 font color ="white" face = "arial" size = "4"><u><b><marquee bgcolor = "purple"
direction = "left" loop = "5"> AGRA </marquee></b></u></font></h1>

<hr>

<br>

<p>

Agra The rich history of India, along with its cultural and geographical diversity makes its
international tourism appeal large and diverse. Let us have a look at the most visited places in
India, where people from all over the world flow into, for an exotic vacation.

Agra is the most visited city in India, since it is home to one of the greatest eternal symbols of
love-Taj Mahal. This white domed marble mausoleum is one of the Seven Wonders of the
World and has an epic love story behind it. Fatehpur Sikri, Agra Fort, Akbar's tomb, Ram
Bagh and Sikandra fort are some of the must visit places in Agra, apart from Taj Mahal. Agra
the former capital of Hindustan, is a city on the banks of the river Yamuna in the northern
state of Uttar Pradesh, India. It is 363 kilometres (226 mi) west of the state capital, Lucknow,
and 200 kilometres (124 mi) south of the national capital New Delhi. With a population of
1,686,976 (2010 est.), it is one of the most populous cities in Uttar Pradesh and the 19th most
populous in India. Agra can also refer to the administrative district that has its headquarters in
Agra city. It is a major tourist destination because of its many splendid Mughal-era buildings,
most notably the Tāj Mahal, Agra Fort and Fatehpūr Sikrī, all three of which are UNESCO
World Heritage Sites. Agra is included on the Golden Triangle tourist circuit, along with
Delhi and Jaipur.

The city is mentioned in the epic Mahābhārata, where it was called Agrevaṇa ("the border of
the forest") Legend ascribes the founding of the city to Raja Badal Singh, a Sikarwar Rajput
king (c. 1475), whose fort, Badalgarh, stood on or near the site of the present fort. However,
the 11th century Persian poet Mas'ūd Sa'd Salmān writes of a desperate assault on the fortress
of Agra, then held by the Shāhī King Jayapala, by Sultan Mahmud of Ghazni. Sultan
Sikandar Lodī was the first to move his capital fromDelhi to Agra in 1506. He died in 1517
and his son, Ibrāhīm Lodī, remained in power there for nine more years, finally being
defeated at the Battle of Panipat in 1526..Between 1540 and 1556, Afghans, beginning with
Sher Shah Suri ruled the area. It achieved fame as the capital of the Mughal Empire from
1556 to 1658.

</p>

</body>

43 | P a g e
</html>

44 | P a g e