Practical: 1
Write an HTML program to display an image on a web page.
<!DOCTYPE html
<head>
<title>Image Demo</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is an image displayed below:</p>
<img src="myphoto.jpg" alt="My Photo" width="300" height="200">
<p>Hope you like the image!</p>
</body>
</html>
Practical: 2
Write an HTML program to demonstrate different types of lists.
<!DOCTYPE html>
<html>
<head>
<title>List Demo</title>
</head>
<body>
<h2>My Favourite Hobbies (Unordered List)</h2>
<ul>
<li>Reading Books</li>
<li>Playing Badminton</li>
<li>Travelling</li>
</ul>
<h2>My Daily Routine (Ordered List)</h2>
<ol>
<li>Wake up at 6:00 AM</li>
<li>Exercise for 30 minutes</li>
<li>Study from 8:00 to 10:00 AM</li>
<li>Lunch and Relax</li>
<li>Evening Walk</li>
</ol>
<h2>Definition List – Computer Terms</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language – the standard markup for web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets – used for styling web pages.</dd>
<dt>JavaScript</dt>
<dd>A scripting language used to make web pages interactive.</dd>
</dl>
</body>
</html>
Practical: 3
Write an HTML program to create a table showing student marks.
<!DOCTYPE html>
<html>
<head>
<title>Table Demo</title>
</head>
<body>
<h1>Student Marks</h1>
<table border="1" cellpadding="5" cellspacing="2">
<caption>End-Semester Marks</caption>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks Obtained</th>
</tr>
<tr>
<td>Aisha</td>
<td>Maths</td>
<td>88</td>
</tr>
<tr>
<td>Rahul</td>
<td>Science</td>
<td>92</td>
</tr>
<tr>
<td>Priya</td>
<td>English</td>
<td>85</td>
</tr>
</table>
</body>
</html>
Practical: 4
Write an HTML program to create hyperlinks to internal and external web pages.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Demo</title>
</head>
<body>
<h1>Useful Links</h1>
<p>Visit the following websites for learning:</p>
<ul>
<li><a href="https://www.w3schools.com" target="_blank">W3Schools</a></li>
<li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
<li><a href="about.html">About Us (Internal Link)</a></li>
<li><a href="mailto:[email protected]">Email Us</a></li>
</ul>
</body>
</html>
Practical: 5
Write an HTML program to create a student registration form.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Student Registration</h1>
<form action="#" method="post">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="firstname" required><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lastname" required><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="10" max="100"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br><br>
<label for="hobbies">Select your hobbies:</label><br>
<input type="checkbox" name="hobbies" value="reading"> Reading
<input type="checkbox" name="hobbies" value="sports"> Sports<br><br>
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="india">India</option>
<option value="others">Others</option>
</select><br><br>
<input type="submit" value="Register">
<input type="reset" value="Reset">
</form>
</body>
</html>
Practical: 6
Write a JavaScript program to calculate the sum of two numbers.
<!DOCTYPE html>
<html>
<head>
<title>JS Calculation</title>
</head>
<body>
<h2>Sum of Two Numbers</h2>
<p id="result"></p>
<script>
let a = 12;
let b = 8;
let sum = a + b;
document.getElementById("result").innerText =
"The sum of " + a + " and " + b + " is: " + sum;
</script>
</body>
</html>
Practical: 7
Write a JavaScript program to check whether a person is eligible to vote or not.
<!DOCTYPE html>
<html>
<head>
<title>JS Conditional</title>
</head>
<body>
<h2>Check Voting Eligibility</h2>
<script>
let age = prompt("Enter your age:");
if (age >= 18) {
alert("You are eligible to vote.");
} else {
alert("You are not eligible to vote yet.");
</script>
</body>
</html>
Practical: 8
Write a JavaScript program to print the first 10 natural numbers using a loop.
<!DOCTYPE html>
<html>
<head>
<title>JS Loop Demo</title>
</head>
<body>
<h2>First 10 Natural Numbers</h2>
<p id="list"></p>
<script>
let output = "";
for (let i = 1; i <= 10; i++) {
output += i + " ";
document.getElementById("list").innerText = output;
</script>
</body>
</html>
Practical: 9
Write a JavaScript program to demonstrate use of arrays and built-in functions.
<!DOCTYPE html>
<html>
<head>
<title>JS Array Example</title>
</head>
<body>
<h2>Array of Names</h2>
<p id="namesList"></p>
<script>
let names = ["Amit", "Sunita", "Rohan", "Meena"];
names.push("Priya");
names.sort();
document.getElementById("namesList").innerText =
"Sorted names: " + names.join(", ");
</script>
</body>
</html>
Practical: 10
Write a JavaScript program to demonstrate use of window and location objects.
<!DOCTYPE html>
<html>
<head>
<title>JS Window & Location Demo</title>
</head>
<body>
<h2>Window & Location Object Example</h2>
<button id="showURL">Show Current URL</button>
<button id="goBack">Go Back</button>
<script>
document.getElementById("showURL").onclick = function() {
alert("Current URL is: " + window.location.href);
};
document.getElementById("goBack").onclick = function() {
if (window.history.length > 1) {
window.history.back();
} else {
alert("No previous page found!");
};
</script>
</body>
</html>
Example of Output Screenshot
Practical: 1 Output
