Worksheet-2: CODE

WORKSHEET-2
Name:Shivam
UID:20bcs7961
Section:20ITB-3
Q1:- 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>
<head>
<title>Groceries list</title>
</head>
<body bgcolor="blue">
<h3>GROCERY ITEMS</h3>
<p style="font-size: large;">Important Items</p>
<ol style="font-family: Georgia, 'Times New Roman', Times,

serif;">
<li>Apples</li>
<li>Star anise</li>
<li>Almonds</li>
<li>Coriander</li>
</ol>
<p style="font-size: large;">least priority List</p>

<ul style="font-family: monospace;font-size: large;">
<li>Ketchup</li>
<li>Noodles</li>
<li>pasta</li>
<li>Mayonaise</li>
</ul>
</body>
</body>
</html>
OUTPUT:
Q2:- Design a timetable and display it in tabular format.

<html>
<head>
<title>Timetable</title>
</head>
<body>
<h3 style="text-align: center;">20BCS11-B Timetable</h3>

<style>
table, th, td {border: 1px solid black;}
</style>
<table style="text-align: center;">
<tr>
<th bgcolor="grey">Time</th>
<th bgcolor="yellow" style="color: rgb(255, 8, 0);">Mon</th>
<th bgcolor="yellow" style="color: rgb(255, 8, 0);">Tue</th>
<th bgcolor="yellow" style="color: rgb(255, 8, 0);">Wed</th>
<th bgcolor="yellow" style="color: rgb(255, 8, 0);">Thu</th>
<th bgcolor="yellow" style="color: rgb(255, 8, 0);">Fri</th>
</tr>
<tr>
<td>10.00 - 10.45</td>
<td>Comm. Skills<br> (Practical)</td>
<td>Digital Electronics<br> (Theory)</td>
<td>C++<br> (Practical)</td>
<td>Comm. Skills<br> (Theory)</td>
<td>Calculus & Vector Spaces<br> (Theory)</td>
</tr>
<tr>
<td>11.00 - 11.45</td>
<td>Comm. Skills<br> (Practical)</td>
<td>Computer Workshop<br> (Practical)</td>
<td>C++<br> (Theory)</td>
<td>C++<br> (Theory)</td>
</tr>
<tr>
<td>12.00 - 12.45</td>
<td bgcolor="cyan"> //LUNCH BREAK//</td>
<td>Computer Workshop<br> (Practical)</td>
<td>Biology<br> (Practical)</td>
</tr>
<tr>
<td>12.45 - 1.30</td>
<td>IOT <br> (Practical)</td>
<td bgcolor="cyan">//LUNCH BREAK//</td>
</tr>
<tr>
<td>1.45 - 2.30</td>
<td>IOT <br> (Practical)</td>
<td>Digital Electronics<br> (Practical)</td>
<td>Life skills<br> (Practical)</td>
<td>Biology<br> (Practical)</td>
</tr>
<tr>
<td>2.45 - 3.30</td>
<td>Biology <br> (Practical)</td>
<td>Comm. skills<br> (Theory)</td>
<td>Digital Electronics<br> (Practical)</td>
</tr>
<tr>
<td>3.45 - 4.30</td>
<td>no class</td>
<td>no class</td>
</tr>
</table>
</body>
</html>
OUTPUT:-
Q3:- 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.
<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">
<title>Formulas</title>
</head>
<body>
<div style="text-align: center;">
<h2>Formulas</h2>
<P>Chemical formula of water is : H<sub>2</sub>O</P>
<p>(x+y)<sup>2</sup> = x<sup>2</sup>+y<sup>2</sup>+2xy</p>
<br><br>
<h3>My favorite quote</h3>
<p style="color: red; font-size: 20px; font-family: 'Times New Roman', Times,
serif;">
If not you, who? If not now, when?
<br><br><b>-John F. Kennedy</b>
</p>
</div>
</body>
</html>
OUTPUT:-
Q4:- 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.
<html lang="en">
<head>
<title>styling</title>
</head>
<body>
<style>
.red{background-color: red; color: powderblue;font-size: small;font-family:
Arial, Helvetica, sans-serif;}
p.purple{ background-color:rebeccapurple; color: plum;font-size:
medium;font-family: Verdana, Geneva, Tahoma, sans-serif;}
#green{background-color: green; color:seashell;font-size: large;font-family:
'Times New Roman', Times, serif;}
</style>
<p class="red">This is a red paragraph</p>
<p class="purple">This is a purple paragraph</p>

<p id="green">This is a green paragraph</p>
</body>
</html>
OUTPUT:-
Q5:- 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>
<title>ASSIGNMENT-5</title>
<style>
body{
/* background-image: url("index.jpg"); */
background-image: url(https://wallpaperaccess.com/full/2276817.jpg); }
h1{
text-align: center;
color: white;
font-size: xx-large;
}
p{
text-decoration: wavy;
color: white;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
}
a:hover, a:active {
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
marquee{
background-color: wheat;
</style>
</head>
<body>
<h1>COMPUTER SCIENCE DEPARTMENT</h1>
<ul>
<li><a class="active" href="a.html">Home</a></li>
<li><a href="b.html">Syllabus</a></li>
<li><a href="demo.html">Activities</a></li>
<li><a href="c.html">Result</a></li>
<li><a href="abc.html">Contact Us</a></li>
</ul>
<
<marquee width="100%" direction="left" height="30px">
NEWS - NEWS NEWS - NEWS NEWS - NEWS :: result for final semster is
declared////
Tech quiz for third semester registration portal open for student
</marquee>
<p style="color: black; font-size: 30px;"><b>NOTE: this is sample
text</b></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti,

ipsam magni culpa nisi debitis nostrum reprehenderit laborum ratione asperiores,
earum dolore ex similique cupiditate voluptates nesciunt voluptatibus atque
magnam possimus quo accusamus suscipit eveniet aperiam? Dolore, ducimus
asperiores vero accusamus velit nobis voluptas odit vel eveniet, saepe neque
sequi eius? Vero quod facere, magnam incidunt ea id cumque maiores aliquam
recusandae. Voluptatibus quo quia numquam aliquid non cupiditate nobis
nesciunt natus atque, et aliquam velit facilis minus magnam qui. Optio ratione
enim inventore dolores rem in unde minus consectetur aut voluptate sequi ut
dolore veniam, ab possimus nemo, doloribus ipsum. Dignissimos debitis, dolorem
similique cumque quis pariatur ea molestias aperiam exercitationem illum
commodi nisi magnam fuga voluptatum quasi. Fugiat ullam totam magni deserunt
aliquid quo, aut vitae, quas nulla illum asperiores, fugit minus quasi ea. Iure
adipisci iusto voluptas saepe consequuntur eligendi officia eos, quod voluptate
officiis aperiam neque dicta tempora. Nemo nostrum a vel impedit! Excepturi,
vitae ex voluptas accusamus repellat vero non corporis quam odio velit illo quia,
impedit harum in! Corrupti, ut ab quas dolorum sed deserunt ipsam, minus
dolorem rem voluptatem assumenda voluptatibus deleniti officiis enim atque odit
sunt suscipit! Iste commodi quis molestias laborum maxime explicabo optio,
expedita reiciendis, eveniet quidem soluta consequuntur! Nisi debitis aliquid
dolor veritatis, quam praesentium dignissimos voluptatibus, eligendi impedit nam
velit quia maiores atque reprehenderit doloremque neque ipsam. Magni culpa
sapiente praesentium velit molestias corrupti sint voluptatem, aliquid animi
aperiam doloribus incidunt quis fugit, assumenda, facilis numquam saepe
nostrum quae delectus distinctio iste dignissimos? Non ipsum nobis odit autem
ratione deleniti fuga eius aliquid dicta enim, vitae praesentium labore nam
distinctio, ad consequuntur, atque cum velit suscipit tempora tenetur minus
adipisci facilis. Voluptatum nesciunt quia et doloribus voluptatibus est laborum
hic, eaque, porro quam nobis suscipit sit dolorem architecto veritatis. Ad velit at
magnam illo laboriosam ipsa temporibus laudantium, nesciunt quia repellat quos?
Sunt odio assumenda qui necessitatibus distinctio natus suscipit dolore
consequuntur nam doloribus dolores delectus, eos tempore impedit officia
dolorem quod inventore nobis dolor, quae consectetur. Ea, laborum adipisci sit
iure aspernatur vero itaque obcaecati a nulla voluptatem nobis natus pariatur
optio dolores quis repudiandae mollitia ipsum. Harum ratione, iure ut nihil
quidem aperiam quam tempore, dolores alias ad dicta illo minima placeat, sunt
dolorum? Sapiente enim ipsum corporis cupiditate blanditiis. Delectus
necessitatibus, optio dignissimos impedit rerum ab earum neque eius nam fugit
iure dolorum nemo quis suscipit? Doloremque amet, voluptate natus veniam
quos deleniti qui et aliquam cupiditate optio atque alias ullam perferendis, aliquid
voluptates asperiores reiciendis. Perspiciatis quibusdam reiciendis maiores
maxime laborum, tempora ullam? Architecto unde, hic, dolorum suscipit quis nam
vero atque aperiam eligendi blanditiis adipisci assumenda. Iusto voluptatum,
maiores, autem non cupiditate dolorum aliquam eos quasi eveniet culpa amet
voluptatibus inventore nulla quisquam tenetur. Enim doloribus voluptatem neque
tempora eos nemo, iusto eius, dolore quasi excepturi fugit quae vitae obcaecati
natus praesentium pariatur fugiat laboriosam ut. Beatae quos odio mollitia
repudiandae quis, quae ipsa ad nulla fugit consequuntur ab blanditiis odit quaerat
similique vero aliquam! Tempore inventore tempora culpa assumenda sunt
laborum dolore porro amet dolor fugit facilis id autem ratione, dicta aliquid!
Delectus blanditiis omnis, atque doloribus quam est, odit accusamus quod illo
eaque illum debitis saepe fuga dignissimos esse corporis officiis nostrum
voluptatem porro molestias quaerat animi. Alias voluptas molestias modi totam
eius facere veritatis velit accusantium?</p>
</body>
</html>
OUTPUT:-

Worksheet-2: CODE

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

Worksheet-2: CODE

Uploaded by

Copyright:

Available Formats

WORKSHEET-2

CODE:- <!DOCTYPE html>

<ol style="font-family: Georgia, 'Times New Roman', Times,

<p style="font-size: large;">least priority List</p>

Q2:- Design a timetable and display it in tabular format.

<h3 style="text-align: center;">20BCS11-B Timetable</h3>

<p class="red">This is a red paragraph</p>

<p class="purple">This is a purple paragraph</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti,

You might also like