Ecom Record Final

1.
Create a web page to display the following output: (use textboxes,

submit bu on)
Sol:
Steps:
Step 1 - Enter ‘Name:’ manually.
step 2 - Go to Insert —> form —> Textboxes.
step 3 - You Can See a textbox with submit & reset bu ons.
Step 4 - Select the Reset bu on & click on Delete in the keyboard
Step 5- then place the submit bu on below.
Step 6 - Enter "Address' manually.
Step 7 - Go to Insert —>form —> Textboxes.
Step 8 - click on Reset bu on & Press Delete.
Step 9 - click on Submit bu on & press Delete.
step 10 -The required form is displayed.
Code:
<html>
<head>
< tle>Program1/Forma ng Tags</ tle>
</head>
<body>
1
Name:<input type="text"><br> Address:<input type="text"><br>
<input type="submit" value="submit">
</body>
</html>
Output:
2
2. Create a web page to display the me table of your class using
tables.
Steps:
Step 1 - Open MS office front page 2003.
Step 2 - click on New → Blank document
Step 3 - Now to Create table Go to Toolbar and Select —> table-—> insert
→table
Step 4 - A table dialog box appears and Under Size and Rows increase the
Number to 7 and Columns also change the no. to 7.
Step 5 - Then choose if they want to give a border, Cell spacing, Cell
padding, Alignment etc..
Step 6 - then click on "OK".
Step 7 - Select each cell and Enter the data.
Step 8 - The table is required, is displayed.
step 9 - Go to Preview at the le Corner to See the output.
Step 10 - Go to Code at the le corner to see the html code.

Code:
<html>
<head>
< tle>Program11/Tables</ tle>
</head>
3
<body bgcolor="yellow">
<h1 align="center" style="color:blue"><u>TABLE</u></h1>
<table cellspacing="5" cellpadding="5" align="center" border="6"
width="500px" bgcolor="pink">
<tr>
<th>Time/Day</th>
<th>9:00-9:45</th>
<th>9:45-10:30</th>
<th>10:30-11:15</th>
<th>11:15-12:00</th>
<th>12:00-12:45</th>
<th>12:45-1:00</th>
<th>1:00-1:45</th>
<th>1:45-2:30</th>
</tr>
<tr>
<td>Monday</td>
<td>Business Law</td>
<td>Banking and theory</td>
<td>Prac se of Insurance</td>
<td>Excel Founda on</td>
<td rowspan="7" style="font-size:40px;">L<br>U<br>N<br>C<br>H</td>
<td>Web Technologies</td>
<td>Computer Accountancy</td>
4
</tr>
<tr>
<td>Tuesday</td>
</tr>
<tr>
<td>Wednsday</td>
</tr>
<tr>
<td>Monday</td>
5
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
6
</tr>
<tr>
<td>Saturday</td>
</tr>
</table>
</body>
</html>
Output:
7
3. Create a web page which accepts user input as shown below.
Steps:
Step 1: Open MS office front page 2003.
Step 2: Open a New Blank document.
Step 3: then Enter the required data i.e., Name, Address, state, City, Pin
code
Step 4: Place the Cursor near Name and go to Insert—>form—>
Textbox. & delete the Submit & reset bu ons.
Step 5: then place the Cursor near Address & Repeat the same
procedure.
Step 6: Then place the Cursor near slate & go to Insert → form →
Textbox
Step 7: Insert → form → Textboxes & Place it near City.
Step 8: Insert →form →Textboxes & Place it near Pin code.
Step 9: Insert→ form → Push bu on & place it in the centre.
Step 10: Go to Code near the le side Corner & Select it.
8
Code:
<html>
<head>
</head>
<body Align='center'>
Name:<input type="text"><br>
Address:<input type="text"><br>
State:<input type="text"><br>
City:<input type="text"><br>
Pincode:<input type="text"><br>
<input type="bu on" value="Place your
order"><br>
</body>
</html>
Output:
9
4. Create a web page to modify the default proper es of h1 tag using
internal style sheet.
Steps:
Step 1: Open MS office front page 2003.
Step 2: Open a New Blank document.
Step 3: then Enter the required H1 text
Step 4: Go to Code near the le side Corner & Select it.
Code:
<head>
<style>
h1
{
color:red;
font-family:algerian;
}
</style>
</head>
<body>
<h1><u>R.G.Kedia College of commerce</h1></u>
<p>Chaderghat</p>
</body>
</html>
10
Output:
11
5. Create a web page to display an ordered list of courses offered in your
college.
Steps:
Step 1- Open MS office front Page 2003 → Blank document.
Step 2 - Enter the Data i.e., Courses offered.
Step 3 - Then go to next line & choose numbering from the Tool Bar
Step 4 - Then Enter the Course and Press Enter then like that Enter how
many Courses does the College offer.
Step 5 Enter all courses and then save the data.
Code:
<head>
</head>
<body>
<h1>List of Courses Offered in our college</h1>
<ol type="1">
<li>Bcom Computers</li>
<li>Bcom General(E/M)</li>
<li>Bcom General(T/M)</li>
</ol>
</body>
</html>
12
Output:
13
6.Create a web page to display a table with 2 rows and 2 columns. Also
insert images in the cells of the table.
Steps:
Step 2 - select a Blank document
Step 3 - Go to Table → Insert → Table.
Step 4 - A Insert table dialog box appears.
Step 5 - choose rows of Columns as '2'.
Step 6 - Give any Cell padding, border, Cell Spacing etc. & click OK.
Step 7- then select a Single Cell and Go to Insert → picture → from file.
Step 8 - Repeat this Step to all the cells so that there is an image in all the
Cells.
Step 9- the table is visible in preview mode.
Code:
<html>
<center><head>Check It Down</head></center>
<body>
<table border = 5 bordercolor = red align = center>
<th colspan = 14>Book Table</th>
<tr>
<th colspan = 4>Book Name</th>
<th colspan = 4>Author</th>
<th colspan = 4>Picture</th>
</tr>
<tr>
14
<td colspan = 4>Java</th>
<td colspan = 4>Dietel and Dietel</th>
<td colspan = 4><img src="java.jpg" alt="" border=3 height=100
width=100></img></td>
</tr>
<tr>
<td colspan = 4>C Programming</td>
<td colspan = 4>BalaGuru Swamy</td>
<td colspan = 4><img src="cprg.jpg" alt="" border=3 height=100
width=100></img></td>
</tr>
</table>
</body>
<html>
Output:
15
7. Create a web page to display a hyperlink which when clicked
directs you to Amazon website.
Steps:
step 2 - Select a Blank document.
Step 3 - Go to insert hyperlink
step 4 - A hyperlink dialog box appears → Exis ng file or webpage.
step 5 - choose Browsed pages → Select amazon. in page.
Step 6 - Then click on òk'. The link is displayed in the page
Code:
<head>
</head>
<body>
<a href="h ps://www.amazon.com/">Link to Amazon from Here...</a>
</body>
Output:
16
8.Create a web page to demonstrate various marquee effects over a
given text.
Steps:
Step 1 - Open MS office front page 2003
Step 2 - Select Blank document.
Step 3 - Go to Insert → Web Component → Dynamic Effects → Marquee.
Step 4 - A Marquee proper es dialog box appears.
Step 5 - Enter the Text which you want to Marquee and select the
Direc on as "Le "
Step 6 - Select Behaviour as "scroll" & click on OK
Code:
<head>
</head>
<body>
<marquee direc on="right">R.G.Kedia College</marquee></br>
<marquee direc on="le ">R.G.Kedia College</marquee></br>
<marquee direc on="up">R.G.Kedia College</marquee></br>
<marquee direc on="down" >R.G.Kedia College</marquee>
</body>
17
Output:
18
9.Create a web page to display the following output (take your own
data into considera on)
Steps:
Step 1 - Open MS office front Page 2003.
Step 2 -Select Blank document.
Step 3 – Go to Table → Insert → Table.
Step 4 - A Table proper es dialog box appears enter 2 rows & 2 Columns.
Step 5 - Select the Upper Row & click on Merge Celle Under Table Op on.
Step 6 - Select the top new & Enter the tle as "Flower".
Step 7- select the below Cell & Enter "It is beau ful & a Great Crea on of
tot God into the nature."
Step 8 - Select the next Cell & insert image of a flower.
Step 9 - The req. table is displayed
Code:
<html>
<head>
</head>
<table border="2">
<tr>
<td colspan="2"><center>Desert Image</center></td>
</tr>
<tr>
<td>This webpage displaying desert image</td>
<td><img src="C:\Users\Public\Pictures\Sample Pictures\desert.jpg"
height="50"></td>
19
</tr>
</table>
</body>
</html>
Output:
20
10.Create a web page to display the following output: (a+b)2 =a2
+2ab+b2 H2SO4
Steps:
Step 3 - Enter the formula (a+b)² = a²+2ab+b²
Step 4 - Select '2' and Right click → font → checkbox near Superscript.
Step 5 - Repeat it for the whole formula.
Step 6 - Enter the formula H₂ So4.
Step 7 -Select "2" & Right click → font → checkbox near Subscript.
Step 8 - Select "4” & repeat the same process.
Step 9 - The formula is obtained.
Code:
<html>
<head>
</head>
<body>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br>
H<sub>2</sub>SO<sub>4</sub>
</body>
</html>
21
Output:
22
11. Create a web page to demonstrate the usage of nested tables as
shown in the diagram below:
Steps:
Step 3 Table Insert Table. -
Step 4 - Table proper es dialog box appears choose 2 rows & 2 Columns.
Step 5 - Select a first cell & Second & Merge Cells
Step 6 - Select the Merged Cell and go to Table → Insert → Table
Step 7 - Select 2 rows & 2 Columns. Repeat the Same process for the
other Cell.
Step 8 - Enter the data into the cells.
Code:
<html>
<head>
</head>
<body>
<table border=2>
<tr>
<td>
<table border=2>
<tr>
<td>Rubber</td>
23
<td>Baby</td>
</tr>
<tr>
<td>Buggy</td>
<td>Bumpers</td>
</tr>
</table>
</td>
<td>
<table border=2>
<tr>
<td>She</td>
<td>sells</td>
</tr>
<tr>
<td>sea</td>
<td>shells</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
24
Output:
25
12.Create a web page which acts as a home page where your college
name is properly aligned with the logo of your college followed by
address and contact details at the center of the page.
Steps:
Step 1 - Open MS office front page 2003
Step 2 - Select a Blank document.
Step 3 - click on Insert→ Picture → from file →choose college logo
Step 4 - Place the Cursor Beside the image and enter "R.G. Kedia College
Of Commerce"
Step 5 - Go to the next line & place the Cursor in the Center then type the
"Address" of College.
Step 6 - then next line enter the details of Contact and choose Center
alignment.
Step 7 - A Home page of our college is created.
Code:
<html>
<head>
</head>
<body>
<div><center><p><font size=50 color="blue">R.G.KEDIA COLLEGE OF
COMMERCE</font>
</p></div>
<p><center>No 3-1-336, Opp.Chaderghat New Bridge, Kachiguda Sta on
Road,Esamia Bazar, Hyderabad,
Telangana 500027</p>
26
<p>Phone: +91 40 24738708, 24738939.
Fax: +91 40-24738708
Email: rgkediacollege@gmail.com
</body>
</html>
Output:
27
13.Create a web page to demonstrate defini on lists by taking various
applica ons of ecommerce as an example.
Steps:
Step 1- Open MS Office front page 2003.
Step 3 - Enter "Applica ons of Ecommerce":"
Slept - Go to toolbar and select Textbox and Enter the applica ons of
Ecommerce.
Step 5 - All the Applica ons can be entered by pressing Enter.
Code:
<html>
<head>
</head>
<body>
<dl>
<dt>E-Banking
<dd>also known as online banking
<dt>E-Adver sement
<dd>also known as online Adver sement
<dt>E-Shooping
<dd>also known as online shopping
<dt>E-Marke ng
<dd>also known as online marke ng
<dt>E-Entertainment
28
<dd>also known as online Entertainment
</dl>
</body>
</html>
Output:
29
14.Create a web page to display a bulleted list of subjects available in
the current semester.
Steps:
Step 1- Open MS Office front page 2003.
Step 3 - Enter "Subjects Available in 6th Semester"
Slept - Go to toolbar and select Bullets and Enter the Subjects.
Step 5 - All the Subjects can be entered by pressing Enter.
Code:
<html>
<head>
</head>
<body>
<ul type="disc">
<li>Prac ce of General Insurance</li>
<li>Sector of Indian Econamy</li>
<li>G.S.T</li>
<li>Company Law</li>
<li>Managerial Accoun ng</li>
<li>Commerce Lab</li>
<li>E-commerce</li>
<li>RDBMS</li>
</ul>
30
</body>
</html>
Output:
31
15.Create a web page to give scrolling effect of an image (preferably
your college logo).
Steps:
Step 1 - Open MS office front page 2003 → Blank document.
step 2- Go to Insert → Web Component → Marquee
Step 3 - A Marquee proper es dialog box appears then in place of text
enter "<img src="College.jpg">
Step 4 - Then choose the direc on, Behaviour of color etc.
step 5- then click on 'ok'.
Code:
<html>
<head>
</head>
<body>
<marquee><img src="E:\User\college photo.jpg"
height="100"></marquee>
</body>
</html>
32
Output:
33
16.Create a web page to display a bu on which when clicked directs you
to your college website.
Steps:
Step 2 - Go to Insert → form → Push bu on ->
Step 3 - Three bu ons Named - Bu on, Submit, Reset are displayed.
Step 4 - Delete 2 of them & Double click one for the bu on dialog box
step 5 - choose the text as “R.G.Kedia College of Commerce".
Step 6 - Then right click on the bu on & Select hyperlink.
Step 7- Select the college website from Choose websites Op on.
Step 8 - the hyperlink is linked.
Code:
<html>
<head>
</head>
<body>
<p align='le '>Click on the bu on to redirect to R.G Kedia College of
Commerce website</p>
<bu on align='center' tle="bt" class="c"
onclick="h ps://www.rgkediacollege.com");return
false;">Click here </bu on>
</body>
</html>
34
Output:
35
17.Create a web page to display various courses in your college. The
courses should be separated by a horizontal ruler of varying sizes and
colors.
Steps:
Step 1 - Open MS office front Page 2003 → Blank document.
Step 2 - Enter the data like "Courses' then next line 'B. Com (Computers)'
then 'B.Com (General)' then 'BBA' last 'B.Sc.
Step 3 - Go to Courses & Below that place the Cursor & Select Insert
Horizontal Line.
Step 4 - To make changes in horizontal line double click on the line &
change its size & Color.
Step 5 - The req. program is there.
Code:
<html>
<head>
</head>
<body>
<p>Prac ce of General Insurance</p>
<hr color="red" size="2">
<p>Sector of Indian Economics</p>
<hr color="blue" size="3">
<p>G.S.T</p>
<hr color="pink" size="1">
<p>Company Law</p>
<hr color="green" size="3">
<p>Managerial Accoun ng</p>
36
<hr color="orange" size="4">
<p>Commerce Lab</p>
<hr color="yelow" size="1">
<p>E-commerce</p>
<hr color="meroon" size="2">
<p>RDBMS</p>
</ul>
</body>
</html>
Output:
37
18.Create a web page to display four horizontal frames each frame
containing a different color.
Steps:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Define the CSS styles for the colored blocks */
.color-block {
width: 100%;
height: 100px;
display: inline-block;
}
#block1 { background-color: red; }

#block2 { background-color: blue; }
#block3 { background-color: green; }
#block4 { background-color: yellow; }
</style>
</head>
<body>
<div class="color-block" id="block1"></div>
38
</body>
</html>
Output:
39
19.Create a web page to display four ver cal frames each frame
containing a different color.
Steps:
Step 1 - Open MS office front Page 2003 → Blank document
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-
scale=1.0">
< tle>Ver cal Frames</ tle>
<style>
.frame {
width: 25%;
height: 100vh;
float: le ;
box-sizing: border-box;
}
#frame1 { background-color: red; }

#frame2 { background-color: blue; }
#frame3 { background-color: green; }
#frame4 { background-color: yellow; }
body { margin: 0; }
40
</style>
</head>
<body>
<div class="frame" id="frame1"></div>
</body>
</html>
Output:
41
20. Create a web page to display a bu on with label “search” adjacent
to a text box. Also change the color of text box and background of the
web page.
Steps:
Step 1 - Open MS office front page 2003 → Blank document-
Step 2 - Go to Insert → form →Text box.
Step 3 - A textbox with 2 bu ons will appear.
Steph - Delete one bu on from it & Rename one of it as Search by double
clicking on it. as
Step 5 - Now Select the Textbox & choose color op on in the toolbar and
apply it.
Step 6 - Now Right click on any place in page and chose page proper es
Step 7 - A dialog box appears and choose forma ng Op on & Under
Colors choose a Color as a background.
Step 8 - then click on "ok".
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Define CSS styles for the text box and bu on */
body {
background-color: #e00; /* Change the background color of the
page */
}
42
#search-container {
text-align: center;
margin-top: 100px; /* Adjust the margin to center the container */
}
input[type="text"] {
width: 200px;
padding: 10px;
background-color: #FFFDD0; /* Change the background color of
the text box */
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #3498db; /* Change the background color of the
bu on */
color: Gray;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="search-container">
43
<input type="text" placeholder="Enter your search" id="search-box">
<input type="submit" value="Search" id="search-bu on">
</div>
</body>
</html>
Output:
44
21. Create a web page to display a table containing 2 rows and 2
columns which contains the names of your friends and each cell filled
with different background colors.
Steps:
step 1- Open MS Office front page 2003 →Blank document
step 2- Go to table-Insert →Table.
Step 3 - A Table proper es dialog box appears → choose 2 rows & 2
Columns.
Step 4 - Enter Names into the cell
Step 5 - Select a Cell & Right click and click on Cell proper es → Choose a
Color
Step 6 - Repeat it for all the Cells and the required table is here.
Code:
<html>
<head>
<style>
/* Define CSS styles for the table and cells */
table {
width: 50%;
border-collapse: collapse;
margin: 50px auto; /* Center the table on the page */
}
th, td {
border: 1px solid #000;
padding: 10px;
45
text-align: center;
}
th {
background-color: #3498db; /* Background color for table headers
*/
color: white;
}
td:nth-child(odd) {
background-color: #f5f5f5; /* Background color for odd cells */
}
td:nth-child(even) {
background-color: #e0e0e0; /* Background color for even cells */
}
</style>
</head>
<body>
<table>
<tr>
<th>Friend Name</th>
<th>Background Color</th>
</tr>
<tr>
<td>Alice</td>
<td>Cell 1</td>
</tr>
46
<tr>
<td>Bob</td>
<td>Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
47
22. Create a web page to demonstrate the usage of rowspan and
colspan for the figure below:
Steps:
Step 1 - Open NS office front Page 2003 → Blank document.
Step 2 -Go to table. → Insert Table
Step 3 - A table proper es dialog box appears Select 4 Rows & 3 Columns
& then Òk'.
Step 4 - Select the top Row & Go to table → Merge cells
Step 5 - Select the bo om Row & Go to table → Merge Cells
Step 6 -Select the 1st Column from 2nd & 3rd row & Merge Cells
Step 7 - Select the last Column from 2nd & 3rd row & Merge Cells.
Step 8 - The required table is displayed.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
48
</style>
</head>
<body>
<center>
<h1><u>Demo on rowspan and colspan</u></h1>
<table>
<tr>
<th colspan="3" style="text-align:center">Top</th>
</tr>
<tr>
<td rowspan="2">Middle Le </td>
<td>Middle Up</td>
<td rowspan="2">Middle Right</td>
</tr>
<tr>
<td>Middle Down</td>
</tr>
<tr>
<th colspan="3" style="text-align:center">Down</th>
</tr>
</table>
</body>
</html>
49
Output:
50
23.Create a web page which asks for mode of payment which includes
the op ons: Credit
card/Debit card/Online transfer (use radio bu ons)
Steps:
Step1 - Open MS office front page 2003 → Blank document.
Step 2 - Enter Mode of payment:' and press Enter
Step 3 - Go to Insert → form. →Op on bu on.
Step 4 - Beside the Op on bu on Enter 'Credit Card'
Step 5 - Repeat the Same Process for ‘Debit Card' & 'online transfer’
Step 6 - The Rodio bu ons should not be selected.
Code:
<html>
<head>
</head>
<body>
<form ac on="paymentpage.php">
Mode of Payment: Credit card<input type="radio"
name="payment"> Debit card<input
type="radio" name="payment"> Online Transfer<input
type="radio" name="payment">
</form>
</body>
</html>
51
Output:
52
24.Create a web page which asks the user to enter his credit card details.
Use textboxes, drop down bu ons.
Steps:
Step 1- Open MS office front Page 2003 → Blank document.000
Step 2 - Put the Cursor in centre and go to Insert → Picture → from file..
Step 3 - Align 3 such images which will be in any online payment portal
Step 4 - Then Enter Card Number & Go to insert →form → textboxes
Step 5- Enter Expira on Date & Go to insert → form → Dropdown - -
Step 6 - Enter first Name & Go to insert → form →Textbox
Step 7 - Enter Last Name & Go to insert → form → Textbox
Step 8 - Go to insert → form → Push bu ons.
Step 9 - The required form is obtained.
Code:
<html>
<head>
</head>
<body>
<form>
Enter your card details<br>
<br>
Enter card number:<input type="text" name="cn"><br>
<br>
Expiry date:
53
<select>
<op on>Select Month</op on>
<op on>1</op on>
<op on>2</op on>
<op on>3</op on>
<op on>4</op on>
<op on>5</op on>
<op on>..</op on>
<op on>..</op on>
<op on>12</op on>
</select>
<select>
<op on>Select year</op on>
<op on>2019</op on>
<op on>2020</op on>
<op on>2021</op on>
<op on>2022</op on>
<op on>2023</op on>
<op on>2024</op on>
</select><br>
<br>
Enter cvv number:<input type="text" name="cn"><br><br>
<input type="submit" value="submit">
</form>
</body>
54
</html>
Output:
55
25.Create a web page to generate a purchase order as shown below:
Steps:
Step 2 - Enter ‘Name:' Go to insert → form → text box.
Step 3 - Enter "Address: Go to insert→ form textbox.
Step4 - Enter 'state' Go to insert → form → textbox. ·
Step 5 - Enter 'City:' Go to insert → form → textbox.
Step 6 -Enter ‘Pin code:’ Go to insert → form → textbox.
Step 7 - Enter "Magazine:" Go to insert → form →→ Drop down.
Step 8 - Enter ‘Subscrip on:' to to insert →form → Radio bu on
Step 9 - Go to insert → Push bu on.
Step 10 - The form is created.
Code:
<html>
<head>
</head>
<body>
<form ac on="paymentpage.php">
56
Name:<input type="text" name="name"><br><br>
Address:<input type="text" name="adrs"><br><br>
State:<input type="text" name="st"><br><br>
Pincode:<input type="text" name="pin"><br><br>
Magzine:<input type="text" name="num"><br><br>
Subscrip on:<input type="radio" name="sb">1 Year <input
type="radio" name="sb"> 2 year<br><br>
<input type="submit" name="sb" value="Place Your Order">
</form>
</body>
</html>
Output:
57
26.Create a web page to display a hyperlink which when clicked displays
excel sheet containing student details.
Steps:
step 2 - Go to insert → Hyperlink→ Hyperlink dialog box appears
Step 3 – Choose 'Exis ng file or web page then choose Recent files
Step 4 - from Recent files choose student file.
Step 5 - Then click on "OK".
Code:
<html>
<head>
</head>
<body>
<a href="D:\sdetails.xlsx">Get student detais in excel sheet</a>
</body>
</html>
Output:
58
27.Create a web page to display defini on list which defines the terms:
B2B, B2C, C2B, C2C.
Steps:
Code:
<html>
<head>
</head>
<body>
<body>
<dl>
<dt>B2B
<dd>Business to Business
<dt>B2C
<dd>Business to Consumer
<dt>C2B
<dd>Consumer to Business
<dt>C2C
<dd>Consumer to Consumer
</dl>
</body>
</html>
59
Output:
60
28.Create a web page with paragraphs le , right and centre aligned to
explain about various social networking sites. The paragraphs should be
on different colours and separated by horizontal lines of varying sizes.
Steps:
Step 2 - Enter the data of a par cular site.
Step 3 - choose the le alignment given in the toolbar ·
Step 4 - Select the paragraph and apply Color.
Step 5 - Go to insert → Horizontal line.
Step 6 - Enter the date → choose Center alignment → Apply Color to it.
Step 7 - Go to insert → Horizontal line → width="5"
Step 8 - Enter the data → choose right alignment → Apply Color.
Step 9 - Go to insert → Horizontal line → width="6".
Code:
<html>
<head>
</head>
<body>
<p align="le " style="color:red" >This paragraph is explaining about
Facebook
This paragraph is explaining about Facebook
This paragraph is explaining about Facebook</p>
<hr size="3">
61
<p align="center" style="color:blue">This paragraph is explaining about
Twi er
This paragraph is explaining about Twi er
This paragraph is explaining about Twi er</p>
<hr size="4">
<p align="right" style="color:green">This paragraph is explaining about
Linked in This paragraph is
explaining about Linked in
This paragraph is explaining about Linked in</p>
</body>
</html>
Output:
62
29.Create a web page which displays four bu ons containing text B2B,
B2C, C2B, C2C. Also when a bu on is clicked details about the clicked
subject should appear on a separate page.
Steps:
Step 1. Open MS office front page 2003 → Blank document. -
Step 2 - Go to insert → form → Push bu ons
Step 3 - Double click on one of them → A dialog box appears.
Step 4 - Name it as `B2 B' & click okay.
Step 5 - Double click on the next one → Name it as ‘B2C’ & Press "OK"
Step 6 - Double click on the fast one → Name it as ‘C2B’ & Press “Ok”
Step 7 - Insert → form →Push bu ons → Delete 2 and bring it to the first
line.
Step 8 - Double click on it → Dialog box appears → Name it as 'c2c' &
Press 'ok'.
Step 9- The required bu ons Containing text is obtained.
Step 10. - Right click on the bu ers → hyperlink - cheese the webpage
Consis ng of their informa on.
Code:
<html>
<head>
</head>
<body>
63
<bu on tle="bt" class="c" onclick="window.open('E:\Hari\Ecom-
19\b2b.html','_blank');return
false;">B2B</bu on>
19\b2c.html','_blank');return
false;">B2C</bu on>
19\c2b.html','_blank');return
false;">C2B</bu on>
19\c2c.html','_blank');return
false;">C2C</bu on>
</body>
</html>
Output:
64
30.Create a web page to modify the default proper es of h1 tag using
external style sheet.
Steps:
Step 1. Open MS office front page 2003 → Blank document. -
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS styles for the h1 tag */
h1 {
font-size: 36px;
color: #FF5733;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a modified H1 heading.</h1>
<p>Some text in the HTML document.</p>
</body>
</html>
65
Output:
66
31. Create a web page to scroll the text “E-Commerce” for exactly 5
mes from le to right of the screen.
Steps:
Step 1 - Open MS office front Page → Blank document
Step 2 - Insert → web component → Marquee.
Step 3 - A Marquee dialog box appears.
Step 4 - Enter E-Commerce' in 'text' → Direc on: Right → Speed →
Amount: 5 → Behaviour: Scroll.
Step 5 - choose a background Color and then Press 'OK'.
Code:
<html>
<head>
</head>
<body>
<body>
<marquee direc on="right" loop="3">E-Commerce</marquee>
</body>
</html>
67
Output:
68
32.Create a web page to insert an image which when clicked redirects
you to your college website
Steps:
step 1 - Open MS office front page 2003 → Blank document.
step 2 - Go to insert → Picture → from file
Step 3 - Right click on the Picture → Hyperlink.
Step 4 - Hyperlink dialog box appears → choose college website.
Step 5 - Press 'OK'. A hyperlink is treated.
Code:
<!DOCTYPE html>
<html>
<head>
< tle>College Website Link</ tle>
</head>
<body>
<h1>Welcome to My College</h1>
<p>Click the image below to visit our college's website:</p>
<a href=" h ps://www.rgkediacollege.com " target="_blank">
<img src=" "C:\Users\User\Downloads\college logo.png" "
alt="College Logo" style="cursor: pointer;">
</a>
</body>
</html>
69
Output:
70
33. Create a web page to display the name of your college in h6 size with
blue as font color and background color yellow separated by a thick line
and below which a paragraph about the facili es offered by your college
is described.
Steps:
Step 1 - Open MS office front page 2003 → Blank Document
Step 2 - Enter your College name → Select it and change its sixe to '8',
color as
blue & background Color as yellow.
Step 3 - Press enter and go to insert → horizontal line with a width of "7".
Step 4 - Below that Enter the date / facili es available in College.
Step 5 - Save the file.
Code:
<html>
<head>
</head>
<body>
<h6 style="color:blue;background-color:yellow">R.G.kedia College</h6>
<hr size="6">
<p>This college is providing many facili es to students like..<br>
Computer Lab<br>
Library<br>
Commerce Lab<br>
Filter water
Games<br>
71
Seminar hall<br>
</p>
</html>
Output:
72
34. Create a web page with OSMANIA UNIVERSITY as the tle and five
bu ons labelled Home, About Us, Courses, feedback, contact us as
shown in the diagram which when clicked displays the details on a
separate page.
Steps:
Step 1 - Open MS office frontpage 2003 → Blank document.
step 2 - Place the Cursor in the Middle & Enter "Osmania University &
Press Enter.
Step 3 - Then Enter, "Telangana, Hyderabad".
Step 4 - Go to insert → form →push bu ons.
Step 5 - Double click on theme and change the value of them as – Home,
About Us, Courses, feedback, Contact Us.
Step 6 - Right click on the bu ons & choose hyperlink → Insert a page
Step 7 - Press 'ok'.
Code:
<html>
<head>
</head>
<body>
19\Home.html','_blank');return
false;">Home</bu on>
<input type="bu on" value="About us"
onclick="window.open('E:\Hari\Ecom-19\About us.html')">
73
false;">Courses</bu on>
<input type="bu on" value="Feedback"
onclick="window.open('E:\Hari\Ecom-19\About us.html')">
false;">Contact Us</bu on>
</body>
</html>
Output:
74
35.Create a web page to demonstrate a pull-down menu. The menu
should contain the list of your favourite south Indian dishes.
Steps:
Step 2 Enter 'My favourites &. Go to insert → form → Drop down
Step 3 - A drop down dialog box appears click on Add and Enter your
choices
Step 4 - choose selected / Not Selected → OK.
Step 5 -Add all of your favourite dishes and press “Ok”.
Step 6 - A drop down box with list is created.
Code:
<!DOCTYPE html>
<html>
<head>
< tle>My Favorite South Indian Dishes</ tle>
</head>
<body>
<h1>My Favorite South Indian Dishes</h1>
<label for="dishes">Select a dish:</label>

<select id="dishes" name="dishes">
<op on value="idli">Idli</op on>
<op on value="dosa">Dosa</op on>
<op on value="vada">Vada</op on>
<op on value="sambar">Sambar</op on>
75
<op on value="rasam">Rasam</op on>
<op on value="u hapam">U hapam</op on>
<op on value="biryani">Biryani</op on>
<op on value="curry">Curry</op on>
<op on value="puliyodarai">Puliyodarai</op on>
<op on value="pongal">Pongal</op on>
</select>
<p>Your selected dish is: <span id="selected-dish"></span></p>
<script>
// JavaScript to update the selected dish in real- me
const selectDish = document.getElementById("dishes");
const selectedDishDisplay = document.getElementById("selected-
dish");
selectDish.addEventListener("change", func on() {

selectedDishDisplay.textContent =
selectDish.op ons[selectDish.selectedIndex].text;
});
</script>
</body>
</html>
76
Output:
77
36.Create a web page with name of your college as text. The text should
scroll, alternate and slide.
Steps:
Step 2 - Insert → Web Component → Dynamic Effects → Marquee
Step 3 - A marques dialog box appears → Text “R.G.Kedia College of
Commerce".
Step4 - And Behaviour : "Scroll" → Then 'OK'.
Step 5 - Repeat the Same and choose slide
Step 6 - Repeat the same and choose behaviour as "Alternate".
Code:
<html>
<head>
</head>
<body>
<marquee> R.G. kedia College of Commerce
</marquee>
<marquee direc on="right">R.G. kedia College of commerce
</marquee>
</body>
</html>
78
Output:
79
37. Create a web page to display an image surrounded by text on all the
four sides
Steps:
Step 1 - Open MS office front Page 2003 → Blank Document.
Step 2 - Move the Cursor to the centre of page. Clipart → Insert →
picture →Clipart
Step 3 - Place the Cursor before the image → Enter the text.
Step4 - Place the Cursor above the image → Enter the text
Step 5 - Place the Cursor beside/a er the image → Enter the text
Step 6 - Place the Cursor below the image → Enter the text.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Define CSS styles for the container and its contents */
.container {
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.text {
border: 1px solid #ccc;
80
padding: 10px;
margin: 10px;
}
.top-text {
display: block;
}
.le -text, .right-text {
display: inline-block;
ver cal-align: top;
}
.bo om-text {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="text top-text">Top </div>
<img src="your-image.jpg" alt="Your Image">
<div class="text le -text">le </div>
<div class="text right-text"> right </div>
<div class="text bo om-text">bo om</div>
</div>
</body>
81
</html>
Output:
82
38. Create a web page with 4 paragraphs of about 5 lines each
describing about E-Marke ng, EShopping, E-banking and E-Learning. The
paragraphs should be aligned le , right, center and jus fied
respec vely.
Steps:
Step 1- Open MS office front page 2003 → Blank document
Step 2 - Enter the defini ons about E-Marke ng, E-Shopping, e-banking
and E-learning.
Step 3 - Select C-Marke ng defini on and choose le alignment,
Step 4 - Select E-shopping defini on and choose right alignment.
Step 5 - Select E- banking defini on & choose Center alignment.
Step 6 - Select E-Learning defini on & choose jus fy.
Code:
<html>
<head>
</head>
<body>
<p align="le " style="color:red" >This paragraph is explaining about E-
Marke ng
This paragraph is explaining about E-Marke ng
This paragraph is explaining about E-Marke ng</p>
<hr size="3">
<p align="center" style="color:blue">This paragraph is explaining about
E-Shopping
This paragraph is explaining about E-Shopping
83
This paragraph is explaining about E-Shopping</p>
<hr size="4">
<p align="right" style="color:green">This paragraph is explaining about
E-Banking This paragraph is
explaining about E-Banking
This paragraph is explaining about E-Banking</p>
<p align="jus fy" style="color:green">This paragraph is explaining
about E-Learning This paragraph is
explaining about E-Learning
This paragraph is explaining about E-Learning</p>
</body>
</html>
84
Output:
85
39. Create a web page with name of your college as Text in h6 size, font
as verdana, blue as font color followed by a copyright symbol and
trademark symbol
Steps:
Step 2 - Enter College name → Select it → Size: 1 (8pt) → font: verdana
→
Color: blue.
Step 3 - Press Enter and Go to Insert →Symbol → Choose copyright
symbol & press ‘Insert’
Step 4 – Insert → Symbol → Choose Trademark symbol & Press ‘Insert’
Code:
<!DOCTYPE html>
<html>
<body>
<center><u><font size="4" color="green">college name with the verdana
font,
in color blue and with copyright and trade marks</font></u></center>
<center><h6><font face="verdana" color="blue">R.G.Kedia College of
Commerce©™</font></h6></center><br>
</body>
</html>
86
Output:
87
40.Create a login page asking the user to enter his username and
password followed by a submit bu on
Steps:
Step 2 - Enter in the Center of Page as ‘LOGIN '
Step 3 - Go to next line type Ùsername' and go to insert → form → text
box
Step 4 - Go to next line type password' and go to Insert → form →
textbox.
Step 5 - A Submit bu on will automa cally appear with textboxes.
Code:
<html>
<head>
</head>
<body>
<form>
Login Here...<br>
Username: <input type="text" name="un"><br>
Password: <input type="password" name="pw"><br>
<input type="submit" value="Submit details">
</form>
</body>
</html>
88
Output:
89
41. Create a web page to create links to the sec ons on the same page.
Steps:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Define CSS styles for the naviga on menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 10px 0;
}
a{
text-decora on: none;
color: #3498db;
}
90
a:hover {
text-decora on: underline;
}
</style>
</head>
<body>
<h1>Web Page with Internal Links</h1>
<ul>
<li><a href="#sec on1">Introduc on</a></li>
<li><a href="#sec on2">Main Story</a></li>
<li><a href="#sec on3">Conclusion</a></li>
</ul>
<h2 id="sec on1">Introduc on</h2>

<p>The introduc on is the star ng point of a story.</p>
<h2 id="sec on2">Main Story</h2>

<p>The story is conveyed here</p>
<h2 id="sec on3">Conclusion</h2>

<p>The conclusion or summary of the story.</p>
</body>
</html>
91
Output:
92
42.Create a web page using a form which collects data about students
rollno, name and marks in various subjects followed by submit and reset
bu ons.
Steps:
Step 2 - Enter the required data such as “'Roll No, Name, Marks”
Step 3 - Place the Cursor near roll No and click on Insert → form → text
box
Step 4 - Move the Cursor to Name → Insert → form → Textbox
Step 5 - Change the Cursor to Mark's → Insert → form → Textbox
Step 6 – Insert → form → Push bu ons.
Code:
<html>
<head>
</head>
<body>
<h3><center>Student Informa on</center></h3>
<form name="f" ac on="abc"><br>
Sno:<input type="text" name="sn"><br>
Name:<input type="text" name="nm"><br>
marks in web:<input type="text" name="m1"><br>
marks in Excel:<input type="text" name="m2"><br>
marks in Rdbms:<input type="text" name="m3"><br>
<input type="submit" value="submit"> <input type="reset">
93
</form>
</body>
</html>
Output:
94
43. Create a web page using a form tled as Feedback form which takes
the feedback of the various facili es offered in your college. The form
should have fields student name, rollno followed by5 check boxes
labelled Excellent, Very Good, Good, Average, Bad respec vely
Steps:
Step 1- Open MS office front page 2003 → Blank document
Step 2 - Enter ‘Feedback form' in Center of the page.
Step 3 - Enter ‘Student Name' and insert → form →textbox.
Step 4 - Enter "Roll No." and insert → form → textbox.
Step 5 - Enter ‘Seminars' and insert → form → checkbox
Step 6 - Enter 5 such checkboxes for Excellent, very good, good, Bad.
Step 7 - Repeat the Same for all the facili es like -library, Commerce lab,
Computer lab.
Step 8 - Invert → form → push bu ons
Code:
<html>
<head>
</head>
<body>
<h3><center>Feedback Form</center></h3>
<p>Students give yours feedback from here...
<form name="f" ac on="abc">
Excellent <input type="checkbox" name="sn">
Very Good:<input type="checkbox" name="nm">
95
Good <input type="checkbox" name="m1">
average<input type="checkbox" name="m2">
Bad<input type="checkbox" name="m3">
</form>
</body>
</html>
Output:
96
44. Create a web page to display the list of universi es available in
Telangana state using a pull- down menu
Steps:
step 1 - Open MS Excel front page 2003 → Blank document
Step 2 - Enter ‘Universi es of Telangana' in the Centre
Step 3 - Next line go to Insert → form → Drop down menu
Step 4 - A drop down dialog box appears → Choose Add in the box
Step 5 - Add your choices and Press ‘ok'.
Step 6 - then Select any one of them as "selected" & Press "ok".
Code:
<html>
<head>
</head>
<body>
<form>
Universi es in Telangana:
<select>
<op on>Select University</op on>
<op on>Osmania University</op on>
<op on>Jawaharlal Nehru University</op on>
<op on>Dr.B.R Ambedkar University</op on>
<op on>Telengane University</op on>
<op on>Kaka ya University</op on>
<op on>University Of Hyderabad</op on>
<op on>Palamuru University</op on>
97
<op on>Satavahana University</op on>
</select>
</form>
</body>
</html>
Output:
98
45. Create a web page to display an image surrounded by text on le
and right sides
Steps:
Step 1 - Open MS front page 2003 → Blank document.
step 2 - Enter word toward le side of the page & then a place the Cursor
to the end of the word.
Step 3 - Insert Picture → clip art.
Step 4 - Place the Cursor a er the image → Enter a word.
Step 5 - The req. webpage is obtained
Code:
<html>
<head>
</head>
<body>
<h1 Align='center'>Image with le and right side text</h1><br><br>
<p>R.G.Kedia College <img src="C:\Users\Public\Pictures\Sample
Pictures\Koala.jpg"
height="250"> R.G.Kedia COLLEGE</p>
</body>
</html>
99
Output:
100
46. Create a web page using a default theme in front page to describe
about OSMANIA UNIVERSITY.
Steps:
Step 1 - Open MS front page 2003 → Blank document.
step 2 - Enter the required data about Osmania university
Step 3 – Go to format → Theme → Choose an appropriate theme
Step 4 – The theme dialog box is displayed to the right side of the screen
Code:
<!DOCTYPE html>
<html>
<head>
< tle>Osmania University</ tle>
<style>
/* Basic styling for the content */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
p{
text-align: jus fy;
margin: 20px 0;
101
}
</style>
</head>
<body>
<h1>Osmania University</h1>
<p>Osmania University has a rich history and has been a center of
learning and research for genera ons. It offers undergraduate,
postgraduate, and doctoral programs across various disciplines, including
arts, sciences, commerce, and technology.</p>
<p>For more informa on, you can visit the official <a
href="h ps://www.osmania.ac.in/">Osmania University
website</a>.</p>
</body>
</html>
102
Output:
103
47. Create a user registra on form for an upcoming examina on.(use
textboxes, pull-down menus, op on boxes, submit bu on
Steps:
Step 1 - Open MS front Page 2003 → Blank Document

Step 2 - Enter ÌCET-2019 be the center of Page.
Step 3 - Enter 'First Name", "Last Name", "Date of birth", "Email',
'Mobile No.', "Address", "Caste","Gender".
Step 4 - Insert → form → Textboxes in front of first name, Last name,
Mobile no, Caste.
Step 5 - Insert → form → Drop down box in front of Date of birth, -
Step 6- Insert → form → Text area in front of Email, Address.
Step 7 - Insert → form → Radio bu on in front of Gender. -
Step 8 - Insert →form → Push bu on → Submit and Reset
Code:
<!DOCTYPE html>
<html>
<head>
< tle>User Registra on</ tle>
</head>
<body>
<h1>User Registra on</h1>
<form ac on="registra on_process.php" method="post">
<label>First Name: <input type="text" name="first_name"
required></label><br>
104
<label>Last Name: <input type="text" name="last_name"
<label>Mobile Number: <input type="text" name="mobile_no"
<label>Caste: <input type="text" name="caste"></label><br>
<label>Date of Birth:
<select name="dob">
<op on value="day">Day</op on>
<op on value="month">Month</op on>
<op on value="year">Year</op on>
</select>
</label><br>
<label>Email: <textarea name="email" rows="3"
required></textarea></label><br>
<label>Address: <textarea name="address" rows="4"
required></textarea></label><br>
<label>Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
105
Output:
106
48. Create an web page to display a mul level list taking your own
example
Steps:
Step 1 - Open MS office frontpage 2003 → Blank document.
Step 2 - Enter the data & select it
Step 3 - Go to Bullets & Numbering Under insert.
Step 4 – choose any format of Numbering.
Code:
<html>
<head>
</head>
<body>
<h2>Courses in College(using nested list)</h2>
<ol type="1">
<li>B.Com
<ul type="disc">
<li>Computers</li>
<li>General</li>
</ul>
</li>
<li>B.Sc
<ul type="circle">
<li>MPCs</li>
<li>MPC</li>
107
</ul>
</li>
<li>B.A
<ul type="disc">
<li>HPP</li>
<li>EPP</li>
</ul>
</li>
</ol>
</body>
</html>
Output:
108
49. Create a table to demonstrate colspan,rowspan, cellspacing and cell
padding a ributes of a table.
Steps:
Step 2 – Insert → Table
Step 3 – Choose 3 rows & 4 columns and click on cellspacing &
cellpadding & specify the values
Step 4 - Now choose the first Row Containing 2 Columns & Go to Table →
Merge Cells.
Step 5 - Now choose the last column & 2 rows & Go to Table → Merge
cells.
step 6 - Enter data into the table.
Code:
<html>
<head>
</head>
<body>
<table border=2 cellspacing="5" cellpadding="5">
<tr>
<td rowspan="2">Program48</td>
<td>Program48</td>
<td>Program48</td>
</tr>
<tr>
<td>Program48</td>
109
<td>Program48</td>
</tr>
<tr>
<td colspan="2">Program48</td>
<td>Program48</td>
</tr>
</table>
</body>
</html>
Output:
110
50. Create a webpage to insert an image using all the image a ributes
Steps:
Step 1- Open MS office front Page 2003 → Blank document
Stер 2 - Go to insert → picture →clip art→ Select a picture
Step3 - Right click on the image → Picture proper es
Step 4 - apply all the necessary effects regarding the image
Code:
<html>
<head>
</head>
<body>
Image with A ributes<br>
<img src="E:\User\college photo.jpg" width="200" height="200"
alt="college image" border="3">
</body>
</html>
Output:
111

Ecom Record Final

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ecom Record Final

Uploaded by

Copyright:

Available Formats

1.

Create a web page to display the following output: (use textboxes,

step 9 - Go to Preview at the le Corner to See the output.

Step 10 - Go to Code at the le corner to see the html code.

#block1 { background-color: red; }

#frame1 { background-color: red; }

<label for="dishes">Select a dish:</label>

<p>Your selected dish is: <span id="selected-dish"></span></p>

selectDish.addEventListener("change", func on() {

Step 4 – Insert → Symbol → Choose Trademark symbol & Press ‘Insert’

<h2 id="sec on1">Introduc on</h2>

<h2 id="sec on2">Main Story</h2>

<h2 id="sec on3">Conclusion</h2>

Step 1 - Open MS front Page 2003 → Blank Document

You might also like