De Indian Public School
Pocket -11, Sector-24 Rohini, Delhi -110085
COMPUTER SCIENCE
PRACTICAL FILE
Name – Yash
Class – 10th A
Roll No – 43
Submitted To –
Sneha Jain Ma’am
1
Acknowledgement
I would like to express my special
thanks to my teacher Miss Sneha
Jain as well as Principal Ms.
Padmini Dubey Ojha who gave
me this golden opportunity to
make this wonderful project on
Topic - HTML which help me in
doing a lot of research work and
I came to know so many new
things. Secondly I would like to
thank my Parents who helped me
a lot in finalizing this project
within time flame.
2
CONTENTS
Serial No Practical Page No.
1. Applying Background 5,6
Color
2. Formatting the text 7,8
3. Applying different 9,10
Heading Styles
4. Aligning the text 11,12
Position
5. Using Paragraph Tag 13,14
6. Creating a Ordered List 15,16
7. Adding Images 17,18
8. Adding Tables 19,20
9. Creating Description 21,22
List
10. Background color of 23-25
Table
11. Creating Feedback 26-30
Form
12. Adding Images to 31-33
Table
3
13. Adding Hyperlink 34,35
14. Adding GIF to Web 36,37
Page
15. Applying Subscript and 38-41
Superscript
4
QUES 1. HOW TO SPECIFY THE
BACKGROUND COLOUR OF A WEB
PAGE?
<html>
<body style="background-color:powderblue;">
<h1>BGCOLOR ATTRIBUTE</h1>
<p> In HTML, the bgcolor attribute is used to
change the background color of an element
without the need for CSS. However, the bgcolor
attribute is deprecated and should not be used in
new websites. The correct attribute to use is
background-color. </p>
</body>
</html>
5
OUTPUT
QUES 2. HOW WE CAN MAKE A
TEXT APPEAR AS BOLD,
UNDERLINED AND ITALICISED?
<html>
</head>
<title> Formatting Text </title>
</head>
<body>
<h1> <b> This line is bold </b> </h1> <br>
<h1> <u> This line is underline </u> </h1> <br>
<h1> <I> This line is italicized </I> </h1>
</body>
</html>
7
OUTPUT
QUES 3. HOW WE CAN MAKE A
TEXT APPEAR IN DIFFERENT
HEADING STYLES?
<html>
<head>
<title> HEADING STYLES </title>
</head>
<body>
<h1>See Heading Level 1</h1>
<h2> See Heading Level 2</h2>
<h3> See Heading Level 3</h3>
<h4> See Heading Level 4</h4>
<h5> See Heading Level 5</h5>
<h6> See Heading Level 6</h6>
</body>
</html>
9
OUTPUT
QUES 4. HOW WE CAN ALIGN THE
POSITION OF VARIOUS
COMPONENTS LIKE TEXT,
PARAGRAPH IN A WEB PAGE?
<html>
<head> </head>
<body>
<font size = 25><p align=left> THIS LINE IS LEFT
ALIGNED.</p></font><br>
<font size = 25><p align=center> THIS LINE IS
CENTER ALIGNED.</p></font><br>
<font size = 25><p align=right> THIS LINE IS
RIGHT ALIGNED.</p></font><br>
<font size = 25><p align=justify> THIS LINE IS
JUSTIFIED.</p></font><br>
</body>
</html>
11
OUTPUT
QUES 5. HOW WE CAN BEGIN A
PARAGRAPH IN A TEXT?
<html>
<head> </head>
<body>
<p align = “right”> Work effectively and
efficiently while perform a task. <BR> The quality
of action shows the result and output </p>
<p align = “left”> Work effectively and efficiently
while perform a task. <BR> The quality of action
shows the result and output </p>
<p align = “center”> Work effectively and
efficiently while perform a task. <BR>The quality
of action shows the result and output </p>
</body>
</html>
13
OUTPUT
QUES 6. HOW WE CAN CREATE AN
ORDERED LIST?
<html>
<head> </head>
<body>
<h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Juice</li>
<li>Bread</li>
</ol>
</h1>
</body>
</html>
15
OUTPUT
QUES 7. HOW WE CAN ADD IMAGES
IN A WEB PAGE?
<html>
<head>
<title> IMAGE </title>
</head>
<body>
<center>
<h1>FUTURISTIC CITY</h1>
<align = center>
<img src="cityy.jpg" alt="CITY">
</align>
</center>
</body>
</html>
17
OUTPUT
QUES 8. HOW WE CAN ADD TABLES
IN A WEB PAGE?
<html>
<head> </head>
<body>
<CENTER>
<table border = 2>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
19
OUTPUT
QUES 9. HOW WE CAN CREATE
DESCRIPTION LIST IN A WEB
PAGE?
<html>
<head>
<title> DESCRIPTION LIST </title>
</head>
<body>
<h1>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</h1>
</body>
</html>
21
OUTPUT
QUES 10. HOW WE CAN SPECIFY
THE BACKGROUND COLOUR OF
TABLE IN A WEB PAGE?
<html>
<head>
<title> Table bgcolor Attribute </title>
</head>
<body>
<table border="2" Align = center height = 300
width = 300
bgcolor="green">
<caption>
Author Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
23
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</H1>
</table>
</body>
</html>
24
OUTPUT
25
QUES 11. HOW WE CAN CREATE A
FEEDBACK FORM?
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-
scale=1.0">
<title>Responsive Form Card</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Haldiram Sweets</h1>
<h3>Feedback Form </h3>
<div class="form-box">
<div class="textup">
<i class="fa fa-solid fa-clock"></i>
26
It only takes two minutes!!
</div>
<form>
<label for="uname">
<i class="fa fa-solid fa-user"></i>
Name
</label>
<input type="text" id="uname"
name="uname" required>
<label for="email">
<i class="fa fa-solid fa-envelope"></i>
Email Address
</label>
<input type="email" id="email"
name="email" required>
<label for="phone">
<i class="fa-solid fa-phone"></i>
Phone No
</label>
27
<input type="tel" id="phone"
name="phone" required>
<label>
<i class="fa-solid fa-face-smile"></i>
Do you satisfy with our service?
</label>
<div class="radio-group">
<input type="radio" id="yes"
name="satisfy" value="yes" checked>
<label for="yes">Yes</label>
<input type="radio" id="no"
name="satisfy" value="no">
<label for="no">No</label>
</div>
<label for="msg">
<i class="fa-solid fa-comments"
style="margin-right: 3px;"></i>
28
Write your Suggestions:
</label>
<textarea id="msg" name="msg"
rows="4" cols="10" required>
</textarea>
<button type="submit">
Submit
</button>
</form>
</div>
</body>
</html>
29
OUTPUT
30
QUES 12. HOW TO ADD IMAGE IN
AN HTML TABLE?
<html>
<head>
<title>Table with Images</title>
<style>
table {
margin: auto;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Image</th>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td><img src=
31
"boy.jpg"
alt="BOY" width="100"
height="100">
</td>
<td>Ramesh</td>
<td>xyz@gmail.com</td>
</tr>
<tr>
<td><img src=
"girl.jpg"
alt="GFG Logo" width="100"
height="100">
</td>
<td>Sheela</td>
<td>abc@gmail.com</td>
</tr>
</table>
</body>
</html>
32
OUTPUT
33
QUES 13. HOW TO ADD
HYPERLINK IN A WEB PAGE WITH
BACKGROUND COLOUR PINK?
<html>
<head>
<title>
HYPERLINK
</title>
<body>
<body bgcolor='pink'>
<h1>
<a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
</h1>
</body>
</html>
34
OUTPUT
35
QUES 14. HOW WE CAN ADD GIF IN
A WEB PAGE?
<html>
<body>
<center>
<h1>Diwali</h1>
<p> In 2024, Diwali falls on October 31,
illuminating homes,
streets, and temples with lights, lamps, and
decorations.
But, as we plan for the festivities, it's also essential
to be aware of the public holidays and bank
closures across
India that coincide with the Diwali
celebrations.</p>
<img src="diwali.gif" alt="Happy Diwali"
style="width:300px;height:300px;">
</center>
</body>
</html>
36
OUTPUT
37
QUES 15. HOW WE CAN ADD
SUPERSCRIPT AND SUBSCRIPT
EFFECT TO A TEXT?
<html>
<head>
<style>
sub {
vertical-align: sub;
font-size: medium;
}
</style>
</head>
<body>
<center>
<h1> <p>Examples to demonstrate Subscript
and Superscript text</p> </h1>
<h2> <p> Chemical formula of water is
H<sub>2</sub>O</p>
38
<p> The answer of 2 <sup> 2 </sup> is 4 </p>
</h2>
</center>
</body>
</html>
39
OUTPUT
40
Conclusion
Here I come to the end of this Computer
project. I would like to share my
experience while doing the project.
I learnt so many new things and it
was wonderful learning experience
for me while working on this project.
This project has increased my research
thinking skill and interest in this subject.
A very special thanks to my Computer
teacher Ms. Sneha for setting such
target for us. I enjoyed every bit of
making this project.
41
Bibliography
I ARYAN MAURYA, student of Class 10th-B have
completed this practical file with the help of my parent
and Subject Teacher.
I used –
• https://en.wikipedia.org/.
• https://www.greeksforgreeks.org/.
• https://www.youtube.com
• Textbook of Computer Applications
42
43
