HOSTEL&PG BOOKING WEBSITE

REPORT FOR PROJECT BASED INTERNSHIP

DIGNIQUE TECH LAB
BACHELOR OF TECHNOLOGY
COMPUTER SCIENCE AND ENGINEERING

SUBMITTED BY:
SIMRAN RUNGTA(170343)

UNDER THE SUPERVISION OF

Lavish Arora Sir
DEPARTRMENT OF COMPUTER SCIENCE AND TECHNOLOGY

SCHOOL OF ENGINEERING AND TECHNOLOGY

April-May 2020
 ACKNOWLEGEMENT

We express our deep sense of gratitude to all almighty for his blessing without
which completion of work wouldn’t be possible .Our project wouldn’t have been
successful without the assistance and help rendered by each of them. We wish to
express our profound sense of gratitude and sincere thanks to our project mentor
Mr Lavish Arora ,who give expert guidance ,support, encouragement and valuable
suggestion throughout the project work. We also own thanks for fruitful
discussions to our friends for their well wishes and all our colleagues who
supported in the successful completion of this work.
CONTENTS

Abstract---------------------------------------------------------------------------------

Chapter 1:
1.1:Introduction--------------------------------------------------------------
1.2: A Brief Presentation---------------------------------------------------
Chapter 2: Tags Used In The Website
2.1: HTML--------------------------------------------------------------------
2.2: CSS-----------------------------------------------------------------------
Chapter 3: Applications

Conclusion: ---------------------------------------------------------------------------
REFERENCES------------------------------------------------------------------------
 ABSTRACT

This is a website especially created for Hostel & PG booking purpose with the help of HTML
and CSS and javaScript. This website is made using the different HTML and CSS tags like
 HTML
 HTML style, images, text, paragraphs, elements, attributes, links, tables, lists and HTML
media like HTML videos, YouTube and many more.
 CSS
CSS color, background, margins, borders, height, width, text, links, lists, tables, display,
outlines, forms etc.
The sector where Hostel&Paying Guest.com(H&P.COM) is mainly for the youth .
Many standard verified websites for Hotels like OYO , goibibo are there but in case of hostels people
find difficulties in searching for hostels as there are no such standard verified websites available.
Youth all over the world are becoming more and more active seeking for efficient and affordable
places to stay for vacation ,training, jobs,etc. People face much more difficulies by physically
searching for a safe and secure hostels in the preferred location.

Our main purpose is create an effective website which uses the concepts of basic HTML and CSS.
 CHAPTER 1
INTRODUCTION

As the website has a feedback system which is providing rating according to the quality and facilities
available in the hostels it will be easy for the people for selecting the hostels and PG’s.
As tourism , is gradually changing and increasing so this appears to be an attractive market.
As females have various security concerns regarding the locality, surroundings, ambience of the hostels
, our website will ensure them that they choose secured hostels.
Our webiste will provide the users with various options of hostels so that they can choose their desired
hostels without compromising their needs or desires.
The sector where Hostel&Paying Guest.com(H&P.COM) is mainly for the youth .
Many standard verified websites for Hotels like OYO , goibibo are there but in case of hostels
people find difficulties in searching for hostels as there are no such standard verified websites
available.
Youth all over the world are becoming more and more active seeking for efficient and affordable
places to stay for vacation ,training, jobs,etc. People face much more difficulies by physically
searching for a safe and secure hostels in the preferred location.
 1.1 A BRIEF PRESENTATION

This is the main page of our website. This gives the idea to the user about what we work for
and what is the objective of our website. Like it clearly shows that this website is meant for
Hostel &PG booking websites purposes. If any user is interested in finding hostel or pg he/she
will definitely look for more information. For that we have options like ABOUT (which tells
more about the website), CONTACT, LOGIN ,SIGNUP ,ACCOMODATION WITH
HOSTEL’S AND PG’S.

The above is the introduction page to our website, which tells more about our website and depicts our
main purpose to create this website, which is basically the concept of Hostel. It also showcases the
need of Hostels for the youth. Through this the user can get an idea of our website.
This page serves as the basic information to the user.
After this page there is detailed description Of the Hostel which are available in the country India .
Like Delhi, Mumbai, Surat, Goa, Chennai, Bangalore and many more.
Here by clicking on the place you will land to a page where you will see different hostels in that
Locality and the Hostel has detailed description of that Hostel Like where it is Situated and the
breakfast and wifi is there or not.How much distance it is from main market.
This all details are there.
Here You will know about our services what we are good at and how we service our customer.
Like we provide The Hostels which you will love We have Millions of Reviews of our customer.
From your Community of Travellers.
We have Instant Confirmation of the hostels you book and there is no any booking fees available
Your Booking is guaranteed and that is our record so in case if you have any problem You can
Contact us.There is 24/7 Customer Service Available and that too in Different Languages
After that there is About us Where there is detailed about who is the owner What is there in our
Website when it is Established What All we do and give services and there is all about what is the
Website is on.like Hostels offer so much more than a cheap place to stay – they're also a fun way to
travel and meet like-minded people. Common areas like shared kitchens and game rooms give
you the chance to swap tips, tricks, and travel stories with backpackers from all over the
world.
After that We have Contact us page where there is detail of everything about the website.
And whoever wants to contact us can contact by clicking on the links there is Help center as well
And many more.

Now we have the Login page where the user Enters the data and it is stored in our server.
Then there is Signup page where the user will fill the details.
And some More Glimpse of the websites.
CHAPTER 2
TAGS USED
2.1 HTML
• THE <form> ELEMENT
The HTML <form> element defines a form that is used to collect user input. An HTML form
contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons,
submit buttons, and more.

• HTML INPUT TYPES

TEXT <input type="text"> defines a one-line text input field:

SUBMIT <input type="submit"> defines a button for submitting form data to

a form-handler.

RADIO <input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of
choices
BUTTON <input type="button"> defines a button

CHECKBOX <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited
number of choices.

EMAIL The <input type="email"> is used for input fields that should contain
an e-mail address.

DATE The <input type="date"> is used for input fields that should contain a
date.

MONTH
The <input type="month"> allows the user to select a month and
 year.
NUMBER The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.

FILE The <input type="file"> defines a file-select field and a "Browse"

button for file uploads.

• HTML INPUT ATTRIBUTES

VALUE The value attribute specifies the initial value for an input field

REQDONLY The readonly attribute specifies that the input field is read only
(cannot be changed)

DISABLED The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will
not be sent when submitting the form
SIZE The size attribute specifies the size (in characters) for the input field

MAXLENGHT The maxlength attribute specifies the maximum allowed length for
the input field.

AUTOCOMPLETE
The autocomplete attribute specifies whether a form or input field
should have autocomplete on or off.
When autocomplete is on, the browser automatically completes the
input values based on values that the user has entered before.
NOVALIDATE The novalidate attribute is a<form attribute.When present,
>
novalidate specifies that the form data should not be validated when
submitted.
FORM The form attribute specifies one or more forms an <input> element
belongs to.
FORMACTION The formaction attribute specifies the URL of a file that will process
the input control when the form is submitted.
 FORMENCTYPE The formenctype attribute specifies how the form data should be
encoded when submitted (only for forms with method="post").

FORMMETHOD The formmethod attribute defines the HTTP method for sending
form-data to the action URL.

FORMTARGET The formtarget attribute specifies a name or a keyword that indicates

where to display the response that is received after submitting the
form.
HEIGHT AND The height and attributes specify the height and width of
WIDTH width
an <input type="image"> element.

LIST The list attribute refers to a <datalist> element that contains pre-
defined options for an <input> element.

MIN AND MAX The min and max attributes specify the minimum and maximum
values for an <input>
element.
• HTML MEDIA
o To play your video on a web page, do the following: o Upload the video to
YouTube o Take a note of the video id o Define an <iframe> element in
your web page o Let the src attribute point to the video URL
o Use the width and height attributes to specify the dimension of the player o
Add any other parameters to the URL

AUTOPLAY We can have our video start playing automatically when a user visits
that page by adding a simple parameter to our YouTube URL.
Value 0 (default): The video will not play automatically when the player
loads.
Value 1: The video will play automatically when the player loads.

PLAYLIST A comma separated list of videos to play (in addition to the original
URL).
LOOP Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
 CONTROLS Value 0: Player controls does not display.
Value 1 (default): Player controls display.

OBJECT AND YouTube <object> and <embed> were deprecated a little late. We
EMBED should migrate our videos to use <iframe> instead.

2.2 CSS
A CSS rule-set consists of a selector and a declaration block:

o The selector points to the HTML element you want to style. o The declaration block
contains one or more declarations separated by semicolons. o Each declaration includes a
CSS property name and a value, separated by a colon.
o A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

• SELECTORS
ELEMENT The element selector selects elements based on the element name.
SELECTOR

ID SELECTOR The id selector uses the id attribute of an HTML element to select a specific
element.The id of an element should be unique within a page, so the id
selector is used to select one unique element!
To select an element with a specific id, we write a hash (#) character,
followed by the id of the element.

CLASS The class selector selects elements with a specific class attribute.
SELECTOR To select elements with a specific class, we write a period (.) character,
followed by the name of the class.
GROUPING If you have elements with the same style definitions,it will be better to group
the selectors, to minimize the code.
SELECTORS
To group selectors, we separate each selector with a comma.

• OTHER CSS TAGS

BACKGROUND The background-color property specifies the background color of an
COLOR element.

BACKGROUND The background-image property specifies an image to use as the

IMAGE background of an element.By default, the image is repeated so it covers
the entire element.
BORDER The CSS border properties allow you to specify the style, width, and
color of an element's border.
The border-width property specifies the width of
the four borders.The border-color property is used to set the
color of the four borders.

MARGIN The CSS margin properties are used to create space around elements,
outside of any defined borders like margin-bottom, margin-left,
marginright, margin-top.

PADDING The CSS padding properties are used to generate space around an
element's content, inside of any defined borders like padding-bottom,
padding-left, padding-right, margin-top.

HEIGHT AND The height and widt properties are used to set the height and width of
an e h
WIDTH
lement.
MAX AND MIN Used to set the max and min height, and max and min width.

TEXT COLOR The color property is used to set the color of the text.

TEXT ALIGN The text-align property is used to set the horizontal alignment of a text.

FONT SIZE The font-size property sets the size of the text.
POSITION The position property specifies the type of positioning method used for
an element. It can be static, relative, absolute, fixed and stickey.

OPACITY The opacity property specifies the opacity/transparency of an element.

CHAPTER 3
APLICATIONS AND NEED OF A WEBSITE

 CUSTOMERS CAN BE KEPT INFORMED

A website is an effective way of introducing the customers to new services, letting them know
about new products, announcing upcoming events and special promotions. One can also
provide added value by posting tips, resources and other information through a blog on his/her
website. Unlike print ads, newspaper articles and flyers, which quickly become outdated, a
website can provide current information and news. And if we discover a mistake after you
publish a page or post, it is a quick fix.
A website can be so much more than just an online brochure or catalogue though. Now we have
YouTube videos, Podcasts, Webinars, eBooks and other online media to showcase our skills,
expertise and products, provide online classes, courses and workshops. Not to mention social
media integration which enables you to share information on your website across numerous
other channels and reach an even wider audience.
 A WEBSITE IS ALWAYS ACCESSIBLE
Unlike you bricks-and-mortar location, which is only open a few hours a day, a website is open
24 hours a day, 365 days a year. One can provide both regular and prospective customers the
convenience of reviewing the products and services when the store or office is closed.
Not only that, with so many interactive features and add-ons available, visitors to the website
can contact the owner, sign up for the courses, schedule appointments and even purchase
directly through the website even when one is away from his/her desk or after closing .

With today’s busy lifestyles, this is a great selling point when making a purchase decision.
 A WEBSITE ENABLES YOU TO TARGET A WIDER AUDIENCE
Websites are accessible from anywhere in the world provided there is an internet connection.
Since more and more people have access to the internet, even in remote locations, you can
target a much wider audience if your business has a website.
 Whether one offer products or services, or one is business or consumer based, his/her website
provides him/her with an alternative location to sell. As a retailer, an eCommerce website is a
great place to sell your products to a wider market.
Even service-based businesses can offer their services globally through a website. Now that we
have so many affordable ways to communicate with people, we can do business with anyone,
anywhere, any time. A website makes it so much easier to attract clients from a global market.
 IT PROVIDES A MEDIUM TO SHOWCASE YOUR WORK
No matter what type of business one is in, a website is a great place to showcase his work or
demonstrate his skills. By including a portfolio, image gallery or videos, as well as testimonials
about the work, we can demonstrate what makes our company or us unique.
 A WEBSITE SAVES YOU TIME
Saving time is another great reason why our business needs a professional website.

Time is an important commodity in our ever increasing fast paced world even if we don’t attach
a monetary value to it. Most people these days don’t have enough time for leisure, pleasure,
family or healthy activities. Having a professionally designed website saves you time both in
the short and long term.
By providing information to the customers online, one can save a vast amount of valuable time
that he would otherwise spend communicating to your prospects.
Talking to customers on the phone, in messenger or emails, face-to-face at meetings,
networking events or trade shows, it all takes time. Creating flyers, brochures and other
promotional material takes time – time to plan, research, communicate to your designer, printer
and so on. Not to mention the time needed to distribute your marketing material.
With a website, we can save time by providing information about our products and services in
various online formats—graphics, video, ebooks, flip books— or as text right on the page—no
distribution required. Once your website is up and running, it is available to our customers
 indefinitely, saving our time having to communicate the same message over and over again to
different people.

CHAPTER 4
CONCLUSION
Websites play an important part in today’s world where the whole population is engaged in the
digital and technological world. So, in order to contact with them, websites are the best source.
Websites provide all the basic information needed.
By this project we have concluded that we were able to make an efficient static website with
the help of basic HTML and CSS. In this website we have used the concepts of HTML such as
HTML elements, HTML attributes, HTML forms, HTML media and other basic HTML tags
and attributes.
We have also highlighted the use of CSS such as CSS elements, CSS attributes, CSS selectors
and other basic CSS tags such as background color, padding, opacity etc.
 With the help of the above mentioned tags and attributes, we designed a website that was able
to meet its objective of raising funds and collecting donations from the people to help the needy.
This static website have its own place for platform where there is specific information required.
It also involves the eye capturing visual effects which also attracts the user.

CHAPTER 5

REFERENCES

1. "First mention of HTML Tags on the www-talk mailinglist”. World Wide Web Consortium.
October 29, 1991. Retrieved April 8, 2007.
2. "Index of elements in HTML 4". World Wide Web Consortium. December 24, 1999.
Retrieved April 8, 2007.
3. W3 Schools