Professional Documents
Culture Documents
Hospital Website Created Using HTML Amp Css Computer Application Project
Hospital Website Created Using HTML Amp Css Computer Application Project
To
We, 1. Simarjit Singh Saluja, 2. Simarpreet Singh Walia, 3. Sonam Puri and 4. Sonu
Singh certify that the IT Application Project Report (BBA-313) entitled “HOSPITAL
Innovation in Technology and Management. The matter embodied in this project work
has not been submitted earlier for the award of any degree of diploma to the best of our
Certified that the Project Report (BBA-313) entitled “HOSPITAL WEBSITE” done by
above mention students is completed under my guidance.
Countersigned
(Director / Project Coordinator)
ACKNOWLEDGMENT
We take this opportunity to express our sense of gratitude to all those who helped us in
completing this project. The successful task would be incomplete without the mention of
the people whose constant guidance and encouragement crown all efforts with success.
We would like to convey our thanks to Ms. Priti Sharma and Ms. Isha Shingari (Project
Guides) for their constant suggestions which have resulted in successful completion of
the project.
TABLE OF CONTENTS
1 Certificate -
2 Acknowledgement -
3 List of Tables/Figures -
LIST OF TABLES
LIST OF FIGURES
PROBLEM DEFINITION
1. INTRODUCTION
Our project report is on “Hospital Website”. In this website, we are giving detailed
information about the hospital and its operations. The website is designed in an interactive
manner and is able to give the users the knowledge of the expertise, experience and
hospitality of the hospital. Through this website patients can get information not only about
the expertise field but also the eminence of the hospital. The patients would be able to get
daily updates of their queries and they can go through the profiles of the doctors. All the
departments of the hospital have senior and experienced heads and the website gives all the
necessary information about them. The website consists of webpage giving information about
the appointment availability, latest updates and news of hospital. The events held by the
hospital are showcased in a different section of the website giving it a communicative view.
This website also consists of hyperlinks such as rules and regulations, contact us and so on.
From these hyperlinks, we can get to know what are the rules and regulations of the hospital
and patient’s feedback about the information that they acquire from the website and they can
also comment and express their views on it. Our website also helps to connect the common
people with the hospital and they can now get to know each and everything about the hospital
and can book appointments with doctors. A different section has been provided for
1
1.1. PROBLEMS IN EXISTING SYSTEM :
1. Earlier the records were kept done manually which was highly time consuming and
expensive.
6. With the increase in data, the processes of maintaining, updating and storing of
7. Data extraction becomes difficult as one has to search among large pile of papers.
1. This system helps in lowering manual work done by the patients to get appointments
of doctors in a single click. It helps in keeping the patients updated about the
availability of doctors
magazines and interviews etc are required because each and every information is
2
2. DATA COLLECTION
1. HTTP://WWW.AIIMS.EDU/EN.HTML
This website keeps detailed information about the different departments and centers of a
hospital. We can search about services available and get book appointments as per our
convenience.
2. HTTP://DELHI.GOV.IN/WPS/WCM/CONNECT/DOIT_DDUH/DDUH/HOME
This website intends to provide information about the facilities and services of the hospital
and also give information about the latest Govt. schemes that are available for the patients as
well as doctors.
3. HTTP://WWW.MEDANTA.ORG
This website is the official website of Doctor blogs. It gives all the information about the
latest updates, news and events about the working of the hospital. Through this website we
3
CHAPTER-2
1. Block diagram:
Events
Checks
Visits Books
Patient Website Appointment
Departments
4
2. Sitemap :
5
3. E-R diagram:
6
4. Database Design:
7
Discharge Date Dis_07 Date/Time 10 Date patient is discharged
8
File Name: Appointment
9
(ii) Webpage Design
REQUIRED
First name This tells the first name of the patient Alphabetic
Last name This tells the last name of the patient Alphabetic
preference appointment
1
INPUT NAME: CONTACT US FORM
LABEL REQUIRED
1
CHAPTER-3
1. HOMEPAGE
CODING:
HTML:
<html>
<head>
</head>
<body>
<section class="intro">
<div class="top">
<ul><b>
<ul class="drop1">
</ul>
</li>
<li><a href=#>DEPARTMENTS</a>
1
<ul class="drop2">
<li><a href=department-ortho.html>Orthopaedics</a></li>
<li><a href=department-skin.html>Skin</a></li>
<li><a href=department-surgery.html>Surgery</a></li>
<li><a href=department-cardiology.html>Cardiology</a></li>
<li><a href=department-radiology.html>Radiology</a></li>
<li><a href=department-emergency.html>Emergency</a></li>
</ul>
</li>
<li><a href=#>EVENTS</a>
<ul class="drop2">
</ul>
</b></ul>
</div>
</div>
<div class="inner">
<div class="innerbg">
</div>
</div>
1
</section>
<p class="middlepara"> <br> WE CARE is home to some of the most
eminent doctors in the world, most of whom are pioneers in their respective arenas and are
renowned for developing innovative and revolutionary procedures. Many of our doctors are also
‘Padma Shri’, ‘Padma Bhushan’, ‘Dr B. C. Roy National Award’ and ‘Marquis Who’s Who in
the World’ recipients. <br> </p>
<p><br><br><br><br><br><br></p>
</div>
<p class="middlepara"> <br> Our annual Preventive Health Checks are
customised to take into consideration your lifestyle and risk factors.Our health checks include
comprehensive diagnostics, consultations with accomplished doctors and technology-aided
follow-ups with the aim to ensure that you stay in the pink of health at all times.</font> <br>
</p>
</div>
<p class="middlepara2"> <br> At WE CARE, you will instantly discover
that you are so much more than just a patient. Right from the way we have designed our patient
rooms to the way we serve you, we have left no stone unturned, ensuring that both, your medical
and personal needs are placed above everything else.</font> <br> </p>
<p></p>
</div>
</div><br><br><br>
<div class="copyright"><br> Copyright © 2017 WE CARE HOSPITAL, Janak Puri, New Delhi.
Contents Published on this Website are Managed and Maintained by Sonu Singh. <br>All Rights
Reserved.<br><br></div>
1
<br><br><br>
</body>
</html>
CSS:
html, body{
margin: 0px;
.intro{
height: 100%;
width: 100%;
background-size: cover;
.inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
.innerbg{
max-width: 500px;
text-align: center;
margin: auto;
.innerbg h1 {
1
font-family: 'Raleway', sans-serif;
color: white;
font-size: 400%;
margin-left: 400px;
margin-right: -350px;
margin-top: 180px;
.start{
border-radius: 9px;
color: #02386E;
font-size: 135%;
text-decoration: none;
margin-left: 400px;
margin-right: -350px;
margin-top: 180px;
.start:hover{
color: red;
1
.para{
text-align: center;
font-size: 160%;
line-height: 210%;
font-family: sans-serif;
color: white;
padding: 20px;
background-size:1300px ;
margin-left: 30px;
border-radius: 4px;
.para2{
text-align: center;
font-size: 160%;
line-height: 210%;
font-family: sans-serif;
color: white;
padding: 20px;
background-size:1400px ;
border-radius: 4px;
.para3{
text-align: center;
font-size: 160%;
1
line-height: 210%;
font-family: sans-serif;
color: white;
padding: 20px;
background-size:100% ;
border-radius: 4px;
.middle{
font-family: "Montserrat-Black";
font-weight: bolder;
font-size: 50px;
color: black;
margin-top: 70px;
.middlepara{
color: black;
font-size: 17px;
line-height: 20px;
.middle2{
font-family: "Montserrat-Black";
font-weight: bolder;
font-size: 50px;
1
color: black;
margin-top: 70px;
text-align: left;
.middlepara2{
color: black;
font-size: 17px;
line-height: 20px;
text-align: justify;
margin-top: -10px;
.copyright{
text-align: center;
background: #05548E;
color: white;
font-family: "Arial";
line-height: 20px;
.top{
padding: 0px;
float: left;
position: fixed;
margin-left: 45px;
1
#menu ul
list-style:none;
opacity: 0.98;
#menu ul li
background-color: #005BFC;
width: 180px;
height:65px;
line-height:65px;
text-align:center;
float:left;
position: relative;
border-radius: 8px;
margin: 1.5px;
#menu
margin: auto;
#menu ul li:nth-child(2){
width:180px;
2
#menu ul li:nth-child(3){
width:180px;
#menu ul li:nth-child(6){
width:180px;
#menu ul li:nth-child(7){
width:180px;
#menu ul li:nth-child(8){
width:135px;
width:200px;
background-color:#27AE60;
margin: 1px;
margin-left: -45px;
width:180px;
background-color:#27AE60;
margin: 1px;
margin-left: -45px;
2
#menu ul li a
text-decoration:none;
color:white;
display:block;
font-family:"Maiandra GD";
font-size: 125%;
#menu ul li a:hover
background-color:#229954;
border-radius: 7px;
font-size: 120%;
font-family:"Maiandra GD";
#menu ul ul
position:absolute;
display: none;
display: block;
2
#menu ul li:hover > ul
animation: load 1s
forwards; animation-
name: menu;
@keyframes menu{
0%{
opacity: 0;
100%{
opacity: 1;
2
SCREENSHOTS:
2
2
2. ABOUT US PAGE
CODING:
CSS:
h1 {
color: darkblue;
text-align: center;
background-color:white;
font-size: 40px;
body {
background-size: cover;
.home {
color: white;
font-size: 30px;
text-decoration: none;
.home:hover {
p{
margin: 30px;
2
line-height: 30px;
font-size: 25px;
color: aliceblue;
p.additional {
margin: 30px;
margin-right: 100px;
line-height: 25px;
font-size: 20px;
color: aliceblue;
text-align: justify;
p.additional1 {
margin: 30px;
margin-right: 350px;
line-height: 25px;
font-size: 20px;
color: aliceblue;
text-align: justify;
2
margin: auto;
border-collapse: collapse;
font-family: arial;
th{
font-size: 20px;
color: white;
td{
color: white;
.depttlist{
line-height: 30px;
font-size: 20px;
color: aliceblue;
text-align: justify;
margin-left: 50px;
.emergency{
margin-right: 70px;
.bullets {
margin: 30px;
line-height: 30px;
2
font-size: 25px;
color: aliceblue;
.back {
margin-bottom: -20px;
.rules {
margin-left: 330px;
margin-top: -15px;
.download {
margin-bottom: -100px;
margin-left: 50px;
.firstrow {
margin-left: 70px;
.secondrow {
2
margin-left: 70px;
.thirdrow {
margin-left: 70px;
.fourthrow {
margin-left: 70px;
.fifththrow {
margin-left: 70px;
h2 {
color: antiquewhite;
margin-left: 20px;
text-decoration: underline;
.leaderimg{
margin-left: 120px;
3
2.1 Introduction page
HTML:
<html>
<head>
<title>About us</title>
</head>
<body>
<p> <img src="building.JPG"
width="450px"> <img src="Screenshot (20).png" width="490"><br><br>
Twenty-five clinical departments including four super specialty centers manage practically all
types of disease conditions with support from pre- and Para-clinical departments. However, burn
cases, dog-bite cases and patients suffering from infectious diseases are not entertained in the we
care Hospital. we care also manages a 60-beded hospital in the Comprehensive Rural Health
Centre at Ballabgarh in Haryana and provides health cover to about 2.5 lakh population through
the Centre for Community Medicine.
</p>
<br><br><br>
<p>Our passion well reflects in the fact that we set the industry standards when it comes to cure,
care and comfort. To deliver International Class healthcare with a total service focus, by creating
an institution committed to the highest standards of medical & service excellence, patient care,
scientific knowledge and medical education.</P>
<br><br><br>
<h1>O<font size="6">BJECTIVES</font></h1>
3
<div class=bullets>
<li>To bring together in one place educational facilities of the highest order for the training of the
personnel in all important branches of the health activity.</li>
</div>
</body>
</html>
SCREENSHOT:
3
2.2 Rules & regulation page
HTML:
<html>
<head>
</head>
<body>
<a
href="https://www.northwell.edu/sites/default/files/HH_Amended_Medical_Staff_Rules_and_Re
gulations.pdf" download><img src="Download-Button.png" height="80px" width="260px"
class="download"></a>
<div class="rules">
This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-
3pp.pdf">Download PDF</a>
</iframe>
</div>
</body>
</html>
3
SCREENSHOT:
HTML:
<html>
<head>
<title>Staff info</title>
</head>
<body>
<br><br>
3
<h2> ORTHOPAEDICS</h2>
<div class="firstrow">
<br><br>
</div>
<div class="secondrow">
<br><br>
</div>
<div class="thirdrow">
3
<br><br>
</div>
<div class="fourthrow">
</div>
<div class="fifththrow">
</div>
</body>
</html>
3
SCREENSHOT:
3
3. DEPARTMENTS PAGE
CODING:
HTML:
<html>
<head>
<title>DEPARTMENTS</title>
</head>
<body>
<br>
<p class="additional1">
Excellence in patient care, research, and education is the overall goal of the Department of
Orthopaedics at WE CARE.<br><br>
In addition to general Orthopaedics, the department has a faculty which specializes in the field of
joint replacement, sports medicine ,hand surgery, musculoskeletal oncology, pediatric
orthopaedics ,spine surgery and treatment of complex trauma. The recent innovations in
orthopaedic surgery such as minimally invasive joint replacement, surface replacement
arthroplasty, revision hip and knee replacements, minimally invasive spine surgery , vascularised
grafting for non unions, limb reimplatations, arthroscopic PCL and shoulder surgery are all being
practiced with excellent results.<br><br>
There is also a bone bank facility in the deptt where both live donor bone and cadaveric bone are
preserved and used as and when required.<br><br>
3
ICMR and CSIR funded research projects in the field of orthopaedics are also being carried
out.<br><br>
The Institute also has modern Physiotherapy Unit which works is close co-ordination with the
Orthopaedic Department for comprehensive care of patients.
</p>
</body>
</html>
SCREENSHOTS:
3
4
4
4
4. EVENTS PAGE
WORKSHOPS CODING:
HTML:
<html>
<head>
</head>
<body>
<br>
<table>
4
</table>
</body>
</html>
SCREENSHOT:
4
4.2 UPCOMING EVETNS
CODING:
HTML:
<html>
<head>
<title>Upcoming events</title>
</head>
<body>
<br>
<table>
4
<tr align="center"><td height="150px">3</td><td align="left"> <a
href="" alt=hello><font color="#FFFFFF"><br> <b>Conference on Recent Advances in
Orthopedic & Neurosciences</b> </font></a><br> <br> WE CARE Hospitals presents the
Recent Advances in Neuroscience and Orthopedic Conference hosted by Medetarian Conferences
Organizing (MCO).<br> </td><td> 28-12-2017 </td><td>10-01-2018</td></th></tr>
</table>
</body>
</html>
SCREENSHOT:
4
5. APPOINTMENT PAGE
CODING:
HTML:
<html>
<head>
<title>Appointments</title>
</head>
<body>
<br>
<div class="box"></div>
<div class="appointmentform">
<table>
4
<tr><td>E-Mail</td> <td>: <input type="email" placeholder="Email ID"
class="formname" required></td></tr><br>
<option>New Delhi</option>
<option>Gurugram</option>
<option>Ghaziabad</option>
<option>Noida</option>
<option>Faridabad</option>
</select></td></tr>
<br>
<tr><td>Department</td> <td>:
<option>Critical Care</option>
<option>Endocrinology (Diabetes)</option>
<option>ENT</option>
<option>Gastroentrology</option>
4
<option>General & Laparoscopic Surgery</option>
<option>General Physician</option>
<option>Hematology</option>
<option>Interventional Radiology</option>
<option>Nephrology</option>
<option>NeuroSciences</option>
<option>Nuclear Medicine</option>
<option>Pediatrics</option>
<option>Physiotherapy</option>
<option>Pulmonary Medicine</option>
<option>Transplant</option>
<option>Urology</option>
</select></td></tr><br>
</table><br>
</form>
</div>
</body>
</html>
4
CSS:
body {
background-size: cover;
margin-top: 10px;
.booked {
font-family: Candara;
margin-bottom: -220px;
font-size: 25px;
font-weight: bold;
.formname{
width: 200px;
height: 30px;
border-radius: 5px
.appointmentform{
margin-top: -300px;
margin-left: 400px;
line-height: 40px;
color: white;
font-family: arial;
font-size: 20px;
5
.booked {
color: white;
text-align: center;
margin-top: 100px;
.box{
box-sizing: border-box;
background: rgba(0,0,0,.5);
width: 700px;
height: 600px;
margin-left: 330px;
margin-bottom: -930px;
border-radius: 30px;
display: block;
.submitbtn{
margin-left: 180px;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: justify;
outline: none;
color: black;
background-color:#FFF;
border: none;
5
border-radius: 15px;
.submitbtn:hover {
background-color:#0012A6;
color: white;}
.submitbtn:active
{ background-color:
#0012A6; box-shadow: 0
translateY(4px);
.resetbtn{
margin-left: 50px;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: justify;
outline: none;
color: black;
background-color:#FFF;
border: none;
border-radius: 15px;
5
}
.resetbtn:hover {
background-color:#0012A6;
color: white;}
.resetbtn:active {
background-color: #0012A6;
transform: translateY(4px);
h1 {
margin: 0px;
color: darkblue;
text-align: center;
background-color:white;
font-size: 40px;
.home {
color: white;
font-size: 30px;
text-decoration: none;
.home:hover {
.back {
5
margin-bottom: -20px;
SCREENSHOTS:
5
6. CONTACT US PAGE
CODING:
HTML:
<html>
<head>
<title>Appointments</title>
</head>
<body>
<br>
<div class="box"></div>
<div class="appointmentform">
<table>
5
</table><br>
</form>
</div>
<div class="address">
</div>
</body>
</html>
CSS:
body {
background-size: cover;
margin-top: 10px;
.booked {
font-family: Candara;
margin-bottom: -220px;
font-size: 25px;
5
font-weight: bold;
.formname{
width: 200px;
height: 30px;
border-radius: 5px
.appointmentform{
margin-top: 160px;
margin-left: 650px;
line-height: 40px;
color: white;
font-family: arial;
font-size: 20px;
.address{
margin-top: -350px;
color: white;
margin-left: 20px;
font-size: 18px;
line-height: 16px;
.booked {
color: white;
text-align: center;
5
margin-top: 100px;
.box{
box-sizing: border-box;
background: rgba(0,0,0,.5);
width: 700px;
height: 600px;
margin-left: 600px;
margin-bottom: -930px;
border-radius: 30px;
display: block;
.submitbtn{
margin-left: 180px;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: justify;
outline: none;
color: black;
background-color:#FFF;
border: none;
border-radius: 15px;
5
.submitbtn:hover {
background-color:#0012A6;
color: white;}
.resetbtn{
margin-left: 50px;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: justify;
outline: none;
color: black;
background-color:#FFF;
border: none;
border-radius: 15px;
.resetbtn:hover {
background-color:#0012A6;
color: white;}
h1 {
margin: 0px;
color: darkblue;
text-align: center;
background-color:white;
5
font-size: 40px;
.home {
color: white;
font-size: 30px;
text-decoration: none;
.home:hover {
.back {
margin-bottom: -20px;
SCREENSHOTS:
6
6