ŽILINSKÁ UNIVERZITA V ŽILINE

Ústav celoživotného vzdelávania

WEB DEVELOPMENT, WEB

HOSTING AND WEB DESIGN

Students’ Workbook
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

Learning objectives

In this chapter, you will:

 learn about the work of a web developer
 get information about web hosting
 know steps in web development
 describe website analytics
 learn about web design features
 be able to describe steps in web development
 find out about web hosting and its features

Key terms: CMS (content management system), developer, meta tag, page
optimisation, search engine, user profile, visitor map, WAF (web application
framework), web analytics, web design, web hosting, website analytics, website
traffic, markup, tag, web editor, web page, frame, editor, cascading style sheets,
streaming, broadcasting, plug-in

1 WEB DESIGN AND ARCHITECTURE

TASK 1 Choose some website and discuss its structure, menu and items.
Try to answer the following questions.
1.Which items are mostly at the top of pages?
2.What else can you find at the top of each page (contact
details/menus/search/title...)?
3.What make a website good/easy/difficult to use/interesting?

TASK 2 Fill in the words from the box to the correct place to complete
the menu of an imaginary home page.

Company blog, Prices, Images, Login, FAQs, Player Forum, Contact us,
How to pay, How to play, Videos

SUPER
THE GAME SEE/WATCH PURCHASE ABOUT US COMMUNITY PRIVATE

TASK 3 Try to write down the list of visual aspects important for the web
design.
Then compare your list with the list in the text from page 3.

2
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

READING

Web design is the process of creating the visual aspects of the interface. It
covers the layout, colour scheme, images, logos, type, design elements (links,
buttons…) and all other visible parts. Design is very important part of creating
successful assets.
The visual interface is the design of a website, everything the user sees and
interacts with. It’s the initial step in creating a delightful user experience - UX.
It includes Navigation: the signage of the site, indicating to users where they
are and where they can go. Layout: how content is structured and displayed.
Headers: the usually consistent top part of a web page. Footers: as you may
have guessed, the usually consistent bottom part of the page. Credibility:
telling users that you are who you say you are.
From visual side there are important pars: logo, font replacement, menu and
button style.
When talking about the design we need to consider consistency and the fold.
It is the imaginary line at the bottom of the monitor that divides the immediately
visible part of the website (content above the fold) from the part that is visible
only after scrolling down (content below the fold). Contrast and colours are
very important when displaying text online. If the text and background are the
same colour and there is no contrast, this means that the text will not be
readable. Best practice is to use a light background colour and a dark colour for
the text. Black text on a white or light grey background works well. Contrast is
also
a good way to draw your reader to and differentiate between different aspects of
the page.

TASK 4 Now try to explain the key points from the text (in bold) in your
own words.

2 WEB DEVELOPMENT
TASK 5 Can you think of some key words connected with web
development? Read the text and compare the key words (in bold) with
your ideas. How successful were you?

READING
Web development is the process of taking finished web designs and
transforming them into fully functioning, interactive websites. It makes static
designs more dynamic and enables users to access the website through their
web browsers. This is done by translating the designs into webcoding languages
that can be interpreted and displayed by web browsers. We recognize Server-
side languages and Front-end languages (HTML5, CSS – Cascading Style
Sheets, JavaScript, Flash). WAF (Web application framework) is software
used help create dynamic web properties more quickly by accessing libraries of
code.

When developing a website, you need to think about three key questions:

3
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

• Should your website be static, or should it have a content management system

(CMS)?
• Which server-side language should be used?
• Which front-end language should you use?

CMS stands for content management system, used to manage the content of
a website. If a site is updated frequently and if people other than web
developers need to update the content of a website from any location, a CMS is
used. There are three types of CMS you can choose from: Bespoke: built
specifically for a certain website, and many web-development companies build
their own CMS that they use for their clients. This option is highly tailored and
customised to your website and can be more expensive than other options. It is
also possibly less flexible. Off the shelf: pre-built by an external company or
developer. These can be bought like any other software on the market. Open
source: anyone can see the code that the CMS is built with and can manipulate
or improve it (and share this with everyone else using the CMS). Some widely
used open-source CMS solutions include: WordPress, Joomla or Drupal.
(Source: taken from Rob Stokes. emarketing. Quirk emarketing Ltd. 2008. ISBN: 978-0-620-
56515-8)

TASK 6 Now try to explain the key points from the text (in bold) in your
own words.

TASK 7 Fill in the following flowchart to express the web development

process.

ST
EP
1
ST
EP
2
ST
EP
3

ST
EP
4
ST
EP
5
ST
EP
6

ST
EP
7

TASK 8 Now try to explain the whole process in your own words. How
each step functions?

4
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

TASK 9 Read the following case study about a website development

project. Fill in the following words to the correct place in the correct
form. There are two extra words you don’t need to use.

develop, fan, mobile format, system, ranking, site visit, tool, general content,
premium content, multimedia content, combination, integrate, forum post,
database, area

A web developer's work

Michael Torino is a well-known web developer famous for the websites he has
……………….. and won many awards. Now he is describing his recent project
about a new game fan page.
“Recently I have worked on a project for SMFan, a fan club for the game Super
Mine 5. There were a few other sites for ……………….. of the game and it was
important for me to make it looking exciting and dynamic, to get more
……………….. . The customer wanted me to include two different areas: a public
one for ……………….. and a private one with ……………….. for paying fans.
With my team, we decided to use a ……………….. of PHP, HTML5 and MySQL.
PHP was chosen to ……………….. costs down (it's open source), for its flexibility
and because it is versatile. It means that it ……………….. easily with many other
website ………………... .
We used HTML5 for ……………….. but also used other systems, so that it can be
viewed on various devices, including mobile ones.
The last one, MySQL was good for the private area: ……………….. and other
private data can be stored in its ……………….. .
Speaking of mobile devices, one of the challenges was to make the website
viewable on mobiles and tablets. The team had to make sure that the page can
be seen in ……………….. . We had to work on SEO (search engine optimisation)
because high search ……………….. were required. The result was that all
customers were very pleased with the website. “

3 WEBSITE ANALYTICS
Wikipedia writes that: Web traffic is the amount of data sent and received by
visitors to a website. Web analytics is the measurement of the behaviour of
visitors to a website. In a commercial context, it especially refers to the
measurement of which aspects of the website work towards the business
objectives of Internet marketing initiatives; for example, which landing pages
encourage people to make a purchase. Notable vendors of web analytics
software and services include Google Analytics.

TASK 10 Make a list of information you can get about website traffic
using a website analysis. (reports, overview, visits)

5
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

Source: https://missoulaseogeek.com/best-website-traffic-trackers/

TASK 11 Match the following website analysis tools with their

descriptions.

1 traffic a) information about where the visitors are from

2 meta tag b) invisible information (hidden keyword)
3 visitor map c) information about user and the sites
they browse
4 user profile d) increasing the number of visitors of
your site
5 page optimisation e) movement and actions of visitors on
your site

4 WEB HOSTING
TASK 12 Can you explain the meaning of the verb to host and nouns web
hosting, web host and web hosting service provider? Let's fill in those
words to the following definition from the internet.

…………………. is a service that allows organizations and individuals to post a

website or web page onto the Internet. A …………………., or …………………., is a
business that provides the technologies and services needed for the website or
webpage to be viewed in the Internet. Websites are …………………., or stored, on
special computers called servers.

TASK 13 Check the web page below and find words which best fit the
following definitions.

6
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

1.a system in which each server has only one client's website on it
………………….
2.promise to fix any problems ………………….
3.the time when the service is working ………………….
4.the smallest amount or number possible or necessary ………………….
5.the largest amount of data that can be moved ………………….
6.a unique number to identify a computer on the internet ………………….

(Source: David Hill. English for information technology 2. Pearson. 2012. ISBN: 978-1-4082-5202-
4)
TASK 14 Brainstorming. Fill in this net with the words and phrases
which come to your mind as words being connected with web and web
pages. Try to explain them.

WEB

TASK 15 Can you answer the following questions?

What is a difference between a home page, web page and website? Why do
companies have websites? What is their purpose?

7
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

TASK 16 Read the text and find the answers for the following questions.

1. What is the language used to create web documents?

2. What is the type of software that lets you design web pages without writing
HTML codes?
3. What is the format invented by Adobe to distribute text files over the internet?
4. What is the method of displaying multiple HTML documents in the same
browser window?
5. What are three common graphics formats used on websites?
6. What are the three popular formats used to store and play back video?

READING

The code behind most web pages is HTML (hypertext markup language), which
consists of
commands called tags. Tags are placed around pieces of text to tell the web
browser how to display text or pictures. You can view the source HTML code of
a web page by choosing the Page Source option in your web browser. But you
needn’t learn HTML in order to build your own website. Instead, you can use a
word processor with web design capabilities or a dedicated web editor like
Macromedia Dreamweaver or Microsoft FrontPage. Web editors are user-
friendly and WYSIWYG (What you see is what you get). Different buttons and
menu items let you design a page without writing HTML.
Web page elements – There are a number of different elements that you can
use on a web page:
• Text – displayed in a variety of fonts and sizes. Most text files are available in
two formats:
HTML or PDF (the portable document format that can be viewed with Acrobat
Reader).
• Background – the underlying colours and patterns of a web page
• Tables – with columns and rows, used to position images and text on a page.
• Frames – rectangular areas that allows the display of different pages in the
same browser
window
• Cascading Style Sheets (CSS) – a mechanism for adding styles to web
documents. You could use HTML code to specify the font, text, styles, and
background colour. Nowadays, however, it is more common to use CSS. This
makes it easy to apply presentation changes across a website.
• Graphics, clip art, icons, background templates, wallpaper, and
transparent images – common formats are .jpg (joint photographics experts
group), ideal for pictures with many colours, .gif (graphics interchange format),
ideal for pictures with fewer colours, and .png (portable network graphics),
which supports 16 million colours.
• Hyperlinks – highlighted text or pictures (buttons, image maps, etc.) that act
as links to other pages. If you want to share information with people, you can
use RSS feeds and provide readers with a link to the feed RSS allows

8
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

subscribers to receive updates of blogs, news, podcasts, etc. Before going live,
you should check that all the links work.

Audio, video and animation

Many websites now incorporate audio files, and if you’re designing a site, you
may like to insert songs, podcasts, etc. The most common audio formats are
.wav (Windows wave audio format), .ra (RealAudio file), and .mp3 (MPEG-1
Audio Layer-3). Full-motion video is stored in these formats: .avi (audio video
interleave), .mov (QuickTime movie) and .mpg (moving picture experts group).
If you want to inject something special into your web pages, you can use Adobe
Flash to include interactive animations and streaming audio. Additionally,
you can insert Java applets – small programs that enable the creation of
interactive files. Animations are made up of a series of independent pictures. To
see or hear all these files, you must have the right plug-in, an auxiliary program
that expands the capabilities of your web browser.
(Source: reading + exercises taken from Infotech book)

TASK 17 Match the sentences beginning (1-6) with the correct endings
(a-f).
1. Instructions in HTML
2. Cascading Style Sheets are the way
3. A hyperlink is any clickable text,
4. A plug-in is a small programs
5. Java applets are used to provide
6. RSS feeds are summaries of a web content

a. image or button that takes you to another place on the Web.

b. used for handling audio, video and animation files.
c. are called tags.
d. interactive features to web applications.
e. to define the presentation of web pages, from fonts and colours to page
layout.
f. published in the Really Simple Syndication format for download

LISTENING
TASK 18 Listen to an interview with a web designer describing how to
design a website and put these steps into the correct order.

__ Write and format the text

__ Decide the content and structure for the website
__ Publish the websites
__ Insert computer graphics and sounds
__ Keep the website updated
__ Link related pages to each other using hyperlinks

9
 Ústav celoživotného vzdelávania – WEB DEVELOPMENT, WEB HOSTING AND WEB DESIGN

TASK 19 Listen again and decide whether these design guidelines are
true or false.

1. Plan your website carefully. T/F

2. Use a web editor. It will make it earier to create your pages. T/F
3. Insert photos or animations just to make the pages look attractive. T/F
4. Place a large number of graphics on your pages. T/F
5. Use very bright colours. T/F
6. Put a lot of links on one page. T/F
7. Check that all the links on your web pages are correct. T/F
8. Once they are published, update your pages regularly. T/F

GLOSSARY

assets web hosting

CMS (content management system) website analytics
credibility website traffic
CSS (cascading style sheet) applet
developer background
meta tag broadcasting
page optimisation button
page optimisation clip art
search engine HTML – hypertext markup language
the fold hyperlink
frame markup
to host plug-in
user profile streaming
user profile tag
visitor map template
visitor map
to insert
WAF (web application framework)
wallpaper
web analytics
web editor
web design

1
0