w

GROUP ASSIGNMENT
TECHNOLOGY PARK MALASIYA
CT053-3-1-FWDD
FUNDAMENTALS OF WEB DESIGN AND DEVELOPMENT
NP1F1809IT
HAND OUT DATE: 28 - April – 2019
HAND IN DATE: 25 - July - 2019
WEIGHTAGE: 70%
Submitted By: Submitted To:
Aaditya Jha (NP000290) Mr. Ravi Rauniyar
Ajay Kumar Sah (NP000292) Lecturer
Amar Prajapati (NP000294)

INSTRUCTIONS TO CANDIDATES:

1 Submit your assignment at the administrative counter

2 Students are advised to underpin their answers with the use of

references (cited using the Harvard Name System of Referencing)

3 Late submission will be awarded zero (0) unless Extenuating

Circumstances (EC) are upheld

4 Cases of plagiarism will be penalized

5 The assignment should be bound in an appropriate style (comb bound or

stapled).

6 Where the assignment should be submitted in both hardcopy and softcopy, the
softcopy of the written assignment and source code (where appropriate) should
be on a CD in an envelope / CD cover and attached to the hardcopy.

7 You must obtain 50% overall to pass this module.

 Executive Summary
The team should need to thank you for working with the suggestion for structure up the
site, close to help for business progression and travel and visits opportunity in Nepal
appear. We are one of the trusted in embellishments for in site application headway and
sponsorship, and we are engaged at this chance to prop our present relationship.
Developers are happy to show to you, through this response that have the cutoff centers,
people, systems, development and the longing to be your significant associate of decision.
Our main goal is to build up a condition of reasonableness, enduring quality, goodness
and obligingness towards our customers, specialists, merchants and society allowed to
move around persistently. Developers are turned around our clients and relates and have
an imperativeness for movement. We go going toward enormous difficulties and pride
ourselves on controlling them. Our trusted in extra in assistant for web application
advancement and sponsorship, site plan improvement (SEO), moving materials web
publicizing guide. In setting on our discussion's fashioners handle your business needs.
In like manner, should need to ensure a solid business establishment to pass on constantly
discernable sensibility, continue and improve consistence and pass on client faithfulness,
while meeting its key targets around quality, accuracy, time and cost.
 Table of Contents
Executive Summary .................................................................................................... 2

1. Introduction .......................................................................................................... 1

1.1 Background information ................................................................................... 1

1.2 Objectives ........................................................................................................... 2

1.3 Scopes ................................................................................................................. 2

1.4 Functions ............................................................................................................ 3

2. Website Development Method ............................................................................. 3

2.1 Introduction to HTML: ..................................................................................... 3

2.2 Introduction to CSS ........................................................................................... 7

2.3 Introduction to JavaScript ................................................................................ 8

3. Screenshots of all the pages ................................................................................ 10

3.1 HOME PAGE: ................................................................................................. 10

3.2 HOT TOURS PAGE:....................................................................................... 13

3.3 SPECIAL OFFERS PAGE:............................................................................. 14

3.4 BLOG PAGE: .................................................................................................. 15

3.5 CONTACT US PAGE: .................................................................................... 16

3.5.1 Booking Form: ........................................................................................... 17

4. Navigational Structure ....................................................................................... 29

4.1 Justification of navigation Structure: ............................................................. 29

5. Conclusion .......................................................................................................... 31

References ................................................................................................................. 33

APPENDIXES ........................................................................................................... 35

MARKING SCHEME .............................................................................................. 40

 List of Figures:
Figure 1: Company Logo ............................................................................................ 1
Figure 2: Screenshot of HTML structure .................................................................. 4
Figure 3: Home page of the project (i.e. GhumGham.) ........................................... 11
Figure 4: HOT TOUR PACKAGE .......................................................................... 13
Figure 5: Special Offers page (index2.html) ............................................................ 14
Figure 6: Blog page (index3.html) ............................................................................ 15
Figure 7: Contact Us page (index4.html) ................................................................. 16
Figure 8: Booking Form ........................................................................................... 17
Figure 9: Pokhara Itinerary (pokhara.html) ........................................................... 18
Figure 10: Mustang itinerary page (indexx.html).................................................... 20
Figure 11: Rara, Lake Tour itinerary page (generic.html) ..................................... 22
Figure 12: Three division tour package. .................................................................. 23
Figure 13: Kathmandu tour package page (index.html) ......................................... 24
Figure 14: Dharan Tour package itinerary (indexx.html) ...................................... 26
Figure 15: Chitwan Tour package itinerary (indexxx.html) ................................... 28
Figure 16 : Main Navigational Structure ................................................................. 29
Figure 17: HOME PAGE wireframe ....................................................................... 35
Figure 18:HOT TOURS wireframe ......................................................................... 36
Figure 19: SPECIAL OFFER page wireframe ........................................................ 37
Figure 20: BLOG page wireframe............................................................................ 38
Figure 21: CONTACT US Page wireframe. ............................................................ 39
1. Introduction
1.1 Background information
Client Overview:
GhumGham is a private company which provides complete packages related to tours and
travels in Nepal and holds authorization certificate from travel organization of Nepal and
is verified by the specialist of travel industry of Government of Nepal, Nepal Association
of Tour and Travel Agent (NATTA) and Nepal Tourism Board (NTB). It is a real-time
Website and provides travel package relaxation through unmatched products.

Figure 1Company Logo

It was started in 2018 and since then it is growing rapidly due to its trusted clients and the
facilities provided by the company. The main objectives of the company is to rise as the
main tours and travel agency of the Nepal. The reality behind its success is that it was
established by the group of youthful members which helps them to understand the
thoughts and requirements of the clients which make them versatile towards the clients.
The affiliation is going and expertly administered by people having huge presence in
invitingness business. With the central territory in Durbarmarg (tourist’s destination of
kathmandu), they are furnished with basic structure and an astonishing arrangement of
ground dealing with administrators covering all of Nepal and its Sub Continent.

The alliance is managing visits and trekking to better places in Nepal including
Kathmandu, Pokhara, Chitwan, Dharan, Mustang, Chitlang and anything is possible from
that point. They are submitted towards offering a full degree of things and associations to
consider the necessities from went with gathering and free and self-decision bunches for
the general people to upgrade and meeting packs for corporate firms.

By analyzing the current trend of market, GhumGham the board need to inspect their
business far reaching, so they decided to build up a website for their services and deliver
it through web.

1
1.2 Objectives
Our oversight of several sites. Our team is seeking a web design team with very strong
familiarity with CMS site development to help us customize our new web site to migrate
information from existing system. High artistic sensibility and creativity are needed. We
are looking to propose and move forward immediately with a short turn around.
Our team have several criteria for this project since we have oversight of several sites.
The minimum we require prior to launch date is:
 Information Architecture
 Graphic and Interface Design
 Initial Content Migration
 Migrating content from two sites into one
 Consistent look and feel
 CMS-based back end
 Social media connections and integration
 Map integration
 maintain search positioning and bookmarks of the existing sites
 One of the existing sites must migrate to a separate CMS site

1.3 Scopes
Our website is designed is designed to provide service related to tours and trips. Some
of the scopes of our website are listed below:
 It provides quality and consistent content.
 It provide features related to self-serve.
 It is designed to explore new place to visit and provide interface to new
destination.
 It will capture metrics.
 It will reduce time and marketing costs.
 It reaches and spotlight on an increasingly broad gathering of onlookers while
connecting with them through significantly inventive and striking travel groups.
 It provide the luxury tour packages.
 It also provides the review of the destination before booking for the trip.

2
1.4 Functions
A successful Web site is about marketing, generating revenue, and maximizing brand
equity. A highly effective Web site should be crafted by a team of knowledgeable,
creative business and marketing professionals, copywriters, graphic designers, and
programmers. The functions of your services or products should be clearly seen with the
use of crisp, clean content and imagery in an attractive format with easy-to-use
navigation.
We watched the Internet emerge as a new media and grow from a novelty to the world’s
most influential marketing and communication tool. We have used our design and
marketing experience to pioneer new ways to brand companies using both traditional and
new media.
There is a HUGE disparity in design and coding among various Web sites. Given the
abundance of “template-style” sites and “Web shops” with little to no marketing or design
expertise, it is hard for companies to realize the value and impact that a well-designed
Web experience can have on customers and on the company’s sales. At our goal is to
make our customers money, not cost them money.

2. Website Development Method

There are some significant steps to take while building up a website. They are:
- HTML codes
- CSS codes
- JAVASCRIPT codes

These are three important steps we lifted to develop our website. Regardless, we
understand that to make a website progressively responsive and dynamic there should be
utilization of other critical languages like:
- PHP
- JQUERY
- BOOTSTRAP and others.

2.1 Introduction to HTML:

HTML (Hypertext Markup Language) is the formatting language where site pages have
been made from the earliest starting point out of the web (HART-DAVIS, 2010, p. 2).
The favor of HTML is to outline the structure of site pages mark-up. The sections that are
3
used in HTML are the structure components of HTML pages. The sections are called tags
in HTML. HTML tags mark bits of stuff, such as, "heading", "paragraph”, "table”, and
so on. (.html) describes the extension of HTML.
The structure of the html is

Figure 2: Screenshot of HTML structure

Head-Title-Body-End
Similarly, in our site, we have coded the html. To begin with, we coded the head part
which contains the title then we coded a body part that contains the contents, images, and
links then we coded an end part.
 Code Snippet of our HTML (index.html):

4
 Description of the Code snippet:

From the above code snippet, we have implemented the different html tags, CSS class,
id and JavaScript to make website structured and responsive. Some of the implemented
html tags are given below:

Tag Description
<b> Defines bold text
<ul> Defines unordered list
<a> Defines anchor tag
<i> Defines italic text
<h1> Defines first heading level
<li> Defines list
<img> Inserts an image
<strong> Defines strong text

 HTML Hyperlinks (Links)

A hyperlink is a link in a web page that leads to another page or to another point on the
same page. You click the hyperlink to switch the browser to the hyperlink’s target or
destination (HART-DAVIS, 2010, p. 16).

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example from the above code snippets:

5
HTML The <img> Tag and the Src Attribute:

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing
tag.
To display an image on a page, you need to use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the image you want to display.
From the above-mentioned code snipped we have used the given img tag

 HTML Forms

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label
elements.

The <form> tag is used to create an HTML form. We have implemented form tag in our
index4.html file to collect the information from the visitors. Below is the example of it:

6
2.2 Introduction to CSS
As we mentioned before, we have implemented various type of html elements. CSS was
invented in 1996. Now there is another important functionality implemented in the
website is Cascading Style Sheet (CSS). Style Sheets – known as Cascading Style Sheets,
or CSS – are the preferred means of applying formatting consistently to your web pages.
CSS enable you to layout web pages exactly as you want them: You can specify margins,
idents, line spacing, font sizes, and more (HART-DAVIS, 2010, p. 135). Style sheets are
a very powerful tool for the Web site developer. They give you the chance to be
completely consistent with the look and feel of your pages, while giving you much more
control over the layout and design than straight HTML ever did.

There are three ways of inserting a style sheet:

• External style sheet: External stylesheets allow someone to format their webpage
(much like internal) but on a separate document. This means that you can have 2 or more
workplaces (as you can link more than one stylesheet into your document) giving you a
much cleaner workspace (UKEssays, 2017).

• Internal style sheet: Internal styling takes place in the head of the html document.
This means that if you are customising the page, you can see everything from scrolling.
The internal styling is placed in a inside the tags (UKEssays, 2017).

7
• Inline styles: An inline style sheet only affects the tag it is in. This means that
you can change small details of the page without changing everything on every single
page (UKEssays, 2017)

 Code snippet of CSS:

In our webpage we mainly followed the external style sheet. An external style sheet is
ideal when the style is applied to many pages. With an external style sheet, you can change
the look of an entire Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the <head> section:

The implemented example of the external css from our project is given above

From the above code snipped there is two link which is linked/connected with CSS. The
tag <link rel=” stylesheet” href=”css/style.css”> where the external CSS file is linked.

2.3 Introduction to JavaScript

The JavaScript language was created by Netscape in 1996 and included in their Netscape
Navigator (NN), 2.0 browser via an interpreter that reads and executes the JavaScript
included in .html pages (Paul Wilton, 2002, p. 6). JavaScript is composed of statements
that when executed perform a desired function. For example, the JavaScript statement
document.write(“hello”) displays the word hello in the browser (Murdock, 2001, p. 4).
Some features of JavaScript are:
• JavaScript is designed to add interactivity to HTML pages

• JavaScript is a scripting language

• A scripting language is a lightweight programming language

• JavaScript is usually embedded directly into HTML pages

• JavaScript is an interpreted language (means that scripts execute without preliminary

compilation)

• Everyone can use JavaScript without purchasing a license

8
 Code snippet of Java Script:

JavaScript is placed between the <script> tag in html. From the code snipped above:

<script src="js/script.js"></script> JavaScript is the default scripting language in

HTML.

JavaScript in <head> and <body>

JavaScript in <head>:

In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked when a button is clicked:

We have called the linked in <script src="js/html5shiv.js"></script> the file name is

html5shiv.js
c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section
{display:block}mark{background:#FF0;color:#000}</style>";

 JavaScript Form Validation:

HTML form validation can be done by JavaScript. One of the useful ways, that JavaScript
can be used with form is to validate the form data before it is sent to the server. If invalid
values are identified and corrected before making a server request, then many unnecessary
server requests can be eliminated. For example, you can validate a phone number to make
sure that it doesn’t include any letters (Murdock, 2001, p. 214).

If a form field (fname) is empty, this function alerts a message, and returns false, to
prevent the form from being submitted:

Here the JavaScript function is called in heading section in index4.html of the html page
i.e. <script src="js/TMForm.js"></script> From the link TMForm.js the given code
snipped, if the function can be called when the form is submitted.

9
3. Screenshots of all the pages
The screenshots of each page with description is given below, due to the full screen mode
screenshot the image might not be clearly visible we have included the screenshot folder
for better quality. For now, let’s start with the home page (i.e. index.html):
3.1 HOME PAGE:

10
 Figure 3: Home page of the project (i.e. GhumGham.)

The above-mentioned screenshot image is the home page of our project for GhumGham.
In this home page we have used HTML, CSS, JavaScript, jQuery, PHP and Ajax. There
is a menu bar for three different pages (HOT TOURS, SPECIAL OFFERS, BLOG,
CONTACT US) which is described below.

The main contents “Mustang, Rara and Pokhara” is the prime product (places) including
the prices. where our client wants to sell in package tour. keeps on scrolling in the top.

11
And other content is for the different places (product) where the places is hyperlinked for
more details so that the customers would know the itinerary and price details. When user
clicks the learn more text which has got special color (light red), all the specification of
the places will be displayed.

We have used multiple images which animates and changes every 2 second. There is a
booking form which makes the page dynamic because of the we have used server-side
scripting language i.e. PHP. The form is linked with the database to collect information
from the users and there is an API (Application Program Integration) system to let the
customers know about the availability of the request.

On the right-hand side there is a small division to introduce the company and the
testimonials of the clients.

Above the footer section there is three division for Latest news which provides the news
article related to the travel and tours. Finally, there is a footer section where we have
included the copyright policy, social media icon linked with the social media account (i.e.
Facebook, twitter and google Plus) and the link to the developer website.

When the user clicks HOT TOURS button from the menu bar, the following different
page will show the contains with full information about the different places in reasonable
prices. Each division included the product details which is hyperlinked with other pages.
which is shown in the below screenshot image:

12
3.2 HOT TOURS PAGE:

Figure 4: HOT TOUR PACKAGE

The above page contains the different cities with reasonable price details. To know the
further details, the users must click Learn More button. We have included eight different
places as shown in the figure above.
In the footer section there are social media icons and the privacy policy of GhumGham
Along with our webpage.

13
When the user clicks SPECIAL OFFERS button from the menu bar, the following
different page will show some exciting trek information with article. The users could
know more information about the trekking places.
3.3 SPECIAL OFFERS PAGE:

Figure 5: Special Offers page (index2.html)

The above snapshot shows the different places with special offers. The article of each
places is linked with another page with full information. There are three places with
special offers (Annapurna Trek, Chitwan Jungle Safari and Shey Phoksundo Trekking).
On the right-hand side there is more cities names. Each term carries different page in
detail. The footer section includes the social media icons, privacy policy of the company
and the link to the developer company.
14
When the users click the BLOG button from the menu bar the following screenshot will
appear:
3.4 BLOG PAGE:

Figure 6: Blog page (index3.html)

15
The above page contains post related to the travel. To know more about the experience
the users must click the learn more button. Which is hyperlinked with another page
included full article. The main objective to create this page is provide the travel
experiences information. On the right-hand side there is multiple choice categories to read
for the travels and tours purpose.
In the footer section there are social media icons and the privacy policy of GhumGham.
Along with the developer webpage.
When the user clicks CONTACT US button from the menu bar, the following different
page will show the contact details along with the contact form. The below screenshot
shows the contact us page:

3.5 CONTACT US PAGE:

Figure 7: Contact Us page (index4.html)

From the above snapshot, we can see that there is a contact information for the users so
that they could directly contact with the GhumGham. We have included our email, phone
number, address also the google map. Furthermore, on the right-hand side there is Get in
16
touch form where users can provide their information and comment so that GhumGham
could response their query as per their request. Before the footer section there is a precise
google location map to find out the company via google location map application. We
have included the iframe code provided by google map and included in our coding part.
In the footer section there are social media icons and the privacy policy of GhumGham.
Along with our webpage.

3.5.1 Booking Form:

From the home page (i.e. index.html) there is a booking form which makes the page
dynamic because of the we have used server-side scripting language i.e. PHP. The form
is linked with the database to collect information from the users and there is an API
(Application Program Integration) system to let the customers know about the availability
of the request. The screenshot is given below:

Figure 8: Booking Form

17
When the user clicks see learn more text, the following type of page will open that
contains the full information about the places and the product itinerary which is shown in
the blow screenshot image:

Figure 9: Pokhara Itinerary (pokhara.html)

18
The above page contains the Itinerary Details of Pokhara Tour Package. Where we have
included the 2 days-3 nights tour package from Kathmandu to Pokhara. The proper details
for the customer from pick up to drop up including the timing of the tour.
The description of the City and different places for visit including the images. In the footer
section there is a call to action button for booking the tour package. Customers can
directly call or email for booking.

Again, from the homepage there is other tour package for “Mustang” after clicking the
Learn more button the following image will display:

19
Figure 10: Mustang itinerary page (indexx.html)

20
The above page contains the Itinerary Details of Mustang Tour Package. Where we have
included the 3 days-4 nights days tour package from Kathmandu to Mustang. We have
mentioned the proper details for the customer from pick up to drop up including the timing
frame for entire travel period. There is two division in the page on the right side there is
a large vertical image and on the left side the is a product description.
The description of the City and different places including Muktinath Temple, Upper
Mustang, Lower Mustang etc. In the footer section there is a call to action button for
booking the tour package. Customers can directly call for booking.

Again, from the homepage there is another tour package for “Rara, Lake” after clicking
the Learn more button the following image will display:

21
Figure 11: Rara, Lake Tour itinerary page (generic.html)

22
The above page contains the Itinerary Details of Mugu Tour Package. Where we have
included the 4 days -5 nights (varies upon transport medium) days tour package from
Kathmandu to Mustang. We have mentioned the proper details for the customer from pick
up to drop up including the time frame for entire travel period. There are three options for
different travel medium. Option 1 is by AIR, second is 2 Jeep service, Bus service and
third option is Jeep and Bus.

Above the footer section there is a call to action button for booking the tour package.
Customers can directly call for booking.

In footer section there is a copyright and link to the web developer company.
Again, from the homepage there is three division for other three cities for tour package.
Below the main screen slide “Kathmandu, Dharan & Chitwan” cities are shown with the
link for further details. The below image is snapped from the home page to shoe the travel
package for three cities.

Figure 12: Three division tour package.

From the above image the product details are hyperlinked to another page, In the
Kathmandu section if the user clicks on Learn More button the following page will
appear:

23
Figure 13: Kathmandu tour package page (index.html)

24
The above page contains the Itinerary Details of Kathmandu city tour Package. Where we
have included the 4 days -6 nights days within Kathmandu Valley. We have mentioned
the proper details for the customer from pick up to drop up including the time frame for
entire travel period. We have included some stunning images in the gallery section in this
page.
The image will express some exciting places in the Kathmandu Valley. We have also
included the proper scheduling from day 1 to day 6 including the place images. In footer
section there is a copyright and link to the web developer company.

From the figure 5 image the product details are hyperlinked to another page, In the Dharan
section if the user clicks on Learn More button the following page will appear:

25
Figure 14: Dharan Tour package itinerary (indexx.html)

26
The above page contains the Itinerary Details of Dharan tour Package. Where we have
included the 6 days -5 nights days from Kathmandu to Dharan. We have mentioned the
proper details for the customer from pick up to drop up including the time frame for entire
travel period. We have included some stunning images in the gallery section in this page.
The image will express some exciting places in the Dharan. We have also included the
proper scheduling from day 1 to day 6 including the place images.

In footer section there is a copyright and link to the web developer company.

From the figure 5 image the product details are hyperlinked to another page, In the
Chitwan section, if the user clicks on Learn More button the following page will appear:

27
Figure 15: Chitwan Tour package itinerary (indexxx.html)

28
4. Navigational Structure

Figure 16 : Main Navigational Structure

The motivation behind the main navigation is to partition the website content (which
could be 10-15 pages) into few menu choices. This can be anything from 4 to 8 or even
10 primary menu alternatives. Every one of these menu alternatives speaks to a 'segment'
of the site. It enables the client to realize where to begin looking. For example, Target
Hot tours are constantly open arranged, with a different travel packages of items
accessible. To help the users to find these package tour. Users can be grouped and
differentiate to show the main contents of the page, About, Hot tours, Special offers, Blog
and Contact us. The main navigation of a website serves the same function. A navigation
bar can give readers prompt information of the profundity of site. Simply looking over
our navigation connections should give them an idea of what's on offer and what's here
that they certainly need to see. Having a completely highlighted navigation bar guarantees
the reader that there's parts to see and do and urges them to investigate a little bit.

4.1 Justification of navigation Structure:

There's a workmanship to adequately directing our readers around our site, with the goal
that they realize how much content is accessible, and where to find things when they need
them. The most straightforward approach to make a site simple to explore is just to not
astound the reader: put things where you would anticipate that them will be situated. The
significance of navigation structure can't be over-stressed. Without navigation, a site loses
all sense of structure and association. 5 navigational structures are described below which
are kept in our project.

4.1.1 About:
This page describes about the main packages that we are offering to our client along with
the booking form for our client to book the page. Also, brief explanation of our team and
the review of our clients are kept in the about page.

4.1.2 Hot tours:

Hot tours describe about all the other packages that are currently the hot destination to
visit for our clients. This page gives the overview of what places to visit in the current

29
season. This page keeps on updating according to the season and places to visit in the
current time.
4.1.3 Special offers:

This page is very helpful for client as it shows about all the places that our client can visit
in Nepal. This page describes about all the destinations that could not fit on about and hot
tours page.

4.1.4 Blog:

Blog page is made for our clients to see about the tours that we have done before. It
includes blog of the places visited and the activities that our clients did in their past trip.

4.1.5 Contacts:

This page gives our client opportunities to give us feedback or have any query to solve.
We are obliged to reply message of our client within one working day. Along with the
feedback form, we have provided all the details about our address connecting it with
google map, as well as our phone number, email address and fax number.

30
5. Conclusion
The researchers had experienced profound research (i.e. from books and diverse sites for
e.g. www.w3school.org) and came to think about various labels uses to fabricate website
pages. Nonetheless, it is our first site and appears as basic yet in addition, every one of us
are capable to finish this task productively. It was extremely intense undertaking for us
i.e. how to begin? Furthermore, what point would it be advisable for us to pick? In the
meantime, we found our mentor Mr. Ravi Rauniyar who helped us in our task with all his
heart. We are grateful to him for giving us supportive assets of HTML, CSS, and
JAVASCRIPT utilized for creating website pages. This site is made by utilizing diverse
HTML, CSS, and JAVASCRIPT tag. It took around 18 days to finish the entire
undertaking including documentation. This venture helped us on understanding the
fundamental idea of how HTML, CSS and JAVASCRIPT can be utilized to construct a
website. We learned employments of site and everyday life.
A portion of the significant employments of site we learned are followed beneath:
• To show the content of business associations

• To show the data of different items

• To purchase and move items

• To make greeting pages for partner promoting

• To make a store of various items

We comprehended that to any associations nowadays, the sites are vital to exhibit its plans
of action and to pick up clients. A few organizations even move the items with the
utilization of site. In this way, in the cutting-edge advanced world, so sites assume a vital
job in each field of association.
The developers had come across to live the developed website from
https://www.000webhost.com which provides the free server space. The link is given
below:
http://ghumgham.cf/
The website can be built on the prototype:
A website prototype can be any deride up or demo of what a site will look like when it
goes live. It very well may be anything from a paper outline, to an interactive HTML
model. Be that as it may, ordinarily when individuals discuss a model, they are alluding
to an intelligent model or something to that affect which enables clients to explore from
page to page and utilize usefulness, for example, drop-down menus.
31
There are a wide range of approaches to make an intuitive model. We've seen interactive
models in PowerPoint, PDF reports and even MS Word. Be that as it may, there are an
assortment of authority prototyping devices accessible available that are explicitly
intended to make prototyping simple. Look at Blasamiq, Axure and Mockingbird for only
a couple of models. We have utilized online stage to structure a model for our customer.
https://www.lucidchart.com gives online platform to make distinctive model structures.
We have connected our model underneath the Appendix. We have separated the web
composition process into 6 stages: 1) Discover 2) Plan 3) Design 4) Develop 5) Launch
6) Maintain. Potential website composition customers might be new to seeing how the
web architecture process functions. Disclosing in detail to our customers is an
extraordinary change to exhibit our skill, authority, and specialist in giving sites that get
results.

Website Link: http://ghumgham.cf/

32
References
Anne Boehm, Z. R., 2018. Murach's HTML5 and CSS3. 4th ed. California: Mike
Murach & Associates.
Anon., 2002. JavaScript Bible. Fourth ed. New Delhi: Wiley Dreamtech India(p) Ltd.
Anon., 2019. w3schools. [Online]
Available at: https://www.w3schools.com/html
[Accessed 12 06 2019].
Bates, C., 2011. Web Programming. Second ed. new Delhi: Wiley India PVT. LTD.
Bayross, I., 2002. Web Enabled commercial Application Development Using... HTML,
DHTML, JavaScript, Perl CGI. 2nd ed. New Delhi: BPB publications.
D.Ballard, B., 2001. Macromedia Dreamweaver 4 fast and easy development. New
Delhi: Ashok K. Ghosh.
Duckett, J., 2014. Web Design with HTML, CSS, JavaScript and jQuery set. 1st ed. New
Delhi: Wiley Publisher.
Gosselin, D., 2001. JavaScript. Delhi: Replica Press PVT.LTD.
Griffiths, D. G. a. D., n.d. Head First C. s.l.:s.n.
Harris, A., 2002. javaScript Programming For The Absolute Beginner. New Delhi-
110001: Asoke K, Ghosh, Prentice - Hall of India Private Limited.
HART-DAVIS, G., 2010. HTML, XHTML & CSS Quick Steps. New Delhi: Tata
McGraw - Hill.
HAVERBEKE, M., n.d. ELOQUENT JAVASCRIPT. 3RD EDITION ed. s.l.:s.n.
http://www.taskmanagementguide.com, n.d. http://www.taskmanagementguide.com.
[Online]
Available at: http://www.taskmanagementguide.com/glossary/what-is-schedule-
feasibility.php
[Accessed 05 July 2019].
Kristina Halvoson, M. R., 2012. Content Strategy For the Web. 2nd ed. New Delhi:
New riders.
MacDonald, M., 2015. Creating a Website: The Missing Manual. 4th ed. california: O'
Reilly Media.
MacLees, N., 2014. jQuery for Designer's. 2nd ed. UK: Packt Publishing - ebooks
account.
Majid, N. B. A., 2014. Testing, K.L Malaysia: APU.
Maycotte, H. O., 2015. Forbes. [Online]
Available at: https://www.forbes.com/sites/homaycotte/2015/09/01/beacon-technology-
the-what-who-how-why-and-where/#f06df2f1aaf8
[Accessed 10 07 2019].
Murdock, K. L., 2001. JavaScript (tm). New Delhi: IDG Books worldwide, Inc.
33
Murdock, K. L., January, 2001. JavaScript. First ed. New Delhi: Jhandewalan, New
delhi.
Paul Wilton, J. M., 2012. Beginning JavaScript. 4th ed. New Delhi-110002: Wiley India
Pvt Limited.
Paul Wilton, S. W. a. S. L., 2002. Practical JavaScript. New Delhi: Dreamtech.
Russel, J. P., 2002. Learn Java. New Delhi: Ashok K. Gosh.
SUEHRING, S., 2013. Java Script Step by Step. 3rd Edition ed. s.l.:s.n.
UKEssays, 2017. UKEssays. [Online]
Available at: https://www.ukessays.com/essays/computer-science/characteristics-
features-css-5084.php
[Accessed 10 July 2019].
Wempen, F., 2006. HTML and XHTML Step by Step. U.S. Edition ed. New Delhi-
110001: Prentice-Hall of India Private LImited.
Williard, W., 2010. Web Design. Second ed. New Delhi: Tata McGraw-Hill.
York, R., 2006. CSS Project (instantresults). New Delhi-110002: Wiley India Pvt. Ltd.
Zafar, R., 2012. https://www.codeproject.com. [Online]
Available at: https://www.codeproject.com/Tips/351122/What-is-software-testing-
What-are-the-different-ty
[Accessed 10 july 2019].

34
APPENDIXES
Wireframe: A basic visual guide used to suggest the layout of fundamental elements in
a web interface. A wireframe is the blueprint of the website. The main purpose is to show
the client how the website will be structured before designing.

Wireframes of GhumGham:

Figure 17: HOME PAGE wireframe

Home page describes about the main packages that we are offering to our client along
with the booking form for our client to book the page. Also, brief explanation of our team
and the review of our clients are kept in the about page.

35
 Figure 18:HOT TOURS wireframe

Hot tours describe about all the other packages that are currently the hot destination to
visit for our clients. This page gives the overview of what places to visit in the current
season. This page keeps on updating according to the season and places to visit in the
current time.

36
 Figure 19: SPECIAL OFFER page wireframe

This page is very helpful for client as it shows about all the places that our client can visit
in Nepal. This page describes about all the destinations that could not fit on about and hot
tours page.

37
 Figure 20: BLOG page wireframe.

Blog page is made for our clients to see about the tours that we have done before. It
includes blog of the places visited and the activities that our clients did in their past trip.

38
 Figure 21: CONTACT US Page wireframe.

This page gives our client opportunities to give us feedback or have any query to solve.
We are obliged to reply message of our client within one working day. Along with the
feedback form, we have provided all the details about our address connecting it with
google map, as well as our phone number, email address and fax number.

39
MARKING SCHEME
Group Component (70%)
Criteria Allocated Marks
Marks Obtained

Design (20%)
Wireframes 15
Navigational Structure 5
Implementation (50%)
Appropriate use of user interface design 5
principle
Appropriate use of JavaScript 10
Appropriate use of CSS 10
Web hosting and publishing 5
Appropriate use of forms to capture 10
information
Responsive Web Design 10
Report (30%)
Introduction 5
Website development method 5
Page screenshots and explanation 5
Justification on navigational structure 5
Conclusion 5
Documentation standard, citations & 5
referencing
Individual Component (30%)
Allocated
Criteria
Marks
Technical Skill 10
Workload & Contribution 10
Presentation 10

40
WORK ACTIVITY LOG SHEET

Name Percentage Signature

Aaditya Jha 33%

Ajay Kumar Sah 33%

Amar Prajapati 33%

41