GURU GOBIND SINGH INDRAPRASTHA

UNIVERSITY
DWARKA,
DELHI-110064

MAHARAJA SURAJMAL INSTITUTE

E-COMMERCE LAB
Subject Code: BBA (B&I) 311
Submitted to: Submitted by:
Ms. Priyanka Dhaka ANUJ DHANKHAR
Ms. Neha Mathur 35314901818
BBA (B&I)
5th Semester (M)

1|Page
 E-COMMERCE LAB
INDEX
S.NO PROGRAM PAGE
NO.
1. Create a ppt on the topic: 10
Traditional Commerce VS E-Commerce
2. Create an html file for displaying a webpage with 11
the following tags. the file should contain a brief
description about all the tags:
A.BOLD
B.ITALICS
C.UNDERLINE
D.HEADING
E. ALIGNMENT
F. PARAGRAPH
G.TEXT COLOR
H.PRE
I. HR
J. BACKGROUND COLOR
K.LINE BREAK

3. Design a webpage in html defining the advantages 21

and disadvantages of e-commerce using “style” and
“font” tag.
4. Design a web page of your cv with headings as 29
career objective, educational qualifications,

2|Page
 achievements, strengths, hobbies and personal
details.
Apply the following specifications: Insert a
horizontal line after every mentioned heading. Insert
your image on the left side of web page. Set any
light color as background color. Bold and underline
every heading. Use heading tag to specify the
heading. Use pre tag for educational qualification
5. Create an ordered list as follows: 37
COMPUTER SYSTEM
1. Input devices
i. Keyboard
ii. Mouse
iii. Joystick
iv. Scanner
a. Flat Bed Scanner
b. Hand Held Scanner
2. Output devices
i. Monitor
a) LCD
b) CRT
ii. Printer
a. Impact printer
b. Non – Impact printer

6. Design a website with the name as HTML tutorial 42

with the following specifications:

Make the following hyperlinks:

Formatting Styles & Headings: include bold,
italics, underline, strike, subscript, superscript & all
3|Page
 six types of headings
Font Styles & Images: Font & base font, Image tag
Anchor: Internal & external links
Marquee: Move text, image & hyperlink
Other tags: br, hr, pre, p

7. Create an html webpage which displays the 44

following list:
FRUITS&VEGETABLES

A. Vegetables
 Onion
 Tomato
 Radish
 Potato
 Carrot
B.Fruits
 Apple
 Banana
 Watermelon
 Mango
 Grapes

NEWSPAPERS &MAGAZINES

o Newspapers
1. The Times of India
2. Hindustan Times
3. Navbharat Times
4|Page
 4. Punjab Kesari
5. Dainik Jagran

o Magazine
i. Business Times
ii. The Week
iii. Harvard Business Review
iv. Computer World

Apply the following parts:

Put a horizontal line after Newspapers & Magazines.
Apply heading tag for Newspapers & Magazines.
Apply base font for whole webpage. Apply a
background color. Insert a marquee tag displaying
“Newspapers & Magazines.”
8A. Design the following table: 49
65 40 20
Men Wome Men Wome Men Wome
n n n
82 85 78 82 77 81

Life Expectancy By Current Age

5|Page
 Marks
Roll
8B. Name Course Create 53
No. Internal External Total
the
123 abc BBA 20 60 80
789 Xyz BCA 15 65 80
following table:

9. 56

Create the following table:

10. Create following table 60

6|Page
11. Create following table: 63

12. Create following table: 65

7|Page
13. Create following table: 71

14. Create following table: 74

15. Create the following table: 78

8|Page
16. Create a student registration form. 82
17. Create a flight reservation form. 86

EXPERIMENT-1

QUES. CREATE A PPT ON THE TOPIC:

Traditional Commerce VS E-Commerce

9|Page
 EXPERIMENT-2
QUES.
CREATE AN HTML FILE FOR DISPLAYING A WEBPAGE WITH THE
FOLLOWING TAGS. THE FILE SHOULD CONTAIN A BRIEF
DESCRIPTION ABOUT ALL THE TAGS:
A. BOLD

10 | P a g e
 B. ITALICS
C. UNDERLINE
D. HEADING
E. ALIGNMENT
F. PARAGRAPH
G. TEXT COLOR
H. PRE
I. HR
J. BACKGROUND COLOR
K. LINE BREAK

HTML BASICS
Hypertext Markup Language (HTML) is the standard markup
language for documents designed to be displayed in a web
browser.
Web browsers receive HTML documents from a web server or
from local storage and render the documents into multimedia web
pages. HTML describes the structure of a web

11 | P a g e
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. HTML provides
a means to create structured documents by 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 />  directly introduce content into the
page. Other tags such as  <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 affects the behavior and content of web
pages. Inclusion of CSS defines the look and layout of content.
The World Wide Web Consortium (W3C), former maintainer of the
HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML
since 1997.

12 | P a g e
 HOW TO CREATE A HTML DOCUMENT

1. Start Notepad on Microsoft Word

2. Write the content as per HTML formats
i.e. using tags and other attributes.
3. On the File menu, click save.
4. Save the file with adding html after giving
your desired name.
5. The document will open either in
Internet Explorer or Google Chrome and your
content in desired format will open.

HTML TAGS
HEAD TAG
When writing in HTML, the <head> tag is used to contain specific
information about a web page, often referred to as metadata. This
information includes things like the title of the document (which is
mandatory), scripts or links to scripts, and CSS files. The <head> tag in
HTML is used to define the head portion of the document which
contains information related to the document. The <head> tag contains
other head elements such as <title>, <meta>, <link>, <scripts>, etc.

13 | P a g e
BODY TAG
The <body> tag defines the document's body. The <body> element
contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.

BOLD TAG
The bold HTML tag -“<b>” is used to create a ‘b’ element, which
represents bold text in an HTML document. The <b> tag is to markup
text as bold without conveying any extra importance. For example, this
could be useful in article abstracts, where the beginning of an article is
set in bold text.

14 | P a g e
ITALICS TAG

The italics HTML tag -“<i>” is used to create a italics font in the html
document. This tag is used to change the font into italics as per user’s
need.

UNDERLINE TAG
To underline a text in HTML, use the <u> tag. The <u> tag deprecated in
HTML, but then re-introduced in HTML5. Now it represents a text
different from another text stylistically. To underline a text, you can
also use the style attribute.

HEADING TAG
HTML headings are titles or subtitles that you want to display on a
webpage. HTML headings are defined with the <h1> to <h6> tags.

15 | P a g e
<h1> defines the most important heading. <h6> defines the least
important heading.

ALIGNMENT TAG
To set text alignment in HTML, use the style attribute. The style
attribute specifies an inline style for an element. The attribute is used
with the HTML <p> tag, with the CSS property text-align for the center,
left and right alignment. HTML5 do not support the align attribute of
the <p> tag, so the CSS style is used to set text alignment.

16 | P a g e
PARAGRAPH TAG
The <p> tag defines a paragraph of text. It is a block-level element and
always starts on a new line. Before and after each paragraph, browsers
add margin automatically.

PRE TAG
When writing in HTML, the <pre> tag is a block element used to
designate preformatted text. It is useful because the text between the
tag has its spaces and line breaks preserved, in addition to being
displayed in a fixed-width font. The HTML <pre> tag is used for
indicating preformatted text. The code tag surrounds the code being
marked up. Browsers normally render pre text in a fixed-pitched font,
with whitespace intact, and without word wrap.

17 | P a g e
HR TAG
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of
topic). The <hr> element is most often displayed as a horizontal rule
that is used to separate content (or define a change) in an HTML page.

BR TAG
The <br> tag inserts a single line break. The <br> tag is useful for writing
addresses or poems. The <br> tag is an empty tag which means that it
has no end tag.

18 | P a g e
THE CODING IS AS FOLLOWS:
<<html>
<head>
<title> BASIC HTML TAGS </title>
</head>
<body style="background-color:green">
<p style="text-align:center">
<u><h1><p style="text-align:center">BASIC HTML TAGS</h1></u>
<b> BOLD: This tag is used to bold the text </b><br/>
<i>ITALICS: This tag is used to italicize the text</i><br/>
<u> UNDERLINE: This tag underline the text </u> </p><br/>
<h2> HEADING:</h2>This tag is used to create headings in the HTML document. Like
<h1>THIS IS HEADING 1.</h1>
<h2>THIS IS HEADING 2. </h2>
<h3>THIS IS HEADING 3.</h3>
<p style="text-align:left"><hr/>
Alignment: This tag is used to align the text in the webpage<br/>
<p>Paragraph: This tag sets the text as a paragraph, a paragraph always starts on a new line,
and browsers automatically add some white space before and after a paragraph.</p><br/>
<h2><pre> PRE TAG:</pre></h2><pre> When writing in HTML, the pre tag is is a block
element used to designate preformatted text.
It is useful because the text between the tag has its spaces and line breaks
preserved, in addition to being displayed in a fixed-width font.</pre>

<hr>Horizontal Line (HR TAG): This tag is used to create a horizontal line which stretches
across the webpage <hr/> <br/>
Break a line (BR TAG) :This tag produces <br/>a line break in text
</p>
</body>
</html>

19 | P a g e
EXPERIMENT-3

20 | P a g e
QUES.DESIGN A WEB PAGE IN HTML DEFINING THE
ADVANTAGES AND DISADVANTAGES OF E-
COMMERCE USING “STYLE” AND “FONT” TAG.

STYLE TAG
The <style> tag is used to define style information (CSS) for a
document. Inside the <style> element you specify how HTML
elements should render in a browser.
The <style> tag in HTML helps us to modify our text, viewed in
the page. This modification includes changing font size, font
family, font color etc. Not only the texts but also we can change
the style of a body or part of a page

STYLE ATTRIBUTES:
1. HTML FONT FAMILY
2. HTML FONT SIZE
3. HTML FONT COLOR
4. HTML TEXT ALIGN
5. HTML BACKGROUND COLOR

HTML FONT FAMILY

21 | P a g e
The font family changes the font style of a text and can be used
in any text writing tag like <p> or heading tag. These font
families include all the names that you find in Microsoft Office
or any other writing-based software.

HTML FONT SIZE

The font size changes the size of a text and this can also be used
in any text writing tag like <p> or heading tag. The units can be
given in “%” or pixels or other units can also be included.

HTML FONT COLOR

22 | P a g e
The font color tag changes the color of a text and can be used in
any text writing tag like <p> or heading tag. We can use both
name of the colors or also the color codes that is mainly used in
Photoshop.

HTML TEXT ALIGN

The text alignment tag is used to change the alignment of a text
including center, left or right alignment.

HTML BACKGROUND COLOR

23 | P a g e
Using this attribute we can change the color of the background
page or web page. This attribute is used along with the body tag
to change the whole color of the body. It can also be used along
with the text tags to change the text block’s color

FONT TAG
The <font> tag plays an important role in the web page to create
an attractive and readable web page. The font tag is used to
change the color, size, and style of a text. The base font tag is
used to set all the text to the same size, color and face.
24 | P a g e
The font tag has basically three attributes which are given
below:
1. FONT SIZE
2. FONT FACE/TYPE
3. FONT COLOR

FONT SIZE
This attribute is used to adjust the size of the text in the
HTML document using font tag with size attribute. The
range of size of the font in HTML is from 1 to 7 and the
default size is 3.

25 | P a g e
 FONT FACE/TYPE
Font type can be set by using face attribute with font tag in
HTML document. But the fonts used by the user needs to
be installed in the system first.

FONT COLOR
Font color is used to set the text color using font tag with
color attribute in HTML document. Color can be specified
by either with its name or with its hex code.

26 | P a g e
 THE CODING IS AS FOLLOWS:
<html>
<head>
<title> ADVANTAGES AND DISADVANTAGES OF E-
COMMERCE </title>
<body bgcolor="yellow">
</body>
<u><h1><p style="text-align:center; font-family:timesnewroman;
color:red;">ADVANTAGES AND DISADVANTAGES OF E-
COMMERCE</h1></u></p>
<b><u><h2 style="background-color:red; text-align:left;color:black;
font-size:200%;"> ADVANTAGES OF E-
COMMERCE:</h2></u></b>
<font face="arial" size="5" color="green">1. A larger
market</font><br/>
<font face="arial" size="5" color="blue">2. Customer Insights
Through Tracking And Analytics
</font><br/>
<font face="arial" size="5" color="black">3. Fast Response To
27 | P a g e
Consumer Trends And Market Demand</font><br/>
<font face="arial" size="5" color="pink">4. Lower Cost</font><br/>
<b><u><h2 style="background-color:red; text-align:left;color:black;
font-size:200%;"> DISADVANTAGES OF E-
COMMERCE:</h2></u></b>
<font face="calibri" size="5" color="black">1. Lack Of Personal
Touch
</font><br/>
<font face="calibri" size="5" color="red">2. Lack Of Tactile
Experience</font><br/>
<font face="calibri" size="5" color="purple">3. Price And Product
Comparison</font><br/>
<font face="calibri" size="5" color="green">4. Need For Internet
Access</font><br/>
</head>
</html>

28 | P a g e
 EXPERIMENT-4

QUES. Design a web page of your CV with headings as career

objective, educational qualifications, achievements, strengths,
hobbies and personal details.
Apply the following specifications: insert a horizontal line after
every mentioned heading. Insert your image on the left side of
web page. Set any light color as background color. Bold and
underline every heading. Use heading tag to specify the heading.
Use pre tag for educational qualification.

BOLD TAG
The bold HTML tag -“<b>” is used to create a ‘b’ element, which represents bold
text in an HTML document. The <b> tag is to markup text as bold without
conveying any extra importance. For example, this could be useful in article
abstracts, where the beginning of an article is set in bold text.

UNDERLINE TAG
To underline a text in HTML, use the <u> tag. The <u> tag deprecated in HTML,
but then re-introduced in HTML5. Now it represents a text different from another
text stylistically. To underline a text, you can also use the style attribute.

HR TAG

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of

topic). The <hr> element is most often displayed as a horizontal rule that
is used to separate content (or define a change) in an HTML page.

29 | P a g e
HEADING TAG
HTML headings are titles or subtitles that you want to display on a
webpage. HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.

PRE TAG
When writing in HTML, the <pre> tag is a block element used to
designate preformatted text. It is useful because the text between the tag
has its spaces and line breaks preserved, in addition to being displayed
in a fixed-width font. The HTML <pre> tag is used for indicating
preformatted text. The code tag surrounds the code being marked up.
Browsers normally render pre text in a fixed-pitched font, with
whitespace intact, and without word wrap.
HTML BACKGROUND COLOR
Using this attribute we can change the color of the background
page or web page. This attribute is used along with the body tag
to change the whole color of the body. It can also be used along
with the text tags to change the text block’s color.
IMAGE TAG
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.

30 | P a g e
TABLE TAG
The <table> tag defines an HTML table. An HTML table
consists of one <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.
UNORDERED LIST TAG
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag. The list items will be marked with bullets
(small black circles) by default.
HYPERLINK TAG
The <a> tag defines a hyperlink, which is used to link from one
page to another. The most important attribute of the <a> element
is the href attribute, which indicates the link's destination. By
default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
ANCHOR TAG
The anchor tag defines a piece of text which marks the
beginning and/or the end of a hypertext link.

31 | P a g e
 THE CODING IS AS FOLLOWS:
<html>
<head>
<title>Resume</title>
</head>
<body bgcolor="yellow">
<body>
<center>
<h1><u> Resume</u></h1>
</center>
<h4 ><b>ANUJ DHANKHAR</b></h4>
<h5> New Delhi </h5>
<h5> Contact No. 9716794437</h5>
<h5><a href="url"> anuj1308@gmail.com</a>
</h5>
<hr>
<h2>
<div style="background-color:black; color:white">
<b><u>Career Objective</u></b>
</h2>
</hr>
<h3> To secure a challenging position in a reputable
organization to expand my learnings, knowledge, and skills.
</h3>
<hr>
<pre>
<h2>
<u><b>EDUCATIONAL QUALIFICATIONS</b></u>
</h2>

32 | P a g e
<table border= "5" width="1000">
<tr>
<th> Qualification </th>
<th> Board/University </th>
<th> College/School </th>
<th> Year of Passing </th>
<th> Marks </th>
</tr>
<tr>
<th> Pursuing BBA (B&I) </th>
<th> Guru Gobind Singh Indraprastha University </th>
<th> Maharaja Surajmal Institute </th>
<th> 2021 </th>
<th> 8.8 CGPA </th>
</tr>
<tr>
<th> 12th </th>
<th> C.B.S.E </th>
<th> D.A.V. Public School </th>
<th> 2018 </th>
<th> 82% </th>
</tr>
<tr>
<th> 10th </th>
<th> C.B.S.E </th>
<th> D.A.V. Public School </th>
<th> 2016 </th>
<th> 8.4 CGPA </th>
</tr>
</table>
<hr/>
33 | P a g e
</pre>
<h2>
<b><u> Achievements </u></b>
</h2>
<ul>
<li> President of the environmental society of college
<li> Secured 1st position in the marketing competition
<li> Organised and conducted various events of Eco
Club of college

</ul>
<hr/>
<h2>
<b><u> Strengths </u></b>
</h2>
<ul>
<li> Keen learner
<li> Team worker
<li> Focused and Confident with positive attitude
<li> Leadership Quality
<li> People Oriented
</ul>
<h2>
<hr/>
<u> Personal Details </u>
</h2>
<ul>
<li> Name- ANUJ DHANKHAR
<li>Address- B-2/45 RAJOURI GARDEN New Delhi
<li> Contact No- 9716794437

34 | P a g e
 <li> Email- <a href="url"> anuj1308@gmail.com</a>
<li> DOB- 13 AUGUST 1999
<li> LinkedIn- <a href="url">
www.linkedin.com/in/anuj-dhankhar</a>
</ul>
<h2>
<hr/>
<u>Hobbies</u>
</h2>
<ul>
<li> Dancing
<li> Travelling
<li> Singing
</ul>
<hr/>
</body>
</html>

OUTPUT:
35 | P a g e
EXPERIMENT-5
36 | P a g e
QUES. Create an ordered list as follows:
COMPUTER SYSTEM

1. Input devices
i. Keyboard
ii. Mouse
iii. Joystick
iv. Scanner
a) Flat Bed Scanner
b) Hand Held Scanner
2. Output devices
i. Monitor
a) LCD
b) CRT

ii. Printer
a) Impact printer
b) Non – Impact printer

Apply the following parts:

Insert an image of computer on top corner of webpage.
Display a marquee display “Input and Output Devices”.
Use different font styles and colors for Input & Output devices.
Insert a horizontal line after Input Devices are over.
Use bold, italics and underline in headings.

BOLD TAG

37 | P a g e
The bold HTML tag -“<b>” is used to create a ‘b’ element, which
represents bold text in an HTML document. The <b> tag is to markup
text as bold without conveying any extra importance. For example, this
could be useful in article abstracts, where the beginning of an article is
set in bold text.

ITALICS TAG
The italics HTML tag -“<i>” is used to create a italics font in the html
document. This tag is used to change the font into italics as per user’s
need.

UNDERLINE TAG
To underline a text in HTML, use the <u> tag. The <u> tag deprecated
in HTML, but then re-introduced in HTML5. Now it represents a text
different from another text stylistically. To underline a text, you can also
use the style attribute.

IMAGE TAG
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.

HR TAG
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of
topic). The <hr> element is most often displayed as a horizontal rule that
is used to separate content (or define a change) in an HTML page.

FONT TAG
38 | P a g e
The <font> tag plays an important role in the web page to create
an attractive and readable web page. The font tag is used to
change the color, size, and style of a text. The base font tag is
used to set all the text to the same size, color and face.
MARQUEE TAG
The <marquee> is a non-standard HTML tag which was used to
create a scrolling text or an image. It was used to make the text
or image scroll horizontally across or vertically down the web
page.
ORDERED LIST TAG
The HTML <ol> tag defines an ordered list. An ordered list can
be numerical or alphabetical. An ordered list starts with the <ol>
tag. Each list item starts with the <li> tag.

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>COMPUTER SYSTEM</title>
</head>
<body bgcolor="purple">
<u><b><h1 style="text-align:center"><font
color="white">COMPUTER SYSTEMS <img
src="C:\Users\welcome\Documents\computerpic.jpg" width=120
height = 120 hspace=300 align= right></font></h1></u></b>

<marquee bgcolor="black" ><font color="yellow" size="5">

INPUT AND OUTPUT DEVICES</font></marquee>

39 | P a g e
<font face="calibri" color="white" size="5">
<ol type="1">
<b><u><i><li>INPUT DEVICES</li></i></u></b>
</font>
<font face="calibri" color="blue" size="5">
<ol type="i">
<li>Keyboard</li>
<li>Mouse</li>
<li>Joystick</li>
<li>Scanner</li>
<ol type="a">
<li>Flat Bed Scanner</li>
<li>Hard Held Scanner</li>
</ol>
</ol>
<hr>
</font>
<font face="arial" color="red" size="5">
<b><u><i><li>OUTPUT DEVICES</li></i></u></b> </font>
<font face="arial" color="black" size="5">
<ol type="i">
<li>Monitor</li>
<ol type="a">
<li>LCD</li>
<li>CRT</li>
</ol>
<li>Printer</li>
<ol type="a">
<li>Impact Printer</li>
<li>Non Impact Printer</li>
</ol>
</ol>
</font>
</ol>
</font>
40 | P a g e
</body>
</html>
OUTPUT:

EXPERIMENT-6

41 | P a g e
QUES. Design a website with the name as HTML tutorial with
the following specifications:

Make the following hyperlinks:

Formatting Styles & Headings: include bold, italics, underline,

strike, subscript, superscript & all six types of headings
Font Styles & Images: Font & base font, Image tag
Marquee: Move text, image & hyperlink
Other tags: br, hr, pre, p

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>COMPUTER SYSTEM</title>
</head>
<body bgcolor="RED">
<u><b><h1 style="text-align:center"><font color="white">COMPUTER
SYSTEMS <img src="C:\Users\welcome\Documents\computerpic.jpg"
width=120 height = 120 hspace=300 align= right></font></h1></u></b>

<marquee bgcolor="black" ><font color="yellow" size="15" width=120 height

= 120 hspace=300>
WELCOME TO COMPUTER SYSTEMS</font></marquee>

<font face="comic sans" color="black" size="5">

<a href="marquee.html"> Clickhere</a>to proceed.

<ol type="1">
<li>HTML tags </li>
<ol type="i">
<li> html tag</li>
<li> head tag</li>
<li> body tag</li>
<li> image tag</li>

42 | P a g e
<ol type="a">
<li>imgsrc="FILE NAME"</li>
</ol>
</ol>
<hr>
<li>Precautions</li>
<ol type="i">
<li>closing of tabs</li>
<li>spelling errors</li>
<li>improper format/code</li>
</ol>
</body>
</html>

OUTPUT:

EXPERIMENT-7

43 | P a g e
QUES. Create an html webpage which displays the following
list:
FRUITS&VEGETABLES

C. Vegetables
 Onion
 Tomato
 Radish
 Potato
 Carrot
D.Fruits
 Apple
 Banana
 Watermelon
 Mango
 Grapes

NEWSPAPERS &MAGAZINES

o Newspapers
6. The Times of India
7. Hindustan Times
8. Navbharat Times
9. Punjab Kesari
10. Dainik Jagran

o Magazine
v. Business Times
vi. The Week
44 | P a g e
 vii. Harvard Business Review
viii. Computer World

Apply the following parts:

Put a horizontal line after Newspapers & Magazines. Apply
heading tag for Newspapers & Magazines. Apply base font for
whole webpage. Apply a background color. Insert a marquee tag
displaying “Newspapers & Magazines.”

TAGS:
ORDERED LIST TAG
The HTML <ol> tag defines an ordered list. An ordered list can
be numerical or alphabetical. An ordered list starts with the <ol>
tag. Each list item starts with the <li> tag.

UNORDERED LIST TAG

An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag. The list items will be marked with bullets
(small black circles) by default.

HR TAG

45 | P a g e
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of
topic). The <hr> element is most often displayed as a horizontal rule that
is used to separate content (or define a change) in an HTML page.

FONT TAG
The <font> tag plays an important role in the web page to create
an attractive and readable web page. The font tag is used to
change the color, size, and style of a text. The base font tag is
used to set all the text to the same size, color and face.
MARQUEE TAG
The <marquee> is a non-standard HTML tag which was used to
create a scrolling text or an image. It was used to make the text
or image scroll horizontally across or vertically down the web
page.
HEADING TAG
HTML headings are titles or subtitles that you want to display on a
webpage. HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.

HTML BACKGROUND COLOR

Using this attribute we can change the color of the background
page or web page. This attribute is used along with the body tag
to change the whole color of the body. It can also be used along
with the text tags to change the text block’s color.

THE CODING IS AS FOLLOWS:

46 | P a g e
<html>
<body style="background-color:cyan">
<font face="verdana">
<h1 style="text-align:left">FRUITS & VEGETABLES</h1>
<ol type="A">
<b><u><li>Vegetables</li></u></b>
<ul type="disc">
<li>Onion</li>
<li>Tomato</li>
<li>Radish</li>
<li>Potato</li>
<li>Carrot</li>
</ul>
<b><u><li>Fruits</li></u></b>
<ul type="disc">
<li>Apple</li>
<li>Banana</li>
<li>Watermelon</li>
<li>Mango</li>
<li>Grapes</li>
</ul>
</ol>
<h2 style="text-align:left"><marquee direction="left" height="50"
width="500">NEWSPAPERS & MAGAZINES</marquee></h2>
<hr>
<ul type="circle">
<b><u><li>Newspaper</li></u></b>
<ol>
<li>The Times of India</li>
<li>Hindustan Times</li>
<li>Navbharat Times</li>
<li>Punjab Kesari</li>
<li>Dainik Jagran</li>
</ol>
<b><u><li>Magazine</li></u></b>
<ol type="i">
<li>Business Times</li>
<li>The Week</li>
<li>India Today</li>

47 | P a g e
<li> Harvard Business Review</li>
<li>Computer World</li>
</ol>
</ul>
</font>
</body>
</html>

OUTPUT:

EXPERIMENT-8(A)
48 | P a g e
QUES. Design the following table:

65 40 20
Men Women Men Wome Men Women
n
82 85 78 82 77 81

Life Expectancy By Current Age

TABLE TAG
The HTML <table> element represents tabular data — that is,
information presented in a two-dimensional table comprised of
rows and columns of cells containing data.
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is
defined with a <th> tag. Each table data/cell is defined with a
<td> tag.
By default, the text in <th> elements is bold and centered.
By default, the text in <td> elements is regular and left-aligned.

ALIGNMENT TAG
This enumerated attribute indicates how the table must be aligned inside the
containing document. It may have the following values:
49 | P a g e
  left: the table is displayed on the left side of the document;
 center: the table is displayed in the center of the document;
 right: the table is displayed on the right side of the document.
Set margin-left and margin-right to auto or margin to 0 auto to achieve an
effect that is similar to the align attribute.

BACKGROUND COLOR
The background color of the table is a 6-digit hexadecimal RGB code,
prefixed by a '#'. One of the predefined color keywords can also be used.

BORDER TAG
This integer attribute defines, in pixels, the size of the frame surrounding the
table. If set to 0, the frame attribute is set to void.

CELLPADDING TAG
This attribute defines the space between the content of a cell and its border,
displayed or not. If the cellpadding's length is defined in pixels, this pixel-
sized space will be applied to all four sides of the cell's content. If the length
is defined using a percentage value, the content will be centered and the total
vertical space (top and bottom) will represent this value. The same is true for
the total horizontal space (left and right).

To achieve a similar effect, apply the border-collapse property to

the <table> element, with its value set to collapse, and the padding property
to the <td> elements.

CELLSPACING TAG
This attribute defines the size of the space between two cells in a
percentage value or pixels. The attribute is applied both

50 | P a g e
 horizontally and vertically, to the space between the top of the table
and the cells of the first row, the left of the table and the first
column, the right of the table and the last column and the bottom of
the table and the last row.

To achieve a similar effect, apply the border-spacing property to

the <table> element. Border-spacing does not have any effect
if border-collapse is set to collapse.

CAPTION TAG
<Caption> tag defines an alternative text that summarizes the
content of the table and gives the heading of the table.

WIDTH TAG
This attribute defines the width of the table.

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>TABLE</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align:center; }
</style>
</head>
<body>
<center>
<table>
<caption>Life Expectancy By Current Age</caption>
<tr bgcolor="lightgrey">
51 | P a g e
 <th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr bgcolor="lightgrey">
<td>Men</td>
<td>Women</td>
<td>Men</td>
<td>Women</td>
<td>Men</td>
<td>Women</td>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT:

EXPERIMENT-8(B)

QUES. Create following table

52 | P a g e
 Marks
Roll No. Name Course
Internal External Total
123 abc BBA 20 60 80
789 Xyz BCA 15 65 80

TABLE TAG

COLSPAN TAG
Cells next to each other in a row can be joined using the colspan="n"
attribute of a <th> or < td> tag, where "n" is the number of columns.

ROWSPAN TAG
Cells next to each other in a column can be joined using the rowspan="n"
attribute of a <th> or <td> tag, where "n" is the number of rows

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>TABLE</title>

53 | P a g e
 <style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align:center; }
</style>
</head>
<body>
<center>
<table>
<tr>
<th rowspan="2">Roll No.</th>
<th rowspan="2">Name</th>
<th rowspan="2">Course</th>
<th colspan="3"> Marks </th>
<tr>
<th> Internals</th>
<th> Externals</th>
<th> Total </th>
</tr>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>BBA</td>
<td>20</td>
<td>60</td>
<td>80</td>
</tr>
<tr>
<td>789</td>
<td>xyz</td>
<td>BCA</td>
<td>15</td>
54 | P a g e
 <td>65</td>
<td>80</td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT:

EXPERIMENT-9

QUES. Create following table

Country State City Street Male Female Others
New Street 500 600 6

55 | P a g e
 Cochin Main Street 300 288 2
Kerela Guru Street 500 600 10
Trivandrum TVK Street 500 600 2
1
Krishna Street 700 850 1
Mumbai Main Street 500 600 2
Maharashtra New Street 500 600 4
Surath Billa Street 500 600 2
New Street 200 210 2
2 Alaska AKA Central Cross Street 1000 1050 10

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>TABLE</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align:center; }
</style>
</head>
<body>
<center>
<table>
<tr>
<th> Country</th>
<th> State</th>
<th> City</th>

56 | P a g e
 <th> Street</th>
<th> Male</th>
<th> Female</th>
<th> Others</th>
<tr>
<td rowspan="8" >1</td>
<td rowspan="4">Kerela</td>
<td rowspan="2" >Cochin</td>
<td> New Street </td>
<td> 500 </td>
<td> 600 </td>
<td> 6</td>
</tr>
<tr>
<td> Main Street </td>
<td> 300 </td>
<td> 288 </td>
<td> 2</td>
</tr>
<tr>
<td rowspan="2">Trivandrum</td>
<td >Guru street</td>
<td> 500</td>
<td> 600</td>
<td> 10 </td>
</tr>
<tr>
<td >TVK Street</td>
<td> 500 </td>
<td> 600 </td>
<td> 2</td>
</tr>
<tr>
<td rowspan="4" >Maharashtra</td>
<td rowspan="2" >Mumbai</td>
57 | P a g e
 <td> Krishna Street</td>
<td> 700 </td>
<td> 850 </td>
<td> 1</td>
</tr>
<tr>
<td >Main Street</td>
<td> 500 </td>
<td> 600 </td>
<td> 2</td>
</tr>
<tr>
<td rowspan="2">Surath</td>
<td> New Street</td>
<td> 500 </td>
<td> 600 </td>
<td> 4</td>
</tr>
<tr>
<td >Billa Street</td>
<td> 500 </td>
<td> 600 </td>
<td> 2</td>
</tr>
<tr>
<td rowspan="2" >2</td>
<td rowspan="2"> Alaska </td>
<td rowspan="2"> AKA Central </td>
<td> New Street</td>
<td> 200 </td>
<td> 210 </td>
<td> 2</td>
</tr>
<tr>
58 | P a g e
 <td >Cross Street</td>
<td> 1000 </td>
<td> 1050 </td>
<td> 10</td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT:

EXPERIMENT-10

QUES. Create following table

59 | P a g e
This is the case of “table in table” so all the table tags will be
repeated in the main table tag.

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>TABLE</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align:center; }
</style>
</head>
<body>
<center>
<table>
<tr>
<th>Date</th>
<th>Details (Speakers, Talks and Links)</th>
<th>Action</th>
</tr>

60 | P a g e
<tr>
<td>01/05/2018</td>
<td> <table>
<tr>
<td>Speaker Name 1</td>
<td>Speaker Link (Twitter, etc)</td>
<td>Talk Title 1</td>
</tr>
<tr>
<td>Speaker Name 2</td>
<td>Speaker Link (Twitter, etc)</td>
<td>Talk Title 2</td>
</tr> </table> </td>
<td> <a href="Attendees">Attendees </a> </td>
</tr>

<tr>
<td>03/04/2018</td>
<td> <table>
<tr>
<td>Speaker Name 1</td>
<td>Speaker Link (Twitter, etc)</td>
<td>Talk Title 1</td>
</tr> </table> </td>
<td> <a href="Attendees">Attendees </a> </td>
</tr>

<tr>
<td>04/05/2018</td>
<td> <table>
<tr>
<td>Speaker Name 1</td>
<td>Speaker Link (Twitter, etc)</td>
<td>Talk Title 1</td>
</tr>
<tr>

61 | P a g e
 <td>Speaker Name 2</td>
<td>Speaker Link (Twitter, etc)</td>
<td>Talk Title 2</td>
</tr>
<tr>
<td>Speaker Name 3</td>
<td>Speaker Link (Twitter, etc)</td>
<td>Talk Title 3</td>
</tr></table> </td>
<td> <a href="Attendees">Attendees </a> </td>
</tr>

</tr>
</table>
</center>
</body>
</html>

OUTPUT:

EXPERIMENT-11

QUES. Create following table:

62 | P a g e
THE CODING IS AS FOLLOWS:
<html>
<head>
<title>TABLE</title>
<style>
table, th, td {
border: 1px solid black;
padding: 4px;
text-align:center; }
</style>
</head>
<body>
<center>
<table>
<tr>
<th>Manufacturer </th>
<th>Model </th>
<th>Price</th>
</tr>

<tr>
<th rowspan="2">Nokia</th>
<td>N82 </td>

63 | P a g e
 <th>10000p.</th>
</tr>

<tr>
<th rowspan="2">Samsung </th>
<td>N82</td>
<th> 10000p.</th>
</tr>

<tr>
<th>Apple</th>
<td>iPhone </td>
<th>30000p.</th>
</tr>

</table>
</center>
</body>
</html>

OUTPUT:

EXPERIMENT-12

QUES. Create the following table:

64 | P a g e
THE CODING IS AS FOLLOWS:
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="10" frame="hsides" rules="groups">
<caption>CODE-PAGE SUPPORT IN MICROSOFT
WINDOWS</caption>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THREAD valign="top">
<tr>
<th width="90px">Code-Page ID</th>
<th width="220px">Name</th>
<th width="40px">ACP</th>
65 | P a g e
<th width="40px">OEMCP</th>
<th width="100px">Windows NT 3.1</th>
<th width="100px">Windows NT 3.51</th>
<th width="100px">Windows 95</th>
</tr>
<tbody>
<tr>
<td>1200</td>
<td>Unicode (BMP of ISOMEC-10646)</td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
<td>*</td>
</tr>
<tr>
<td>1250</td>
<td>Windows 3.1 Eastern European</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>1251</td>
<td>Windows 3.1 Cynillic</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>1252</td>
66 | P a g e
<td>Windows 3.1 US (ANSI)</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>1253</td>
<td>Windows 3.1 Greek</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>1254</td>
<td>Windows 3.1 Turkish</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>1255</td>
<td>Hebrew</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
67 | P a g e
<td>1256</td>
<td>Arabic</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>1257</td>
<td>Baltic</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>1361</td>
<td>Korean (Johab)</td>
<td>X</td>
<td></td>
<td></td>
<td>**</td>
<td>X</td>
</tr>
</tbody>
<tbody>
<tr>
<td>437</td>
<td>MS-DOS United States</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
68 | P a g e
<td>X</td>
</tr>
<tr>
<td>708</td>
<td>Arabic (ASMO 708)</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>709</td>
<td>Arabic (ASMO 449+, BCON V4)</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>710</td>
<td>Arabic (Transparent Arabic)</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>708</td>
<td>Arabic (Transparent ASMO)</td>
<td></td>
<td>X</td>
<td></td>
69 | P a g e
<td></td>
<td>X</td>
</tr>
</tbody>
</table>
</body>
</html>

OUTPUT:

EXPERIMENT-13

QUES. Create the following table:

70 | P a g e
THE CODING IS AS FOLLOWS:
<html>
<head>
<title>Table</title>
<style>
table,th,td
{ border: 2px solid white;
border-collapse: collapse;
padding: 6px;}
</style>
</head>
<body>
<table>
<col width="170">
<col width="300">
<col width="220">
<tr bgcolor="grey">
<th>Cost Components</th>
<th>Data Requirements</th>

71 | P a g e
<th>Data Sources</th>
</tr>
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Hospital and medical cost</li></td></ol>
<ul type="square"><td><li>Average hospital and medical expenditure (In-and
Out-patients)</li></td>
<td><li>Hospital and medical records from hospitals</li></td></ul>
</tr>
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Lost output</li></td></ol>
<ul type="square"><td><i>Fatal Casualty</i><br/>
<li>Average fatal age</li>
<li>Average age of retirement</li>
<li>Average national income statistics</li>
<i>Serious and Slight Casualty</i><br/>
<li>Time loss for rehabilitation</li></td>
<td><li>Ministry of Public Health</li>
<li>Hospital and medical records from hospitals</li>
<li>National Statistical Office</li></td></ul>
</tr>
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Property damage cost</li></td></ol>
<ul type="square"><td><li>Vehicle damage cost</li>
<li>Road furniture damage cost</li></td>
<td><li>Royal Thai Police</li>
<li>Department of Highways</li>
<li>Questionnaire surveys</li></td></ul>
</tr>
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Insurance administrative cost</li></td></ol>
<ul type="square"><td><li>Accident investigation and claim overhead
costs</li></td>
<td><li>Insurance companies</li></td></ul>
</tr>
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Emergency medical service (EMS) cost</li></td></ol>
<ul type="square"><td><li>EMS and rescue team operating and overhead
costs</li></td>
<td><li>Narenthorn Center</li></td></ul>
</tr>
72 | P a g e
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Police administrative cost</li></td></ol>
<ul type="square"><td><li>Fees and fines to handle road crash</li></td>
<td><li>Land Traffic Act B.E. 2522 (A.E. 1979)</li></td></ul>
</tr>
<tr bgcolor="lightgrey">
<ol type="1"><td><li>Human cost</li></td></ol>
<ul type="square"><td><li>Pain, grief, suffering and economic
consequences</li></td>
<td><li>Lawyer questionnaire surveys</li></td></ul>
</tr>
</table>
</body>
</html>
OUTPUT:

EXPERIMENT-14

QUES. Create the following table:

73 | P a g e
 THE CODING IS AS FOLLOWS:
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="25%,25%,25%,25%">
<frame src="Frame 1.html">
<frame src="Frame 2.html">
<frame src="Frame 3.html">
<frame src="Frame 4.html">
</html>
MAIN CODING:

FRAME 1:

<html>
<head>
<title>Frame 1</title>
</head>
<body>
<h1>Frame 1</h1>
Contents of Frame 1
</body>
</html>

74 | P a g e
FRAME 2:
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>Frame 2</h1>
Contents of Frame 2
</body>
</html>

FRAME 3:
<html>
<head>
<title>Frame 3</title>
</head>
<body>
<h1>Frame 3</h1>

75 | P a g e
Contents of Frame 3
</body>
</html>

FRAME 4:
<html>
<head>
<title>Frame 4</title>
</head>
<body>
<h1>Frame 4</h1>
Contents of Frame 4
</body>
</html>

OUTPUT:

76 | P a g e
EXPERIMENT-15

77 | P a g e
QUES. Create the following table:

THE CODING IS AS FOLLOWS:

MAIN CODING:
<html>
<head>
<title> FRAMES </title>
</head>
<frameset rows="50%,50%" cols="25%,75%">
<frame src="red box.html ">
<frame src="THIS IS DOCUMENT 2.html ">
<frame src="This is green color page.html">
<frame src="This is BLUE color page.html">
</frameset>
</html>
SUBSEQUENT CODINGS:
Red Box:

78 | P a g e
<html>
<head>
<title> FRAMES </title>
</head>
<body bgcolor="red">
RED BOX
</body>
</html>

This Is Document 2:
<html>
<head>
<title> FRAMES </title>
</head>
<body bgcolor="yellow">
<center>
THIS IS DOCUMENT 2
</center>
</body>
</html>

79 | P a g e
This is green color page:
<html>
<head>
<title> FRAMES </title>
</head>
<body bgcolor="green">
This is green color page
</body>
</html>

80 | P a g e
This is BLUE color page:
<html>
<head>
<title> FRAMES </title>
</head>
<body bgcolor="blue">
This is BLUE color page
</body>
</html>

OUTPUT:

EXPERIMENT-16
81 | P a g e
QUES. Create a student registration html form.

THE CODING IS AS FOLLOWS:

<html>
<head>
<title> FORM TAGS </title>
<style>
table,th {
width:50%;
padding: 6px; }

</style>
</head>
<body bgcolor="GREEN">
<table>
<form>
<caption><b>Student Registration Form</b>
<table>
<tr>
<th>Name</th>
<th><input type="text"></th>
</tr>

<tr>
<th>Father Name</th>
<th><input type="text" ></th>
</tr>

<tr>
<th>Postal Address</th>
<th><input type="text" ></th>
</tr>
82 | P a g e
<tr>
<th>Personal Address</th>
<th><input type="text" ></th>
</tr>

<tr>
<th>Sex</th>
<th><input type="radio" name="1" > Male
<input type="radio" name="2" > Female</th>
</tr>

<tr>
<th>City</th>
<th><select >
<option>select..</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select></th>
</tr>

<tr>
<th>Course</th> <th> <select >
<option>select..</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select></th>
</tr>

<tr>
<th>District</th> <th> <select >
<option>select..</option>
<option>A</option>
83 | P a g e
<option>B</option>
<option>C</option>
</select></th>
</tr>

<tr>
<th>State</th> <th> <select >
<option>select..</option>
<option>X</option>
<option>Y</option>
<option>Z</option>
</select></th>
</tr>

<tr>
<th>Pin Code</th>
<th><input type="text" ></th>
</tr>

<tr>
<th>Email ID</th>
<th><input type="text" ></th>
</tr>

<tr>
<th>DOB</th>
<th><input type="text" ></th>
</tr>

<tr>
<th>Mobile NO.</th>
<th><input type="text" ></th>
</tr>
<tr>
84 | P a g e
<th><input type="reset" value="Reset" ></th>
<th><input type="submit" value="Submit Form" ></th>
</tr>
</form>
</table>
</body>
</html>

OUTPUT:

EXPERIMENT-17

85 | P a g e
QUES. Design an html form for the flight ticket reservation. It
must contain hyperlinked pages.

THE CODING IS AS FOLLOWS:

<html>
<head>
<title>Flight Ticket Reservation </title>
</head>
<body bgcolor="RED" >
<h1>Flight Ticket Reservation</h1>
<input type="checkbox" name="round trip">Round Trip
<input type="checkbox" name="one way">One Way
<input type="checkbox" name="multi city">Multi City<br/>
<br/>

<style>
table,th {
width:50%;
padding: 6px;
text-align:left; }

</style>
<table>
<form>
<table>
<tr>
<th>FROM </th>
<th>TO</th>
</tr>
<tr>
<th><input type="text" name="city" class="city1" placeholder="Type
Departure City" required=""></th>
<th><input type="text" name="city" class="city2" placeholder="Type
Destination City" required=""></th>
86 | P a g e
</tr>
</table>

<table>
<tr>
<th>DEPART</th>
<th>RETURN</th>
</tr>

<tr>
<th><input class="date" id="datepicker1" name="Text" type="text"
value="mm/dd/yyyy">
<i>Flexible with date</i>
</th>
<th><input class="date" id="datepicker2" name="Text" type="text"
value="mm/dd/yyyy">
<i>Flexible with date</i></th>
</table>

<br/>

<table>
<th>Class
<select>
<option value="null">Economy</option>
<option value="null">Premium Economy</option>
<option value="null">Business</option>
<option value="null">First class</option>
</select></th>
</table>
<br/>
<input type="submit" value="Search Flights">
</form>
</body>
</html>
87 | P a g e
OUTPUT:

88 | P a g e