These are few codes html
1. Add Audio and Video
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Media Example</title>
</head>
<body>
<h1>Audio</h1>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h1>Video</h1>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
2. Basic HTML Template
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Project</title>
</head>
<body>
<h1>Welcome to My Project</h1>
<p>This is a sample paragraph for the project work.</p>
</body>
</html>
3.HTML with Navigation Bar
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project with Navigation</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<h1>Home</h1>
<p>Welcome to the homepage of my project.</p>
</body>
</html>
4.Simple Calculator (HTML + JavaScript)
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<input type="number" id="num1"> +
<input type="number" id="num2">
<button onclick="add()">Calculate</button>
<p id="result"></p>
<script>
function add() {
let n1 = parseFloat(document.getElementById("num1").value);
let n2 = parseFloat(document.getElementById("num2").value);
let sum = n1 + n2;
document.getElementById("result").innerText = "Result: " + sum;
}
</script>
</body>
</html>
5. HTML Table (Data Display)
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Student Marks</title>
</head>
<body>
<h1>Student Marks Table</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Jane</td>
<td>Science</td>
<td>89</td>
</tr>
</table>
</body>
</html>
6.Image Gallery Page
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Gallery</h1>
<img src="image1.jpg" alt="Image 1" width="200">
<img src="image2.jpg" alt="Image 2" width="200">
<img src="image3.jpg" alt="Image 3" width="200">
</body>
</html>
7.Buttons with Styling (CSS)
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Styled Button</title>
<style>
.my-button {
background-color: #4CAF50;
color: white;
padding: 15px 25px;
border: none;
border-radius: 5px;
8.Timeline
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Timeline</title>
<style>
.timeline {
list-style: none;
padding: 0;
}
.timeline li {
border-left: 4px solid #007BFF;
margin: 10px 0;
padding-left: 10px;
}
</style>
</head>
<body>
<h2>Project Timeline</h2>
<ul class="timeline">
<li>2023 - Idea Started</li>
<li>2024 - First Demo</li>
<li>2025 - Final Presentation</li>
</ul>
</body>
</html>
9.Countdown Timer
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Countdown</title>
</head>
<body>
<h2 id="countdown"></h2>
<script>
let count = 10;
let countdown = document.getElementById("countdown");
let interval = setInterval(() => {
countdown.textContent = "Countdown: " + count;
count--;
if (count < 0) {
clearInterval(interval);
countdown.textContent = "Time's up!";
}
}, 1000);
</script>
</body>
</html>
10.Dark / Light Mode Toggle
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode</title>
<style>
body {
background: white;
color: black;
transition: 0.4s;
}
body.dark {
background: #111;
color: white;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<button onclick="toggleMode()">Toggle Dark Mode</button>
<script>
function toggleMode() {
document.body.classList.toggle("dark");
}
</script>
</body>
</html>
Listen to Article:
0 Comments