Exp.
No : DESIGN AND DEVELOPMENT OF STATIC WEB PAGES FOR AN ONLINE
Date : HOSPITAL WEBSITE
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>
<!-- Input for Email -->
<div class="input-box">
<span class="details">Email</span>
<input type="text" placeholder="Enter your email" required>
</div>
<!-- Input for Phone Number -->
<div class="input-box">
<span class="details">Phone Number</span>
<input type="text" placeholder="Enter your number" required>
</div>
<!-- Input for DOB -->
<div class="input-box">
<span class="details">Date of Birth</span>
<input type="text" placeholder="Enter your DOB" required>
</div>
<!-- Input for Username -->
<div class="input-box">
<span class="details">Username</span>
<input type="text" placeholder="Enter your username" required>
</div>
<!-- Input for Password -->
<div class="input-box">
<span class="details">Password</span>
<input type="text" placeholder="Enter your password" required>
</div>
<!-- Input for Confirm Password -->
<div class="input-box">
<span class="details">Confirm Password</span>
<input type="text" placeholder="Confirm your password" required>
</div>
</div>
<div class="gender-details">
<!-- Radio buttons for gender selection -->
<input type="radio" name="gender" id="dot-1">
<input type="radio" name="gender" id="dot-2">
<input type="radio" name="gender" id="dot-3">
<span class="gender-title">Gender</span>
<div class="category">
<!-- Label for Male -->
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">Male</span>
</label>
<!-- Label for Female -->
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">Female</span>
</label>
<!-- Label for Prefer not to say -->
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">Prefer not to say</span>
</label>
</div>
</div>
<!-- Submit button -->
<div class="button">
<input type="submit" value="Register">
</div>
</form>
</div>
</div>
</body>
</html>
Sample Input and Output :
Fig. 1.1 Index page to display menu for hospital
Fig. 1.2 Login Page
Fig. 1.3 Registration Page
Fig. 1.4 Patients Catalogue Page
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.
