E-COMMERCE LAB

INDEX

S.NO PROGRAM PAGE DATE SIGN

NO.

1. Create a HTML file for displaying a webpage with following

Tags. The file should contain a brief description about all these
tags:

a. Bold
b. Italics
c. Underline
d. Alignment
e. Paragraph
f. Text color
g. Headings
h. HR
i. Background Color
j. Line break
k. Pre
2. Design a Web Page of your CV with headings as Objective,
educational qualification, achievements, strengths, hobbies and
personal details.

Apply following specifications:

Insert a horizontal line after every above mentioned heading

(Eg. Insert horizontal line once objectives are complete)

Set any light color as page background.

Bold and underline every heading

Insert your image on left side of web page

Use heading tag to specify the headings

After every heading is over put a horizontal line

Use pre tag for Educational Qualification

Use Base font tag for all the text

3. Design a Web Site with the name as HTML tutorial with

following specifications:

Make following hyperlinks (i.e. 5 different web pages):

Formatting Styles and Headings: Include Bold, italics,

Underline, Strike, Subscript, superscript and all six type of
headings

Font Styles and Images: Font and Basefont tag, Image tag

Anchor: Internal (linking within page) and External (linking

with other documents) links

Marquee: Move text, image and hyperlink

 Other tags: br, hr, pre, p

Include following specifications:

In all these web pages only mention about use, attributes apply
them.

Insert a background image on home page

Make all the topics as hyperlinks and go to some other page for
description

Insert a marquee showing HTML Tutorial as moving text.

Use different font style for different topics

On every page, make a hyperlink for going back to home page.

4. Write a HTML code to print the following lines in same

manners:

In Mathematics, a quadratic equation is a polynomial equation of

the second degree. The general form is
ax2+bx+c=0
Where != 0 (For if a=0, the equation becomes a linear equation)

"CHEMICAL EQUATION"

4H3PO3 = 3H3PO4+PH3
and other expression as
Pnew= Pold + X2-Yacosx

5. Create a nested list as follows:

Computer System

1. Input Devices

i. Keyboard

ii. Mouse

iii. Joystic

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 following parts:

Insert an image of computer on top right corner of web page

Display a marquee displaying “Input and Output Devices”

Use different font styles and colors for Input and Output
Devices

Insert horizontal line after Input Devices are over

Use bold, italics and underline in headings

6. Create a HTML webpage which display the following list.

FRUITS & VEGETABLES

A. Vegetables

• Onion

• Tomato

• Radish

• Potato

• Carrot

B. Fruits

• Apple

• Banana

• Water-Melon

• Mango

• Grapes

Newspaper & Magazine

o Newspaper

5. The Times of India

6. Hindustan Times

7. Navbharat Times
 8. Punjab Kesari

9. DainikJagran

o Magazine

i. Business Times

ii. The Week

iii. India Today

iv. Harvard Business Review

v. Computer World

Apply following parts:

Put horizontal line after newspaper and magazine

Apply heading tag for newspaper and magazine

Apply base font for whole web page and different colors for
subjects of each semester

Apply a background color

Insert marquee tag displaying “Newspapers and Magazines”

7. Design tables as follows:

Roll Name Course Marks

no
1 Ajay BBA 78
Kumar
2 Kavita BCA 62
Sharma
3 RohitGarg BBA CAM 87
4 PoojaKapo BBA 67
or
5 Mohit BBA CAM 72
Gupta

8. Create following table:

Marks
Internal External Total
12
abc BBA 20 60 80
3
78
xyz BCA 15 65 80
9
9. Design tables as follows:

IP University Courses
Graduate Post Graduate
BB
BCA B. Tech MBA MCA M. Tech
A

240 120 100 200 100 80

10. Design following frame:

PRODUCTS
Mobile Phone Shoes Pen DriveShirt

Description (Product code,

Image Name, Brand, Price, Color,
Discount, Offer/Scheme etc.)

Mobile phone, shoes, Pen drive, Shirt will be hyperlinks. If user

clicks on any item, its picture and details about the
productshould be displayed in frame 3.

11. Design following frame:

MAIN MENU Explanation

-----------
Lists -----------
Tables View Example
Frames Example

12. Design following HTML form:

13 Design a student registration form.

14. Design a Login form for mailing account in HTML.
 EXPERIMENT 1
Ques. Create a HTML file for displaying a webpage with following tags. The file should contain a
brief description about all these tags:

a) Bold
b) Italics
c) Underline
d) Alignment
e) Paragraph
f) Text color
g) Headings
h) Hr
i) Background Color
j) Line Break
k) Pre

THEORY
HTML-The <html> tag tells the browser that this is an HTML document.

HEAD-The <head> element can include a title for the document, scripts,
styles, meta information, and more.

TITLE-The <title> tag is required in all HTML documents and it defines the
title of the document.

BODY-The <body> tag defines the document's body. The <body> element
contains all the contents of an HTML document, such as text, hyperlinks,
images, tables, lists, etc.

BOLD-The <b> tag specifies bold text without any extra importance.

ITALICS-The <i> tag defines a part of text in an alternate voice or mood. The
content of the <i> tag is usually displayed in italic.

UNDERLINE-The <u> tag represents some text that should be stylistically

different from normal text, such as misspelled words or proper nouns in
Chinese.

ALIGNMENT-The <center> tag is used to center-align text.

PARAGRAPH-The <p> tag defines a paragraph.

FONT-The <font> tag specifies the font face, font size, and color of text.
HEADINGS-The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important
heading.

HR-The <hr> tag defines a thematic break in an HTML page.

LINE BREAK-The <br> tag inserts a single line break.

PRE-The <pre> tag defines preformatted text.

HTML CODING
<html>

<head><title>HTML TUTORIALS</title>

</head>

<body bgcolor=lightpink><pre>

<b>The HTML "b" tag is used to create a 'b' element, which represents bold text in an HTML
document</b>

<br>

<i>The "i" tag is used to italicise the text.</i>

<br>

<u>To underline a text in HTML, use the "u" tag.</u>

<br>

<p>The HTML "p" element represents a paragraph. Paragraphs are usually represented in visual
media as blocks of text separated from adjacent blocks by blank lines and/or first-line
indentation.</p>

<p> But HTML paragraphs can be any structural grouping of related content, such as images or form
fields.<p/>

<center>The "center" tag or alignment attribute in HTML is used to set the align of text into the
center. </center>

<br>

<font color=blue>The color attribute specifies the color of the text inside a "font" element.</font>

<br>

<H1>The HTML h1 tag represents a level 1 heading in an HTML document.h1 has the highest
rank</h1>

<br><h2>This is H2 heading.</h2>
<br><h3>This is H3 heading.</h3>

<br><h4>This is H4 heading.</h4>

<br><h5>This is H5 heading.</h5>

<br><h6>This is H6 heading.</h6>

<br>

<p>The bgcolor attribute in HTML is used to set a background color for an HTML page.</p>

<br>

<p>A line break ends the line you are currently on and resumes on the next line.</p>

</pre>

<hr>The "HR" tag represents a horizontal rule. The above line is created using a "HR" tag.

<br>

<p><pre>The "pre" tag in HTML is used to define the block of preformatted text which preserves the
text spaces, line breaks, tabs, and other formatting characters which are ignored by web
browsers.</pre></body> </html>

OUTPUT
 EXPERIMENT 2
QUES. Design a webpage of your CV with headings as objective, educational
qualification, achievements, strengths, hobbies and personal details. Apply
following specifications: Insert a horizontal line after every above mentioned
heading. Set any light color as page background. Bold and underline every
heading. Insert your image on the left side of your webpage. Use heading tag to
specify your heading. After every heading is over put a horizontal line. Use pre
tag for educational qualification. Use base font for all the text.

Theory:
Image Tag: The “img” tag defines an image in an HTML page.
Base Font Tag: With the help of the “base font” tag you can set the default value of the font in your
webpage.

HTML CODING
<html>

<head><title>MY CV</title>

</head>

<body bgcolor=lightgreen><font size=25>

<h1> Curriculum Vitae</h1>

<hr><U><B><I><h3>Objective</U></B></I></h3>

I want to become a successful entreprenure in the most reputed Multinational Company.<hr>

<pre><u><i><b><h3>Educational Qualification</u></i></b></h3>

Passed SSC with 90 percentile.

<br>Passed AISSCE with 90 percentile.<hr></pre>

<u><i><b><h3>Achievements</b></i></u></h3>

I took part in International Yoga Day several times.

<br>I have taken part in activites like nukar natak and inter school acting competitions.

<hr><u><i><b><h3>Strengths</u></i></b></h3>

I am dedicated to my goals and career.

<br>I can be a good leader.

<hr><h3><u><i><b>Hobbies</u></i></b></h3>

I like to read.
<br>I like travelling and exploring new places.

<hr><u><i><b><h3>Personal Details</u></i></b></h3>

Name: Nishita

<br>D.O.B.: 11/04/2001

<br>Email id: [email protected]

<br>Address: New Delhi

</font>

</body>

</html>

OUTOUT
 EXPERIMENT 3
Ques. Design a website with the name as HTML tutorial with following
specifications:
Make following hyperlinks (i.e. 5 different web pages);
Formatting Styles and Headings: Include Bold, Italics, Underline, Strike,
Subscript, Superscript and all six types of headings.
Font Styles and Images: Font and Basefont tag, Image tag.
Anchor Tag: internal (linking within page) and external (linking with other
documents) links.
Marquee: Move text, image, hyperlink. Other tags: br, hr, pre, p

THEORY
STRIKE: This tag is used to strike the given text.
SUBSCRIPT: This tag prints a letter, figure or symbol below the line.
SUPERSCRIPT: This tag prints a letter, figure or symbol above the line.
ANCHOR: The “a” tag defines a hyperlink, which is used to link from one page to another.
MARQUEE: The “marquee” tag defines a scrolling text area in HTML document that moves
across the page in a horizontal or vertical direction.
BR: The HTML ”br” element defines a line break.

CODING
WEBPAGE 1
<html>

<head> <title>webpage 1</title> </head>

<body bgcolor=pink font color=blue size=25>

<a href="Webpage 2.html"><marquee>Webpage 2</marquee></a>

<br><a href="Webpage 3.html"><marquee direction=right>Webpage 3</marquee></a>

<a href="Webpage 4.html">Webpage 4</a>

<br><p><b><u><i>HTML is the standard markup language for Web pages.</i></u></b></p>

<br><FONT COLOR="RED" FACE="Imprint MT Shadow">With HTML you can create your own
Website.</FONT>
<br><marquee>HTML is easy to learn.</marquee>

<S>STRIKE</S><BR> <STRIKE>STRIKE 2</STRIKE>

<br><h1> H1</H1> <BR><H2>H2</H2>

<BR><H3>H3</H3> <BR><H4>H4</H4>

<BR><H5>H5</H5> <BR><H6>H6</H6><br>

<p>H₂O</p> <p>HTML^testing</p>

<br><marquee><img src="COMPUTER IMAGE.jpg"></marquee>

</body> </html>
OUTPUT
WEBPAGE 2
<html>

<head> <title>webpage 2</title> </head>

<body bgcolor=yellow font color=red>

<a href="webpage1.html">Webpage 1</a><br>

<a href="Webpage 3.html">Webpage 3</a><br>

<a href="Webpage 4.html">Webpage 4</a><br>

<a href="Webpage 5.html">Webpage 5</a><br>

This is webpage 2.

</body> </html>
WEBPAGE 3
<html>

<head><title>webpage 3</title>

</head>

<body bgcolor=aqua font color=brown size=25>

<a href="Webpage1.html">Webpage 1</a><br>

<a href="Webpage 2.html">Webpage 2</a><br>

<a href="Webpage 4.html">Webpage 4</a><br>

<a href="Webpage 5.html">Webpage 5</a>

<br>This is webpage 3.

</body>

</html>

WEBPAGE 4
<html>

<head> <title>Webpage 4</title> </head>

<body>

<a href="webpage1.html">Webpage 1</a><br>

<a href="Webpage 2.html">Webpage 2</a><br>

<a href="Webpage 3.html">Webpage 3</a><br>

<a href="Webpage 5.html">Webpage 5</a><br>

This is webpage 4.

</body> </html>

WEBPAGE 5
<html>

<head><title>Webpage 5</title>

</head>

<body>

<a href="webpage1.html">Webpage 1</a><br>

<a href="Webpage 2.html">Webpage 2</a><br>

<a href="Webpage 3.html">Webpage 3</a><br>

<a href="Webpage 4.html">Webpage 4</a><br>

This is webpage 5.

</body>

</html>
 EXPERIMENT 4
Ques. Write a HTML code to print the following lines in same manners.

INPUT
<html>

<head><title>Mathematical equation</title></head>

<body>

<p>In Mathematics, a quadratic equation is a polynomial equation of the second degree. The general
form is</p>

<br><center>ax2+bx+c=0</center>

<br>Where != 0 (For if a=0, the equation becomes a linear equation)

<br><hr>

<u>"CHEMICAL EQUATION"</U>

<BR><br>

4H₃PO₃ = 3H₃PO₄+PH₃

<br>and other expression as

<br>P_new= P_old + X²-Y^acosx

<br>

</body>

</html>
 OUTPUT

EXPERIMENT 5
Ques. Create a nested list as follows:
COMPUTER STSTEM
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 web page. Display a marquee display “Input
and Output Devices”. Use different font styles and color for Input and Output Devices. Insert
horizontal line after Input Devices are over. Use bold, italics and underline in headings.

Theory- ORDERED LIST- The “ol” tag defines an ordered list. An ordered list can be
numerical o alphabetical.
UNORDERED LIST- The “ul” tag defines an unordered (bulleted) list.
LIST ITEM- The “li” tag defines a list item.

CODING
<html>
<head> <title>HTML</title> </head>
<body bgcolor=aqua>
<H1>COMPUTER SYSTEM</H1>
<IMG SRC="COMPUTER IMAGE.JPG" ALIGN=TOPRIGHT>
<OL TYPE "1.">
<LI><B><U><I><font color="goldenrod"><marquee>INPUT
DEVICES</marquee></font></I></U></B></LI>
<ol type="i">
<li>KEYBOARD</li>
<li>MOUSE</li>
<li>JOYSTIC</li>
<li>SCANNER</li>
<OL TYPE="a">
<li>FLAT BED SCANNER</li>
<li>HAND HELD SCANNER</li> </ol> </ol>
<HR><li><U><B><I><marquee>OUTPUT DEVICES</marquee></I></B></U></li></ol>
<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>
</body>
</html>

EXPERIMENT 6

Ques. Create a HTML webpage which displays the following list.

THEORY
ORDERED LIST- The “ol” tag defines an ordered list. An ordered list can be numerical o
alphabetical.
UNORDERED LIST- The “ul” tag defines an unordered (bulleted) list.
LIST ITEM- The “li” tag defines a list item.

CODING
<html>

<body bgcolor="pink">

<h1 style="color:black;background-color:grey;">FRUITS AND VEGETABLES</H1>

<BASEFONT COLOR="RED" SIZE="15">

<OL TYPE="A">

<li>VEGATABLES</LI>

<ul type="disc">

<li>onion</li>

<li>tomato</li>

<li>radish</li>

<li>potato</li>

<li>carrot</li></ul>

<li>FRUITS</LI>

<UL TYPE="DISC">

<LI>apple</li>

<li>banana</li>

<li>water-melon</li>

<li>mango</li>

<li>grapes</li></ul> </ol><hr>

<h1 style="color:black;background-color:blue;"><marquee>NEWSPAPER AND

MAGAZINE</marquee></h1>

<basefont color="black" size="15">

<ul type="circle">

<li>NEWSPAPER</li>

<ol type="1" start="5">

<li>The Times of India</li>

<li>Hindustan Times</li>

<li>Navbharat Times</Li>
<li>Punjab Kesari</li>

<li>Dainik Jagran</li> </ol>

<li>MAGAZINE</li>

<ol type="i">

<li>Business Times</li>

<li>The week</li>

<li>India Today</li>

<li>Harvard Business Review</li>

<li>Computer World</li></ol>

</ul> <hr>

</body>

</html>

OUTPUT
 EXPERIMENT 7

Input
<HTML>

<HEAD><TITLE>Table 4</title>

</head>

<body>

<table border align="center">

<tr>

<th>Roll no. </th>

<th>Name</th>

<th>Course</th>

<th>Marks</th>

</tr>

<tr>

<td>1</td>

<td>Ajay Kumar</td>

<td>BBA</td>
<td>78</td>

</tr>

<tr>

<td>2</td>

<td>Kavita Sharma</td>

<td>BCA</td>

<td>62</td>

</tr>

<tr>

<td>3</td>

<td>Rohit Garg</td>

<td>BBA CAM </td>

<td>87</td>

</tr>

<tr>

<td>4</td>

<td>Pooja Kapoor</td>

<td>BBA</td>

<td>67</td>

</tr>

<tr>

<td>5</td>

<td>Mohit Gupta</td>

<td>BBA CAM</td>

<td>72</td>

</tr>

</table>

</body>

</html>
 Output

EXPERIMENT 8

QUES. Create the following table

INPUT
<html>

<head><title>table</title></head>

<body>

<table border=1>

<tr>

<td rowspan=2>Roll No.</td>

<td rowspan=2>Name</td>

<td rowspan=2>Course</td>
<td colspan=3>Marks</td>

</tr>

<tr>

<td>Internal</td>

<td>External</td>

<td>Total</td

</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>

<td>65</td>

<td>80</td>

</tr>

</table>

</body>

</html>
 OUTPUT

EXPERIMENT 9
QUES. Create the following table.

Input
<html>

<head><title>table</title></head>

<body>

<table border=1>

<tr>

<td colspan=9>IP University Courses</td>

</tr>
<tr>

<td colspan=3>Graduate</td>

<td colspan=3>Post Graduate</td>

</tr>

<tr>

<td>BBA</td>

<td>BCA</td>

<td>B. TECH</td>

<td>MBA</td>

<td>MCA</td>

<td>M. TECH</td>

</tr>

<tr>

<td>240</td>

<td>120</td>

<td>100</td>

<td>200</td>

<td>100</td>

<td>80</td>

</tr>

</table>

</body>

</html>
 Output

Experiment 10
Ques. Design the following frame

Input
 Experiment 11
Ques. Design the following frame

Input
<html>

<head><title>frame</title></head>

<frameset>

<frameset cols="*,*">

<frame src="frameA.html">

<frameset rows="60%,40%">

<frame src="frameB.html">

<frame src="frameC.html">

</frameset>

</frameset>

</frameset>

</html>

<html>

<head><title>frameA</title></head>

<body>

MAIN MENU

<br><u>Lists</u>

<br><u>Tables</u>

<br><u>Frames</u>
</body>

</html>

<html>

<head><title>frameB</title></head>

<body>

Explaination<br>

<hr style="border-top: dotted 3px;" />

<hr style="border-top: dotted 3px;" />

<br><u>View Example</u>

</body>

</html>

<html>

<head><title>frameC</title></head>

<body> Example

</body>

</html>

Output
 Experiment 12
Ques. Design the following form

Input
<html>

<head><title>frame</title></head>

<body>

<b>employee form</b>

<form>

name<input type=text name=yourname maxlenght=25><br>

designation

<select>

<option>manager</option>

<option>CEO</option>

<option>Superviser</option></select>

<br>Salary<input type=text maxlenght="7">

<br>Specialisation<input type="radio">IT<input type="radio">management

<br>hobbies<input type="checkbox">travelling <input type="checkbox">sports

<input type="checkbox">reading <input type="checkbox">net surfing

<br>address<textarea rows=5 cols=40>please enter the address</textarea>

<BR><input type="button" value="SUBMIT">

<BR><input type="button" value="RESET">

</form>

</body>

</html>

Output

Experiment 13
Ques. Design a student registration form.
 Input
<html>

<head><title> reg form</title>

</head>

<body>

<form name="StudentRegistration">

<table cellpadding="5" width="60%" bgcolor="aqua" align="center" cellspacing="2">

<tr>

<td colspan=2>

<center><font size=4><b>Registration Form</b></font></center>

</td>

</tr>

<tr>

<td>Name</td>

<td><input type=text name=textnames size="30"></td>

</tr>

<tr>
 <td>Father Name</td>

<td><input type="text" name="fathername" size="30"> </td>

</tr>

<tr>

<td>Postal Address</td>

<td><input type="text" size="30"></td>

</tr>

<tr>

<td>Personal Address</td>

<td><input type="text" size="30"></td>

</tr>

<tr>

<td>Sex</td>

<td><input type="radio" name="sex" value="male">Male

<input type="radio" name="sex" value="Female">Female</td>

</tr>

<tr>

<td>City</td>

<td><select name="City">

<option value="1">select...</option>

<option value="2">New delhi</option>

<option value="3">chennai</option>

<option value="4">mumbai</option>

<option value="5">kolkata</option>

</select></td>

</tr>

<tr>

<td>Course</td>

<td><select name="Course">

<option value="1">select...</option>

<option value="2">B.TECH</option>
 <option value="3">MCA</option>

<option value="4">MBA</option>

<option value="5">BCA</option>

</select></td>

</tr>

<tr>

<td>District</td>

<td><select name="District">

<option value="1">select...</option>

<option value="2">kutch</option>

<option value="3">bhojpur</option>

<option value="4">bilaspur</option>

<option value="5">hamirpur</option>

</select></td>

</tr>

<tr>

<td>State</td>

<td><select Name="State">

<option value="1">select...</option>

<option value="2">Gujrat</option>

<option value="3">Bihar<option>

<option value="4">Goa</option>

<option value="5">Kerala</option>

</select></td>

</tr>

<tr>

<td>PinCode</td>

<td><input type="text" name="pincode" size="30"></td>

</tr>

<tr>

<td>EmailId</td>
 <td><input type="text" name="emailid" size="30"></td>

</tr>

<tr>

<td>DOB</td>

<td><input type="text" name="dob" maxlength="10" size="30"></td>

</tr>

<tr>

<td>MobileNo</td>

<td><input type="text" name="mobileno" maxlength="13" size="30"></td>

</tr>

<tr>

<td><input type="reset"></td>

<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr> </table>

</form>

</body>

</html>

Output
 Experiment 14
Ques. Design a login form.

Input
<html>

<head><title>Login form</title></head>

<body>

<B><center>Login Form</center></b><br>

<form>

<center>

<table>

<tr>

<td>Username

</td>

<td><input type="text" maxlength="20" size="20">

</td>

</tr>

<tr>

<td><br>Password

</td>

<td><input type="password" maxlength="15" size="20">

</td>

</tr>

<tr>

<td><br><input type="submit" value="Login">

 </td>

<td>Not yet a member?<a href="reg form.html">Register</a>

</td>

</tr>

</table>

</center>

</form>

</body>

</html>

Output