Scribd
Upload
3 views14 pages

20HTML Programs

The document contains 20 basic HTML programming tasks, each accompanied by code examples to demonstrate various HTML features such as page structure, headings, paragraphs, images, tables, lists, text formatting, hyperlinks, and forms. Users are encouraged to run the provided code in a browser to see the output. Each task serves as a practical exercise for learning HTML fundamentals.

Uploaded by

v.ganeshwari2006
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
3 views14 pages

20HTML Programs

The document contains 20 basic HTML programming tasks, each accompanied by code examples to demonstrate various HTML features such as page structure, headings, paragraphs, images, tables, lists, text formatting, hyperlinks, and forms. Users are encouraged to run the provided code in a browser to see the output. Each task serves as a practical exercise for learning HTML fundamentals.

Uploaded by

v.ganeshwari2006
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

HTML Basic Programs — 20

Practice Questions
Each question below states a task and gives the
HTML program (code) that solves it. Try running the
code yourself in a browser to see the output.

1. Write a program to display the basic


structure of an HTML page.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>

2. Write a program to display a heading and


a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Heading and Paragraph</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a simple paragraph of text
in HTML.</p>
</body>
</html>

3. Write a program to display all six heading


levels (h1 to h6).
<!DOCTYPE html>
<html>
<head>
<title>Heading Levels</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
4. Write a program to insert an image using
the <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>Insert Image</title>
</head>
<body>
<h2>My Favorite Picture</h2>
<img src="[Link]" alt="A nice
picture" width="300" height="200">
</body>
</html>

5. Write a program to create a simple table


with rows and columns.
<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>21</td>
</tr>
<tr>
<td>Sita</td>
<td>22</td>
</tr>
</table>
</body>
</html>

6. Write a program to change the font size of


text using the <font> tag (or CSS style).
<!DOCTYPE html>
<html>
<head>
<title>Font Size</title>
</head>
<body>
<p style="font-size:30px;">This text is
large.</p>
<p style="font-size:12px;">This text is
small.</p>
</body>
</html>
7. Write a program to change the font color
and font family of text.
<!DOCTYPE html>
<html>
<head>
<title>Font Color and Family</title>
</head>
<body>
<p style="color:blue; font-
family:Arial;">This is blue text in Arial
font.</p>
<p style="color:red; font-family:'Times
New Roman';">This is red text in Times New
Roman font.</p>
</body>
</html>

8. Write a program to align text to center,


left, and right.
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment</title>
</head>
<body>
<p style="text-align:left;">This text
is left aligned.</p>
<p style="text-align:center;">This text
is center aligned.</p>
<p style="text-align:right;">This text
is right aligned.</p>
</body>
</html>

9. Write a program to display text in bold,


italic, and underlined format.
<!DOCTYPE html>
<html>
<head>
<title>Bold Italic Underline</title>
</head>
<body>
<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><u>This text is underlined.</u></p>
</body>
</html>

10. Write a program to create an ordered list


and an unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h3>Ordered List</h3>
<ol>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ol>

<h3>Unordered List</h3>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</body>
</html>

11. Write a program to insert a hyperlink to


another website.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<p>Click below to visit Google:</p>
<a href="[Link] to
Google</a>
</body>
</html>

12. Write a program to set a background


color for the page.
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body style="background-
color:lightyellow;">
<h1>This page has a light yellow
background.</h1>
</body>
</html>

13. Write a program to insert a line break


and a horizontal rule.
<!DOCTYPE html>
<html>
<head>
<title>Line Break and Horizontal
Rule</title>
</head>
<body>
<p>This is the first line.<br>This is
the second line, right after a line break.
</p>
<hr>
<p>This paragraph comes after a
horizontal rule.</p>
</body>
</html>

14. Write a program to add a comment


inside an HTML document.
<!DOCTYPE html>
<html>
<head>
<title>HTML Comment</title>
</head>
<body>
<!-- This is a comment. It will not be
shown in the browser. -->
<p>This paragraph is visible to the
user.</p>
</body>
</html>

15. Write a program to merge (span) two


columns in a table using colspan .
<!DOCTYPE html>
<html>
<head>
<title>Table Colspan</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Student
Details</th>
</tr>
<tr>
<td>Name</td>
<td>Amit</td>
</tr>
<tr>
<td>Class</td>
<td>10th</td>
</tr>
</table>
</body>
</html>

16. Write a program to merge (span) two


rows in a table using rowspan .
<!DOCTYPE html>
<html>
<head>
<title>Table Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="2">Science</td>
<td>Physics: 90</td>
</tr>
<tr>
<td>Chemistry: 85</td>
</tr>
</table>
</body>
</html>

17. Write a program to use the <div> and


<span> tags for grouping content.

<!DOCTYPE html>
<html>
<head>
<title>Div and Span</title>
</head>
<body>
<div style="border:1px solid black;
padding:10px;">
<p>This paragraph is inside a div
block with a border.</p>
<p>Here is a <span
style="color:green;">green colored
word</span> inside a sentence.</p>
</div>
</body>
</html>

18. Write a program to create a basic HTML


form with a text box and a submit button.
<!DOCTYPE html>
<html>
<head>
<title>Basic Form</title>
</head>
<body>
<form>
<label for="name">Enter your name:
</label>
<input type="text" id="name"
name="name">
<br><br>
<input type="submit"
value="Submit">
</form>
</body>
</html>
19. Write a program to display an image with
a caption using <figure> and <figcaption> .
<!DOCTYPE html>
<html>
<head>
<title>Image with Caption</title>
</head>
<body>
<figure>
<img src="[Link]" alt="Sunset
view" width="300">
<figcaption>A beautiful sunset over
the hills.</figcaption>
</figure>
</body>
</html>

20. Write a program combining headings,


paragraph, image, table, and alignment on
one page.
<!DOCTYPE html>
<html>
<head>
<title>Combined HTML Page</title>
</head>
<body>
<h1 style="text-align:center;">My
Profile Page</h1>
<p style="text-align:center; font-
size:18px;">Welcome to my basic HTML
profile page.</p>
<img src="[Link]" alt="Profile
picture" width="150" style="display:block;
margin:auto;">

<h3>My Details</h3>
<table border="1" style="margin:auto;">
<tr>
<th>Field</th>
<th>Value</th>
</tr>
<tr>
<td>Name</td>
<td>Your Name</td>
</tr>
<tr>
<td>City</td>
<td>Your City</td>
</tr>
</table>
</body>
</html>

You might also like