Web Authoring: Tourism Website Project, University of XYZ, Sem 1

This assignment presents a tourism website project developed using HTML and CSS, focusing on creating a user-friendly travel guide for a European city. The website includes a homepage with introductory information, images, and user reviews, a 'Places' page showcasing various attractions, a 'Transport' page, and a 'Travel Tips' page. The project details the use of HTML5 and CSS3 for website structure, layout, and design, including the implementation of a navigation bar, footer, and the use of semantic HTML elements like , , and . The report discusses the website's usability, accessibility, and the use of tags and Bootstrap CSS for responsive design and layout. The website is designed to be lightweight and easily accessible across different web browsers, with an emphasis on efficient image usage and a clear, organized structure. The project also highlights the implementation of primary and secondary navigation menus for improved user experience.

Running head: TOURISM WEBSITE
Tourism Website
Name of the student:
Name of the University:
Author note:

2
TOURISM WEBSITE
Usability and Accessibility
This a static website which consists of extremely compressed but high quality of
graphical images and no other form of multimedia. This makes the website more lightweight for
future uses. If the website is ever considered to be hosted from any online source, the loading
time for each web page would be minimum. The website has been designed using HTML5 and
CSS3 languages and hence can be easily accessible from any web browser.
Moreover, the website allows improved usability features through the providences of
primary and secondary navigation. The primary navigation bar can be located at the top of every
webpage within the website. This contains the links to the main pages on the website namely the
home page, the Places, the Transportation and the Travel Tips pages. The transportation page
also has a sub-menu or a secondary menu that can take the website visitor to the secondary Bus,
Taxi, Train or Metro page. The fonts and images used in the website have also been carefully
sized and placed so as to enhance the look and feel of the website.
Use of HTML Semantic Elements
The website design process required to first create a basic wireframe for each of the web
pages and based on them were the segments in the webpage placed. The most important HTML
tags like the <header> and the <footer> tags were used in order to separate the navigation area,
the basic content area and the footer section. The header section consisted of the banner image
for the home page and also the primary navigation bar on each page. The footer tag was used to
present the copyright information of the website in the footer section, at the very bottom. The

3
TOURISM WEBSITE
<nav> tag has also been used inside the header section to denote the navigational section. The
<article> tag assisted in producing the written portions for the website.
Layout Techniques
A varied number of <div> tags has been used to segregate each section from the other
and such that they can be easily used and formatted using the Cascaded Style Sheets (CSS). This
helps to identify each section of the website and then format them according to the columnar
requirements. The divs help to make sure that the proper box-layout has been implemented in
order to provide a proper marginal and padding around each of the objects or sections within the
various webpages. Also, the Bootstrap CSS assistance has been taken to organize the sections
based on the design specifications to align the elements in proper rows and columns.

4
TOURISM WEBSITE
Website Screenshots

5
TOURISM WEBSITE

6
TOURISM WEBSITE