Web Technology Practical File
🧾 Question 1: Create a basic HTML page with heading, paragraph, and image.
<html>
<head>
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML page with a heading, a paragraph, and an im-
age.</p>
<img src="image.jpg" alt="Sample Image" width="300">
</body>
</html>
🧾 Question 2: Create an anchor tag that opens Google in a new tab.
<a href="https://www.google.com" target="_blank">Open Google</a>
🧾 Question 3: Create a form with Name, Email, and Submit button.
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
🧾 Question 4: Make an image clickable using an anchor tag.
<a href="https://www.example.com">
<img src="image.jpg" alt="Clickable Image" width="300">
</a>
🧾 Question 5: Create a table showing 3 students' names and their marks.
<html>
<head>
<title>Student Marks</title>
</head>
<body>
<h1>Student Marks</h1>
<table border="1">
<tr>
<th>Student Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Alice</td>
<td>85</td>
</tr>
<tr>
<td>Bob</td>
<td>92</td>
</tr>
<tr>
<td>Charlie</td>
<td>78</td>
</tr>
</table>
</body>
</html>
Question 6: Create an HTML ordered list showing your top 3 programming lan-
guages.
<html>
<head>
<title>Favorite Programming Languages</title>
</head>
<body>
<h1>Top 3 Programming Languages</h1>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
</ol>
</body>
</html>
Question 7:Create an HTML unordered list showing your favorite 3 fruits.
<html>
<head>
<title>Favorite Fruits</title>
</head>
<body>
<h1>My Favorite Fruits</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</body>
</html>
🎨 Question 8: Style a paragraph using internal CSS (color, font-size, background-
color).
<html>
<head>
<title>Styled Paragraph</title>
<style>
p {
color: blue;
font-size: 18px;
background-color: lightyellow;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
🎨 Question 9: Create a div with border, padding, and margin using CSS.
<html>
<head>
<title>Styled Div</title>
<style>
.styled-div {
border: 2px solid black;
padding: 20px;
margin: 15px;
}
</style>
</head>
<body>
<div class="styled-div">
This is a div with border, padding, and margin.
</div>
</body>
</html>
🎨 Question 10: Create a navigation bar using HTML and CSS.
<html>
<head>
<title>Navigation Bar</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
nav a {
color: white;
padding: 14px 20px;
text-decoration: none;
float: left;
}
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</body>
</html>
🧠 Question 11: Create a button that shows an alert "Welcome to Web Technol-
ogy" using JavaScript.
<html>
<head>
<title>Alert Button</title>
<script>
function showAlert() {
alert("Welcome to Web Technology");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
🧠 Question 12: Create a webpage where clicking a button changes the color of a
paragraph (JS DOM).
<html>
<head>
<title>Change Color</title>
<script>
function changeColor() {
document.getElementById("myParagraph").style.color =
"green";
}
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph whose color will change.</p>
<button onclick="changeColor()">Change Color</button>
</body>
</html>
