Contents

Introduction................................................................................................................................................2
Task 1: HTML............................................................................................................................................2
1. DOCTYPE HTML:..................................................................................................................................2
2. Browser compatibility..........................................................................................................................4
3. Checking Of Resolution (1024px):.....................................................................................................5
5. HTML FORM............................................................................................................................................8
5. Media:....................................................................................................................................................9
Task 2: CSS............................................................................................................................................10
1. Screenshots of css..............................................................................................................................10
2. Media Query....................................................................................................................................14
Task 3: Testing website.........................................................................................................................15
1. Browser Testing.................................................................................................................................15
Findings.............................................................................................................................................16
Validation..................................................................................................................................................16
i. Html validation:..................................................................................................................................17
ii. CSS validation.....................................................................................................................................21
Task 4: Critical Evaluation..........................................................................................................................23
i. Evaluation of accessibility issues.........................................................................................................23
ii. Evaluation of effect of CSS on navigation bar....................................................................................23
iii. Evaluation of passenger drop-down list............................................................................................23
iv. Advantages and Disadvantages of using various multimedia............................................................23
v. Advantages and Disadvantages of search bar....................................................................................24
vi. Recommended improvements for development of website (Feedback)..........................................24
Conclusion.............................................................................................................................................25
Introduction

A new airlines company named Budget Flights has been established in Europe.
The company is planning to give cheaper air services to people of Europe with low
flight ticket charge and better accommodation with easier way to access the
booking of tickets and searching flight information’s. The company will be
providing airlines service initially and they are planning to provide hotel and car
rental services to develop as well as expand the company. Hence, as per the given
scenario of Budget Flights I am designing a website using html5 with English
language and CSS(cascading style sheet) that is supportive to notepad++.

Task 1: HTML

Hyper Text Markup Language basically called as HTML shortly. Html basically
used for organizing information and for linking related documents together using
links and such links are known as hyper links.HTML is written in the form of tags.
Here we are using HTML5 which is generally an updated version of HTML.

1. DOCTYPE HTML:
For a browser it is necessary to understand what type of document is being used.
So doctype html is written at the top of a html page to state that we are using
html, xml or xhtml documents. Doctype html is not a tag of html. Doctype refers
to declaration of document known as DTD(Document Type Declaration) it
specifies the markup language rules so that browsers can render it correctly.
 Screenshot 1: DOCTYPE HTML

Here I have used doctype html on my webpage. Usually doctype is used to declare
SGML language particularly on html4.1. But I am using HTML5 on our webpage
and HTML5 doesn’t use SGML language so only to declare the document as HTML
type doctype html is used. As per the scenario I have used doctype html in all 8
html pages.
2. Browser compatibility.
Browser compatibility is necessary to test our html page on different browsers
and check if there comes any change or not. Below shown are the screenshots of
homepage .

homepage displayed in Google

 home page in Microsoft edge

3. Checking Of Resolution (1024px):

Two screenshots are shown below that shows the resolution checking of
homepage and explore
Screenshot 2: resolution checking of home page
Screenshot 3: resolution check of explore page
5. HTML FORM
As the demand of scenario was the register form of the customers I have kept
screenshots i.e. html code of form and register form.

Screenshot 4: html code of form

Screenshot 5: Registration form

5. Media:
Media states the diagrammatical representation of our document or the image
types we use in our document like png, jpg, gif or text diagrams. I have used png
and jpg mainly in my webpage. I have used png images for social sites logos, icons
of contacts, telephone, emails etc. The use of jpg image has been more than png
jpg has been used for logos it has been used in main section for cheap airline
tickets and for background images for section parts for forms and other
background images in html pages.
Task 2: CSS
Cascading style sheet shortly known as CSS describes the element of html to be
displayed in various media. There are mainly three types of css they are internal
css, external css and inline css. The inline css is done within a line that has to be
styled like changing font colors, background colors, font size etc and so more. The
internal css represents the css that is done with in a page and it is done in the
header part. Lastly external css which means linking the css and home page with
link rel tag and as per our scenario I have to use external css for our webpage.

1. Screenshots of css
Here I have kept six to eight screenshots of css that I have done in my website

CSS 1
CSS 2

CSS 3
CSS 4

CSS 5
 CSS 6

CSS 7
 Screenshot 6 : CSS 8

2. Media Query

Screenshot 7 : media query

Task 3: Testing website
The process of testing website to check if the website is properly made or not is
known as testing. The website is tested to know whether the website made meets
certain requirements or not. There are various types of website testing like:
functional testing, performance testing, and browser compatibility testing and
there are further more. Here we are said to test the website using two browsers
and state the difference found between them.

1. Browser Testing
I have tested my website in two different browsers i.e. Google chrome and
Microsoft edge. The screenshots are shown below:

Screenshot 8: website testing on chrome

 Screenshot 9: website testing on edge

Findings
I have tested my website on Google chrome and Microsoft edge and during my
browser testing I found two differences one is difference on date on chrome while
I hover my mouse on depart and return it shows a drop down sign for dates but
on edge the depart date box should be clicked to select the date. And the other
one is in the part of passengers i.e. infants, adults etc while I hover my mouse
there Google chrome shows an up and down button to increase and decrease the
number of passengers. Thus I found that input type date and input type number is
not compatible to every browser.

Validation
Validation is the process to check if the website is made correctly using w3c rules
or not. In the task we are asked to validate our all html pages and css using the
provided website. Further we are asked to screenshot all the validation process of
our website. Thus I have provided all the screenshots and ensured that I have
validated all my html pages.
i. Html validation:
I have created eight html pages as required and the screenshots of their
validation is shown below:

home page validate

mobile apps validate

aboutus validate
arrival and departure validate

checkin information validate

explore validate

fight information validate

 Help and faq validate

ii. CSS validation

css validate
During the validation process I found some errors with my codes. I have missed
the alt attributes in image and some attributes that were left empty. I have
corrected all my errors and successfully validated my website using w3c
validation.
Task 4: Critical Evaluation

I have designed and developed the website for budget flight airlines as per the
requirements. I have designed the website fulfilling all the html validation rules
and shortly evaluated my websites on certain terms:

i. Evaluation of accessibility issues

As a website is developed it is necessary for the website to be able to run on
various web browsers. It is not necessary that all users will have same web
browser and the website should also be accessible to mobile users and users
having older version of mobiles as well as older version of mobiles. Thus budget
flight that I have developed fulfills the requirements to be accessible on different
browsers as I have previously shown the browser testing there is no major
problem on accessibility except some minor errors which can be neglected.

ii. Evaluation of effect of CSS on navigation bar

CSS has played a great role for the horizontal navigation bar that I have created.
Navigation bar is just a number of unordered list which I decorated afterwards
with CSS by removing text decoration, removing list types, displaying inline or
displaying in block. I have also added hover on the navigation bar which makes
the navigation list hover and change color when cursor of mouse is kept on top of
it. Thus I have used external CSS for the styling of navigation bar and made it
horizontally as I was instructed to do.

iii. Evaluation of passenger drop-down list

I was asked to add a drop-down list for passengers and also add a close button
but I was unable to add a drop-down and close button so this evaluation might
not be practical for me.

iv. Advantages and Disadvantages of using various multimedia.

There are various multimedia’s advantages as well as disadvantages while
developing a website. I also have used various multimedia (images) to represent
places logos or social sites. The first advantage of using multimedia is drawing
attention of user’s using a appropriate images, videos and audios that describe
the content can attract the users those who cannot read can know the content
from the images and videos and those who are disable of hearing can know the
context from audios. This helps for branding of website because if every type of
person i.e. literate, illiterate physically challenged etc. if they can use the website
they will promote it. More the website is user friendly more users will use the
website.

On the other hand the disadvantage of using multimedia is all browsers might not
be compatible of different multimedia and it also takes time to load which users
can find it boring as it lately responds.

v. Advantages and Disadvantages of search bar.

As the website was based on airlines it consisted of a search bar which makes the
users easier to search the flights. Search bar makes easier for users to search
flights by just typing few words. It saves time and effort to search the flight
service.

On the other hand it might not be compatible to all versions of web browsers, all
people might not be able to type text so the search bar may not be able to meet
mobile and user friendly requirements.

vi. Recommended improvements for development of website (Feedback).

The website for budget flights is only developed under certain criteria few
contents were added and the website was just designed to check the basic
knowledge of webpage designing. More things could be improved on the website
as we were only allowed to use html and css. Plug-in could be used for adding
better icons in the websites. By using the java script the plus minus button for
number of passengers could be added. The pop-ups page for login could be used.
The flight search could be made voice input. The website can be made more users
friendly and more accessible feature can be added.
Conclusion.
The website is developed as per the requirements and has met the given criteria.
Home page includes the entire given task except the plus minus button to
increase and decrease the number of passengers and java script is needed for
that. The website is accessible to different web browsers. And the website is also
supported for mobile users as resolution check has been done and horizontal bars
will not appear even if opened from mobile browsers. The validation of all html
pages and CSS is done and only single page css is made as required in the task.