WD Prakhyat 2

WEB DEVELOPMENT WORKSHEET
NAME : PRAKHYAT PANDIT

UID : 20 BCS 5544
GROUP/SECTION : ITB-19
AIM : Create an ordered list which should display the grocery

items to be purchased by a household. Include the miscellaneous
items also in the least priority list using unordered list.CSS list-
style-type property should also be included.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body style="color: blanchedalmond; background-color: grey;">
<div class="head" style="text-align: center; color: burlywood; text-
decoration: burlywood dotted underline; font-size: 60px; font-family:
'Times New Roman', Times, serif;">LISTS</div><hr>
<div class="head1" style="font-size: 40px; font-family: Arial, Helvetica,
sans-serif; text-decoration: cornsilk wavy underline; color: cornsilk;"
>Most Prefered Grocery Item</div>
<ol style="font-size: 20px;">
<li>Potato</li>
<li>Tomato</li>
<li>Onion</li>
<li>Garlic</li>
<li>Capsicum</li>
</ol>
<hr>
<div class="head1" style="font-size: 40px; font-family: Arial, Helvetica,
sans-serif; text-decoration: cornsilk wavy underline; color:
cornsilk;">Least Priority List</div>
<ul style="font-size: 20px;">
<li>Raddish</li>
<li>Spinach</li>
</ul>
</body>
</html>
OUTPUT :
AIM: Design a timetable and display it in tabular format.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<H1>Time Table</H1>
<table rules=cols border="2" style="font-size: 30px; text-align: center;">
<tr>
<th> Monday <hr></th>
<th> Tuesday <hr></th>
<th> Wednesday <hr></th>
<th> Thursday <hr></th>
<th> Friday <hr></th>
</tr>
<tr>
<th> Physics <hr></th>
<th> Chemistry <hr></th>
<th> Maths <hr></th>
<th> English <hr></th>
<th> Hindi <hr></th>
</tr>
<tr>
<th> Computer <hr></th>
</tr>
<tr>
<th> Computers <hr></th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<th> Chemistrys <hr></th>
</tr>
</table>
</body>
</html>
OUTPUT :
AIM : Create a webpage to display chemical formula of water. Also
include the mathematical formula of (x+y)^2=x^2+y^2+2xy.Also
include your favorite quote in this page which should be displayed in
the red color and its should have font-size 20px and font family as
Times New Roman.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.for_all{
text-align: center;
font-size: 40px;
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body style="background-color: rgb(20, 20, 20);">
<div class="for_all" style="color: aliceblue; background-color: rgb(39, 39, 238);">
Formula of Water is H2O
</div>
<hr style="border: 3px dashed rgb(137, 28, 238);">
<div class="for_all" style="color: brown; background-color: burlywood;">
An important mathematical Equation (x + y)2 = x2
+ y2 + 2xy
</div>
<div class="for_all" style="color: rgb(207, 27, 27); background-color: rgb(31, 197, 73);
">
"Live a life you will Remember"
</div>
</body>
</html>
OUTPUT :
AIM : Create a page with the help of HTML Colors and HTML
CSS which will help you in displaying different paragraphs with
different background colors and different fonts. take help of
Styling using Class and Id feature.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.for_all{
text-align: center;
font-size: 40px;
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body style="background-color: rgb(20, 20, 20);">
<div class="for_all" style="color: aliceblue; background-color: rgb(39, 39, 238); font-
size: 30px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, molestiae!
</div>
<div class="for_all" style="color: brown; background-color: burlywood; font-size:
50px;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit delectus vitae quas
minus. Corrupti ad voluptatibus necessitatibus incidunt cupiditate, alias odio assumenda
expedita aliquam.
</div>
<div class="for_all" style="color: rgb(207, 27, 27); background-color: rgb(31, 197, 73);
font-size: 40px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit odio id quas
omnis vel ipsam ea dolorum blanditiis sequi soluta autem mollitia cupiditate quibusdam
ratione iusto debitis laboriosam dolor, facilis, reiciendis, vitae animi. Optio!
</div>
</body>
</html>
OUTPUT :
AIM : Design a computer science department web page for
department which includes all the features/options like activities
held in department, syllabus for all semesters, results etc.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body >
<h2 style="color: rgb(231, 144, 14); font-size: 30px; text-decoration:
blanchedalmond underline;">Academics</h2>
Chandigarh University [CU] imparts quality education at an affordable and
competitive fee structure offering Best ROI (Return on Investment) to the
students. CU offers industry-oriented professional programs in Engineering,
MBA, MCA, Journalism, Hotel Management, Bio-Technology, Pharmacy,
Architecture, and many more with the lowest course fee as compared to other
universities in the region.
<hr>
<h2 style="color: blue; font-size: 30px; text-decoration: blue
underline;">Sylabbus</h2>
<div>
</div>
<div class="accordion_panel" style="max-height: 0px;">
<div class="dropdown_item">
<div class="tab_course_title">1st Semester</div> 
<table id="customers" class="table-responsive">
<tbody>
<tr>
<th width="132">
Code
</th>
<th width="157">
Course Name
</th>
<th width="85">
Course Type
</th>
<th width="50">
L
</th>
<th width="50">
T
</th>
<th width="50">
P
</th>
<th width="50">
S
</th>
<th width="50">
C
</th>
<th width="51">
CH
</th>
</tr>
<tr>
<td width="132">
21SMT122
</td>
<td width="157">
Calculus and Vector Spaces
</td>
<td width="85">
 BS
</td>
<td width="50">
3
</td>
<td width="50">
2
</td>
<td width="50">
0
</td>
<td width="50">
 
</td>
<td width="50">
5
</td>
<td width="51">
5
</td>
</tr>
<tr>
<td width="132">
21ECT112
</td>
<td width="157">
Electrical & Electronics Engineering
</td>
<td width="85">
 ES
</td>
<td width="50">
3
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
 
</td>
<td width="50">
3
</td>
<td width="51">
3
</td>
</tr>
<tr>
<td width="132">
21CST 114
</td>
<td width="157">
Problem Solving with Programming
</td>
<td width="85">
 ES
</td>
<td width="50">
2
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
 
</td>
<td width="50">
2
</td>
<td width="51">
2
</td>
</tr>
<tr>
<td width="132">
21UCT141
</td>
<td width="157">
Communication Skills
</td>
<td width="85">
 UC
</td>
<td width="50">
2
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
 
</td>
<td width="50">
2
</td>
<td width="51">
2
</td>
</tr>
<tr>
<td width="132">
21ECT111
</td>
<td width="157">
Physics for Electronics
</td>
<td width="85">
 BS
</td>
<td width="50">
3
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
 
</td>
<td width="50">
3
</td>
<td width="51">
3
</td>
</tr>
<tr>
<td width="132">
21ECP113
</td>
<td width="157">
Electrical & Electronics Engineering Lab
</td>
<td width="85">
 ES
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
2
</td>
<td width="50">
 
</td>
<td width="50">
1
</td>
<td width="51">
2
</td>
</tr>
<tr>
<td width="132">
21CSP 115
</td>
<td width="157">
Problem Solving with Programming Lab
</td>
<td width="85">
 ES
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
4
</td>
<td width="50">
 
</td>
<td width="50">
2
</td>
<td width="51">
4
</td>
</tr>
<tr>
<td width="132">
21MEP113
</td>
<td width="157">
Computer Graphics using CAD Lab
</td>
<td width="85">
 ES
</td>
<td width="50">
1
</td>
<td width="50">
0
</td>
<td width="50">
4
</td>
<td width="50">
 
</td>
<td width="50">
3
</td>
<td width="51">
5
</td>
</tr>
<tr>
<td width="132">
21UCP142
</td>
<td width="157">
Communication Skills Lab
</td>
<td width="85">
 UC
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
2
</td>
<td width="50">
 
</td>
<td width="50">
1
</td>
<td width="51">
2
</td>
</tr>
<tr>
<td width="132">
21ECP114
</td>
<td width="157">
Foundation of IOT Lab
</td>
<td width="85">
ES
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
2
</td>
<td width="50">
 
</td>
<td width="50">
1
</td>
<td width="51">
2
</td>
</tr>
<tr>
<td width="132">
21UCTXXX
</td>
<td width="157">
Design Thinking and creativity for Innovation
</td>
<td width="85">
 UC
</td>
<td width="50">
1
</td>
<td width="50">
0
</td>
<td width="50">
0
</td>
<td width="50">
 
</td>
<td width="50">
1
</td>
<td width="51">
1
</td>
</tr>
<tr>
<td colspan="3" width="375">
TOTAL
</td>
<td width="50">
15
</td>
<td width="50">
2
</td>
<td width="50">
14
</td>
<td width="50">
 
</td>
<td width="50">
24
</td>
<td width="51">
32
</td>
</tr>
</tbody>
</table>
 
</div>
</body>
</html>
OUTPUT :

WD Prakhyat 2

Uploaded by

Copyright:

Available Formats

You might also like

WD Prakhyat 2

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

WD Prakhyat 2

Uploaded by

Copyright:

Available Formats

WEB DEVELOPMENT WORKSHEET

NAME : PRAKHYAT PANDIT

AIM : Create an ordered list which should display the grocery

You might also like