HTML
1. Hello World Program
<!DOCTYPE html>
<html>
<head>
<title>Hello Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML program.</p>
</body>
</html>
2. Simple Web Page with Headings
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Small Heading</h3>
</body>
</html>
3. Paragraph and Line Breaks
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.<br>With a line break.</p>
</body>
</html>
4. Add an Image
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>My Favorite Animal</h1>
<img src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>
5. Create a Simple Link
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<p>Visit my <a href="https://www.google.com" target="_blank">favorite website</a>.</p>
</body>
</html>
6. Create a List (Ordered & Unordered)
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Butter</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Study HTML</li>
</ol>
</body>
</html>
7. Simple Table
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<h2>Student Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Ali</td>
<td>A</td>
</tr>
<tr>
<td>Fatima</td>
<td>B</td>
</tr>
</table>
</body>
</html>
8. Simple Form
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h2>Contact Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
9. Use of Inline CSS for Styling
<!DOCTYPE html>
<html>
<head>
<title>Styled Text</title>
</head>
<body>
<h1 style="color: blue;">Welcome to HTML</h1>
<p style="font-size: 18px; color: green;">This is a styled paragraph using inline CSS.</p>
</body>
</html>
10. HTML Page with Background Color
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body style="background-color: lightyellow;">
<h1>Colorful Page</h1>
<p>This page has a background color!</p>
</body>
</html>
11. Marquee Tag (Moving Text)
<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<marquee>Welcome to HTML Learning!</marquee>
</body>
</html>
12. HTML with Audio
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h2>Listen to this audio:</h2>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
13. HTML with Video
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h2>Watch this video:</h2>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
14. HTML with Comments
<!DOCTYPE html>
<html>
<head>
<title>Comments in HTML</title>
</head>
<body>
<h1>My Page</h1>
<!-- This is a comment. It won’t be displayed. -->
<p>This is a paragraph.</p>
</body>
</html>
15. HTML with Button and Alert
<!DOCTYPE html>
<html>
<head>
<title>Button Alert</title>
<script>
function sayHello() {
alert("Hello, HTML Learner!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Click Me!</button>
</body>
</html>
16. Create a Simple Login Form (Not functional, just design)
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form>
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
17. Nested List (List inside List)
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h2>My Schedule</h2>
<ul>
<li>Morning
<ul>
<li>Wake Up</li>
<li>Exercise</li>
</ul>
</li>
<li>Evening
<ul>
<li>Study</li>
<li>Dinner</li>
</ul>
</li>
</ul>
</body>
</html>
18. Use of <span> and <div>
<!DOCTYPE html>
<html>
<head>
<title>Span and Div</title>
</head>
<body>
<div style="background-color: lightblue; padding: 10px;">
<h2>This is inside a div</h2>
<p>This is a <span style="color: red;">red</span> word inside a paragraph.</p>
</div>
</body>
</html>
19. HTML Page with Emoji
<!DOCTYPE html>
<html>
<head>
<title>Emoji Fun</title>
</head>
<body>
<h1>Welcome 😄</h1>
<p>I ❤️ HTML!</p>
</body>
</html>
20. HTML Page with Multiple Sections
<!DOCTYPE html>
<html>
<head>
<title>Multi-section Page</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<p><a href="#">Home</a> | <a href="#">About</a></p>
</nav>
<main>
<h2>Welcome!</h2>
<p>This is my content.</p>
</main>
<footer>
<p>Copyright © 2025</p>
</footer>
</body>
</html>
21. Create a Registration Form
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Student Registration</h2>
<form>
Name: <input type="text"><br><br>
Email: <input type="email"><br><br>
Age: <input type="number"><br><br>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
22. Use of <iframe> to Embed a Website
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h2>Embedded Google</h2>
<iframe src="https://www.google.com" width="600" height="400"></iframe>
</body>
</html>
23. Use of <details> and <summary>
<!DOCTYPE html>
<html>
<head>
<title>Details and Summary</title>
</head>
<body>
<h2>FAQ</h2>
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language.</p>
</details>
</body>
</html>
24. Highlight Text Using <mark>
<!DOCTYPE html>
<html>
<head>
<title>Highlight Example</title>
</head>
<body>
<p>This is a <mark>highlighted</mark> text using the mark tag.</p>
</body>
</html>
25. Use of <code> and <pre>
<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
</head>
<body>
<h2>Python Code:</h2>
<pre>
<code>
def hello():
print("Hello, world!")
</code>
</pre>
</body>
</html>
26. Create a Resume Structure
<!DOCTYPE html>
<html>
<head>
<title>Resume</title>
</head>
<body>
<h1>John Doe</h1>
<p>Email: john@example.com</p>
<h2>Education</h2>
<ul>
<li>Bachelor of Science in Computer Science</li>
</ul>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>Python</li>
</ul>
</body>
</html>
27. Image as Link
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image</title>
</head>
<body>
<a href="https://www.wikipedia.org" target="_blank">
<img src="https://via.placeholder.com/150" alt="Click to open Wikipedia">
</a>
</body>
</html>
28. Create a Simple Contact Us Page
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h2>Contact Us</h2>
<form>
Your Name: <input type="text"><br><br>
Message:<br>
<textarea rows="5" cols="40"></textarea><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>
29. Create a Table with Caption
<!DOCTYPE html>
<html>
<head>
<title>Table with Caption</title>
</head>
<body>
<table border="1">
<caption>Top 3 Programming Languages</caption>
<tr>
<th>Language</th>
<th>Rank</th>
</tr>
<tr>
<td>Python</td>
<td>1</td>
</tr>
<tr>
<td>JavaScript</td>
<td>2</td>
</tr>
<tr>
<td>Java</td>
<td>3</td>
</tr>
</table>
</body>
</html>
30. Add Favicon (Tab Icon)
<!DOCTYPE html>
<html>
<head>
<title>Favicon Example</title>
<link rel="icon" href="https://www.w3schools.com/favicon.ico" type="image/x-icon">
</head>
<body>
<h2>Check the tab for the icon!</h2>
</body>
</html>
Comments
Post a Comment