WORKFLOW

TRAVELLER'S
ZONE
A Travel Agency Website

15th NOV, 2023

lovely Professional
University Submitted To: -[Link] Kakkar
Submitted By:
AMAN KUMAR(12314044)
SANDEEP VERMA PENMETSA (12311838)
PUSHP RAJ (12314128)
1|Page
 INDEX

Chapter Page No
I. Introduction---------------------------------------------------- 3-4

II. Technology----------------------------------------------------- 5

III. Module---------------------------------------------------------- 6-9

IV. Website--------------------------------------------------------- 10-15

a. Snapshots---------------------------------------------- 10-14
b. References--------------------------------------------- 15

2|Page
 Introduction To A Traveling agency
website "TRAVELER'S ZONE"

INTRDUCTION
This report will discuss the creation of a tour and travel website using Hypertext markup language (
HTML) and cascading style sheets (CSS).

Lesson Overview:
This website design is made by HTML and CSS.

Project Motive:
The motive of this project is to create a vacation trip booking website that is:

Comforting:

The website should provide visitors with all information they need regarding planning
a trip to booking hotels and travel options.

USER-FRIENDLY:

This website will be easy to navigate and use for all type of users.

Project Scope:
User friendly booking system:

User-Friendly Booking System: Develop a seamless and user-friendly booking system that
allows users to search, compare, and book flights, hotels, and other travel services efficiently.

Interactive Destination Guide:

Implement an interactive destination guide that provides users with
information about various travel destinations, including attractions, activities, weather
, and local tips to help users plan their trips effectively.

Personalized User Profiles:

Create a personalized user profile system where customers can save their
preferences, past trips, and payment information for a smoother booking experience
in the future. This enhances customer satisfaction and loyalty.

Integration of Social Sharing and Reviews:

Incorporate social sharing features and user reviews to enhance the

community aspect of travel planning. This includes allowing users to share their
itineraries, experiences, and recommendations, fostering a sense of community and
trust among travelers.
3|Page
Responsive Design:
This website is developed with a responsive design approach to ensure accessibility
across various devices including tablets, mobile phones etc. CSS syntax is used to utilize and
adapt the layout based on device screen.

Quality assurance:
This includes testing for compatibility, usability. Feedback from potential users is collected
using feedback form and used to make necessary improvements.

4|Page
 TECHNOLOGIES
Technology used:
The following technologies were used to create the website:

• HTML:
Hyper Text Markup Language is the standard markup language for creating web pages. It is
used to define the structure and content of a web page.

• CSS:
Cascading Style Sheets is a language used to describe the presentation of a web
page. It is used to control the layout, colours and fonts of a web page.

PROJECT IMPLEMENTATION:
The website was created using a variety of tools and software, including:

• VISUAL STUDIO CODE:

A text editor and integrated development environment (IDE) for building and
debugging web applications.

• LIVE SERVER:
A tool that allows you to preview your web pages in a web browser while you are
editing them.
The choice of technologies for this project was based on the following factors:
• Suitability: The chosen technologies are well-suited for creating informative and
easy-to-navigate websites.
• Popularity: The chosen technologies are all popular and widely used, which makes it
easier to find support and resources.
• Maturity: The chosen technologies are all mature and stable, which reduces the risk
of problems.

5|Page
 MODULE
HTML5
1. <div>:
The <div> element usually has no specific semantic meaning by itself, simply
representing a division, and is typically used for grouping and encapsulating other
elements within an HTML document and separating those from other groups of
content. As such, each <div> is best described by its contents.
2. <section>:
Section tag defines the section of documents such as chapters, headers, footers
or any other sections. The section tag divides the content into section and subsections.
The section tag is used when requirements of two headers or footers or any other section
of documents needed
3. Heading Tags:
Headings can be used to describe the topic they precede and they are defined with
the <h1> to <h6>. Headings support all the global attributes.
4. Anchors:
Anchor tags are commonly used to link separate webpages, but they can also be
used to link between different places in a single document, often within table of contents or
even launch external applications
• <a href=” [Link] ></a> It creates a hyperlink, to the URL
[Link] as specified by the href
• <a target=” _blank” ></a> Open link in new tab/window
• <a target=” rel=” ” ></a> Specifies the relationship between the current
document and the linked document
• <a href=”tel: +918480688009” >Callus</a> value of the href-attribute begins
with tel: your device will dial the number when you click it. This works on mobile
devices or on computers/tablets running software – like Skype or FaceTime – that
can make phone calls.
•
5. <ul>:
An ordered list can be created with the <ul> tag and each list item can be created
with the <li> In this tag I have used to create navigation bar button such as Home tab,
Service Tab, About Tab etc.
6. <input>:
The <input> tag specifies an input field where the user can enter data.

• <input type="button"> To add button of

• <input type="email"> To add email text field
• <input type="password"> To add Password field
• <input type="submit"> To add submit button

6|Page
 • Placeholder attribute the placeholder attribute specifies a short hint
that describes the expected value of an input field
• Required attribute It used for mandatory to input something

7. <label>
The <label> HTML element represents a caption for an item in a user interface.

8. <footer>:
The <footer> HTML element represents a footer for its nearest
ancestor sectioning content or sectioning root element. A <footer> typically contains
information about the author of the section, copyright data or links to related
documents.
9. <span>:

The <span> tag is an inline container used to mark up a part of a text, or a part
of a document.

10. <ion-icon >:

• <ion-icon name="logo-google"> </ion-icon> To add Google logo
• <ion-icon name="logo-facebook"> </ion-icon> To add Facebook logo
• <ion-icon name="logo-skype"> </ion-icon> To add Skype logo
• <ion-icon name="logo-instagram"> </ion-icon> To add Instagram logo
• <ion-icon name="logo-twitter"> </ion-icon> To add Twitter logo
11. <p>:

To add Paragraph of a webpage

12. <br>:
To break line
13. <i> and <em>:
To emphasize the text or paragraph
14. <b> and <strong>:
To bold the text or paragraph.

7|Page
CSS:
1. Background:
We use this property to add something related to the background such as
• Background: url() To add image on the webpage
• Background-size: cover Total cover of the webpage
• Background-position: center To add image on center of the webpage
• Background-position: right-top To add image on right top of webpage
• Background-position: right-buttom To add image right-bottom of the
webpage
• Background-position-x: left To change the position in x direction
2. font-size:
we used to increase or decrease of font size and the value added in px format
3. font-family:
We have used to this property to change the font of the text. Such as We have used
“arial” text format in this webpage.
4. font-weight: bold:
To bold the text
5. color:
It used to change the color of the text or paragraph
6. height and width:
The CSS height and width properties are used to set the height and width of an
element.
7. Padding:
CSS Padding is the space between the content and the border of an element. It adds
spacing inside the element, controlling its internal space, thus affecting its
dimensions and appearance.
• Padding-top:
• Padding-left:
• Padding-right:
• Padding-bottom:
8. Margin:
The CSS margin properties are used to create space around elements, outside of any
defined borders
• Margin-left: To add left of the margin
• Margin-top: To add right of the margin
• Margin-right: To add right of the margin
• Margin-bottom: To add bottom of the margin
9. Float:
The CSS float property specifies how an element should float.

8|Page
10. Border:
• Border-style: solid continuous thin line border visible
• Border-style: dashed dashed line border visible
• Border-width: add some value in px to change the width of
border
• Border-color: To change the color of border
• Border-radius: To make in circular format
11. Cursor: pointer
The cursor is a pointer and indicates a link
12. Transition:

13. Display:
• Display: inline Displays an element as an inline element
(like<span>). Any height and width properties will have no effect.
• Display: inline-block Displays an element as an inline-level block
container. The element itself is formatted as an inline element, but you
can apply height and width values
• Display: flex Displays an element as a block-level flex
container
14. Transform:
The transform property applies a 2D or 3D transformation to an element. This
property allows you to rotate, scale, move, skew, etc., elements.
15. Position: absolute:
The position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).
16. List-style

• Set different list item markers for ordered lists

• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colours to lists and list items
17. Justify-content
The justify-content property aligns the flexible container's items when the items
do not use all available space on the main-axis (horizontally).
• Justify-content: center: Items are positioned in the center of the
container.

18. Align-items:
The align-items property specifies the default alignment for items inside a flexbox
or grid container. You can add normal, stretch, center, flex-start etc. as the value.

9|Page
 Website
1. Home tab

10 | P a g e
1.a About Us:

11 | P a g e
2. Gallery

12 | P a g e
[Link]

13 | P a g e
[Link] and
review

14 | P a g e
References:
1. Geeks For Geeks
2. W3Schools
3. HTML5 Black Books
4. Mastering HTML, CSS & Java Scrip Web Publishing by Laura Lemay
5. HTML & CSS The Complete Reference by Thomas Powell

15 | P a g e
16 | P a g e