Scribd
Upload
45 views8 pages

1-Exp B

Uploaded by

dinesh2004.10.12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views8 pages

1-Exp B

Uploaded by

dinesh2004.10.12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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.

You might also like