Frames and framesets
<!DOCTYPE html>
<html>
<head>
<title>Hospital Information</title>
</head>
<frameset rows="20%, 80%">
<frame srcdoc="<h2 style='text-align:center;'>Welcome to City Hospital</h2>">
<frameset cols="20%, 80%">
<frame srcdoc="
<h3>Menu</h3>
<ul>
<li><a href='home.html' target='contentFrame'>Home</a></li>
<li><a href='services.html' target='contentFrame'>Services</a></li>
<li><a href='contact.html' target='contentFrame'>Contact</a></li>
</ul>
">
<frame name="contentFrame" src="home.html">
</frameset>
</frameset>
</html>
HOME PAGE :
<!DOCTYPE html>
<html>
<head><title>Home</title></head>
<body>
<h2>Welcome to City Hospital</h2>
<p>Providing quality healthcare services for all.</p>
</body>
</html>
SERVICES PAGE :
<!DOCTYPE html>
<html>
<head><title>Services</title></head>
<body>
<h2>Our Services</h2>
<ul>
<li>Emergency Care</li>
<li>General Medicine</li>
<li>Pediatrics</li>
</ul>
</body>
</html>
CONTACT PAGE :
<!DOCTYPE html>
<html>
<head><title>Contact</title></head>
<body>
<h2>Contact Us</h2>
<p>Phone: 123-456-7890</p>
<p>Email: info@cityhospital.com</p>
</body>
</html>
Form to collect user Details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Feedback Form</title>
</head>
<body>
<h3>Feedback Form</h3>
<form>
<label for="uname">Name</label>
<input type="text" id="uname" name="uname" required> <br><br>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required> <br><br>
<label for="phone">Phone No</label>
<input type="tel" id="phone" name="phone" required> <br><br>
<label>Do you satisfy with our service?</label>
<input type="radio" id="yes" name="satisfy" value="yes" checked>
<label for="yes">Yes</label>
<input type="radio" id="no" name="satisfy" value="no">
<label for="no">No</label> <br><br>
<label for="msg">Write your Suggestions:</label><br>
<textarea id="msg" name="msg" rows="4" cols="25" required></textarea> <br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Using CSS to style a webpage (Layout,Fonts,Colors)
<!DOCTYPE html>
<html>
<head>
<title>Styled Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
margin: 50px;
}
header {
background-color: #007bff;
color: white;
padding: 10px;
font-size: 24px;
border-radius: 5px;
}
</style>
</head>
<body>
<header>My Styled Webpage</header>
<p>Welcome to this simple styled webpage.</p>
</body>
</html>
College website homepage using advanced HTML tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>College Homepage</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
header { background: #007bff; color: white; padding: 10px; font-size: 24px; }
nav a { margin: 10px; text-decoration: none; color: #007bff; font-weight: bold; }
section { margin-top: 20px; }
footer { background: #333; color: white; padding: 10px; margin-top: 20px; }
</style>
</head>
<body>
<header>Welcome to XYZ College</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Courses</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>About Us</h2>
<p>XYZ College offers quality education and a great learning environment.</p>
</section>
</body>
</html>
Countries names
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Countries Website</title>
</head>
<body>
<h1>My Countries Website</h1>
<ul>
<li><a href="countries/main.html">Countries</a></li>
</ul>
</body>
</html>
Countries/main.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Favourite Countries</title>
</head>
<body>
<h1>My Countries</h1>
<ul>
<li><a href="india.html">INDIA</a></li>
<li><a href="egypt.html">EGYPT</a></li>
<li><a href="swiz.html">SWITZERLAND</a></li>
</ul>
</body>
</html>
Countries/india.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>India</title>
</head>
body>
<h1>INDIA</h1>
<p>India is the seventh-largest country by area, the second-most populous country, and the most
populous democracy in the world...</p>
</body>
</html>
Bio-Data in a Structured Formate
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bio-Data</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; width: 50%; }
h2 { text-align: center; background: #007bff; color: white; padding: 10px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
td { padding: 8px; border: 1px solid black; }
</style>
</head>
<body>
<h2>Bio-Data</h2>
<table>
<tr> <td><b>Name:</b></td> <td>John Doe</td> </tr>
<tr> <td><b>Age:</b></td> <td>25</td> </tr>
<tr> <td><b>Qualification:</b></td> <td>MCA</td> </tr>
<tr> <td><b>Experience:</b></td> <td>2 Years</td> </tr>
<tr> <td><b>Contact:</b></td> <td>123-456-7890</td> </tr>
</table>
</body>
</html>
Display a Registration Form for an Event
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event Registration</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
form { width: 300px; margin: auto; padding: 15px; border: 1px solid #ccc; }
input, button { width: 100%; padding: 8px; margin: 5px 0; }
button { background: #007bff; color: white; border: none; }
</style>
</head>
<body>
<h2>Event Registration Form</h2>
<form>
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email" required>
<input type="tel" placeholder="Phone Number" required>
<button type="submit">Register</button>
</form>
</body>
</html>
Validate Registration Form using Java script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<script>
function validateForm() {
// Get form values
var firstName = document.registrationForm.fname.value;
var lastName = document.registrationForm.lname.value;
var email = document.registrationForm.email.value;
var program = document.registrationForm.program.value;
// Check if first name is empty
if (firstName == "") {
alert("First Name must be filled out.");
return false;
}
// Check if last name is empty
if (lastName == "") {
alert("Last Name must be filled out.");
return false;
}
// Check if email is empty
if (email == "") {
alert("Email must be filled out.");
return false;
}
// Check email format using regular expression
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
// Check if program is selected
if (program == "") {
alert("Please select a program.");
return false;
}
// If all validations pass
alert("Registration successful!");
return true;
Comments
Post a Comment