Hospital Website Created Using HTML & CSS, Computer Application Project

Hospital Website
Submitted in partial fulfillment of the requirements

for the award of the degree of
Bachelor of Business Administration
To
Guru Gobind Singh Indraprastha University, Delhi
Guide: Submitted by:
Ms. Priti Sharma 1. Simarjit Singh Saluja

Ms. Isha Shingari 2. Simarpreet Singh Walia
3. Sonam Puri
4. Sonu Singh
Institute of Innovation in Technology & Management,

New Delhi 1100 58
Batch (2015- 2018)
Certificate
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
WEBSITE is done by us and it is an authentic work carried out by us at Institute of
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
knowledge and belief.
1. Signature of the student 2. Signature of the student
3. Signature of the student 4. Signature of the student
Date: 15th November 2017
Certified that the Project Report (BBA-313) entitled HOSPITAL WEBSITE done by
above mention students is completed under my guidance.
Signature of the Guide

Name of the Guides: Ms. Priti Sharma
Ms. Isha Shingari
Designation: Assistant Professor
Date: 15th November 2017
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
S No Topic Page No.
1 Certificate -
2 Acknowledgement -
3 List of Tables/Figures -
4 Chapter-1: Problem Definition 1
5 Chapter-2: System Analysis & Design 4
6 Chapter-3: System Coding & Implementation 12
LIST OF TABLES
S No Topic Page No.
1.1 Job done by the team 3
2.1 Database Description of Departments 7
2.2 Database Description of Patient 8
2.3 Database Description of Doctor 8
2.4 Database Description of Appointment 9
LIST OF FIGURES
S No Topic Page No.
2.1 Block diagram of WE CARE Hospital 4
2.2 Site Map of WE CARE Hospital 5
2.3 ER Diagram of WE CARE Hospital 6

CHAPTER-1
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 patients 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
contacting the hospital for any queries.
1
1.1.PROBLEMS IN EXISTING SYSTEM :
1. Earlier the records were kept done manually which was highly time consuming and
expensive.
2. There can be no interaction between the patients and doctors.
3. Patients used to stand in long queues.
4. Wastage of Stationary other material resources increase due to paper work.
5. Current manual system requires large efforts to compile information.
6. With the increase in data, the processes of maintaining, updating and storing of
information are becoming difficult.
7. Data extraction becomes difficult as one has to search among large pile of papers.
1.2. OBJECTIVES OF PROPOSED SYSTEM :
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
2. Nowadays, it has become easy to get information through websites. No newspaper,
magazines and interviews etc are required because each and every information is
easily available on the website.
3. It helps in reaching the information to large number of patients/visitors in minimum
time.Modes of information is faster than the way before.
4. It can be the centralized source of information.
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
can also get information about international doctors as well as patients.
3. CONTRIBUTION OF THE TEAM MEMBERS IN WEBSITE DEVELOPMENT :
Name Job To Be Done
Simarjit Singh Saluja Data collection, Documentation
Simapreet Singh Walia Coding, Designing
Sonam Puri Data collection, Documentation
Sonu Singh Coding, Designing, Documentation
Table no. 1.1: Job done by the team

3
CHAPTER-2
SYSTEM ANALYSIS AND DESIGN
1. Block diagram:
Events
Checks
Visits Books
Patient Website Appointment
Visits Gives Charges

Doctor Treatment Fees
Departments
Figure 2.1: Block diagram of WE CARE Hospital
4
2. Sitemap :
Figure 2.2:- Site Map Of WE CARE Hospital
5
3. E-R diagram:
Figure 2.3:- ER Diagram of WE CARE Hospital
6
4. Database Design:
File Name: Departments
Field Name Field Code Field Type Size Description
Dpt_ID Did_14 AutoNumber 5 A unique code
Name N_13 Alphabetic 15 Name of receptionist
Treatment Tr_15 Alphabetic 12 Details of Treatment
Table 2.1:- Database Description of Departments
File Name: Patient
Name Name_01 Alphabetic 15 Name of Patient
P_ID Id_02 AutoNumber 5 A Unique code
Gender Sex_03 Alphabetic 6 Gender of patient
Age Age_04 Numeric 2 Age of patient
Contact Number Cno._08 Numeric 10 Phone number of patient
Admission Date Adm_06 Date/Time 10 Date patient is admitted
7
Discharge Date Dis_07 Date/Time 10 Date patient is discharged
Doc_ID DID_01 Alphanumeric 15 Unique ID of doctor
Table 2.2:- Database Description of Patient
File Name: Doctor
Name Dnam_01 Alphabetic 15 Name of doctor
ID I_02 AutoNumber 5 A unique code
Gender Sex_03 Alphabetic 6 Gender of the doctor
Age Ag_04 Numeric 2 Age of the doctor
Address Ad_05 Alphanumeric 30 Postal address of doctor
Contact Number No._06 Numeric 10 Phone number of doctor
Speciality Spc_07 Alphabetic 15 Doctors speciality
Designation Desig_08 Alphabetic 10 Doctors position
Table 2.3:- Database Description of Doctor
8
File Name: Appointment
ID Idd_09 AutoNumber 5 A unique code
Date D_10 Date/Time 10 Appointment Date
Time T_11 Date/Time 5 Appointment time
Table 2.4:- Database Description of Appointment
9
(ii) Webpage Design
INPUT NAME: APPOINTMENT FORM
NAME OF LABEL DESCRIPTION/PURPOSE VALIDATION
REQUIRED
First name This tells the first name of the patient Alphabetic
Last name This tells the last name of the patient Alphabetic
Contact no. Contact number of the patient Numeric
Email E-mail id of the patient Alphanumeric
Date of birth Patients date of birth Date/Time
Hospital Location Preferred hospital location Not null
Doctor Name of the doctor to be consulted Alphabetic
Appointment Preferred date and time of the Not null
preference appointment
Department Select Department Drop down
Table 2.5:- Webpage description of Appointment form
10
INPUT NAME: CONTACT US FORM
NAME OF THE DESCRIPTION/PURPOSE VALIDATION
LABEL REQUIRED
Name Name of the person Alphabetic
Contact no. Contact number of the person Numeric
E-mail E-mail of the person Alphanumeric
Message Message/query of the person Alphabetic
Table 2.6:- Webpage description of contact us form
11
CHAPTER-3
SYSTEM CODING AND IMPLEMENTATION
1. HOMEPAGE
CODING:
HTML:
<html>
<head>
<title>WE CARE HOSPITAL</title>
<link type="text/css" rel="stylesheet" href="mystyle1.css">
</head>
<body>
<section class="intro">
<div class="top">
<div id="menu" align="center">
<ul><b>
<li><a href="NEW HOME.html">HOME</a></li>
<li><a href=#>ABOUT US</a>
<ul class="drop1">
<li><a href="INTRO PAGE.html">Introduction</a></li>
<li><a href="Rules and regulations.html">Rules & Regulations</a></li>
<li><a href="staff.html">Staff info</a></li>
</ul>
</li>
<li><a href=#>DEPARTMENTS</a>
12
<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">
<li><a href="confr & wrkshp.html"><font size="3.5px">Conferences &

Workshop</font></a></li>
<li><a href=upcomingevents.html><font size="4px">Upcoming

Events</font></a></li>
</ul>
<li><a href="appointment page.html">APPOINTMENT</a></li>
<li><a href="request information.html">CONTACT US</a></li>
</b></ul>
</div>
</div>
<div class="inner">
<div class="innerbg">
<h1><b>WELCOME TO WE CARE HOSPITAL</b> </h1>
<a class="start" href="#second"><b>GET STARTED</b></a>
</div>
</div>
13
</section>
<hr color="darkblue" size="7px" id="second">
<div class="para"><div class="middle"> Get Cared For By The Best </div>
<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 Whos Who in
the World recipients. <br> </p>
<p><br><br><br><br><br><br></p>
</div>
<hr color=darkblue size=7px id="second">
<div class="para2"><div class="middle"> <br><br><br><br><font color="white">Where

Healthcare Meets Lifestyle </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>
<hr color=darkblue size=7px id="second" class="lastpara">
<div class="para3"><div class="middle2"> <br><br><br><br><font color="white">Where

Healthcare Meets Hospitality </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>
14
<br><br><br>
</body>
</html>
CSS:
html, body{
margin: 0px;
.intro{
height: 100%;
width: 100%;
background: url(bgimg5.jpg) no-repeat 50% 50% fixed;
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 {
15
font-family: 'Raleway', sans-serif;
color: white;
text-shadow: 15px 15px 800px darkblue ;
font-size: 400%;
margin-left: 400px;
margin-right: -350px;
margin-top: 180px;
.start{
border-radius: 9px;
font-family: 'Oswald', sans-serif ;
color: #02386E;
font-size: 135%;
padding: 10px 20px;
border: solid #02386E 3px;
text-decoration: none;
margin-left: 400px;
margin-right: -350px;
margin-top: 180px;
.start:hover{
color: red;
border: solid red 3px;
box-shadow: 2px 2px 300px #E00A0D ;
16
.para{
text-align: center;
font-size: 160%;
line-height: 210%;
font-family: sans-serif;
color: white;
padding: 20px;
background: url("front page2.jpg") no-repeat;
background-size:1300px ;
margin-left: 30px;
border-radius: 4px;
.para2{
text-align: center;
font-size: 160%;
line-height: 210%;
color: white;
padding: 20px;
background-size:1400px ;
border-radius: 4px;
.para3{
text-align: center;
font-size: 160%;
17
line-height: 210%;
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;
padding: 0px 90px 0px 90px;
line-height: 20px;
.middle2{
font-family: "Montserrat-Black";
font-weight: bolder;
font-size: 50px;
18
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;
19
#menu ul
list-style:none;
box-shadow: 10px 25px 75px 30px white;
opacity: 0.98;
#menu ul li
background-color: #005BFC;
border:1px solid #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;
20
width:180px;
width:180px;
width:180px;
width:135px;
#menu ul.drop2 li{
width:200px;
background-color:#27AE60;
border: solid #27AE60;
margin: 1px;
margin-left: -45px;
#menu ul.drop1 li{
width:180px;
background-color:#27AE60;
border: solid #27AE60;
margin: 1px;
margin-left: -45px;
21
#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:1px solid #229954;
border-radius: 7px;
font-size: 120%;
font-family:"Maiandra GD";
box-shadow: 0px 0px 20px 0px white;
#menu ul ul
position:absolute;
display: none;
#menu ul li:hover > ul
display: block;
22
#menu ul li:hover > ul
animation: load 1s forwards;
animation-duration: 600ms;
animation-name: menu;
@keyframes menu{
0%{
opacity: 0;
transform: rotateY(-90deg) translateY(30px);
100%{
opacity: 1;
transform: rotateY(0deg) translateY(0px);
23
SCREENSHOTS:
24
25
2. ABOUT US PAGE
CODING:
CSS:
h1 {
color: darkblue;
text-align: center;
background-color:white;
font-size: 40px;
body {
background: url("Cool Wallpapers Blue Wallpapers Background.jpg") no-repeat fixed;
.home {
color: white;
font-size: 30px;
.home:hover {
border: solid white 3px;
p{
margin: 30px;
26
line-height: 30px;
font-size: 25px;
color: aliceblue;
font-family: "Maiandra GD";
p.additional {
margin: 30px;
margin-right: 100px;
line-height: 25px;
font-size: 20px;
color: aliceblue;
p.additional1 {
margin: 30px;
margin-right: 350px;
line-height: 25px;
font-size: 20px;
color: aliceblue;
table, th, td{
27
margin: auto;
border: 1px solid #FFFFFF;
border-collapse: collapse;
font-family: arial;
th{
font-size: 20px;
color: white;
td{
color: white;
.depttlist{
line-height: 30px;
font-size: 20px;
color: aliceblue;
margin-left: 50px;
.emergency{
margin-right: 70px;
.bullets {
margin: 30px;
line-height: 30px;
28
font-size: 25px;
color: aliceblue;
.back {
margin-bottom: -20px;
.rules {
margin-left: 330px;
margin-top: -15px;
.download {
margin-left: 50px;
.firstrow {
margin-left: 70px;
.secondrow {
29
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;
30
2.1 Introduction page
HTML:
<html>
<head>
<title>About us</title>
<link type="text/css" rel="stylesheet" href="pages style.css">
</head>
<body>
<a href="NEW HOME.html"><img src="back.png" class="back" height="60px"

width="60px"></a>
<a href="NEW HOME.html" class="home">HOME</a> <br><br>
<h1>A<font size="6">BOUT</font> H<font size="6">OSPITAL</font></h1>
<p> <img src="building.JPG"
width="450px"> <img src="Screenshot (20).png" width="490"><br><br>
We care is a network of hospital and healthcare in india. Founded in 1992 as a autonomas

institution to serve as a nucleus for nurtuing excellence in all aspect of health care.<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>
<h1>O<font size="6">UR</font> V<font size="6">ISION</font></h1>
<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>
31
<div class=bullets>
<ul type="disc"><li>To develop a pattern of teaching in undergraduate and postgraduate medical

education in all its branches so as to demonstrate high standard of medical education to all
medical colleges and other allied institutions in India</li>
<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>
<li>To attain self sufficiency in postgraduate in medical education.</li>
</div>
</body>
</html>
SCREENSHOT:
32
2.2 Rules & regulation page
HTML:
<html>
<head>
<title>Rules and regulations</title>
<link href="pages style.css" rel="stylesheet" type="text/css">
</head>
<body>

width="60px"></a>
<h1>R<font size=6>ULES</font> A<font size=6>ND</font> R<font

size=6>EGULATIONS</font></h1>
<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">
<iframe src="HOSPITAL RULES AND REGULATIONS.pdf" width="75%" height="900px">
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>
33
SCREENSHOT:
2.3 Staff info page
HTML:
<html>
<head>
<title>Staff info</title>
</head>
<body>

width="60px"></a>
<h1>S<font size=6>TAFF</font> I<font size=6>NFORMATION</font></h1>
<br><br>
34
<h2> ORTHOPAEDICS</h2>
<div class="firstrow">
<img src="ortho1.JPG" height="125px" width="250px">
<img src="ortho2.JPG" height="125px">
<img src="ortho4.JPG" height="125px"><br><br>
<img src="ortho5.JPG" height="125px" width="242px">
<br><br>
</div>
<h2> SKIN </h2>
<div class="secondrow">
<img src="skin1.JPG" height="125px">
<br><br>
</div>
<h2> SURGERY </h2>
<div class="thirdrow">
<img src="surgery1.JPG" height="125px" width="250px">
<img src="surgery2.JPG" height="125px">
<img src="surgery4.jpg" height="125px"> <br><br>
35
<br><br>
</div>
<h2> CARDIOLOGY </h2>
<div class="fourthrow">
<img src="CARDIOLOGY1.JPG" height="125px">
<img src="CARDIOLOGY4.JPG" height="125px"><br><br>
<img src="CARDIOLOGY5.JPG" height="125px" width="270px">
</div>
<h2> RADIOLOGY </h2>
<div class="fifththrow">
<img src="RADIOLOGY1.JPG" height="125px" width="280px">
<img src="RADIOLOGY2.JPG" height="125px">
<img src="RADIOLOGY4.JPG" height="125px"><br><br>
<img src="RADIOLOGY5.JPG" height="125px" width="280px">
</div>
</body>
</html>
36
SCREENSHOT:
37
3. DEPARTMENTS PAGE
CODING:
HTML:
<html>
<head>
<title>DEPARTMENTS</title>
</head>
<body>

width="60px"></a>
<h1>O<font size=6>RTHOPAEDICS</font> D<font size=6>EPARTMENT</font></h1>
<br>
<img src="ortho department.JPG" height="450px" width="300px" align=right class="orthoimg">
<p class="additional1">
Excellence in patient care, research, and education is the overall goal of the Department of
Orthopaedics at WE CARE.<br><br>
The Department of Orthopaedic Surgery provides a comprehensive and integrated orthopaedic

program for patients, students, residents, and fellows.<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>
38
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:
39
40
41
42
4. EVENTS PAGE
4.1 CONFERENCE & WORKSHOPS
CODING:
HTML:
<html>
<head>
<title> CONFERENCE & WORKSHOPS </title>
</head>
<body>

width="60px"></a>
<h1>C<font size=6>ONFERENCE</font> & W<font size=6>ORKSHOPS</font></h1>
<br>
<table>
<tr> <th width="90px">S. No.</th><th> <font size="+2">Conferences & Workshop Title</font>

</th><th width="180px"> Date of Uploading </th><th width="200px"> Date of
conference/workshop closed </th></tr>
<tr align="center"><td height="50px">1</td><td align="left"> <a href="event1.pdf"

target="_blank"><font color="#FFFFFF"> 7th Annual AIIMS Spine Surgery Workshop on 16th-
18th November, 2017 </font></a></td><td>23-09-2017 </td><td>18-11-2017</td></th></tr>
<tr align="center"><td height="50px">2</td><td align="left" width="900px"> <a

href="event2.pdf" target="_blank"><font color="#FFFFFF"> Neuro-Physiotherapy Unit of
AIIMS is organizing - 6th Internation Conference of Physical Therapy - INCPT-AIIMS-
2017</font></a> </td><td>28-07-2017 </td><td>11-12-2017</td></th></tr>
<tr align="center"><td height="50px">3</td><td align="left"> <a href="event3.pdf"

target="_blank"><font color="#FFFFFF"> Workshop cum CME "Health Record Sciences &
Informatics in FY 2017-18</a></td><td>13-04-2017</td><td>26-03-
2018</font></td></th></tr>
43
</table>
</body>
</html>
SCREENSHOT:
44
4.2 UPCOMING EVETNS
CODING:
HTML:
<html>
<head>
<title>Upcoming events</title>
</head>
<body>

width="60px"></a>
<h1>U<font size=6>PCOMING</font> E<font size=6>VENTS</font></h1>
<br>
<table>
<tr> <th width="90px" height="50px;">S. No.</th><th> <font

size="+2">Events Title</font> </th><th width="180px"> Date of Uploading </th><th
width="200px"> Date of closing </th></tr>
<tr align="center"><td height="150px">1</td><td align="left"> <a

href="" alt=hello><font color="#FFFFFF"><br><b> AASNS Education Course & Workshops
2017</b> </font></a><br> <br> The Asian Australasian Society of Neurological Surgeons
(AASNS) Neuro Trauma Education Course & Workshop is being held at Bhubaneswar, Odisha,
India on 4th & 5th November 2017 at the Convention Hall of Hotel The Crown.<br> </td><td>
04-11-2017 </td><td>18-11-2017</td></th></tr>

href="" alt=hello><font color="#FFFFFF"><br> <b>7th International Patient Safety
Conference</b> </font></a><br> <br> The International Patient Safety Conference (IPSC), now
in its seventh year, is an annual event to learn from patient safety experts across the world.<br>
</td><td> 01-12-2017 </td><td>18-12-2017</td></th></tr>
45
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:
46
5. APPOINTMENT PAGE
CODING:
HTML:
<html>
<head>
<title>Appointments</title>
<link href="appointment page style.css" rel="stylesheet" type="text/css">
</head>
<body>

width="60px"></a>
<a href="NEW HOME.html" class="home">HOME</a> <img

src="myit_icon_appointment.png" width="150px" style="float: right"> <br><br>
<h1>B<font size=6>OOK</font> A<font size=6>PPOINTMENT</font> </h1>
<br>
<div class="box"></div>
<div class="appointmentform">
<form method="get" action="appointmentsubmit.html">
<table>
<tr><td>Patient Name</td> <td>: <input type="text" placeholder="Patient Name"

class="formname" required></td></tr><br>
<tr><td>Gender</td> <td>: <input type="radio" name="gender" value="male" checked>

Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other</td></tr><br><br>
<tr><td>Contact No.</td> <td>: <input type="text" placeholder="10 digit number"

maxlength="10" class="formname" required></td></tr><br>
47
<tr><td>E-Mail</td> <td>: <input type="email" placeholder="Email ID"
class="formname" required></td></tr><br>
<tr><td>Date of Birth</td> <td>: <input type="text" placeholder="DD/MM/YYYY"

<tr><td>Hospital Location</td> <td>:
<select required class="formname">
<option selected="selected" disabled="disabled">Select Hospital Location</option>
<option>New Delhi</option>
<option>Gurugram</option>
<option>Ghaziabad</option>
<option>Noida</option>
<option>Faridabad</option>
</select></td></tr>
<br>
<tr><td>Preferred Date for Appointment</td> <td>: <input type="text"

placeholder="DD/MM/YYYY" maxlength="10" class="formname" required></td></tr><br>
<tr><td>Preferred Time</td> <td>: <input type="text" placeholder="HH:MM"

<tr><td>Department</td> <td>:
<select required class="formname">
<option selected="selected" disabled="disabled">Select Department</option>
<option>Cardiology (Heart Care)</option>
<option>Critical Care</option>
<option>Cosmetic Dermatology </option>
<option>Dentistry & Maxillofacial Surgery</option>
<option>Endocrinology (Diabetes)</option>
<option>ENT</option>
<option>Gastroentrology</option>
48
<option>General & Laparoscopic Surgery</option>
<option>General Physician</option>
<option>Hematology</option>
<option>Interventional Radiology</option>
<option>IVF Clinic(Assisted Reproduction)</option>
<option>Nephrology</option>
<option>NeuroSciences</option>
<option>Nuclear Medicine</option>
<option>Obstetrics & Gynecology</option>
<option>Oncology (Cancer Care)</option>
<option>Opthalmology (Eye Care)</option>
<option>Orthopaedics (Bone and Spine Injury)</option>
<option>Pediatrics</option>
<option>Physiotherapy</option>
<option>Psychiatry and Psychotherapy</option>
<option>Pulmonary Medicine</option>
<option>Radiology & Imaging</option>
<option>Transplant</option>
<option>Urology</option>
</select></td></tr><br>
</table><br>
<input type="submit" class="submitbtn"><input type="reset" class="resetbtn">
</form>
</div>
</body>
</html>
49
CSS:
body {
margin-top: 10px;
.booked {
font-family: Candara;
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;
50
.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;
border-radius: 30px;
display: block;
.submitbtn{
margin-left: 180px;
display: inline-block;
padding: 15px 25px;
font-size: 20px;
cursor: pointer;
outline: none;
color: black;
background-color:#FFF;
border: none;
51
box-shadow: 0 5px #999;
.submitbtn:hover {
background-color:#0012A6;
color: white;}
.submitbtn:active {
background-color: #0012A6;
transform: translateY(4px);
.resetbtn{
margin-left: 50px;
padding: 15px 25px;
font-size: 20px;
cursor: pointer;
outline: none;
color: black;
border: none;
52
}
.resetbtn:hover {
color: white;}
.resetbtn:active {
background-color: #0012A6;
transform: translateY(4px);
h1 {
margin: 0px;
color: darkblue;
text-align: center;
font-size: 40px;
.home {
color: white;
font-size: 30px;
.home:hover {
.back {
53
SCREENSHOTS:
54
6. CONTACT US PAGE
CODING:
HTML:
<html>
<head>
<title>Appointments</title>
<link href="contactus page style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="NEW HOME.html"><img src="back.png" class="back" height="60px" width="60px"></a>
<a href="NEW HOME.html" class="home">HOME</a> <img src="Contact-Us-PNG.png"

width="150px" style="float: right"> <br><br><br>
<h1>C<font size=6>ONTACT</font> U<font size=6>S</font> </h1>
<br>
<div class="box"></div>
<div class="appointmentform">
<form method="get" action="contactsubmit.html">
<table>
<tr><td>Your Name</td> <td>: <input type="text" placeholder="Full Name" class="formname"

required></td></tr><br>
<tr><td>Contact No.</td> <td>: <input type="text" placeholder="10 digit number"

<tr><td>E-Mail</td> <td>: <input type="email" placeholder="Email ID" class="formname"

required></td></tr><br>
<tr><td>Your Message :</td><br> <td> <textarea placeholder="Type

your message here" class="formname" style="height: 100px"></textarea></td></tr><br>
55
</table><br>
<input type="submit" class="submitbtn"><input type="reset" class="resetbtn">
</form>
</div>
<div class="address">
<img src="map.JPG" width="550px"><br><br>
<font size="+2" face="Arial Black"><u>WE CARE HOPITAL</u></font><br><br>
<b>Address:</b> 7/10, Chaudhary Deep Chand Marg, South Patel Nagar,<br>

New Delhi, Delhi 110008<br><br>
<b>Phone:</b> 098110 75034 <br>
</div>
</body>
</html>
CSS:
body {
margin-top: 10px;
.booked {
font-family: Candara;
font-size: 25px;
56
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;
57
margin-top: 100px;
.box{
box-sizing: border-box;
background: rgba(0,0,0,.5);
width: 700px;
height: 600px;
margin-left: 600px;
display: block;
.submitbtn{
margin-left: 180px;
padding: 15px 25px;
font-size: 20px;
cursor: pointer;
outline: none;
color: black;
border: none;
58
.submitbtn:hover {
color: white;}
.resetbtn{
margin-left: 50px;
padding: 15px 25px;
font-size: 20px;
cursor: pointer;
outline: none;
color: black;
border: none;
.resetbtn:hover {
color: white;}
h1 {
margin: 0px;
color: darkblue;
text-align: center;
59
font-size: 40px;
.home {
color: white;
font-size: 30px;
.home:hover {
.back {
SCREENSHOTS:
60
61

Hospital Website Created Using HTML & CSS, Computer Application Project

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hospital Website Created Using HTML & CSS, Computer Application Project

Uploaded by

Copyright:

Available Formats

Hospital Website

Submitted in partial fulfillment of the requirements

Bachelor of Business Administration

Guru Gobind Singh Indraprastha University, Delhi

Guide: Submitted by:

Ms. Priti Sharma 1. Simarjit Singh Saluja

Institute of Innovation in Technology & Management,

certify that the IT Application Project Report (BBA-313) entitled HOSPITAL

WEBSITE is done by us and it is an authentic work carried out by us at Institute of

knowledge and belief.

1. Signature of the student 2. Signature of the student

3. Signature of the student 4. Signature of the student

Date: 15th November 2017

Signature of the Guide

S No Topic Page No.

4 Chapter-1: Problem Definition 1

5 Chapter-2: System Analysis & Design 4

6 Chapter-3: System Coding & Implementation 12

S No Topic Page No.

1.1 Job done by the team 3

2.1 Database Description of Departments 7

2.2 Database Description of Patient 8

2.3 Database Description of Doctor 8

2.4 Database Description of Appointment 9

S No Topic Page No.

2.1 Block diagram of WE CARE Hospital 4

2.2 Site Map of WE CARE Hospital 5

2.3 ER Diagram of WE CARE Hospital 6

contacting the hospital for any queries.

2. There can be no interaction between the patients and doctors.

3. Patients used to stand in long queues.

4. Wastage of Stationary other material resources increase due to paper work.

5. Current manual system requires large efforts to compile information.

information are becoming difficult.

1.2. OBJECTIVES OF PROPOSED SYSTEM :

2. Nowadays, it has become easy to get information through websites. No newspaper,

easily available on the website.

3. It helps in reaching the information to large number of patients/visitors in minimum

time.Modes of information is faster than the way before.

4. It can be the centralized source of information.

can also get information about international doctors as well as patients.

3. CONTRIBUTION OF THE TEAM MEMBERS IN WEBSITE DEVELOPMENT :

Name Job To Be Done

Simarjit Singh Saluja Data collection, Documentation

Simapreet Singh Walia Coding, Designing

Sonam Puri Data collection, Documentation

Sonu Singh Coding, Designing, Documentation

Table no. 1.1: Job done by the team

SYSTEM ANALYSIS AND DESIGN

Visits Gives Charges

Figure 2.1: Block diagram of WE CARE Hospital

Figure 2.2:- Site Map Of WE CARE Hospital

Figure 2.3:- ER Diagram of WE CARE Hospital

File Name: Departments

Field Name Field Code Field Type Size Description

Dpt_ID Did_14 AutoNumber 5 A unique code

Name N_13 Alphabetic 15 Name of receptionist

Treatment Tr_15 Alphabetic 12 Details of Treatment

Table 2.1:- Database Description of Departments

File Name: Patient

Field Name Field Code Field Type Size Description

Name Name_01 Alphabetic 15 Name of Patient

P_ID Id_02 AutoNumber 5 A Unique code

<div class="para"><div class="middle"> Get Cared For By The Best </div>