Below are clean, well‑arranged solutions for all questions from the provided PDF.
Each question
contains ready‑to‑run code.
Q1: Simple Webpage using HTML only
Output:
<p><strong>Name : Vidhu</strong></p>
• A webpage displaying a large heading: "Welcome to My Webpage"
• Below it, a paragraph text saying the page is created using HTML only
<!DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple webpage created using HTML only.</p>
</body>
</html>
Q2: Ordered List (Foods) & Unordered List (Movies)
Output:
<p><strong>Name : Vidhu</strong></p>
• Heading Favourite Foods
• Numbered list (1,2,3) of food items
• Heading Favourite Movies
• Bullet list of movie names
<!DOCTYPE html>
<html>
<head>
<title>Lists Example</title>
</head>
<body>
<h2>Favourite Foods</h2>
<ol>
<li>Pizza</li>
<li>Burger</li>
1
<li>Pasta</li>
</ol>
<h2>Favourite Movies</h2>
<ul>
<li>Inception</li>
<li>Avengers</li>
<li>Interstellar</li>
</ul>
</body>
</html>
Q3: Image with Alternative Text and Fixed Size
Output:
<p><strong>Name : Vidhu</strong></p>
• A fixed-size image (300×200 pixels)
• If image is missing, alternative text "Sample Image" is shown
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>Sample Image</h2>
<img src="[Link]" alt="Sample Image" width="300" height="200">
</body>
</html>
Q4: Inline, Internal & External CSS
Output:
<p><strong>Name : Vidhu</strong></p>
• Inline CSS heading appears in red color
• Internal CSS heading appears in blue color
• External CSS paragraph appears in green color
HTML File
<!DOCTYPE html>
<html>
2
<head>
<title>CSS Types</title>
<style>
h2 { color: blue; }
</style>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1 style="color:red;">Inline CSS Example</h1>
<h2>Internal CSS Example</h2>
<p class="external">External CSS Example</p>
</body>
</html>
[Link]">
[Link]
.external {
color: green;
font-size: 18px;
}
Q5: Form with Various Inputs
Output:
<p><strong>Name : Vidhu</strong></p>
• Text box for Name
• Password input field
• Radio buttons for Gender
• Checkboxes for Hobbies
• Submit button that sends form data
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<form>
Name: <input type="text"><br><br>
Password: <input type="password"><br><br>
Gender:
<input type="radio" name="gender"> Male
3
<input type="radio" name="gender"> Female<br><br>
Hobbies:
<input type="checkbox"> Reading
<input type="checkbox"> Sports<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Q6: Video and Audio with Controls
Output:
<p><strong>Name : Vidhu</strong></p>
• Video player with play, pause, volume controls
• Audio player with play and volume controls
<!DOCTYPE html>
<html>
<head>
<title>Media Example</title>
</head>
<body>
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Q7: College Department Page (Computer Science)
Output:
<p><strong>Name : Vidhu</strong></p>
• Main heading Computer Science Department
• Paragraph describing the department
4
• Bullet list of courses offered
<!DOCTYPE html>
<html>
<head>
<title>Computer Science Department</title>
</head>
<body>
<h1>Computer Science Department</h1>
<p>The Computer Science department focuses on programming, algorithms,
and software development.</p>
<h3>Courses Offered</h3>
<ul>
<li>Data Structures</li>
<li>Web Development</li>
<li>Artificial Intelligence</li>
</ul>
</body>
</html>
Q8: Interactive List using JavaScript
Output:
<p><strong>Name : Vidhu</strong></p>
• Text input field
• "Add Item" button
• When button is clicked, entered text appears as a new list item
<!DOCTYPE html>
<html>
<head>
<title>Interactive List</title>
</head>
<body>
<input type="text" id="item">
<button onclick="addItem()">Add Item</button>
<ul id="list"></ul>
<script>
function addItem() {
var li = [Link]("li");
[Link] = [Link]("item").value;
[Link]("list").appendChild(li);
}
5
</script>
</body>
</html>
Q9: Simple Form Validation
Output:
<p><strong>Name : Vidhu</strong></p>
• Text field for name
• On clicking submit:
• If empty → alert message shown
• If filled → form submits successfully
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form onsubmit="return validate()">
Name: <input type="text" id="name"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validate() {
if ([Link]("name").value === "") {
alert("Name cannot be empty");
return false;
}
return true;
}
</script>
</body>
</html>
Q10: Simple Calculator using Functions
Output:
<p><strong>Name : Vidhu</strong></p>
• Two number input fields
• Add and Subtract buttons
6
• Result displayed dynamically below buttons
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<input type="number" id="n1">
<input type="number" id="n2"><br><br>
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<p id="result"></p>
<script>
function add() {
let a = Number([Link]);
let b = Number([Link]);
[Link] = "Result: " + (a + b);
}
function subtract() {
let a = Number([Link]);
let b = Number([Link]);
[Link] = "Result: " + (a - b);
}
</script>
</body>
</html>
✅ All questions solved as per exam/assignment requirement.
If you want separate files, screenshots, or viva explanations, tell me.