COMPUTER APPLICATION
(165)
COMPUTER APPLICATION
Practical File
(Session: 2024-25)
HTML PRACTICAL PROGRAMS
For
Class - X
Submitted By: Submitted To:
Sahitya Bhushan Drishti Baranwal
BALUNI PUBLIC SCHOOL, AGRA
Index of Programs
S.No. Program Page No.
1. Task No.1 1
2. Task No.2 3
3. Task No.3 5
4. Task No.4 8
5. Task No.5 10
6. Task No.6 12
7. Task No.7 14
8. Task No.8 16
9. Task No.9 18
10. Task No.10 20
11. Task No.11 22
12. Task No.12 25
13. Task No.13 27
14. Task No.14 29
15. Task No.15 31
16. Task No.16 33
17. Task No.17 35
18. Task No.18 37
19. Task No.19 39
20. Task No.20 41
21. Task No.21 44
22. Task No.22 46
23. Task No.23 48
24. Task No.24 51
25. Task No.25 54
Task No-1
Program: Write an HTML program to create a webpage with
a heading “Welcome to My Blog” in blue, size 36px, and a
paragraph in black, size 16px.
Input:
<html>
<head>
</head>
<body>
<h1 style="color:blue;font-size:36px;"> Welcome to My
Blog</h1>
<p style="color:black;font-size:16px;"> This year I'm in
Class 10th and will attempt CBSE Board examination. I'm
Hoping for good score in it. Although I do not have a good
score in my half yearly exam but I can make sure that it will
not be in Boards.
</body>
</html>
1
Task No-1
Program: Write an HTML program to create a webpage with
a heading “Welcome to My Blog” in blue, size 36px, and a
paragraph in black, size 16px.
Output:
2
Task No-2
Program: Create a webpage with an ordered list of your top 5
favorite books using the <ol> tag. Set the font color to dark
green and the background color to light yellow.
Input:
<html>
<head>
</head>
<body bgcolor="yellow">
<h3> My Top 5 favourite books</h3>
<ol type="1"><font color="green">
<li>Concepts of Physics Vol.1& Vol.2</li>
<li> Plant Physiology by Lincoln Taiz & Eduardo
Zeiger</li>
<li>Artificial Intelligence</li>
<li>Thinking Fast, and Slow</li>
<li>Atomic Habits </li>
</font>
</body>
</html>
3
Task No-2
Program: Create a webpage with an ordered list of your top 5
favorite books using the <ol> tag. Set the font color to dark
green and the background color to light yellow.
Output:
4
Task No-3
Program: Write an HTML program to create a webpage with a
table of 3 columns (Name, Age, Grade) and 4 rows. Set the
table border to 2px solid black and the background color of the
header row to light gray.
Input:
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
border: 2px solid black;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: lightgray;
}
</style>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>GRADE</th>
5
</tr>
<tr>
<td>Priyansh Gaur</td>
<td> 15</td>
<td>A+</td>
</tr>
<tr>
<td>Stuti Saxena</td>
<td>15</td>
<td>A+</td>
</tr>
<tr>
<td>Om Tripathi</td>
<td>15</td>
<td>A+</td>
</tr>
<tr>
<td> Suchit Bhushan</td>
<td> 15</td>
<td>A+</td>
</table>
</body>
</html>
6
Task No-3
Program: Write an HTML program to create a webpage with a
table of 3 columns (Name, Age, Grade) and 4 rows. Set the
table border to 2px solid black and the background color of the
header row to light gray.
Output:
7
Task No-4
Program: Create a webpage with an image of your choice
using the <img> tag. Set the image width to 500px and height
to 300px, and add alternative text “Beautiful Landscape”.
Input:
<html>
<head>
</head>
<body>
<IMG
SRC="C:\Users\Use\Pictures\Screenshots\Screenshot
(57).png" WIDTH="500px" HEIGHT="300px" ALT="Beautiful
Landscape">
</body>
</html>
8
Task No-4
Program: Create a webpage with an image of your choice
using the <img> tag. Set the image width to 500px and height
to 300px, and add alternative text “Beautiful Landscape”.
Output:
9
Task No-5
Program: Write an HTML program to create a webpage that
contains a bulleted list of three hobbies. The list items should
be bold, with a text color of dark red, and the background color
of the list should be light blue.
Input:
<html>
<head>
</head>
<body bgcolor="Light Blue">
<h4> Three Hobbies</h4>
<ul type="disc">
<b><Font color="Dark Red">
<li>Reading Books</li>
<li>Playing Cricket</li>
<li>Drawing&Painting</li>
</Font></b>
</body>
</html>
10
Task No-5
Program: Write an HTML program to create a webpage that
contains a bulleted list of three hobbies. The list items should
be bold, with a text color of dark red, and the background color
of the list should be light blue.
Output:
11
Task No-6
Program: Write an HTML program to create a simple
webpage with a form. The form should contain input fields for
“First Name” and “Email”, and a “Submit” button. Set the font
size to 14px, and align the form fields vertically.
Input:
<html>
<head>
</head>
<body>
<form><font size="14">
First Name:<input type="text" size="30px" value="Enter
First Name"><br>
<br>
Email:<input type="text" size="30px" value="Enter
Email"><br>
<br>
<input type="submit" value="submit">
</font>
</form>
</body>
</html>
12
Task No-6
Program: Write an HTML program to create a simple
webpage with a form. The form should contain input fields for
“First Name” and “Email”, and a “Submit” button. Set the font
size to 14px, and align the form fields vertically.
Output:
13
Task No-7
Program: Write an HTML program to create a webpage that
displays text using the <big> and <small> tags. Make the words
“Hello World” appear larger using <big>, and the word “fine”
appear smaller using <small>.
Input:
<html>
<head>
</head>
<body>
<big>Hello World</big>, I am <small>Fine.</small> How
are you?
</body>
</html>
14
Task No-7
Program: Write an HTML program to create a webpage that
displays text using the <big> and <small> tags. Make the words
“Hello World” appear larger using <big>, and the word “fine”
appear smaller using <small>.
Output:
15
Task No-8
Program: Write an HTML program to create a webpage that
displays the chemical formula H2O and E=mc2 using the <sup>
and <sub> tags. Set the font color to blue.
Input:
<html>
<head>
</head>
<body><font color="Blue">
H<sub>2</sub>O <br>
E=mc<sup>2</sup>
</font>
</body>
</html>
16
Task No-8
Program: Write an HTML program to create a webpage that
displays the chemical formula H2O and E=mc2 using the <sup>
and <sub> tags. Set the font color to blue.
Output:
17
Task No-9
Program: Write an HTML program to create a webpage with a
form containing radio buttons for selecting “male” or “female”,
and a checkbox to agree to the terms and conditions. Style the
radio buttons and checkbox to have a 20px size.
Input:
<html>
<head>
</head>
<body>
<form>
<h3> Form</h3>
Gender:<input type="radio" name="gender" value="Male"
Style="height:20px;width:20px;">Male
<input type="radio" name="gender"
value="Female" Style="height:20px;width:20px;">Female
<br>
<input type="checkbox" Style="height:20px;width:20px;">
I agree to the Terms and Conditions
</form>
</body>
</html>
18
Task No-9
Program: Write an HTML program to create a webpage with a
form containing radio buttons for selecting “male” or “female”,
and a checkbox to agree to the terms and conditions. Style the
radio buttons and checkbox to have a 20px size.
Output:
19
Task No-10
Program: Create a webpage with a heading “Contact Us” and
a paragraph below it. Style the heading to be in red, size 24px,
and apply a border around the paragraph with 1px solid black
and 10px padding.
Input:
<html>
<head>
</head>
<body>
<h1 style="color:Red;
Font-size:24px;">
Contact Us</h1>
<p style="Border-style:Solid;
Border-width:1px;
padding:10px;">
If you have any questions or need further information, feel
free to reach out to us.</p>
</body>
</html>
20
Task No-10
Program: Create a webpage with a heading “Contact Us” and
a paragraph below it. Style the heading to be in red, size 24px,
and apply a border around the paragraph with 1px solid black
and 10px padding.
Output:
21
Task No-11
Program: Write an HTML program to create a webpage with a
table that has alternating row colors (white and light gray) and
is center-aligned on the page. Set the table width to 80% of the
screen width.
Input:
<html>
<head>
<style>
table{
border-collapse:collapse;
width:80%;
border:1px solid black;
}
td,tr,th{
text-align:center;
border:1px solid black;
}
</style>
</head>
<body>
<center>
<table>
<tr style=”background-color:lightgray”>
<th>NAME</th>
<th>AGE</th>
<th>GRADE</th>
</tr style=”background-color:white”>
<tr>
<td>Priyansh Gaur</td>
22
<td> 15</td>
<td>A+</td>
</tr>
<tr style=”background-color:lightgray”>
<td>Stuti Saxena</td>
<td>15</td>
<td>A+</td>
</tr>
<tr style=”background-color:white”>
<td>Om Tripathi</td>
<td>15</td>
<td>A+</td>
</tr>
<tr style=”background-color:lightgray”>
<td> Suchit Bhushan</td>
<td> 15</td>
<td>A+</td>
</table></center>
</body>
</html>
23
Task No-11
Program: Write an HTML program to create a webpage with a
table that has alternating row colors (white and light gray) and
is center-aligned on the page. Set the table width to 80% of the
screen width.
Output:
24
Task No-12
Program: Create a webpage with a heading and two
paragraphs. Use internal CSS to set heading text to bold, size
28px, and the paragraphs to have 1.5 line spacing and a font
size of 16px.
Input:
<html>
<head>
<style>
h1 {
font-weight: bold;
font-size: 28px;
}
p {line-height: 1.5;
font-size: 16px;}
</style>
</head>
<body>
<h1>PLAGIARISM</h1>
<p>When you search and open an information on the
net, about any topic and copy it partially or fully to develop
a new content material and depict it as your own
ownership, it is immorial and it is termal as plagiarism.</p>
<p>Plagiarism is the act of copying someone else's work
and publishing and pretending as if it is one's own
work.This can include copying of texts, media and even
ideas. Whenever another person's work is copied and
repulished without an appropriate reference or citation, it
is considered as Plagiarism.</p>
</body>
</html>
25
Task No-12
Program: Create a webpage with a heading and two
paragraphs. Use internal CSS to set heading text to bold, size
28px, and the paragraphs to have 1.5 line spacing and a font
size of 16px.
Output:
26
Task No-13
Program: Write an HTML program to create a login webpage
with fields for “username” and “password”, and a “Login” button.
Align the form to the center of the page and apply a
background color of light gray.
Input:
<html>
<head>
</head>
<body bgcolor="light gray">
<center>
<h1> Login:</h1>
<form style="font-size:22px;">
Username:<input type="text box" value="Enter Username"
style="height:23px;width:150px;"><br>
Password:<input type="password" name="password"
style="height:23px;width:150px;"><br><br>
<input type="submit" value="login"
style="height:25px;width:50px;font-size:16px;text-
align:center;">
</form>
</center>
</body>
</html>
27
Task No-13
Program: Write an HTML program to create a login webpage
with fields for “username” and “password”, and a “Login” button.
Align the form to the center of the page and apply a
background color of light gray.
Output:
28
Task No-14
Program: Write an HTML program to create a registration
webpage with input fields for “Name”, “Email”, and “Password”.
Add a “Submit” button and set the form background color to
light gray.
Input:
<html>
<head>
</head>
<body bgcolor="lightgray">
<center>
<h1>Registration Form</h1>
<form style="font-size:21px;">
Name:<input type="text box" value="Enter Name"
style="height:23px;width:150px;"><br>
Email:<input type="text box" value="Enter Email"
style="height:23px;width:150px;"><br>
Password:<input type="password" name="password"
style="height:23px;width:150px;"><br><br>
<input type="submit" value="Submit"
style="height:25px;width:70px;font-size:16px;text-
align:center;">
</form></center>
</body>
</html>
29
Task No-14
Program: Write an HTML program to create a registration
webpage with input fields for “Name”, “Email”, and “Password”.
Add a “Submit” button and set the form background color to
light gray.
Output:
30
Task No-15
Program: Create a webpage that displays a video using the
<video> tag. Set the video width to 600px, include controls, and
add a fallback message “Your browser does not support the
video tag” if the video cannot be played.
Input:
<html>
<head>
</head>
<body>
<video width="600" controls>
<source src="C:\Users\Use\Downloads\Insert audio video
in html page _ Class 10th _ computer Applications.mp4"
type="video/mp4">Your browser does not support the
video tag
</video>
</body>
</html>
31
Task No-15
Program: Create a webpage that displays a video using the
<video> tag. Set the video width to 600px, include controls, and
add a fallback message “Your browser does not support the
video tag” if the video cannot be played.
Output:
32
Task No-16
Program: Write an HTML program to create a webpage with a
form containing a dropdown list of five countries and a “submit”
button. Set the form’s font size to 16px, and apply a border of
2px solid blue to the dropdown list.
Input:
<html>
<head>
</head>
<body bgcolor="lightgray">
<center>
<h1>Drop-Down Menu</h1>
<form style="font-size:20px;">
Select your Country:
<select name="list name" style="font-size:16px;Border-
width:2px;border-style:solid;border-color:blue;">
<option>India
<option>United Kingdom
<option>United States Of America
<option>Australia
<option>Russia
</select> <br><br>
<input type="submit" value="Submit">
</form></center>
</body>
</html>
33
Task No-16
Program: Write an HTML program to create a webpage with a
form containing a dropdown list of five countries and a “submit”
button. Set the form’s font size to 16px, and apply a border of
2px solid blue to the dropdown list.
Output:
34
Task No-17
Program: Write an HTML program to style the first letter of a
paragraph using CSS. Set the first letter to be bold, font size
40px, and the rest of the test to be in normal font.
Input:
<html>
<head>
<style>
p:first-letter{font-size:40px;font-style:bold}
</style>
</head>
<body>
<p>This is a testing paragraph to check that first letter of
paragraph is customizes.
</body>
</html>
35
Task No-17
Program: Write an HTML program to style the first letter of a
paragraph using CSS. Set the first letter to be bold, font size
40px, and the rest of the test to be in normal font.
Output:
36
Task No-18
Program: Write an HTML program to create a webpage with
a heading and apply an external CSS file to style it. Set the
heading color to purple and the font size to 32px.
Input:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ques18.css">
</head>
<body>
<h1>HEADING BY EXTERNAL STYLESHEET</h1>
</body>
</html>
37
Task No-18
Program: Write an HTML program to create a webpage with
a heading and apply an exteral CSS file to style it. Set the
heading color to purple and the font size to 32px.
Output:
38
Task No-19
Program: Create a webpage that plays an audio file using the
<audio> tag. Add controls to the audio player, set it to
autoplay when the page loads, and include a fallback
message “Your browser does not support the audio element”.
Input:
<html>
<head>
</head>
<body>
<audio controls autoplay>
<source src="C:\Users\Use\Downloads\Insert audio video
in html page _ Class 10th _ computer Applications.mp3"
type="audio/mp3"> your browser does not support the
audio element
</audio>
</body>
</html>
39
Task No-19
Program: Create a webpage that plays an audio file using the
<audio> tag. Add controls to the audio player, set it to
autoplay when the page loads, and include a fallback
message “Your browser does not support the audio element”.
Output:
40
Task No-20
Program: Create a webpage that displays a table with 3 rows
and 2 columns, where the text in the first row is bold and
center-aligned, with a border of 1px solid black around the
entire table.
Input:
<html>
<head>
<style>
table {
border: 1px solid black;
width:50%;
}
th {
border: 1px solid black;
text-align: center;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>GRADE</th>
</tr>
<tr>
<td>Priyansh Gaur</td>
41
<td> 15</td>
<td>A+</td>
</tr>
<tr>
<td>Stuti Saxena</td>
<td>15</td>
<td>A+</td>
</tr>
<tr>
</table>
</body>
</html>
42
Task No-20
Program: Create a webpage that displays a table with 3 rows
and 2 columns, where the text in the first row is bold and
center-aligned, with a border of 1px solid black around the
entire table.
Output:
43
Task No-21
Program: Write the HTML code for the following that appear
one after the other:
• The content “We are Proud to Present” in a new line.
• A horizontal rule across the page.
• Next content “Orbit” in the new line.
• Next content “The Geometric Juggler” in the new line.
• Another Horizontal rule.
Input:
<html>
<head>
</head>
<body><font size=+3>
We are Proud to Present
<hr>
Orbit<br>
The Geometric Juggler
<hr>
</font>
</body>
</html>
44
Task No-21
Program: Write the HTML code for the following that appear
one after the other:
• The content “We are Proud to Present” in a new line.
• A horizontal rule across the page.
• Next content “Orbit” in the new line.
• Next content “The Geometric Juggler” in the new line.
• Another Horizontal rule.
Output:
45
Task No-22
Program: Write the coding for giving the heading “ORANGE
EDUCATION” using Heading tags, Font style as Algerian, text
color as green. Body text color as blue, background as sky,
alignment as center, font style of body text as brush script,
size=15. The text for body is as follows:
Education is the ability to listen to almost anything without
losing your temper or your self-confidence.
Input:
<html>
<head></head>
<body
background="C:\Users\Use\Pictures\Screenshots\sky.png"
>
<center>
<font color="green" face="algerian"><h1>ORANGE
EDUCATION</h1></font><br>
<font color="blue" face="brush script MT"
size="15">Education is the ability to listen to almost
anything without losing your temper or your self-
confidence.</font>
</center>
</body>
</html>
46
Task No-22
Program: Write the coding for giving the heading “ORANGE
EDUCATION” using Heading tags, Font style as Algerian, text
color as green. Body text color as blue, background as sky,
alignment as center, font style of body text as brush script,
size=15. The text for body is as follows:
Education is the ability to listen to almost anything without
losing your temper or your self-confidence.
Output:
47
Task No-23
Program: Write HTML codes to obtain the following on web
page:
• The heading should be in red colour.
• The column of Sl. No. should be aligned to center.
• The entire table should be in yellow colour.
Input:
<html>
<head>
</head>
<body>
<table border="1" bgcolor="yellow">
<tr>
<th colspan="5"><font color="red">Progress Report of
ROHAN</font></th>
</tr>
<tr>
<th>Sl. No.</th>
<th>Subject</th>
<th>Full Marks</th>
<th>Pass Marks</th>
<th>Marks Obtained</th>
</tr>
<tr>
48
<td><center>1</center></td>
<td>English</td>
<td>100</td>
<td>35</td>
<td>74</td>
</tr>
<tr>
<td><center>2</center></td>
<td>Hindi</td>
<td>100</td>
<td>35</td>
<td>65</td>
</tr>
<tr>
<td><center>3</center></td>
<td>Maths</td>
<td>100</td>
<td>40</td>
<td>84</td>
</tr>
<tr>
<td><center>4</center></td>
<td>S.St</td>
<td>100</td>
<td>40</td>
<td>75</td>
</tr>
</table>
</body>
<html>
49
Task No-23
Program: Write HTML codes to obtain the following on web
page:
• The heading should be in red colour.
• The column of Sl. No. should be aligned to center.
• The entire table should be in yellow colour
Output:
50
Task No-24
Program: Write HTML codes to obtain the output (use the
previous table) as given in notes:
• Apply proper border to the table.
• The first row should be like heading.
• The background colour of table should be white.
• The background colour of web page should be aqua.
• The content of table should be aligned to center.
Input:
<html>
<head>
<style>
Th,td{text-align:center;}
</style>
</head>
<body bgcolor=”aqua”>
<center>
<table border="3" bgcolor=”white”>
<tr>
<th colspan="5”>Progress Report of ROHAN</th>
</tr>
<tr>
<th>Sl. No.</th>
<th>Subject</th>
<th>Full Marks</th>
<th>Pass Marks</th>
<th>Marks Obtained</th>
</tr>
<tr>
<td>1</td>
51
<td>English</td>
<td>100</td>
<td>35</td>
<td>74</td>
</tr>
<tr>
<td>2</td>
<td>Hindi</td>
<td>100</td>
<td>35</td>
<td>65</td>
</tr>
<tr>
<td>3</td>
<td>Maths</td>
<td>100</td>
<td>40</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>S.St</td>
<td>100</td>
<td>40</td>
<td>75</td>
</tr>
</table>
</center>
</body>
<html>
52
Task No-24
Program: Write HTML codes to obtain the output (use the
previous table) as given in notes:
• Apply proper border to the table.
• The first row should be like heading.
• The background colour of table should be white.
• The background colour of web page should be aqua.
• The content of table should be aligned to center.
Ouput:
53
Task No-25
Program: Write HTML codes to generate a web page with the
following details:
• The title of the page is “University of Professional Studies”
• The heading of the page is same as the title which should
be bold and italic.
• The subheading of the page contains the text “Reaching
to New Heights” and it should be underlined.
• Insert an image in the web page and align it as center.
Adjust the border, width, height, hspace and vspace.
• Use Alt feature and insert the text ‘Deemed University’.
• Display the list of contents and also insert hyperlink to the
text.
Input:
<html>
<head>
<title>University of Professional Studies</title>
</head>
<body bgcolor="#FF8886"><font color="green">
<h1 align="center"><i><b>University of Professional
Studies</b></i></h1>
<h2 align="center"><u>Reaching To New
Heights</u></h2></font>
<p><img
src="C:\Users\Use\Pictures\Screenshots\University.png"
align="middle" border="2" width="300" height="250"
hspace="610" vspace="2" alt="deemed university">
<h2><font color="red"><u>About
University</u></font></h2>
<p><font size="4" color="purple">
54
The university came into existence on the beginning of 60's as
a teaching-cum-affliating university. Since Its inception the
university has been alive to the ever increasing demands of
higher education. Keeping apace changing times, the university
today offers many Vocational courses. For the less privileged
students coming from the scheduled tribes or backward
classes, special coaching classes are organised from time to
time to prepare them for competitive examinations.
<p>1.Bachelor Degree Programs
<ul type="disc">
<li><a
href="C:\Users\Use\Desktop\ques18.html">Commerce</a>
<li><a
href="C:\Users\Use\Desktop\ques18.html">Science</a>
<li><a href="C:\Users\Use\Desktop\ques18.html">Arts</a>
</font>
</body>
<html>
55
Task No-25
Program: Write HTML codes to generate a web page with the
following details:
• The title of the page is “University of Professional Studies”
• The heading of the page is same as the title which should
be bold and italic.
• The subheading of the page contains the text “Reaching
to New Heights” and it should be underlined.
• Insert an image in the web page and align it as center.
Adjust the border, width, height, hspace and vspace.
• Use Alt feature and insert the text ‘Deemed University’.
• Display the list of contents and also insert hyperlink to the
text.
Output:
56
