Experiment No.
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output :
Experiment No.2
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Tags Example</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<h2>Subheading Example</h2>
<p>This is a paragraph tag. It helps to write paragraphs of content on a web page.</p>
<p>This is a second paragraph with a<br>line break in the middle.</p>
<hr>
<b>This text is bold.</b><br>
<i>This text is italic.</i><br>
<u>This text is underlined.</u><br>
<strong>This is strong text (bold + semantic).</strong><br>
<em>This is emphasized text (italic + semantic).</em>
<hr>
<p>Combining tags: <b><i><u>Bold, Italic, and Underlined</u></i></b></p>
</body>
</html>
Output :
Experiment No.3
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>CSS Types & JavaScript</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
<style>
/* Internal CSS */
.internal {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<h2 style="color:red;">Inline CSS Example</h2>
<p class="internal">This is styled using internal CSS.</p>
<p class="external">This is styled using external CSS.</p>
<button onclick="showMsg()">Click Me</button>
<script>
function showMsg() {
alert("Hello! This is JavaScript.");
}
</script>
</body>
</html>
Output :
Experiment No.4
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="pass"><br><br>
Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output :
Experiment No.5
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h2>Simple Form Validation</h2>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br><br>
Age: <input type="number" id="age"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
if (name === "" || age === "") {
alert("All fields must be filled!");
return false;
}
if (age < 18) {
alert("Age must be 18 or above.");
return false;
}
return true;
}
</script>
</body>
</html>
Output :
Experiment No.6
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Table and Favicon</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
table {
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Student Marks Table</h2>
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Prathamesh</td>
<td>Shraddha</td>
<td>HTML</td>
<td>95</td>
</tr>
<tr>
<td>Amit</td>
<td>Neha</td>
<td>CSS</td>
<td>89</td>
</tr>
</table>
</body>
</html>
Output :
shraddha
Neha
Experiment No.7
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Lists in HTML</title>
</head>
<body>
<h2>Unordered List</h2>
<ul style="list-style-type:square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Ordered List</h2>
<ol type="A">
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
</body>
</html>
Output :
Experiment No.8
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
<style>
.container {
background-color: lightgray;
padding: 20px;
}
.box {
background-color: skyblue;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Output :
Experiment No.9
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
</head>
<body>
<h2>Useful Links</h2>
<a href="https://www.google.com" target="_blank">Open Google</a><br>
<a href="https://github.com">Visit GitHub</a><br>
<a href="#section1">Go to Section 1</a>
<h3 id="section1">Section 1</h3>
<p>This is a paragraph under Section 1.</p>
</body>
</html>
Output :
Experiment No.10
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Card Example</title>
<style>
.card {
width: 250px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.card img {
width: 100%;
border-radius: 10px;
}
.card h3 {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="card">
<img
src=" https://tse1.mm.bing.net/th?id=OIP.Oqbcd4IP9Lpdk7i1x57h5QHaEe&pid=Api&P=0&h=180"
alt="Profile">
<h3>Prathamesh
<h3>Shraddha Powar</h3>
Kumbhar</h3>
<p>B.Tech CSE | Sanjeevan Group</p>
</div>
</body>
</html>
Output :
Shraddha Kumbhar
Experiment No.11
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<style>
body {
background: linear-gradient(to right, #83a4d4, #b6fbff);
font-family: Arial, sans-serif;
text-align: center;
padding-top: 100px;
}
.welcome-box {
background-color: white;
width: 60%;
margin: auto;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
font-size: 36px;
}
p{
font-size: 18px;
color: #555;
}
a{
text-decoration: none;
color: white;
background-color: #007BFF;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
}
a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="welcome-box">
<h1>Welcome to My Website!</h1>
<p>This is a simple welcome page built using HTML and CSS.</p>
<a href="https://yourwebsite.com">Enter </a>
</div>
</body>
</html>
Output :
