Scribd
Upload
37 views

Piyush Web

The document provides instructions for 18 HTML coding exercises to create tables, lists, frames, and other web elements. The exercises include: 1) Creating a table with class subjects 2) Creating numbered and lettered lists 3) Creating an ordered list of programming languages 4) Demonstrating hyperlinking between pages and adding an image and marquee 5) Creating a page with frames in three columns 6) Adding text over a blue background 7) Creating a table showing course admission details The document provides the input HTML code and expected output for each exercise to help learn HTML coding skills.

Uploaded by

piyushdongre1010
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Piyush Web

The document provides instructions for 18 HTML coding exercises to create tables, lists, frames, and other web elements. The exercises include: 1) Creating a table with class subjects 2) Creating numbered and lettered lists 3) Creating an ordered list of programming languages 4) Demonstrating hyperlinking between pages and adding an image and marquee 5) Creating a page with frames in three columns 6) Adding text over a blue background 7) Creating a table showing course admission details The document provides the input HTML code and expected output for each exercise to help learn HTML coding skills.

Uploaded by

piyushdongre1010
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

Web Technology

Index of web tech and E -commerce

S. DESCRIPTION PAGE SIGNATURE


NO. NO.
1. Write an HTML program to create the following
table.
Class Subject 1 Subject 2 Subject 3

BCA1 Visual code PC Software Electronics

BCA2 C++ DBMS English

BCA3 Java Multimedia CSA

2. Write an HTML program to create the


following lists.
(I)C
(II)C++
(III) Fortran
(IV) COBOL

3. Write an HTML program to create the


following lists.
1. Java
2. Visual Basic
3. BASIC
4. COBOL
Page no. 1
Piyush Dongre
Web Technology

4. Write an HTML to demonstrate hyperlinking


between two web pages. Create a marquee and
also insert an image in the page .
5. Write an HTML program to create frames in
HTML with 3 columns
(Width=30%,30%,40%)

Index of Web tech and E- Commerce


S. DESCRIPTION PAGE SIGNATURE
NO. NO.

6. Write an HTML program to create a web page


with a blue background and the following text.
New Delhi
New Delhi ,The capital and the third largest city
of
India is a fusion of the ancient and the modern
. The refrains of the Muslim dynasties with its
architectural delights, give the majestic
ambience of the bygone era.
7. Write an HTML program to create the
following table.
ADMISSION

Course OC BC MBC SC/ST TOTAL


Computer 9 18 5 5 37
Science

Page no. 2
Piyush Dongre
Web Technology

Commerce 14 25 6 5 50
Grand Total 87

8. Write an HTML program to create the


following table.
Car Price List

Maruti Tata Ford


Model Price Model Price Model Price
Maruti 2 Lac Sumo 2 Lac Ikon 5 Lac
800
Omni 3 Lac Scorpio 3 Lac Gen 2 Lac

Web teach and E- Commerce


S. DESCRIPTION PAGE SIGNATURE
NO. NO.

Page no. 3
Piyush Dongre
Web Technology

12. Write the HTML coding to display the following


table.

Name Rahul
Roll No. 101
Subject Max Min Obtain
Java 100 33 75
Multimedia 100 33 75

Page no. 4
Piyush Dongre
Web Technology

Page no. 5
Piyush Dongre
Web Technology

15. Create the following HTML form.

USERNAME:

PASSWORD:

When the user types characters in a password


field, the browser displays asterisks or bullets
instead of characters.
Submit Query

Index of Web teach and E- Commerce


S. DESCRIPTION PAGE SIGNATURE
NO. NO.

17. Create the following HTML form. Enter your

name:

Page no. 6
Piyush Dongre
Web Technology

18. Write the HTML code for the following


equations.
C2H5OH + PCL5 = C2H5CL + POCL3 + HCL
4H3PO3 = 3H3PO4 + PH3
PCL3 + CL2 = PCL5
19. Write the HTML code to display the following.
1.Actors
1. Bruce Willis
2. Gerard Butler
3. Vin Diesel
4. Bradd Pitt
2. Actress
1. Julia Roberts
2. Angelina Jolie
3. Kate Winset

Page no. 7
Piyush Dongre
Web Technology

4. Cameron Diaz

S. DESCRIPTION PAGE SIGNATURE


NO. NO.
20. Write the HTML code to display the following.
1. Cricket Players
1. Batsman
1. Sachin Tendulkar
2. Rahul Darvid
3. Virendra Schwag
2. Bowler
d. Kumble
e. Zaheer Khan
f. Balaji
3. Spinner
d)Harbhajan
e)Kumble
f)Kartik

Page no. 8
Piyush Dongre
Web Technology

1.Write an HTML program to create the following table


Class Subject 1 Subject 2 Subject 3
BCA 1 visual code PC software Electronics
BCA 2 C++ DBMS English
BCA 3 java Multimedia CSA

INPUT:

<html>
<head> <style> table, th,
td{ border:1px solid black;
bordercollapse:collapse;
}
</style>
</head>
<body> <table>
Page no. 9
Piyush Dongre
Web Technology

<tr>
<th> Class </th>
<th> Subject 1 </th>
<th> Subject 2 </th>
<th> Subject 3 </th>
</tr>
<tr>
<td> BCA 1 </td>
<td> visual code </td> <td> PC
Software </td>
<td> Electronics </td>
</tr>

Page no. 10
Piyush Dongre
Web Technology

<tr>
<td> BCA 2 </td>
<td> C++ </td>
<td> DBMS </td>
<td> English </td>
</tr>
<tr>
<td> BCA 3 </td>
<td> java </td>
<td> Mulitmedia </td>
<td> CSA </td>
</tr>
</table> </body>
</html>
Page no. 11
Piyush Dongre
Web Technology

OUTPUT:

Q 2. Write an HTML program to create the followimg lists.


(I)C
(II)C++
(III) Fortran
(IV) COBOL INPUT :
<html>
<head>

Page no. 12
Piyush Dongre
Web Technology
<title> Program 2
</title> </head> <style>
ol{ counterreset:list;
} ol>li{ list-
style:none;
}
ol>li:before{ content:"("
counter(list,upper-roman)")"; counter-increment:list;
}
</style>
<body>
<ol>
<li> C </li>
<li> C++ </li>
<li> <font style="margin-left:40px;"> Fortan </font> </li>
<li> <font style=”margin-left:40px;”>COBOL</font> </li>
</ol>
</body>
</html>

OUTPUT:
Page no. 13
Piyush Dongre
Web Technology

Q 3. Write an HTML program to create the following lists.

1. Java
2. Visual Basic
3. BASIC
4. COBOL INPUT:
<html>
<head>
<title> Program 3 </title>
</head>
<body>
<ol>
<li> Java </li>
Page no. 14
Piyush Dongre
Web Technology
<li> Visual Basic </li>
<li> BASIC </li>
<li> COBOL </li>
</ol>
</body>
</html>

OUTPUT:

Q.4 Write an HTML to demonstrate hyperlinking between two web


pages . Create a marquee and also insert an image in the page .
INPUT:
<html>
<head>

Page no. 15
Piyush Dongre
Web Technology
<title> Program 4 </title>
</head>
<body>
<center>
<h1> <font color=”red”> <u><marques> Pandit Ravishankar Shukla
University
</marquee> </u></font> </h1>
<img src=”prsu.jpeg” height=”176px” width=”180px”>
</center>
<p><font size=”5”>Pt.Ravishankar Shukla University is an institution of
higher education Located in Raipur (C.G). It is one of the largest and
oldest institution of higher education in Chhattisgarh . It is a state
University founded in 1964 by government of Madhya Pradesh . It is a
teaching-cum affiliating university which affiliates about 144 colleges
and has 29 University Teaching Departments.</font></p>
<p><font size=”4”><a href=”https://www.prsu.ac.in/”>Pt. Ravishankar
Shukla University </a><br></p>
<p>Amanaka G.E. Road,Raipur,Chhattisgarh (India)-492010</p>
</body>
</html>

OUTPUT:

Page no. 16
Piyush Dongre
Web Technology

EXTERNAL:

Q 5. Write an HTML program to create frames in HTML with 3 columns


(Width=30%,30%,40%) INPUT:

Page no. 17
Piyush Dongre
Web Technology
<html>
<head>
<title> Program 5 </title>
</head>
<frameset cols=”30%,30%,40%”>
<frame src=”http://www.prsuuniv.in/login/”>
<frame src=”https://durgacollege.in/”>
<frame src=”https://vivekanandcollege.in/”>
</frameset>
</html>

OUTPUT:

Page no. 18
Piyush Dongre
Web Technology
Q 6. Write an HTML program to create a web page with a blue
background and the following text.
INPUT:
<html>
<head>
<title> Program 6 </title>
</head>
<body bgcolor=”blue”>
<h1 align=”center”>
<u>New Delhi</u>
</h1>
<p><font size=”6”>
New Delhi ,The capital and the third largest city of India
is a fusion of the ancient and the modern .
The refrains of the Muslim dynasties with its architectural delights, give
the majestic ambience of the bygone era.
</font></p>
</body>
</html>

Page no. 19
Piyush Dongre
Web Technology
OUTPUT:

Q.7 Write an HTML program to create the following table.


Admission
Course OC BC MBC SC/ST TOTAL
Computer Science 9 18 5 5 37
Commerce 14 25 6 5 50
Grand Total 87

INPUT:
<html>
<head>
<title> Program 7 </title>
</head>
<body>
<h3 style”margin-left:70px;”>

Page no. 20
Piyush Dongre
Web Technology
<style>
table, th,
td{
border:1px solid black; border-collapse:collapse;
}
</style>
<table border=”2”>
<tr align=”left”>
<th>Course</th>
<th>OC</th>
<th>BC</th>
<th>MBC</th>
<th>SC/ST</th>
<th>TOTAL</th>
</tr>
<tr align=”center”>
<th align=”left”>Computer Science</th>
<td>9</td>
<td>18</td>
<td>5</td>
<td>5</td>
<td>37</td>

Page no. 21
Piyush Dongre
Web Technology
</tr>
<tr align=”center”>
<th align=”left”>Commerce</th>
<td>14</td>
<td>25</td>
<td>6</td>
<td>5</td>
<td>50</td>
</tr>
<tr>
<th colspan=”5” align=”left”>Grand Total</th>
<td align=”center”>87</td>
</tr>
</table> </body>
</html> OUTPUT:

Page no. 22
Piyush Dongre
Web Technology
Q 8. Write an HTML program to create the following table.

INPUT:
<html>
<head>
<title> Program 8 </title>
</head>
<body>
<h2 align=”center”><u> Car Price List </u></h2>
<style>
table, th,
td{
border:1px solid black; border-collapse:collapse;
}
</style>
<table border=”2” align=”center”>

Page no. 23
Piyush Dongre
Web Technology
<tr>
<th colspan=”2”>Maruti</th>
<th colspan=”2”>Tata</th>
<th colspan=”2”>Ford</th>
</tr>

<tr>
<th>Model</th>
<th>Price</th>
<th>Model</th>
<th>Price</th>
<th>Model</th>
<th>Price</th>
</tr>

<tr>
<td>Maruti 800</td>
<td>2 Lac</td>
<td>Sumo</td>
<td>2 Lac</td>
<td>Ikon</td>
<td>5 Lac</td>

Page no. 24
Piyush Dongre
Web Technology
</tr>

<tr>
<td>Omni</td>
<td>3 Lac</td>
<td>Scorpio</td>
<td>3 Lac</td>
<td>Gen</td>
<td>2 Lac</td>
</tr>
</table> </body>
</html>

OUTPUT:

Page no. 25
Piyush Dongre
Web Technology
Q 9. Write an HTML program to create the following table.
Students Records

INPUT:
<html>
<head>
<title> Program 9</title>
</head>
<body>
<h3 align="center"><u> Student Records </u></h3>
<style>
table, th,
td{
border:1px solid black;
border-collapse:collapse; text-align:center;
}
</style>
Page no. 26
Piyush Dongre
Web Technology
<table border="2" align="center">
<tr>

<th> Name </th>


<th> Subjects </th>
<th> Marks </th>

</tr>
<tr align="center">
<td>Arun</td>
<td>Java</td>
<td>70</td>
</tr>
<tr align="center">
<td></td>
<td>C</td>
<td>80</td>
</tr>
<tr align="center">
<td>Ashish</td>
<td>Java</td>

Page no. 27
Piyush Dongre
Web Technology
<td>75</td>
</tr>
<tr align="center">
<td></td>
<td>C</td>
<td>69</td>
</tr>
</table> </body>
</html>
OUTPUT:

Page no. 28
Piyush Dongre
Web Technology
Q 10. Write the HTML coding to display the following table. Also insert
an image in the web page.

INPUT:
<html>
<head>
<title> Program 10 </title>
</head>
<body>
<center>
<img src="prsu.png" height="176px" width="180px"><br>
<style>
table, th, td{
border:1px solid black;
border-collapse:collapse; text-align:center;
}
</style>

Page no. 29
Piyush Dongre
Web Technology
<table border="2" align="center">
</center>
<tr>

<th> Subject </th>


<th> Max </th>
<th> Min </th>
<th> Obtain </th>
</tr>
<tr>
<td>Java</td>
<td>100</td>
<td>33</td>
<td>75</td>
</tr>
<tr>
<td>Multimedia</td>
<td>100</td> <td>33</td>
<td>75</td>
</tr>
<tr>

Page no. 30
Piyush Dongre
Web Technology
<td>Operating System </td>
<td>100</td>
<td>33</td>
<td>68</td>
</tr>
<tr>
<td>C++ </td>
<td>100</td>
<td>33</td>
<td>73</td>
</tr>
</table>
</center>
</body>
</html>

Page no. 31
Piyush Dongre
Web Technology
OUTPUT:

Q 12. Write the HTML coding to display the following table.

Page no. 32
Piyush Dongre
Web Technology
INPUT:
<html>
<head>
<title> Program 12 </title>
</head>
<body>
<table border="2" cellpadding="10" cellspacing="2">
<style>
table,
th,
td{
border:1px solid black; border-
collapse:collapse; text-align:center;
}
</style>
<tr>
<th colspan=2 align="left">Name</th>
<td colspan=2>Rahul</td>
</tr>
<tr>
<th colspan=2 align="left">Roll No.</th>
<td colspan=2> 101 </td>

Page no. 33
Piyush Dongre
Web Technology
</tr>
<tr align="left">
<th> Subject </th>
<th> Max </th>
<th> Min </th>
<th> Obtain </th>
</tr>
<tr>
<td>Java</td>
<td>100</td>
<td>33</td>
<td>75</td>
</tr>
<tr>
<td>Multimedia</td>
<td>100</td>
<td>33</td>
<td>75</td>
</tr>
</table> </body>
</html>

Page no. 34
Piyush Dongre
Web Technology

Q 13. Write an HTML program to create a form as the following . Enter


Name:
Enter Roll NO.:
Enter Age:
Enter DOB:
INPUT:
<html>
<head>
<title> Program 13</title>
</head>
<body>

Page no. 35
Piyush Dongre
Web Technology
<form>
Enter Name : <input type="text name="First Name"><br>
Enter Roll No. : <input type="text name="Roll No."><br>
Enter Age : <input type="text name="Age"><br>
Enter DOB : <input type="text name="Date of Birth">
<br>
</form>
</body>
</html>

OUTPUT:

Page no. 36
Piyush Dongre
Web Technology
Q 14. Write an HTML program to create a web page with an image as
background and the following text.
New Delhi
New Delhi , The capital and the third largest city of India is a fusion of
the ancient and the modern. The refrains of the Muslim dynasties with
its architectural delights , give the majestic ambience of the bygone era.
On the other side New Delhi , the imperial city built by British , reflect
the fast paced present .The most fascinating of all is the character which
varies from the 13 present century mausoleum of the Lodi kings to ultra
modern glass skyscrapers.
INPUT:
<html>
<head>
<title> Program 14</title>
</head>
<body>
<style>
body{ margin-left:180px; background-
image:"Delhi.jpeg"; background-size:100vw 100vh;
background-repeat:no-repeat;
}
h1{
margin-left:400px;
}
Page no. 37
Piyush Dongre
Web Technology
</style>
</head>
<body background="Delhi.jpeg">
<h1><u>New Delhi</u></h1>
<p><font size="6">
New Delhi , The capital and the third largest city of India is a fusion of
the ancient and the modern. The refrains of the Muslim dynasties with
its architectural delights,give the majestic ambience of the bygone era.
</p>
<p>
On the other side New Delhi , the imperial city built by British , reflect
the fast paced present .The most fascinating of all is the character which
varies from the 13<sup>th</sup>
present century mausoleum of the Lodi kings to ultra modern glass
skyscrapers. </font></p>
</body>
</html>

Page no. 38
Piyush Dongre
Web Technology
OUTPUT:

Q 15. Create the following HTML form.


USERNAME:
PASSWORD:
When the user types characters in a
password field, the browser displays asterisks or bullets instead of
characters
Submit Query
INPUT :
<html>
<head>
<title> Program 15 </title>
</head>

Page no. 39
Piyush Dongre
Web Technology
<body>
<form>
USERNAME : <input type="text" name="username"><br>
PASSWORD : <input type="password" name="password"><br>
<p>
When the user types characters in a password field, the browser
displays asterisks or bullets instead of characters
</p>
<input type="submit" value="Submit Query">
</form>
</body>
</html>

OUTPUT:

Page no. 40
Piyush Dongre
Web Technology
Q 16. Create the following HTML form.
FIRST NAME:
LAST NAME :
GENDER: Male
Female
SUBJECTS:
Multimedia v
Multimedia
Operating System
CSA
Submit Query

INPUT:
<html>
<head>
<title> Program 16 </title>
</head>
<body>
<form>
FIRST NAME <input type="text" name="first name"><br>
LAST NAME <input type="text" name="last name"><br>
<p>
GENDER<br>

Page no. 41
Piyush Dongre
Web Technology
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female <br><br>
SUBJECT: <select name="subjects">
<option value="Multimedia"> Multimedia </option>
<option value="Operating System"> Operating System </option>
<option value="CSA"> CSA </option>
</select><br><br><br>
<input type="submit" value="Submit Query ">
</form>
</body>
</html>
OUTPUT:

Page no. 42
Piyush Dongre
Web Technology
Q 17. Create the following HTML form.

INPUT:
<html>
<head>
<title> Program 17 </title>
</head>
<body>
<form>
Enter your name: <input type="text" name="name"><br>

Page no. 43
Piyush Dongre
Web Technology
Enter your roll no : <input type="text" name="rollno"><br>
Subjects:<br>
<input type="checkbox" name="Subjects" value="Java">Java<br>
<input type="checkbox" name="Subjects" value="C">C<br>
<input type="checkbox" name="Subjects" value="Visual Basic">Visual
Basic<br>
<input type="checkbox" name="Subjects" value="C++">C++<br>
Class:<select name="class">
<option value="BCA I"> BCA I </option>
<option value="BCA II"> BCA II </option>
<option value="BCA III"> BCA III </option>
</select><br><br><br></br>

<input type="submit" value="Submit Query">


</form>
</body>
</html>

Page no. 44
Piyush Dongre
Web Technology
OUTPUT:

Q 18. Write the HTML code for the following equations.

INPUT:
<html>
<head>
<title> Program 18 </title>
</head>
<body>
Page no. 45
Piyush Dongre
Web Technology
C<sub>2</sub>
H<sub>5</sub>
OH+PCL<sub>5</sub>
=C<sub>2</sub>
H<sub>5</sub>
CL+POCL<sub>3</sub>
+HCL<br>
4H<sub>3</sub>
PO<sub>3</sub>
=3H<sub>3</sub>
PO<sub>4</sub>
+PH<sub>3</sub>
<br>
PCL<sub>3</sub> +CL<sub>2</sub>
=PCL<sub>5</sub>
</body>
</html> OUTPUT:

Page no. 46
Piyush Dongre
Web Technology
Q 19. Write the HTML code to display the following.

INPUT:
<html>
<head>
<title> Program 19 </title>
</head>
<body>
<ol>
<li> Actors </li>
<ol>
<li> Bruce Willis </li>
<li> Gerard Butler </li>
<li> Vin Diesel </li>

Page no. 47
Piyush Dongre
Web Technology
<li> Bradd Pitt </li>
</ol>
<li>Actress</li>
<ol>
<li> Julia Roberts </li>
<li> Angelina Jolie </li> <li>
Kate Winset </li>
<li> Cameron Diaz </li>
</ol>
</body>
</html>
OUTPUT:

Page no. 48
Piyush Dongre
Web Technology
Q 20. Write the HTML code to display the following.
1. Cricket Players
1. Batsman
1. Sachin Tendulkar
2. Rahul Darvid
3. Virendra Schwag
2. Bowler
d. Kumble
e. Zaheer Khan
f. Balaji
3. Spinner
d)Harbhajan
e)Kumble
f)Kartik INPUT:
<html>
<head>
<title> Program 20 </title>
</head>
<body>
<ol>
<li> Cricket Players </li>

Page no. 49
Piyush Dongre
Web Technology
<ol>
<li> Batsman </li>
<ol>
<li> Sachin Tendulkar </li> <li>
Rahul Darvid </li>
<li> Virendra Schwag </li>
</ol>
<li>Bowler</li>
<ol type="a" start="4">
<li> Kumble </li>
<li> Zaheer Khan </li>
<li> Balaji </li>
</ol>
<li> Spinner </li>
<ul type="none">
<li> d)Harbhajan </li>
<li> e)Kumble </li>
<li> f)Kartik </li>
</ul> </ol>
</ol>
</body>
</html>

Page no. 50
Piyush Dongre
Web Technology
OUTPUT:

Page no. 51
Piyush Dongre

You might also like