1-Exp B
1-Exp B
Task:
Design a comprehensive web page for an online hospital website that includes a
cohesive set of static web pages (e.g., homepage, header , Menu , catalogue, login,
registration),
Aim :
To design and develop a set of static web pages for an online hospital that provides an
engaging user experience and easy navigation for browsing patient details.
Procedure :
1. Define Requirements:
Identify the essential pages: Homepage, Header, Menu, Catalogue, Login,
Registration.
Determine user needs and functionalities for each page.
2. Plan the Structure:
Create a sitemap outlining the hierarchy and links between pages.
Decide on a consistent layout and design theme.
3. Design the Header:
Create a header with the bookstore logo and a tagline as “Welcome to Our
Online Bookstore “.
4. Design the Homepage:
Include navigation links to the Menu and other main pages like Login,
Registration, and Catalogue .
5. Design the Menu Page:
Provide links to key sections: Login, Registration, and Catalogue.
Use clear labels and organize links for easy navigation.
6. Design the Catalogue Page:
Create a table or grid layout to display patients, including name, mobile
number, age, and disease.
7. Design the Login Page:
Include a form with fields for username and password.
A button for submitting credentials.
8. Design the Registration Page:
Create a form with fields for username, email, and password and a submit
button.
Program :
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hospital Management System</title>
</head>
<frameset rows="20%,*">
<frame src="header.html" name="headerFrame">
<frameset cols="20%,*">
<frame src="menu.html" name="menuFrame">
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>
</html>
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Healthcare with a heart</title>
<style>
body {
background-color: #34F1F6;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to Our Hospital Web page</h1>
<p>Your health is our top priority!</p>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<style>
body {
background-color: #D5FFFF;
font-family: Arial, sans-serif;
text-align: center;
}
a{
display: block;
margin: 10px;
text-decoration: none;
color: #0000FF;
}
</style>
</head>
<body>
<a href="login.html" target="contentFrame">Login</a>
<a href="patients.html" target="contentFrame">Catalogue</a>
<a href="registration.html" target="contentFrame">Register</a>
</body>
</html>
content.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Content</title>
</head>
<body>
<h2>Welcome! Please select an option from the menu.</h2>
</body>
</html>
login.html
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login Form Design | CodeLab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="title">
Login Form
</div>
<form action="#">
<div class="field">
<input type="text" required>
<label>Email Address</label>
</div>
<div class="field">
<input type="password" required>
<label>Password</label>
</div>
<div class="content">
<div class="checkbox">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
</div>
<div class="field">
<input type="submit" value="Login">
</div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a>
</div>
</form>
</div>
</body>
</html>
patient.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Patient Details</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Patient Catalogue</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Mobile Number</th>
<th>Age</th>
<th>Disease</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vijay</td>
<td>9876543210</td>
<td>52</td>
<td>Myopia</td>
</tr>
<tr>
<td>Ajith</td>
<td>99876543210</td>
<td>52</td>
<td>Hypermetropia</td>
</tr>
<tr>
<td>Rajni</td>
<td>98876543210</td>
<td>70</td>
<td>Blaspemia</td>
</tr>
<!-- Add more Patient details as needed -->
</tbody>
</table>
</body>
</html>
registration.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Responsive Registration Form | CodingLab </title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="container">
<!-- Title section -->
<div class="title">Registration</div>
<div class="content">
<!-- Registration form -->
<form action="#">
<div class="user-details">
<!-- Input for Full Name -->
<div class="input-box">
<span class="details">First Name</span>
<input type="text" placeholder="Enter First name" required>
</div>
<div class="input-box">
<span class="details">Last Name</span>
<input type="text" placeholder="Enter Last name" required>
</div>
Result:
The design and implementation of a web site for Hotel Billing System using concepts of
Inline styles, Embedded styles and Cascading Styles Sheets using CSS was successfully written
verified and executed.